@jbrowse/plugin-data-management 2.0.0 → 2.1.2

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

@@ -14,7 +14,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
         class="MuiStepLabel-root MuiStepLabel-vertical css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer Mui-active css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"
@@ -68,7 +68,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                   class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                 >
                   <label
-                    class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
                     for="mui-1"
                     id="mui-1-label"
@@ -76,7 +76,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     connectionType
                   </label>
                   <div
-                    class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
                     variant="outlined"
                   >
                     <div
@@ -84,7 +84,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                       aria-expanded="false"
                       aria-haspopup="listbox"
                       aria-labelledby="mui-1-label mui-1"
-                      class="MuiSelect-select MuiSelect-outlined MuiOutlinedInput-input MuiInputBase-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                      class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                       id="mui-1"
                       role="button"
                       tabindex="0"
@@ -155,7 +155,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                 class="tss-1spe31o-actionsContainer"
               >
                 <button
-                  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root Mui-disabled tss-11xjtta-button css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium tss-11xjtta-button css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -163,7 +163,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                   Back
                 </button>
                 <button
-                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
                   data-testid="addConnectionNext"
                   tabindex="0"
                   type="button"
@@ -193,7 +193,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
         class="MuiStepLabel-root MuiStepLabel-vertical Mui-disabled css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer Mui-disabled css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"

package/src/AddTrackWidget/components/{AddTrackWidget.test.js → AddTrackWidget.test.tsx}

@@ -1,15 +1,19 @@
 import React from 'react'
-import { render, cleanup, fireEvent } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import AddTrackWidget from './AddTrackWidget'
+import { AddTrackModel } from '../model'
+import { AbstractSessionModel } from '@jbrowse/core/util'
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 describe('<AddTrackWidget />', () => {
-  let session
-  let model
+  let session: AbstractSessionModel
+  let model: AddTrackModel
 
   beforeAll(() => {
+    // @ts-ignore
     session = createTestSession()
+    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -29,6 +33,7 @@ describe('<AddTrackWidget />', () => {
         },
       },
     })
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'i3jUPmrgMOS',
       type: 'FeatureTrack',
@@ -77,6 +82,8 @@ describe('<AddTrackWidget />', () => {
       },
       filterAttributes: ['type', 'start', 'end'],
     })
+
+    // @ts-ignore
     const view = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
@@ -87,22 +94,18 @@ describe('<AddTrackWidget />', () => {
         },
       ],
     })
+
+    // @ts-ignore
     model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
       view: view.id,
     })
   })
 
