@jbrowse/plugin-data-management 1.5.0 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "1.5.0",
+  "version": "1.5.4",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -37,6 +37,7 @@
   "dependencies": {
     "@gmod/ucsc-hub": "^0.1.3",
     "@material-ui/icons": "^4.9.1",
+    "clsx": "^1.1.0",
     "pluralize": "^8.0.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",
@@ -55,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "542025578a39bd170c8a166f2568ee7edbd54072"
+  "gitHead": "0c398214590969168694b4ed8e20b595178b9efd"
 }

package/src/AddTrackWidget/components/AddTrackWidget.test.js

@@ -125,7 +125,7 @@ describe('<AddTrackWidget />', () => {
     expect(session.sessionTracks.length).toBe(2)
   })
 
-  it('fails to add a track', async () => {
+  xit('fails to add a track', async () => {
     const { getByTestId, getAllByTestId, findByText } = render(
       <AddTrackWidget model={model} />,
     )

package/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -11,10 +11,12 @@ import {
 import { getSession } from '@jbrowse/core/util'
 import { getConf } from '@jbrowse/core/configuration'
 import { observer } from 'mobx-react'
+import { Alert } from '@material-ui/lab'
+
+// locals
 import ConfirmTrack from './ConfirmTrack'
 import TrackSourceSelect from './TrackSourceSelect'
 import { AddTrackModel } from '../model'
-import { Alert } from '@material-ui/lab'
 
 const useStyles = makeStyles(theme => ({
   root: {

package/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -1,15 +1,22 @@
+import React from 'react'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { getSession } from '@jbrowse/core/util'
-import Link from '@material-ui/core/Link'
-import MenuItem from '@material-ui/core/MenuItem'
-import { makeStyles } from '@material-ui/core/styles'
-import TextField from '@material-ui/core/TextField'
-import Typography from '@material-ui/core/Typography'
+import {
+  Link,
+  MenuItem,
+  TextField,
+  ListSubheader,
+  Typography,
+  makeStyles,
+} from '@material-ui/core'
+import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
 import { getEnv } from 'mobx-state-tree'
-import React from 'react'
 import { UNKNOWN } from '@jbrowse/core/util/tracks'
+
+// locals
 import { AddTrackModel } from '../model'
+import { AdapterMetadata } from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
 const useStyles = makeStyles(theme => ({
   spacing: {
@@ -41,17 +48,68 @@ function StatusMessage({
   )
 }
 
+/**
+ * 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 TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
   const classes = useStyles()
   const session = getSession(model)
   const { trackAdapter } = model
-
+  // prettier-ignore
+  const adapters = getAdapterTypes(getEnv(session).pluginManager)
   return (
     <TextField
       className={classes.spacing}
-      value={trackAdapter?.type}
+      value={trackAdapter?.type !== 'UNKNOWN' ? trackAdapter?.type : ''}
       label="adapterType"
-      helperText="An adapter type"
+      helperText="Select an adapter type"
       select
       fullWidth
       onChange={event => model.setAdapterHint(event.target.value)}
@@ -60,15 +118,24 @@ const TrackAdapterSelector = observer(({ model }: { model: AddTrackModel }) => {
         SelectDisplayProps: { 'data-testid': 'adapterTypeSelect' },
       }}
     >
-      {getEnv(session)
-        .pluginManager.getElementTypesInGroup('adapter')
-        // Exclude SNPCoverageAdapter from primary adapter user selection
-        .filter((elt: { name: string }) => elt.name !== 'SNPCoverageAdapter')
-        .map((elt: { name: string }) => (
+      {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.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>
   )
 })
@@ -78,8 +145,8 @@ function UnknownAdapterPrompt({ model }: { model: AddTrackModel }) {
   return (
     <>
       <Typography className={classes.spacing}>
-        Was not able to guess the adapter type for this data, but it may be in
-        the list below. If not, you can{' '}
+        JBrowse was not able to guess the adapter type for this data, but it may
+        be in the list below. If not, you can{' '}
         <Link
           href="https://github.com/GMOD/jbrowse-components/releases"
           target="_blank"
@@ -106,13 +173,14 @@ 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="A track type"
+      helperText="Select a track type"
       select
       fullWidth
       onChange={event => {
@@ -123,14 +191,11 @@ const TrackTypeSelector = observer(({ model }: { model: AddTrackModel }) => {
         SelectDisplayProps: { 'data-testid': 'trackTypeSelect' },
       }}
     >
-      {getEnv(session)
-        .pluginManager.getElementTypesInGroup('track')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .map(({ name }: any) => (
-          <MenuItem key={name} value={name}>
-            {name}
-          </MenuItem>
-        ))}
+      {trackTypes.map(({ name }) => (
+        <MenuItem key={name} value={name}>
+          {name}
+        </MenuItem>
+      ))}
     </TextField>
   )
 })
@@ -152,14 +217,13 @@ const TrackAssemblySelector = observer(
           SelectDisplayProps: { 'data-testid': 'assemblyNameSelect' },
         }}
       >
-        {session.assemblies.map(conf => {
-          const name = readConfObject(conf, 'name')
-          return (
+        {session.assemblies
+          .map(conf => readConfObject(conf, 'name'))
+          .map(name => (
             <MenuItem key={name} value={name}>
               {name}
             </MenuItem>
-          )
-        })}
+          ))}
       </TextField>
     )
   },
@@ -167,7 +231,8 @@ const TrackAssemblySelector = observer(
 
 function ConfirmTrack({ model }: { model: AddTrackModel }) {
   const classes = useStyles()
-  const { trackName, trackAdapter, trackType, warningMessage } = model
+  const { trackName, trackAdapter, trackType, warningMessage, adapterHint } =
+    model
 
   if (model.unsupported) {
     return (
@@ -198,6 +263,10 @@ 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>
   }

package/src/AddTrackWidget/components/TrackSourceSelect.tsx

@@ -1,7 +1,6 @@
-import { FileSelector } from '@jbrowse/core/ui'
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
+import { FileSelector } from '@jbrowse/core/ui'
+import { Paper, makeStyles } from '@material-ui/core'
 import { AddTrackModel } from '../model'
 import { getRoot } from 'mobx-state-tree'
 import { observer } from 'mobx-react'

package/src/AddTrackWidget/index.test.jsx

@@ -4,32 +4,51 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import Plugin from '@jbrowse/core/Plugin'
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
 import stateModelFactory from './model'
+import Alignments from '@jbrowse/plugin-alignments'
+import SVG from '@jbrowse/plugin-svg'
+import Variants from '@jbrowse/plugin-variants'
+import Hic from '@jbrowse/plugin-hic'
 
 function standardInitializer() {
-  const pluginManager = new PluginManager([new FakeViewPlugin()])
+  const pluginManager = new PluginManager([
+    new FakeViewPlugin(),
+    new Alignments(),
+    new SVG(),
+    new Variants(),
+    new Hic(),
+  ])
   pluginManager.createPluggableElements()
   pluginManager.configure()
 
-  const SessionModel = types.model({
-    view: FakeViewModel,
-    widget: stateModelFactory(pluginManager),
-  })
+  const SessionModel = types
+    .model({
+      view: FakeViewModel,
+      widget: stateModelFactory(pluginManager),
+    })
+    .volatile(() => ({
+      rpcManager: {},
+      configuration: {},
+    }))
 
   // assemblyNames is defined on the view, which is done in LGV for example
   // this is really just used for convenience to automatically fill in the
   // assembly field in the form
-  return SessionModel.create({
-    view: {
-      id: 'testing',
-      type: 'FakeView',
-      assemblyNames: ['volvox'],
-    },
-    widget: {
-      type: 'AddTrackWidget',
-      view: 'testing',
+  return SessionModel.create(
+    {
+      view: {
+        id: 'testing',
+        type: 'FakeView',
+        assemblyNames: ['volvox'],
+      },
+      widget: {
+        type: 'AddTrackWidget',
+        view: 'testing',
+      },
     },
-  })
+    { pluginManager },
+  )
 }
+
 const realLocation = window.location
 
 // https://stackoverflow.com/a/60110508/2129219

package/src/AddTrackWidget/model.ts

@@ -6,6 +6,7 @@ import {
   guessAdapter,
   guessTrackType,
   UNSUPPORTED,
+  getFileName,
 } from '@jbrowse/core/util/tracks'
 
 function isAbsoluteUrl(url = '') {
@@ -17,18 +18,6 @@ function isAbsoluteUrl(url = '') {
   }
 }
 
-function getFileName(track: FileLocation) {
-  const uri = 'uri' in track ? track.uri : undefined
-  const localPath = 'localPath' in track ? track.localPath : undefined
-  const blob = 'blobId' in track ? track : undefined
-  return (
-    blob?.name ||
-    uri?.slice(uri.lastIndexOf('/') + 1) ||
-    localPath?.slice(localPath.lastIndexOf('/') + 1) ||
-    ''
-  )
-}
-
 export default function f(pluginManager: PluginManager) {
   return types
     .model('AddTrackModel', {
@@ -88,7 +77,7 @@ export default function f(pluginManager: PluginManager) {
         const { trackData, indexTrackData, adapterHint } = self
 
         return trackData
-          ? guessAdapter(trackData, indexTrackData, getFileName, adapterHint)
+          ? guessAdapter(trackData, indexTrackData, adapterHint, self)
           : undefined
       },
 
@@ -148,7 +137,9 @@ export default function f(pluginManager: PluginManager) {
       get trackType() {
         return (
           self.altTrackType ||
-          (this.trackAdapter ? guessTrackType(this.trackAdapter.type) : '')
+          (this.trackAdapter
+            ? guessTrackType(this.trackAdapter.type, self)
+            : '')
         )
       },
     }))

package/src/AssemblyManager/AssemblyManager.tsx

@@ -1,6 +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 {
   Button,
   Dialog,
@@ -52,7 +53,8 @@ const AssemblyManager = observer(
     const classes = useStyles()
     const [isFormOpen, setFormOpen] = useState(false)
     const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false)
-    const [assemblyBeingEdited, setAssemblyBeingEdited] = useState()
+    const [assemblyBeingEdited, setAssemblyBeingEdited] =
+      useState<AnyConfigurationModel>()
 
     const showAssemblyTable = !isFormOpen && !isAssemblyBeingEdited
 

package/src/AssemblyManager/AssemblyTable.tsx

@@ -42,11 +42,14 @@ const AssemblyTable = observer(
     setIsAssemblyBeingEdited,
     setAssemblyBeingEdited,
   }: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rootModel: any
+    rootModel: {
+      jbrowse: {
+        removeAssemblyConf: (arg: string) => void
+        assemblies: AnyConfigurationModel[]
+      }
+    }
     setIsAssemblyBeingEdited(arg: boolean): void
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setAssemblyBeingEdited(arg: any): void
+    setAssemblyBeingEdited(arg: AnyConfigurationModel): void
   }) => {
     const classes = useStyles()
 
@@ -54,41 +57,39 @@ const AssemblyTable = observer(
       rootModel.jbrowse.removeAssemblyConf(name)
     }
 
-    const rows = rootModel.jbrowse.assemblies.map(
-      (assembly: AnyConfigurationModel) => {
-        const name = readConfObject(assembly, 'name')
-        const displayName = readConfObject(assembly, 'displayName')
-        const aliases = readConfObject(assembly, 'aliases')
-        return (
-          <TableRow key={name}>
-            <TableCell>{name}</TableCell>
-            <TableCell>{displayName}</TableCell>
-            <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
-            <TableCell className={classes.buttonCell}>
-              <IconButton
-                data-testid={`${name}-edit`}
-                className={classes.button}
-                onClick={() => {
-                  setIsAssemblyBeingEdited(true)
-                  setAssemblyBeingEdited(assembly)
-                }}
-              >
-                <CreateIcon color="primary" />
-              </IconButton>
-              <IconButton
-                data-testid={`${name}-delete`}
-                className={classes.button}
-                onClick={() => {
-                  removeAssembly(name)
-                }}
-              >
-                <DeleteIcon color="error" />
-              </IconButton>
-            </TableCell>
-          </TableRow>
-        )
-      },
-    )
+    const rows = rootModel.jbrowse.assemblies.map(assembly => {
+      const name = readConfObject(assembly, 'name')
+      const displayName = readConfObject(assembly, 'displayName')
+      const aliases = readConfObject(assembly, 'aliases')
+      return (
+        <TableRow key={name}>
+          <TableCell>{name}</TableCell>
+          <TableCell>{displayName}</TableCell>
+          <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
+          <TableCell className={classes.buttonCell}>
+            <IconButton
+              data-testid={`${name}-edit`}
+              className={classes.button}
+              onClick={() => {
+                setIsAssemblyBeingEdited(true)
+                setAssemblyBeingEdited(assembly)
+              }}
+            >
+              <CreateIcon color="primary" />
+            </IconButton>
+            <IconButton
+              data-testid={`${name}-delete`}
+              className={classes.button}
+              onClick={() => {
+                removeAssembly(name)
+              }}
+            >
+              <DeleteIcon color="error" />
+            </IconButton>
+          </TableCell>
+        </TableRow>
+      )
+    })
 
     return (
       <TableContainer component={Paper}>

package/src/HierarchicalTrackSelectorWidget/model.js

@@ -9,9 +9,10 @@ const hasAnyOverlap = (a1 = [], a2 = []) =>
 function passesFilter(filter, config) {
   const name = getTrackName(config)
   const categories = readConfObject(config, 'category') || []
-  const regexp = new RegExp(filter, 'i')
+  const filterLower = filter.toLowerCase()
   return (
-    !!name.match(regexp) || categories.filter(cat => !!cat.match(regexp)).length
+    !!name.toLowerCase().includes(filterLower) ||
+    categories.filter(cat => !!cat.toLowerCase().includes(filterLower)).length
   )
 }