@jbrowse/plugin-data-management 2.3.2 → 2.3.4

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
-import { cleanup, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { ThemeProvider } from '@mui/material/styles'
 
 // locals
@@ -13,140 +13,136 @@ jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 window.requestIdleCallback = cb => cb()
 window.cancelIdleCallback = () => {}
 
-describe('HierarchicalTrackSelector widget', () => {
-  afterEach(cleanup)
+test('renders nothing with no assembly', () => {
+  const session = createTestSession()
+  const firstView = session.addView('LinearGenomeView')
+  const model = firstView.activateTrackSelector()
 
-  it('renders nothing with no assembly', () => {
-    const session = createTestSession()
-    const firstView = session.addView('LinearGenomeView')
-    const model = firstView.activateTrackSelector()
+  const { container } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      {/* @ts-ignore*/}
+      <HierarchicalTrackSelector model={model} />
+    </ThemeProvider>,
+  )
+  expect(container.firstChild).toMatchSnapshot()
+})
 
-    const { container } = render(
-      <ThemeProvider theme={createJBrowseTheme()}>
-        {/* @ts-ignore*/}
-        <HierarchicalTrackSelector model={model} />
-      </ThemeProvider>,
-    )
-    expect(container.firstChild).toMatchSnapshot()
+test('renders with a couple of uncategorized tracks', async () => {
+  const session = createTestSession()
+  session.addAssemblyConf({
+    name: 'volMyt1',
+    sequence: {
+      trackId: 'sequenceConfigId',
+      type: 'ReferenceSequenceTrack',
+      adapter: {
+        type: 'FromConfigSequenceAdapter',
+        features: [
+          {
+            refName: 'ctgA',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 10,
+            seq: 'cattgttgcg',
+          },
+        ],
+      },
+    },
   })
-
-  it('renders with a couple of uncategorized tracks', async () => {
-    const session = createTestSession()
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'sequenceConfigId',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 10,
-              seq: 'cattgttgcg',
-            },
-          ],
-        },
+  session.addTrackConf({
+    trackId: 'fooC',
+    assemblyNames: ['volMyt1'],
+    type: 'FeatureTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
+  })
+  session.addTrackConf({
+    trackId: 'barC',
+    assemblyNames: ['volMyt1'],
+    type: 'FeatureTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
+  })
+  const firstView = session.addView('LinearGenomeView', {
+    displayedRegions: [
+      {
+        assemblyName: 'volMyt1',
+        refName: 'ctgA',
+        start: 0,
+        end: 1000,
       },
-    })
-    session.addTrackConf({
-      trackId: 'fooC',
-      assemblyNames: ['volMyt1'],
-      type: 'FeatureTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    session.addTrackConf({
-      trackId: 'barC',
-      assemblyNames: ['volMyt1'],
-      type: 'FeatureTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    const firstView = session.addView('LinearGenomeView', {
-      displayedRegions: [
-        {
-          assemblyName: 'volMyt1',
-          refName: 'ctgA',
-          start: 0,
-          end: 1000,
-        },
-      ],
-    })
-    firstView.showTrack(session.sessionTracks[0].trackId)
-    firstView.showTrack(session.sessionTracks[1].trackId)
-    const model = firstView.activateTrackSelector()
-
-    const { container, findByTestId } = render(
-      <ThemeProvider theme={createJBrowseTheme()}>
-        {/* @ts-ignore*/}
-        <HierarchicalTrackSelector model={model} />
-      </ThemeProvider>,
-    )
-    await findByTestId('hierarchical_track_selector')
-    expect(container.firstChild).toMatchSnapshot()
+    ],
   })
+  firstView.showTrack(session.sessionTracks[0].trackId)
+  firstView.showTrack(session.sessionTracks[1].trackId)
+  const model = firstView.activateTrackSelector()
 
-  it('renders with a couple of categorized tracks', async () => {
-    const session = createTestSession()
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'sequenceConfigId',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 10,
-              seq: 'cattgttgcg',
-            },
-          ],
-        },
-      },
-    })
+  const { container, findByTestId } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      {/* @ts-ignore*/}
+      <HierarchicalTrackSelector model={model} />
+    </ThemeProvider>,
+  )
+  await findByTestId('hierarchical_track_selector')
+  expect(container.firstChild).toMatchSnapshot()
+})
 
