@jbrowse/plugin-data-management 1.7.11 → 2.1.0

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -6,28 +6,28 @@ import {
   isElectron,
 } from '@jbrowse/core/util'
 import {
-  Link,
-  MenuItem,
-  TextField,
-  ListSubheader,
-  Typography,
-  FormControl,
-  FormControlLabel,
-  Checkbox,
-  Paper,
   Card,
-  List,
-  ListItem,
   CardContent,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
   IconButton,
   InputLabel,
   InputAdornment,
-  makeStyles,
-} from '@material-ui/core'
+  ListSubheader,
+  Link,
+  List,
+  ListItem,
+  MenuItem,
+  Paper,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material//Add'
 // other
 import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
@@ -38,7 +38,7 @@ import { UNKNOWN } from '@jbrowse/core/util/tracks'
 import { AddTrackModel } from '../model'
 import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   spacing: {
     marginBottom: theme.spacing(3),
   },
@@ -62,7 +62,7 @@ function StatusMessage({
   trackAdapter: { type: string; subadapter?: { type: string } }
   trackType: string
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return trackAdapter.type === 'SNPCoverageAdapter' ? (
     <Typography className={classes.spacing}>
       Selected <code>{trackType}</code>. Using adapter{' '}
@@ -130,7 +130,7 @@ function getTrackTypes(pluginManager: PluginManager) {
 }
 
 const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [value1, setValue1] = useState('')
   const [value2, setValue2] = useState('')
   const [attributes, setAttributes] = useState(['Name', 'ID'])
@@ -229,11 +229,10 @@ const TextIndexingConfig = observer(({ model }: { model: AddTrackModel }) => {
 })
 
 const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
-  const session = getSession(model)
+  const { classes } = useStyles()
   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,16 +261,19 @@ 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>
   )
 })
 
 function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <>
       <Typography className={classes.spacing}>
@@ -302,7 +302,7 @@ function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
 }
 
 const TrackTypeSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { trackType } = model
   const trackTypes = getTrackTypes(getEnv(session).pluginManager)
@@ -362,7 +362,7 @@ const TrackAssemblySelector = observer(
 )
 
 function ConfirmTrack({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [check, setCheck] = useState(true)
   const { trackName, trackAdapter, trackType, warningMessage, adapterHint } =
     model

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)

package/src/AddTrackWidget/components/TrackSourceSelect.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { FileSelector } from '@jbrowse/core/ui'
-import { Paper, makeStyles } from '@material-ui/core'
-import { AddTrackModel } from '../model'
+import { Paper } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getRoot } from 'mobx-state-tree'
 import { observer } from 'mobx-react'
 
-const useStyles = makeStyles(theme => ({
+// locals
+import { AddTrackModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
   paper: {
     display: 'flex',
     flexDirection: 'column',
@@ -17,8 +20,9 @@ const useStyles = makeStyles(theme => ({
 }))
 
 function TrackSourceSelect({ model }: { model: AddTrackModel }) {
-  const classes = useStyles()
-  const rootModel = getRoot(model)
+  const { classes } = useStyles()
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getRoot<any>(model)
 
   return (
     <Paper className={classes.paper}>

package/src/AssemblyManager/AssemblyAddForm.tsx

@@ -2,17 +2,11 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import FileSelector from '@jbrowse/core/ui/FileSelector'
 import { FileLocation } from '@jbrowse/core/util/types'
-import {
-  Button,
-  Grid,
-  MenuItem,
-  Paper,
-  TextField,
-  makeStyles,
-} from '@material-ui/core'
-import AddIcon from '@material-ui/icons/Add'
+import { Button, Grid, MenuItem, Paper, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import AddIcon from '@mui/icons-material/Add'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
@@ -160,7 +154,7 @@ const AssemblyAddForm = observer(
     rootModel: any
     setFormOpen: Function
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
 
     const adapterTypes = [
       'IndexedFastaAdapter',

package/src/AssemblyManager/AssemblyManager.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from '@material-ui/core/styles'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import { makeStyles } from 'tss-react/mui'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import {
   Button,
   Dialog,
@@ -9,16 +9,16 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-} from '@material-ui/core'
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos'
-import CloseIcon from '@material-ui/icons/Close'
-import AddIcon from '@material-ui/icons/Add'
+} from '@mui/material'
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
+import CloseIcon from '@mui/icons-material/Close'
+import AddIcon from '@mui/icons-material/Add'
 
 import AssemblyTable from './AssemblyTable'
 import AssemblyAddForm from './AssemblyAddForm'
 import AssemblyEditor from './AssemblyEditor'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   titleBox: {
     color: '#fff',
     backgroundColor: theme.palette.primary.main,
@@ -50,7 +50,7 @@ const AssemblyManager = observer(
     rootModel: any
     onClose: (arg: boolean) => void
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const [isFormOpen, setFormOpen] = useState(false)
     const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false)
     const [assemblyBeingEdited, setAssemblyBeingEdited] =

package/src/AssemblyManager/AssemblyTable.tsx

@@ -10,17 +10,17 @@ import {
   TableRow,
   Paper,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CreateIcon from '@material-ui/icons/Create'
-import DeleteIcon from '@material-ui/icons/Delete'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-
-// local
-import { readConfObject } from '@jbrowse/core/configuration'
+import CreateIcon from '@mui/icons-material/Create'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {
+  readConfObject,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   table: {
     minWidth: 500,
     minHeight: 150,
@@ -51,7 +51,7 @@ const AssemblyTable = observer(
     setIsAssemblyBeingEdited(arg: boolean): void
     setAssemblyBeingEdited(arg: AnyConfigurationModel): void
   }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
 
     function removeAssembly(name: string) {
       rootModel.jbrowse.removeAssemblyConf(name)

package/src/HierarchicalTrackSelectorWidget/components/CloseConnectionDialog.tsx

@@ -8,7 +8,7 @@ import {
   List,
   ListItem,
   DialogActions,
-} from '@material-ui/core'
+} from '@mui/material'
 import { observer } from 'mobx-react'
 
 function CloseConnectionDialog({

package/src/HierarchicalTrackSelectorWidget/components/DeleteConnectionDialog.tsx

@@ -6,7 +6,7 @@ import {
   DialogContentText,
   DialogActions,
   Button,
-} from '@material-ui/core'
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { AbstractSessionModel } from '@jbrowse/core/util'