@jbrowse/plugin-data-management 1.5.1 → 1.5.2

package/dist/plugin-data-management.esm.js

@@ -10,7 +10,7 @@ import { openLocation } from '@jbrowse/core/util/io';
 import { generateUnknownTrackConf, generateUnsupportedTrackConf, guessAdapter, getFileName, UNSUPPORTED, guessTrackType, UNKNOWN } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 import { observer, PropTypes } from 'mobx-react';
-import { ListItem, IconButton, Typography, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, List, Card, CardContent, Link, CardActions, makeStyles as makeStyles$1, TextField, InputAdornment, Accordion, AccordionSummary, TableRow, TableCell, TableContainer, Paper, Table, TableHead, TableBody, Grid, MenuItem, Fab, Menu, FormControlLabel, Checkbox, ListSubheader, Stepper, Step, StepLabel, StepContent, DialogContentText } from '@material-ui/core';
+import { ListItem, IconButton, Typography, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, List, Card, CardContent, Link, CardActions, makeStyles as makeStyles$1, DialogContentText, TextField, Collapse, InputAdornment, Accordion, AccordionSummary, TableRow, TableCell, TableContainer, Paper, Table, TableHead, TableBody, Grid, MenuItem, Fab, Menu, FormControlLabel, Checkbox, ListSubheader, Stepper, Step, StepLabel, StepContent } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ClearIcon from '@material-ui/icons/Clear';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
@@ -21,6 +21,7 @@ import { isSessionWithSessionPlugins } from '@jbrowse/core/util/types';
 import PersonIcon from '@material-ui/icons/Person';
 import AddIcon from '@material-ui/icons/Add';
 import CheckIcon from '@material-ui/icons/Check';
+import clsx from 'clsx';
 import IconButton$1 from '@material-ui/core/IconButton';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import CreateIcon from '@material-ui/icons/Create';
