@jbrowse/plugin-data-management 2.1.4 → 2.1.6

package/src/HierarchicalTrackSelectorWidget/components/Header.tsx

@@ -1,16 +1,11 @@
 import React, { Suspense, lazy, useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
 import { Badge, IconButton, InputAdornment, TextField } from '@mui/material'
-// icons
-import ClearIcon from '@mui/icons-material/Clear'
-import MenuIcon from '@mui/icons-material/Menu'
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
-import { Cable } from '@jbrowse/core/ui/Icons'
-
-// other
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
 import JBrowseMenu, { MenuItem } from '@jbrowse/core/ui/Menu'
 import {
   getSession,
+  getEnv,
   isSessionModelWithWidgets,
   isSessionModelWithConnections,
   isSessionWithAddTracks,
@@ -19,8 +14,12 @@ import {
   AnyConfigurationModel,
   readConfObject,
 } from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+import MenuIcon from '@mui/icons-material/Menu'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
+import { Cable } from '@jbrowse/core/ui/Icons'
 
 // locals
 import { HierarchicalTrackSelectorModel } from '../model'
@@ -74,7 +73,6 @@ function HierarchicalTrackSelectorHeader({
   const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
   const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
   const { assemblyNames } = model
-  const assemblyName = assemblyNames[assemblyIdx]
 
   function breakConnection(
     connectionConf: AnyConfigurationModel,
@@ -159,6 +157,8 @@ function HierarchicalTrackSelectorHeader({
 
   const items = getEnv(model).pluginManager.evaluateExtensionPoint(
     'TrackSelector-multiTrackMenuItems',
+    [],
+    { session },
   ) as MenuItem[]
   return (
     <div
@@ -276,7 +276,6 @@ function HierarchicalTrackSelectorHeader({
             handleClose={() => setConnectionToggleOpen(false)}
             session={session}
             breakConnection={breakConnection}
-            assemblyName={assemblyName}
           />
         ) : null}
       </Suspense>

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 import React from 'react'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
@@ -20,7 +18,7 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders nothing with no assembly', () => {
     const session = createTestSession()
-    const firstView = session!.addView('LinearGenomeView')
+    const firstView = session.addView('LinearGenomeView')
     const model = firstView.activateTrackSelector()
 
     const { container } = render(
@@ -34,7 +32,6 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of uncategorized tracks', async () => {
     const session = createTestSession()
-    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -54,21 +51,19 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session!.addView('LinearGenomeView', {
+    const firstView = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -78,8 +73,8 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session!.sessionTracks[0].trackId)
-    firstView.showTrack(session!.sessionTracks[1].trackId)
+    firstView.showTrack(session.sessionTracks[0].trackId)
+    firstView.showTrack(session.sessionTracks[1].trackId)
     const model = firstView.activateTrackSelector()
 
     const { container, findByTestId } = render(
@@ -94,7 +89,6 @@ describe('HierarchicalTrackSelector widget', () => {
 
   it('renders with a couple of categorized tracks', async () => {
     const session = createTestSession()
-    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -115,21 +109,19 @@ describe('HierarchicalTrackSelector widget', () => {
       },
     })
 
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'fooC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    // @ts-ignore
     session.addTrackConf({
       trackId: 'barC',
       assemblyNames: ['volMyt1'],
       type: 'FeatureTrack',
       adapter: { type: 'FromConfigAdapter', features: [] },
     })
-    const firstView = session!.addView('LinearGenomeView', {
+    const firstView = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
           assemblyName: 'volMyt1',
@@ -139,8 +131,8 @@ describe('HierarchicalTrackSelector widget', () => {
         },
       ],
     })
-    firstView.showTrack(session!.sessionTracks[0].trackId)
-    firstView.showTrack(session!.sessionTracks[1].trackId)
+    firstView.showTrack(session.sessionTracks[0].trackId)
+    firstView.showTrack(session.sessionTracks[1].trackId)
     firstView.tracks[0].configuration.category.set(['Foo Category'])
     firstView.tracks[1].configuration.category.set([
       'Foo Category',

package/src/HierarchicalTrackSelectorWidget/components/ManageConnectionsDialog.tsx

@@ -62,22 +62,20 @@ function ManageConnectionsDlg({
           {connections.map(conf => {
             const name = readConfObject(conf, 'name')
             return (
-              <div key={`conn-${name}`}>
-                <Typography>
-                  {adminMode || sessionConnections?.includes(conf) ? (
-                    <IconButton onClick={() => breakConnection(conf, true)}>
-                      <CloseIcon color="error" />
+              <Typography key={`conn-${name}`}>
+                {adminMode || sessionConnections?.includes(conf) ? (
+                  <IconButton onClick={() => breakConnection(conf, true)}>
+                    <CloseIcon color="error" />
+                  </IconButton>
+                ) : (
+                  <Tooltip title="Unable to delete connection in config file as non-admin user">
+                    <IconButton>
+                      <CloseIcon color="disabled" />
                     </IconButton>
-                  ) : (
-                    <Tooltip title="Unable to delete connection in config file as non-admin user">
-                      <IconButton>
-                        <CloseIcon color="disabled" />
-                      </IconButton>
-                    </Tooltip>
-                  )}
-                  {name}
-                </Typography>
-              </div>
+                  </Tooltip>
+                )}
+                {name}
+              </Typography>
             )
           })}
           {!connections.length ? (

package/src/HierarchicalTrackSelectorWidget/components/ToggleConnectionsDialog.tsx

@@ -19,6 +19,10 @@ import {
 } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
+export function ellipses(slug: string) {
+  return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug
+}
+
 const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
@@ -36,24 +40,14 @@ const useStyles = makeStyles()(theme => ({
 function ToggleConnectionDialog({
   session,
   handleClose,
-  assemblyName,
   breakConnection,
 }: {
   handleClose: () => void
   session: AbstractSessionModel
-  assemblyName: string
   breakConnection: (arg: AnyConfigurationModel) => void
 }) {
   const { classes } = useStyles()
   const { connections, connectionInstances: instances = [] } = session
-  const assemblySpecificConnections = connections.filter(c => {
-    const configAssemblyNames = readConfObject(c, 'assemblyNames')
-    if (configAssemblyNames.length === 0) {
-      return true
-    }
-    return configAssemblyNames.includes(assemblyName)
-  })
-
   return (
     <Dialog open onClose={handleClose} maxWidth="lg">
       <DialogTitle>
@@ -68,8 +62,9 @@ function ToggleConnectionDialog({
       <DialogContent>
         <Typography>Use the checkbox to turn on/off connections</Typography>
         <div className={classes.connectionContainer}>
-          {assemblySpecificConnections.map(conf => {
+          {connections.map(conf => {
             const name = readConfObject(conf, 'name')
+            const assemblyNames = readConfObject(conf, 'assemblyNames')
             const found = instances.find(conn => name === conn.name)
             return (
               <FormControlLabel
@@ -87,12 +82,12 @@ function ToggleConnectionDialog({
                     color="primary"
                   />
                 }
-                label={name}
+                label={`${name} (${ellipses(assemblyNames.join(','))})`}
               />
             )
           })}
-          {!assemblySpecificConnections.length ? (
-            <Typography>No connections found for {assemblyName}</Typography>
+          {!connections.length ? (
+            <Typography>No connections found</Typography>
           ) : null}
         </div>
       </DialogContent>

package/src/HierarchicalTrackSelectorWidget/components/__snapshots__/HierarchicalTrackSelector.test.tsx.snap

@@ -73,7 +73,7 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
       class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root tss-45fwc5-searchBox css-1z10yd4-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
         for="mui-5"
         id="mui-5-label"
@@ -170,7 +170,7 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
       class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root tss-45fwc5-searchBox css-1z10yd4-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
         for="mui-1"
         id="mui-1-label"

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -1,10 +1,11 @@
-import { types, getParent, getEnv, Instance } from 'mobx-state-tree'
+import { types, getSnapshot, Instance } from 'mobx-state-tree'
 import {
   getConf,
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
+import { AbstractSessionModel, getSession, getEnv } from '@jbrowse/core/util'
+import { getTrackName } from '@jbrowse/core/util/tracks'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import PluginManager from '@jbrowse/core/PluginManager'
 
@@ -12,28 +13,19 @@ function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
   return !!a1.find(value => a2.includes(value))
 }
 
-function passesFilter(filter: string, config: AnyConfigurationModel) {
+function passesFilter(
+  filter: string,
+  config: AnyConfigurationModel,
+  session: AbstractSessionModel,
+) {
   const categories = readConfObject(config, 'category') as string[] | undefined
   const filterLower = filter.toLowerCase()
   return (
-    getTrackName(config).toLowerCase().includes(filterLower) ||
+    getTrackName(config, session).toLowerCase().includes(filterLower) ||
     !!categories?.filter(c => c.toLowerCase().includes(filterLower)).length
   )
 }
 
-function getTrackName(config: AnyConfigurationModel): string {
-  if (!config.trackId) {
-    throw new Error('not a track')
-  }
-  return (
-    readConfObject(config, 'name') ||
-    `Reference sequence (${
-      readConfObject(getParent(config), 'displayName') ||
-      readConfObject(getParent(config), 'name')
-    })`
-  )
-}
-
 export type TreeNode = {
   name: string
   id: string
@@ -55,12 +47,9 @@ function filterTracks(
   if (!assembly) {
     return []
   }
+  const { allAliases } = assembly
   return tracks
-    .filter(c => {
-      const trackConfAssemblies = readConfObject(c, 'assemblyNames')
-      const { allAliases } = assembly
-      return hasAnyOverlap(allAliases, trackConfAssemblies)
-    })
+    .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)
@@ -76,9 +65,10 @@ export function generateHierarchy(
 ) {
   const hierarchy = { children: [] as TreeNode[] } as TreeNode
   const { filterText, view } = model
+  const session = getSession(model)
 
   trackConfigurations
-    .filter(conf => passesFilter(filterText, conf))
+    .filter(conf => passesFilter(filterText, conf, session))
     .forEach(conf => {
       // copy the categories since this array can be mutated downstream
       const categories = [...(readConfObject(conf, 'category') || [])]
@@ -118,7 +108,7 @@ export function generateHierarchy(
         0,
         {
           id: conf.trackId,
-          name: getTrackName(conf),
+          name: getTrackName(conf, session),
           conf,
           checked: !!tracks.find(f => f.configuration === conf),
           children: [],
@@ -226,24 +216,26 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         )
 
         const session = getSession(self)
-        const { connections, connectionInstances } = session
+        const { connectionInstances } = session
+
+        const { assemblyManager } = getSession(self)
+        const assembly = assemblyManager.get(assemblyName)
         const conns =
-          connectionInstances
-            ?.filter(c => {
-              const names = getConf(c, 'assemblyNames')
-              return names.length === 0 ? true : names.includes(assemblyName)
-            })
-            .map((conn, index) => {
-              const c = connections[index]
-              return {
-                id: c.connectionId,
-                name: readConfObject(c, 'name'),
-                children: this.connectionHierarchy(assemblyName, conn),
+          (assembly &&
+            connectionInstances
+              ?.filter(c =>
+                hasAnyOverlap(assembly.allAliases, getConf(c, 'assemblyNames')),
+              )
+              .map(c => ({
+                // @ts-ignore
+                id: getSnapshot(c).configuration,
+                name: getConf(c, 'name'),
+                children: this.connectionHierarchy(assemblyName, c),
                 state: {
                   expanded: true,
                 },
-              }
-            }) || []
+              }))) ||
+          []
 
         return {
           name: 'Root',

package/src/PluginStoreWidget/components/PluginCard.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
-import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
-import { getEnv, getParent } from 'mobx-state-tree'
-import { getSession } from '@jbrowse/core/util'
+import { getParent } from 'mobx-state-tree'
+import { getSession, getEnv } from '@jbrowse/core/util'
 import {
   JBrowsePlugin,
   isSessionWithSessionPlugins,
@@ -52,7 +51,7 @@ function PluginCard({
 }) {
   const { classes } = useStyles()
   const session = getSession(model)
-  const { pluginManager } = getEnv(model) as { pluginManager: PluginManager }
+  const { pluginManager } = getEnv(model)
   const isInstalled = Boolean(
     pluginManager.runtimePluginDefinitions.find(def => def.url === plugin.url),
   )

package/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.js.snap

@@ -8,7 +8,7 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
     class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-1z10yd4-MuiFormControl-root-MuiTextField-root"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
       data-shrink="false"
       for="mui-1"
       id="mui-1-label"
@@ -834,7 +834,7 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
                 class="MuiCardActions-root MuiCardActions-spacing css-1t6e9jv-MuiCardActions-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall css-1cpxz0y-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall css-1cpxz0y-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >

package/src/AddConnectionWidget/components/ConfigureConnection.js

@@ -1,20 +0,0 @@
-import React, { Suspense } from 'react'
-import { ConfigurationEditor } from '@jbrowse/plugin-config'
-import { observer } from 'mobx-react'
-
-const ConfigureConnection = observer(props => {
-  const { connectionType, model, setModelReady } = props
-  const ConfigEditorComponent =
-    connectionType.configEditorComponent || ConfigurationEditor
-
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <ConfigEditorComponent
-        model={{ target: model }}
-        setModelReady={setModelReady}
-      />
-    </Suspense>
-  )
-})
-
-export default ConfigureConnection