@jbrowse/plugin-data-management 1.5.1 → 1.5.2

package/dist/PluginStoreWidget/components/CustomPluginForm.d.ts

@@ -2,7 +2,7 @@
 import { PluginStoreModel } from '../model';
 declare function CustomPluginForm({ open, onClose, model, }: {
     open: boolean;
-    onClose: () => void;
+    onClose(): void;
     model: PluginStoreModel;
 }): JSX.Element;
 declare const _default: typeof CustomPluginForm;

package/dist/plugin-data-management.cjs.development.js

@@ -47,6 +47,7 @@ var types = require('@jbrowse/core/util/types');
 var PersonIcon = _interopDefault(require('@material-ui/icons/Person'));
 var AddIcon = _interopDefault(require('@material-ui/icons/Add'));
 var CheckIcon = _interopDefault(require('@material-ui/icons/Check'));
+var clsx = _interopDefault(require('clsx'));
 var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
 var ArrowBackIosIcon = _interopDefault(require('@material-ui/icons/ArrowBackIos'));
 var CreateIcon = _interopDefault(require('@material-ui/icons/Create'));
@@ -1799,7 +1800,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() {
@@ -1895,9 +1897,9 @@ var hasAnyOverlap = function hasAnyOverlap() {
 function passesFilter(filter, config) {
   var name = getTrackName(config);
   var categories = configuration.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;
 }
 
@@ -2244,7 +2246,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);
@@ -2380,87 +2382,182 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/mobxReact.observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/core.makeStyles(function () {
+var useStyles$2 = /*#__PURE__*/core.makeStyles(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 = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      formName = _useState2[0],
-      setFormName = _useState2[1];
+      umdPluginName = _useState2[0],
+      setUMDPluginName = _useState2[1];
 
   var _useState3 = React.useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      formUrl = _useState4[0],
-      setFormUrl = _useState4[1];
+      umdPluginUrl = _useState4[0],
+      setUMDPluginUrl = _useState4[1];
+
+  var _useState5 = React.useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      esmPluginUrl = _useState6[0],
+      setESMPluginUrl = _useState6[1];
+
+  var _useState7 = React.useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      cjsPluginUrl = _useState8[0],
+      setCJSPluginUrl = _useState8[1];
+
+  var _useState9 = React.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 = mobxStateTree.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__default.createElement(core.Dialog, {
     open: open,
-    onClose: function onClose() {
-      return _onClose();
-    }
+    onClose: handleClose
   }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Add custom plugin", /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.closeDialog,
+    size: "medium",
+    className: classes.closeButton,
     onClick: function onClick() {
-      return _onClose();
+      return onClose();
     }
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.dialogContainer
-  }, /*#__PURE__*/React__default.createElement(core.Typography, null, "Specify the name and URL path of your plugin source"), /*#__PURE__*/React__default.createElement(core.TextField, {
-    id: "name-input",
-    name: "name",
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/React__default.createElement(core.DialogContent, {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React__default.createElement(core.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__default.createElement(core.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__default.createElement(core.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__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
+    value: umdPluginUrl,
+    onChange: handleChange
+  }), /*#__PURE__*/React__default.createElement(core.DialogContentText, {
+    onClick: handleOpenAdvancedOptions
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: clsx(classes.expand, _defineProperty({}, classes.expandOpen, advancedOptionsOpen)),
+    "aria-expanded": advancedOptionsOpen,
+    "aria-label": "show more"
+  }, /*#__PURE__*/React__default.createElement(ExpandMoreIcon, null)), "Advanced options"), /*#__PURE__*/React__default.createElement(core.Collapse, {
+    "in": advancedOptionsOpen
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: classes.dialogContent
+  }, /*#__PURE__*/React__default.createElement(core.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__default.createElement(core.TextField, {
+    id: "esm-url-input",
+    name: "esmUrl",
+    label: "ESM build URL",
+    variant: "outlined",
+    value: esmPluginUrl,
+    onChange: handleChange
+  }), /*#__PURE__*/React__default.createElement(core.TextField, {
+    id: "cjs-url-input",
+    name: "cjsUrl",
+    label: "CJS build URL",
+    variant: "outlined",
+    value: cjsPluginUrl,
+    onChange: handleChange
+  })))), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
-    color: "secondary",
-    onClick: function onClick() {
-      return _onClose();
-    }
+    onClick: handleClose
   }, "Cancel"), /*#__PURE__*/React__default.createElement(core.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__*/mobxReact.observer(CustomPluginForm);
@@ -2516,7 +2613,8 @@ function PluginStoreWidget(_ref) {
       pluginManager = _getEnv.pluginManager;
 
   React.useEffect(function () {
-    var killed = false;
+    var controller = new AbortController();
+    var signal = controller.signal;
 
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var response, err, array;
@@ -2526,7 +2624,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;
@@ -2550,7 +2650,7 @@ function PluginStoreWidget(_ref) {
             case 11:
               array = _context.sent;
 
-              if (!killed) {
+              if (!signal.aborted) {
                 setPluginArray(array.plugins);
               }
 
@@ -2572,7 +2672,7 @@ function PluginStoreWidget(_ref) {
     }))();
 
     return function () {
-      killed = true;
+      controller.abort();
     };
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -2640,6 +2740,11 @@ function PluginStoreWidget(_ref) {
   }, "Available plugins")), error ? /*#__PURE__*/React__default.createElement(core.Typography, {
     color: "error"
   }, "".concat(error)) : pluginArray ? pluginArray.filter(function (plugin) {
+    // If pugin only has cjsUrl, don't display outside desktop
+    if (!util.isElectron && !(plugin.esmUrl || plugin.url || plugin.umdUrl)) {
+      return false;
+    }
+
     return plugin.name.toLowerCase().includes(model.filterText.toLowerCase());
   }).map(function (plugin) {
     return /*#__PURE__*/React__default.createElement(PluginCard$1, {