@jbrowse/plugin-data-management 2.5.0 → 2.6.2

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -1,284 +0,0 @@
-import { types, getSnapshot, Instance } from 'mobx-state-tree'
-import {
-  getConf,
-  readConfObject,
-  AnyConfigurationModel,
-} from '@jbrowse/core/configuration'
-import {
-  AbstractSessionModel,
-  dedupe,
-  getSession,
-  getEnv,
-} from '@jbrowse/core/util'
-import { getTrackName } from '@jbrowse/core/util/tracks'
-import { ElementId } from '@jbrowse/core/util/types/mst'
-import PluginManager from '@jbrowse/core/PluginManager'
-
-function hasAnyOverlap<T>(a1: T[] = [], a2: T[] = []) {
-  // shortcut case is that arrays are single entries, and are equal
-  // long case is that we use a set
-  if (a1[0] === a2[0]) {
-    return true
-  } else {
-    const s1 = new Set(a1)
-    return a2.some(a => s1.has(a))
-  }
-}
-
-export function matches(
-  query: string,
-  conf: AnyConfigurationModel,
-  session: AbstractSessionModel,
-) {
-  const categories = readConfObject(conf, 'category') as string[] | undefined
-  const queryLower = query.toLowerCase()
-  return (
-    getTrackName(conf, session).toLowerCase().includes(queryLower) ||
-    !!categories?.filter(c => c.toLowerCase().includes(queryLower)).length
-  )
-}
-
-export type TreeNode = {
-  name: string
-  id: string
-  conf?: AnyConfigurationModel
-  checked?: boolean
-  isOpenByDefault?: boolean
-  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 []
-  }
-  const { allAliases } = assembly
-  return tracks
-    .filter(c => hasAnyOverlap(allAliases, readConfObject(c, 'assemblyNames')))
-    .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[],
-  collapsed: { get: (arg: string) => boolean | undefined },
-  extra?: string,
-) {
-  const hierarchy = { children: [] as TreeNode[] } as TreeNode
-  const { filterText, view } = model
-  const session = getSession(model)
-
-  trackConfigurations
-    .filter(conf => matches(filterText, conf, session))
-    .forEach(conf => {
-      // copy the categories since this array can be mutated downstream
-      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 (conf.trackId.endsWith('sessionTrack')) {
-        categories.unshift(' Session tracks')
-      }
-
-      let currLevel = hierarchy
-
-      // find existing category to put track into or create it
-      for (let i = 0; i < categories.length; i++) {
-        const category = categories[i]
-        const ret = currLevel.children.find(c => c.name === category)
-        const id = extra + '-' + categories.slice(0, i + 1).join(',')
-        if (!ret) {
-          const n = {
-            children: [],
-            name: category,
-            id,
-            isOpenByDefault: !collapsed.get(id),
-          }
-          currLevel.children.push(n)
-          currLevel = n
-        } else {
-          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: conf.trackId,
-          name: getTrackName(conf, session),
-          conf,
-          checked: tracks.some(f => f.configuration === conf),
-          children: [],
-        },
-      )
-    })
-
-  return hierarchy.children
-}
-
-export default function stateTreeFactory(pluginManager: PluginManager) {
-  return types
-    .model('HierarchicalTrackSelectorWidget', {
-      id: ElementId,
-      type: types.literal('HierarchicalTrackSelectorWidget'),
-      collapsed: types.map(types.boolean),
-      view: types.safeReference(
-        pluginManager.pluggableMstType('view', 'stateModel'),
-      ),
-    })
-    .volatile(() => ({
-      selection: [] as AnyConfigurationModel[],
-      filterText: '',
-    }))
-    .actions(self => ({
-      setSelection(elt: AnyConfigurationModel[]) {
-        self.selection = elt
-      },
-      addToSelection(elt: AnyConfigurationModel[]) {
-        self.selection = dedupe([...self.selection, ...elt], e => e.trackId)
-      },
-      removeFromSelection(elt: AnyConfigurationModel[]) {
-        self.selection = self.selection.filter(f => !elt.includes(f))
-      },
-      clearSelection() {
-        self.selection = []
-      },
-      setView(view: unknown) {
-        self.view = view
-      },
-      toggleCategory(pathName: string) {
-        self.collapsed.set(pathName, !self.collapsed.get(pathName))
-      },
-      clearFilterText() {
-        self.filterText = ''
-      },
-      setFilterText(newText: string) {
-        self.filterText = newText
-      },
-    }))
-    .views(self => ({
-      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) {
-          return undefined
-        }
-        for (const display of trackConf.displays) {
-          if (viewType.displayTypes.some(d => d.name === display.type)) {
-            return trackConf
-          }
-        }
-      },
-    }))
-    .views(self => ({
-      trackConfigurations(assemblyName: string) {
-        if (!self.view) {
-          return []
-        }
-        const { tracks, assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
-        if (!assembly) {
-          return []
-        }
-        const refseq = self.getRefSeqTrackConf(assemblyName)
-        // filter out tracks that don't match the current assembly (check all
-        // assembly aliases) and display types
-        return [
-          ...(refseq ? [refseq] : []),
-          ...filterTracks(tracks, self, assemblyName),
-        ]
-      },
-
-      get assemblyNames(): string[] {
-        return self.view?.assemblyNames || []
-      },
-
-      connectionTrackConfigurations(
-        assemblyName: string,
-        connection: { tracks: AnyConfigurationModel[] },
-      ) {
-        if (!self.view) {
-          return []
-        }
-
-        // filter out tracks that don't match the current display types
-        return filterTracks(connection.tracks, self, assemblyName)
-      },
-    }))
-    .views(self => ({
-      hierarchy(assemblyName: string) {
-        const hier = generateHierarchy(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          self as any,
-          self.trackConfigurations(assemblyName),
-          self.collapsed,
-        )
-
-        const session = getSession(self)
-        const { connectionInstances } = session
-
-        const { assemblyManager } = getSession(self)
-        const assembly = assemblyManager.get(assemblyName)
-        const conns =
-          (assembly &&
-            connectionInstances
-              ?.map(c => ({
-                // @ts-expect-error
-                id: getSnapshot(c).configuration,
-                name: getConf(c, 'name'),
-                children: this.connectionHierarchy(assemblyName, c),
-                state: {
-                  expanded: true,
-                },
-              }))
-              .filter(f => f.children.length)) ||
-          []
-
-        return {
-          name: 'Root',
-          id: 'Root',
-          children: [
-            { name: 'Tracks', id: 'Tracks', children: hier },
-            ...conns,
-          ],
-        }
-      },
-
-      connectionHierarchy(
-        assemblyName: string,
-        connection: { name: string; tracks: AnyConfigurationModel[] },
-      ) {
-        return generateHierarchy(
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          self as any,
-          self.connectionTrackConfigurations(assemblyName, connection),
-          self.collapsed,
-          connection.name,
-        )
-      },
-    }))
-}
-
-export type HierarchicalTrackSelectorStateModel = ReturnType<
-  typeof stateTreeFactory
->
-export type HierarchicalTrackSelectorModel =
-  Instance<HierarchicalTrackSelectorStateModel>

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,165 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { getRoot } from 'mobx-state-tree'
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  Collapse,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import IconButton from '@mui/material/IconButton'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-
-// locals
-import { PluginStoreModel } from '../model'
-
-const useStyles = makeStyles()(theme => ({
-  dialogContent: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  expand: {
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shortest,
-    }),
-  },
-  expandOpen: {
-    transform: 'rotate(180deg)',
-  },
-}))
-
-function CustomPluginForm({
-  open,
-  onClose,
-  model,
-}: {
-  open: boolean
-  onClose(): void
-  model: PluginStoreModel
-}) {
-  const { classes, cx } = useStyles()
-  const [umdPluginName, setUMDPluginName] = useState('')
-  const [umdPluginUrl, setUMDPluginUrl] = useState('')
-  const [esmPluginUrl, setESMPluginUrl] = useState('')
-  const [cjsPluginUrl, setCJSPluginUrl] = useState('')
-  const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false)
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { jbrowse } = getRoot<any>(model)
-
-  const ready = Boolean(
-    (umdPluginName && umdPluginUrl) || esmPluginUrl || cjsPluginUrl,
-  )
-
-  function handleSubmit() {
-    if (umdPluginName && umdPluginUrl) {
-      jbrowse.addPlugin({ name: umdPluginName, umdUrl: umdPluginUrl })
-    }
-    if (esmPluginUrl) {
-      jbrowse.addPlugin({ esmUrl: esmPluginUrl })
-    }
-    if (cjsPluginUrl) {
-      jbrowse.addPlugin({ cjsUrl: cjsPluginUrl })
-    }
-  }
-
-  function handleClose() {
-    setUMDPluginName('')
-    setUMDPluginUrl('')
-    setESMPluginUrl('')
-    setCJSPluginUrl('')
-    onClose()
-  }
-
-  return (
-    <Dialog open={open} onClose={handleClose} title="Add custom plugin">
-      <form onSubmit={handleSubmit}>
-        <DialogContent className={classes.dialogContent}>
-          <DialogContentText>
-            Enter the name of the plugin and its URL. The name should match what
-            is defined in the plugin&apos;s build.
-          </DialogContentText>
-          <TextField
-            id="umd-name-input"
-            name="umdName"
-            label="Plugin name"
-            variant="outlined"
-            value={umdPluginName}
-            onChange={event => setUMDPluginName(event.target.value)}
-          />
-          <TextField
-            id="umd-url-input"
-            name="umdUrl"
-            label="Plugin URL"
-            variant="outlined"
-            value={umdPluginUrl}
-            onChange={event => setUMDPluginUrl(event.target.value)}
-          />
-          <DialogContentText
-            onClick={() => setAdvancedOptionsOpen(!advancedOptionsOpen)}
-          >
-            <IconButton
-              className={cx(classes.expand, {
-                [classes.expandOpen]: advancedOptionsOpen,
-              })}
-              aria-expanded={advancedOptionsOpen}
-              aria-label="show more"
-            >
-              <ExpandMoreIcon />
-            </IconButton>
-            Advanced options
-          </DialogContentText>
-          <Collapse in={advancedOptionsOpen}>
-            <div className={classes.dialogContent}>
-              <DialogContentText>
-                The above fields assume that the plugin is built in UMD format.
-                If your plugin is in another format, or you have additional
-                builds you want to add (such as a CJS build for using NodeJS
-                APIs in desktop), you can enter the URLs for those builds below.
-              </DialogContentText>
-              <TextField
-                id="esm-url-input"
-                name="esmUrl"
-                label="ESM build URL"
-                variant="outlined"
-                value={esmPluginUrl}
-                onChange={event => setESMPluginUrl(event.target.value)}
-              />
-              <TextField
-                id="cjs-url-input"
-                name="cjsUrl"
-                label="CJS build URL"
-                variant="outlined"
-                value={cjsPluginUrl}
-                onChange={event => setCJSPluginUrl(event.target.value)}
-              />
-            </div>
-          </Collapse>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="contained" onClick={handleClose}>
-            Cancel
-          </Button>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleSubmit}
-            disabled={!ready}
-          >
-            Submit
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  )
-}
-
-export default observer(CustomPluginForm)

