@jbrowse/plugin-data-management 1.5.0 → 1.5.4

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

@@ -40,29 +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 Dialog = _interopDefault(require('@material-ui/core/Dialog'));
-var DialogTitle = _interopDefault(require('@material-ui/core/DialogTitle'));
-var TextField = _interopDefault(require('@material-ui/core/TextField'));
-var Button = _interopDefault(require('@material-ui/core/Button'));
+var clsx = _interopDefault(require('clsx'));
 var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
-var DialogContent = _interopDefault(require('@material-ui/core/DialogContent'));
-var DialogActions = _interopDefault(require('@material-ui/core/DialogActions'));
-var List = _interopDefault(require('@material-ui/core/List'));
-var ListItem = _interopDefault(require('@material-ui/core/ListItem'));
-var ListItemIcon = _interopDefault(require('@material-ui/core/ListItemIcon'));
-var ListItemText = _interopDefault(require('@material-ui/core/ListItemText'));
-var ListSubheader = _interopDefault(require('@material-ui/core/ListSubheader'));
-var Paper = _interopDefault(require('@material-ui/core/Paper'));
-var Typography = _interopDefault(require('@material-ui/core/Typography'));
-var Radio = _interopDefault(require('@material-ui/core/Radio'));
-var pluralize = _interopDefault(require('pluralize'));
+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'));
@@ -76,14 +62,16 @@ var PowerOutlinedIcon = _interopDefault(require('@material-ui/icons/PowerOutline
 var AutoSizer = _interopDefault(require('react-virtualized-auto-sizer'));
 var JBrowseMenu = _interopDefault(require('@jbrowse/core/ui/Menu'));
 var reactVtree = require('react-vtree');
-var Link = _interopDefault(require('@material-ui/core/Link'));
-var MenuItem = _interopDefault(require('@material-ui/core/MenuItem'));
-var ui = require('@jbrowse/core/ui');
 var lab = require('@material-ui/lab');
+var ui = require('@jbrowse/core/ui');
+var Button = _interopDefault(require('@material-ui/core/Button'));
 var Step = _interopDefault(require('@material-ui/core/Step'));
 var StepContent = _interopDefault(require('@material-ui/core/StepContent'));
 var StepLabel = _interopDefault(require('@material-ui/core/StepLabel'));
 var Stepper = _interopDefault(require('@material-ui/core/Stepper'));
+var Typography = _interopDefault(require('@material-ui/core/Typography'));
+var MenuItem = _interopDefault(require('@material-ui/core/MenuItem'));
+var TextField = _interopDefault(require('@material-ui/core/TextField'));
 var OpenInNewIcon = _interopDefault(require('@material-ui/icons/OpenInNew'));
 
 function ownKeys(object, enumerableOnly) {
@@ -91,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;
@@ -106,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;
@@ -127,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) {
@@ -195,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;
 }
 
@@ -218,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);
 }
@@ -1745,13 +1721,6 @@ function isAbsoluteUrl() {
   }
 }
 
-function getFileName(track) {
-  var uri = 'uri' in track ? track.uri : undefined;
-  var localPath = 'localPath' in track ? track.localPath : undefined;
-  var blob = 'blobId' in track ? track : undefined;
-  return (blob === null || blob === void 0 ? void 0 : blob.name) || (uri === null || uri === void 0 ? void 0 : uri.slice(uri.lastIndexOf('/') + 1)) || (localPath === null || localPath === void 0 ? void 0 : localPath.slice(localPath.lastIndexOf('/') + 1)) || '';
-}
-
 function f(pluginManager) {
   return mobxStateTree.types.model('AddTrackModel', {
     id: mst.ElementId,
@@ -1807,11 +1776,11 @@ function f(pluginManager) {
         var trackData = self.trackData,
             indexTrackData = self.indexTrackData,
             adapterHint = self.adapterHint;
-        return trackData ? tracks.guessAdapter(trackData, indexTrackData, getFileName, adapterHint) : undefined;
+        return trackData ? tracks.guessAdapter(trackData, indexTrackData, adapterHint, self) : undefined;
       },
 
       get trackName() {
-        return self.altTrackName || (self.trackData ? getFileName(self.trackData) : '');
+        return self.altTrackName || (self.trackData ? tracks.getFileName(self.trackData) : '');
       },
 
       get isFtp() {
@@ -1819,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() {
@@ -1873,7 +1843,7 @@ function f(pluginManager) {
       },
 
       get trackType() {
-        return self.altTrackType || (this.trackAdapter ? tracks.guessTrackType(this.trackAdapter.type) : '');
+        return self.altTrackType || (this.trackAdapter ? tracks.guessTrackType(this.trackAdapter.type, self) : '');
       }
 
     };
@@ -1915,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;
 }
 
@@ -2183,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',
@@ -2192,15 +2162,17 @@ var useStyles = /*#__PURE__*/styles.makeStyles(function () {
     },
     dialogContainer: {
       margin: 15
+    },
+    lockedPluginTooltip: {
+      marginRight: '0.5rem'
     }
   };
 });
 
 function LockedPlugin() {
+  var classes = useStyles();
   return /*#__PURE__*/React__default.createElement(core.Tooltip, {
-    style: {
-      marginRight: '0.5rem'
-    },
+    className: classes.lockedPluginTooltip,
     title: "This plugin was installed by an administrator, you cannot remove it."
   }, /*#__PURE__*/React__default.createElement(LockIcon, null));
 }
@@ -2220,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() {
@@ -2248,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;
@@ -2262,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);
         }
       }
 
