@jbrowse/plugin-data-management 1.5.1 → 1.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-data-management",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "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": "94fdfbc34787ab8f12a87e00038da74b247b42fa"
 }

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

@@ -131,7 +131,11 @@ function InstalledPlugin({
           onClose={name => {
             if (name) {
               const pluginMetadata = pluginManager.pluginMetadata[plugin.name]
-              const pluginUrl = pluginMetadata.url
+              const pluginUrl =
+                pluginMetadata.url ||
+                pluginMetadata.esmUrl ||
+                pluginMetadata.umdUrl ||
+                pluginMetadata.cjsUrl
               if (adminMode) {
                 jbrowse.removePlugin(pluginUrl)
               } else if (isSessionWithSessionPlugins(session)) {

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"
                 >