@jbrowse/plugin-data-management 2.2.2 → 2.3.1

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -1,56 +1,32 @@
 import React, { useEffect, useState } from 'react'
 import {
-  Card,
-  CardContent,
   Checkbox,
   FormControl,
   FormControlLabel,
-  IconButton,
-  InputLabel,
-  InputAdornment,
-  ListSubheader,
   Link,
-  List,
-  ListItem,
-  MenuItem,
-  Paper,
   TextField,
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-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 { UNKNOWN } from '@jbrowse/core/util/tracks'
-import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
+import { AssemblySelector } from '@jbrowse/core/ui'
 
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material//Add'
 // locals
 import { AddTrackModel } from '../model'
+import TextIndexingConfig from './TextIndexingConfig'
+import TrackTypeSelector from './TrackTypeSelector'
+import TrackAdapterSelector from './TrackAdapterSelector'
 
 const useStyles = makeStyles()(theme => ({
   spacing: {
     marginBottom: theme.spacing(3),
   },
-  paper: {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(1),
-  },
-  spacer: {
-    height: theme.spacing(8),
-  },
-  card: {
-    marginTop: theme.spacing(1),
-  },
 }))
 
 function StatusMessage({
@@ -61,215 +37,22 @@ function StatusMessage({
   trackType: string
 }) {
   const { classes } = useStyles()
-  return trackAdapter.type === 'SNPCoverageAdapter' ? (
+  const { type, subadapter } = trackAdapter
+  return type === 'SNPCoverageAdapter' ? (
     <Typography className={classes.spacing}>
-      Selected <code>{trackType}</code>. Using adapter{' '}
-      <code>{trackAdapter.type}</code> with subadapter{' '}
-      <code>{trackAdapter.subadapter?.type}</code>. Please enter a track name
-      and, if necessary, update the track type.
+      Selected <code>{trackType}</code>. Using adapter <code>{type}</code> with
+      subadapter <code>{subadapter?.type}</code>. Please enter a track name and,
+      if necessary, update the track type.
     </Typography>
   ) : (
     <Typography className={classes.spacing}>
-      Using adapter <code>{trackAdapter.type}</code> and guessing track type{' '}
+      Using adapter <code>{type}</code> and guessing track type{' '}
       <code>{trackType}</code>. Please enter a track name and, if necessary,
       update the track type.
     </Typography>
   )
 }
 
-/**
- * categorizeAdapters takes a list of adapters and sorts their menu item elements under an appropriate ListSubheader
- *  element. In this way, adapters that are from external plugins can have headers that differentiate them from the
- *  out-of-the-box plugins.
- * @param adaptersList - a list of adapters found in the PluginManager
- * @returns a series of JSX elements that are ListSubheaders followed by the adapters
- *   found under that subheader
- */
-function categorizeAdapters(
-  adaptersList: { name: string; adapterMetadata: AdapterMetadata }[],
-) {
-  let currentCategory = ''
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const items: any = []
-  adaptersList.forEach(adapter => {
-    if (adapter.adapterMetadata?.category) {
-      if (currentCategory !== adapter.adapterMetadata?.category) {
-        currentCategory = adapter.adapterMetadata?.category
-        items.push(
-          <ListSubheader
-            key={adapter.adapterMetadata?.category}
-            value={adapter.adapterMetadata?.category}
-          >
-            {adapter.adapterMetadata?.category}
-          </ListSubheader>,
-        )
-      }
-      items.push(
-        <MenuItem key={adapter.name} value={adapter.name}>
-          {adapter.adapterMetadata?.displayName
-            ? adapter.adapterMetadata?.displayName
-            : adapter.name}
-        </MenuItem>,
-      )
-    }
-  })
-  return items
-}
-
-function getAdapterTypes(pluginManager: PluginManager) {
-  return pluginManager.getElementTypesInGroup('adapter') as {
-    name: string
-    adapterMetadata: AdapterMetadata
-  }[]
-}
-
-function getTrackTypes(pluginManager: PluginManager) {
-  return pluginManager.getElementTypesInGroup('track') as { name: string }[]
-}
-
-const TextIndexingConfig = observer(({ 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
-                            color="secondary"
-                            onClick={() => {
-                              const newAttr = section.values.filter((a, i) => {
-                                return 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) {
-                              const newAttr: string[] = attributes
-                              newAttr.push(value1)
-                              setAttributes(newAttr)
-                              setValue1('')
-                            } else {
-                              const newFeat: string[] = exclude
-                              newFeat.push(value2)
-                              setExclude(newFeat)
-                              setValue2('')
-                            }
-                          }}
-                          disabled={index === 0 ? value1 === '' : value2 === ''}
-                          color="secondary"
-                          data-testid={`stringArrayAdd-Feat`}
-                        >
-                          <AddIcon />
-                        </IconButton>
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </ListItem>
-            </List>
-          </CardContent>
-        </Card>
-      ))}
-    </Paper>
-  )
-})
-
-const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const { classes } = useStyles()
-  const { trackAdapter } = model
-  const { pluginManager } = getEnv(model)
-  const adapters = getAdapterTypes(pluginManager)
-  return (
-    <TextField
-      className={classes.spacing}
-      value={trackAdapter?.type !== 'UNKNOWN' ? trackAdapter?.type : ''}
-      label="adapterType"
-      helperText="Select an adapter type"
-      select
-      fullWidth
-      onChange={event => model.setAdapterHint(event.target.value)}
-      SelectProps={{
-        // @ts-ignore
-        SelectDisplayProps: { 'data-testid': 'adapterTypeSelect' },
-      }}
-    >
-      {adapters
-        // Excludes any adapter with the 'adapterMetadata.hiddenFromGUI' property, and anything with the 'adapterMetadata.category' property
-        .filter(
-          elt =>
-            !elt.adapterMetadata?.hiddenFromGUI &&
-            !elt.adapterMetadata?.category,
-        )
-        .map(elt => (
-          <MenuItem key={elt.name} value={elt.name}>
-            {elt.adapterMetadata?.displayName
-              ? elt.adapterMetadata?.displayName
-              : 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),
-        )
-      }
-    </TextField>
-  )
-})
-
 function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
   const { classes } = useStyles()
   return (
@@ -299,72 +82,23 @@ function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
   )
 }
 