@@ -2314,7 +2284,7 @@ function InstalledPluginsList(_ref) {
 
 var InstalledPluginsList$1 = /*#__PURE__*/mobxReact.observer(InstalledPluginsList);
 
-var useStyles$1 = /*#__PURE__*/styles.makeStyles(function () {
+var useStyles$1 = /*#__PURE__*/core.makeStyles(function () {
   return {
     card: {
       margin: '1em'
@@ -2398,101 +2368,194 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/mobxReact.observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/styles.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({
-    name: '',
-    url: ''
-  }),
+  var _useState = React.useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      formInput = _useState2[0],
-      setFormInput = _useState2[1];
+      umdPluginName = _useState2[0],
+      setUMDPluginName = _useState2[1];
 
-  var handleChange = function handleChange(event) {
-    setFormInput(_objectSpread2(_objectSpread2({}, formInput), {}, _defineProperty({}, event.target.name, event.target.value)));
-  };
+  var _useState3 = React.useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      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);
 
-  var handleSubmit = function handleSubmit() {
-    jbrowse.addPlugin({
-      name: formInput.name,
-      url: formInput.url
-    });
-  };
+  function handleSubmit() {
+    if (!ready) {
+      return;
+    }
 
-  return /*#__PURE__*/React__default.createElement(Dialog, {
-    open: open,
-    onClose: function onClose() {
-      return _onClose(false);
+    var pluginDefinition = {};
+
+    if (umdPluginName && umdPluginUrl) {
+      pluginDefinition.name = umdPluginName;
+      pluginDefinition.umdUrl = umdPluginUrl;
     }
-  }, /*#__PURE__*/React__default.createElement(DialogTitle, null, /*#__PURE__*/React__default.createElement(IconButton, {
-    className: classes.closeDialog,
-    "aria-label": "close-dialog",
+
+    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: handleClose
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Add custom plugin", /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "medium",
+    className: classes.closeButton,
     onClick: function onClick() {
-      return _onClose(false);
+      return onClose();
     }
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.dialogContainer
-  }, /*#__PURE__*/React__default.createElement(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: formInput.name,
-    onChange: handleChange,
-    multiline: true
-  }), /*#__PURE__*/React__default.createElement(TextField, {
-    id: "url-input",
-    name: "url",
+    value: umdPluginName,
+    onChange: handleChange
+  }), /*#__PURE__*/React__default.createElement(core.TextField, {
+    id: "umd-url-input",
+    name: "umdUrl",
     label: "Plugin URL",
     variant: "outlined",
-    value: formInput.url,
-    onChange: handleChange,
-    multiline: true
-  }), /*#__PURE__*/React__default.createElement(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",
+    onClick: handleClose
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     color: "primary",
-    style: {
-      marginTop: '1.5rem'
-    },
-    onClick: handleSubmit
-  }, "Add plugin")));
+    onClick: handleSubmit,
+    disabled: !ready
+  }, "Submit"))));
 }
 
 var CustomPluginForm$1 = /*#__PURE__*/mobxReact.observer(CustomPluginForm);
 
 var useStyles$3 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
-    accordion: {
-      marginTop: '1em'
+    root: {
+      margin: theme.spacing(1)
     },
     expandIcon: {
       color: '#fff'
     },
-    searchBox: {
-      marginBottom: theme.spacing(2)
-    },
     adminBadge: {
       margin: '0.5em',
       borderRadius: 3,
@@ -2514,7 +2577,7 @@ function PluginStoreWidget(_ref) {
   var model = _ref.model;
   var classes = useStyles$3();
 
-  var _useState = React.useState([]),
+  var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
       pluginArray = _useState2[0],
       setPluginArray = _useState2[1];
@@ -2536,61 +2599,71 @@ 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 fetchResult, array;
+      var response, err, array;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             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:
-              fetchResult = _context.sent;
+              response = _context.sent;
 
-              if (fetchResult.ok) {
-                _context.next = 6;
+              if (response.ok) {
+                _context.next = 9;
                 break;
               }
 
-              throw new Error('Failed to fetch plugin data');
+              _context.next = 7;
+              return response.text();
 
-            case 6:
-              _context.next = 8;
-              return fetchResult.json();
+            case 7:
+              err = _context.sent;
+              throw new Error("Failed to fetch plugin data: ".concat(response.status, " ").concat(response.statusText, " ").concat(err));
 
-            case 8:
+            case 9:
+              _context.next = 11;
+              return response.json();
+
+            case 11:
               array = _context.sent;
 
-              if (!killed) {
+              if (!signal.aborted) {
                 setPluginArray(array.plugins);
               }
 
-              _context.next = 16;
+              _context.next = 19;
               break;
 
-            case 12:
-              _context.prev = 12;
+            case 15:
+              _context.prev = 15;
               _context.t0 = _context["catch"](0);
               console.error(_context.t0);
               setError(_context.t0);
 
-            case 16:
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 12]]);
+      }, _callee, null, [[0, 15]]);
     }))();
 
     return function () {
-      killed = true;
+      controller.abort();
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", null, adminMode && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !util.isElectron && /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classes.root
+  }, adminMode && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !util.isElectron && /*#__PURE__*/React__default.createElement("div", {
     className: classes.adminBadge
   }, /*#__PURE__*/React__default.createElement(InfoOutlinedIcon, {
     style: {
@@ -2606,10 +2679,11 @@ function PluginStoreWidget(_ref) {
     }
   }, "Add custom plugin")), /*#__PURE__*/React__default.createElement(CustomPluginForm$1, {
     open: customPluginFormOpen,
-    onClose: setCustomPluginFormOpen,
+    onClose: function onClose() {
+      return setCustomPluginFormOpen(false);
+    },
     model: model
   })), /*#__PURE__*/React__default.createElement(core.TextField, {
-    className: classes.searchBox,
     label: "Filter plugins",
     value: model.filterText,
     onChange: function onChange(event) {
@@ -2651,7 +2725,12 @@ function PluginStoreWidget(_ref) {
     variant: "h5"
   }, "Available plugins")), error ? /*#__PURE__*/React__default.createElement(core.Typography, {
     color: "error"
-  }, "".concat(error)) : pluginArray.length ? pluginArray.filter(function (plugin) {
+  }, "".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, {
@@ -2782,128 +2861,50 @@ var _default = /*#__PURE__*/function (_Plugin) {
   return _default;
 }(Plugin);
 
-var useStyles$4 = /*#__PURE__*/styles.makeStyles(function (theme) {
-  return {
-    root: {
-      margin: theme.spacing(1)
-    },
-    message: {
-      padding: theme.spacing(3)
-    },
-    titleBox: {
-      color: '#fff',
-      backgroundColor: theme.palette.primary.main,
-      textAlign: 'center'
-    },
-    dialogContent: {
-      width: 600
-    },
-    resetButton: {
-      justifyContent: 'center',
-      marginBottom: '6px'
-    }
-  };
-});
-var CurrentSession = /*#__PURE__*/mobxReact.observer(function (_ref) {
-  var session = _ref.session,
-      selectedDefault = _ref.selectedDefault,
-      handleRadio = _ref.handleRadio;
-  var classes = useStyles$4();
-  return /*#__PURE__*/React__default.createElement(Paper, {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(List, {
-    subheader: /*#__PURE__*/React__default.createElement(ListSubheader, null, "Currently open session")
-  }, /*#__PURE__*/React__default.createElement(ListItem, null, /*#__PURE__*/React__default.createElement(ListItemIcon, null, /*#__PURE__*/React__default.createElement(Radio, {
-    checked: session.name === selectedDefault,
-    onChange: function onChange() {
-      return handleRadio(session);
-    }
-  })), /*#__PURE__*/React__default.createElement(ListItemText, {
-    primary: session.name
-  }))));
-});
-var SetDefaultSession$1 = /*#__PURE__*/mobxReact.observer(function (_ref2) {
-  var rootModel = _ref2.rootModel,
-      open = _ref2.open,
-      onClose = _ref2.onClose,
-      currentDefault = _ref2.currentDefault;
-  var classes = useStyles$4();
-  var session = rootModel.session;
+function canSetDefaultSession(obj) {
+  return _typeof(obj) === 'object' && !!obj && 'jbrowse' in obj;
+}
 
-  var _useState = React.useState(currentDefault),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedDefault = _useState2[0],
-      setSelectedDefault = _useState2[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var SetDefaultSession$1 = /*#__PURE__*/mobxReact.observer(function (_ref) {
+  var rootModel = _ref.rootModel,
+      onClose = _ref.onClose;
 
+  if (!rootModel) {
+    return null;
+  }
 
-  function handleRadio(sessionSnapshot) {
-    setSelectedDefault(sessionSnapshot.name);
-    rootModel.jbrowse.setDefaultSessionConf(sessionSnapshot);
-    session.notify("Set default session to ".concat(sessionSnapshot.name), 'success');
+  if (!canSetDefaultSession(rootModel)) {
+    console.error('Incorrect rootmodel');
+    return null;
   }
 
-  return /*#__PURE__*/React__default.createElement(Dialog, {
-    open: open
-  }, /*#__PURE__*/React__default.createElement(DialogTitle, {
-    className: classes.titleBox
-  }, "Set Default Session"), /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(core.Grid, {
-    className: classes.resetButton,
-    container: true
-  }, /*#__PURE__*/React__default.createElement(core.Grid, {
-    item: true
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    color: "secondary",
+  var jbrowse = rootModel.jbrowse,
+      session = rootModel.session;
+  return /*#__PURE__*/React__default.createElement(core.Dialog, {
+    open: true,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Set default session"), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Select \"Set current session as default\" to make your current session saved to the config file. You can also hit \"Clear default session\", which would remove the default session from the config.")), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "contained",
     onClick: function onClick() {
-      setSelectedDefault('New session');
-      rootModel.jbrowse.setDefaultSessionConf({
+      jbrowse.setDefaultSessionConf({
         name: "New session"
       });
-      session.notify('Reset default session', 'success');
+      onClose();
     }
-  }, "Clear default session"))), /*#__PURE__*/React__default.createElement(CurrentSession, {
-    session: session,
-    selectedDefault: selectedDefault,
-    handleRadio: handleRadio
-  }), /*#__PURE__*/React__default.createElement(Paper, {
-    className: classes.root
-  }, /*#__PURE__*/React__default.createElement(List, {
-    subheader: /*#__PURE__*/React__default.createElement(ListSubheader, null, "Saved sessions")
-  }, session.savedSessions.length ? session.savedSessions.map( // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (sessionSnapshot) {
-    var _sessionSnapshot$view = sessionSnapshot.views,
-        views = _sessionSnapshot$view === void 0 ? [] : _sessionSnapshot$view;
-    var totalTracks = views // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .map(function (view) {
-      return view.tracks.length;
-    }).reduce(function (a, b) {
-      return a + b;
-    }, 0);
-
-    if (sessionSnapshot.name !== session.name) {
-      return /*#__PURE__*/React__default.createElement(ListItem, {
-        key: sessionSnapshot.name
-      }, /*#__PURE__*/React__default.createElement(ListItemIcon, null, /*#__PURE__*/React__default.createElement(Radio, {
-        checked: sessionSnapshot.name === selectedDefault,
-        onChange: function onChange() {
-          return handleRadio(sessionSnapshot);
-        }
-      })), /*#__PURE__*/React__default.createElement(ListItemText, {
-        primary: sessionSnapshot.name,
-        secondary: "".concat(views.length, " ").concat(pluralize('view', views.length), "; ").concat(totalTracks, "\n                             open ").concat(pluralize('track', totalTracks))
-      }));
-    }
-
-    return null;
-  }) : /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.message
-  }, "No saved sessions found")))), /*#__PURE__*/React__default.createElement(DialogActions, null, /*#__PURE__*/React__default.createElement(Button, {
+  }, "Clear default session"), /*#__PURE__*/React__default.createElement(core.Button, {
     color: "secondary",
     variant: "contained",
     onClick: function onClick() {
-      onClose(false);
+      return onClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(core.Button, {
+    color: "primary",
+    variant: "contained",
+    onClick: function onClick() {
+      jbrowse.setDefaultSessionConf(session);
+      onClose();
     }
-  }, "Return")));
+  }, "Set current session as default")));
 });
 
 
@@ -2913,7 +2914,7 @@ var index = {
   'default': SetDefaultSession$1
 };
 
-var useStyles$5 = /*#__PURE__*/core.makeStyles(function () {
+var useStyles$4 = /*#__PURE__*/core.makeStyles(function () {
   return {
     table: {
       minWidth: 500,
@@ -2934,7 +2935,7 @@ var AssemblyTable = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var rootModel = _ref.rootModel,
       setIsAssemblyBeingEdited = _ref.setIsAssemblyBeingEdited,
       setAssemblyBeingEdited = _ref.setAssemblyBeingEdited;
-  var classes = useStyles$5();
+  var classes = useStyles$4();
 
   function removeAssembly(name) {
     rootModel.jbrowse.removeAssemblyConf(name);
@@ -2982,7 +2983,7 @@ var AssemblyTable = /*#__PURE__*/mobxReact.observer(function (_ref) {
   }, "Actions")))), /*#__PURE__*/React__default.createElement(core.TableBody, null, rows)));
 });
 
-var useStyles$6 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$5 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       flexGrow: 1,
@@ -3100,7 +3101,7 @@ var blank = {
 var AssemblyAddForm = /*#__PURE__*/mobxReact.observer(function (_ref3) {
   var rootModel = _ref3.rootModel,
       setFormOpen = _ref3.setFormOpen;
-  var classes = useStyles$6();
+  var classes = useStyles$5();
   var adapterTypes = ['IndexedFastaAdapter', 'BgzipFastaAdapter', 'TwoBitAdapter'];
 
   var _useState = React.useState(''),
@@ -3262,7 +3263,7 @@ var AssemblyEditor = /*#__PURE__*/mobxReact.observer(function (_ref) {
   });
 });
 
-var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     titleBox: {
       color: '#fff',
@@ -3289,7 +3290,7 @@ var useStyles$7 = /*#__PURE__*/styles.makeStyles(function (theme) {
 var AssemblyManager$1 = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var rootModel = _ref.rootModel,
       _onClose = _ref.onClose;
-  var classes = useStyles$7();
+  var classes = useStyles$6();
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3386,7 +3387,7 @@ var ManageConnectionsDialog = /*#__PURE__*/React.lazy(function () {
 var ToggleConnectionsDialog = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return ToggleConnectionsDialog$2; });
 });
-var useStyles$8 = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$7 = /*#__PURE__*/core.makeStyles(function (theme) {
   var _theme$palette$tertia, _theme$palette$tertia2;
 
   return {
@@ -3458,7 +3459,7 @@ var Node = function Node(props) {
       conf = data.conf,
       onMoreInfo = data.onMoreInfo,
       drawerPosition = data.drawerPosition;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   var width = 10;
   var marginLeft = nestingLevel * width + (isLeaf ? width : 0);
   var unsupported = name && (name.endsWith('(Unsupported)') || name.endsWith('(Unknown)'));
@@ -3684,7 +3685,7 @@ var HierarchicalTrackSelectorContainer = /*#__PURE__*/mobxReact.observer(functio
   var model = _ref5.model,
       toolbarHeight = _ref5.toolbarHeight,
       overrideDimensions = _ref5.overrideDimensions;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   var session = util.getSession(model);
 
   var _useState3 = React.useState(null),
@@ -3735,7 +3736,7 @@ var HierarchicalTrackSelectorHeader = /*#__PURE__*/mobxReact.observer(function (
       setHeaderHeight = _ref6.setHeaderHeight,
       setAssemblyIdx = _ref6.setAssemblyIdx,
       assemblyIdx = _ref6.assemblyIdx;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   var session = util.getSession(model);
 
   var _useState5 = React.useState(),
@@ -3953,7 +3954,7 @@ var HierarchicalTrackSelector$1 = {
   'default': HierarchicalTrackSelectorContainer
 };
 
-var useStyles$9 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$8 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     spacing: {
       marginBottom: theme.spacing(3)
@@ -3966,24 +3967,72 @@ function StatusMessage(_ref) {
 
   var trackAdapter = _ref.trackAdapter,
       trackType = _ref.trackType;
-  var classes = useStyles$9();
-  return trackAdapter.type === 'SNPCoverageAdapter' ? /*#__PURE__*/React__default.createElement(Typography, {
+  var classes = useStyles$8();
+  return trackAdapter.type === 'SNPCoverageAdapter' ? /*#__PURE__*/React__default.createElement(core.Typography, {
     className: classes.spacing
-  }, "Selected ", /*#__PURE__*/React__default.createElement("code", null, trackType), ". Using adapter", ' ', /*#__PURE__*/React__default.createElement("code", null, trackAdapter.type), " with subadapter", ' ', /*#__PURE__*/React__default.createElement("code", null, (_trackAdapter$subadap = trackAdapter.subadapter) === null || _trackAdapter$subadap === void 0 ? void 0 : _trackAdapter$subadap.type), ". Please enter a track name and, if necessary, update the track type.") : /*#__PURE__*/React__default.createElement(Typography, {
+  }, "Selected ", /*#__PURE__*/React__default.createElement("code", null, trackType), ". Using adapter", ' ', /*#__PURE__*/React__default.createElement("code", null, trackAdapter.type), " with subadapter", ' ', /*#__PURE__*/React__default.createElement("code", null, (_trackAdapter$subadap = trackAdapter.subadapter) === null || _trackAdapter$subadap === void 0 ? void 0 : _trackAdapter$subadap.type), ". Please enter a track name and, if necessary, update the track type.") : /*#__PURE__*/React__default.createElement(core.Typography, {
     className: classes.spacing
   }, "Using adapter ", /*#__PURE__*/React__default.createElement("code", null, trackAdapter.type), " and guessing track type", ' ', /*#__PURE__*/React__default.createElement("code", null, trackType), ". Please enter a track name and, if necessary, update the track type.");
 }
+/**
+ * categorizeAdapters takes a list of adapters and sorts their menu item elements under an appropriate ListSubheader
+ *  element. In this way, adapters that are from external plugins can have headers that differentiate them from the
+ *  out-of-the-box plugins.
+ * @param adaptersList - a list of adapters found in the PluginManager
+ * @returns a series of JSX elements that are ListSubheaders followed by the adapters
+ *   found under that subheader
+ */
+
+
+function categorizeAdapters(adaptersList) {
+  var currentCategory = ''; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  var items = [];
+  adaptersList.forEach(function (adapter) {
+    var _adapter$adapterMetad;
+
+    if ((_adapter$adapterMetad = adapter.adapterMetadata) !== null && _adapter$adapterMetad !== void 0 && _adapter$adapterMetad.category) {
+      var _adapter$adapterMetad2, _adapter$adapterMetad7, _adapter$adapterMetad8;
+
+      if (currentCategory !== ((_adapter$adapterMetad2 = adapter.adapterMetadata) === null || _adapter$adapterMetad2 === void 0 ? void 0 : _adapter$adapterMetad2.category)) {
+        var _adapter$adapterMetad3, _adapter$adapterMetad4, _adapter$adapterMetad5, _adapter$adapterMetad6;
+
+        currentCategory = (_adapter$adapterMetad3 = adapter.adapterMetadata) === null || _adapter$adapterMetad3 === void 0 ? void 0 : _adapter$adapterMetad3.category;
+        items.push( /*#__PURE__*/React__default.createElement(core.ListSubheader, {
+          key: (_adapter$adapterMetad4 = adapter.adapterMetadata) === null || _adapter$adapterMetad4 === void 0 ? void 0 : _adapter$adapterMetad4.category,
+          value: (_adapter$adapterMetad5 = adapter.adapterMetadata) === null || _adapter$adapterMetad5 === void 0 ? void 0 : _adapter$adapterMetad5.category
+        }, (_adapter$adapterMetad6 = adapter.adapterMetadata) === null || _adapter$adapterMetad6 === void 0 ? void 0 : _adapter$adapterMetad6.category));
+      }
+
+      items.push( /*#__PURE__*/React__default.createElement(core.MenuItem, {
+        key: adapter.name,
+        value: adapter.name
+      }, (_adapter$adapterMetad7 = adapter.adapterMetadata) !== null && _adapter$adapterMetad7 !== void 0 && _adapter$adapterMetad7.displayName ? (_adapter$adapterMetad8 = adapter.adapterMetadata) === null || _adapter$adapterMetad8 === void 0 ? void 0 : _adapter$adapterMetad8.displayName : adapter.name));
+    }
+  });
+  return items;
+}
+
+function getAdapterTypes(pluginManager) {
+  return pluginManager.getElementTypesInGroup('adapter');
+}
+
+function getTrackTypes(pluginManager) {
+  return pluginManager.getElementTypesInGroup('track');
+}
 
 var TrackAdapterSelector = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   var session = util.getSession(model);
-  var trackAdapter = model.trackAdapter;
-  return /*#__PURE__*/React__default.createElement(TextField, {
+  var trackAdapter = model.trackAdapter; // prettier-ignore
+
+  var adapters = getAdapterTypes(mobxStateTree.getEnv(session).pluginManager);
+  return /*#__PURE__*/React__default.createElement(core.TextField, {
     className: classes.spacing,
-    value: trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type,
+    value: (trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type) !== 'UNKNOWN' ? trackAdapter === null || trackAdapter === void 0 ? void 0 : trackAdapter.type : '',
     label: "adapterType",
-    helperText: "An adapter type",
+    helperText: "Select an adapter type",
     select: true,
     fullWidth: true,
     onChange: function onChange(event) {
@@ -3995,27 +4044,35 @@ var TrackAdapterSelector = /*#__PURE__*/mobxReact.observer(function (_ref2) {
         'data-testid': 'adapterTypeSelect'
       }
     }
-  }, mobxStateTree.getEnv(session).pluginManager.getElementTypesInGroup('adapter') // Exclude SNPCoverageAdapter from primary adapter user selection
+  }, adapters // Excludes any adapter with the 'adapterMetadata.hiddenFromGUI' property, and anything with the 'adapterMetadata.category' property
   .filter(function (elt) {
-    return elt.name !== 'SNPCoverageAdapter';
+    var _elt$adapterMetadata, _elt$adapterMetadata2;
+
+    return !((_elt$adapterMetadata = elt.adapterMetadata) !== null && _elt$adapterMetadata !== void 0 && _elt$adapterMetadata.hiddenFromGUI) && !((_elt$adapterMetadata2 = elt.adapterMetadata) !== null && _elt$adapterMetadata2 !== void 0 && _elt$adapterMetadata2.category);
   }).map(function (elt) {
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    var _elt$adapterMetadata3, _elt$adapterMetadata4;
+
+    return /*#__PURE__*/React__default.createElement(core.MenuItem, {
       key: elt.name,
       value: elt.name
-    }, elt.name);
-  }));
+    }, (_elt$adapterMetadata3 = elt.adapterMetadata) !== null && _elt$adapterMetadata3 !== void 0 && _elt$adapterMetadata3.displayName ? (_elt$adapterMetadata4 = elt.adapterMetadata) === null || _elt$adapterMetadata4 === void 0 ? void 0 : _elt$adapterMetadata4.displayName : elt.name);
+  }), categorizeAdapters(adapters.filter(function (elt) {
+    var _elt$adapterMetadata5;
+
+    return !((_elt$adapterMetadata5 = elt.adapterMetadata) !== null && _elt$adapterMetadata5 !== void 0 && _elt$adapterMetadata5.hiddenFromGUI);
+  })));
 });
 
 function UnknownAdapterPrompt(_ref3) {
   var model = _ref3.model;
-  var classes = useStyles$9();
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
+  var classes = useStyles$8();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Typography, {
     className: classes.spacing
-  }, "Was not able to guess the adapter type for this data, but it may be in the list below. If not, you can", ' ', /*#__PURE__*/React__default.createElement(Link, {
+  }, "JBrowse was not able to guess the adapter type for this data, but it may be in the list below. If not, you can", ' ', /*#__PURE__*/React__default.createElement(core.Link, {
     href: "https://github.com/GMOD/jbrowse-components/releases",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "check for new releases"), ' ', "of JBrowse to see if they support this data type or", ' ', /*#__PURE__*/React__default.createElement(Link, {
+  }, "check for new releases"), ' ', "of JBrowse to see if they support this data type or", ' ', /*#__PURE__*/React__default.createElement(core.Link, {
     href: "https://github.com/GMOD/jbrowse-components/issues/new",
     target: "_blank",
     rel: "noopener noreferrer"
@@ -4026,14 +4083,15 @@ function UnknownAdapterPrompt(_ref3) {
 
 var TrackTypeSelector = /*#__PURE__*/mobxReact.observer(function (_ref4) {
   var model = _ref4.model;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   var session = util.getSession(model);
   var trackType = model.trackType;
-  return /*#__PURE__*/React__default.createElement(TextField, {
+  var trackTypes = getTrackTypes(mobxStateTree.getEnv(session).pluginManager);
+  return /*#__PURE__*/React__default.createElement(core.TextField, {
     className: classes.spacing,
     value: trackType,
     label: "trackType",
-    helperText: "A track type",
+    helperText: "Select a track type",
     select: true,
     fullWidth: true,
     onChange: function onChange(event) {
@@ -4045,10 +4103,9 @@ var TrackTypeSelector = /*#__PURE__*/mobxReact.observer(function (_ref4) {
         'data-testid': 'trackTypeSelect'
       }
     }
-  }, mobxStateTree.getEnv(session).pluginManager.getElementTypesInGroup('track') // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .map(function (_ref5) {
+  }, trackTypes.map(function (_ref5) {
     var name = _ref5.name;
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    return /*#__PURE__*/React__default.createElement(core.MenuItem, {
       key: name,
       value: name
     }, name);
@@ -4058,7 +4115,7 @@ var TrackAssemblySelector = /*#__PURE__*/mobxReact.observer(function (_ref6) {
   var model = _ref6.model;
   var session = util.getSession(model);
   var assembly = model.assembly;
-  return /*#__PURE__*/React__default.createElement(TextField, {
+  return /*#__PURE__*/React__default.createElement(core.TextField, {
     value: assembly,
     label: "assemblyName",
     helperText: "Assembly to which the track will be added",
@@ -4074,8 +4131,9 @@ var TrackAssemblySelector = /*#__PURE__*/mobxReact.observer(function (_ref6) {
       }
     }
   }, session.assemblies.map(function (conf) {
-    var name = configuration.readConfObject(conf, 'name');
-    return /*#__PURE__*/React__default.createElement(MenuItem, {
+    return configuration.readConfObject(conf, 'name');
+  }).map(function (name) {
+    return /*#__PURE__*/React__default.createElement(core.MenuItem, {
       key: name,
       value: name
     }, name);
@@ -4084,20 +4142,21 @@ var TrackAssemblySelector = /*#__PURE__*/mobxReact.observer(function (_ref6) {
 
 function ConfirmTrack(_ref7) {
   var model = _ref7.model;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   var trackName = model.trackName,
       trackAdapter = model.trackAdapter,
       trackType = model.trackType,
-      warningMessage = model.warningMessage;
+      warningMessage = model.warningMessage,
+      adapterHint = model.adapterHint;
 
   if (model.unsupported) {
-    return /*#__PURE__*/React__default.createElement(Typography, {
+    return /*#__PURE__*/React__default.createElement(core.Typography, {
       className: classes.spacing
-    }, "This version of JBrowse cannot display data of this type. It is possible, however, that there is a newer version that can display them. You can", ' ', /*#__PURE__*/React__default.createElement(Link, {
+    }, "This version of JBrowse cannot display data of this type. It is possible, however, that there is a newer version that can display them. You can", ' ', /*#__PURE__*/React__default.createElement(core.Link, {
       href: "https://github.com/GMOD/jbrowse-components/releases",
       target: "_blank",
       rel: "noopener noreferrer"
-    }, "check for new releases"), ' ', "of JBrowse or", ' ', /*#__PURE__*/React__default.createElement(Link, {
+    }, "check for new releases"), ' ', "of JBrowse or", ' ', /*#__PURE__*/React__default.createElement(core.Link, {
       href: "https://github.com/GMOD/jbrowse-components/issues/new",
       target: "_blank",
       rel: "noopener noreferrer"
@@ -4110,18 +4169,22 @@ function ConfirmTrack(_ref7) {
     });
   }
 
+  if (adapterHint === '' && trackAdapter) {
+    model.setAdapterHint(trackAdapter.type);
+  }
+
   if (!(trackAdapter !== null && trackAdapter !== void 0 && trackAdapter.type)) {
-    return /*#__PURE__*/React__default.createElement(Typography, null, "Could not recognize this data type.");
+    return /*#__PURE__*/React__default.createElement(core.Typography, null, "Could not recognize this data type.");
   }
 
   return /*#__PURE__*/React__default.createElement("div", null, trackAdapter ? /*#__PURE__*/React__default.createElement(StatusMessage, {
     trackAdapter: trackAdapter,
     trackType: trackType
-  }) : null, warningMessage ? /*#__PURE__*/React__default.createElement(Typography, {
+  }) : null, warningMessage ? /*#__PURE__*/React__default.createElement(core.Typography, {
     style: {
       color: 'orange'
     }
-  }, warningMessage) : null, /*#__PURE__*/React__default.createElement(TextField, {
+  }, warningMessage) : null, /*#__PURE__*/React__default.createElement(core.TextField, {
     className: classes.spacing,
     label: "trackName",
     helperText: "A name for this track",
@@ -4144,7 +4207,7 @@ function ConfirmTrack(_ref7) {
 
 var ConfirmTrack$1 = /*#__PURE__*/mobxReact.observer(ConfirmTrack);
 
-var useStyles$a = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$9 = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     paper: {
       display: 'flex',
@@ -4159,9 +4222,9 @@ var useStyles$a = /*#__PURE__*/styles.makeStyles(function (theme) {
 
 function TrackSourceSelect(_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
+  var classes = useStyles$9();
   var rootModel = mobxStateTree.getRoot(model);
-  return /*#__PURE__*/React__default.createElement(Paper, {
+  return /*#__PURE__*/React__default.createElement(core.Paper, {
     className: classes.paper
   }, /*#__PURE__*/React__default.createElement(ui.FileSelector, {
     name: "Main file",
@@ -4184,7 +4247,7 @@ function TrackSourceSelect(_ref) {
 
 var TrackSourceSelect$1 = /*#__PURE__*/mobxReact.observer(TrackSourceSelect);
 
-var useStyles$b = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$a = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4217,7 +4280,7 @@ function AddTrackWidget(_ref) {
       activeStep = _useState2[0],
       setActiveStep = _useState2[1];
 
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   var session = util.getSession(model);
   var assembly = model.assembly,
       trackAdapter = model.trackAdapter,
@@ -4418,7 +4481,7 @@ function ConnectionTypeSelect(props) {
   })));
 }
 
-var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4460,7 +4523,7 @@ function AddConnectionWidget(_ref) {
       activeStep = _useState8[0],
       setActiveStep = _useState8[1];
 
-  var classes = useStyles$c();
+  var classes = useStyles$b();
   var session = util.getSession(model);
 
   var _getEnv = mobxStateTree.getEnv(session),
@@ -4633,7 +4696,7 @@ var DeleteConnectionDialog$3 = {
   'default': DeleteConnectionDialog$2
 };
 
-var useStyles$d = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4652,7 +4715,7 @@ function ManageConnectionsDlg(_ref) {
   var session = _ref.session,
       handleClose = _ref.handleClose,
       breakConnection = _ref.breakConnection;
-  var classes = useStyles$d();
+  var classes = useStyles$c();
   var adminMode = session.adminMode,
       connections = session.connections,
       sessionConnections = session.sessionConnections;
@@ -4698,7 +4761,7 @@ var ManageConnectionsDialog$2 = {
   'default': ManageConnectionsDialog$1
 };
 
-var useStyles$e = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$d = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4718,7 +4781,7 @@ function ToggleConnectionDialog(_ref) {
       handleClose = _ref.handleClose,
       assemblyName = _ref.assemblyName,
       breakConnection = _ref.breakConnection;
-  var classes = useStyles$e();
+  var classes = useStyles$d();
   var connections = session.connections,
       connectionInstances = session.connectionInstances;
   var assemblySpecificConnections = connections.filter(function (c) {