@jbrowse/plugin-data-management 2.1.4 → 2.1.5

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,4 +1,10 @@
-import { types, getParent, getEnv, Instance } from 'mobx-state-tree'
+import {
+  types,
+  getParent,
+  getEnv,
+  getSnapshot,
+  Instance,
+} from 'mobx-state-tree'
 import {
   getConf,
   readConfObject,
@@ -55,12 +61,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)
@@ -226,24 +229,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/__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