@jbrowse/plugin-data-management 2.3.3 → 2.4.0

package/src/AddTrackWidget/components/TrackSourceSelect.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { FileSelector } from '@jbrowse/core/ui'
+import { AbstractRootModel } from '@jbrowse/core/util'
 import { Paper } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { getRoot } from 'mobx-state-tree'
@@ -10,9 +11,7 @@ import { AddTrackModel } from '../model'
 
 const useStyles = makeStyles()(theme => ({
   paper: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(1),
+    padding: theme.spacing(2),
   },
   spacer: {
     height: theme.spacing(8),
@@ -21,8 +20,7 @@ const useStyles = makeStyles()(theme => ({
 
 function TrackSourceSelect({ model }: { model: AddTrackModel }) {
   const { classes } = useStyles()
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rootModel = getRoot<any>(model)
+  const rootModel = getRoot<AbstractRootModel>(model)
 
   return (
     <Paper className={classes.paper}>

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalFab.tsx

@@ -0,0 +1,94 @@
+import React, { useState } 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 { observer } from 'mobx-react'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(6),
+    right: theme.spacing(6),
+  },
+}))
+
+export default observer(function HierarchicalFab({
+  model,
+}: {
+  model: HierarchicalTrackSelectorModel
+}) {
+  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 (
+    <>
+      {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}
+    </>
+  )
+})

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) }
+              : {}),
+          })),
+        ]}
+      />
+    </>
+  )
+})

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

@@ -31,7 +31,7 @@ exports[`renders with a couple of categorized tracks 1`] = `
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
       tabindex="0"
       type="button"
     >
@@ -50,25 +50,6 @@ exports[`renders with a couple of categorized tracks 1`] = `
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-        />
-      </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
     <div
       class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
     >
@@ -94,7 +75,7 @@ exports[`renders with a couple of categorized tracks 1`] = `
           class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeSmall css-16a6k96-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -116,6 +97,16 @@ exports[`renders with a couple of categorized tracks 1`] = `
         </div>
       </div>
     </div>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
+      tabindex="0"
+      type="button"
+    >
+      Open faceted selector
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -128,7 +119,7 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
       tabindex="0"
       type="button"
     >
@@ -147,25 +138,6 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-        />
-      </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
     <div
       class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
     >
@@ -191,7 +163,7 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
           class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeSmall css-16a6k96-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -213,6 +185,16 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
         </div>
       </div>
     </div>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
+      tabindex="0"
+      type="button"
+    >
+      Open faceted selector
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
   </div>
 </div>
 `;