@jbrowse/plugin-data-management 1.4.1 → 1.5.2

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

@@ -2,19 +2,15 @@ import React, { useState, useEffect, lazy, Suspense, useRef, useMemo, useCallbac
 import ConnectionType from '@jbrowse/core/pluggableElementTypes/ConnectionType';
 import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
 import Plugin from '@jbrowse/core/Plugin';
-import { objectHash, getSession, isElectron, isAbstractMenuManager } from '@jbrowse/core/util';
-import NoteAddIcon from '@material-ui/icons/NoteAdd';
-import InputIcon from '@material-ui/icons/Input';
-import ExtensionIcon from '@material-ui/icons/Extension';
 import { baseConnectionConfig, BaseConnectionModelFactory } from '@jbrowse/core/pluggableElementTypes/models';
-import { ConfigurationSchema, ConfigurationReference, readConfObject, getConf } from '@jbrowse/core/configuration';
+import { ConfigurationSchema, ConfigurationReference, getConf, readConfObject } from '@jbrowse/core/configuration';
+import { objectHash, getSession, isElectron } from '@jbrowse/core/util';
 import { types, getParent, getEnv, getRoot } from 'mobx-state-tree';
-import { GenomesFile, TrackDbFile, HubFile } from '@gmod/ucsc-hub';
 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, List, Card, CardContent, Link, CardActions, makeStyles as makeStyles$1, 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';
@@ -25,22 +21,8 @@ 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 ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import CreateIcon from '@material-ui/icons/Create';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -54,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) {
@@ -246,6 +230,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -406,7 +392,8 @@ var ucscConfigSchema = /*#__PURE__*/ConfigurationSchema('UCSCTrackHubConnection'
   hubTxtLocation: {
     type: 'fileLocation',
     defaultValue: {
-      uri: 'http://mysite.com/path/to/hub.txt'
+      uri: 'http://mysite.com/path/to/hub.txt',
+      locationType: 'UriLocation'
     },
     description: 'location of the hub file (usually called hub.txt)'
   },
@@ -516,11 +503,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -531,8 +516,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -637,11 +623,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -818,13 +802,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1136,14 +1119,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -1153,7 +1141,8 @@ function fetchHubFile(_x) {
 
 function _fetchHubFile() {
   _fetchHubFile = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(hubFileLocation) {
-    var hubFileText;
+    var hubFileText, _yield$import, HubFile;
+
     return runtime_1.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -1164,19 +1153,25 @@ function _fetchHubFile() {
 
           case 3:
             hubFileText = _context.sent;
+            _context.next = 6;
+            return import('@gmod/ucsc-hub');
+
+          case 6:
+            _yield$import = _context.sent;
+            HubFile = _yield$import.HubFile;
             return _context.abrupt("return", new HubFile(hubFileText));
 
-          case 7:
-            _context.prev = 7;
+          case 11:
+            _context.prev = 11;
             _context.t0 = _context["catch"](0);
             throw new Error("Not a valid hub.txt file, got error: '".concat(_context.t0, "'"));
 
-          case 10:
+          case 14:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[0, 7]]);
+    }, _callee, null, [[0, 11]]);
   }));
   return _fetchHubFile.apply(this, arguments);
 }
