@jbrowse/plugin-data-management 2.0.1 → 2.1.0

package/src/HierarchicalTrackSelectorWidget/components/Node.tsx

@@ -0,0 +1,284 @@
+import React, { useState } from 'react'
+import {
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowRightIcon from '@mui/icons-material/ArrowRight'
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+
+// other
+import { HierarchicalTrackSelectorModel, TreeNode } from '../model'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import { getSession } from '@jbrowse/core/util'
+
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { getAllChildren } from './util'
+
+const useStyles = makeStyles()(theme => ({
+  compactCheckbox: {
+    padding: 0,
+  },
+
+  checkboxLabel: {
+    marginRight: 0,
+    '&:hover': {
+      backgroundColor: '#eee',
+    },
+  },
+
+  contrastColor: {
+    color: theme.palette.secondary.contrastText,
+  },
+
+  // 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: {
+    // @ts-ignore
+    background: theme.palette.tertiary?.main,
+    // @ts-ignore
+    color: theme.palette.tertiary?.contrastText,
+    width: '100%',
+    display: 'flex',
+    paddingLeft: 5,
+  },
+
+  // margin:auto 0 to center text vertically
+  accordionText: {
+    margin: 'auto 0',
+  },
+}))
+
+export interface InfoArgs {
+  target: HTMLElement
+  id: string
+  conf: AnyConfigurationModel
+}
+
+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
+}
+
+function isUnsupported(name = '') {
+  return name.endsWith('(Unsupported)') || name.endsWith('(Unknown)')
+}
+
+// An individual node in the track selector. Note: manually sets cursor:
+// pointer improves usability for what can be clicked
+export default function Node(props: {
+  data: {
+    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
+  }
+  isOpen: boolean
+  style?: { height: number }
+  setOpen: (arg: boolean) => void
+}) {
+  const { data, isOpen, style, setOpen } = props
+  const {
+    checked,
+    conf,
+    drawerPosition,
+    id,
+    isLeaf,
+    model,
+    name,
+    nestingLevel,
+    onChange,
+    selected,
+    toggleCollapse,
+    tree,
+  } = data
+
+  const { classes } = useStyles()
+  const width = 10
+  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
+  const [info, setInfo] = useState<InfoArgs>()
+  const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
+  const description = (conf && readConfObject(conf, ['description'])) || ''
+
+  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}
+        onClick={() => {
+          if (!menuEl) {
+            toggleCollapse(id)
+            setOpen(!isOpen)
+          }
+        }}
+        style={{
+          marginLeft,
+          whiteSpace: 'nowrap',
+          width: '100%',
+        }}
+      >
+        <div className={!isLeaf ? classes.accordionColor : undefined}>
+          {!isLeaf ? (
+            <div className={classes.accordionText}>
+              <Typography>
+                {isOpen ? <ArrowDropDownIcon /> : <ArrowRightIcon />}
+                {name}
+                <IconButton
+                  onClick={event => {
+                    setMenuEl(event.currentTarget)
+                    event.stopPropagation()
+                  }}
+                  className={classes.contrastColor}
+                >
+                  <MoreHorizIcon />
+                </IconButton>
+              </Typography>
+            </div>
+          ) : (
+            <>
+              <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,
+                        padding: 1,
+                      }}
+                    >
+                      {name}
+                    </div>
+                  }
+                />
+              </Tooltip>
+              <IconButton
+                onClick={e => setInfo({ target: e.currentTarget, id, conf })}
+                style={{ padding: 0 }}
+                color="secondary"
+                data-testid={`htsTrackEntryMenu-${id}`}
+              >
+                <MoreHorizIcon />
+              </IconButton>
+            </>
+          )}
+          {menuEl ? (
+            <JBrowseMenu
+              anchorEl={menuEl}
+              menuItems={[
+                {
+                  label: 'Add to selection',
+                  onClick: () =>
+                    model.addToSelection(
+                      getAllChildren(treeToMap(tree).get(id)),
+                    ),
+                },
+                {
+                  label: 'Remove from selection',
+                  onClick: () =>
+                    model.removeFromSelection(
+                      getAllChildren(treeToMap(tree).get(id)),
+                    ),
+                },
+              ]}
+              onMenuItemClick={(_event, callback) => {
+                callback()
+                setMenuEl(null)
+              }}
+              open={Boolean(menuEl)}
+              onClose={() => setMenuEl(null)}
+            />
+          ) : null}
+
+          {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}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/util.ts

@@ -0,0 +1,11 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { TreeNode } from '../model'
+
+export function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[] {
+  // @ts-ignore
+  return (
+    subtree?.children.map(t =>
+      t.children.length ? getAllChildren(t) : (t.conf as AnyConfigurationModel),
+    ) || []
+  ).flat(Infinity)
+}

package/src/HierarchicalTrackSelectorWidget/configSchema.ts

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

package/src/HierarchicalTrackSelectorWidget/index.ts

@@ -1,7 +1,5 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import stateModelFactory, { HierarchicalTrackSelectorModel } from './model'
+import configSchema from './configSchema'
 
-export { default as stateModelFactory } from './model'
-export const configSchema = ConfigurationSchema(
-  'HierarchicalTrackSelectorWidget',
-  {},
-)
+export { stateModelFactory, configSchema }
+export type { HierarchicalTrackSelectorModel }

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -1,13 +1,12 @@
-import { types, getParent, Instance } from 'mobx-state-tree'
+import { types, getParent, getEnv, Instance } from 'mobx-state-tree'
 import {
-  AnyConfigurationModel,
   getConf,
   readConfObject,
+  AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 import { getSession } from '@jbrowse/core/util'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractView } from 'react'
 
 function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
   return !!a1.find(value => a2.includes(value))