-  afterEach(cleanup)
-
-  it('renders', () => {
-    const { container } = render(<AddTrackWidget model={model} />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
   it('adds a track', async () => {
     const { getByTestId, getAllByTestId, findByText, findAllByText } = render(
       <AddTrackWidget model={model} />,
     )
+    // @ts-ignore
     expect(session.sessionTracks.length).toBe(1)
     fireEvent.change(getAllByTestId('urlInput')[0], {
       target: { value: 'test.txt' },
@@ -114,31 +117,13 @@ describe('<AddTrackWidget />', () => {
     fireEvent.change(getByTestId('trackNameInput'), {
       target: { value: 'Test track name' },
     })
-    const trackTypeSelect = getByTestId('trackTypeSelect')
-    fireEvent.mouseDown(trackTypeSelect)
-    const featureTrack = await findByText('FeatureTrack')
-    fireEvent.click(featureTrack)
-    const assemblyNameSelect = getByTestId('assemblyNameSelect')
-    fireEvent.mouseDown(assemblyNameSelect)
+    fireEvent.mouseDown(getByTestId('trackTypeSelect'))
+    fireEvent.click(await findByText('FeatureTrack'))
+    fireEvent.mouseDown(getByTestId('assemblyNameSelect'))
     const volMyt1 = await findAllByText('volMyt1')
     fireEvent.click(volMyt1[1])
     fireEvent.click(getAllByTestId('addTrackNextButton')[0])
-    expect(session.sessionTracks.length).toBe(2)
-  })
-
-  xit('fails to add a track', async () => {
-    const { getByTestId, getAllByTestId, findByText } = render(
-      <AddTrackWidget model={model} />,
-    )
-    expect(session.sessionTracks.length).toBe(2)
-    fireEvent.change(getAllByTestId('urlInput')[0], {
-      target: { value: 'test.txt' },
-    })
-    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
-    fireEvent.mouseDown(getByTestId('adapterTypeSelect'))
-    const chrom = await findByText('ChromSizesAdapter')
-    fireEvent.click(chrom)
-    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
+    // @ts-ignore
     expect(session.sessionTracks.length).toBe(2)
   })
 })

package/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -1,209 +1,45 @@
-import React, { useState } from 'react'
-import {
-  Alert,
-  Button,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  getSession,
-  isElectron,
-  supportedIndexingAdapters,
-} from '@jbrowse/core/util'
-import { getConf } from '@jbrowse/core/configuration'
+import React from 'react'
 import { observer } from 'mobx-react'
+import { FormControl, FormHelperText, Select, MenuItem } from '@mui/material'
+import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
+import { useLocalStorage } from '@jbrowse/core/util'
 import { getEnv } from 'mobx-state-tree'
 
 // locals
-import ConfirmTrack from './ConfirmTrack'
-import TrackSourceSelect from './TrackSourceSelect'
 import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  root: {
-    marginTop: theme.spacing(1),
-  },
-  stepper: {
-    backgroundColor: theme.palette.background.default,
-  },
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2),
-  },
-  stepContent: {
-    margin: theme.spacing(1),
-  },
-  alertContainer: {
-    padding: `${theme.spacing(2)}px 0px ${theme.spacing(2)}px 0px`,
-  },
-}))
-
-const steps = ['Enter track data', 'Confirm track type']
-
-function AddTrackWidget({ model }: { model: AddTrackModel }) {
-  const [activeStep, setActiveStep] = useState(0)
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { pluginManager } = getEnv(session)
-  const { rootModel } = pluginManager
-  const { jobsManager } = rootModel
-  const {
-    assembly,
-    trackAdapter,
-    trackData,
-    trackName,
-    trackType,
-    textIndexTrack,
-    textIndexingConf,
-  } = model
-  const [trackErrorMessage, setTrackErrorMessage] = useState<string>()
-
-  function getStepContent(step: number) {
-    switch (step) {
-      case 0:
-        return <TrackSourceSelect model={model} />
-      case 1:
-        return <ConfirmTrack model={model} />
-      default:
-        return <Typography>Unknown step</Typography>
-    }
-  }
-
-  async function handleNext() {
-    if (activeStep !== steps.length - 1) {
-      setActiveStep(activeStep + 1)
-      return
-    }
-
-    const trackId = `${trackName
-      .toLowerCase()
-      .replace(/ /g, '_')}-${Date.now()}${
-      session.adminMode ? '' : '-sessionTrack'
-    }`
-
-    const assemblyInstance = session.assemblyManager.get(assembly)
-
-    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
-      // @ts-ignore
-      session.addTrackConf({
-        trackId,
-        type: trackType,
-        name: trackName,
-        assemblyNames: [assembly],
-        adapter: {
-          ...trackAdapter,
-          sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
-        },
-      })
-      const textSearchingDefault = {
-        attributes: ['Name', 'ID'],
-        exclude: ['CDS', 'exon'],
-      }
-      if (model.view) {
-        model.view.showTrack(trackId)
-        if (isElectron) {
-          if (textIndexTrack && supportedIndexingAdapters(trackAdapter.type)) {
-            const attr = textIndexingConf || textSearchingDefault
-            const indexName = trackName + '-index'
-            const indexingParams = {
-              ...attr,
-              assemblies: [assembly],
-              tracks: [trackId],
-              indexType: 'perTrack',
-              name: indexName,
-              timestamp: new Date().toISOString(),
-            }
-            const newEntry = {
-              indexingParams: indexingParams,
-              name: indexName,
-              cancelCallback: () => {
-                jobsManager.abortJob()
-              },
-            }
-            jobsManager.queueJob(newEntry)
-          }
-        }
-      } else {
-        session.notify(
-          'Open a new view, or use the track selector in an existing view, to view this track',
-          'info',
-        )
-      }
-      model.clearData()
-      // @ts-ignore
-      session.hideWidget(model)
-    } else {
-      setTrackErrorMessage(
-        'Failed to add track.\nThe configuration of this file is not currently supported.',
-      )
-    }
-  }
-
-  function handleBack() {
-    setTrackErrorMessage(undefined)
-    setActiveStep(activeStep - 1)
-  }
-
-  function isNextDisabled() {
-    switch (activeStep) {
-      case 0:
-        return !trackData
-      case 1:
-        return !(trackName && trackType && trackAdapter?.type && assembly)
-      default:
-        return true
-    }
-  }
-
+import DefaultAddTrackWorkflow from './DefaultAddTrackWorkflow'
+
+function AddTrackSelector({ model }: { model: AddTrackModel }) {
+  const [val, setVal] = useLocalStorage('trackSelector-choice', 'Default')
+  const { pluginManager } = getEnv(model)
+  const widgets = pluginManager.getElementTypesInGroup(
+    'add track workflow',
+  ) as AddTrackWorkflowType[]
+  const ComponentMap = {
+    Default: DefaultAddTrackWorkflow,
+    ...Object.fromEntries(widgets.map(w => [w.name, w.ReactComponent])),
+  } as { [key: string]: React.FC<{ model: AddTrackModel }> }
+
+  // make sure the selected value is in the list
+  const val2 = ComponentMap[val] ? val : 'Default'
+  const Component = ComponentMap[val2]
   return (
-    <div className={classes.root}>
-      <Stepper
-        className={classes.stepper}
-        activeStep={activeStep}
-        orientation="vertical"
-      >
-        {steps.map((label, idx) => (
-          <Step key={label}>
-            <StepLabel>{label}</StepLabel>
-            <StepContent>
-              {getStepContent(idx)}
-              <div className={classes.actionsContainer}>
-                <Button
-                  disabled={activeStep === 0}
-                  onClick={handleBack}
-                  className={classes.button}
-                >
-                  Back
-                </Button>
-                <Button
-                  disabled={isNextDisabled()}
-                  variant="contained"
-                  color="primary"
-                  onClick={handleNext}
-                  className={classes.button}
-                  data-testid="addTrackNextButton"
-                >
-                  {activeStep === steps.length - 1 ? 'Add' : 'Next'}
-                </Button>
-              </div>
-              {trackErrorMessage ? (
-                <div className={classes.alertContainer}>
-                  <Alert severity="error">{trackErrorMessage}</Alert>
-                </div>
-              ) : null}
-            </StepContent>
-          </Step>
-        ))}
-      </Stepper>
-    </div>
+    <>
+      <FormControl>
+        <Select value={val2} onChange={event => setVal(event.target.value)}>
+          {Object.keys(ComponentMap).map(e => (
+            <MenuItem key={e} value={e}>
+              {e}
+            </MenuItem>
+          ))}
+        </Select>
+        <FormHelperText>Type of add track workflow</FormHelperText>
+      </FormControl>
+
+      <br />
+      <Component model={model} />
+    </>
   )
 }
 
