@jbrowse/plugin-data-management 1.5.1 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "1.5.1",
+  "version": "1.5.5",
   "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": "284e408c72a3d4d7a0d603197501a8fc8f68c4bc"
+  "gitHead": "214a3bed2d2722f0971c0d0eed37c8d801f086d7"
 }

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
   )
 }
 

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,36 +1,50 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
+import clsx from 'clsx'
 
 import {
   Button,
+  Collapse,
   Dialog,
   DialogActions,
   DialogTitle,
   DialogContent,
+  DialogContentText,
   TextField,
-  Typography,
   makeStyles,
 } from '@material-ui/core'
 
 // 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'
 
 // locals
 import { PluginStoreModel } from '../model'
 
-const useStyles = makeStyles(() => ({
-  closeDialog: {
+const useStyles = makeStyles(theme => ({
+  closeButton: {
     position: 'absolute',
-    right: 0,
-    top: 0,
+    right: theme.spacing(1),
+    top: theme.spacing(1),
   },
-  dialogContainer: {
-    margin: 15,
+  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({
@@ -39,62 +53,156 @@ function CustomPluginForm({
   model,
 }: {
   open: boolean
-  onClose: () => void
+  onClose(): void
   model: PluginStoreModel
 }) {
   const classes = useStyles()
-  const [formName, setFormName] = useState('')
-  const [formUrl, setFormUrl] = useState('')
+  const [umdPluginName, setUMDPluginName] = useState('')
+  const [umdPluginUrl, setUMDPluginUrl] = useState('')
+  const [esmPluginUrl, setESMPluginUrl] = useState('')
+  const [cjsPluginUrl, setCJSPluginUrl] = useState('')
+  const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false)
+
+  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const { name, value } = event.target
+    if (name === 'umdName') {
+      setUMDPluginName(value)
+    }
+    if (name === 'umdUrl') {
+      setUMDPluginUrl(value)
+    }
+    if (name === 'esmUrl') {
+      setESMPluginUrl(value)
+    }
+    if (name === 'cjsUrl') {
+      setCJSPluginUrl(value)
+    }
+  }
+
+  function handleOpenAdvancedOptions() {
+    setAdvancedOptionsOpen(!advancedOptionsOpen)
+  }
+
   const rootModel = getRoot(model)
   const { jbrowse } = rootModel
 
+  const ready = Boolean(
+    (umdPluginName && umdPluginUrl) || esmPluginUrl || cjsPluginUrl,
+  )
+
+  function handleSubmit() {
+    if (!ready) {
+      return
+    }
+    const pluginDefinition: PluginDefinition = {}
+    if (umdPluginName && umdPluginUrl) {
+      pluginDefinition.name = umdPluginName
+      pluginDefinition.umdUrl = umdPluginUrl
+    }
+    if (esmPluginUrl) {
+      pluginDefinition.esmUrl = esmPluginUrl
+    }
+    if (cjsPluginUrl) {
+      pluginDefinition.cjsUrl = cjsPluginUrl
+    }
+    jbrowse.addPlugin(pluginDefinition)
+  }
+
+  function handleClose() {
+    setUMDPluginName('')
+    setUMDPluginUrl('')
+    setESMPluginUrl('')
+    setCJSPluginUrl('')
+    onClose()
+  }
+
   return (
-    <Dialog open={open} onClose={() => onClose()}>
+    <Dialog open={open} onClose={handleClose}>
       <DialogTitle>
         Add custom plugin
-        <IconButton className={classes.closeDialog} onClick={() => onClose()}>
+        <IconButton
+          size="medium"
+          className={classes.closeButton}
+          onClick={() => onClose()}
+        >
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-
-      <DialogContent>
-        <div className={classes.dialogContainer}>
-          <Typography>
-            Specify the name and URL path of your plugin source
-          </Typography>
+      <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's build.
+          </DialogContentText>
           <TextField
-            id="name-input"
-            name="name"
+            id="umd-name-input"
+            name="umdName"
             label="Plugin name"
             variant="outlined"
-            value={formName}
-            onChange={event => setFormName(event.target.value)}
+            value={umdPluginName}
+            onChange={handleChange}
           />
           <TextField
-            id="url-input"
-            name="url"
+            id="umd-url-input"
+            name="umdUrl"
             label="Plugin URL"
             variant="outlined"
-            value={formUrl}
-            onChange={event => setFormUrl(event.target.value)}
+            value={umdPluginUrl}
+            onChange={handleChange}
           />
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            jbrowse.addPlugin({ name: formName, url: formUrl })
-            onClose()
-          }}
-        >
-          Submit
-        </Button>
-      </DialogActions>
+          <DialogContentText onClick={handleOpenAdvancedOptions}>
+            <IconButton
+              className={clsx(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={handleChange}
+              />
+              <TextField
+                id="cjs-url-input"
+                name="cjsUrl"
+                label="CJS build URL"
+                variant="outlined"
+                value={cjsPluginUrl}
+                onChange={handleChange}
+              />
+            </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>
   )
 }

package/src/PluginStoreWidget/components/InstalledPlugin.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
-
-import { makeStyles } from '@material-ui/core/styles'
 import {
   Button,
   Dialog,
@@ -13,6 +11,7 @@ import {
   ListItem,
   Tooltip,
   Typography,
+  makeStyles,
 } from '@material-ui/core'
 
 import CloseIcon from '@material-ui/icons/Close'
@@ -71,7 +70,9 @@ function PluginDialog({
       </DialogTitle>
       <DialogContent>
         <Typography>
-          Please confirm that you want to remove {plugin}:
+          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
@@ -113,11 +114,11 @@ function InstalledPlugin({
   const [dialogPlugin, setDialogPlugin] = useState<string>()
 
   const session = getSession(model)
-
-  // @ts-ignore
-  const { sessionPlugins } = session
+  const { sessionPlugins } = session as unknown as {
+    sessionPlugins: BasePlugin[]
+  }
   const isSessionPlugin = sessionPlugins?.some(
-    (p: BasePlugin) => pluginManager.pluginMetadata[plugin.name].url === p.url,
+    p => pluginManager.pluginMetadata[plugin.name].url === p.url,
   )
 
   const rootModel = getParent(model, 3)
@@ -131,11 +132,11 @@ function InstalledPlugin({
           onClose={name => {
             if (name) {
               const pluginMetadata = pluginManager.pluginMetadata[plugin.name]
-              const pluginUrl = pluginMetadata.url
+
               if (adminMode) {
-                jbrowse.removePlugin(pluginUrl)
+                jbrowse.removePlugin(pluginMetadata)
               } else if (isSessionWithSessionPlugins(session)) {
-                session.removeSessionPlugin(pluginUrl)
+                session.removeSessionPlugin(pluginMetadata)
               }
             }
             setDialogPlugin(undefined)

package/src/PluginStoreWidget/components/PluginStoreWidget.test.js

@@ -65,15 +65,15 @@ describe('<PluginStoreWidget />', () => {
     )
     await findByText('multiple sequence alignment browser plugin for JBrowse 2')
     fireEvent.click(getByText('Add custom plugin'))
-    fireEvent.change(getByLabelText('Plugin name'), {
+    fireEvent.change(getByLabelText('Plugin URL'), {
       target: {
-        value: 'MsaView',
+        value:
+          'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
       },
     })
-    fireEvent.change(getByLabelText('Plugin URL'), {
+    fireEvent.change(getByLabelText('Plugin name'), {
       target: {
-        value:
-          'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
+        value: 'MsaView',
       },
     })
     fireEvent.click(getByText('Submit'))
@@ -85,7 +85,8 @@ describe('<PluginStoreWidget />', () => {
     expect(getSnapshot(getParent(session)).jbrowse.plugins).toEqual([
       {
         name: 'MsaView',
-        url: 'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
+        umdUrl:
+          'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.esm.js',
       },
     ])
   })

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -59,12 +59,14 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
   const { pluginManager } = getEnv(model)
 
   useEffect(() => {
-    let killed = false
+    const controller = new AbortController()
+    const { signal } = controller
 
     ;(async () => {
       try {
         const response = await fetch(
           'https://jbrowse.org/plugin-store/plugins.json',
+          { signal },
         )
         if (!response.ok) {
           const err = await response.text()
@@ -73,7 +75,7 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
           )
         }
         const array = await response.json()
-        if (!killed) {
+        if (!signal.aborted) {
           setPluginArray(array.plugins)
         }
       } catch (e) {
@@ -83,7 +85,7 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
     })()
 
     return () => {
-      killed = true
+      controller.abort()
     }
   }, [])
 
@@ -155,11 +157,18 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
           <Typography color="error">{`${error}`}</Typography>
         ) : pluginArray ? (
           pluginArray
-            .filter(plugin =>
-              plugin.name
+            .filter(plugin => {
+              // If pugin only has cjsUrl, don't display outside desktop
+              if (
+                !isElectron &&
+                !(plugin.esmUrl || plugin.url || plugin.umdUrl)
+              ) {
+                return false
+              }
+              return plugin.name
                 .toLowerCase()
-                .includes(model.filterText.toLowerCase()),
-            )
+                .includes(model.filterText.toLowerCase())
+            })
             .map(plugin => (
               <PluginCard
                 key={(plugin as JBrowsePlugin).name}

package/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.js.snap

@@ -393,6 +393,26 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
                     LollipopPlugin
                   </p>
                 </li>
+                <li
+                  class="MuiListItem-root MuiListItem-gutters"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root makeStyles-lockedPluginTooltip"
+                    focusable="false"
+                    title="This plugin was installed by an administrator, you cannot remove it."
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+                    />
+                  </svg>
+                  <p
+                    class="MuiTypography-root MuiTypography-body1"
+                  >
+                    ArcRenderer
+                  </p>
+                </li>
                 <li
                   class="MuiListItem-root MuiListItem-gutters"
                 >