@jbrowse/plugin-data-management 2.3.3 → 2.3.4

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

@@ -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"
     >
@@ -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>
 `;
@@ -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"
     >
@@ -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>
 `;

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react'
+import {
+  Typography,
+  FormControl,
+  Select,
+  IconButton,
+  Tooltip,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icon
+import ClearIcon from '@mui/icons-material/Clear'
+import MinimizeIcon from '@mui/icons-material/Minimize'
+import AddIcon from '@mui/icons-material/Add'
+
+const useStyles = makeStyles()(theme => ({
+  facet: {
+    margin: 0,
+    marginLeft: theme.spacing(2),
+  },
+  select: {
+    marginBottom: theme.spacing(2),
+  },
+}))
+
+function FacetFilter({
+  column,
+  vals,
+  width,
+  dispatch,
+  filters,
+}: {
+  column: { field: string }
+  vals: [string, number][]
+  width: number
+  dispatch: (arg: { key: string; val: string[] }) => void
+  filters: Record<string, string[]>
+}) {
+  const { classes } = useStyles()
+  const [visible, setVisible] = useState(true)
+  return (
+    <FormControl key={column.field} className={classes.facet} style={{ width }}>
+      <div style={{ display: 'flex' }}>
+        <Typography>{column.field}</Typography>
+        <Tooltip title="Clear selection on this facet filter">
+          <IconButton
+            onClick={() => {
+              dispatch({ key: column.field, val: [] })
+            }}
+            size="small"
+          >
+            <ClearIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Minimize/expand this facet filter">
+          <IconButton onClick={() => setVisible(!visible)} size="small">
+            {visible ? <MinimizeIcon /> : <AddIcon />}
+          </IconButton>
+        </Tooltip>
+      </div>
+      {visible ? (
+        <Select
+          multiple
+          native
+          className={classes.select}
+          value={filters[column.field]}
+          onChange={event => {
+            // @ts-ignore
+            const { options } = event.target
+            const val: string[] = []
+            const len = options.length
+            for (let i = 0; i < len; i++) {
+              if (options[i].selected) {
+                val.push(options[i].value)
+              }
+            }
+            dispatch({ key: column.field, val })
+          }}
+        >
+          {vals
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .map(([name, count]) => (
+              <option key={name} value={name}>
+                {name} ({count})
+              </option>
+            ))}
+        </Select>
+      ) : null}
+    </FormControl>
+  )
+}
+
+export default function FacetFilters({
+  rows,
+  columns,
+  dispatch,
+  filters,
+  width,
+}: {
+  rows: Record<string, unknown>[]
+  filters: Record<string, string[]>
+  columns: { field: string }[]
+  dispatch: (arg: { key: string; val: string[] }) => void
+  width: number
+}) {
+  const facets = columns.slice(1)
+  const uniqs = facets.map(() => new Map<string, number>())
+  rows.forEach(row => {
+    facets.forEach((column, index) => {
+      const elt = uniqs[index]
+      const key = `${row[column.field] || ''}`
+      const val = elt.get(key)
+      // we don't allow filtering on empty yet
+      if (key) {
+        if (val !== undefined) {
+          elt.set(key, val + 1)
+        } else {
+          elt.set(key, 1)
+        }
+      }
+    })
+  })
+
+  return (
+    <div>
+      {facets.map((column, index) => (
+        <FacetFilter
+          key={column.field}
+          vals={Array.from(uniqs[index])}
+          column={column}
+          width={width}
+          dispatch={dispatch}
+          filters={filters}
+        />
+      ))}
+    </div>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { DialogContent } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../../model'
+import FacetedSelector from './FacetedSelector'
+
+function FacetedDlg(props: {
+  handleClose: () => void
+  model: HierarchicalTrackSelectorModel
+}) {
+  const { handleClose } = props
+  return (
+    <Dialog
+      open
+      onClose={handleClose}
+      maxWidth="xl"
+      title="Faceted track selector"
+    >
+      <DialogContent>
+        <FacetedSelector {...props} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default observer(FacetedDlg)