-export default observer(AddTrackWidget)
+export default observer(AddTrackSelector)

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -230,10 +230,9 @@ const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
 
 const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
   const { classes } = useStyles()
-  const session = getSession(model)
   const { trackAdapter } = model
-  // prettier-ignore
-  const adapters = getAdapterTypes(getEnv(session).pluginManager)
+  const { pluginManager } = getEnv(model)
+  const adapters = getAdapterTypes(pluginManager)
   return (
     <TextField
       className={classes.spacing}
@@ -242,9 +241,7 @@ const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
       helperText="Select an adapter type"
       select
       fullWidth
-      onChange={event => {
-        model.setAdapterHint(event.target.value)
-      }}
+      onChange={event => model.setAdapterHint(event.target.value)}
       SelectProps={{
         // @ts-ignore
         SelectDisplayProps: { 'data-testid': 'adapterTypeSelect' },
@@ -264,10 +261,13 @@ const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
               : elt.name}
           </MenuItem>
         ))}
-      {/* adapters with the 'adapterMetadata.category' property are categorized by the value of the property here */}
-      {categorizeAdapters(
-        adapters.filter(elt => !elt.adapterMetadata?.hiddenFromGUI),
-      )}
+      {
+        // adapters with the 'adapterMetadata.category' property are categorized
+        // by the value of the property here
+        categorizeAdapters(
+          adapters.filter(elt => !elt.adapterMetadata?.hiddenFromGUI),
+        )
+      }
     </TextField>
   )
 })

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react'
+import {
+  Alert,
+  Button,
+  Step,
+  StepContent,
+  StepLabel,
+  Stepper,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import {
+  getSession,
+  isElectron,
+  supportedIndexingAdapters,
+} from '@jbrowse/core/util'
+import { getConf } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { getEnv } from 'mobx-state-tree'
+
+// locals
+import ConfirmTrack from './ConfirmTrack'
+import TrackSourceSelect from './TrackSourceSelect'
+
+import { AddTrackModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+  },
+  stepper: {
+    backgroundColor: theme.palette.background.default,
+  },
+  button: {
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  actionsContainer: {
+    marginBottom: theme.spacing(2),
+  },
+  stepContent: {
+    margin: theme.spacing(1),
+  },
+  alertContainer: {
+    padding: `${theme.spacing(2)}px 0px ${theme.spacing(2)}px 0px`,
+  },
+}))
+
+const steps = ['Enter track data', 'Confirm track type']
+
+function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
+  const [activeStep, setActiveStep] = useState(0)
+  const { classes } = useStyles()
+  const { pluginManager } = getEnv(model)
+  const { rootModel } = pluginManager
+  const { jobsManager } = rootModel
+  const session = getSession(model)
+  const {
+    assembly,
+    trackAdapter,
+    trackData,
+    trackName,
+    trackType,
+    textIndexTrack,
+    textIndexingConf,
+  } = model
+  const [trackErrorMessage, setTrackErrorMessage] = useState<string>()
+
+  function getStepContent(step: number) {
+    switch (step) {
+      case 0:
+        return <TrackSourceSelect model={model} />
+      case 1:
+        return <ConfirmTrack model={model} />
+      default:
+        return <Typography>Unknown step</Typography>
+    }
+  }
+
+  async function handleNext() {
+    if (activeStep !== steps.length - 1) {
+      setActiveStep(activeStep + 1)
+      return
+    }
+
+    const trackId = [
+      `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+      `${session.adminMode ? '' : '-sessionTrack'}`,
+    ].join('')
+
+    const assemblyInstance = session.assemblyManager.get(assembly)
+
+    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
+      session.addTrackConf({
+        trackId,
+        type: trackType,
+        name: trackName,
+        assemblyNames: [assembly],
+        adapter: {
+          ...trackAdapter,
+          sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
+        },
+      })
+      if (model.view) {
+        model.view.showTrack(trackId)
+        if (
+          isElectron &&
+          textIndexTrack &&
+          supportedIndexingAdapters(trackAdapter.type)
+        ) {
+          const attr = textIndexingConf || {
+            attributes: ['Name', 'ID'],
+            exclude: ['CDS', 'exon'],
+          }
+          const indexName = trackName + '-index'
+          const newEntry = {
+            indexingParams: {
+              ...attr,
+              assemblies: [assembly],
+              tracks: [trackId],
+              indexType: 'perTrack',
+              name: indexName,
+              timestamp: new Date().toISOString(),
+            },
+            name: indexName,
+            cancelCallback: () => jobsManager.abortJob(),
+          }
+          jobsManager.queueJob(newEntry)
+        }
+      } else {
+        session.notify(
+          'Open a new view, or use the track selector in an existing view, to view this track',
+          'info',
+        )
+      }
+      model.clearData()
+      session.hideWidget(model)
+    } else {
+      setTrackErrorMessage(
+        'Failed to add track.\nThe configuration of this file is not currently supported.',
+      )
+    }
+  }
+
+  function handleBack() {
+    setTrackErrorMessage(undefined)
+    setActiveStep(activeStep - 1)
+  }
+
+  function isNextDisabled() {
+    switch (activeStep) {
+      case 0:
+        return !trackData
+      case 1:
+        return !(trackName && trackType && trackAdapter?.type && assembly)
+      default:
+        return true
+    }
+  }
+
+  return (
+    <div className={classes.root}>
+      <Stepper
+        className={classes.stepper}
+        activeStep={activeStep}
+        orientation="vertical"
+      >
+        {steps.map((label, idx) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+            <StepContent>
+              {getStepContent(idx)}
+              <div className={classes.actionsContainer}>
+                <Button
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  className={classes.button}
+                >
+                  Back
+                </Button>
+                <Button
+                  disabled={isNextDisabled()}
+                  variant="contained"
+                  color="primary"
+                  onClick={handleNext}
+                  className={classes.button}
+                  data-testid="addTrackNextButton"
+                >
+                  {activeStep === steps.length - 1 ? 'Add' : 'Next'}
+                </Button>
+              </div>
+              {trackErrorMessage ? (
+                <div className={classes.alertContainer}>
+                  <Alert severity="error">{trackErrorMessage}</Alert>
+                </div>
+              ) : null}
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </div>
+  )
+}
+export default observer(AddTrackWorkflow)