@@ -1773,7 +1774,8 @@ function f(pluginManager) {
 
         var track = self.trackData,
             index = self.indexTrackData;
-        return !!(index !== null && index !== void 0 && (_index$uri = index.uri) !== null && _index$uri !== void 0 && _index$uri.startsWith('ftp://') || track !== null && track !== void 0 && (_track$uri = track.uri) !== null && _track$uri !== void 0 && _track$uri.startsWith('ftp://'));
+        return !!( // @ts-ignore
+        index !== null && index !== void 0 && (_index$uri = index.uri) !== null && _index$uri !== void 0 && _index$uri.startsWith('ftp://') || track !== null && track !== void 0 && (_track$uri = track.uri) !== null && _track$uri !== void 0 && _track$uri.startsWith('ftp://'));
       },
 
       get isRelativeTrackUrl() {
@@ -1869,9 +1871,9 @@ var hasAnyOverlap = function hasAnyOverlap() {
 function passesFilter(filter, config) {
   var name = getTrackName(config);
   var categories = readConfObject(config, 'category') || [];
-  var regexp = new RegExp(filter, 'i');
-  return !!name.match(regexp) || categories.filter(function (cat) {
-    return !!cat.match(regexp);
+  var filterLower = filter.toLowerCase();
+  return !!name.toLowerCase().includes(filterLower) || categories.filter(function (cat) {
+    return !!cat.toLowerCase().includes(filterLower);
   }).length;
 }
 
@@ -2218,7 +2220,7 @@ function InstalledPlugin(_ref2) {
     onClose: function onClose(name) {
       if (name) {
         var pluginMetadata = pluginManager.pluginMetadata[plugin.name];
-        var pluginUrl = pluginMetadata.url;
+        var pluginUrl = pluginMetadata.url || pluginMetadata.esmUrl || pluginMetadata.umdUrl || pluginMetadata.cjsUrl;
 
         if (adminMode) {
           jbrowse.removePlugin(pluginUrl);
@@ -2354,87 +2356,182 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$2 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
-    closeDialog: {
+    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(_ref) {
   var open = _ref.open,
-      _onClose = _ref.onClose,
+      onClose = _ref.onClose,
       model = _ref.model;
   var classes = useStyles$2();
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      formName = _useState2[0],
-      setFormName = _useState2[1];
+      umdPluginName = _useState2[0],
+      setUMDPluginName = _useState2[1];
 
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      formUrl = _useState4[0],
-      setFormUrl = _useState4[1];
+      umdPluginUrl = _useState4[0],
+      setUMDPluginUrl = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      esmPluginUrl = _useState6[0],
+      setESMPluginUrl = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      cjsPluginUrl = _useState8[0],
+      setCJSPluginUrl = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      advancedOptionsOpen = _useState10[0],
+      setAdvancedOptionsOpen = _useState10[1];
+
+  function handleChange(event) {
+    var _event$target = event.target,
+        name = _event$target.name,
+        value = _event$target.value;
+
+    if (name === 'umdName') {
+      setUMDPluginName(value);
+    }
+
+    if (name === 'umdUrl') {
+      setUMDPluginUrl(value);
+    }
+
+    if (name === 'esmUrl') {
+      setESMPluginUrl(value);
+    }
+
+    if (name === 'cjsUrl') {
+      setCJSPluginUrl(value);
+    }
+  }
+
+  function handleOpenAdvancedOptions() {
+    setAdvancedOptionsOpen(!advancedOptionsOpen);
+  }
 
   var rootModel = getRoot(model);
   var jbrowse = rootModel.jbrowse;
+  var ready = Boolean(umdPluginName && umdPluginUrl || esmPluginUrl || cjsPluginUrl);
+
+  function handleSubmit() {
+    if (!ready) {
+      return;
+    }
+
+    var 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 /*#__PURE__*/React.createElement(Dialog, {
     open: open,
-    onClose: function onClose() {
-      return _onClose();
-    }
+    onClose: handleClose
   }, /*#__PURE__*/React.createElement(DialogTitle, null, "Add custom plugin", /*#__PURE__*/React.createElement(IconButton$1, {
-    className: classes.closeDialog,
+    size: "medium",
+    className: classes.closeButton,
     onClick: function onClick() {
-      return _onClose();
+      return onClose();
     }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogContainer
-  }, /*#__PURE__*/React.createElement(Typography, null, "Specify the name and URL path of your plugin source"), /*#__PURE__*/React.createElement(TextField, {
-    id: "name-input",
-    name: "name",
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/React.createElement(DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(DialogContentText, null, "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build."), /*#__PURE__*/React.createElement(TextField, {
+    id: "umd-name-input",
+    name: "umdName",
     label: "Plugin name",
     variant: "outlined",
-    value: formName,
-    onChange: function onChange(event) {
-      return setFormName(event.target.value);
-    }
+    value: umdPluginName,
+    onChange: handleChange
   }), /*#__PURE__*/React.createElement(TextField, {
-    id: "url-input",
-    name: "url",
+    id: "umd-url-input",
+    name: "umdUrl",
     label: "Plugin URL",
     variant: "outlined",
-    value: formUrl,
-    onChange: function onChange(event) {
-      return setFormUrl(event.target.value);
-    }
-  }))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    value: umdPluginUrl,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement(DialogContentText, {
+    onClick: handleOpenAdvancedOptions
+  }, /*#__PURE__*/React.createElement(IconButton$1, {
+    className: clsx(classes.expand, _defineProperty({}, classes.expandOpen, advancedOptionsOpen)),
+    "aria-expanded": advancedOptionsOpen,
+    "aria-label": "show more"
+  }, /*#__PURE__*/React.createElement(ExpandMoreIcon, null)), "Advanced options"), /*#__PURE__*/React.createElement(Collapse, {
+    "in": advancedOptionsOpen
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React.createElement(DialogContentText, null, "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."), /*#__PURE__*/React.createElement(TextField, {
+    id: "esm-url-input",
+    name: "esmUrl",
+    label: "ESM build URL",
+    variant: "outlined",
+    value: esmPluginUrl,
+    onChange: handleChange
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "cjs-url-input",
+    name: "cjsUrl",
+    label: "CJS build URL",
+    variant: "outlined",
+    value: cjsPluginUrl,
+    onChange: handleChange
+  })))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
-    color: "secondary",
-    onClick: function onClick() {
-      return _onClose();
-    }
+    onClick: handleClose
   }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
-    onClick: function onClick() {
-      jbrowse.addPlugin({
-        name: formName,
-        url: formUrl
-      });
-
-      _onClose();
-    }
-  }, "Submit")));
+    onClick: handleSubmit,
+    disabled: !ready
+  }, "Submit"))));
 }
 
 var CustomPluginForm$1 = /*#__PURE__*/observer(CustomPluginForm);
@@ -2490,7 +2587,8 @@ function PluginStoreWidget(_ref) {
       pluginManager = _getEnv.pluginManager;
 
   useEffect(function () {
-    var killed = false;
+    var controller = new AbortController();
+    var signal = controller.signal;
 
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var response, err, array;
@@ -2500,7 +2598,9 @@ function PluginStoreWidget(_ref) {
             case 0:
               _context.prev = 0;
               _context.next = 3;
-              return fetch('https://jbrowse.org/plugin-store/plugins.json');
+              return fetch('https://jbrowse.org/plugin-store/plugins.json', {
+                signal: signal
+              });
 
             case 3:
               response = _context.sent;
@@ -2524,7 +2624,7 @@ function PluginStoreWidget(_ref) {
             case 11:
               array = _context.sent;
 
-              if (!killed) {
+              if (!signal.aborted) {
                 setPluginArray(array.plugins);
               }
 
@@ -2546,7 +2646,7 @@ function PluginStoreWidget(_ref) {
     }))();
 
     return function () {
-      killed = true;
+      controller.abort();
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -2614,6 +2714,11 @@ function PluginStoreWidget(_ref) {
   }, "Available plugins")), error ? /*#__PURE__*/React.createElement(Typography, {
     color: "error"
   }, "".concat(error)) : pluginArray ? pluginArray.filter(function (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());
   }).map(function (plugin) {
     return /*#__PURE__*/React.createElement(PluginCard$1, {