@jbrowse/plugin-data-management 1.7.8 → 1.7.11

package/src/HierarchicalTrackSelectorWidget/components/{HierarchicalTrackSelector.js → HierarchicalTrackSelector.tsx}

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, {
   Suspense,
   lazy,
@@ -34,11 +33,23 @@ import { Cable } from '@jbrowse/core/ui/Icons'
 // other
 import AutoSizer from 'react-virtualized-auto-sizer'
 import JBrowseMenu from '@jbrowse/core/ui/Menu'
-import { getSession } from '@jbrowse/core/util'
-import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  getSession,
+  isSessionModelWithWidgets,
+  isSessionModelWithConnections,
+  isSessionWithAddTracks,
+} from '@jbrowse/core/util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
 import { observer } from 'mobx-react'
 import { VariableSizeTree } from 'react-vtree'
 
+// locals
+import { TreeNode, HierarchicalTrackSelectorModel } from '../model'
+
+// lazy components
 const CloseConnectionDialog = lazy(() => import('./CloseConnectionDialog'))
 const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'))
 const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'))
@@ -101,9 +112,31 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
+interface MoreInfoArgs {
+  target: HTMLElement
+  id: string
+  conf: AnyConfigurationModel
+}
+
 // An individual node in the track selector. Note: manually sets cursor:
 // pointer improves usability for what can be clicked
