@jbrowse/plugin-data-management 2.3.2 → 2.3.4

package/src/HierarchicalTrackSelectorWidget/components/tree/HierarchicalTree.tsx

@@ -0,0 +1,101 @@
+import React, { useCallback, useMemo, useRef, useEffect } from 'react'
+import { observer } from 'mobx-react'
+import { VariableSizeTree } from 'react-vtree'
+import { getSession } from '@jbrowse/core/util'
+// locals
+import { TreeNode, HierarchicalTrackSelectorModel } from '../../model'
+import Node from './TrackListNode'
+
+function getNodeData(
+  node: TreeNode,
+  nestingLevel: number,
+  extra: Record<string, unknown>,
+  selection: Record<string, unknown>,
+) {
+  const isLeaf = !!node.conf
+  const selected = !!selection[node.id]
+  return {
+    data: {
+      defaultHeight: isLeaf ? 22 : 40,
+      isLeaf,
+      isOpenByDefault: true,
+      nestingLevel,
+      selected,
+      ...node,
+      ...extra,
+    },
+    nestingLevel,
+    node,
+  }
+}
+
+type NodeData = ReturnType<typeof getNodeData>
+
+// this is the main tree component for the hierarchical track selector in note:
+// in jbrowse-web the toolbar is position="sticky" which means the autosizer
+// includes the height of the toolbar, so we subtract the given offsets
+export default observer(function HierarchicalTree({
+  height,
+  tree,
+  model,
+}: {
+  height: number
+  tree: TreeNode
+  model: HierarchicalTrackSelectorModel
+}) {
+  const { filterText, selection, view } = model
+  const treeRef = useRef<NodeData>(null)
+  const session = getSession(model)
+  const { drawerPosition } = session
+  const obj = useMemo(
+    () => Object.fromEntries(selection.map(s => [s.trackId, s])),
+    [selection],
+  )
+
+  const extra = useMemo(
+    () => ({
+      onChange: (trackId: string) => view.toggleTrack(trackId),
+      toggleCollapse: (pathName: string) => model.toggleCategory(pathName),
+      tree,
+      model,
+      drawerPosition,
+    }),
+    [view, model, drawerPosition, tree],
+  )
+  const treeWalker = useCallback(
+    function* treeWalker() {
+      for (let i = 0; i < tree.children.length; i++) {
+        const r = tree.children[i]
+        yield getNodeData(r, 0, extra, obj)
+      }
+
+      while (true) {
+        // @ts-ignore
+        const parentMeta = yield
+
+        for (let i = 0; i < parentMeta.node.children.length; i++) {
+          const curr = parentMeta.node.children[i]
+          yield getNodeData(curr, parentMeta.nestingLevel + 1, extra, obj)
+        }
+      }
+    },
+    [tree, extra, obj],
+  )
+
+  useEffect(() => {
+    // @ts-ignore
+    treeRef.current.recomputeTree({
+      refreshNodes: true,
+      useDefaultHeight: true,
+    })
+  }, [tree, filterText])
+  return (
+    <>
+      {/* @ts-ignore */}
+      <VariableSizeTree ref={treeRef} treeWalker={treeWalker} height={height}>
+        {/* @ts-ignore */}
+        {Node}
+      </VariableSizeTree>
+    </>
+  )
+})

