@jbrowse/plugin-data-management 1.5.0 → 1.5.4

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

@@ -7,36 +7,22 @@ import { ConfigurationSchema, ConfigurationReference, getConf, readConfObject }
 import { objectHash, getSession, isElectron } from '@jbrowse/core/util';
 import { types, getParent, getEnv, getRoot } from 'mobx-state-tree';
 import { openLocation } from '@jbrowse/core/util/io';
-import { generateUnknownTrackConf, generateUnsupportedTrackConf, guessAdapter, UNSUPPORTED, guessTrackType, UNKNOWN } from '@jbrowse/core/util/tracks';
+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, TextField as TextField$1, InputAdornment, Accordion, AccordionSummary, makeStyles as makeStyles$1, Grid, TableRow, TableCell, TableContainer, Paper as Paper$1, Table, TableHead, TableBody, MenuItem, Fab, Menu, FormControlLabel, Checkbox, 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 Dialog$1 from '@material-ui/core/Dialog';
-import DialogTitle$1 from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Button$1 from '@material-ui/core/Button';
+import clsx from 'clsx';
 import IconButton$1 from '@material-ui/core/IconButton';
-import DialogContent$1 from '@material-ui/core/DialogContent';
-import DialogActions$1 from '@material-ui/core/DialogActions';
-import List$1 from '@material-ui/core/List';
-import ListItem$1 from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Paper from '@material-ui/core/Paper';
-import Typography$1 from '@material-ui/core/Typography';
-import Radio from '@material-ui/core/Radio';
-import pluralize from 'pluralize';
+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';
@@ -50,14 +36,16 @@ import PowerOutlinedIcon from '@material-ui/icons/PowerOutlined';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import JBrowseMenu from '@jbrowse/core/ui/Menu';
 import { VariableSizeTree } from 'react-vtree';
-import Link$1 from '@material-ui/core/Link';
-import MenuItem$1 from '@material-ui/core/MenuItem';
-import { FileSelector as FileSelector$1 } from '@jbrowse/core/ui';
 import { Alert } from '@material-ui/lab';
+import { FileSelector as FileSelector$1 } from '@jbrowse/core/ui';
+import Button$1 from '@material-ui/core/Button';
 import Step$1 from '@material-ui/core/Step';
 import StepContent$1 from '@material-ui/core/StepContent';
 import StepLabel$1 from '@material-ui/core/StepLabel';
 import Stepper$1 from '@material-ui/core/Stepper';
+import Typography$1 from '@material-ui/core/Typography';
+import MenuItem$1 from '@material-ui/core/MenuItem';
+import TextField$1 from '@material-ui/core/TextField';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 
 function ownKeys(object, enumerableOnly) {
@@ -65,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;
@@ -80,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;
@@ -101,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) {
@@ -169,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;
 }
 
@@ -192,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);
 }
@@ -1719,13 +1695,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 types.model('AddTrackModel', {
     id: ElementId,
@@ -1781,7 +1750,7 @@ function f(pluginManager) {
         var trackData = self.trackData,
             indexTrackData = self.indexTrackData,
             adapterHint = self.adapterHint;
-        return trackData ? guessAdapter(trackData, indexTrackData, getFileName, adapterHint) : undefined;
+        return trackData ? guessAdapter(trackData, indexTrackData, adapterHint, self) : undefined;
       },
 
       get trackName() {
@@ -1793,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() {
@@ -1847,7 +1817,7 @@ function f(pluginManager) {
       },
 
       get trackType() {
-        return self.altTrackType || (this.trackAdapter ? guessTrackType(this.trackAdapter.type) : '');
+        return self.altTrackType || (this.trackAdapter ? guessTrackType(this.trackAdapter.type, self) : '');
       }
 
     };
@@ -1889,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;
 }
 
@@ -2166,15 +2136,17 @@ var useStyles = /*#__PURE__*/makeStyles(function () {
     },
     dialogContainer: {
       margin: 15
+    },
+    lockedPluginTooltip: {
+      marginRight: '0.5rem'
     }
   };
 });
 
 function LockedPlugin() {
+  var classes = useStyles();
   return /*#__PURE__*/React.createElement(Tooltip, {
-    style: {
-      marginRight: '0.5rem'
-    },
+    className: classes.lockedPluginTooltip,
     title: "This plugin was installed by an administrator, you cannot remove it."
   }, /*#__PURE__*/React.createElement(LockIcon, null));
 }