-const Node = props => {
+function Node(props: {
+  data: {
+    isLeaf: boolean
+    nestingLevel: number
+    checked: boolean
+    id: string
+    name: string
+    onChange: Function
+    toggleCollapse: (arg: string) => void
+    conf: AnyConfigurationModel
+    onMoreInfo: (arg: MoreInfoArgs) => void
+    drawerPosition: unknown
+  }
+  isOpen: boolean
+  style?: { height: number }
+  setOpen: (arg: boolean) => void
+}) {
   const { data, isOpen, style, setOpen } = props
   const {
     isLeaf,
@@ -122,7 +155,7 @@ const Node = props => {
   const width = 10
   const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
   const unsupported =
-    name && (name.endsWith('(Unsupported)') || name.endsWith('(Unknown)'))
+    name?.endsWith('(Unsupported)') || name?.endsWith('(Unknown)')
   const description = (conf && readConfObject(conf, ['description'])) || ''
 
   return (
@@ -130,7 +163,7 @@ const Node = props => {
       {new Array(nestingLevel).fill(0).map((_, idx) => (
         <div
           key={`mark-${idx}`}
-          style={{ left: idx * width + 4, height: style.height }}
+          style={{ left: idx * width + 4, height: style?.height }}
           className={classes.nestingLevelMarker}
         />
       ))}
@@ -170,6 +203,7 @@ const Node = props => {
                       color="primary"
                       disabled={unsupported}
                       inputProps={{
+                        // @ts-ignore
                         'data-testid': `htsTrackEntry-${id}`,
                       }}
                     />
@@ -192,7 +226,11 @@ const Node = props => {
   )
 }
 
-const getNodeData = (node, nestingLevel, extra) => {
+function getNodeData(
+  node: TreeNode,
+  nestingLevel: number,
+  extra: Record<string, unknown>,
+) {
   const isLeaf = !!node.conf
   return {
     data: {
@@ -208,74 +246,99 @@ const getNodeData = (node, nestingLevel, extra) => {
   }
 }
 
+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 }) => {
-  const { filterText, view } = model
-  const treeRef = useRef(null)
-  const [info, setMoreInfo] = useState()
-  const session = getSession(model)
-  const { drawerPosition } = session
-
-  const extra = useMemo(
-    () => ({
-      onChange: trackId => view.toggleTrack(trackId),
-      toggleCollapse: pathName => model.toggleCategory(pathName),
-      onMoreInfo: setMoreInfo,
-      drawerPosition,
-    }),
-    [view, model, drawerPosition],
-  )
-  const treeWalker = useCallback(
-    function* treeWalker() {
-      for (let i = 0; i < tree.children.length; i++) {
-        yield getNodeData(tree.children[i], 0, extra)
-      }
+const HierarchicalTree = observer(
+  ({
+    height,
+    tree,
+    model,
+  }: {
+    height: number
+    tree: TreeNode
+    model: HierarchicalTrackSelectorModel
+  }) => {
+    const { filterText, view } = model
+    const treeRef = useRef<NodeData>(null)
+    const [info, setMoreInfo] = useState<MoreInfoArgs>()
+    const session = getSession(model)
+    const { drawerPosition } = session
+
+    const extra = useMemo(
+      () => ({
+        onChange: (trackId: string) => view.toggleTrack(trackId),
+        toggleCollapse: (pathName: string) => model.toggleCategory(pathName),
+        onMoreInfo: setMoreInfo,
+        drawerPosition,
+      }),
+      [view, model, drawerPosition],
+    )
+    const treeWalker = useCallback(
+      function* treeWalker() {
+        for (let i = 0; i < tree.children.length; i++) {
+          const r = tree.children[i]
+          yield getNodeData(r, 0, extra)
+        }
 
-      while (true) {
-        const parentMeta = yield
+        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)
+          for (let i = 0; i < parentMeta.node.children.length; i++) {
+            const curr = parentMeta.node.children[i]
+            yield getNodeData(curr, parentMeta.nestingLevel + 1, extra)
+          }
         }
-      }
-    },
-    [tree, extra],
-  )
+      },
+      [tree, extra],
+    )
 
-  const conf = info?.conf
-  const menuItems = (conf && session.getTrackActionMenuItems?.(conf)) || []
+    const conf = info?.conf
+    const menuItems = (conf && session.getTrackActionMenuItems?.(conf)) || []
 
-  useEffect(() => {
-    treeRef.current.recomputeTree({
-      refreshNodes: true,
-      useDefaultHeight: true,
-    })
-  }, [tree, filterText])
-  return (
-    <>
-      <VariableSizeTree ref={treeRef} treeWalker={treeWalker} height={height}>
-        {Node}
-      </VariableSizeTree>
-      <JBrowseMenu
-        anchorEl={info?.target}
-        menuItems={menuItems}
-        onMenuItemClick={(_event, callback) => {
-          callback()
-          setMoreInfo(undefined)
-        }}
-        open={Boolean(info)}
-        onClose={() => setMoreInfo(undefined)}
-      />
-    </>
-  )
-})
+    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>
+        <JBrowseMenu
+          anchorEl={info?.target}
+          menuItems={menuItems}
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setMoreInfo(undefined)
+          }}
+          open={Boolean(info)}
+          onClose={() => setMoreInfo(undefined)}
+        />
+      </>
+    )
+  },
+)
 
 // Don't use autosizer in jest and instead hardcode a height, otherwise fails
 // jest tests
-const AutoSizedHierarchicalTree = ({ tree, model, offset }) => {
+const AutoSizedHierarchicalTree = ({
+  tree,
+  model,
+  offset,
+}: {
+  tree: TreeNode
+  model: HierarchicalTrackSelectorModel
+  offset: number
+}) => {
   return typeof jest === 'undefined' ? (
     <AutoSizer disableWidth>
       {({ height }) => {
@@ -293,7 +356,13 @@ const AutoSizedHierarchicalTree = ({ tree, model, offset }) => {
   )
 }
 
-const Wrapper = ({ overrideDimensions, children }) => {
+const Wrapper = ({
+  overrideDimensions,
+  children,
+}: {
+  overrideDimensions?: { width: number; height: number }
+  children: React.ReactNode
+}) => {
   return overrideDimensions ? (
     <div style={{ ...overrideDimensions }}>{children}</div>
   ) : (
@@ -301,29 +370,36 @@ const Wrapper = ({ overrideDimensions, children }) => {
   )
 }
 const HierarchicalTrackSelectorContainer = observer(
-  ({ model, toolbarHeight, overrideDimensions }) => {
+  ({
+    model,
+    toolbarHeight,
+    overrideDimensions,
+  }: {
+    model: HierarchicalTrackSelectorModel
+    toolbarHeight: number
+    overrideDimensions?: { width: number; height: number }
+  }) => {
     const classes = useStyles()
     const session = getSession(model)
-    const [anchorEl, setAnchorEl] = useState(null)
+    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}
-          overrideDimensions={overrideDimensions}
         />
-        {session.addConnectionConf || session.addTrackConf ? (
+        {hasAddTrack || hasConnections ? (
           <>
             <Fab
               color="secondary"
               className={classes.fab}
-              onClick={event => {
-                setAnchorEl(event.currentTarget)
-              }}
+              onClick={event => setAnchorEl(event.currentTarget)}
             >
               <AddIcon />
             </Fab>
@@ -332,32 +408,34 @@ const HierarchicalTrackSelectorContainer = observer(
               open={Boolean(anchorEl)}
               onClose={() => setAnchorEl(null)}
             >
-              {session.addConnectionConf ? (
+              {hasConnections ? (
                 <MenuItem
                   onClick={() => {
                     handleFabClose()
-                    const widget = session.addWidget(
-                      'AddConnectionWidget',
-                      'addConnectionWidget',
-                    )
-                    session.showWidget(widget)
+                    if (isSessionModelWithWidgets(session)) {
+                      session.showWidget(
+                        session.addWidget(
+                          'AddConnectionWidget',
+                          'addConnectionWidget',
+                        ),
+                      )
+                    }
                   }}
                 >
                   Add connection
                 </MenuItem>
               ) : null}
-              {session.addTrackConf ? (
+              {hasAddTrack ? (
                 <MenuItem
                   onClick={() => {
                     handleFabClose()
-                    const widget = session.addWidget(
-                      'AddTrackWidget',
-                      'addTrackWidget',
-                      {
-                        view: model.view.id,
-                      },
-                    )
-                    session.showWidget(widget)
+                    if (isSessionModelWithWidgets(session)) {
+                      session.showWidget(
+                        session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                          view: model.view.id,
+                        }),
+                      )
+                    }
                   }}
                 >
                   Add track
@@ -372,20 +450,44 @@ const HierarchicalTrackSelectorContainer = observer(
 )
 
 const HierarchicalTrackSelectorHeader = observer(
-  ({ model, setHeaderHeight, setAssemblyIdx, assemblyIdx }) => {
+  ({
+    model,
+    setHeaderHeight,
+    setAssemblyIdx,
+    assemblyIdx,
+  }: {
+    model: HierarchicalTrackSelectorModel
+    setHeaderHeight: (n: number) => void
+    setAssemblyIdx: (n: number) => void
+    assemblyIdx: number
+  }) => {
     const classes = useStyles()
     const session = getSession(model)
-    const [connectionAnchorEl, setConnectionAnchorEl] = useState()
-    const [menuAnchorEl, setMenuAnchorEl] = useState()
-    const [modalInfo, setModalInfo] = useState()
-    const [deleteDialogDetails, setDeleteDialogDetails] = useState()
+    const [connectionAnchorEl, setConnectionAnchorEl] =
+      useState<HTMLButtonElement>()
+    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLButtonElement>()
+    const [modalInfo, setModalInfo] = useState<{
+      connectionConf: AnyConfigurationModel
+      safelyBreakConnection: Function
+      dereferenceTypeCount: { [key: string]: number }
+      name: string
+    }>()
+    const [deleteDialogDetails, setDeleteDialogDetails] = useState<{
+      name: string
+      connectionConf: AnyConfigurationModel
+    }>()
     const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
     const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
     const { assemblyNames } = model
     const assemblyName = assemblyNames[assemblyIdx]
 
-    function breakConnection(connectionConf, deletingConnection) {
+    function breakConnection(
+      connectionConf: AnyConfigurationModel,
+      deletingConnection?: boolean,
+    ) {
       const name = readConfObject(connectionConf, 'name')
+
+      // @ts-ignore
       const result = session.prepareToBreakConnection(connectionConf)
       if (result) {
         const [safelyBreakConnection, dereferenceTypeCount] = result
@@ -412,13 +514,17 @@ const HierarchicalTrackSelectorHeader = observer(
       },
     ]
 
-    if (session.addConnectionConf) {
+    if (isSessionModelWithConnections(session)) {
       connectionMenuItems.unshift({
         label: 'Add connection',
         onClick: () => {
-          session.showWidget(
-            session.addWidget('AddConnectionWidget', 'addConnectionWidget'),
-          )
+          if (isSessionModelWithWidgets(session)) {
+            const widget = session.addWidget(
+              'AddConnectionWidget',
+              'addConnectionWidget',
+            )
+            session.showWidget(widget)
+          }
         },
       })
 
@@ -435,9 +541,7 @@ const HierarchicalTrackSelectorHeader = observer(
               label: 'Select assembly...',
               subMenu: assemblyNames.map((name, idx) => ({
                 label: name,
-                onClick: () => {
-                  setAssemblyIdx(idx)
-                },
+                onClick: () => setAssemblyIdx(idx),
               })),
             },
           ]
@@ -447,11 +551,16 @@ const HierarchicalTrackSelectorHeader = observer(
       {
         label: 'Add track...',
         onClick: () => {
-          session.showWidget(
-            session.addWidget('AddTrackWidget', 'addTrackWidget', {
-              view: model.view.id,
-            }),
-          )
+          if (isSessionModelWithWidgets(session)) {
+            const widget = session.addWidget(
+              'AddTrackWidget',
+              'addTrackWidget',
+              {
+                view: model.view.id,
+              },
+            )
+            session.showWidget(widget)
+          }
         },
       },
 
@@ -464,12 +573,10 @@ const HierarchicalTrackSelectorHeader = observer(
         data-testid="hierarchical_track_selector"
       >
         <div style={{ display: 'flex' }}>
-          {session.addTrackConf && (
+          {isSessionWithAddTracks(session) && (
             <IconButton
               className={classes.menuIcon}
-              onClick={event => {
-                setMenuAnchorEl(event.currentTarget)
-              }}
+              onClick={event => setMenuAnchorEl(event.currentTarget)}
             >
               <MenuIcon />
             </IconButton>
@@ -478,9 +585,7 @@ const HierarchicalTrackSelectorHeader = observer(
           {session.makeConnection && (
             <IconButton
               className={classes.menuIcon}
-              onClick={event => {
-                setConnectionAnchorEl(event.currentTarget)
-              }}
+              onClick={event => setConnectionAnchorEl(event.currentTarget)}
             >
               <Cable />
             </IconButton>
@@ -528,7 +633,6 @@ const HierarchicalTrackSelectorHeader = observer(
             <CloseConnectionDialog
               modalInfo={modalInfo}
               setModalInfo={setModalInfo}
-              session={session}
             />
           ) : deleteDialogDetails ? (
             <DeleteConnectionDialog
@@ -557,27 +661,35 @@ const HierarchicalTrackSelectorHeader = observer(
     )
   },
 )
-const HierarchicalTrackSelector = observer(({ model, toolbarHeight = 0 }) => {
-  const [assemblyIdx, setAssemblyIdx] = useState(0)
-  const [headerHeight, setHeaderHeight] = useState(0)
-
-  const { assemblyNames } = model
-  const assemblyName = assemblyNames[assemblyIdx]
-  return assemblyName ? (
-    <>
-      <HierarchicalTrackSelectorHeader
-        model={model}
-        setHeaderHeight={setHeaderHeight}
-        setAssemblyIdx={setAssemblyIdx}
-        assemblyIdx={assemblyIdx}
-      />
-      <AutoSizedHierarchicalTree
-        tree={model.hierarchy(assemblyName)}
-        model={model}
-        offset={toolbarHeight + headerHeight}
-      />
-    </>
-  ) : null
-})
+const HierarchicalTrackSelector = observer(
+  ({
+    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 ? (
+      <>
+        <HierarchicalTrackSelectorHeader
+          model={model}
+          setHeaderHeight={setHeaderHeight}
+          setAssemblyIdx={setAssemblyIdx}
+          assemblyIdx={assemblyIdx}
+        />
+        <AutoSizedHierarchicalTree
+          tree={model.hierarchy(assemblyName)}
+          model={model}
+          offset={toolbarHeight + headerHeight}
+        />
+      </>
+    ) : null
+  },
+)
 
 export default HierarchicalTrackSelectorContainer

package/src/HierarchicalTrackSelectorWidget/components/ManageConnectionsDialog.tsx

@@ -12,7 +12,10 @@ import {
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { observer } from 'mobx-react'
-import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
 const useStyles = makeStyles(theme => ({
@@ -36,7 +39,7 @@ function ManageConnectionsDlg({
 }: {
   handleClose: () => void
   session: AbstractSessionModel
-  breakConnection: Function
+  breakConnection: (conf: AnyConfigurationModel, arg: boolean) => void
 }) {
   const classes = useStyles()
   const { adminMode, connections, sessionConnections } = session

package/src/HierarchicalTrackSelectorWidget/components/ToggleConnectionsDialog.tsx

@@ -13,7 +13,10 @@ import {
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { observer } from 'mobx-react'
-import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
 const useStyles = makeStyles(theme => ({
@@ -39,10 +42,10 @@ function ToggleConnectionDialog({
   handleClose: () => void
   session: AbstractSessionModel
   assemblyName: string
-  breakConnection: Function
+  breakConnection: (arg: AnyConfigurationModel) => void
 }) {
   const classes = useStyles()
-  const { connections, connectionInstances } = session
+  const { connections, connectionInstances: instances = [] } = session
   const assemblySpecificConnections = connections.filter(c => {
     const configAssemblyNames = readConfObject(c, 'assemblyNames')
     if (configAssemblyNames.length === 0) {
@@ -50,6 +53,7 @@ function ToggleConnectionDialog({
     }
     return configAssemblyNames.includes(assemblyName)
   })
+
   return (
     <Dialog open onClose={handleClose} maxWidth="lg">
       <DialogTitle>
@@ -66,31 +70,25 @@ function ToggleConnectionDialog({
         <div className={classes.connectionContainer}>
           {assemblySpecificConnections.map(conf => {
             const name = readConfObject(conf, 'name')
+            const found = instances.find(conn => name === conn.name)
             return (
-              <div key={conf.connectionId}>
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={
-                        !!connectionInstances?.find(conn => name === conn.name)
+              <FormControlLabel
+                key={conf.connectionId}
+                control={
+                  <Checkbox
+                    checked={!!found}
+                    onChange={() => {
+                      if (found) {
+                        breakConnection(conf)
+                      } else {
+                        session.makeConnection?.(conf)
                       }
-                      onChange={() => {
-                        if (
-                          connectionInstances?.find(
-                            conn => conn.name === readConfObject(conf, 'name'),
-                          )
-                        ) {
-                          breakConnection(conf)
-                        } else {
-                          session.makeConnection?.(conf)
-                        }
-                      }}
-                      color="primary"
-                    />
-                  }
-                  label={name}
-                />
-              </div>
+                    }}
+                    color="primary"
+                  />
+                }
+                label={name}
+              />
             )
           })}
           {!assemblySpecificConnections.length ? (