@jbrowse/plugin-data-management 2.5.0 → 2.6.1

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.tsx

@@ -46,7 +46,7 @@ export default observer(function FacetedSelector({
 }: {
   model: HierarchicalTrackSelectorModel
 }) {
-  const { assemblyNames, view, selection } = model
+  const { view, selection } = model
   const { pluginManager } = getEnv(model)
   const { ref, scrollLeft } = useResizeBar()
 
@@ -56,10 +56,9 @@ export default observer(function FacetedSelector({
   const [useShoppingCart, setUseShoppingCart] = useState(false)
   const [hideSparse, setHideSparse] = useState(true)
   const [panelWidth, setPanelWidth] = useState(400)
-
-  const assemblyName = assemblyNames[0]
   const session = getSession(model)
   const filterDebounced = useDebounce(filterText, 400)
+  const tracks = view.tracks as AnyConfigurationModel[]
   const [filters, dispatch] = useReducer(
     (
       state: Record<string, string[]>,
@@ -73,8 +72,7 @@ export default observer(function FacetedSelector({
   const rows = useMemo(() => {
     // metadata is spread onto the object for easier access and sorting
     // by the mui data grid (it's unable to sort by nested objects)
-    return model
-      .trackConfigurations(assemblyName)
+    return model.trackConfigurations
       .filter(conf => matches(filterDebounced, conf, session))
       .map(track => {
         const metadata = readConfObject(track, 'metadata')
@@ -89,7 +87,7 @@ export default observer(function FacetedSelector({
           ...metadata,
         }
       })
-  }, [assemblyName, model, filterDebounced, session])
+  }, [model, filterDebounced, session])
 
   const filteredNonMetadataKeys = useMemo(
     () =>
@@ -109,9 +107,10 @@ export default observer(function FacetedSelector({
     [hideSparse, rows],
   )
 
-  const fields = useMemo(() => {
-    return ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys]
-  }, [filteredNonMetadataKeys, filteredMetadataKeys])
+  const fields = useMemo(
+    () => ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys],
+    [filteredNonMetadataKeys, filteredMetadataKeys],
+  )
 
   const [widths, setWidths] = useState({
     name:
@@ -137,7 +136,7 @@ export default observer(function FacetedSelector({
         ),
       ]),
     ),
-  } as { [key: string]: number })
+  } as { [key: string]: number | undefined })
 
   const [visible, setVisible] = useState(
     Object.fromEntries(fields.map(c => [c, true])),
@@ -202,11 +201,11 @@ export default observer(function FacetedSelector({
           </>
         )
       },
-      width: widthsDebounced.name || 100, // can be undefined before useEffect update
+      width: widthsDebounced.name ?? 100,
     },
     ...filteredNonMetadataKeys.map(e => ({
       field: e,
-      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      width: widthsDebounced[e] ?? 100,
       renderCell: (params: GridCellParams) => {
         const { value } = params
         return value ? <SanitizedHTML html={value as string} /> : ''
@@ -214,7 +213,7 @@ export default observer(function FacetedSelector({
     })),
     ...filteredMetadataKeys.map(e => ({
       field: e,
-      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      width: widthsDebounced[e] ?? 100,
       renderCell: (params: GridCellParams) => {
         const { value } = params
         return value ? <SanitizedHTML html={value as string} /> : ''
@@ -222,10 +221,7 @@ export default observer(function FacetedSelector({
     })),
   ]
 
-  const shownTrackIds = view.tracks.map(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (t: any) => t.configuration.trackId,
-  ) as string[]
+  const shownTrackIds = tracks.map(t => t.configuration.trackId as string)
 
   const arrFilters = Object.entries(filters).filter(f => f[1].length > 0)
   return (
@@ -271,7 +267,7 @@ export default observer(function FacetedSelector({
         >
           <ResizeBar
             checkbox
-            widths={Object.values(widths)}
+            widths={Object.values(widths).map(f => f ?? 100)}
             setWidths={newWidths =>
               setWidths(
                 Object.fromEntries(

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/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', () => {

package/src/ucsc-trackhub/model.ts

@@ -10,12 +10,6 @@ import { types } from 'mobx-state-tree'
 
 // locals
 import configSchema from './configSchema'
-import {
-  fetchGenomesFile,
-  fetchHubFile,
-  fetchTrackDbFile,
-  generateTracks,
-} from './ucscTrackHub'
 
 export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
   return types
@@ -30,9 +24,15 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
     .actions(self => ({
       async connect() {
         const session = getSession(self)
+        const notLoadedAssemblies = [] as string[]
         try {
-          const connectionName = getConf(self, 'name') // NOTE: name comes from the base configuration
           const hubFileLocation = getConf(self, 'hubTxtLocation')
+          const {
+            generateTracks,
+            fetchGenomesFile,
+            fetchTrackDbFile,
+            fetchHubFile,
+          } = await import('./ucscTrackHub')
           const hubFile = await fetchHubFile(hubFileLocation)
           const genomeFile = hubFile.get('genomesFile')
           if (!genomeFile) {
@@ -50,7 +50,7 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
                 locationType: 'LocalPathLocation' as const,
               }
           const genomesFile = await fetchGenomesFile(genomesFileLocation)
-          const trackDbData = []
+          const map = {} as { [key: string]: number }
           for (const [genomeName, genome] of genomesFile) {
             const assemblyNames = getConf(self, 'assemblyNames')
             if (
@@ -62,16 +62,15 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
 
             const conf = session.assemblyManager.get(genomeName)?.configuration
             if (!conf) {
-              throw new Error(
-                `Cannot find assembly for "${genomeName}" from the genomes file for connection "${connectionName}"`,
-              )
+              notLoadedAssemblies.push(genomeName)
+              continue
             }
             const db = genome.get('trackDb')
             if (!db) {
               throw new Error('genomesFile not found on hub')
             }
             const base = new URL(genomeFile, hubUri)
-            const trackDbLoc = hubUri
+            const loc = hubUri
               ? {
                   uri: new URL(db, base).href,
                   locationType: 'UriLocation' as const,
@@ -80,20 +79,25 @@ export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
                   localPath: db,
                   locationType: 'LocalPathLocation' as const,
                 }
-            const trackDb = await fetchTrackDbFile(trackDbLoc)
-            trackDbData.push([trackDbLoc, trackDb, genomeName, conf] as const)
-          }
-          for (const [
-            trackDbLoc,
-            trackDbFile,
-            genomeName,
-            conf,
-          ] of trackDbData) {
+            const trackDb = await fetchTrackDbFile(loc)
             const seqAdapter = readConfObject(conf, ['sequence', 'adapter'])
-            self.addTrackConfs(
-              generateTracks(trackDbFile, trackDbLoc, genomeName, seqAdapter),
-            )
+            const tracks = generateTracks(trackDb, loc, genomeName, seqAdapter)
+            self.addTrackConfs(tracks)
+            map[genomeName] = tracks.length
           }
+
+          const loadedAssemblies = Object.entries(map)
+          const str1 = loadedAssemblies.length
+            ? `Loaded data from these assemblies: ${loadedAssemblies
+                .map(([key, val]) => `${key} (${val} tracks)`)
+                .join(', ')}`
+            : ''
+          const str2 = notLoadedAssemblies.length
+            ? `Skipped data from these assemblies: ${notLoadedAssemblies.join(
+                ', ',
+              )}`
+            : ''
+          session.notify([str1, str2].filter(f => !!f).join('. '), 'success')
         } catch (e) {
           console.error(e)
           session.notify(