-    session.addTrackConf({
-      trackId: 'fooC',
-      assemblyNames: ['volMyt1'],
-      type: 'FeatureTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    session.addTrackConf({
-      trackId: 'barC',
-      assemblyNames: ['volMyt1'],
-      type: 'FeatureTrack',
-      adapter: { type: 'FromConfigAdapter', features: [] },
-    })
-    const firstView = session.addView('LinearGenomeView', {
-      displayedRegions: [
-        {
-          assemblyName: 'volMyt1',
-          refName: 'ctgA',
-          start: 0,
-          end: 1000,
-        },
-      ],
-    })
-    firstView.showTrack(session.sessionTracks[0].trackId)
-    firstView.showTrack(session.sessionTracks[1].trackId)
-    firstView.tracks[0].configuration.category.set(['Foo Category'])
-    firstView.tracks[1].configuration.category.set([
-      'Foo Category',
-      'Bar Category',
-    ])
-    const model = firstView.activateTrackSelector()
+test('renders with a couple of categorized tracks', async () => {
+  const session = createTestSession()
+  session.addAssemblyConf({
+    name: 'volMyt1',
+    sequence: {
+      trackId: 'sequenceConfigId',
+      type: 'ReferenceSequenceTrack',
+      adapter: {
+        type: 'FromConfigSequenceAdapter',
+        features: [
+          {
+            refName: 'ctgA',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 10,
+            seq: 'cattgttgcg',
+          },
+        ],
+      },
+    },
+  })
 
-    const { container, findByTestId } = render(
-      <ThemeProvider theme={createJBrowseTheme()}>
-        {/* @ts-ignore*/}
-        <HierarchicalTrackSelector model={model} />
-      </ThemeProvider>,
-    )
-    await findByTestId('hierarchical_track_selector')
-    expect(container.firstChild).toMatchSnapshot()
+  session.addTrackConf({
+    trackId: 'fooC',
+    assemblyNames: ['volMyt1'],
+    type: 'FeatureTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
+  })
+  session.addTrackConf({
+    trackId: 'barC',
+    assemblyNames: ['volMyt1'],
+    type: 'FeatureTrack',
+    adapter: { type: 'FromConfigAdapter', features: [] },
   })
+  const firstView = session.addView('LinearGenomeView', {
+    displayedRegions: [
+      {
+        assemblyName: 'volMyt1',
+        refName: 'ctgA',
+        start: 0,
+        end: 1000,
+      },
+    ],
+  })
+  firstView.showTrack(session.sessionTracks[0].trackId)
+  firstView.showTrack(session.sessionTracks[1].trackId)
+  firstView.tracks[0].configuration.category.set(['Foo Category'])
+  firstView.tracks[1].configuration.category.set([
+    'Foo Category',
+    'Bar Category',
+  ])
+  const model = firstView.activateTrackSelector()
+
+  const { container, findByTestId } = render(
+    <ThemeProvider theme={createJBrowseTheme()}>
+      {/* @ts-ignore*/}
+      <HierarchicalTrackSelector model={model} />
+    </ThemeProvider>,
+  )
+  await findByTestId('hierarchical_track_selector')
+  expect(container.firstChild).toMatchSnapshot()
 })

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.tsx

@@ -1,127 +1,12 @@
-import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react'
-import { Fab, Menu, MenuItem } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  getSession,
-  isSessionModelWithWidgets,
-  isSessionModelWithConnections,
-  isSessionWithAddTracks,
-} from '@jbrowse/core/util'
+import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { VariableSizeTree } from 'react-vtree'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
-// icons
-import AddIcon from '@mui/icons-material/Add'
-
 // locals
 import { TreeNode, HierarchicalTrackSelectorModel } from '../model'
-import Header from './Header'
-import Node from './Node'
-
-const useStyles = makeStyles()(theme => ({
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing(6),
-    right: theme.spacing(6),
-  },
-}))
-
-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
-const HierarchicalTree = observer(
-  ({
-    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>
-      </>
-    )
-  },
-)
+import HierarchicalFab from './HierarchicalFab'
+import HierarchicalTree from './tree/HierarchicalTree'
+import HierarchicalHeader from './tree/HierarchicalHeader'
 
 // Don't use autosizer in jest and instead hardcode a height, otherwise fails
 // jest tests
@@ -164,115 +49,49 @@ const Wrapper = ({
     <>{children}</>
   )
 }
