@jbrowse/plugin-data-management 2.1.4 → 2.1.6

package/src/AddConnectionWidget/components/{AddConnectionWidget.js → AddConnectionWidget.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getEnv } from '@jbrowse/core/util'
 import {
   Button,
   Step,
@@ -9,12 +9,13 @@ import {
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+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: {
@@ -34,10 +35,9 @@ const useStyles = makeStyles()(theme => ({
 
 const steps = ['Select a Connection Type', 'Configure Connection']
 
-function AddConnectionWidget({ model }) {
-  const [connectionType, setConnectionType] = useState({})
-  const [configModel, setConfigModel] = useState({})
-  const [configModelReady, setConfigModelReady] = useState(true)
+function AddConnectionWidget({ model }: { model: unknown }) {
+  const [connectionType, setConnectionType] = useState<ConnectionType>()
+  const [configModel, setConfigModel] = useState<AnyConfigurationModel>()
   const [activeStep, setActiveStep] = useState(0)
   const { classes } = useStyles()
 
@@ -45,38 +45,40 @@ function AddConnectionWidget({ model }) {
 
   const { pluginManager } = getEnv(session)
 
-  function handleSetConnectionType(newConnectionType) {
-    setConnectionType(newConnectionType)
-    setConfigModel(
-      newConnectionType.configSchema.create(
-        {
-          connectionId: `${newConnectionType.name}-${Date.now()}`,
-        },
-        getEnv(model),
-      ),
-    )
-  }
-
   function stepContent() {
     switch (activeStep) {
       case 0:
         return (
           <ConnectionTypeSelect
-            connectionTypeChoices={pluginManager.getElementTypesInGroup(
-              'connection',
-            )}
+            connectionTypeChoices={
+              pluginManager.getElementTypesInGroup(
+                'connection',
+              ) as ConnectionType[]
+            }
             connectionType={connectionType}
-            setConnectionType={handleSetConnectionType}
+            setConnectionType={c => {
+              setConnectionType(c)
+              if (c) {
+                setConfigModel(
+                  c.configSchema.create(
+                    {
+                      connectionId: `${c.name}-${Date.now()}`,
+                    },
+                    getEnv(model),
+                  ),
+                )
+              }
+            }}
           />
         )
       case 1:
-        return (
+        return connectionType && configModel ? (
           <ConfigureConnection
             connectionType={connectionType}
             model={configModel}
-            setModelReady={setConfigModelReady}
+            session={session}
           />
-        )
+        ) : null
 
       default:
         return <Typography>Unknown step</Typography>
@@ -97,18 +99,16 @@ function AddConnectionWidget({ model }) {
 
   function handleFinish() {
     const connectionConf = session.addConnectionConf(configModel)
-    session.makeConnection(connectionConf)
+    if (session.makeConnection) {
+      session.makeConnection(connectionConf)
+    }
     session.hideWidget(model)
   }
 
   function checkNextEnabled() {
-    if (
-      (activeStep === 0 && connectionType.name) ||
-      (activeStep === 1 && configModel && configModelReady)
-    ) {
-      return true
-    }
-    return false
+    return (
+      (activeStep === 0 && connectionType) || (activeStep === 1 && configModel)
+    )
   }
 
   return (
@@ -150,8 +150,4 @@ function AddConnectionWidget({ model }) {
   )
 }
 
-AddConnectionWidget.propTypes = {
-  model: MobxPropTypes.observableObject.isRequired,
-}
-
 export default observer(AddConnectionWidget)

package/src/AddConnectionWidget/components/ConfigureConnection.tsx

@@ -0,0 +1,26 @@
+import React, { Suspense } from 'react'
+import { ConfigurationEditor } from '@jbrowse/plugin-config'
+import { observer } from 'mobx-react'
+import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+
+const ConfigureConnection = observer(
+  (props: {
+    connectionType: ConnectionType
+    model: AnyConfigurationModel
+    session: AbstractSessionModel
+  }) => {
+    const { connectionType, model, session } = props
+    const ConfigEditorComponent =
+      connectionType.configEditorComponent || ConfigurationEditor
+
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <ConfigEditorComponent model={{ target: model }} session={session} />
+      </Suspense>
+    )
+  },
+)
+
+export default ConfigureConnection

package/src/AddConnectionWidget/components/ConnectionTypeSelect.tsx

@@ -1,71 +1,62 @@
 import React, { useEffect } from 'react'
 import { IconButton, MenuItem, TextField } from '@mui/material'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
 
-import ConnectionType from '@jbrowse/core/pluggableElementTypes/ConnectionType'
+// icons
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
 function ConnectionTypeSelect(props: {
   connectionTypeChoices: ConnectionType[]
-  connectionType: ConnectionType
-  setConnectionType: Function
+  connectionType?: ConnectionType
+  setConnectionType: (c?: ConnectionType) => void
 }) {
   const { connectionTypeChoices, connectionType, setConnectionType } = props
 
   useEffect(() => {
-    if (!connectionType.name) {
+    if (!connectionType) {
       setConnectionType(connectionTypeChoices[0])
     }
   })
 
-  function handleChange(
-    event: React.ChangeEvent<{ name?: string; value: unknown }>,
-  ): void {
-    setConnectionType(
-      connectionTypeChoices.find(
-        (connectionTypeChoice: ConnectionType) =>
-          connectionTypeChoice.name === event.target.value,
-      ),
-    )
-  }
-  if (!connectionType.name) {
-    return null
-  }
   return (
     <form autoComplete="off">
-      <TextField
-        value={connectionType.name}
-        label="connectionType"
-        helperText={
-          connectionType.description ? (
-            <>
-              {connectionType.description}
-              {connectionType.url ? (
-                <IconButton
-                  href={connectionType.url}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  color="secondary"
-                >
-                  <OpenInNewIcon />
-                </IconButton>
-              ) : null}
-            </>
-          ) : null
-        }
-        select
-        fullWidth
-        onChange={handleChange}
-        variant="outlined"
-      >
-        {connectionTypeChoices.map((connectionTypeChoice: ConnectionType) => (
-          <MenuItem
-            key={connectionTypeChoice.name}
-            value={connectionTypeChoice.name}
-          >
-            {connectionTypeChoice.displayName || connectionTypeChoice.name}
-          </MenuItem>
-        ))}
-      </TextField>
+      {connectionType ? (
+        <TextField
+          value={connectionType.name}
+          label="connectionType"
+          helperText={
+            connectionType.description ? (
+              <>
+                {connectionType.description}
+                {connectionType.url ? (
+                  <IconButton
+                    href={connectionType.url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    color="secondary"
+                  >
+                    <OpenInNewIcon />
+                  </IconButton>
+                ) : null}
+              </>
+            ) : null
+          }
+          select
+          fullWidth
+          onChange={event =>
+            setConnectionType(
+              connectionTypeChoices.find(c => c.name === event.target.value),
+            )
+          }
+          variant="outlined"
+        >
+          {connectionTypeChoices.map(c => (
+            <MenuItem key={c.name} value={c.name}>
+              {c.displayName || c.name}
+            </MenuItem>
+          ))}
+        </TextField>
+      ) : null}
     </form>
   )
 }

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

@@ -39,10 +39,10 @@ exports[`<AddConnectionWidget /> renders 1`] = `
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-1vyamtt-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiStepLabel-label Mui-active css-qivjh0-MuiStepLabel-label"
+            class="MuiStepLabel-label Mui-active css-1hv8oq8-MuiStepLabel-label"
           >
             Select a Connection Type
           </span>
@@ -68,7 +68,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                   class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined 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 MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
                     for="mui-1"
                     id="mui-1-label"
@@ -112,7 +112,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                       class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="css-1in441m"
+                        class="css-14lo706"
                       >
                         <span>
                           connectionType
@@ -154,7 +154,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                 class="tss-1spe31o-actionsContainer"
               >
                 <button
-                  class="MuiButtonBase-root Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium tss-11xjtta-button css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium 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"
@@ -162,7 +162,7 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                   Back
                 </button>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium 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"
@@ -217,10 +217,10 @@ exports[`<AddConnectionWidget /> renders 1`] = `
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-1vyamtt-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiStepLabel-label Mui-disabled css-qivjh0-MuiStepLabel-label"
+            class="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
           >
             Configure Connection
           </span>

package/src/AddTrackWidget/components/AddTrackWidget.test.tsx

@@ -2,110 +2,101 @@ import React from '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: AbstractSessionModel
-  let model: AddTrackModel
-
-  beforeAll(() => {
-    // @ts-ignore
-    session = createTestSession()
-    // @ts-ignore
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 1000,
-              seq: 'cattgttgcggagttgaacaACGGCATTAGGAACACTTCCGTCTCtcacttttatacgattatgattggttctttagccttggtttagattggtagtagtagcggcgctaatgctacctgaattgagaactcgagcgggggctaggcaaattctgattcagcctgacttctcttggaaccctgcccataaatcaaagggttagtgcggccaaaacgttggacaacggtattagaagaccaacctgaccaccaaaccgtcaattaaccggtatcttctcggaaacggcggttctctcctagatagcgatctgtggtctcaccatgcaatttaaacaggtgagtaaagattgctacaaatacgagactagctgtcaccagatgctgttcatctgttggctccttggtcgctccgttgtacccaggctactttgaaagagcgcagaatacttagacggtatcgatcatggtagcatagcattctgataacatgtatggagttcgaacatccgtctggggccggacggtccgtttgaggttggttgatctgggtgatagtcagcaagatagacgttagataacaaattaaaggattttaccttagattgcgactagtacaacggtacatcggtgattcgcgctctactagatcacgctatgggtaccataaacaaacggtggaccttctcaagctggttgacgcctcagcaacataggcttcctcctccacgcatctcagcataaaaggcttataaactgcttctttgtgccagagcaactcaattaagcccttggtaccgtgggcacgcattctgtcacggtgaccaactgttcatcctgaatcgccgaatgggactatttggtacaggaatcaagcggatggcactactgcagcttatttacgacggtattcttaaagtttttaagacaatgtatttcatgggtagttcggtttgttttattgctacacaggctcttgtagacgacctacttagcactacgg',
-            },
-          ],
-        },
-      },
-    })
-    // @ts-ignore
-    session.addTrackConf({
-      trackId: 'i3jUPmrgMOS',
-      type: 'FeatureTrack',
-      name: 'Filter Test',
-      assemblyNames: ['volMyt1'],
+function getSession() {
+  const session = createTestSession()
+  session.addAssemblyConf({
+    name: 'volMyt1',
+    sequence: {
+      trackId: 'ref0',
+      type: 'ReferenceSequenceTrack',
       adapter: {
-        type: 'FromConfigAdapter',
+        type: 'FromConfigSequenceAdapter',
         features: [
           {
-            uniqueId: 'one',
             refName: 'ctgA',
-            start: 100,
-            end: 101,
-            type: 'foo',
-            name: 'Boris',
-            note: 'note for boris',
-          },
-          {
-            uniqueId: 'two',
-            refName: 'ctgA',
-            start: 110,
-            end: 111,
-            type: 'bar',
-            name: 'Theresa',
-            note: 'note for theresa',
-          },
-          {
-            uniqueId: 'three',
-            refName: 'ctgA',
-            start: 120,
-            end: 121,
-            type: 'baz',
-            name: 'Nigel',
-            note: 'note for nigel',
-          },
-          {
-            uniqueId: 'four',
-            refName: 'ctgA',
-            start: 130,
-            end: 131,
-            type: 'quux',
-            name: 'Geoffray',
-            note: 'note for geoffray',
+            uniqueId: 'firstId',
+            start: 0,
+            end: 1000,
+            seq: 'cattgttgcggagttgaacaACGGCATTAGGAACACTTCCGTCTCtcacttttatacgattatgattggttctttagccttggtttagattggtagtagtagcggcgctaatgctacctgaattgagaactcgagcgggggctaggcaaattctgattcagcctgacttctcttggaaccctgcccataaatcaaagggttagtgcggccaaaacgttggacaacggtattagaagaccaacctgaccaccaaaccgtcaattaaccggtatcttctcggaaacggcggttctctcctagatagcgatctgtggtctcaccatgcaatttaaacaggtgagtaaagattgctacaaatacgagactagctgtcaccagatgctgttcatctgttggctccttggtcgctccgttgtacccaggctactttgaaagagcgcagaatacttagacggtatcgatcatggtagcatagcattctgataacatgtatggagttcgaacatccgtctggggccggacggtccgtttgaggttggttgatctgggtgatagtcagcaagatagacgttagataacaaattaaaggattttaccttagattgcgactagtacaacggtacatcggtgattcgcgctctactagatcacgctatgggtaccataaacaaacggtggaccttctcaagctggttgacgcctcagcaacataggcttcctcctccacgcatctcagcataaaaggcttataaactgcttctttgtgccagagcaactcaattaagcccttggtaccgtgggcacgcattctgtcacggtgaccaactgttcatcctgaatcgccgaatgggactatttggtacaggaatcaagcggatggcactactgcagcttatttacgacggtattcttaaagtttttaagacaatgtatttcatgggtagttcggtttgttttattgctacacaggctcttgtagacgacctacttagcactacgg',
           },
         ],
       },
-      filterAttributes: ['type', 'start', 'end'],
-    })
-
-    // @ts-ignore
-    const view = session.addView('LinearGenomeView', {
-      displayedRegions: [
+    },
+  })
+  session.addTrackConf({
+    trackId: 'i3jUPmrgMOS',
+    type: 'FeatureTrack',
+    name: 'Filter Test',
+    assemblyNames: ['volMyt1'],
+    adapter: {
+      type: 'FromConfigAdapter',
+      features: [
         {
-          assemblyName: 'volMyt1',
+          uniqueId: 'one',
           refName: 'ctgA',
-          start: 0,
-          end: 1000,
+          start: 100,
+          end: 101,
+          type: 'foo',
+          name: 'Boris',
+          note: 'note for boris',
+        },
+        {
+          uniqueId: 'two',
+          refName: 'ctgA',
+          start: 110,
+          end: 111,
+          type: 'bar',
+          name: 'Theresa',
+          note: 'note for theresa',
+        },
+        {
+          uniqueId: 'three',
+          refName: 'ctgA',
+          start: 120,
+          end: 121,
+          type: 'baz',
+          name: 'Nigel',
+          note: 'note for nigel',
+        },
+        {
+          uniqueId: 'four',
+          refName: 'ctgA',
+          start: 130,
+          end: 131,
+          type: 'quux',
+          name: 'Geoffray',
+          note: 'note for geoffray',
         },
       ],
-    })
+    },
+    filterAttributes: ['type', 'start', 'end'],
+  })
 
-    // @ts-ignore
-    model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
-      view: view.id,
-    })
+  const view = session.addView('LinearGenomeView', {
+    displayedRegions: [
+      {
+        assemblyName: 'volMyt1',
+        refName: 'ctgA',
+        start: 0,
+        end: 1000,
+      },
+    ],
+  })
+
+  const model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
+    view: view.id,
   })
+  return { session, model }
+}
 
+describe('<AddTrackWidget />', () => {
   it('adds a track', async () => {
+    const { session, model } = getSession()
     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' },
@@ -123,7 +114,6 @@ describe('<AddTrackWidget />', () => {
     const volMyt1 = await findAllByText('volMyt1')
     fireEvent.click(volMyt1[1])
     fireEvent.click(getAllByTestId('addTrackNextButton')[0])
-    // @ts-ignore
     expect(session.sessionTracks.length).toBe(2)
   })
 })

package/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -2,8 +2,7 @@ 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'
+import { getEnv, useLocalStorage } from '@jbrowse/core/util'
 
 // locals
 import { AddTrackModel } from '../model'

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -1,10 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { readConfObject } from '@jbrowse/core/configuration'
-import {
-  supportedIndexingAdapters,
-  getSession,
-  isElectron,
-} from '@jbrowse/core/util'
 import {
   Card,
   CardContent,
@@ -24,19 +18,23 @@ import {
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material//Add'
-// other
+import { readConfObject } from '@jbrowse/core/configuration'
+import {
+  supportedIndexingAdapters,
+  getSession,
+  getEnv,
+  isElectron,
+} from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
-import { getEnv } from 'mobx-state-tree'
 import { UNKNOWN } from '@jbrowse/core/util/tracks'
+import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
+// icons
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material//Add'
 // locals
 import { AddTrackModel } from '../model'
-import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
 const useStyles = makeStyles()(theme => ({
   spacing: {

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -9,6 +9,7 @@ import {
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
+import { getRoot } from 'mobx-state-tree'
 
 import {
   getSession,
@@ -17,7 +18,6 @@ import {
 } 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'
@@ -52,9 +52,9 @@ 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
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { jobsManager } = getRoot<any>(model)
   const session = getSession(model)
   const {
     assembly,