@@ -1187,7 +1182,8 @@ function fetchGenomesFile(_x2) {
 
 function _fetchGenomesFile() {
   _fetchGenomesFile = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(genomesFileLocation) {
-    var genomesFileText;
+    var genomesFileText, _yield$import2, GenomesFile;
+
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
@@ -1197,9 +1193,15 @@ function _fetchGenomesFile() {
 
           case 2:
             genomesFileText = _context2.sent;
+            _context2.next = 5;
+            return import('@gmod/ucsc-hub');
+
+          case 5:
+            _yield$import2 = _context2.sent;
+            GenomesFile = _yield$import2.GenomesFile;
             return _context2.abrupt("return", new GenomesFile(genomesFileText));
 
-          case 4:
+          case 8:
           case "end":
             return _context2.stop();
         }
@@ -1215,7 +1217,8 @@ function fetchTrackDbFile(_x3) {
 
 function _fetchTrackDbFile() {
   _fetchTrackDbFile = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(trackDbFileLocation) {
-    var trackDbFileText;
+    var text, _yield$import3, TrackDbFile;
+
     return runtime_1.wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
@@ -1224,10 +1227,16 @@ function _fetchTrackDbFile() {
             return openLocation(trackDbFileLocation).readFile('utf8');
 
           case 2:
-            trackDbFileText = _context3.sent;
-            return _context3.abrupt("return", new TrackDbFile(trackDbFileText));
+            text = _context3.sent;
+            _context3.next = 5;
+            return import('@gmod/ucsc-hub');
 
-          case 4:
+          case 5:
+            _yield$import3 = _context3.sent;
+            TrackDbFile = _yield$import3.TrackDbFile;
+            return _context3.abrupt("return", new TrackDbFile(text));
+
+          case 8:
           case "end":
             return _context3.stop();
         }
@@ -1295,11 +1304,13 @@ function makeTrackConfig(track, categories, trackDbFileLocation, trackDb, sequen
 
   if (trackDbFileLocation.uri) {
     bigDataLocation = {
-      uri: new URL(track.get('bigDataUrl'), trackDbFileLocation.uri).href
+      uri: new URL(track.get('bigDataUrl'), trackDbFileLocation.uri).href,
+      locationType: 'UriLocation'
     };
   } else {
     bigDataLocation = {
-      localPath: track.get('bigDataUrl')
+      localPath: track.get('bigDataUrl'),
+      locationType: 'LocalPathLocation'
     };
   }
 
@@ -1309,15 +1320,19 @@ function makeTrackConfig(track, categories, trackDbFileLocation, trackDb, sequen
     case 'bam':
       if (trackDbFileLocation.uri) {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href
+          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         } : {
-          uri: new URL("".concat(track.get('bigDataUrl'), ".bai"), trackDbFileLocation.uri).href
+          uri: new URL("".concat(track.get('bigDataUrl'), ".bai"), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         };
       } else {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          localPath: track.get('bigDataIndex')
+          localPath: track.get('bigDataIndex'),
+          locationType: 'LocalPathLocation'
         } : {
-          localPath: "".concat(track.get('bigDataUrl'), ".bai")
+          localPath: "".concat(track.get('bigDataUrl'), ".bai"),
+          locationType: 'LocalPathLocation'
         };
       }
 
@@ -1467,15 +1482,19 @@ function makeTrackConfig(track, categories, trackDbFileLocation, trackDb, sequen
     case 'cram':
       if (trackDbFileLocation.uri) {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href
+          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         } : {
-          uri: new URL("".concat(track.get('bigDataUrl'), ".crai"), trackDbFileLocation.uri).href
+          uri: new URL("".concat(track.get('bigDataUrl'), ".crai"), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         };
       } else {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          localPath: track.get('bigDataIndex')
+          localPath: track.get('bigDataIndex'),
+          locationType: 'LocalPathLocation'
         } : {
-          localPath: "".concat(track.get('bigDataUrl'), ".crai")
+          localPath: "".concat(track.get('bigDataUrl'), ".crai"),
+          locationType: 'LocalPathLocation'
         };
       }
 
@@ -1519,15 +1538,19 @@ function makeTrackConfig(track, categories, trackDbFileLocation, trackDb, sequen
     case 'vcfTabix':
       if (trackDbFileLocation.uri) {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href
+          uri: new URL(track.get('bigDataIndex'), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         } : {
-          uri: new URL("".concat(track.get('bigDataUrl'), ".tbi"), trackDbFileLocation.uri).href
+          uri: new URL("".concat(track.get('bigDataUrl'), ".tbi"), trackDbFileLocation.uri).href,
+          locationType: 'UriLocation'
         };
       } else {
         bigDataIndexLocation = track.get('bigDataIndex') ? {
-          localPath: track.get('bigDataIndex')
+          localPath: track.get('bigDataIndex'),
+          locationType: 'LocalPathLocation'
         } : {
-          localPath: "".concat(track.get('bigDataUrl'), ".tbi")
+          localPath: "".concat(track.get('bigDataUrl'), ".tbi"),
+          locationType: 'LocalPathLocation'
         };
       }
 
@@ -1578,22 +1601,17 @@ function UCSCTrackHubConnection(pluginManager) {
   }).actions(function (self) {
     return {
       connect: function connect() {
-        var connectionName = readConfObject(self.configuration, 'name');
-        var hubFileLocation = readConfObject(self.configuration, 'hubTxtLocation');
+        var connectionName = getConf(self, 'name');
+        var hubFileLocation = getConf(self, 'hubTxtLocation');
         var session = getSession(self);
         fetchHubFile(hubFileLocation).then(function (hubFile) {
-          var genomesFileLocation;
-
-          if (hubFileLocation.uri) {
-            genomesFileLocation = {
-              uri: new URL(hubFile.get('genomesFile'), hubFileLocation.uri).href
-            };
-          } else {
-            genomesFileLocation = {
-              localPath: hubFile.get('genomesFile')
-            };
-          }
-
+          var genomesFileLocation = hubFileLocation.uri ? {
+            uri: new URL(hubFile.get('genomesFile'), hubFileLocation.uri).href,
+            locationType: 'UriLocation'
+          } : {
+            localPath: hubFile.get('genomesFile'),
+            locationType: 'LocalPathLocation'
+          };
           return Promise.all([hubFile, fetchGenomesFile(genomesFileLocation)]);
         }).then(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
@@ -1611,7 +1629,7 @@ function UCSCTrackHubConnection(pluginManager) {
                   genomeName = _step$value[0],
                   genome = _step$value[1];
 
-              var assemblyNames = readConfObject(self.configuration, 'assemblyNames');
+              var assemblyNames = getConf(self, 'assemblyNames');
 
               if (assemblyNames.length > 0 && !assemblyNames.includes(genomeName)) {
                 return "break";
@@ -1625,18 +1643,13 @@ function UCSCTrackHubConnection(pluginManager) {
                 throw new Error("Cannot find assembly for \"".concat(genomeName, "\" from the genomes file for connection \"").concat(connectionName, "\""));
               }
 
-              var trackDbFileLocation = void 0;
-
-              if (hubFileLocation.uri) {
-                trackDbFileLocation = {
-                  uri: new URL(genome.get('trackDb'), new URL(hubFile.get('genomesFile'), hubFileLocation.uri)).href
-                };
-              } else {
-                trackDbFileLocation = {
-                  localPath: genome.get('trackDb')
-                };
-              }
-
+              var trackDbFileLocation = hubFileLocation.uri ? {
+                uri: new URL(genome.get('trackDb'), new URL(hubFile.get('genomesFile'), hubFileLocation.uri)).href,
+                locationType: 'UriLocation'
+              } : {
+                localPath: genome.get('trackDb'),
+                locationType: 'LocalPathLocation'
+              };
               trackDbData.push(Promise.all([trackDbFileLocation, fetchTrackDbFile(trackDbFileLocation), genomeName, assemblyConf]));
             };
 
@@ -1694,13 +1707,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,
@@ -1756,7 +1762,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() {
@@ -1823,7 +1829,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) : '');
       }
 
     };
@@ -1865,9 +1871,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;
 }
 
@@ -2142,15 +2148,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));
 }
@@ -2212,7 +2220,7 @@ function InstalledPlugin(_ref2) {
     onClose: function onClose(name) {
       if (name) {
         var pluginMetadata = pluginManager.pluginMetadata[plugin.name];
-        var pluginUrl = pluginMetadata.url;
+        var pluginUrl = pluginMetadata.url || pluginMetadata.esmUrl || pluginMetadata.umdUrl || pluginMetadata.cjsUrl;
 
         if (adminMode) {
           jbrowse.removePlugin(pluginUrl);
@@ -2264,7 +2272,7 @@ function InstalledPluginsList(_ref) {
 
 var InstalledPluginsList$1 = /*#__PURE__*/observer(InstalledPluginsList);
 
-var useStyles$1 = /*#__PURE__*/makeStyles(function () {
+var useStyles$1 = /*#__PURE__*/makeStyles$1(function () {
   return {
     card: {
       margin: '1em'
@@ -2348,101 +2356,194 @@ function PluginCard(_ref) {
 
 var PluginCard$1 = /*#__PURE__*/observer(PluginCard);
 
-var useStyles$2 = /*#__PURE__*/makeStyles(function () {
+var useStyles$2 = /*#__PURE__*/makeStyles$1(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) {
   return {
-    accordion: {
-      marginTop: '1em'
+    root: {
+      margin: theme.spacing(1)
     },
     expandIcon: {
       color: '#fff'
     },
-    searchBox: {
-      marginBottom: theme.spacing(2)
-    },
     adminBadge: {
       margin: '0.5em',
       borderRadius: 3,
@@ -2464,7 +2565,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];
@@ -2486,60 +2587,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 = 15;
+              _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 15:
+            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: {
@@ -2555,10 +2667,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) {
@@ -2600,7 +2713,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, {
@@ -2725,171 +2843,56 @@ var _default = /*#__PURE__*/function (_Plugin) {
     }
   }, {
     key: "configure",
-    value: function configure(pluginManager) {
-      if (isAbstractMenuManager(pluginManager.rootModel)) {
-        pluginManager.rootModel.appendToMenu('File', {
-          label: 'Open track',
-          icon: NoteAddIcon,
-          onClick: function onClick(session) {
-            if (session.views.length === 0) {
-              session.notify('Please open a view to add a track first');
-            } else if (session.views.length >= 1) {
-              var widget = session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                view: session.views[0].id
-              });
-              session.showWidget(widget);
-
-              if (session.views.length > 1) {
-                session.notify("This will add a track to the first view. Note: if you want to open a track in a specific view open the track selector for that view and use the add track (plus icon) in the bottom right");
-              }
-            }
-          }
-        });
-        pluginManager.rootModel.appendToMenu('File', {
-          label: 'Open connection',
-          icon: InputIcon,
-          onClick: function onClick(session) {
-            var widget = session.addWidget('AddConnectionWidget', 'addConnectionWidget');
-            session.showWidget(widget);
-          }
-        });
-        pluginManager.rootModel.appendToMenu('File', {
-          label: 'Plugin store',
-          icon: ExtensionIcon,
-          onClick: function onClick(session) {
-            var widget = session.addWidget('PluginStoreWidget', 'pluginStoreWidget');
-            session.showWidget(widget);
-          }
-        });
-      }
-    }
+    value: function configure(pluginManager) {}
   }]);
 
   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');
-    }
-  }, "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))
-      }));
+      onClose();
     }
-
-    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();
     }
-  }, "Return")));
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    variant: "contained",
+    onClick: function onClick() {
+      jbrowse.setDefaultSessionConf(session);
+      onClose();
+    }
+  }, "Set current session as default")));
 });
 
 
@@ -2899,7 +2902,7 @@ var index = {
   'default': SetDefaultSession$1
 };
 
-var useStyles$5 = /*#__PURE__*/makeStyles$1(function () {
+var useStyles$4 = /*#__PURE__*/makeStyles$1(function () {
   return {
     table: {
       minWidth: 500,
@@ -2920,7 +2923,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);
@@ -2954,7 +2957,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, {
@@ -2968,7 +2971,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$1(function (theme) {
   return {
     root: {
       flexGrow: 1,
@@ -2995,7 +2998,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,
@@ -3080,10 +3083,13 @@ var AdapterInput = /*#__PURE__*/observer(function (_ref2) {
 
   return null;
 });
+var blank = {
+  uri: ''
+};
 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(''),
@@ -3101,37 +3107,27 @@ var AssemblyAddForm = /*#__PURE__*/observer(function (_ref3) {
       adapterSelection = _useState6[0],
       setAdapterSelection = _useState6[1];
 
-  var _useState7 = useState({
-    uri: ''
-  }),
+  var _useState7 = useState(blank),
       _useState8 = _slicedToArray(_useState7, 2),
       fastaLocation = _useState8[0],
       setFastaLocation = _useState8[1];
 
-  var _useState9 = useState({
-    uri: ''
-  }),
+  var _useState9 = useState(blank),
       _useState10 = _slicedToArray(_useState9, 2),
       faiLocation = _useState10[0],
       setFaiLocation = _useState10[1];
 
-  var _useState11 = useState({
-    uri: ''
-  }),
+  var _useState11 = useState(blank),
       _useState12 = _slicedToArray(_useState11, 2),
       gziLocation = _useState12[0],
       setGziLocation = _useState12[1];
 
-  var _useState13 = useState({
-    uri: ''
-  }),
+  var _useState13 = useState(blank),
       _useState14 = _slicedToArray(_useState13, 2),
       twoBitLocation = _useState14[0],
       setTwoBitLocation = _useState14[1];
 
-  var _useState15 = useState({
-    uri: ''
-  }),
+  var _useState15 = useState(blank),
       _useState16 = _slicedToArray(_useState15, 2),
       chromSizesLocation = _useState16[0],
       setChromSizesLocation = _useState16[1];
@@ -3140,8 +3136,7 @@ var AssemblyAddForm = /*#__PURE__*/observer(function (_ref3) {
     if (assemblyName === '') {
       rootModel.session.notify("Can't create an assembly without a name");
     } else {
-      setFormOpen(false); // setIsAssemblyBeingEdited(true)
-
+      setFormOpen(false);
       var newAssembly;
 
       if (adapterSelection === 'IndexedFastaAdapter') {
@@ -3190,9 +3185,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'
@@ -3204,7 +3199,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'
@@ -3256,7 +3251,7 @@ var AssemblyEditor = /*#__PURE__*/observer(function (_ref) {
   });
 });
 
-var useStyles$7 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$6 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     titleBox: {
       color: '#fff',
@@ -3283,7 +3278,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),
@@ -3380,7 +3375,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$1(function (theme) {
   var _theme$palette$tertia, _theme$palette$tertia2;
 
   return {
@@ -3450,11 +3445,13 @@ var Node = function Node(props) {
       _onChange = data.onChange,
       toggleCollapse = data.toggleCollapse,
       conf = data.conf,
-      onMoreInfo = data.onMoreInfo;
-  var classes = useStyles$8();
+      onMoreInfo = data.onMoreInfo,
+      drawerPosition = data.drawerPosition;
+  var classes = useStyles$7();
   var width = 10;
   var marginLeft = nestingLevel * width + (isLeaf ? width : 0);
   var unsupported = name && (name.endsWith('(Unsupported)') || name.endsWith('(Unknown)'));
+  var description = conf && readConfObject(conf, ['description']) || '';
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: !isLeaf ? classes.accordionBase : undefined
@@ -3482,7 +3479,10 @@ var Node = function Node(props) {
     className: !isLeaf ? classes.accordionColor : undefined
   }, !isLeaf ? /*#__PURE__*/React.createElement("div", {
     className: classes.accordionText
-  }, /*#__PURE__*/React.createElement(Typography, null, isOpen ? /*#__PURE__*/React.createElement(ArrowDropDownIcon, null) : /*#__PURE__*/React.createElement(ArrowRightIcon, null), name)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormControlLabel, {
+  }, /*#__PURE__*/React.createElement(Typography, null, isOpen ? /*#__PURE__*/React.createElement(ArrowDropDownIcon, null) : /*#__PURE__*/React.createElement(ArrowRightIcon, null), name)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: description,
+    placement: drawerPosition === 'left' ? 'right' : 'left'
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
     className: classes.checkboxLabel,
     control: /*#__PURE__*/React.createElement(Checkbox, {
       className: classes.compactCheckbox,
@@ -3497,7 +3497,7 @@ var Node = function Node(props) {
       }
     }),
     label: name
-  }), /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
     onClick: function onClick(e) {
       return onMoreInfo({
         target: e.currentTarget,
@@ -3543,6 +3543,7 @@ var HierarchicalTree = /*#__PURE__*/observer(function (_ref) {
       setMoreInfo = _useState2[1];
 
   var session = getSession(model);
+  var drawerPosition = session.drawerPosition;
   var extra = useMemo(function () {
     return {
       onChange: function onChange(trackId) {
@@ -3551,9 +3552,10 @@ var HierarchicalTree = /*#__PURE__*/observer(function (_ref) {
       toggleCollapse: function toggleCollapse(pathName) {
         return model.toggleCategory(pathName);
       },
-      onMoreInfo: setMoreInfo
+      onMoreInfo: setMoreInfo,
+      drawerPosition: drawerPosition
     };
-  }, [view, model]);
+  }, [view, model, drawerPosition]);
   var treeWalker = useCallback( /*#__PURE__*/runtime_1.mark(function treeWalker() {
     var i, parentMeta, _i, curr;
 
@@ -3671,7 +3673,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),
@@ -3722,7 +3724,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(),
@@ -3836,7 +3838,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,
@@ -3940,7 +3942,7 @@ var HierarchicalTrackSelector$1 = {
   'default': HierarchicalTrackSelectorContainer
 };
 
-var useStyles$9 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$8 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     spacing: {
       marginBottom: theme.spacing(3)
@@ -3953,28 +3955,76 @@ 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));
+      }
 
-function TrackAdapterSelector(_ref2) {
-  var adapterHint = _ref2.adapterHint,
-      model = _ref2.model;
-  var classes = useStyles$9();
+      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$8();
   var session = getSession(model);
+  var trackAdapter = model.trackAdapter; // prettier-ignore
+
+  var adapters = getAdapterTypes(getEnv(session).pluginManager);
   return /*#__PURE__*/React.createElement(TextField, {
     className: classes.spacing,
-    value: adapterHint,
+    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) {
-      model.setAdapterHint(event.target.value);
+      return model.setAdapterHint(event.target.value);
     },
     SelectProps: {
       // @ts-ignore
@@ -3982,56 +4032,119 @@ function TrackAdapterSelector(_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();
-  var adapterHint = model.adapterHint;
-  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"
   }, "file an issue"), ' ', "and add a feature request for this data type."), /*#__PURE__*/React.createElement(TrackAdapterSelector, {
-    adapterHint: adapterHint,
     model: model
   }));
 }
 
-function ConfirmTrack(_ref4) {
+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: "Select a track type",
+    select: true,
+    fullWidth: true,
+    onChange: function onChange(event) {
+      model.setTrackType(event.target.value);
+    },
+    SelectProps: {
+      // @ts-ignore
+      SelectDisplayProps: {
+        'data-testid': 'trackTypeSelect'
+      }
+    }
+  }, trackTypes.map(function (_ref5) {
+    var name = _ref5.name;
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: name,
+      value: name
+    }, name);
+  }));
+});
+var TrackAssemblySelector = /*#__PURE__*/observer(function (_ref6) {
+  var model = _ref6.model;
+  var session = getSession(model);
+  var assembly = model.assembly;
+  return /*#__PURE__*/React.createElement(TextField, {
+    value: assembly,
+    label: "assemblyName",
+    helperText: "Assembly to which the track will be added",
+    select: true,
+    fullWidth: true,
+    onChange: function onChange(event) {
+      return model.setAssembly(event.target.value);
+    },
+    SelectProps: {
+      // @ts-ignore
+      SelectDisplayProps: {
+        'data-testid': 'assemblyNameSelect'
+      }
+    }
+  }, session.assemblies.map(function (conf) {
+    return readConfObject(conf, 'name');
+  }).map(function (name) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: name,
+      value: name
+    }, name);
+  }));
+});
+
+function ConfirmTrack(_ref7) {
+  var model = _ref7.model;
+  var classes = useStyles$8();
   var trackName = model.trackName,
       trackAdapter = model.trackAdapter,
       trackType = model.trackType,
-      assembly = model.assembly,
       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"
@@ -4044,21 +4157,22 @@ function ConfirmTrack(_ref4) {
     });
   }
 
+  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(React.Fragment, null, trackAdapter ? /*#__PURE__*/React.createElement(StatusMessage, {
+  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'
     }
-  }, warningMessage) : null, /*#__PURE__*/React.createElement(TrackAdapterSelector, {
-    adapterHint: adapterHint,
-    model: model
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }, warningMessage) : null, /*#__PURE__*/React.createElement(TextField, {
     className: classes.spacing,
     label: "trackName",
     helperText: "A name for this track",
@@ -4070,88 +4184,58 @@ function ConfirmTrack(_ref4) {
     inputProps: {
       'data-testid': 'trackNameInput'
     }
-  }), /*#__PURE__*/React.createElement(TextField, {
-    className: classes.spacing,
-    value: trackType,
-    label: "trackType",
-    helperText: "A track type",
-    select: true,
-    fullWidth: true,
-    onChange: function onChange(event) {
-      model.setTrackType(event.target.value);
-    },
-    SelectProps: {
-      // @ts-ignore
-      SelectDisplayProps: {
-        'data-testid': 'trackTypeSelect'
-      }
-    }
-  }, getEnv(session).pluginManager.getElementTypesInGroup('track') // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  .map(function (_ref5) {
-    var name = _ref5.name;
-    return /*#__PURE__*/React.createElement(MenuItem$1, {
-      key: name,
-      value: name
-    }, name);
-  })), /*#__PURE__*/React.createElement(TextField, {
-    value: assembly,
-    label: "assemblyName",
-    helperText: "Assembly to which the track will be added",
-    select: true,
-    fullWidth: true,
-    onChange: function onChange(event) {
-      model.setAssembly(event.target.value);
-    },
-    SelectProps: {
-      // @ts-ignore
-      SelectDisplayProps: {
-        'data-testid': 'assemblyNameSelect'
-      }
-    }
-  }, session.assemblies.map(function (assemblyConf) {
-    var assemblyName = readConfObject(assemblyConf, 'name');
-    return /*#__PURE__*/React.createElement(MenuItem$1, {
-      key: assemblyName,
-      value: assemblyName
-    }, assemblyName);
-  })));
+  }), /*#__PURE__*/React.createElement(TrackAdapterSelector, {
+    model: model
+  }), /*#__PURE__*/React.createElement(TrackTypeSelector, {
+    model: model
+  }), /*#__PURE__*/React.createElement(TrackAssemblySelector, {
+    model: model
+  }));
 }
 
 var ConfirmTrack$1 = /*#__PURE__*/observer(ConfirmTrack);
 
-var useStyles$a = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$9 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
-    root: {
-      display: 'flex',
-      flexDirection: 'column'
-    },
     paper: {
+      display: 'flex',
+      flexDirection: 'column',
       padding: theme.spacing(1)
+    },
+    spacer: {
+      height: theme.spacing(8)
     }
   };
 });
 
 function TrackSourceSelect(_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Paper, {
+  var classes = useStyles$9();
+  var rootModel = getRoot(model);
+  return /*#__PURE__*/React.createElement(Paper, {
     className: classes.paper
   }, /*#__PURE__*/React.createElement(FileSelector$1, {
     name: "Main file",
     description: "",
     location: model.trackData,
-    setLocation: model.setTrackData
+    setLocation: model.setTrackData,
+    setName: model.setTrackName,
+    rootModel: rootModel
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.spacer
   }), /*#__PURE__*/React.createElement(FileSelector$1, {
     name: "Index file",
-    description: "Automatically inferred from the URL if not supplied",
+    description: "(Optional) The URL of the index file is automatically inferred from the URL of the main file if it is not supplied.",
     location: model.indexTrackData,
-    setLocation: model.setIndexTrackData
-  })));
+    setLocation: model.setIndexTrackData,
+    setName: model.setTrackName,
+    rootModel: rootModel
+  }));
 }
 
-var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
+var TrackSourceSelect$1 = /*#__PURE__*/observer(TrackSourceSelect);
+
+var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4184,7 +4268,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,
@@ -4200,7 +4284,7 @@ function AddTrackWidget(_ref) {
   function getStepContent(step) {
     switch (step) {
       case 0:
-        return /*#__PURE__*/React.createElement(TrackSourceSelect, {
+        return /*#__PURE__*/React.createElement(TrackSourceSelect$1, {
           model: model
         });
 
@@ -4215,38 +4299,61 @@ function AddTrackWidget(_ref) {
   }
 
   function handleNext() {
-    if (activeStep !== steps.length - 1) {
-      setActiveStep(activeStep + 1);
-      return;
-    }
-
-    var trackId = "".concat(trackName.toLowerCase().replace(/ /g, '_'), "-").concat(Date.now()).concat(session.adminMode ? '' : '-sessionTrack');
-    var assemblyInstance = session.assemblyManager.get(assembly);
+    return _handleNext.apply(this, arguments);
+  }
 
-    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
-      // @ts-ignore
-      session.addTrackConf({
-        trackId: trackId,
-        type: trackType,
-        name: trackName,
-        assemblyNames: [assembly],
-        adapter: _objectSpread2(_objectSpread2({}, trackAdapter), {}, {
-          sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter'])
-        })
-      });
+  function _handleNext() {
+    _handleNext = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var trackId, assemblyInstance;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(activeStep !== steps.length - 1)) {
+                _context.next = 3;
+                break;
+              }
 
-      if (model.view) {
-        model.view.showTrack(trackId);
-      } else {
-        session.notify('Open a new view, or use the track selector in an existing view, to view this track', 'info');
-      }
+              setActiveStep(activeStep + 1);
+              return _context.abrupt("return");
 
-      model.clearData(); // @ts-ignore
+            case 3:
+              trackId = "".concat(trackName.toLowerCase().replace(/ /g, '_'), "-").concat(Date.now()).concat(session.adminMode ? '' : '-sessionTrack');
+              assemblyInstance = session.assemblyManager.get(assembly);
+
+              if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
+                // @ts-ignore
+                session.addTrackConf({
+                  trackId: trackId,
+                  type: trackType,
+                  name: trackName,
+                  assemblyNames: [assembly],
+                  adapter: _objectSpread2(_objectSpread2({}, trackAdapter), {}, {
+                    sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter'])
+                  })
+                });
+
+                if (model.view) {
+                  model.view.showTrack(trackId);
+                } else {
+                  session.notify('Open a new view, or use the track selector in an existing view, to view this track', 'info');
+                }
+
+                model.clearData(); // @ts-ignore
+
+                session.hideWidget(model);
+              } else {
+                setTrackErrorMessage('Failed to add track.\nThe configuration of this file is not currently supported.');
+              }
 
-      session.hideWidget(model);
-    } else {
-      setTrackErrorMessage('Failed to add track.\nThe configuration of this file is not currently supported.');
-    }
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _handleNext.apply(this, arguments);
   }
 
   function handleBack() {
@@ -4341,7 +4448,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, {
@@ -4362,7 +4469,7 @@ function ConnectionTypeSelect(props) {
   })));
 }
 
-var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/makeStyles(function (theme) {
   return {
     root: {
       marginTop: theme.spacing(1)
@@ -4404,7 +4511,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),
@@ -4577,7 +4684,7 @@ var DeleteConnectionDialog$3 = {
   'default': DeleteConnectionDialog$2
 };
 
-var useStyles$d = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4596,7 +4703,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;
@@ -4642,7 +4749,7 @@ var ManageConnectionsDialog$2 = {
   'default': ManageConnectionsDialog$1
 };
 
-var useStyles$e = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$d = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -4662,7 +4769,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) {