@jbrowse/plugin-data-management 1.5.1 → 1.5.5

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

@@ -10,18 +10,19 @@ 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, makeStyles, List, Card, CardContent, Link, CardActions, 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';
-import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import LockIcon from '@material-ui/icons/Lock';
 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 { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import CreateIcon from '@material-ui/icons/Create';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -52,14 +53,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;
@@ -67,19 +63,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;
@@ -88,17 +77,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) {
@@ -156,6 +139,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;
 }
 
@@ -179,12 +165,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);
 }
@@ -1773,7 +1762,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 +1859,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;
 }
 
@@ -2176,7 +2166,7 @@ function PluginDialog(_ref) {
     onClick: function onClick() {
       return _onClose();
     }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography, null, "Please confirm that you want to remove ", plugin, ":"), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(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.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
     onClick: function onClick() {
@@ -2204,8 +2194,7 @@ function InstalledPlugin(_ref2) {
       dialogPlugin = _useState2[0],
       setDialogPlugin = _useState2[1];
 
-  var session = getSession(model); // @ts-ignore
-
+  var session = 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;
@@ -2218,12 +2207,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 (isSessionWithSessionPlugins(session)) {
-          session.removeSessionPlugin(pluginUrl);
+          session.removeSessionPlugin(pluginMetadata);
         }
       }
 
@@ -2270,7 +2258,7 @@ function InstalledPluginsList(_ref) {
 
 var InstalledPluginsList$1 = /*#__PURE__*/observer(InstalledPluginsList);
 
-var useStyles$1 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$1 = /*#__PURE__*/makeStyles(function () {
   return {
     card: {
       margin: '1em'
@@ -2354,92 +2342,187 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$2 = /*#__PURE__*/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 = 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);
 
-var useStyles$3 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       margin: theme.spacing(1)
@@ -2490,7 +2573,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 +2584,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 +2610,7 @@ function PluginStoreWidget(_ref) {
             case 11:
               array = _context.sent;
 
-              if (!killed) {
+              if (!signal.aborted) {
                 setPluginArray(array.plugins);
               }
 
@@ -2546,7 +2632,7 @@ function PluginStoreWidget(_ref) {
     }))();
 
     return function () {
-      killed = true;
+      controller.abort();
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -2614,6 +2700,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, {
@@ -2797,7 +2888,7 @@ var index = {
   'default': SetDefaultSession$1
 };
 
-var useStyles$4 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$4 = /*#__PURE__*/makeStyles(function () {
   return {
     table: {
       minWidth: 500,
@@ -2866,7 +2957,7 @@ var AssemblyTable = /*#__PURE__*/observer(function (_ref) {
   }, "Actions")))), /*#__PURE__*/React.createElement(TableBody, null, rows)));
 });
 
-var useStyles$5 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       flexGrow: 1,
@@ -3146,7 +3237,7 @@ var AssemblyEditor = /*#__PURE__*/observer(function (_ref) {
   });
 });
 
-var useStyles$6 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     titleBox: {
       color: '#fff',
@@ -3270,7 +3361,7 @@ var ManageConnectionsDialog = /*#__PURE__*/lazy(function () {
 var ToggleConnectionsDialog = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return ToggleConnectionsDialog$2; });
 });
-var useStyles$7 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
   var _theme$palette$tertia, _theme$palette$tertia2;
 
   return {
@@ -3837,7 +3928,7 @@ var HierarchicalTrackSelector$1 = {
   'default': HierarchicalTrackSelectorContainer
 };
 
-var useStyles$8 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     spacing: {
       marginBottom: theme.spacing(3)
@@ -4090,7 +4181,7 @@ function ConfirmTrack(_ref7) {
 
 var ConfirmTrack$1 = /*#__PURE__*/observer(ConfirmTrack);
 
-var useStyles$9 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     paper: {
       display: 'flex',
@@ -4130,7 +4221,7 @@ function TrackSourceSelect(_ref) {
 
 var TrackSourceSelect$1 = /*#__PURE__*/observer(TrackSourceSelect);
 
-var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4364,7 +4455,7 @@ function ConnectionTypeSelect(props) {
   })));
 }
 
-var useStyles$b = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4579,7 +4670,7 @@ var DeleteConnectionDialog$3 = {
   'default': DeleteConnectionDialog$2
 };
 
-var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4644,7 +4735,7 @@ var ManageConnectionsDialog$2 = {
   'default': ManageConnectionsDialog$1
 };
 
-var useStyles$d = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',