@jbrowse/plugin-data-management 2.5.0 → 2.6.2

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -1,201 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Alert,
-  Button,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getRoot } from 'mobx-state-tree'
-
-import {
-  getSession,
-  isElectron,
-  supportedIndexingAdapters,
-} from '@jbrowse/core/util'
-import { getConf } from '@jbrowse/core/configuration'
-import { observer } from 'mobx-react'
-
-// 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: {
-    marginRight: theme.spacing(1),
-  },
-  actionsContainer: {
-    marginTop: theme.spacing(10),
-    marginBottom: theme.spacing(2),
-  },
-  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()
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { jobsManager } = getRoot<any>(model)
-  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 (assemblyInstance && 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/PasteConfigWorkflow.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react'
-import { Button, TextField } from '@mui/material'
-import { ErrorMessage } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-import { getSession } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-
-// locals
-import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()({
-  textbox: {
-    width: '100%',
-  },
-  submit: {
-    marginTop: 25,
-    marginBottom: 100,
-    display: 'block',
-  },
-})
-
-function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
-  const { classes } = useStyles()
-  const [val, setVal] = useState('')
-  const [error, setError] = useState<unknown>()
-
-  return (
-    <div>
-      {error ? <ErrorMessage error={error} /> : null}
-      <TextField
-        multiline
-        rows={10}
-        value={val}
-        onChange={event => setVal(event.target.value)}
-        placeholder={
-          'Paste track config or array of track configs in JSON format'
-        }
-        variant="outlined"
-        className={classes.textbox}
-      />
-      <Button
-        variant="contained"
-        className={classes.submit}
-        onClick={() => {
-          try {
-            setError(undefined)
-            const session = getSession(model)
-            const conf = JSON.parse(val)
-            const confs = Array.isArray(conf) ? conf : [conf]
-            confs.forEach(c => session.addTrackConf(c))
-            confs.forEach(c => c.trackId)
-            model.clearData()
-            session.hideWidget(model)
-          } catch (e) {
-            setError(e)
-          }
-        }}
-      >
-        Submit
-      </Button>
-    </div>
-  )
-}
-export default observer(AddTrackWorkflow)

package/src/AddTrackWidget/components/TextIndexingConfig.tsx

@@ -1,132 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Card,
-  CardContent,
-  IconButton,
-  InputLabel,
-  InputAdornment,
-  List,
-  ListItem,
-  Paper,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material/Add'
-
-// locals
-import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  paper: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(1),
-  },
-
-  card: {
-    marginTop: theme.spacing(1),
-  },
-}))
-
-const TextIndexingConfig = observer(function ({
-  model,
-}: {
-  model: AddTrackModel
-}) {
-  const { classes } = useStyles()
-  const [value1, setValue1] = useState('')
-  const [value2, setValue2] = useState('')
-  const [attributes, setAttributes] = useState(['Name', 'ID'])
-  const [exclude, setExclude] = useState(['CDS', 'exon'])
-  const sections = [
-    {
-      label: 'Indexing attributes',
-      values: attributes,
-    },
-    {
-      label: 'Feature types to exclude',
-      values: exclude,
-    },
-  ]
-  useEffect(() => {
-    model.setTextIndexingConf({ attributes, exclude })
-  }, [model, attributes, exclude])
-
-  return (
-    <Paper className={classes.paper}>
-      <InputLabel>Indexing configuration</InputLabel>
-      {sections.map((section, index) => (
-        <Card raised key={section.label} className={classes.card}>
-          <CardContent>
-            <InputLabel>{section.label}</InputLabel>
-            <List disablePadding>
-              {section.values.map((val: string, idx: number) => (
-                <ListItem key={idx} disableGutters>
-                  <TextField
-                    value={val}
-                    InputProps={{
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          <IconButton
-                            onClick={() => {
-                              const newAttr = section.values.filter(
-                                (_, i) => i !== idx,
-                              )
-                              index === 0
-                                ? setAttributes(newAttr)
-                                : setExclude(newAttr)
-                            }}
-                          >
-                            <DeleteIcon />
-                          </IconButton>
-                        </InputAdornment>
-                      ),
-                    }}
-                  />
-                </ListItem>
-              ))}
-              <ListItem disableGutters>
-                <TextField
-                  value={index === 0 ? value1 : value2}
-                  placeholder="add new"
-                  onChange={event => {
-                    index === 0
-                      ? setValue1(event.target.value)
-                      : setValue2(event.target.value)
-                  }}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <IconButton
-                          onClick={() => {
-                            if (index === 0) {
-                              setAttributes([...attributes, value1])
-                              setValue1('')
-                            } else {
-                              setExclude([...exclude, value2])
-                              setValue2('')
-                            }
-                          }}
-                          disabled={index === 0 ? value1 === '' : value2 === ''}
-                          data-testid={`stringArrayAdd-Feat`}
-                        >
-                          <AddIcon />
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </ListItem>
-            </List>
-          </CardContent>
-        </Card>
-      ))}
-    </Paper>
-  )
-})
-
-export default TextIndexingConfig

