@jbrowse/plugin-data-management 1.4.1 → 1.5.2

package/src/HierarchicalTrackSelectorWidget/components/HierarchicalTrackSelector.js

@@ -17,6 +17,7 @@ import {
   Menu,
   MenuItem,
   TextField,
+  Tooltip,
   Typography,
   makeStyles,
 } from '@material-ui/core'
@@ -114,6 +115,7 @@ const Node = props => {
     toggleCollapse,
     conf,
     onMoreInfo,
+    drawerPosition,
   } = data
 
   const classes = useStyles()
@@ -121,6 +123,7 @@ const Node = props => {
   const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
   const unsupported =
     name && (name.endsWith('(Unsupported)') || name.endsWith('(Unknown)'))
+  const description = (conf && readConfObject(conf, ['description'])) || ''
 
   return (
     <div style={style} className={!isLeaf ? classes.accordionBase : undefined}>
@@ -153,22 +156,27 @@ const Node = props => {
             </div>
           ) : (
             <>
-              <FormControlLabel
-                className={classes.checkboxLabel}
-                control={
-                  <Checkbox
-                    className={classes.compactCheckbox}
-                    checked={checked}
-                    onChange={() => onChange(id)}
-                    color="primary"
-                    disabled={unsupported}
-                    inputProps={{
-                      'data-testid': `htsTrackEntry-${id}`,
-                    }}
-                  />
-                }
-                label={name}
-              />
+              <Tooltip
+                title={description}
+                placement={drawerPosition === 'left' ? 'right' : 'left'}
+              >
+                <FormControlLabel
+                  className={classes.checkboxLabel}
+                  control={
+                    <Checkbox
+                      className={classes.compactCheckbox}
+                      checked={checked}
+                      onChange={() => onChange(id)}
+                      color="primary"
+                      disabled={unsupported}
+                      inputProps={{
+                        'data-testid': `htsTrackEntry-${id}`,
+                      }}
+                    />
+                  }
+                  label={name}
+                />
+              </Tooltip>
               <IconButton
                 onClick={e => onMoreInfo({ target: e.currentTarget, id, conf })}
                 color="secondary"
@@ -208,14 +216,16 @@ const HierarchicalTree = observer(({ height, tree, model }) => {
   const treeRef = useRef(null)
   const [info, setMoreInfo] = useState()
   const session = getSession(model)
+  const { drawerPosition } = session
 
   const extra = useMemo(
     () => ({
       onChange: trackId => view.toggleTrack(trackId),
       toggleCollapse: pathName => model.toggleCategory(pathName),
       onMoreInfo: setMoreInfo,
+      drawerPosition,
     }),
-    [view, model],
+    [view, model, drawerPosition],
   )
   const treeWalker = useCallback(
     function* treeWalker() {

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

@@ -33,12 +33,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 />
@@ -127,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/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

@@ -12,8 +12,7 @@ const plugins = {
       authors: ['Colin Diesh'],
       description: 'multiple sequence alignment browser plugin for JBrowse 2',
       location: 'https://github.com/GMOD/jbrowse-plugin-msaview',
-      url:
-        'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
+      url: 'https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js',
       license: 'Apache License 2.0',
       image:
         'https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/msaview-screenshot-fs8.png',
@@ -66,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()
@@ -86,8 +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,39 +52,45 @@ const useStyles = makeStyles(theme => ({
 
 function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
   const classes = useStyles()
-  const [pluginArray, setPluginArray] = useState<JBrowsePlugin[]>([])
-  const [error, setError] = useState<Error>()
+  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) {
+        console.error(e)
         setError(e)
       }
     })()
 
     return () => {
-      killed = true
+      controller.abort()
     }
   }, [])
 
   return (
-    <div>
+    <div className={classes.root}>
       {adminMode && (
         <>
           {!isElectron && (
@@ -110,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)}
@@ -152,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}