@jbrowse/plugin-data-management 2.4.2 → 2.6.1

package/esm/ucsc-trackhub/model.js

@@ -4,7 +4,6 @@ import { getSession } from '@jbrowse/core/util';
 import { types } from 'mobx-state-tree';
 // locals
 import configSchema from './configSchema';
-import { fetchGenomesFile, fetchHubFile, fetchTrackDbFile, generateTracks, } from './ucscTrackHub';
 export default function UCSCTrackHubConnection(pluginManager) {
     return types
         .compose('UCSCTrackHubConnection', BaseConnectionModelFactory(pluginManager), types.model({
@@ -13,10 +12,12 @@ export default function UCSCTrackHubConnection(pluginManager) {
     }))
         .actions(self => ({
         async connect() {
+            var _a;
             const session = getSession(self);
+            const notLoadedAssemblies = [];
             try {
-                const connectionName = getConf(self, 'name');
                 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) {
@@ -33,23 +34,24 @@ export default function UCSCTrackHubConnection(pluginManager) {
                         locationType: 'LocalPathLocation',
                     };
                 const genomesFile = await fetchGenomesFile(genomesFileLocation);
-                const trackDbData = [];
+                const map = {};
                 for (const [genomeName, genome] of genomesFile) {
                     const assemblyNames = getConf(self, 'assemblyNames');
                     if (assemblyNames.length > 0 &&
                         !assemblyNames.includes(genomeName)) {
                         continue;
                     }
-                    const conf = session.assemblies.find(a => readConfObject(a, 'name') === genomeName);
+                    const conf = (_a = session.assemblyManager.get(genomeName)) === null || _a === void 0 ? void 0 : _a.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',
@@ -58,13 +60,22 @@ export default function UCSCTrackHubConnection(pluginManager) {
                             localPath: db,
                             locationType: 'LocalPathLocation',
                         };
-                    const trackDb = await fetchTrackDbFile(trackDbLoc);
-                    trackDbData.push([trackDbLoc, trackDb, genomeName, conf]);
-                }
-                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);

package/esm/ucsc-trackhub/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/ucsc-trackhub/model.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/ucsc-trackhub/model.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "2.4.2",
+  "version": "2.6.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@gmod/ucsc-hub": "^0.1.6",
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^5.0.1",
+    "@mui/x-data-grid": "^6.0.1",
     "clsx": "^1.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",
@@ -61,5 +61,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "36e382a70e7d220343b873e7e6aba5c83e5342c8"
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
 }

package/src/AddConnectionWidget/components/AddConnectionWidget.test.tsx

@@ -7,8 +7,6 @@ import AddConnectionWidget from './AddConnectionWidget'
 
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
-// window.fetch = jest.fn(() => new Promise(resolve => resolve()))
-
 describe('<AddConnectionWidget />', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let model: any
@@ -81,7 +79,7 @@ type bigWig
     expect(session.connections.length).toBe(0)
     fireEvent.mouseDown(getAllByRole('button')[0])
     const ucscTrackHubSelection = await findAllByText('UCSC Track Hub')
-    fireEvent.click(ucscTrackHubSelection[ucscTrackHubSelection.length - 1])
+    fireEvent.click(ucscTrackHubSelection.at(-1)!)
     fireEvent.click(await findByTestId('addConnectionNext'))
     fireEvent.change(await findByDisplayValue('nameOfConnection'), {
       target: { value: 'Test UCSC connection name' },

package/src/AddConnectionWidget/components/AddConnectionWidget.tsx

@@ -1,21 +1,14 @@
 import React, { useState } from 'react'
+import { Button, Step, StepContent, StepLabel, Stepper } from '@mui/material'
 import { getSession, getEnv } from '@jbrowse/core/util'
-import {
-  Button,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-} from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
 
 // locals
 import ConfigureConnection from './ConfigureConnection'
 import ConnectionTypeSelect from './ConnectionTypeSelect'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -35,82 +28,18 @@ const useStyles = makeStyles()(theme => ({
 
 const steps = ['Select a Connection Type', 'Configure Connection']
 
-function AddConnectionWidget({ model }: { model: unknown }) {
+export default observer(function AddConnectionWidget({
+  model,
+}: {
+  model: unknown
+}) {
   const [connectionType, setConnectionType] = useState<ConnectionType>()
   const [configModel, setConfigModel] = useState<AnyConfigurationModel>()
   const [activeStep, setActiveStep] = useState(0)
   const { classes } = useStyles()
-
   const session = getSession(model)
-
   const { pluginManager } = getEnv(session)
 
-  function stepContent() {
-    switch (activeStep) {
-      case 0:
-        return (
-          <ConnectionTypeSelect
-            connectionTypeChoices={
-              pluginManager.getElementTypesInGroup(
-                'connection',
-              ) as ConnectionType[]
-            }
-            connectionType={connectionType}
-            setConnectionType={c => {
-              setConnectionType(c)
-              if (c) {
-                setConfigModel(
-                  c.configSchema.create(
-                    {
-                      connectionId: `${c.name}-${Date.now()}`,
-                    },
-                    getEnv(model),
-                  ),
-                )
-              }
-            }}
-          />
-        )
-      case 1:
-        return connectionType && configModel ? (
-          <ConfigureConnection
-            connectionType={connectionType}
-            model={configModel}
-            session={session}
-          />
-        ) : null
-
-      default:
-        return <Typography>Unknown step</Typography>
-    }
-  }
-
-  function handleNext() {
-    if (activeStep === steps.length - 1) {
-      handleFinish()
-    } else {
-      setActiveStep(activeStep + 1)
-    }
-  }
-
-  function handleBack() {
-    setActiveStep(activeStep - 1)
-  }
-
-  function handleFinish() {
-    const connectionConf = session.addConnectionConf(configModel)
-    if (session.makeConnection) {
-      session.makeConnection(connectionConf)
-    }
-    session.hideWidget(model)
-  }
-
-  function checkNextEnabled() {
-    return (
-      (activeStep === 0 && connectionType) || (activeStep === 1 && configModel)
-    )
-  }
-
   return (
     <div className={classes.root}>
       <Stepper
@@ -122,20 +51,54 @@ function AddConnectionWidget({ model }: { model: unknown }) {
           <Step key={label}>
             <StepLabel>{label}</StepLabel>
             <StepContent>
-              {stepContent()}
+              {activeStep === 0 ? (
+                <ConnectionTypeSelect
+                  connectionTypeChoices={pluginManager.getConnectionElements()}
+                  connectionType={connectionType}
+                  setConnectionType={c => {
+                    setConnectionType(c)
+                    if (!c) {
+                      return
+                    }
+                    const connectionId = `${c.name}-${Date.now()}`
+                    setConfigModel(
+                      c.configSchema.create({ connectionId }, getEnv(model)),
+                    )
+                  }}
+                />
+              ) : connectionType && configModel ? (
+                <ConfigureConnection
+                  connectionType={connectionType}
+                  model={configModel}
+                  session={session}
+                />
+              ) : null}
               <div className={classes.actionsContainer}>
                 <Button
                   disabled={activeStep === 0}
-                  onClick={handleBack}
+                  onClick={() => setActiveStep(activeStep - 1)}
                   className={classes.button}
                 >
                   Back
                 </Button>
                 <Button
-                  disabled={!checkNextEnabled()}
+                  disabled={
+                    !(
+                      (activeStep === 0 && connectionType) ||
+                      (activeStep === 1 && configModel)
+                    )
+                  }
                   variant="contained"
                   color="primary"
-                  onClick={handleNext}
+                  onClick={() => {
+                    if (activeStep === steps.length - 1) {
+                      const conf = session.addConnectionConf(configModel)
+                      session.makeConnection?.(conf)
+                      session.hideWidget(model)
+                    } else {
+                      setActiveStep(activeStep + 1)
+                    }
+                  }}
                   className={classes.button}
                   data-testid="addConnectionNext"
                 >
@@ -148,6 +111,4 @@ function AddConnectionWidget({ model }: { model: unknown }) {
       </Stepper>
     </div>
   )
-}
-
-export default observer(AddConnectionWidget)
+})

package/src/AddConnectionWidget/components/ConfigureConnection.tsx

@@ -6,22 +6,21 @@ import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 
-const ConfigureConnection = observer(
-  (props: {
-    connectionType: ConnectionType
-    model: AnyConfigurationModel
-    session: AbstractSessionModel
-  }) => {
-    const { connectionType, model, session } = props
-    const ConfigEditorComponent =
-      connectionType.configEditorComponent || ConfigurationEditor
+export default observer(function ({
+  connectionType,
+  model,
+  session,
+}: {
+  connectionType: ConnectionType
+  model: AnyConfigurationModel
+  session: AbstractSessionModel
+}) {
+  const ConfigEditorComponent =
+    connectionType.configEditorComponent || ConfigurationEditor
 
-    return (
-      <Suspense fallback={<LoadingEllipses />}>
-        <ConfigEditorComponent model={{ target: model }} session={session} />
-      </Suspense>
-    )
-  },
-)
-
-export default ConfigureConnection
+  return (
+    <Suspense fallback={<LoadingEllipses />}>
+      <ConfigEditorComponent model={{ target: model }} session={session} />
+    </Suspense>
+  )
+})

package/src/AddConnectionWidget/components/ConnectionTypeSelect.tsx

@@ -1,17 +1,20 @@
 import React, { useEffect } from 'react'
 import { IconButton, MenuItem, TextField } from '@mui/material'
 import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
+import { observer } from 'mobx-react'
 
 // icons
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
-function ConnectionTypeSelect(props: {
+export default observer(function ConnectionTypeSelect({
+  connectionTypeChoices,
+  connectionType,
+  setConnectionType,
+}: {
   connectionTypeChoices: ConnectionType[]
   connectionType?: ConnectionType
   setConnectionType: (c?: ConnectionType) => void
 }) {
-  const { connectionTypeChoices, connectionType, setConnectionType } = props
-
   useEffect(() => {
     if (!connectionType) {
       setConnectionType(connectionTypeChoices[0])
@@ -58,6 +61,4 @@ function ConnectionTypeSelect(props: {
       ) : null}
     </form>
   )
-}
-
-export default ConnectionTypeSelect
+})

package/src/AddConnectionWidget/components/__snapshots__/AddConnectionWidget.test.tsx.snap

@@ -92,6 +92,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </div>
                     <input
                       aria-hidden="true"
+                      aria-invalid="false"
                       class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
                       tabindex="-1"
                       value="UCSCTrackHubConnection"

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -81,13 +81,13 @@ function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
     }
 
     const trackId = [
-      `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+      `${trackName.toLowerCase().replaceAll(' ', '_')}-${Date.now()}`,
       `${session.adminMode ? '' : '-sessionTrack'}`,
     ].join('')
 
     const assemblyInstance = session.assemblyManager.get(assembly)
 
-    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
+    if (assemblyInstance && trackAdapter && trackAdapter.type !== 'UNKNOWN') {
       session.addTrackConf({
         trackId,
         type: trackType,

package/src/AddTrackWidget/components/PasteConfigWorkflow.tsx

@@ -52,6 +52,7 @@ function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
             model.clearData()
             session.hideWidget(model)
           } catch (e) {
+            console.error(e)
             setError(e)
           }
         }}

package/src/AddTrackWidget/components/TextIndexingConfig.tsx

@@ -32,7 +32,11 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
+const TextIndexingConfig = observer(function ({
+  model,
+}: {
+  model: AddTrackModel
+}) {
   const { classes } = useStyles()
   const [value1, setValue1] = useState('')
   const [value2, setValue2] = useState('')
@@ -69,9 +73,9 @@ const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
                         <InputAdornment position="end">
                           <IconButton
                             onClick={() => {
-                              const newAttr = section.values.filter((a, i) => {
-                                return i !== idx
-                              })
+                              const newAttr = section.values.filter(
+                                (_, i) => i !== idx,
+                              )
                               index === 0
                                 ? setAttributes(newAttr)
                                 : setExclude(newAttr)
@@ -100,14 +104,10 @@ const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
                         <IconButton
                           onClick={() => {
                             if (index === 0) {
-                              const newAttr: string[] = attributes
-                              newAttr.push(value1)
-                              setAttributes(newAttr)
+                              setAttributes([...attributes, value1])
                               setValue1('')
                             } else {
-                              const newFeat: string[] = exclude
-                              newFeat.push(value2)
-                              setExclude(newFeat)
+                              setExclude([...exclude, value2])
                               setValue2('')
                             }
                           }}

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.tsx

@@ -21,15 +21,13 @@ const AutoSizedHierarchicalTree = ({
 }) => {
   return typeof jest === 'undefined' ? (
     <AutoSizer disableWidth>
-      {({ height }) => {
-        return (
-          <HierarchicalTree
-            height={(height || offset) - offset}
-            model={model}
-            tree={tree}
-          />
-        )
-      }}
+      {args => (
+        <HierarchicalTree
+          height={(args.height || offset) - offset}
+          model={model}
+          tree={tree}
+        />
+      )}
     </AutoSizer>
   ) : (
     <HierarchicalTree height={9000} model={model} tree={tree} />
@@ -73,25 +71,17 @@ const HierarchicalTrackSelector = observer(function ({
   model: HierarchicalTrackSelectorModel
   toolbarHeight?: number
 }) {
-  const [assemblyIdx, setAssemblyIdx] = useState(0)
   const [headerHeight, setHeaderHeight] = useState(0)
-
-  const { assemblyNames } = model
-  const assemblyName = assemblyNames[assemblyIdx]
-  return assemblyName ? (
+  return (
     <>
-      <HierarchicalHeader
-        model={model}
-        setHeaderHeight={setHeaderHeight}
-        setAssemblyIdx={setAssemblyIdx}
-      />
+      <HierarchicalHeader model={model} setHeaderHeight={setHeaderHeight} />
       <AutoSizedHierarchicalTree
-        tree={model.hierarchy(assemblyName)}
+        tree={model.hierarchy}
         model={model}
         offset={toolbarHeight + headerHeight}
       />
     </>
-  ) : null
+  )
 })
 
 export default HierarchicalTrackSelectorContainer