@jbrowse/plugin-data-management 2.3.3 → 2.4.0

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

@@ -0,0 +1,197 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import {
+  getSession,
+  isSessionModelWithWidgets,
+  isSessionModelWithConnections,
+} from '@jbrowse/core/util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+
+// icons
+import MenuIcon from '@mui/icons-material/Menu'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../../model'
+
+// lazy components
+const CloseConnectionDlg = lazy(
+  () => import('../dialogs/CloseConnectionDialog'),
+)
+const DeleteConnectionDlg = lazy(
+  () => import('../dialogs/DeleteConnectionDialog'),
+)
+const ManageConnectionsDlg = lazy(
+  () => import('../dialogs/ManageConnectionsDialog'),
+)
+const ToggleConnectionsDlg = lazy(
+  () => import('../dialogs/ToggleConnectionsDialog'),
+)
+
+const useStyles = makeStyles()(theme => ({
+  menuIcon: {
+    marginRight: theme.spacing(1),
+    marginBottom: 0,
+  },
+}))
+
+interface ModalArgs {
+  connectionConf: AnyConfigurationModel
+  safelyBreakConnection: Function
+  dereferenceTypeCount: { [key: string]: number }
+  name: string
+}
+
+interface DialogDetails {
+  name: string
+  connectionConf: AnyConfigurationModel
+}
+
+export default observer(function HamburgerMenu({
+  model,
+  setAssemblyIdx,
+}: {
+  model: HierarchicalTrackSelectorModel
+  setAssemblyIdx: Function
+}) {
+  const session = getSession(model)
+  const [menuEl, setMenuEl] = useState<HTMLButtonElement>()
+  const [modalInfo, setModalInfo] = useState<ModalArgs>()
+  const [deleteDlgDetails, setDeleteDlgDetails] = useState<DialogDetails>()
+  const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
+  const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
+  const { classes } = useStyles()
+  const { assemblyNames } = model
+
+  function breakConnection(
+    connectionConf: AnyConfigurationModel,
+    deletingConnection?: boolean,
+  ) {
+    const name = readConfObject(connectionConf, 'name')
+
+    // @ts-ignore
+    const result = session.prepareToBreakConnection(connectionConf)
+    if (result) {
+      const [safelyBreakConnection, dereferenceTypeCount] = result
+      if (Object.keys(dereferenceTypeCount).length > 0) {
+        setModalInfo({
+          connectionConf,
+          safelyBreakConnection,
+          dereferenceTypeCount,
+          name,
+        })
+      } else {
+        safelyBreakConnection()
+      }
+    }
+    if (deletingConnection) {
+      setDeleteDlgDetails({ name, connectionConf })
+    }
+  }
+
+  const connectionMenuItems = [
+    {
+      label: 'Turn on/off connections...',
+      onClick: () => setConnectionToggleOpen(true),
+    },
+  ]
+
+  if (isSessionModelWithConnections(session)) {
+    connectionMenuItems.unshift({
+      label: 'Add connection...',
+      onClick: () => {
+        if (isSessionModelWithWidgets(session)) {
+          session.showWidget(
+            session.addWidget('AddConnectionWidget', 'addConnectionWidget'),
+          )
+        }
+      },
+    })
+
+    connectionMenuItems.push({
+      label: 'Delete connections...',
+      onClick: () => setConnectionManagerOpen(true),
+    })
+  }
+  return (
+    <>
+      <IconButton
+        className={classes.menuIcon}
+        onClick={event => setMenuEl(event.currentTarget)}
+      >
+        <MenuIcon />
+      </IconButton>
+
+      <JBrowseMenu
+        anchorEl={menuEl}
+        open={Boolean(menuEl)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setMenuEl(undefined)
+        }}
+        onClose={() => setMenuEl(undefined)}
+        menuItems={[
+          {
+            label: 'Add track...',
+            onClick: () => {
+              if (isSessionModelWithWidgets(session)) {
+                session.showWidget(
+                  session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                    view: model.view.id,
+                  }),
+                )
+              }
+            },
+          },
+          ...(session.makeConnection ? connectionMenuItems : []),
+
+          ...(assemblyNames.length > 1
+            ? [
+                {
+                  label: 'Select assembly...',
+                  subMenu: assemblyNames.map((name, idx) => ({
+                    label: name,
+                    onClick: () => setAssemblyIdx(idx),
+                  })),
+                },
+              ]
+            : []),
+        ]}
+      />
+      <Suspense fallback={<div />}>
+        {modalInfo ? (
+          <CloseConnectionDlg
+            modalInfo={modalInfo}
+            setModalInfo={setModalInfo}
+          />
+        ) : null}
+        {deleteDlgDetails ? (
+          <DeleteConnectionDlg
+            handleClose={() => setDeleteDlgDetails(undefined)}
+            deleteDialogDetails={deleteDlgDetails}
+            session={session}
+          />
+        ) : null}
+        {connectionManagerOpen ? (
+          <ManageConnectionsDlg
+            handleClose={() => setConnectionManagerOpen(false)}
+            breakConnection={breakConnection}
+            session={session}
+          />
+        ) : null}
+        {connectionToggleOpen ? (
+          <ToggleConnectionsDlg
+            handleClose={() => setConnectionToggleOpen(false)}
+            session={session}
+            breakConnection={breakConnection}
+          />
+        ) : null}
+      </Suspense>
+    </>
+  )
+})

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

@@ -0,0 +1,85 @@
+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 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.tertiary.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,106 @@
+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()(theme => ({
+  compactCheckbox: {
+    padding: 0,
+  },
+
+  checkboxLabel: {
+    marginRight: 0,
+    '&:hover': {
+      backgroundColor: theme.palette.action.selected,
+    },
+  },
+}))
+
+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 }}
+        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)')
+}