@jbrowse/plugin-data-management 1.5.1 → 1.5.5

package/dist/AssemblyManager/AssemblyTable.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema';
 declare const AssemblyTable: ({ rootModel, setIsAssemblyBeingEdited, setAssemblyBeingEdited, }: {
-    rootModel: any;
+    rootModel: {
+        jbrowse: {
+            removeAssemblyConf: (arg: string) => void;
+            assemblies: AnyConfigurationModel[];
+        };
+    };
     setIsAssemblyBeingEdited(arg: boolean): void;
-    setAssemblyBeingEdited(arg: any): void;
+    setAssemblyBeingEdited(arg: AnyConfigurationModel): void;
 }) => JSX.Element;
 export default AssemblyTable;

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

@@ -40,14 +40,15 @@ var core = require('@material-ui/core');
 var ExpandMoreIcon = _interopDefault(require('@material-ui/icons/ExpandMore'));
 var ClearIcon = _interopDefault(require('@material-ui/icons/Clear'));
 var InfoOutlinedIcon = _interopDefault(require('@material-ui/icons/InfoOutlined'));
-var styles = require('@material-ui/core/styles');
 var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
 var LockIcon = _interopDefault(require('@material-ui/icons/Lock'));
 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 styles = require('@material-ui/core/styles');
 var ArrowBackIosIcon = _interopDefault(require('@material-ui/icons/ArrowBackIos'));
 var CreateIcon = _interopDefault(require('@material-ui/icons/Create'));
 var DeleteIcon = _interopDefault(require('@material-ui/icons/Delete'));
@@ -78,14 +79,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -93,19 +89,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -114,17 +103,11 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -182,6 +165,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -205,12 +191,15 @@ function _inherits(subClass, superClass) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
+  Object.defineProperty(subClass, "prototype", {
+    value: Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    }),
+    writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
@@ -1799,7 +1788,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 +1885,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;
 }
 
@@ -2163,7 +2153,7 @@ var HierarchicalTrackSelectorStateModelFactory = (function (pluginManager) {
 
 var configSchema$2 = /*#__PURE__*/configuration.ConfigurationSchema('HierarchicalTrackSelectorWidget', {});
 
-var useStyles = /*#__PURE__*/styles.makeStyles(function () {
+var useStyles = /*#__PURE__*/core.makeStyles(function () {
   return {
     closeDialog: {
       position: 'absolute',
@@ -2202,7 +2192,7 @@ function PluginDialog(_ref) {
     onClick: function onClick() {
       return _onClose();
     }
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Please confirm that you want to remove ", plugin, ":"), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "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"), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
     onClick: function onClick() {
@@ -2230,8 +2220,7 @@ function InstalledPlugin(_ref2) {
       dialogPlugin = _useState2[0],
       setDialogPlugin = _useState2[1];
 
-  var session = util.getSession(model); // @ts-ignore
-
+  var session = util.getSession(model);
   var sessionPlugins = session.sessionPlugins;
   var isSessionPlugin = sessionPlugins === null || sessionPlugins === void 0 ? void 0 : sessionPlugins.some(function (p) {
     return pluginManager.pluginMetadata[plugin.name].url === p.url;
@@ -2244,12 +2233,11 @@ function InstalledPlugin(_ref2) {
     onClose: function onClose(name) {
       if (name) {
         var pluginMetadata = pluginManager.pluginMetadata[plugin.name];
-        var pluginUrl = pluginMetadata.url;
 
         if (adminMode) {
-          jbrowse.removePlugin(pluginUrl);
+          jbrowse.removePlugin(pluginMetadata);
         } else if (types.isSessionWithSessionPlugins(session)) {
-          session.removeSessionPlugin(pluginUrl);
+          session.removeSessionPlugin(pluginMetadata);
         }
       }
 
@@ -2380,87 +2368,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 +2599,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 +2610,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 +2636,7 @@ function PluginStoreWidget(_ref) {
             case 11:
               array = _context.sent;
 
-              if (!killed) {
+              if (!signal.aborted) {
                 setPluginArray(array.plugins);
               }
 
@@ -2572,7 +2658,7 @@ function PluginStoreWidget(_ref) {
     }))();
 
     return function () {
-      killed = true;
+      controller.abort();
     };
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -2640,6 +2726,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, {