package/src/AddTrackWidget/components/TrackAdapterSelector.tsx

@@ -1,73 +0,0 @@
-import React from 'react'
-import { ListSubheader, MenuItem, TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getEnv } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
-
-// locals
-import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  spacing: {
-    marginBottom: theme.spacing(3),
-  },
-}))
-
-// collate adapters into a map with
-// key: category
-// value: array of adapters with that category
-function categorizeAdapters(adaptersList: AdapterType[]) {
-  const map = {} as { [key: string]: AdapterType[] }
-  adaptersList.forEach(adapter => {
-    const key = adapter.adapterMetadata?.category || 'Default'
-    if (!map[key]) {
-      map[key] = []
-    }
-    map[key].push(adapter)
-  })
-  return map
-}
-
-const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const { classes } = useStyles()
-  const { trackAdapter } = model
-  const { pluginManager } = getEnv(model)
-  return (
-    <TextField
-      className={classes.spacing}
-      value={trackAdapter?.type !== 'UNKNOWN' ? trackAdapter?.type : ''}
-      label="Adapter type"
-      variant="outlined"
-      helperText="Select an adapter type"
-      select
-      fullWidth
-      onChange={event => model.setAdapterHint(event.target.value)}
-      SelectProps={{
-        // @ts-expect-error
-        SelectDisplayProps: { 'data-testid': 'adapterTypeSelect' },
-      }}
-    >
-      {Object.entries(
-        categorizeAdapters(
-          pluginManager
-            .getAdapterElements()
-            .filter(e => !e.adapterMetadata?.hiddenFromGUI),
-        ),
-      ).map(([key, val]) => {
-        // returning array avoids needing to use a react fragment which
-        // Select/TextField sub-elements disagree with
-        return [
-          <ListSubheader>{key}</ListSubheader>,
-          val.map(elt => (
-            <MenuItem key={elt.name} value={elt.name}>
-              {elt.displayName}
-            </MenuItem>
-          )),
-        ]
-      })}
-    </TextField>
-  )
-})
-
-export default TrackAdapterSelector

package/src/AddTrackWidget/components/TrackSourceSelect.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { FileSelector } from '@jbrowse/core/ui'
-import { AbstractRootModel } from '@jbrowse/core/util'
-import { Paper } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { getRoot } from 'mobx-state-tree'
-import { observer } from 'mobx-react'
-
-// locals
-import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  paper: {
-    padding: theme.spacing(2),
-  },
-  spacer: {
-    height: theme.spacing(8),
-  },
-}))
-
-function TrackSourceSelect({ model }: { model: AddTrackModel }) {
-  const { classes } = useStyles()
-  const rootModel = getRoot<AbstractRootModel>(model)
-
-  return (
-    <Paper className={classes.paper}>
-      <FileSelector
-        name="Main file"
-        description=""
-        location={model.trackData}
-        setLocation={model.setTrackData}
-        setName={model.setTrackName}
-        rootModel={rootModel}
-      />
-      <div className={classes.spacer} />
-      <FileSelector
-        name="Index file"
-        description="(Optional) The URL of the index file is automatically inferred from the URL of the main file if it is not supplied."
-        location={model.indexTrackData}
-        setLocation={model.setIndexTrackData}
-        setName={model.setTrackName}
-        rootModel={rootModel}
-      />
-    </Paper>
-  )
-}
-
-export default observer(TrackSourceSelect)

package/src/AddTrackWidget/components/TrackTypeSelector.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { MenuItem, TextField } from '@mui/material'
-import { getEnv } from '@jbrowse/core/util'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  spacing: {
-    marginBottom: theme.spacing(3),
-  },
-}))
-
-const TrackTypeSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const { classes } = useStyles()
-  const { pluginManager } = getEnv(model)
-  const { trackType } = model
-  const trackTypes = pluginManager.getTrackElements()
-
-  return (
-    <TextField
-      className={classes.spacing}
-      value={trackType}
-      variant="outlined"
-      label="Track type"
-      helperText="Select track type"
-      select
-      fullWidth
-      onChange={event => model.setTrackType(event.target.value)}
-      SelectProps={{
-        // @ts-expect-error
-        SelectDisplayProps: { 'data-testid': 'trackTypeSelect' },
-      }}
-    >
-      {trackTypes.map(({ name, displayName }) => (
-        <MenuItem key={name} value={name}>
-          {displayName}
-        </MenuItem>
-      ))}
-    </TextField>
-  )
-})
-
-export default TrackTypeSelector