@jbrowse/plugin-data-management 1.7.10 → 2.0.1

package/src/HierarchicalTrackSelectorWidget/{model.js → model.ts}

@@ -1,22 +1,28 @@
-import { types, getParent } from 'mobx-state-tree'
-import { readConfObject } from '@jbrowse/core/configuration'
+import { types, getParent, Instance } from 'mobx-state-tree'
+import {
+  AnyConfigurationModel,
+  getConf,
+  readConfObject,
+} 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'
 
-const hasAnyOverlap = (a1 = [], a2 = []) =>
-  !!a1.find(value => a2.includes(value))
+function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
+  return !!a1.find(value => a2.includes(value))
+}
 
-function passesFilter(filter, config) {
-  const name = getTrackName(config)
-  const categories = readConfObject(config, 'category') || []
+function passesFilter(filter: string, config: AnyConfigurationModel) {
+  const categories = readConfObject(config, 'category') as string[] | undefined
   const filterLower = filter.toLowerCase()
   return (
-    !!name.toLowerCase().includes(filterLower) ||
-    categories.filter(cat => !!cat.toLowerCase().includes(filterLower)).length
+    getTrackName(config).toLowerCase().includes(filterLower) ||
+    categories?.filter(c => c.toLowerCase().includes(filterLower)).length
   )
 }
 
-function getTrackName(config) {
+function getTrackName(config: AnyConfigurationModel) {
   if (!config.trackId) {
     throw new Error('not a track')
   }
@@ -26,20 +32,33 @@ function getTrackName(config) {
   )
 }
 
-export function generateHierarchy(model, trackConfigurations, collapsed) {
-  const hierarchy = { children: [] }
+export type TreeNode = {
+  name: string
+  id: string
+  conf?: AnyConfigurationModel
+  checked?: boolean
+  isOpenByDefault?: boolean
+  children: TreeNode[]
+}
+
+export function generateHierarchy(
+  model: HierarchicalTrackSelectorModel,
+  trackConfigurations: AnyConfigurationModel[],
+  collapsed: { get: (arg: string) => boolean | undefined },
+) {
+  const hierarchy = { children: [] as TreeNode[] } as TreeNode
   const { filterText, view } = model
 
   trackConfigurations
-    .filter(trackConf => passesFilter(filterText, trackConf))
-    .forEach(trackConf => {
+    .filter(conf => passesFilter(filterText, conf))
+    .forEach(conf => {
       // copy the categories since this array can be mutated downstream
-      const categories = [...(readConfObject(trackConf, 'category') || [])]
+      const categories = [...(readConfObject(conf, 'category') || [])]
 
       // silly thing where if trackId ends with sessionTrack, then push it to
       // a category that starts with a space to force sort to the top...
       // double whammy hackyness
-      if (trackConf.trackId.endsWith('sessionTrack')) {
+      if (conf.trackId.endsWith('sessionTrack')) {
         categories.unshift(' Session tracks')
       }
 
@@ -63,16 +82,17 @@ export function generateHierarchy(model, trackConfigurations, collapsed) {
           currLevel = ret
         }
       }
+      const tracks = view.tracks as { configuration: AnyConfigurationModel }[]
 
       // using splice here tries to group leaf nodes above hierarchical nodes
       currLevel.children.splice(
         currLevel.children.findIndex(elt => elt.children.length),
         0,
         {
-          id: trackConf.trackId,
-          name: getTrackName(trackConf),
-          conf: trackConf,
-          checked: !!view.tracks.find(f => f.configuration === trackConf),
+          id: conf.trackId,
+          name: getTrackName(conf),
+          conf,
+          checked: !!tracks.find(f => f.configuration === conf),
           children: [],
         },
       )
@@ -81,8 +101,8 @@ export function generateHierarchy(model, trackConfigurations, collapsed) {
   return hierarchy.children
 }
 
-export default pluginManager =>
-  types
+export default function stateTreeFactory(pluginManager: PluginManager) {
+  return types
     .model('HierarchicalTrackSelectorWidget', {
       id: ElementId,
       type: types.literal('HierarchicalTrackSelectorWidget'),
@@ -93,44 +113,41 @@ export default pluginManager =>
       ),
     })
     .actions(self => ({
-      setView(view) {
+      setView(view: AbstractView) {
         self.view = view
       },
-      toggleCategory(pathName) {
+      toggleCategory(pathName: string) {
         self.collapsed.set(pathName, !self.collapsed.get(pathName))
       },
       clearFilterText() {
         self.filterText = ''
       },
-      setFilterText(newText) {
+      setFilterText(newText: string) {
         self.filterText = newText
       },
     }))
     .views(self => ({
-      getRefSeqTrackConf(assemblyName) {
+      getRefSeqTrackConf(assemblyName: string) {
         const { assemblyManager } = getSession(self)
         const assembly = assemblyManager.get(assemblyName)
         const trackConf = assembly?.configuration.sequence
         const viewType = pluginManager.getViewType(self.view.type)
-        if (trackConf) {
-          for (const display of trackConf.displays) {
-            if (
-              viewType.displayTypes.find(
-                displayType => displayType.name === display.type,
-              )
-            ) {
-              return trackConf
-            }
+        if (!trackConf) {
+          return undefined
+        }
+        for (const display of trackConf.displays) {
+          if (viewType.displayTypes.find(d => d.name === display.type)) {
+            return trackConf
           }
         }
-        return undefined
       },
-      trackConfigurations(assemblyName) {
+    }))
+    .views(self => ({
+      trackConfigurations(assemblyName: string) {
         if (!self.view) {
           return []
         }
-        const session = getSession(self)
-        const { tracks: trackConfigurations, assemblyManager } = session
+        const { tracks, assemblyManager } = getSession(self)
         const assembly = assemblyManager.get(assemblyName)
         if (!assembly) {
           return []
@@ -139,34 +156,36 @@ export default pluginManager =>
         // filter out tracks that don't match the current assembly (check all
         // assembly aliases) and display types
         return (refseq ? [refseq] : []).concat([
-          ...trackConfigurations
-            .filter(conf => {
-              const trackConfAssemblies = readConfObject(conf, 'assemblyNames')
+          ...tracks
+            .filter(c => {
+              const trackConfAssemblies = readConfObject(c, 'assemblyNames')
               const { allAliases } = assembly
               return hasAnyOverlap(allAliases, trackConfAssemblies)
             })
-            .filter(conf => {
+            .filter(c => {
               const { displayTypes } = pluginManager.getViewType(self.view.type)
-              const compatibleDisplays = displayTypes.map(
-                display => display.name,
+              const compatibleDisplays = displayTypes.map(d => d.name)
+              const trackDisplays = c.displays.map(
+                (d: { type: string }) => d.type,
               )
-              const trackDisplays = conf.displays.map(display => display.type)
               return hasAnyOverlap(compatibleDisplays, trackDisplays)
             }),
         ])
       },
 
-      get assemblyNames() {
-        return self.view ? self.view.assemblyNames : []
+      get assemblyNames(): string[] {
+        return self.view?.assemblyNames || []
       },
 
-      connectionTrackConfigurations(assemblyName, connection) {
+      connectionTrackConfigurations(
+        assemblyName: string,
+        connection: { tracks: AnyConfigurationModel[] },
+      ) {
         if (!self.view) {
           return []
         }
         const trackConfigurations = connection.tracks
-        const session = getSession(self)
-        const { assemblyManager } = session
+        const { assemblyManager } = getSession(self)
         const assembly = assemblyManager.get(assemblyName)
 
         if (!(assembly && assembly.initialized)) {
@@ -175,49 +194,49 @@ export default pluginManager =>
 
         // filter out tracks that don't match the current display types
         return trackConfigurations
-          .filter(conf => {
-            const trackConfAssemblies = readConfObject(conf, 'assemblyNames')
+          .filter(c => {
+            const trackConfAssemblies = readConfObject(c, 'assemblyNames')
             const { allAliases } = assembly
             return hasAnyOverlap(allAliases, trackConfAssemblies)
           })
-          .filter(conf => {
+          .filter(c => {
             const { displayTypes } = pluginManager.getViewType(self.view.type)
-            const compatibleDisplays = displayTypes.map(display => display.name)
-            const trackDisplays = conf.displays.map(display => display.type)
+            const compatibleDisplays = displayTypes.map(d => d.name)
+            const trackDisplays = c.displays.map(
+              (d: { type: string }) => d.type,
+            )
             return hasAnyOverlap(compatibleDisplays, trackDisplays)
           })
       },
-
-      hierarchy(assemblyName) {
+    }))
+    .views(self => ({
+      hierarchy(assemblyName: string) {
         const hier = generateHierarchy(
-          self,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          self as any,
           self.trackConfigurations(assemblyName),
           self.collapsed,
         )
 
         const session = getSession(self)
-        const conns = session.connectionInstances
-          .filter(conn => {
-            const configAssemblyNames = readConfObject(
-              conn.configuration,
-              'assemblyNames',
-            )
-            if (configAssemblyNames.length === 0) {
-              return true
-            }
-            return configAssemblyNames.includes(assemblyName)
-          })
-          .map((conn, index) => {
-            const c = session.connections[index]
-            return {
-              id: c.connectionId,
-              name: readConfObject(c, 'name'),
-              children: this.connectionHierarchy(assemblyName, conn),
-              state: {
-                expanded: true,
-              },
-            }
-          })
+        const { connections, connectionInstances } = session
+        const conns =
+          connectionInstances
+            ?.filter(c => {
+              const names = getConf(c, 'assemblyNames')
+              return names.length === 0 ? true : names.includes(assemblyName)
+            })
+            .map((conn, index) => {
+              const c = connections[index]
+              return {
+                id: c.connectionId,
+                name: readConfObject(c, 'name'),
+                children: this.connectionHierarchy(assemblyName, conn),
+                state: {
+                  expanded: true,
+                },
+              }
+            }) || []
 
         return {
           name: 'Root',
@@ -229,33 +248,22 @@ export default pluginManager =>
         }
       },
 
-      connectionHierarchy(assemblyName, connection) {
+      connectionHierarchy(
+        assemblyName: string,
+        connection: { tracks: AnyConfigurationModel[] },
+      ) {
         return generateHierarchy(
-          self,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          self as any,
           self.connectionTrackConfigurations(assemblyName, connection),
           self.collapsed,
         )
       },
-
-      // This recursively gets tracks from lower paths
-      allTracksInCategoryPath(path, connection, assemblyName) {
-        let currentHier = connection
-          ? self.connectionHierarchy(connection)
-          : self.hierarchy(assemblyName)
-        path.forEach(pathItem => {
-          currentHier = currentHier.get(pathItem) || new Map()
-        })
-        let tracks = {}
-        currentHier.forEach((contents, name) => {
-          if (contents.trackId) {
-            tracks[contents.trackId] = contents
-          } else {
-            tracks = Object.assign(
-              tracks,
-              self.allTracksInCategoryPath(path.concat([name])),
-            )
-          }
-        })
-        return tracks
-      },
     }))
+}
+
+export type HierarchicalTrackSelectorStateModel = ReturnType<
+  typeof stateTreeFactory
+>
+export type HierarchicalTrackSelectorModel =
+  Instance<HierarchicalTrackSelectorStateModel>

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)