@@ -18,11 +17,11 @@ function passesFilter(filter: string, config: AnyConfigurationModel) {
   const filterLower = filter.toLowerCase()
   return (
     getTrackName(config).toLowerCase().includes(filterLower) ||
-    categories?.filter(c => c.toLowerCase().includes(filterLower)).length
+    !!categories?.filter(c => c.toLowerCase().includes(filterLower)).length
   )
 }
 
-function getTrackName(config: AnyConfigurationModel) {
+function getTrackName(config: AnyConfigurationModel): string {
   if (!config.trackId) {
     throw new Error('not a track')
   }
@@ -41,6 +40,32 @@ export type TreeNode = {
   children: TreeNode[]
 }
 
+function filterTracks(
+  tracks: AnyConfigurationModel[],
+  self: { view: { type: string } },
+  assemblyName: string,
+) {
+  const { assemblyManager } = getSession(self)
+  const { pluginManager } = getEnv(self)
+  const assembly = assemblyManager.get(assemblyName)
+
+  if (!assembly) {
+    return []
+  }
+  return tracks
+    .filter(c => {
+      const trackConfAssemblies = readConfObject(c, 'assemblyNames')
+      const { allAliases } = assembly
+      return hasAnyOverlap(allAliases, trackConfAssemblies)
+    })
+    .filter(c => {
+      const { displayTypes } = pluginManager.getViewType(self.view.type)
+      const compatDisplays = displayTypes.map((d: { name: string }) => d.name)
+      const trackDisplays = c.displays.map((d: { type: string }) => d.type)
+      return hasAnyOverlap(compatDisplays, trackDisplays)
+    })
+}
+
 export function generateHierarchy(
   model: HierarchicalTrackSelectorModel,
   trackConfigurations: AnyConfigurationModel[],
@@ -112,8 +137,20 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
     })
+    .volatile(() => ({
+      selection: [] as AnyConfigurationModel[],
+    }))
     .actions(self => ({
-      setView(view: AbstractView) {
+      addToSelection(elt: AnyConfigurationModel[]) {
+        self.selection = [...self.selection, ...elt]
+      },
+      removeFromSelection(elt: AnyConfigurationModel[]) {
+        self.selection = self.selection.filter(f => !elt.includes(f))
+      },
+      clearSelection() {
+        self.selection = []
+      },
+      setView(view: unknown) {
         self.view = view
       },
       toggleCategory(pathName: string) {
@@ -156,20 +193,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         // filter out tracks that don't match the current assembly (check all
         // assembly aliases) and display types
         return (refseq ? [refseq] : []).concat([
-          ...tracks
-            .filter(c => {
-              const trackConfAssemblies = readConfObject(c, 'assemblyNames')
-              const { allAliases } = assembly
-              return hasAnyOverlap(allAliases, trackConfAssemblies)
-            })
-            .filter(c => {
-              const { displayTypes } = pluginManager.getViewType(self.view.type)
-              const compatibleDisplays = displayTypes.map(d => d.name)
-              const trackDisplays = c.displays.map(
-                (d: { type: string }) => d.type,
-              )
-              return hasAnyOverlap(compatibleDisplays, trackDisplays)
-            }),
+          ...filterTracks(tracks, self, assemblyName),
         ])
       },
 
@@ -184,29 +208,9 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         if (!self.view) {
           return []
         }
-        const trackConfigurations = connection.tracks
-        const { assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
-
-        if (!(assembly && assembly.initialized)) {
-          return []
-        }
 
         // filter out tracks that don't match the current display types
-        return trackConfigurations
-          .filter(c => {
-            const trackConfAssemblies = readConfObject(c, 'assemblyNames')
-            const { allAliases } = assembly
-            return hasAnyOverlap(allAliases, trackConfAssemblies)
-          })
-          .filter(c => {
-            const { displayTypes } = pluginManager.getViewType(self.view.type)
-            const compatibleDisplays = displayTypes.map(d => d.name)
-            const trackDisplays = c.displays.map(
-              (d: { type: string }) => d.type,
-            )
-            return hasAnyOverlap(compatibleDisplays, trackDisplays)
-          })
+        return filterTracks(connection.tracks, self, assemblyName)
       },
     }))
     .views(self => ({

package/src/index.ts

@@ -11,6 +11,7 @@ import {
   stateModelFactory as AddTrackStateModelFactory,
   configSchema as AddTrackConfigSchema,
 } from './AddTrackWidget'
+import { AddTrackModel } from './AddTrackWidget/model'
 import {
   stateModel as AddConnectionStateModel,
   configSchema as AddConnectionConfigSchema,
@@ -18,6 +19,7 @@ import {
 import {
   stateModelFactory as HierarchicalTrackSelectorStateModelFactory,
   configSchema as HierarchicalTrackSelectorConfigSchema,
+  HierarchicalTrackSelectorModel,
 } from './HierarchicalTrackSelectorWidget'
 import {
   stateModelFactory as PluginStoreStateModelFactory,
@@ -101,7 +103,8 @@ export default class extends Plugin {
     })
   }
 
-  configure(pluginManager: PluginManager) {}
+  configure(_pluginManager: PluginManager) {}
 }
 
 export { AssemblyManager, SetDefaultSession }
+export type { HierarchicalTrackSelectorModel, AddTrackModel }