@jbrowse/plugin-data-management 2.4.2 → 2.6.1

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

@@ -5,8 +5,10 @@ import { observer } from 'mobx-react'
 import JBrowseMenu from '@jbrowse/core/ui/Menu'
 import {
   getSession,
-  isSessionModelWithWidgets,
+  isSessionModelWithConnectionEditing,
   isSessionModelWithConnections,
+  isSessionModelWithWidgets,
+  isSessionWithAddTracks,
 } from '@jbrowse/core/util'
 import {
   AnyConfigurationModel,
@@ -42,7 +44,7 @@ const useStyles = makeStyles()(theme => ({
 
 interface ModalArgs {
   connectionConf: AnyConfigurationModel
-  safelyBreakConnection: Function
+  safelyBreakConnection: () => void
   dereferenceTypeCount: { [key: string]: number }
   name: string
 }
@@ -54,10 +56,8 @@ interface DialogDetails {
 
 export default observer(function HamburgerMenu({
   model,
-  setAssemblyIdx,
 }: {
   model: HierarchicalTrackSelectorModel
-  setAssemblyIdx: Function
 }) {
   const session = getSession(model)
   const [menuEl, setMenuEl] = useState<HTMLButtonElement>()
@@ -66,7 +66,6 @@ export default observer(function HamburgerMenu({
   const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
   const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
   const { classes } = useStyles()
-  const { assemblyNames } = model
 
   function breakConnection(
     connectionConf: AnyConfigurationModel,
@@ -92,30 +91,6 @@ export default observer(function HamburgerMenu({
     }
   }
 
-  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
@@ -134,38 +109,58 @@ export default observer(function HamburgerMenu({
         }}
         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
+          ...(isSessionWithAddTracks(session)
+            ? [
+                {
+                  label: 'Add track...',
+                  onClick: () => {
+                    if (isSessionModelWithWidgets(session)) {
+                      session.showWidget(
+                        session.addWidget('AddTrackWidget', 'addTrackWidget', {
+                          view: model.view.id,
+                        }),
+                      )
+                    }
+                  },
+                },
+              ]
+            : []),
+          ...(isSessionModelWithConnections(session)
             ? [
                 {
-                  label: 'Select assembly...',
-                  subMenu: assemblyNames.map((name, idx) => ({
-                    label: name,
-                    onClick: () => setAssemblyIdx(idx),
-                  })),
+                  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={<div />}>
+      <Suspense fallback={<React.Fragment />}>
         {modalInfo ? (
           <CloseConnectionDlg
             modalInfo={modalInfo}
-            setModalInfo={setModalInfo}
+            onClose={() => setModalInfo(undefined)}
           />
         ) : null}
         {deleteDlgDetails ? (

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

@@ -27,11 +27,9 @@ const useStyles = makeStyles()(theme => ({
 function HierarchicalTrackSelectorHeader({
   model,
   setHeaderHeight,
-  setAssemblyIdx,
 }: {
   model: HierarchicalTrackSelectorModel
   setHeaderHeight: (n: number) => void
-  setAssemblyIdx: (n: number) => void
 }) {
   const { classes } = useStyles()
   const [facetedOpen, setFacetedOpen] = useState(false)
@@ -43,7 +41,7 @@ function HierarchicalTrackSelectorHeader({
       data-testid="hierarchical_track_selector"
     >
       <div style={{ display: 'flex' }}>
-        <HamburgerMenu model={model} setAssemblyIdx={setAssemblyIdx} />
+        <HamburgerMenu model={model} />
         <ShoppingCart model={model} />
 
         <TextField

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -9,6 +9,7 @@ import {
   dedupe,
   getSession,
   getEnv,
+  notEmpty,
 } from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
 import { ElementId } from '@jbrowse/core/util/types/mst'
@@ -49,22 +50,34 @@ export type TreeNode = {
 
 function filterTracks(
   tracks: AnyConfigurationModel[],
-  self: { view: { type: string } },
-  assemblyName: string,
+  self: {
+    view: { type: string; trackSelectorAnyOverlap?: boolean }
+    assemblyNames: string[]
+  },
 ) {
   const { assemblyManager } = getSession(self)
   const { pluginManager } = getEnv(self)
-  const assembly = assemblyManager.get(assemblyName)
+  const { view } = self
+  const { trackSelectorAnyOverlap } = view
+  const trackListAssemblies = self.assemblyNames
+    .map(a => assemblyManager.get(a))
+    .filter(notEmpty)
 
-  if (!assembly) {
-    return []
-  }
-  const { allAliases } = assembly
   return tracks
-    .filter(c => hasAnyOverlap(allAliases, readConfObject(c, 'assemblyNames')))
     .filter(c => {
-      const { displayTypes } = pluginManager.getViewType(self.view.type)
-      const compatDisplays = displayTypes.map((d: { name: string }) => d.name)
+      const trackAssemblyNames = readConfObject(c, 'assemblyNames') as string[]
+      const trackAssemblies = new Set(
+        trackAssemblyNames
+          ?.map(name => assemblyManager.get(name))
+          .filter(notEmpty) || [],
+      )
+      return trackSelectorAnyOverlap
+        ? trackListAssemblies.some(a => trackAssemblies.has(a))
+        : trackListAssemblies.every(a => trackAssemblies.has(a))
+    })
+    .filter(c => {
+      const { displayTypes } = pluginManager.getViewType(view.type)
+      const compatDisplays = displayTypes.map(d => d.name)
       const trackDisplays = c.displays.map((d: { type: string }) => d.type)
       return hasAnyOverlap(compatDisplays, trackDisplays)
     })
@@ -132,12 +145,27 @@ export function generateHierarchy(
   return hierarchy.children
 }
 
+/**
+ * #stateModel HierarchicalTrackSelectorWidget
+ */
 export default function stateTreeFactory(pluginManager: PluginManager) {
   return types
     .model('HierarchicalTrackSelectorWidget', {
+      /**
+       * #property
+       */
       id: ElementId,
+      /**
+       * #property
+       */
       type: types.literal('HierarchicalTrackSelectorWidget'),
+      /**
+       * #property
+       */
       collapsed: types.map(types.boolean),
+      /**
+       * #property
+       */
       view: types.safeReference(
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
@@ -147,33 +175,62 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
       filterText: '',
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
       setSelection(elt: AnyConfigurationModel[]) {
         self.selection = elt
       },
+      /**
+       * #action
+       */
       addToSelection(elt: AnyConfigurationModel[]) {
         self.selection = dedupe([...self.selection, ...elt], e => e.trackId)
       },
+      /**
+       * #action
+       */
       removeFromSelection(elt: AnyConfigurationModel[]) {
         self.selection = self.selection.filter(f => !elt.includes(f))
       },
+      /**
+       * #action
+       */
       clearSelection() {
         self.selection = []
       },
+      /**
+       * #action
+       */
       setView(view: unknown) {
         self.view = view
       },
+      /**
+       * #action
+       */
       toggleCategory(pathName: string) {
         self.collapsed.set(pathName, !self.collapsed.get(pathName))
       },
+      /**
+       * #action
+       */
       clearFilterText() {
         self.filterText = ''
       },
+      /**
+       * #action
+       */
       setFilterText(newText: string) {
         self.filterText = newText
       },
     }))
     .views(self => ({
-      getRefSeqTrackConf(assemblyName: string) {
+      /**
+       * #method
+       */
+      getRefSeqTrackConf(
+        assemblyName: string,
+      ): AnyConfigurationModel | undefined {
         const { assemblyManager } = getSession(self)
         const assembly = assemblyManager.get(assemblyName)
         const trackConf = assembly?.configuration.sequence
@@ -186,71 +243,67 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
             return trackConf
           }
         }
+        return undefined
       },
     }))
     .views(self => ({
-      trackConfigurations(assemblyName: string) {
-        if (!self.view) {
-          return []
-        }
-        const { tracks, assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
-        if (!assembly) {
-          return []
-        }
-        const refseq = self.getRefSeqTrackConf(assemblyName)
-        // filter out tracks that don't match the current assembly (check all
-        // assembly aliases) and display types
-        return [
-          ...(refseq ? [refseq] : []),
-          ...filterTracks(tracks, self, assemblyName),
-        ]
-      },
-
+      /**
+       * #getter
+       */
       get assemblyNames(): string[] {
         return self.view?.assemblyNames || []
       },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       * filter out tracks that don't match the current display types
+       */
+      connectionTrackConfigurations(connection: {
+        tracks: AnyConfigurationModel[]
+      }) {
+        return !self.view ? [] : filterTracks(connection.tracks, self)
+      },
 
-      connectionTrackConfigurations(
-        assemblyName: string,
-        connection: { tracks: AnyConfigurationModel[] },
-      ) {
-        if (!self.view) {
-          return []
-        }
-
-        // filter out tracks that don't match the current display types
-        return filterTracks(connection.tracks, self, assemblyName)
+      /**
+       * #getter
+       * filter out tracks that don't match the current assembly/display types
+       */
+      get trackConfigurations(): AnyConfigurationModel[] {
+        return !self.view
+          ? ([] as AnyConfigurationModel[])
+          : [
+              ...self.assemblyNames.map(a => self.getRefSeqTrackConf(a)),
+              ...filterTracks(getSession(self).tracks, self),
+            ].filter(notEmpty)
       },
     }))
     .views(self => ({
-      hierarchy(assemblyName: string) {
+      /**
+       * #getter
+       */
+      get hierarchy() {
         const hier = generateHierarchy(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          self as any,
-          self.trackConfigurations(assemblyName),
+          self as HierarchicalTrackSelectorModel,
+          self.trackConfigurations,
           self.collapsed,
         )
 
         const session = getSession(self)
         const { connectionInstances } = session
 
-        const { assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
         const conns =
-          (assembly &&
-            connectionInstances
-              ?.map(c => ({
-                // @ts-expect-error
-                id: getSnapshot(c).configuration,
-                name: getConf(c, 'name'),
-                children: this.connectionHierarchy(assemblyName, c),
-                state: {
-                  expanded: true,
-                },
-              }))
-              .filter(f => f.children.length)) ||
-          []
+          connectionInstances
+            ?.map(c => ({
+              // @ts-expect-error
+              id: getSnapshot(c).configuration,
+              name: getConf(c, 'name'),
+              children: this.connectionHierarchy(c),
+              state: {
+                expanded: true,
+              },
+            }))
+            .filter(f => f.children.length) || []
 
         return {
           name: 'Root',
@@ -262,14 +315,16 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         }
       },
 
-      connectionHierarchy(
-        assemblyName: string,
-        connection: { name: string; tracks: AnyConfigurationModel[] },
-      ) {
+      /**
+       * #method
+       */
+      connectionHierarchy(connection: {
+        name: string
+        tracks: AnyConfigurationModel[]
+      }) {
         return generateHierarchy(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          self as any,
-          self.connectionTrackConfigurations(assemblyName, connection),
+          self as HierarchicalTrackSelectorModel,
+          self.connectionTrackConfigurations(connection),
           self.collapsed,
           connection.name,
         )

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
   Collapse,
-  Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
@@ -53,26 +52,6 @@ function CustomPluginForm({
   const [cjsPluginUrl, setCJSPluginUrl] = useState('')
   const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false)
 
-  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    const { name, value } = event.target
-    if (name === 'umdName') {
-      setUMDPluginName(value)
-    }
-    if (name === 'umdUrl') {
-      setUMDPluginUrl(value)
-    }
-    if (name === 'esmUrl') {
-      setESMPluginUrl(value)
-    }
-    if (name === 'cjsUrl') {
-      setCJSPluginUrl(value)
-    }
-  }
-
-  function handleOpenAdvancedOptions() {
-    setAdvancedOptionsOpen(!advancedOptionsOpen)
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { jbrowse } = getRoot<any>(model)
 
@@ -81,21 +60,15 @@ function CustomPluginForm({
   )
 
   function handleSubmit() {
-    if (!ready) {
-      return
-    }
-    const pluginDefinition: PluginDefinition = {}
     if (umdPluginName && umdPluginUrl) {
-      pluginDefinition.name = umdPluginName
-      pluginDefinition.umdUrl = umdPluginUrl
+      jbrowse.addPlugin({ name: umdPluginName, umdUrl: umdPluginUrl })
     }
     if (esmPluginUrl) {
-      pluginDefinition.esmUrl = esmPluginUrl
+      jbrowse.addPlugin({ esmUrl: esmPluginUrl })
     }
     if (cjsPluginUrl) {
-      pluginDefinition.cjsUrl = cjsPluginUrl
+      jbrowse.addPlugin({ cjsUrl: cjsPluginUrl })
     }
-    jbrowse.addPlugin(pluginDefinition)
   }
 
   function handleClose() {
@@ -120,7 +93,7 @@ function CustomPluginForm({
             label="Plugin name"
             variant="outlined"
             value={umdPluginName}
-            onChange={handleChange}
+            onChange={event => setUMDPluginName(event.target.value)}
           />
           <TextField
             id="umd-url-input"
@@ -128,9 +101,11 @@ function CustomPluginForm({
             label="Plugin URL"
             variant="outlined"
             value={umdPluginUrl}
-            onChange={handleChange}
+            onChange={event => setUMDPluginUrl(event.target.value)}
           />
-          <DialogContentText onClick={handleOpenAdvancedOptions}>
+          <DialogContentText
+            onClick={() => setAdvancedOptionsOpen(!advancedOptionsOpen)}
+          >
             <IconButton
               className={cx(classes.expand, {
                 [classes.expandOpen]: advancedOptionsOpen,
@@ -156,7 +131,7 @@ function CustomPluginForm({
                 label="ESM build URL"
                 variant="outlined"
                 value={esmPluginUrl}
-                onChange={handleChange}
+                onChange={event => setESMPluginUrl(event.target.value)}
               />
               <TextField
                 id="cjs-url-input"
@@ -164,7 +139,7 @@ function CustomPluginForm({
                 label="CJS build URL"
                 variant="outlined"
                 value={cjsPluginUrl}
-                onChange={handleChange}
+                onChange={event => setCJSPluginUrl(event.target.value)}
               />
             </div>
           </Collapse>

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -154,16 +154,13 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
         ) : pluginArray ? (
           pluginArray
             .filter(plugin => {
-              // If pugin only has cjsUrl, don't display outside desktop
-              if (
-                !isElectron &&
-                !(plugin.esmUrl || plugin.url || plugin.umdUrl)
-              ) {
-                return false
-              }
-              return plugin.name
-                .toLowerCase()
-                .includes(model.filterText.toLowerCase())
+              // If plugin only has cjsUrl, don't display outside desktop
+              return (
+                !(isElectron && plugin.cjsUrl) &&
+                plugin.name
+                  .toLowerCase()
+                  .includes(model.filterText.toLowerCase())
+              )
             })
             .map(plugin => (
               <PluginCard

package/src/PluginStoreWidget/model.test.tsx

@@ -1,4 +1,4 @@
-import { createTestSession } from '@jbrowse/web/src/rootModel'
+import { createTestSession } from '@jbrowse/web/src/rootModel/test_util'
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 describe('PluginStoreModel', () => {