@jbrowse/plugin-data-management 1.7.11 → 2.1.0

package/src/HierarchicalTrackSelectorWidget/index.ts

@@ -1,7 +1,5 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import stateModelFactory, { HierarchicalTrackSelectorModel } from './model'
+import configSchema from './configSchema'
 
-export { default as stateModelFactory } from './model'
-export const configSchema = ConfigurationSchema(
-  'HierarchicalTrackSelectorWidget',
-  {},
-)
+export { stateModelFactory, configSchema }
+export type { HierarchicalTrackSelectorModel }

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -1,13 +1,12 @@
-import { types, getParent, Instance } from 'mobx-state-tree'
+import { types, getParent, getEnv, Instance } from 'mobx-state-tree'
 import {
-  AnyConfigurationModel,
   getConf,
   readConfObject,
+  AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 import { getSession } from '@jbrowse/core/util'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import PluginManager from '@jbrowse/core/PluginManager'
-import { AbstractView } from 'react'
 
 function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
   return !!a1.find(value => a2.includes(value))
@@ -18,11 +17,11 @@ function passesFilter(filter: string, config: AnyConfigurationModel) {
   const filterLower = filter.toLowerCase()
   return (
     getTrackName(config).toLowerCase().includes(filterLower) ||
-    categories?.filter(c => c.toLowerCase().includes(filterLower)).length
+    !!categories?.filter(c => c.toLowerCase().includes(filterLower)).length
   )
 }
 
-function getTrackName(config: AnyConfigurationModel) {
+function getTrackName(config: AnyConfigurationModel): string {
   if (!config.trackId) {
     throw new Error('not a track')
   }
@@ -41,6 +40,32 @@ export type TreeNode = {
   children: TreeNode[]
 }
 
+function filterTracks(
+  tracks: AnyConfigurationModel[],
+  self: { view: { type: string } },
+  assemblyName: string,
+) {
+  const { assemblyManager } = getSession(self)
+  const { pluginManager } = getEnv(self)
+  const assembly = assemblyManager.get(assemblyName)
+
+  if (!assembly) {
+    return []
+  }
+  return tracks
+    .filter(c => {
+      const trackConfAssemblies = readConfObject(c, 'assemblyNames')
+      const { allAliases } = assembly
+      return hasAnyOverlap(allAliases, trackConfAssemblies)
+    })
+    .filter(c => {
+      const { displayTypes } = pluginManager.getViewType(self.view.type)
+      const compatDisplays = displayTypes.map((d: { name: string }) => d.name)
+      const trackDisplays = c.displays.map((d: { type: string }) => d.type)
+      return hasAnyOverlap(compatDisplays, trackDisplays)
+    })
+}
+
 export function generateHierarchy(
   model: HierarchicalTrackSelectorModel,
   trackConfigurations: AnyConfigurationModel[],
@@ -112,8 +137,20 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
     })
+    .volatile(() => ({
+      selection: [] as AnyConfigurationModel[],
+    }))
     .actions(self => ({
-      setView(view: AbstractView) {
+      addToSelection(elt: AnyConfigurationModel[]) {
+        self.selection = [...self.selection, ...elt]
+      },
+      removeFromSelection(elt: AnyConfigurationModel[]) {
+        self.selection = self.selection.filter(f => !elt.includes(f))
+      },
+      clearSelection() {
+        self.selection = []
+      },
+      setView(view: unknown) {
         self.view = view
       },
       toggleCategory(pathName: string) {
@@ -156,20 +193,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         // filter out tracks that don't match the current assembly (check all
         // assembly aliases) and display types
         return (refseq ? [refseq] : []).concat([
-          ...tracks
-            .filter(c => {
-              const trackConfAssemblies = readConfObject(c, 'assemblyNames')
-              const { allAliases } = assembly
-              return hasAnyOverlap(allAliases, trackConfAssemblies)
-            })
-            .filter(c => {
-              const { displayTypes } = pluginManager.getViewType(self.view.type)
-              const compatibleDisplays = displayTypes.map(d => d.name)
-              const trackDisplays = c.displays.map(
-                (d: { type: string }) => d.type,
-              )
-              return hasAnyOverlap(compatibleDisplays, trackDisplays)
-            }),
+          ...filterTracks(tracks, self, assemblyName),
         ])
       },
 
@@ -184,29 +208,9 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         if (!self.view) {
           return []
         }
-        const trackConfigurations = connection.tracks
-        const { assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
-
-        if (!(assembly && assembly.initialized)) {
-          return []
-        }
 
         // filter out tracks that don't match the current display types
-        return trackConfigurations
-          .filter(c => {
-            const trackConfAssemblies = readConfObject(c, 'assemblyNames')
-            const { allAliases } = assembly
-            return hasAnyOverlap(allAliases, trackConfAssemblies)
-          })
-          .filter(c => {
-            const { displayTypes } = pluginManager.getViewType(self.view.type)
-            const compatibleDisplays = displayTypes.map(d => d.name)
-            const trackDisplays = c.displays.map(
-              (d: { type: string }) => d.type,
-            )
-            return hasAnyOverlap(compatibleDisplays, trackDisplays)
-          })
+        return filterTracks(connection.tracks, self, assemblyName)
       },
     }))
     .views(self => ({

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
-import clsx from 'clsx'
-
+import { PluginDefinition } from '@jbrowse/core/PluginLoader'
 import {
   Button,
   Collapse,
@@ -12,20 +11,18 @@ import {
   DialogContent,
   DialogContentText,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import IconButton from '@material-ui/core/IconButton'
-import CloseIcon from '@material-ui/icons/Close'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 // locals
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -56,7 +53,7 @@ function CustomPluginForm({
   onClose(): void
   model: PluginStoreModel
 }) {
-  const classes = useStyles()
+  const { classes, cx } = useStyles()
   const [umdPluginName, setUMDPluginName] = useState('')
   const [umdPluginUrl, setUMDPluginUrl] = useState('')
   const [esmPluginUrl, setESMPluginUrl] = useState('')
@@ -83,8 +80,8 @@ function CustomPluginForm({
     setAdvancedOptionsOpen(!advancedOptionsOpen)
   }
 
-  const rootModel = getRoot(model)
-  const { jbrowse } = rootModel
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { jbrowse } = getRoot<any>(model)
 
   const ready = Boolean(
     (umdPluginName && umdPluginUrl) || esmPluginUrl || cjsPluginUrl,
@@ -152,7 +149,7 @@ function CustomPluginForm({
           />
           <DialogContentText onClick={handleOpenAdvancedOptions}>
             <IconButton
-              className={clsx(classes.expand, {
+              className={cx(classes.expand, {
                 [classes.expandOpen]: advancedOptionsOpen,
               })}
               aria-expanded={advancedOptionsOpen}

package/src/PluginStoreWidget/components/InstalledPlugin.tsx

@@ -11,11 +11,11 @@ import {
   ListItem,
   Tooltip,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@material-ui/icons/Close'
-import LockIcon from '@material-ui/icons/Lock'
+import CloseIcon from '@mui/icons-material/Close'
+import LockIcon from '@mui/icons-material/Lock'
 
 import PluginManager from '@jbrowse/core/PluginManager'
 import { getSession } from '@jbrowse/core/util'
@@ -25,7 +25,7 @@ import {
 } from '@jbrowse/core/util/types'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -40,7 +40,7 @@ const useStyles = makeStyles(() => ({
 }))
 
 function LockedPlugin() {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Tooltip
       className={classes.lockedPluginTooltip}
@@ -58,7 +58,7 @@ function PluginDialog({
   plugin: string
   onClose: (s?: string) => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <Dialog open onClose={() => onClose()}>
       <DialogTitle>
@@ -123,7 +123,8 @@ function InstalledPlugin({
     p => pluginManager.pluginMetadata[plugin.name].url === p.url,
   )
 
-  const rootModel = getParent(model, 3)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(model, 3)
   const { jbrowse, adminMode } = rootModel
 
   return (

package/src/PluginStoreWidget/components/InstalledPluginsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { List, Typography } from '@material-ui/core'
+import { List, Typography } from '@mui/material'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { PluginStoreModel } from '../model'
 import InstalledPlugin from './InstalledPlugin'

package/src/PluginStoreWidget/components/PluginCard.tsx

@@ -14,16 +14,16 @@ import {
   Button,
   Link,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import PersonIcon from '@material-ui/icons/Person'
-import AddIcon from '@material-ui/icons/Add'
-import CheckIcon from '@material-ui/icons/Check'
+import PersonIcon from '@mui/icons-material/Person'
+import AddIcon from '@mui/icons-material/Add'
+import CheckIcon from '@mui/icons-material/Check'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   card: {
     margin: '1em',
   },
@@ -50,18 +50,17 @@ function PluginCard({
   model: PluginStoreModel
   adminMode: boolean
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const session = getSession(model)
   const { pluginManager } = getEnv(model) as { pluginManager: PluginManager }
   const isInstalled = Boolean(
-    pluginManager.runtimePluginDefinitions.find(
-      pluginDefinition => pluginDefinition.url === plugin.url,
-    ),
+    pluginManager.runtimePluginDefinitions.find(def => def.url === plugin.url),
   )
   const [tempDisabled, setTempDisabled] = useState(false)
   const disableButton = isInstalled || tempDisabled
 
-  const rootModel = getParent(model, 3)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rootModel = getParent<any>(model, 3)
   const { jbrowse } = rootModel
 
   return (

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -5,21 +5,21 @@ import { getEnv } from 'mobx-state-tree'
 import {
   Accordion,
   AccordionSummary,
-  TextField,
-  InputAdornment,
   Button,
   IconButton,
+  InputAdornment,
+  TextField,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { JBrowsePlugin } from '@jbrowse/core/util/types'
 import { getSession, isElectron } from '@jbrowse/core/util'
 
 // icons
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import ClearIcon from '@material-ui/icons/Clear'
-import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ClearIcon from '@mui/icons-material/Clear'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 
 // locals
 import InstalledPluginsList from './InstalledPluginsList'
@@ -27,7 +27,7 @@ import PluginCard from './PluginCard'
 import CustomPluginForm from './CustomPluginForm'
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   root: {
     margin: theme.spacing(1),
   },
@@ -51,7 +51,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>()
   const [error, setError] = useState<unknown>()
   const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false)