@jbrowse/plugin-data-management 1.5.0 → 1.5.4

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,29 +1,50 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
+import clsx from 'clsx'
 
-import { makeStyles } from '@material-ui/core/styles'
-import Dialog from '@material-ui/core/Dialog'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import TextField from '@material-ui/core/TextField'
-import Button from '@material-ui/core/Button'
+import {
+  Button,
+  Collapse,
+  Dialog,
+  DialogActions,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  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({
@@ -32,69 +53,156 @@ function CustomPluginForm({
   model,
 }: {
   open: boolean
-  onClose: Function
+  onClose(): void
   model: PluginStoreModel
 }) {
   const classes = useStyles()
-  const [formInput, setFormInput] = useState({
-    name: '',
-    url: '',
-  })
+  const [umdPluginName, setUMDPluginName] = useState('')
+  const [umdPluginUrl, setUMDPluginUrl] = useState('')
+  const [esmPluginUrl, setESMPluginUrl] = useState('')
+  const [cjsPluginUrl, setCJSPluginUrl] = useState('')
+  const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false)
 
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setFormInput({
-      ...formInput,
-      [event.target.name]: event.target.value,
-    })
+  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 handleSubmit = () => {
-    jbrowse.addPlugin({ name: formInput.name, url: formInput.url })
+  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(false)}>
+    <Dialog open={open} onClose={handleClose}>
       <DialogTitle>
+        Add custom plugin
         <IconButton
-          className={classes.closeDialog}
-          aria-label="close-dialog"
-          onClick={() => onClose(false)}
+          size="medium"
+          className={classes.closeButton}
+          onClick={() => onClose()}
         >
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-
-      <div className={classes.dialogContainer}>
-        <TextField
-          id="name-input"
-          name="name"
-          label="Plugin name"
-          variant="outlined"
-          value={formInput.name}
-          onChange={handleChange}
-          multiline
-        />
-        <TextField
-          id="url-input"
-          name="url"
-          label="Plugin URL"
-          variant="outlined"
-          value={formInput.url}
-          onChange={handleChange}
-          multiline
-        />
-        <Button
-          variant="contained"
-          color="primary"
-          style={{ marginTop: '1.5rem' }}
-          onClick={handleSubmit}
-        >
-          Add plugin
-        </Button>
-      </div>
+      <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="umd-name-input"
+            name="umdName"
+            label="Plugin name"
+            variant="outlined"
+            value={umdPluginName}
+            onChange={handleChange}
+          />
+          <TextField
+            id="umd-url-input"
+            name="umdUrl"
+            label="Plugin URL"
+            variant="outlined"
+            value={umdPluginUrl}
+            onChange={handleChange}
+          />
+          <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'
@@ -33,12 +32,16 @@ const useStyles = makeStyles(() => ({
   dialogContainer: {
     margin: 15,
   },
+  lockedPluginTooltip: {
+    marginRight: '0.5rem',
+  },
 }))
 
 function LockedPlugin() {
+  const classes = useStyles()
   return (
     <Tooltip
-      style={{ marginRight: '0.5rem' }}
+      className={classes.lockedPluginTooltip}
       title="This plugin was installed by an administrator, you cannot remove it."
     >
       <LockIcon />
@@ -67,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
@@ -109,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)
@@ -127,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/PluginCard.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
 import { observer } from 'mobx-react'
 import { getEnv, getParent } from 'mobx-state-tree'
-
-import { makeStyles } from '@material-ui/core/styles'
+import { getSession } from '@jbrowse/core/util'
+import { JBrowsePlugin } from '@jbrowse/core/util/types'
+import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types'
 import {
   Card,
   CardActions,
@@ -10,18 +12,14 @@ import {
   Button,
   Link,
   Typography,
+  makeStyles,
 } from '@material-ui/core'
 
+// icons
 import PersonIcon from '@material-ui/icons/Person'
 import AddIcon from '@material-ui/icons/Add'
 import CheckIcon from '@material-ui/icons/Check'
-
-import PluginManager from '@jbrowse/core/PluginManager'
-import { getSession } from '@jbrowse/core/util'
-import type { JBrowsePlugin } from '@jbrowse/core/util/types'
-import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types'
-
-import type { PluginStoreModel } from '../model'
+import { PluginStoreModel } from '../model'
 
 const useStyles = makeStyles(() => ({
   card: {

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

@@ -65,18 +65,18 @@ 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('Add plugin'))
+    fireEvent.click(getByText('Submit'))
 
     await waitFor(() => {
       expect(window.location.reload).toHaveBeenCalled()
@@ -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

@@ -13,29 +13,27 @@ import {
   makeStyles,
 } from '@material-ui/core'
 
+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 type { JBrowsePlugin } from '@jbrowse/core/util/types'
-
-import { getSession, isElectron } from '@jbrowse/core/util'
+// locals
 import InstalledPluginsList from './InstalledPluginsList'
 import PluginCard from './PluginCard'
 import CustomPluginForm from './CustomPluginForm'
-
 import { PluginStoreModel } from '../model'
 
 const useStyles = makeStyles(theme => ({
-  accordion: {
-    marginTop: '1em',
+  root: {
+    margin: theme.spacing(1),
   },
   expandIcon: {
     color: '#fff',
   },
-  searchBox: {
-    marginBottom: theme.spacing(2),
-  },
   adminBadge: {
     margin: '0.5em',
     borderRadius: 3,
@@ -54,25 +52,30 @@ const useStyles = makeStyles(theme => ({
 
 function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
   const classes = useStyles()
-  const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>([])
+  const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>()
   const [error, setError] = useState<unknown>()
   const [customPluginFormOpen, setCustomPluginFormOpen] = useState(false)
   const { adminMode } = getSession(model)
   const { pluginManager } = getEnv(model)
 
   useEffect(() => {
-    let killed = false
+    const controller = new AbortController()
+    const { signal } = controller
 
     ;(async () => {
       try {
-        const fetchResult = await fetch(
+        const response = await fetch(
           'https://jbrowse.org/plugin-store/plugins.json',
+          { signal },
         )
-        if (!fetchResult.ok) {
-          throw new Error('Failed to fetch plugin data')
+        if (!response.ok) {
+          const err = await response.text()
+          throw new Error(
+            `Failed to fetch plugin data: ${response.status} ${response.statusText} ${err}`,
+          )
         }
-        const array = await fetchResult.json()
-        if (!killed) {
+        const array = await response.json()
+        if (!signal.aborted) {
           setPluginArray(array.plugins)
         }
       } catch (e) {
@@ -82,12 +85,12 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
     })()
 
     return () => {
-      killed = true
+      controller.abort()
     }
   }, [])
 
   return (
-    <div>
+    <div className={classes.root}>
       {adminMode && (
         <>
           {!isElectron && (
@@ -111,13 +114,12 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
           </div>
           <CustomPluginForm
             open={customPluginFormOpen}
-            onClose={setCustomPluginFormOpen}
+            onClose={() => setCustomPluginFormOpen(false)}
             model={model}
           />
         </>
       )}
       <TextField
-        className={classes.searchBox}
         label="Filter plugins"
         value={model.filterText}
         onChange={event => model.setFilterText(event.target.value)}
@@ -153,13 +155,20 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
         </AccordionSummary>
         {error ? (
           <Typography color="error">{`${error}`}</Typography>
-        ) : pluginArray.length ? (
+        ) : 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}