@@ -2194,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() {
@@ -2222,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;
@@ -2236,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);
         }
       }
 
@@ -2372,101 +2342,194 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/makeStyles(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({
-    name: '',
-    url: ''
-  }),
+  var _useState = 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 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      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);
 
-  var handleSubmit = function handleSubmit() {
-    jbrowse.addPlugin({
-      name: formInput.name,
-      url: formInput.url
-    });
-  };
+  function handleSubmit() {
+    if (!ready) {
+      return;
+    }
 
-  return /*#__PURE__*/React.createElement(Dialog$1, {
-    open: open,
-    onClose: function onClose() {
-      return _onClose(false);
+    var pluginDefinition = {};
+
+    if (umdPluginName && umdPluginUrl) {
+      pluginDefinition.name = umdPluginName;
+      pluginDefinition.umdUrl = umdPluginUrl;
     }
-  }, /*#__PURE__*/React.createElement(DialogTitle$1, null, /*#__PURE__*/React.createElement(IconButton$1, {
-    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.createElement(Dialog, {
+    open: open,
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Add custom plugin", /*#__PURE__*/React.createElement(IconButton$1, {
+    size: "medium",
+    className: classes.closeButton,
     onClick: function onClick() {
-      return _onClose(false);
+      return onClose();
     }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement("div", {
-    className: classes.dialogContainer
-  }, /*#__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: formInput.name,
-    onChange: handleChange,
-    multiline: true
+    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: formInput.url,
-    onChange: handleChange,
-    multiline: true
-  }), /*#__PURE__*/React.createElement(Button$1, {
+    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",
+    onClick: handleClose
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
     variant: "contained",
     color: "primary",
-    style: {
-      marginTop: '1.5rem'
-    },
-    onClick: handleSubmit
-  }, "Add plugin")));
+    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 {
-    accordion: {
-      marginTop: '1em'
+    root: {
+      margin: theme.spacing(1)
     },
     expandIcon: {
       color: '#fff'
     },
-    searchBox: {
-      marginBottom: theme.spacing(2)
-    },
     adminBadge: {
       margin: '0.5em',
       borderRadius: 3,
@@ -2488,7 +2551,7 @@ function PluginStoreWidget(_ref) {
   var model = _ref.model;
   var classes = useStyles$3();
 
-  var _useState = useState([]),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
       pluginArray = _useState2[0],
       setPluginArray = _useState2[1];
@@ -2510,61 +2573,71 @@ 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 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 7:
+              err = _context.sent;
+              throw new Error("Failed to fetch plugin data: ".concat(response.status, " ").concat(response.statusText, " ").concat(err));
 
-            case 6:
-              _context.next = 8;
-              return fetchResult.json();
+            case 9:
+              _context.next = 11;
+              return response.json();
 
-            case 8:
+            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.createElement("div", null, adminMode && /*#__PURE__*/React.createElement(React.Fragment, null, !isElectron && /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, adminMode && /*#__PURE__*/React.createElement(React.Fragment, null, !isElectron && /*#__PURE__*/React.createElement("div", {
     className: classes.adminBadge
   }, /*#__PURE__*/React.createElement(InfoOutlinedIcon, {
     style: {
@@ -2580,10 +2653,11 @@ function PluginStoreWidget(_ref) {
     }
   }, "Add custom plugin")), /*#__PURE__*/React.createElement(CustomPluginForm$1, {
     open: customPluginFormOpen,
-    onClose: setCustomPluginFormOpen,
+    onClose: function onClose() {
+      return setCustomPluginFormOpen(false);
+    },
     model: model
-  })), /*#__PURE__*/React.createElement(TextField$1, {
-    className: classes.searchBox,
+  })), /*#__PURE__*/React.createElement(TextField, {
     label: "Filter plugins",
     value: model.filterText,
     onChange: function onChange(event) {
@@ -2625,7 +2699,12 @@ function PluginStoreWidget(_ref) {
     variant: "h5"
   }, "Available plugins")), error ? /*#__PURE__*/React.createElement(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 (!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, {
@@ -2756,128 +2835,50 @@ var _default = /*#__PURE__*/function (_Plugin) {
   return _default;
 }(Plugin);
 
-var useStyles$4 = /*#__PURE__*/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__*/observer(function (_ref) {
-  var session = _ref.session,
-      selectedDefault = _ref.selectedDefault,
-      handleRadio = _ref.handleRadio;
-  var classes = useStyles$4();
-  return /*#__PURE__*/React.createElement(Paper, {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(List$1, {
-    subheader: /*#__PURE__*/React.createElement(ListSubheader, null, "Currently open session")
-  }, /*#__PURE__*/React.createElement(ListItem$1, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radio, {
-    checked: session.name === selectedDefault,
-    onChange: function onChange() {
-      return handleRadio(session);
-    }
-  })), /*#__PURE__*/React.createElement(ListItemText, {
-    primary: session.name
-  }))));
-});
-var SetDefaultSession$1 = /*#__PURE__*/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 = 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__*/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.createElement(Dialog$1, {
-    open: open
-  }, /*#__PURE__*/React.createElement(DialogTitle$1, {
-    className: classes.titleBox
-  }, "Set Default Session"), /*#__PURE__*/React.createElement(DialogContent$1, null, /*#__PURE__*/React.createElement(Grid, {
-    className: classes.resetButton,
-    container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
-    item: true
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    color: "secondary",
+  var jbrowse = rootModel.jbrowse,
+      session = rootModel.session;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: true,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Set default session"), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(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.createElement(DialogActions, null, /*#__PURE__*/React.createElement(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.createElement(CurrentSession, {
-    session: session,
-    selectedDefault: selectedDefault,
-    handleRadio: handleRadio
-  }), /*#__PURE__*/React.createElement(Paper, {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(List$1, {
-    subheader: /*#__PURE__*/React.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.createElement(ListItem$1, {
-        key: sessionSnapshot.name
-      }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radio, {
-        checked: sessionSnapshot.name === selectedDefault,
-        onChange: function onChange() {
-          return handleRadio(sessionSnapshot);
-        }
-      })), /*#__PURE__*/React.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.createElement(Typography$1, {
-    className: classes.message
-  }, "No saved sessions found")))), /*#__PURE__*/React.createElement(DialogActions$1, null, /*#__PURE__*/React.createElement(Button$1, {
+  }, "Clear default session"), /*#__PURE__*/React.createElement(Button, {
     color: "secondary",
     variant: "contained",
     onClick: function onClick() {
-      onClose(false);
+      return onClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "contained",
+    onClick: function onClick() {
+      jbrowse.setDefaultSessionConf(session);
+      onClose();
     }
-  }, "Return")));
+  }, "Set current session as default")));
 });
 
 
@@ -2887,7 +2888,7 @@ var index = {
   'default': SetDefaultSession$1
 };
 
-var useStyles$5 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$4 = /*#__PURE__*/makeStyles(function () {
   return {
     table: {
       minWidth: 500,
@@ -2908,7 +2909,7 @@ var AssemblyTable = /*#__PURE__*/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);
@@ -2942,7 +2943,7 @@ var AssemblyTable = /*#__PURE__*/observer(function (_ref) {
     }))));
   });
   return /*#__PURE__*/React.createElement(TableContainer, {
-    component: Paper$1
+    component: Paper
   }, /*#__PURE__*/React.createElement(Table, {
     className: classes.table
   }, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, /*#__PURE__*/React.createElement(Typography, {
@@ -2956,7 +2957,7 @@ var AssemblyTable = /*#__PURE__*/observer(function (_ref) {
   }, "Actions")))), /*#__PURE__*/React.createElement(TableBody, null, rows)));
 });
 
-var useStyles$6 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$5 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       flexGrow: 1,
@@ -2983,7 +2984,7 @@ var AdapterSelector = /*#__PURE__*/observer(function (_ref) {
   var adapterSelection = _ref.adapterSelection,
       setAdapterSelection = _ref.setAdapterSelection,
       adapterTypes = _ref.adapterTypes;
-  return /*#__PURE__*/React.createElement(TextField$1, {
+  return /*#__PURE__*/React.createElement(TextField, {
     value: adapterSelection,
     label: "Type",
     select: true,
@@ -3074,7 +3075,7 @@ var blank = {
 var AssemblyAddForm = /*#__PURE__*/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 = useState(''),
@@ -3170,9 +3171,9 @@ var AssemblyAddForm = /*#__PURE__*/observer(function (_ref3) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: classes.root
-  }, /*#__PURE__*/React.createElement(Paper$1, {
+  }, /*#__PURE__*/React.createElement(Paper, {
     className: classes.paper
-  }, /*#__PURE__*/React.createElement(TextField$1, {
+  }, /*#__PURE__*/React.createElement(TextField, {
     id: "assembly-name",
     inputProps: {
       'data-testid': 'assembly-name'
@@ -3184,7 +3185,7 @@ var AssemblyAddForm = /*#__PURE__*/observer(function (_ref3) {
     onChange: function onChange(event) {
       return setAssemblyName(event.target.value);
     }
-  }), /*#__PURE__*/React.createElement(TextField$1, {
+  }), /*#__PURE__*/React.createElement(TextField, {
     id: "assembly-name",
     inputProps: {
       'data-testid': 'assembly-display-name'
@@ -3236,7 +3237,7 @@ var AssemblyEditor = /*#__PURE__*/observer(function (_ref) {
   });
 });
 
-var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     titleBox: {
       color: '#fff',
@@ -3263,7 +3264,7 @@ var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
 var AssemblyManager$1 = /*#__PURE__*/observer(function (_ref) {
   var rootModel = _ref.rootModel,
       _onClose = _ref.onClose;
-  var classes = useStyles$7();
+  var classes = useStyles$6();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -3360,7 +3361,7 @@ var ManageConnectionsDialog = /*#__PURE__*/lazy(function () {
 var ToggleConnectionsDialog = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return ToggleConnectionsDialog$2; });
 });
-var useStyles$8 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
   var _theme$palette$tertia, _theme$palette$tertia2;
 
   return {
@@ -3432,7 +3433,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)'));
@@ -3658,7 +3659,7 @@ var HierarchicalTrackSelectorContainer = /*#__PURE__*/observer(function (_ref5)
   var model = _ref5.model,
       toolbarHeight = _ref5.toolbarHeight,
       overrideDimensions = _ref5.overrideDimensions;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   var session = getSession(model);
 
   var _useState3 = useState(null),
@@ -3709,7 +3710,7 @@ var HierarchicalTrackSelectorHeader = /*#__PURE__*/observer(function (_ref6) {
       setHeaderHeight = _ref6.setHeaderHeight,
       setAssemblyIdx = _ref6.setAssemblyIdx,
       assemblyIdx = _ref6.assemblyIdx;
-  var classes = useStyles$8();
+  var classes = useStyles$7();
   var session = getSession(model);
 
   var _useState5 = useState(),
@@ -3823,7 +3824,7 @@ var HierarchicalTrackSelectorHeader = /*#__PURE__*/observer(function (_ref6) {
     onClick: function onClick(event) {
       setConnectionAnchorEl(event.currentTarget);
     }
-  }, /*#__PURE__*/React.createElement(PowerOutlinedIcon, null)), /*#__PURE__*/React.createElement(TextField$1, {
+  }, /*#__PURE__*/React.createElement(PowerOutlinedIcon, null)), /*#__PURE__*/React.createElement(TextField, {
     className: classes.searchBox,
     label: "Filter tracks",
     value: model.filterText,
@@ -3927,7 +3928,7 @@ var HierarchicalTrackSelector$1 = {
   'default': HierarchicalTrackSelectorContainer
 };
 
-var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$8 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     spacing: {
       marginBottom: theme.spacing(3)
@@ -3940,24 +3941,72 @@ function StatusMessage(_ref) {
 
   var trackAdapter = _ref.trackAdapter,
       trackType = _ref.trackType;
-  var classes = useStyles$9();
-  return trackAdapter.type === 'SNPCoverageAdapter' ? /*#__PURE__*/React.createElement(Typography$1, {
+  var classes = useStyles$8();
+  return trackAdapter.type === 'SNPCoverageAdapter' ? /*#__PURE__*/React.createElement(Typography, {
     className: classes.spacing
-  }, "Selected ", /*#__PURE__*/React.createElement("code", null, trackType), ". Using adapter", ' ', /*#__PURE__*/React.createElement("code", null, trackAdapter.type), " with subadapter", ' ', /*#__PURE__*/React.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.createElement(Typography$1, {
+  }, "Selected ", /*#__PURE__*/React.createElement("code", null, trackType), ". Using adapter", ' ', /*#__PURE__*/React.createElement("code", null, trackAdapter.type), " with subadapter", ' ', /*#__PURE__*/React.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.createElement(Typography, {
     className: classes.spacing
   }, "Using adapter ", /*#__PURE__*/React.createElement("code", null, trackAdapter.type), " and guessing track type", ' ', /*#__PURE__*/React.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.createElement(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.createElement(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__*/observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   var session = getSession(model);
-  var trackAdapter = model.trackAdapter;
+  var trackAdapter = model.trackAdapter; // prettier-ignore
+
+  var adapters = getAdapterTypes(getEnv(session).pluginManager);
   return /*#__PURE__*/React.createElement(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) {
@@ -3969,27 +4018,35 @@ var TrackAdapterSelector = /*#__PURE__*/observer(function (_ref2) {
         'data-testid': 'adapterTypeSelect'
       }
     }
-  }, 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.createElement(MenuItem$1, {
+    var _elt$adapterMetadata3, _elt$adapterMetadata4;
+
+    return /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography$1, {
+  var classes = useStyles$8();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.createElement(Link$1, {
+  }, "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.createElement(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.createElement(Link$1, {
+  }, "check for new releases"), ' ', "of JBrowse to see if they support this data type or", ' ', /*#__PURE__*/React.createElement(Link, {
     href: "https://github.com/GMOD/jbrowse-components/issues/new",
     target: "_blank",
     rel: "noopener noreferrer"
@@ -4000,14 +4057,15 @@ function UnknownAdapterPrompt(_ref3) {
 
 var TrackTypeSelector = /*#__PURE__*/observer(function (_ref4) {
   var model = _ref4.model;
-  var classes = useStyles$9();
+  var classes = useStyles$8();
   var session = getSession(model);
   var trackType = model.trackType;
+  var trackTypes = getTrackTypes(getEnv(session).pluginManager);
   return /*#__PURE__*/React.createElement(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) {
@@ -4019,10 +4077,9 @@ var TrackTypeSelector = /*#__PURE__*/observer(function (_ref4) {
         'data-testid': 'trackTypeSelect'
       }
     }
-  }, 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.createElement(MenuItem$1, {
+    return /*#__PURE__*/React.createElement(MenuItem, {
       key: name,
       value: name
     }, name);
@@ -4048,8 +4105,9 @@ var TrackAssemblySelector = /*#__PURE__*/observer(function (_ref6) {
       }
     }
   }, session.assemblies.map(function (conf) {
-    var name = readConfObject(conf, 'name');
-    return /*#__PURE__*/React.createElement(MenuItem$1, {
+    return readConfObject(conf, 'name');
+  }).map(function (name) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
       key: name,
       value: name
     }, name);
@@ -4058,20 +4116,21 @@ var TrackAssemblySelector = /*#__PURE__*/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.createElement(Typography$1, {
+    return /*#__PURE__*/React.createElement(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.createElement(Link$1, {
+    }, "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.createElement(Link, {
       href: "https://github.com/GMOD/jbrowse-components/releases",
       target: "_blank",
       rel: "noopener noreferrer"
-    }, "check for new releases"), ' ', "of JBrowse or", ' ', /*#__PURE__*/React.createElement(Link$1, {
+    }, "check for new releases"), ' ', "of JBrowse or", ' ', /*#__PURE__*/React.createElement(Link, {
       href: "https://github.com/GMOD/jbrowse-components/issues/new",
       target: "_blank",
       rel: "noopener noreferrer"
@@ -4084,14 +4143,18 @@ function ConfirmTrack(_ref7) {
     });
   }
 
+  if (adapterHint === '' && trackAdapter) {
+    model.setAdapterHint(trackAdapter.type);
+  }
+
   if (!(trackAdapter !== null && trackAdapter !== void 0 && trackAdapter.type)) {
-    return /*#__PURE__*/React.createElement(Typography$1, null, "Could not recognize this data type.");
+    return /*#__PURE__*/React.createElement(Typography, null, "Could not recognize this data type.");
   }
 
   return /*#__PURE__*/React.createElement("div", null, trackAdapter ? /*#__PURE__*/React.createElement(StatusMessage, {
     trackAdapter: trackAdapter,
     trackType: trackType
-  }) : null, warningMessage ? /*#__PURE__*/React.createElement(Typography$1, {
+  }) : null, warningMessage ? /*#__PURE__*/React.createElement(Typography, {
     style: {
       color: 'orange'
     }
@@ -4118,7 +4181,7 @@ function ConfirmTrack(_ref7) {
 
 var ConfirmTrack$1 = /*#__PURE__*/observer(ConfirmTrack);
 
-var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     paper: {
       display: 'flex',
@@ -4133,7 +4196,7 @@ var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
 
 function TrackSourceSelect(_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
+  var classes = useStyles$9();
   var rootModel = getRoot(model);
   return /*#__PURE__*/React.createElement(Paper, {
     className: classes.paper
@@ -4158,7 +4221,7 @@ function TrackSourceSelect(_ref) {
 
 var TrackSourceSelect$1 = /*#__PURE__*/observer(TrackSourceSelect);
 
-var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4191,7 +4254,7 @@ function AddTrackWidget(_ref) {
       activeStep = _useState2[0],
       setActiveStep = _useState2[1];
 
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   var session = getSession(model);
   var assembly = model.assembly,
       trackAdapter = model.trackAdapter,
@@ -4371,7 +4434,7 @@ function ConnectionTypeSelect(props) {
 
   return /*#__PURE__*/React.createElement("form", {
     autoComplete: "off"
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(TextField$1, {
     value: connectionType.name,
     label: "connectionType",
     helperText: connectionType.description ? /*#__PURE__*/React.createElement(React.Fragment, null, connectionType.description, connectionType.url ? /*#__PURE__*/React.createElement(IconButton$1, {
@@ -4392,7 +4455,7 @@ function ConnectionTypeSelect(props) {
   })));
 }
 
-var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4434,7 +4497,7 @@ function AddConnectionWidget(_ref) {
       activeStep = _useState8[0],
       setActiveStep = _useState8[1];
 
-  var classes = useStyles$c();
+  var classes = useStyles$b();
   var session = getSession(model);
 
   var _getEnv = getEnv(session),
@@ -4607,7 +4670,7 @@ var DeleteConnectionDialog$3 = {
   'default': DeleteConnectionDialog$2
 };
 
-var useStyles$d = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4626,7 +4689,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;
@@ -4672,7 +4735,7 @@ var ManageConnectionsDialog$2 = {
   'default': ManageConnectionsDialog$1
 };
 
-var useStyles$e = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4692,7 +4755,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) {