-const HierarchicalTrackSelectorContainer = observer(
-  ({
-    model,
-    toolbarHeight,
-    overrideDimensions,
-  }: {
-    model: HierarchicalTrackSelectorModel
-    toolbarHeight: number
-    overrideDimensions?: { width: number; height: number }
-  }) => {
-    const { classes } = useStyles()
-    const session = getSession(model)
-    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-
-    function handleFabClose() {
-      setAnchorEl(null)
-    }
-    const hasConnections = isSessionModelWithConnections(session)
-    const hasAddTrack = isSessionWithAddTracks(session)
-    return (
-      <Wrapper overrideDimensions={overrideDimensions}>
-        <HierarchicalTrackSelector
-          model={model}
-          toolbarHeight={toolbarHeight}
-        />
-        {hasAddTrack || hasConnections ? (
-          <>
-            <Fab
-              color="secondary"
-              className={classes.fab}
-              onClick={event => setAnchorEl(event.currentTarget)}
-            >
-              <AddIcon />
-            </Fab>
-            <Menu
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={() => setAnchorEl(null)}
-            >
-              {hasConnections ? (
-                <MenuItem
-                  onClick={() => {
-                    handleFabClose()
-                    if (isSessionModelWithWidgets(session)) {
-                      session.showWidget(
-                        session.addWidget(
-                          'AddConnectionWidget',
-                          'addConnectionWidget',
-                        ),
-                      )
-                    }
-                  }}
-                >
-                  Add connection
-                </MenuItem>
-              ) : null}
-              {hasAddTrack ? (
-                <MenuItem
-                  onClick={() => {
-                    handleFabClose()
-                    if (isSessionModelWithWidgets(session)) {
-                      session.showWidget(
-                        session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                          view: model.view.id,
-                        }),
-                      )
-                    }
-                  }}
-                >
-                  Add track
-                </MenuItem>
-              ) : null}
-            </Menu>
-          </>
-        ) : null}
-      </Wrapper>
-    )
-  },
-)
-
-const HierarchicalTrackSelector = observer(
-  ({
-    model,
-    toolbarHeight = 0,
-  }: {
-    model: HierarchicalTrackSelectorModel
-    toolbarHeight?: number
-  }) => {
-    const [assemblyIdx, setAssemblyIdx] = useState(0)
-    const [headerHeight, setHeaderHeight] = useState(0)
+const HierarchicalTrackSelectorContainer = observer(function ({
+  model,
+  toolbarHeight,
+  overrideDimensions,
+}: {
+  model: HierarchicalTrackSelectorModel
+  toolbarHeight: number
+  overrideDimensions?: { width: number; height: number }
+}) {
+  return (
+    <Wrapper overrideDimensions={overrideDimensions}>
+      <HierarchicalTrackSelector model={model} toolbarHeight={toolbarHeight} />
+      <HierarchicalFab model={model} />
+    </Wrapper>
+  )
+})
 
-    const { assemblyNames } = model
-    const assemblyName = assemblyNames.length ? assemblyNames[assemblyIdx] : ''
-    return assemblyName ? (
-      <>
-        <Header
-          model={model}
-          setHeaderHeight={setHeaderHeight}
-          setAssemblyIdx={setAssemblyIdx}
-          assemblyIdx={assemblyIdx}
-        />
-        <AutoSizedHierarchicalTree
-          tree={model.hierarchy(assemblyName)}
-          model={model}
-          offset={toolbarHeight + headerHeight}
-        />
-      </>
-    ) : null
-  },
-)
+const HierarchicalTrackSelector = observer(function ({
+  model,
+  toolbarHeight = 0,
+}: {
+  model: HierarchicalTrackSelectorModel
+  toolbarHeight?: number
+}) {
+  const [assemblyIdx, setAssemblyIdx] = useState(0)
+  const [headerHeight, setHeaderHeight] = useState(0)
+
+  const { assemblyNames } = model
+  const assemblyName = assemblyNames[assemblyIdx]
+  return assemblyName ? (
+    <>
+      <HierarchicalHeader
+        model={model}
+        setHeaderHeight={setHeaderHeight}
+        setAssemblyIdx={setAssemblyIdx}
+      />
+      <AutoSizedHierarchicalTree
+        tree={model.hierarchy(assemblyName)}
+        model={model}
+        offset={toolbarHeight + headerHeight}
+      />
+    </>
+  ) : null
+})
 
 export default HierarchicalTrackSelectorContainer

package/src/HierarchicalTrackSelectorWidget/components/ShoppingCart.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { Badge, IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import JBrowseMenu, { MenuItem } from '@jbrowse/core/ui/Menu'
+import { getSession, getEnv } from '@jbrowse/core/util'
+
+// icons
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
+  searchBox: {
+    margin: theme.spacing(2),
+  },
+  menuIcon: {
+    marginRight: theme.spacing(1),
+    marginBottom: 0,
+  },
+}))
+
+export default observer(function ShoppingCart({
+  model,
+}: {
+  model: HierarchicalTrackSelectorModel
+}) {
+  const { classes } = useStyles()
+  const { selection } = model
+  const { pluginManager } = getEnv(model)
+  const session = getSession(model)
+  const [selectionEl, setSelectionEl] = useState<HTMLButtonElement>()
+  const items = pluginManager.evaluateExtensionPoint(
+    'TrackSelector-multiTrackMenuItems',
+    [],
+    { session },
+  ) as MenuItem[]
+
+  return (
+    <>
+      {selection.length ? (
+        <IconButton
+          className={classes.menuIcon}
+          onClick={event => setSelectionEl(event.currentTarget)}
+        >
+          <Badge badgeContent={selection.length} color="primary">
+            <ShoppingCartIcon />
+          </Badge>
+        </IconButton>
+      ) : null}
+
+      <JBrowseMenu
+        anchorEl={selectionEl}
+        open={Boolean(selectionEl)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setSelectionEl(undefined)
+        }}
+        onClose={() => setSelectionEl(undefined)}
+        menuItems={[
+          { label: 'Clear', onClick: () => model.clearSelection() },
+          ...items.map(item => ({
+            ...item,
+            ...('onClick' in item
+              ? { onClick: () => item.onClick(model) }
+              : {}),
+          })),
+        ]}
+      />
+    </>
+  )
+})