@jbrowse/plugin-data-management 2.6.1 → 2.6.3

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

@@ -1,190 +0,0 @@
-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,
-  isSessionModelWithConnectionEditing,
-  isSessionModelWithConnections,
-  isSessionModelWithWidgets,
-  isSessionWithAddTracks,
-} 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: () => void
-  dereferenceTypeCount: { [key: string]: number }
-  name: string
-}
-
-interface DialogDetails {
-  name: string
-  connectionConf: AnyConfigurationModel
-}
-
-export default observer(function HamburgerMenu({
-  model,
-}: {
-  model: HierarchicalTrackSelectorModel
-}) {
-  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()
-
-  function breakConnection(
-    connectionConf: AnyConfigurationModel,
-    deletingConnection?: boolean,
-  ) {
-    const name = readConfObject(connectionConf, 'name')
-    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 })
-    }
-  }
-
-  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={[
-          ...(isSessionWithAddTracks(session)
-            ? [
-                {
-                  label: 'Add track...',
-                  onClick: () => {
-                    if (isSessionModelWithWidgets(session)) {
-                      session.showWidget(
-                        session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                          view: model.view.id,
-                        }),
-                      )
-                    }
-                  },
-                },
-              ]
-            : []),
-          ...(isSessionModelWithConnections(session)
-            ? [
-                {
-                  label: 'Turn on/off connections...',
-                  onClick: () => setConnectionToggleOpen(true),
-                },
-              ]
-            : []),
-          ...(isSessionModelWithConnectionEditing(session)
-            ? [
-                {
-                  label: 'Add connection...',
-                  onClick: () => {
-                    if (isSessionModelWithWidgets(session)) {
-                      session.showWidget(
-                        session.addWidget(
-                          'AddConnectionWidget',
-                          'addConnectionWidget',
-                        ),
-                      )
-                    }
-                  },
-                },
-                {
-                  label: 'Delete connections...',
-                  onClick: () => setConnectionManagerOpen(true),
-                },
-              ]
-            : []),
-        ]}
-      />
-      <Suspense fallback={<React.Fragment />}>
-        {modalInfo ? (
-          <CloseConnectionDlg
-            modalInfo={modalInfo}
-            onClose={() => setModalInfo(undefined)}
-          />
-        ) : 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

@@ -1,83 +0,0 @@
-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,
-}: {
-  model: HierarchicalTrackSelectorModel
-  setHeaderHeight: (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} />
-        <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

@@ -1,101 +0,0 @@
-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-expect-error
-        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-expect-error
-    treeRef.current.recomputeTree({
-      refreshNodes: true,
-      useDefaultHeight: true,
-    })
-  }, [tree, filterText])
-  return (
-    <>
-      {/* @ts-expect-error */}
-      <VariableSizeTree ref={treeRef} treeWalker={treeWalker} height={height}>
-        {/* @ts-expect-error */}
-        {Node}
-      </VariableSizeTree>
-    </>
-  )
-})

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

@@ -1,92 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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-expect-error
-                '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

@@ -1,84 +0,0 @@
-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,41 +0,0 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-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-expect-error
-  return (
-    subtree?.children.map(t =>
-      t.children.length ? getAllChildren(t) : (t.conf as 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/configSchema.ts

@@ -1,3 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-const configSchema = ConfigurationSchema('HierarchicalTrackSelectorWidget', {})
-export default configSchema