@jbrowse/plugin-data-management 2.3.3 → 2.3.4

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

@@ -0,0 +1,88 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { Button, IconButton, InputAdornment, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../../model'
+import HamburgerMenu from './HamburgerMenu'
+import ShoppingCart from '../ShoppingCart'
+
+// lazies
+const FacetedDialog = lazy(() => import('../faceted/FacetedDialog'))
+
+const useStyles = makeStyles()(theme => ({
+  searchBox: {
+    margin: theme.spacing(2),
+  },
+  menuIcon: {
+    marginRight: theme.spacing(1),
+    marginBottom: 0,
+  },
+}))
+
+function HierarchicalTrackSelectorHeader({
+  model,
+  setHeaderHeight,
+  setAssemblyIdx,
+}: {
+  model: HierarchicalTrackSelectorModel
+  setHeaderHeight: (n: number) => void
+  setAssemblyIdx: (n: number) => void
+}) {
+  const { classes } = useStyles()
+  const [facetedOpen, setFacetedOpen] = useState(false)
+  const { filterText } = model
+
+  return (
+    <div
+      ref={ref => setHeaderHeight(ref?.getBoundingClientRect().height || 0)}
+      data-testid="hierarchical_track_selector"
+    >
+      <div style={{ display: 'flex' }}>
+        <HamburgerMenu model={model} setAssemblyIdx={setAssemblyIdx} />
+        <ShoppingCart model={model} />
+
+        <TextField
+          className={classes.searchBox}
+          label="Filter tracks"
+          value={filterText}
+          onChange={event => model.setFilterText(event.target.value)}
+          fullWidth
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  color="secondary"
+                  onClick={() => model.clearFilterText()}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+        <Button
+          className={classes.menuIcon}
+          onClick={() => setFacetedOpen(true)}
+        >
+          Open faceted selector
+        </Button>
+      </div>
+
+      <Suspense fallback={<div />}>
+        {facetedOpen ? (
+          <FacetedDialog
+            handleClose={() => setFacetedOpen(false)}
+            model={model}
+          />
+        ) : null}
+      </Suspense>
+    </div>
+  )
+}
+
+export default observer(HierarchicalTrackSelectorHeader)

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/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/dist/HierarchicalTrackSelectorWidget/components/CloseConnectionDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CloseConnectionDialog.js","sourceRoot":"","sources":["../../../src/HierarchicalTrackSelectorWidget/components/CloseConnectionDialog.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4CASsB;AACtB,2CAAqC;AAErC,SAAS,qBAAqB,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,YAAY,GAQb;IACC,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAA;IACvE,OAAO,CACL,8BAAC,iBAAM,IAAC,IAAI;QACV,8BAAC,sBAAW;;YAAyB,IAAI;iBAAqB;QAC9D,8BAAC,wBAAa;YACX,oBAAoB,CAAC,CAAC,CAAC,CACtB;gBACE,8BAAC,4BAAiB,8CAEE;gBACpB,8BAAC,eAAI,QACF,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC1D,8BAAC,mBAAQ,IAAC,GAAG,EAAE,GAAG,IAAG,GAAG,KAAK,IAAI,GAAG,EAAE,CAAY,CACnD,CAAC,CACG,CACN,CACJ,CAAC,CAAC,CAAC,IAAI;YACR,8BAAC,4BAAiB,0DAEE,CACN;QAChB,8BAAC,wBAAa;YACZ,8BAAC,iBAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,EAAE,KAAK,EAAC,SAAS,aAE7C;YACT,8BAAC,iBAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EACL,SAAS;oBACP,CAAC,CAAC,GAAG,EAAE;wBACH,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,EAAI,CAAA;wBACzB,YAAY,EAAE,CAAA;oBAChB,CAAC;oBACH,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,EAEd,KAAK,EAAC,SAAS,SAGR,CACK,CACT,CACV,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,qBAAqB,CAAC,CAAA"}

package/dist/HierarchicalTrackSelectorWidget/components/DeleteConnectionDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DeleteConnectionDialog.js","sourceRoot":"","sources":["../../../src/HierarchicalTrackSelectorWidget/components/DeleteConnectionDialog.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4CAOsB;AACtB,2CAAqC;AAIrC,SAAS,sBAAsB,CAAC,EAC9B,mBAAmB,EACnB,OAAO,EACP,WAAW,GAKZ;IACC,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAA;IACpD,OAAO,CACL,8BAAC,iBAAM,IAAC,IAAI;QACV,8BAAC,sBAAW;;YAA0B,IAAI;iBAAqB;QAC/D,8BAAC,wBAAa;YACZ,8BAAC,4BAAiB,2DAEE,CACN;QAChB,8BAAC,wBAAa;YACZ,8BAAC,iBAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,SAAS,aAE5C;YACT,8BAAC,iBAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;;oBACZ,IAAI,cAAc,EAAE;wBAClB,MAAA,OAAO,CAAC,gBAAgB,wDAAG,cAAc,CAAC,CAAA;qBAC3C;oBACD,WAAW,EAAE,CAAA;gBACf,CAAC,SAGM,CACK,CACT,CACV,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,sBAAsB,CAAC,CAAA"}