-const TrackTypeSelector = observer(({ model }: { model: AddTrackModel }) => {
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { trackType } = model
-  const trackTypes = getTrackTypes(getEnv(session).pluginManager)
-
-  return (
-    <TextField
-      className={classes.spacing}
-      value={trackType}
-      label="trackType"
-      helperText="Select a track type"
-      select
-      fullWidth
-      onChange={event => {
-        model.setTrackType(event.target.value)
-      }}
-      SelectProps={{
-        // @ts-ignore
-        SelectDisplayProps: { 'data-testid': 'trackTypeSelect' },
-      }}
-    >
-      {trackTypes.map(({ name }) => (
-        <MenuItem key={name} value={name}>
-          {name}
-        </MenuItem>
-      ))}
-    </TextField>
-  )
-})
-
-const TrackAssemblySelector = observer(
-  ({ model }: { model: AddTrackModel }) => {
-    const session = getSession(model)
-    const { assembly } = model
-    return (
-      <TextField
-        value={assembly}
-        label="assemblyName"
-        helperText="Assembly to which the track will be added"
-        select
-        fullWidth
-        onChange={event => model.setAssembly(event.target.value)}
-        SelectProps={{
-          // @ts-ignore
-          SelectDisplayProps: { 'data-testid': 'assemblyNameSelect' },
-        }}
-      >
-        {session.assemblies
-          .map(conf => readConfObject(conf, 'name'))
-          .map(name => (
-            <MenuItem key={name} value={name}>
-              {name}
-            </MenuItem>
-          ))}
-      </TextField>
-    )
-  },
-)
-
-function ConfirmTrack({ model }: { model: AddTrackModel }) {
+export default observer(function ConfirmTrack({
+  model,
+}: {
+  model: AddTrackModel
+}) {
   const { classes } = useStyles()
   const [check, setCheck] = useState(true)
+  const session = getSession(model)
   const { trackName, trackAdapter, trackType, warningMessage, adapterHint } =
     model
 
+  useEffect(() => {
+    if (adapterHint === '' && trackAdapter) {
+      model.setAdapterHint(trackAdapter.type)
+    }
+  }, [adapterHint, trackAdapter, trackAdapter?.type, model])
+
   if (model.unsupported) {
     return (
       <Typography className={classes.spacing}>
@@ -394,10 +128,6 @@ function ConfirmTrack({ model }: { model: AddTrackModel }) {
     return <UnknownAdapterPrompt model={model} />
   }
 
-  if (adapterHint === '' && trackAdapter) {
-    model.setAdapterHint(trackAdapter.type)
-  }
-
   if (!trackAdapter?.type) {
     return <Typography>Could not recognize this data type.</Typography>
   }
@@ -422,7 +152,19 @@ function ConfirmTrack({ model }: { model: AddTrackModel }) {
       />
       <TrackAdapterSelector model={model} />
       <TrackTypeSelector model={model} />
-      <TrackAssemblySelector model={model} />
+      <AssemblySelector
+        session={session}
+        helperText="Select assembly to add track to"
+        selected={model.assembly}
+        onChange={asm => model.setAssembly(asm)}
+        TextFieldProps={{
+          fullWidth: true,
+          SelectProps: {
+            // @ts-ignore
+            SelectDisplayProps: { 'data-testid': 'assemblyNameSelect' },
+          },
+        }}
+      />
       {isElectron && supportedForIndexing && (
         <FormControl>
           <FormControlLabel
@@ -444,6 +186,4 @@ function ConfirmTrack({ model }: { model: AddTrackModel }) {
       ) : null}
     </div>
   )
-}
-
-export default observer(ConfirmTrack)
+})

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -22,7 +22,6 @@ import { observer } from 'mobx-react'
 // locals
 import ConfirmTrack from './ConfirmTrack'
 import TrackSourceSelect from './TrackSourceSelect'
-
 import { AddTrackModel } from '../model'
 
 const useStyles = makeStyles()(theme => ({

package/src/AddTrackWidget/components/TextIndexingConfig.tsx

@@ -0,0 +1,134 @@
+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(({ 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
+                            color="secondary"
+                            onClick={() => {
+                              const newAttr = section.values.filter((a, i) => {
+                                return 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) {
+                              const newAttr: string[] = attributes
+                              newAttr.push(value1)
+                              setAttributes(newAttr)
+                              setValue1('')
+                            } else {
+                              const newFeat: string[] = exclude
+                              newFeat.push(value2)
+                              setExclude(newFeat)
+                              setValue2('')
+                            }
+                          }}
+                          disabled={index === 0 ? value1 === '' : value2 === ''}
+                          color="secondary"
+                          data-testid={`stringArrayAdd-Feat`}
+                        >
+                          <AddIcon />
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </ListItem>
+            </List>
+          </CardContent>
+        </Card>
+      ))}
+    </Paper>
+  )
+})
+
+export default TextIndexingConfig

package/src/AddTrackWidget/components/TrackAdapterSelector.tsx

@@ -0,0 +1,73 @@
+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-ignore
+        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/TrackTypeSelector.tsx

@@ -0,0 +1,46 @@
+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-ignore
+        SelectDisplayProps: { 'data-testid': 'trackTypeSelect' },
+      }}
+    >
+      {trackTypes.map(({ name, displayName }) => (
+        <MenuItem key={name} value={name}>
+          {displayName}
+        </MenuItem>
+      ))}
+    </TextField>
+  )
+})
+
+export default TrackTypeSelector

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.tsx

@@ -1,10 +1,6 @@
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react'
 import { Fab, Menu, MenuItem } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-// icons
-import AddIcon from '@mui/icons-material/Add'
-// other
-import AutoSizer from 'react-virtualized-auto-sizer'
 import {
   getSession,
   isSessionModelWithWidgets,
@@ -13,6 +9,10 @@ import {
 } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { VariableSizeTree } from 'react-vtree'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
 
 // locals
 import { TreeNode, HierarchicalTrackSelectorModel } from '../model'