package/src/HierarchicalTrackSelectorWidget/components/tree/TrackCategory.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react'
+import { IconButton, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowRightIcon from '@mui/icons-material/ArrowRight'
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+
+// locals
+import { getAllChildren, treeToMap, NodeData } from '../util'
+
+const useStyles = makeStyles()(theme => ({
+  contrastColor: {
+    color: theme.palette.secondary.contrastText,
+  },
+
+  // margin:auto 0 to center text vertically
+  accordionText: {
+    margin: 'auto 0',
+    // width 100 so you can click anywhere on the category bar
+    width: '100%',
+  },
+}))
+
+export default function Category({
+  isOpen,
+  setOpen,
+  data,
+}: {
+  isOpen: boolean
+  setOpen: (arg: boolean) => void
+  data: NodeData
+}) {
+  const { classes } = useStyles()
+  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
+  const { name, model, id, tree, toggleCollapse } = data
+
+  return (
+    <div
+      className={classes.accordionText}
+      onClick={() => {
+        if (!menuEl) {
+          toggleCollapse(id)
+          setOpen(!isOpen)
+        }
+      }}
+    >
+      <Typography>
+        {isOpen ? <ArrowDropDownIcon /> : <ArrowRightIcon />}
+        {name}
+        <IconButton
+          onClick={event => {
+            setMenuEl(event.currentTarget)
+            event.stopPropagation()
+          }}
+          className={classes.contrastColor}
+        >
+          <MoreHorizIcon />
+        </IconButton>
+      </Typography>
+      {menuEl ? (
+        <JBrowseMenu
+          anchorEl={menuEl}
+          menuItems={[
+            {
+              label: 'Add to selection',
+              onClick: () => {
+                const r = treeToMap(tree).get(id)
+                model.addToSelection(getAllChildren(r))
+              },
+            },
+            {
+              label: 'Remove from selection',
+              onClick: () => {
+                const r = treeToMap(tree).get(id)
+                model.removeFromSelection(getAllChildren(r))
+              },
+            },
+          ]}
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setMenuEl(null)
+          }}
+          open={Boolean(menuEl)}
+          onClose={() => setMenuEl(null)}
+        />
+      ) : null}
+    </div>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/tree/TrackLabel.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+import { Checkbox, FormControlLabel, IconButton, Tooltip } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import { getSession } from '@jbrowse/core/util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+
+// icons
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+
+// locals
+import { isUnsupported, NodeData } from '../util'
+import { SanitizedHTML } from '@jbrowse/core/ui'
+
+const useStyles = makeStyles()({
+  compactCheckbox: {
+    padding: 0,
+  },
+
+  checkboxLabel: {
+    marginRight: 0,
+    '&:hover': {
+      backgroundColor: '#eee',
+    },
+  },
+})
+
+export interface InfoArgs {
+  target: HTMLElement
+  id: string
+  conf: AnyConfigurationModel
+}
+
+export default function TrackLabel({ data }: { data: NodeData }) {
+  const { classes } = useStyles()
+  const { checked, conf, model, drawerPosition, id, name, onChange, selected } =
+    data
+  const [info, setInfo] = useState<InfoArgs>()
+  const description = (conf && readConfObject(conf, ['description'])) || ''
+  return (
+    <>
+      <Tooltip
+        title={description + (selected ? ' (in selection)' : '')}
+        placement={drawerPosition === 'left' ? 'right' : 'left'}
+      >
+        <FormControlLabel
+          className={classes.checkboxLabel}
+          control={
+            <Checkbox
+              className={classes.compactCheckbox}
+              checked={checked}
+              onChange={() => onChange(id)}
+              disabled={isUnsupported(name)}
+              inputProps={{
+                // @ts-ignore
+                'data-testid': `htsTrackEntry-${id}`,
+              }}
+            />
+          }
+          label={
+            <div style={{ background: selected ? '#cccc' : undefined }}>
+              <SanitizedHTML html={name} />
+            </div>
+          }
+        />
+      </Tooltip>
+      <IconButton
+        onClick={e => setInfo({ target: e.currentTarget, id, conf })}
+        style={{ padding: 0 }}
+        color="secondary"
+        data-testid={`htsTrackEntryMenu-${id}`}
+      >
+        <MoreHorizIcon />
+      </IconButton>
+
+      {info ? (
+        <JBrowseMenu
+          anchorEl={info?.target}
+          menuItems={[
+            ...(getSession(model).getTrackActionMenuItems?.(info.conf) || []),
+            {
+              label: 'Add to selection',
+              onClick: () => model.addToSelection([info.conf]),
+            },
+            ...(selected
+              ? [
+                  {
+                    label: 'Remove from selection',
+                    onClick: () => model.removeFromSelection([info.conf]),
+                  },
+                ]
+              : []),
+          ]}
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setInfo(undefined)
+          }}
+          open={Boolean(info)}
+          onClose={() => setInfo(undefined)}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/tree/TrackListNode.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import Category from './TrackCategory'
+import TrackLabel from './TrackLabel'
+import { NodeData } from '../util'
+
+const useStyles = makeStyles()(theme => ({
+  // this accordionBase element's small padding is used to give a margin to
+  // accordionColor it a "margin" because the virtualized elements can't really
+  // use margin in a conventional way (it doesn't affect layout)
+  accordionBase: {
+    display: 'flex',
+  },
+
+  accordionCard: {
+    padding: 3,
+    cursor: 'pointer',
+    display: 'flex',
+  },
+
+  nestingLevelMarker: {
+    position: 'absolute',
+    borderLeft: '1.5px solid #555',
+  },
+  // accordionColor set's display:flex so that the child accordionText use
+  // vertically centered text
+  accordionColor: {
+    background: theme.palette.tertiary.main,
+    color: theme.palette.tertiary.contrastText,
+    width: '100%',
+    display: 'flex',
+    paddingLeft: 5,
+  },
+}))
+
+// An individual node in the track selector. Note: manually sets cursor:
+// pointer improves usability for what can be clicked
+export default function Node({
+  data,
+  isOpen,
+  style,
+  setOpen,
+}: {
+  data: NodeData
+  isOpen: boolean
+  style?: { height: number }
+  setOpen: (arg: boolean) => void
+}) {
+  const { isLeaf, nestingLevel } = data
+
+  const { classes } = useStyles()
+  const width = 10
+  const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
+
+  return (
+    <div style={style} className={!isLeaf ? classes.accordionBase : undefined}>
+      {new Array(nestingLevel).fill(0).map((_, idx) => (
+        <div
+          key={`mark-${idx}`}
+          style={{ left: idx * width + 4, height: style?.height }}
+          className={classes.nestingLevelMarker}
+        />
+      ))}
+      <div
+        className={!isLeaf ? classes.accordionCard : undefined}
+        style={{
+          marginLeft,
+          whiteSpace: 'nowrap',
+          width: '100%',
+        }}
+      >
+        <div className={!isLeaf ? classes.accordionColor : undefined}>
+          {!isLeaf ? (
+            <Category isOpen={isOpen} data={data} setOpen={setOpen} />
+          ) : (
+            <TrackLabel data={data} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/util.ts

@@ -1,5 +1,20 @@
 import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { TreeNode } from '../model'
+import { HierarchicalTrackSelectorModel, TreeNode } from '../model'
+
+export interface NodeData {
+  nestingLevel: number
+  checked: boolean
+  conf: AnyConfigurationModel
+  drawerPosition: unknown
+  id: string
+  isLeaf: boolean
+  name: string
+  onChange: Function
+  toggleCollapse: (arg: string) => void
+  tree: TreeNode
+  selected: boolean
+  model: HierarchicalTrackSelectorModel
+}
 
 export function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[] {
   // @ts-ignore
@@ -9,3 +24,18 @@ export function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[] {
     ) || []
   ).flat(Infinity)
 }
+
+export function treeToMap(tree: TreeNode, map = new Map<string, TreeNode>()) {
+  if (tree.id && tree.children.length) {
+    map.set(tree.id, tree)
+  }
+  for (let i = 0; i < tree.children.length; i++) {
+    const node = tree.children[i]
+    treeToMap(node, map)
+  }
+  return map
+}
+
+export function isUnsupported(name = '') {
+  return name.endsWith('(Unsupported)') || name.endsWith('(Unknown)')
+}

package/src/HierarchicalTrackSelectorWidget/index.ts

@@ -1,5 +1,22 @@
 import stateModelFactory, { HierarchicalTrackSelectorModel } from './model'
 import configSchema from './configSchema'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
+import { lazy } from 'react'
 
 export { stateModelFactory, configSchema }
 export type { HierarchicalTrackSelectorModel }
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addWidgetType(() => {
+    return new WidgetType({
+      name: 'HierarchicalTrackSelectorWidget',
+      heading: 'Available tracks',
+      configSchema,
+      stateModel: stateModelFactory(pluginManager),
+      ReactComponent: lazy(
+        () => import('./components/HierarchicalTrackSelector'),
+      ),
+    })
+  })
+}

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -18,16 +18,16 @@ function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
   return !!a1.find(value => a2.includes(value))
 }
 
-function passesFilter(
-  filter: string,
-  config: AnyConfigurationModel,
+export function matches(
+  query: string,
+  conf: AnyConfigurationModel,
   session: AbstractSessionModel,
 ) {
-  const categories = readConfObject(config, 'category') as string[] | undefined
-  const filterLower = filter.toLowerCase()
+  const categories = readConfObject(conf, 'category') as string[] | undefined
+  const queryLower = query.toLowerCase()
   return (
-    getTrackName(config, session).toLowerCase().includes(filterLower) ||
-    !!categories?.filter(c => c.toLowerCase().includes(filterLower)).length
+    getTrackName(conf, session).toLowerCase().includes(queryLower) ||
+    !!categories?.filter(c => c.toLowerCase().includes(queryLower)).length
   )
 }
 
@@ -74,7 +74,7 @@ export function generateHierarchy(
   const session = getSession(model)
 
   trackConfigurations
-    .filter(conf => passesFilter(filterText, conf, session))
+    .filter(conf => matches(filterText, conf, session))
     .forEach(conf => {
       // copy the categories since this array can be mutated downstream
       const categories = [...(readConfObject(conf, 'category') || [])]
@@ -131,15 +131,18 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
       id: ElementId,
       type: types.literal('HierarchicalTrackSelectorWidget'),
       collapsed: types.map(types.boolean),
-      filterText: '',
       view: types.safeReference(
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
     })
     .volatile(() => ({
       selection: [] as AnyConfigurationModel[],
+      filterText: '',
     }))
     .actions(self => ({
+      setSelection(elt: AnyConfigurationModel[]) {
+        self.selection = elt
+      },
       addToSelection(elt: AnyConfigurationModel[]) {
         self.selection = dedupe([...self.selection, ...elt], e => e.trackId)
       },

package/src/PluginStoreWidget/components/PluginStoreWidget.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { getSnapshot, getParent } from 'mobx-state-tree'
+import { ThemeProvider } from '@mui/material/styles'
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import { createTestSession } from '@jbrowse/web/src/rootModel'
+
+// locals
+import PluginStoreWidget from './PluginStoreWidget'
+import { PluginStoreModel } from '../model'
+
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
+
+const plugins = {
+  plugins: [
+    {
+      name: 'MsaView',
+      authors: ['Colin Diesh'],
+      description: 'multiple sequence alignment browser plugin for JBrowse 2',
+      location: 'https://github.com/GMOD/jbrowse-plugin-msaview',
+      url: 'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
+      license: 'Apache License 2.0',
+      image:
+        'https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/msaview-screenshot-fs8.png',
+    },
+  ],
+}
+
+let session: ReturnType<typeof createTestSession>
+let model: PluginStoreModel
+
+beforeEach(() => {
+  session = createTestSession()
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+  const { location } = window
+
+  // @ts-ignore
+  delete window.location
+  window.location = {
+    ...location,
+    reload: jest.fn(),
+  }
+
+  // @ts-ignore
+  fetch.resetMocks()
+
+  // @ts-ignore
+  fetch.mockResponse(JSON.stringify(plugins))
+})
+
+afterEach(cleanup)
+
+test('renders with the available plugins', async () => {
+  const { container, findByText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('Installs a session plugin', async () => {
+  const { findByText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(await findByText('Install'))
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+  expect(getSnapshot(session.sessionPlugins)[0]).toEqual(plugins.plugins[0])
+})
+
+test('plugin store admin - adds a custom plugin correctly', async () => {
+  session = createTestSession({}, true)
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+  const { findByText, getByText, getByLabelText } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(getByText('Add custom plugin'))
+  fireEvent.change(getByLabelText('Plugin URL'), {
+    target: {
+      value:
+        'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
+    },
+  })
+  fireEvent.change(getByLabelText('Plugin name'), {
+    target: {
+      value: 'MsaView',
+    },
+  })
+  fireEvent.click(getByText('Submit'))
+
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+
+  expect(getSnapshot(getParent(session)).jbrowse.plugins).toEqual([
+    {
+      name: 'MsaView',
+      umdUrl:
+        'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
+    },
+  ])
+})
+
+test('plugin store admin - removes a custom plugin correctly', async () => {
+  session = createTestSession({}, true)
+  model = session.addWidget('PluginStoreWidget', 'pluginStoreWidget')
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(session)
+  const { jbrowse } = rootModel
+  jbrowse.addPlugin(plugins.plugins[0])
+  const { findByText, getByText, getByTestId } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      <PluginStoreWidget model={model} />
+    </ThemeProvider>,
+  )
+  await findByText('multiple sequence alignment browser plugin for JBrowse 2')
+  fireEvent.click(getByTestId('removePlugin-SVGPlugin'))
+  fireEvent.click(getByText('Confirm'))
+  await waitFor(() => {
+    expect(window.location.reload).toHaveBeenCalled()
+  })
+})

package/src/PluginStoreWidget/components/__snapshots__/{PluginStoreWidget.test.js.snap → PluginStoreWidget.test.tsx.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
+exports[`renders with the available plugins 1`] = `
 <div
   class="css-1kq0gb6-root"
 >
@@ -16,7 +16,7 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
       Filter plugins
     </label>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
     >
       <input
         aria-invalid="false"

package/src/PluginStoreWidget/index.ts

@@ -1,4 +1,19 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { lazy } from 'react'
 
-export { default as stateModelFactory } from './model'
-export const configSchema = ConfigurationSchema('PluginStoreWidget', {})
+import stateModelFactory from './model'
+const configSchema = ConfigurationSchema('PluginStoreWidget', {})
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addWidgetType(() => {
+    return new WidgetType({
+      name: 'PluginStoreWidget',
+      heading: 'Plugin store',
+      configSchema,
+      stateModel: stateModelFactory(pluginManager),
+      ReactComponent: lazy(() => import('./components/PluginStoreWidget')),
+    })
+  })
+}

package/src/__snapshots__/index.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`adds config editor widget 1`] = `{}`;
+
+exports[`adds connection add widget 1`] = `{}`;
+
+exports[`adds hierarchical track selector 1`] = `{}`;
+
+exports[`adds track add widget 1`] = `{}`;