package/src/PluginStoreWidget/components/InstalledPlugin.tsx

@@ -1,167 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { getParent } from 'mobx-state-tree'
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogActions,
-  DialogContent,
-  IconButton,
-  ListItem,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-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'
-import {
-  BasePlugin,
-  isSessionWithSessionPlugins,
-} from '@jbrowse/core/util/types'
-import { PluginStoreModel } from '../model'
-
-const useStyles = makeStyles()(() => ({
-  closeDialog: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-  dialogContainer: {
-    margin: 15,
-  },
-  lockedPluginTooltip: {
-    marginRight: '0.5rem',
-  },
-}))
-
-function LockedPlugin() {
-  const { classes } = useStyles()
-  return (
-    <Tooltip
-      className={classes.lockedPluginTooltip}
-      title="This plugin was installed by an administrator, you cannot remove it."
-    >
-      <LockIcon />
-    </Tooltip>
-  )
-}
-
-function PluginDialog({
-  onClose,
-  plugin,
-}: {
-  plugin: string
-  onClose: (s?: string) => void
-}) {
-  const { classes } = useStyles()
-  return (
-    <Dialog open onClose={() => onClose()}>
-      <DialogTitle>
-        <IconButton
-          className={classes.closeDialog}
-          aria-label="close-dialog"
-          onClick={() => onClose()}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
-      <DialogContent>
-        <Typography>
-          Please confirm that you want to remove {plugin}. Note: if any
-          resources in this session still use this plugin, it may cause your
-          session to crash
-        </Typography>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              // avoid showing runtime plugin warning
-              window.setTimeout(() => {
-                onClose(plugin)
-              }, 500)
-            }}
-          >
-            Confirm
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              onClose()
-            }}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function InstalledPlugin({
-  plugin,
-  model,
-  pluginManager,
-}: {
-  plugin: BasePlugin
-  model: PluginStoreModel
-  pluginManager: PluginManager
-}) {
-  const [dialogPlugin, setDialogPlugin] = useState<string>()
-
-  const session = getSession(model)
-  const { sessionPlugins } = session as unknown as {
-    sessionPlugins: BasePlugin[]
-  }
-  const isSessionPlugin = sessionPlugins?.some(
-    p => pluginManager.pluginMetadata[plugin.name].url === p.url,
-  )
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const rootModel = getParent<any>(model, 3)
-  const { jbrowse, adminMode } = rootModel
-
-  return (
-    <>
-      {dialogPlugin ? (
-        <PluginDialog
-          plugin={dialogPlugin}
-          onClose={name => {
-            if (name) {
-              const pluginMetadata = pluginManager.pluginMetadata[plugin.name]
-
-              if (adminMode) {
-                jbrowse.removePlugin(pluginMetadata)
-              } else if (isSessionWithSessionPlugins(session)) {
-                session.removeSessionPlugin(pluginMetadata)
-              }
-            }
-            setDialogPlugin(undefined)
-          }}
-        />
-      ) : null}
-      <ListItem key={plugin.name}>
-        {adminMode || isSessionPlugin ? (
-          <IconButton
-            aria-label="removePlugin"
-            data-testid={`removePlugin-${plugin.name}`}
-            onClick={() => setDialogPlugin(plugin.name)}
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : (
-          <LockedPlugin />
-        )}
-        <Typography>{plugin.name}</Typography>
-      </ListItem>
-    </>
-  )
-}
-
-export default observer(InstalledPlugin)

package/src/PluginStoreWidget/components/InstalledPluginsList.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { List, Typography } from '@mui/material'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { PluginStoreModel } from '../model'
-import InstalledPlugin from './InstalledPlugin'
-
-function InstalledPluginsList({
-  pluginManager,
-  model,
-}: {
-  pluginManager: PluginManager
-  model: PluginStoreModel
-}) {
-  const { plugins } = pluginManager
-
-  const corePlugins = new Set(
-    plugins
-      .filter(p => pluginManager.pluginMetadata[p.name]?.isCore)
-      .map(p => p.name),
-  )
-
-  const externalPlugins = plugins.filter(
-    plugin => !corePlugins.has(plugin.name),
-  )
-
-  return (
-    <List>
-      {externalPlugins.length > 0 ? (
-        externalPlugins
-          .filter(plugin =>
-            plugin.name.toLowerCase().includes(model.filterText.toLowerCase()),
-          )
-          .map(plugin => (
-            <InstalledPlugin
-              key={plugin.name}
-              plugin={plugin}
-              model={model}
-              pluginManager={pluginManager}
-            />
-          ))
-      ) : (
-        <Typography>No plugins currently installed</Typography>
-      )}
-    </List>
-  )
-}
-
-export default observer(InstalledPluginsList)