@jbrowse/plugin-linear-genome-view 1.6.4 → 1.6.7

package/dist/plugin-linear-genome-view.cjs.development.js

@@ -1313,8 +1313,7 @@ var RenderedBlocks = /*#__PURE__*/mobxReact.observer(function (_ref) {
 function LinearBlocks(_ref2) {
   var model = _ref2.model;
   var classes = useStyles$1();
-  var blockDefinitions = model.blockDefinitions; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  var blockDefinitions = model.blockDefinitions;
   var viewModel = util.getContainingView(model);
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "Blockset",
@@ -1326,10 +1325,6 @@ function LinearBlocks(_ref2) {
     model: model
   }));
 }
-
-LinearBlocks.propTypes = {
-  model: mobxReact.PropTypes.observableObject.isRequired
-};
 var LinearBlocks$1 = /*#__PURE__*/mobxReact.observer(LinearBlocks);
 
 function round(value) {
@@ -1354,7 +1349,7 @@ var useStyles$2 = /*#__PURE__*/core.makeStyles(function (theme) {
       color: theme.palette.common.white,
       fontFamily: theme.typography.fontFamily,
       padding: '4px 8px',
-      fontSize: theme.typography.pxToRem(10),
+      fontSize: theme.typography.pxToRem(12),
       lineHeight: "".concat(round(14 / 10), "em"),
       maxWidth: 300,
       wordWrap: 'break-word'
@@ -2332,9 +2327,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
               case 0:
                 self.setError();
                 aborter = new AbortController();
-                view = util.getContainingView(self);
+                view = util.getContainingView(self); // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
 
-                if (view.initialized) {
+                if (!(!view.initialized || !view.staticBlocks.contentBlocks.length)) {
                   _context.next = 5;
                   break;
                 }
@@ -2385,7 +2381,7 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
     afterAttach: function afterAttach() {
       // this autorun performs stats estimation
       //
-      // the chain of events calls estimateRegionStats against the data
+      // the chain of events calls estimateRegionsStats against the data
       // adapter which by default uses featureDensity, but can also respond
       // with a byte size estimate and fetch size limit (data adapter can
       // define what is too much data)
@@ -2398,9 +2394,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/mobxStateTree.types.compose('BaseLinearDi
               case 0:
                 _context2.prev = 0;
                 aborter = new AbortController();
-                view = util.getContainingView(self);
+                view = util.getContainingView(self); // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
 
-                if (view.initialized) {
+                if (!(!view.initialized || !view.staticBlocks.contentBlocks.length)) {
                   _context2.next = 5;
                   break;
                 }
@@ -3249,7 +3246,8 @@ var Cytobands = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var overview = _ref2.overview,
       block = _ref2.block,
       assembly = _ref2.assembly;
-  var offsetPx = block.offsetPx;
+  var offsetPx = block.offsetPx,
+      reversed = block.reversed;
   var cytobands = assembly === null || assembly === void 0 ? void 0 : (_assembly$cytobands = assembly.cytobands) === null || _assembly$cytobands === void 0 ? void 0 : _assembly$cytobands.map(function (f) {
     return {
       refName: assembly.getCanonicalRefName(f.get('refName')),
@@ -3272,6 +3270,9 @@ var Cytobands = /*#__PURE__*/mobxReact.observer(function (_ref2) {
       coord: end
     }), type];
   });
+  var arr = cytobands || [];
+  var lcap = reversed ? arr.length - 1 : 0;
+  var rcap = reversed ? 0 : arr.length - 1;
   var firstCent = true;
   return cytobands ? /*#__PURE__*/React__default.createElement("g", {
     transform: "translate(-".concat(offsetPx, ")")
@@ -3300,13 +3301,13 @@ var Cytobands = /*#__PURE__*/mobxReact.observer(function (_ref2) {
       });
     }
 
-    if (index === 0) {
+    if (lcap === index) {
       return /*#__PURE__*/React__default.createElement("path", {
         key: key,
         d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), HEADER_OVERVIEW_HEIGHT, 8),
         fill: colorMap[type]
       });
-    } else if (index === cytobands.length - 1) {
+    } else if (rcap === index) {
       return /*#__PURE__*/React__default.createElement("path", {
         key: key,
         d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, HEADER_OVERVIEW_HEIGHT, 8),
@@ -3485,20 +3486,6 @@ function OverviewScaleBar(_ref7) {
 
 var OverviewScaleBar$1 = /*#__PURE__*/mobxReact.observer(OverviewScaleBar);
 
-function getBpDisplayStr(totalBp) {
-  var displayBp;
-
-  if (Math.floor(totalBp / 1000000) > 0) {
-    displayBp = "".concat(parseFloat((totalBp / 1000000).toPrecision(3)), "Mbp");
-  } else if (Math.floor(totalBp / 1000) > 0) {
-    displayBp = "".concat(parseFloat((totalBp / 1000).toPrecision(3)), "Kbp");
-  } else {
-    displayBp = "".concat(Math.floor(totalBp), "bp");
-  }
-
-  return displayBp;
-}
-
 function ScaleBar$1(_ref) {
   var model = _ref.model,
       fontSize = _ref.fontSize;
@@ -3506,7 +3493,7 @@ function ScaleBar$1(_ref) {
       _model$dynamicBlocks = model.dynamicBlocks,
       totalWidthPx = _model$dynamicBlocks.totalWidthPxWithoutBorders,
       totalBp = _model$dynamicBlocks.totalBp;
-  var displayBp = getBpDisplayStr(totalBp);
+  var displayBp = util.getBpDisplayStr(totalBp);
   var x0 = Math.max(-offsetPx, 0);
   var x1 = x0 + totalWidthPx;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("line", {
@@ -4381,51 +4368,7 @@ function ExportSvgDlg(_ref) {
   }, "Submit")));
 }
 
-var useStyles$9 = /*#__PURE__*/styles.makeStyles(function (theme) {
-  return {
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  };
-});
-
-function ReturnToImportFormDialog(_ref) {
-  var model = _ref.model,
-      handleClose = _ref.handleClose;
-  var classes = useStyles$9();
-  return /*#__PURE__*/React__default.createElement(core.Dialog, {
-    maxWidth: "xl",
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Reference sequence", handleClose ? /*#__PURE__*/React__default.createElement(core.IconButton, {
-    className: classes.closeButton,
-    onClick: function onClick() {
-      handleClose();
-    }
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null)) : null), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Are you sure you want to return to the import form? This will lose your current view")), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
-    onClick: function onClick() {
-      model.clearView();
-      handleClose();
-    },
-    variant: "contained",
-    color: "primary",
-    autoFocus: true
-  }, "OK"), /*#__PURE__*/React__default.createElement(core.Button, {
-    onClick: function onClick() {
-      handleClose();
-    },
-    color: "secondary",
-    variant: "contained",
-    autoFocus: true
-  }, "Cancel")));
-}
-
-var ReturnToImportFormDlg = /*#__PURE__*/mobxReact.observer(ReturnToImportFormDialog);
-
-var useStyles$a = /*#__PURE__*/styles.makeStyles({
+var useStyles$9 = /*#__PURE__*/styles.makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -4438,7 +4381,7 @@ var useStyles$a = /*#__PURE__*/styles.makeStyles({
 
 function ZoomControls(_ref) {
   var model = _ref.model;
-  var classes = useStyles$a();
+  var classes = useStyles$9();
   var maxBpPerPx = model.maxBpPerPx,
       minBpPerPx = model.minBpPerPx,
       bpPerPx = model.bpPerPx,
@@ -4485,7 +4428,7 @@ function ZoomControls(_ref) {
 
 var ZoomControls$1 = /*#__PURE__*/mobxReact.observer(ZoomControls);
 
-var useStyles$b = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$a = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     headerBar: {
       height: HEADER_BAR_HEIGHT,
@@ -4520,7 +4463,7 @@ var useStyles$b = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 var HeaderButtons = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: model.activateTrackSelector,
     className: classes.toggleButton,
@@ -4534,7 +4477,7 @@ var HeaderButtons = /*#__PURE__*/mobxReact.observer(function (_ref) {
 
 function PanControls(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Button, {
     variant: "outlined",
     className: classes.panButton,
@@ -4552,7 +4495,7 @@ function PanControls(_ref2) {
 
 var RegionWidth = /*#__PURE__*/mobxReact.observer(function (_ref3) {
   var model = _ref3.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   var coarseTotalBp = model.coarseTotalBp;
   return /*#__PURE__*/React__default.createElement(core.Typography, {
     variant: "body2",
@@ -4563,7 +4506,7 @@ var RegionWidth = /*#__PURE__*/mobxReact.observer(function (_ref3) {
 
 var Controls = function Controls(_ref4) {
   var model = _ref4.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.headerBar
   }, /*#__PURE__*/React__default.createElement(HeaderButtons, {
@@ -4597,7 +4540,7 @@ var LinearGenomeViewHeader = /*#__PURE__*/mobxReact.observer(function (_ref5) {
   }));
 });
 
-var useStyles$c = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$b = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       background: core.alpha(theme.palette.background.paper, 0.8),
@@ -4631,7 +4574,7 @@ var useStyles$c = /*#__PURE__*/core.makeStyles(function (theme) {
 var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var _session$getTrackActi;
 
-  var classes = useStyles$c();
+  var classes = useStyles$b();
 
   var _React$useState = React__default.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4682,7 +4625,9 @@ var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     handleClose();
   }
 
-  var items = track.trackMenuItems();
+  var items = [].concat(_toConsumableArray((_session$getTrackActi = session.getTrackActionMenuItems) === null || _session$getTrackActi === void 0 ? void 0 : _session$getTrackActi.call(session, trackConf)), _toConsumableArray(track.trackMenuItems())).sort(function (a, b) {
+    return (b.priority || 0) - (a.priority || 0);
+  });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Paper, {
     ref: ref,
     className: clsx(className, classes.root)
@@ -4718,16 +4663,16 @@ var TrackLabel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onMenuItemClick: handleMenuItemClick,
     open: Boolean(anchorEl),
     onClose: handleClose,
-    menuItems: [].concat(_toConsumableArray((_session$getTrackActi = session.getTrackActionMenuItems) === null || _session$getTrackActi === void 0 ? void 0 : _session$getTrackActi.call(session, trackConf)), _toConsumableArray(items)).sort(function (a, b) {
-      return (b.priority || 0) - (a.priority || 0);
-    })
+    menuItems: items
   }));
 });
 var TrackLabel$1 = /*#__PURE__*/mobxReact.observer(TrackLabel);
 
-var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
-    root: {},
+    root: {
+      margin: 2
+    },
     resizeHandle: {
       height: RESIZE_HANDLE_HEIGHT,
       boxSizing: 'border-box',
@@ -4743,16 +4688,8 @@ var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
       zIndex: 3,
       borderRadius: theme.shape.borderRadius
     },
-    renderingComponentContainer: {
-      position: 'absolute',
-      // -1 offset because of the 1px border of the Paper
-      left: -1,
-      height: '100%',
-      width: '100%'
-    },
     trackLabel: {
-      zIndex: 3,
-      margin: theme.spacing(1)
+      zIndex: 3
     },
     trackLabelInline: {
       position: 'relative',
@@ -4773,16 +4710,26 @@ var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
   };
 });
 
-function TrackContainer(props) {
-  var classes = useStyles$d();
-  var model = props.model,
-      track = props.track;
+function TrackContainerLabel(_ref) {
+  var model = _ref.model,
+      view = _ref.view;
+  var classes = useStyles$c();
+  var labelStyle = view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline;
+  return view.trackLabels !== 'hidden' ? /*#__PURE__*/React__default.createElement(TrackLabel$1, {
+    track: model,
+    className: clsx(classes.trackLabel, labelStyle)
+  }) : null;
+}
+
+function TrackContainer(_ref2) {
+  var model = _ref2.model,
+      track = _ref2.track;
+  var classes = useStyles$c();
   var display = track.displays[0];
   var horizontalScroll = model.horizontalScroll,
       draggingTrackId = model.draggingTrackId,
       moveTrack = model.moveTrack;
   var height = display.height;
-  var view = util.getContainingView(display);
   var trackId = configuration.getConf(track, 'trackId');
   var ref = React.useRef(null);
   React.useEffect(function () {
@@ -4805,13 +4752,13 @@ function TrackContainer(props) {
   var RenderingComponent = display.RenderingComponent,
       DisplayBlurb = display.DisplayBlurb;
   var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.root
-  }, view.trackLabels !== 'hidden' ? /*#__PURE__*/React__default.createElement(TrackLabel$1, {
-    track: track,
-    className: clsx(classes.trackLabel, view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline)
-  }) : null, /*#__PURE__*/React__default.createElement(Paper, {
-    variant: "outlined",
+  return /*#__PURE__*/React__default.createElement(Paper, {
+    className: classes.root,
+    variant: "outlined"
+  }, /*#__PURE__*/React__default.createElement(TrackContainerLabel, {
+    model: track,
+    view: model
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: classes.trackRenderingContainer,
     style: {
       height: height
@@ -4821,17 +4768,15 @@ function TrackContainer(props) {
       display.setScrollTop(target.scrollTop);
     },
     onDragEnter: debouncedOnDragEnter,
-    "data-testid": "trackRenderingContainer-".concat(view.id, "-").concat(trackId),
+    "data-testid": "trackRenderingContainer-".concat(model.id, "-").concat(trackId),
     role: "presentation"
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
-    className: classes.renderingComponentContainer,
     style: {
       transform: "scaleX(".concat(model.scaleFactor, ")")
     }
   }, /*#__PURE__*/React__default.createElement(RenderingComponent, {
     model: display,
-    blockState: {},
     onHorizontalScroll: horizontalScroll
   })), DisplayBlurb ? /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -4839,7 +4784,7 @@ function TrackContainer(props) {
       left: 0,
       top: display.height - 20
     }
-  }, ' ', /*#__PURE__*/React__default.createElement(DisplayBlurb, {
+  }, /*#__PURE__*/React__default.createElement(DisplayBlurb, {
     model: display
   })) : null), /*#__PURE__*/React__default.createElement("div", {
     className: classes.overlay,
@@ -4856,7 +4801,7 @@ function TrackContainer(props) {
 
 var TrackContainer$1 = /*#__PURE__*/mobxReact.observer(TrackContainer);
 
-var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$d = /*#__PURE__*/styles.makeStyles(function (theme) {
   var background = theme.palette.tertiary ? colorManipulator.alpha(theme.palette.tertiary.main, 0.7) : colorManipulator.alpha(theme.palette.primary.main, 0.7);
   return {
     rubberBand: {
@@ -4895,7 +4840,7 @@ var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
 var VerticalGuide = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model,
       coordX = _ref.coordX;
-  var classes = useStyles$e();
+  var classes = useStyles$d();
   return /*#__PURE__*/React__default.createElement(Tooltip$1, {
     open: true,
     placement: "top",
@@ -4939,7 +4884,7 @@ function RubberBand(_ref2) {
 
   var controlsRef = React.useRef(null);
   var rubberBandRef = React.useRef(null);
-  var classes = useStyles$e();
+  var classes = useStyles$d();
   var mouseDragging = startX !== undefined && anchorPosition === undefined;
   var setOffsets = model.setOffsets,
       pxToBp = model.pxToBp;
@@ -5142,7 +5087,7 @@ RubberBand.defaultProps = {
 var RubberBand$1 = /*#__PURE__*/mobxReact.observer(RubberBand);
 
 var _excluded$1 = ["model", "style", "className"];
-var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$e = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     scaleBarContainer: {
       overflow: 'hidden',
@@ -5186,7 +5131,7 @@ var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
 });
 var RenderedRefNameLabels = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$f(); // find the block that needs pinning to the left side for context
+  var classes = useStyles$e(); // find the block that needs pinning to the left side for context
 
   var lastLeftBlock = 0;
   model.staticBlocks.forEach(function (block, i) {
@@ -5208,7 +5153,7 @@ var RenderedRefNameLabels = /*#__PURE__*/mobxReact.observer(function (_ref) {
 });
 var RenderedScaleBarLabels = /*#__PURE__*/mobxReact.observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$f();
+  var classes = useStyles$e();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof blockTypes.ContentBlock) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx, true, false);
@@ -5261,7 +5206,7 @@ var ScaleBar$2 = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       className = _ref3.className,
       other = _objectWithoutProperties(_ref3, _excluded$1);
 
-  var classes = useStyles$f();
+  var classes = useStyles$e();
   var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -5289,7 +5234,7 @@ var ScaleBar$2 = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
 });
 var ScaleBar$3 = /*#__PURE__*/mobxReact.observer(ScaleBar$2);
 
-var useStyles$g = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$f = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     verticalGuidesZoomContainer: {
       position: 'absolute',
@@ -5320,7 +5265,7 @@ var useStyles$g = /*#__PURE__*/styles.makeStyles(function (theme) {
 });
 var RenderedVerticalGuides = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$g();
+  var classes = useStyles$f();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof blockTypes.ContentBlock) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx);
@@ -5360,7 +5305,7 @@ var RenderedVerticalGuides = /*#__PURE__*/mobxReact.observer(function (_ref) {
 
 function VerticalGuides(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$g(); // find the block that needs pinning to the left side for context
+  var classes = useStyles$f(); // find the block that needs pinning to the left side for context
 
   var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -5381,7 +5326,7 @@ function VerticalGuides(_ref2) {
 
 var VerticalGuides$1 = /*#__PURE__*/mobxReact.observer(VerticalGuides);
 
-var useStyles$h = /*#__PURE__*/styles.makeStyles(function () {
+var useStyles$g = /*#__PURE__*/styles.makeStyles(function () {
   return {
     centerLineContainer: {
       background: 'transparent',
@@ -5410,7 +5355,7 @@ function CenterLine(_ref) {
       tracks = model.tracks,
       width = model.width;
   var ref = React.useRef(null);
-  var classes = useStyles$h();
+  var classes = useStyles$g();
   var startingPosition = width / 2;
   return tracks.length ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "centerline_container",
@@ -5437,7 +5382,7 @@ CenterLine.propTypes = {
 };
 var CenterLine$1 = /*#__PURE__*/mobxReact.observer(CenterLine);
 
-var useStyles$i = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$h = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     tracksContainer: {
       position: 'relative',
@@ -5454,7 +5399,7 @@ var useStyles$i = /*#__PURE__*/styles.makeStyles(function (theme) {
 function TracksContainer(_ref) {
   var children = _ref.children,
       model = _ref.model;
-  var classes = useStyles$i(); // refs are to store these variables to avoid repeated rerenders associated
+  var classes = useStyles$h(); // refs are to store these variables to avoid repeated rerenders associated
   // with useState/setState
 
   var delta = React.useRef(0);
@@ -5610,8 +5555,6 @@ function TracksContainer(_ref) {
         boxSizing: 'border-box'
       }
     })
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.spacer
   }), children);
 }
 
@@ -5620,7 +5563,7 @@ var TracksContainer$1 = /*#__PURE__*/mobxReact.observer(TracksContainer);
 var SearchResultsDialog = /*#__PURE__*/React.lazy(function () {
   return Promise.resolve().then(function () { return SearchResultsDialog$2; });
 });
-var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$i = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5634,7 +5577,7 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var _regions$;
 
   var model = _ref.model;
-  var classes = useStyles$j();
+  var classes = useStyles$i();
   var session = util.getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5934,7 +5877,7 @@ var MiniControls = /*#__PURE__*/mobxReact.observer(function (props) {
   }));
 });
 
-var useStyles$k = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     loadingMessage: {
       padding: theme.spacing(5)
@@ -6030,7 +5973,7 @@ function _fetchSequence() {
 function SequenceDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$k();
+  var classes = useStyles$j();
   var session = util.getSession(model);
 
   var _useState = React.useState(),
@@ -6195,7 +6138,7 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/mobxReact.observer(SequenceDialog);
 
-var useStyles$l = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$k = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     dialogContent: {
       width: '80em'
@@ -6214,7 +6157,7 @@ function SearchResultsDialog$1(_ref) {
   var model = _ref.model,
       optAssemblyName = _ref.optAssemblyName,
       handleClose = _ref.handleClose;
-  var classes = useStyles$l();
+  var classes = useStyles$k();
   var session = util.getSession(model);
 
   var _getEnv = mobxStateTree.getEnv(session),
@@ -6335,11 +6278,11 @@ function SearchResultsDialog$1(_ref) {
 
 var SearchResultsDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$l,
+  useStyles: useStyles$k,
   'default': SearchResultsDialog$1
 };
 
-var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$l = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     note: {
       textAlign: 'center',
@@ -6375,7 +6318,7 @@ var LinearGenomeView = /*#__PURE__*/mobxReact.observer(function (_ref) {
       hideHeader = model.hideHeader,
       initialized = model.initialized,
       hasDisplayedRegions = model.hasDisplayedRegions;
-  var classes = useStyles$m();
+  var classes = useStyles$l();
 
   if (!initialized && !error) {
     return /*#__PURE__*/React__default.createElement(core.Typography, {
@@ -6456,7 +6399,7 @@ function calculateVisibleLocStrings(contentBlocks) {
       assemblyName: isSingleAssemblyName ? undefined : block.assemblyName
     }));
   });
-  return locs.join(';');
+  return locs.join(' ');
 }
 
 var HEADER_BAR_HEIGHT = 48;
@@ -6489,11 +6432,11 @@ function stateModelFactory$1(pluginManager) {
     }),
     showCenterLine: mobxStateTree.types.optional(mobxStateTree.types["boolean"], function () {
       var setting = localStorageGetItem('lgv-showCenterLine');
-      return setting !== undefined ? !!setting : false;
+      return setting !== undefined && setting !== null ? !!+setting : false;
     }),
     showCytobandsSetting: mobxStateTree.types.optional(mobxStateTree.types["boolean"], function () {
       var setting = localStorageGetItem('lgv-showCytobands');
-      return setting !== undefined ? !!setting : true;
+      return setting !== undefined && setting !== null ? !!+setting : true;
     })
   }))["volatile"](function () {
     return {
@@ -7020,100 +6963,73 @@ function stateModelFactory$1(pluginManager) {
         throw new Error("invalid track selector type ".concat(self.trackSelectorType));
       },
       navToLocString: function navToLocString(locString, optAssemblyName) {
+        var assemblyNames = self.assemblyNames;
+
         var _getSession3 = util.getSession(self),
             assemblyManager = _getSession3.assemblyManager;
 
         var isValidRefName = assemblyManager.isValidRefName;
-        var locStrings = locString.split(';');
-
-        if (self.displayedRegions.length > 1) {
-          var locations = locStrings.map(function (ls) {
-            return util.parseLocString(ls, isValidRefName);
+        var assemblyName = optAssemblyName || assemblyNames[0];
+        var parsedLocStrings = locString.split(' ').filter(function (f) {
+          return !!f.trim();
+        }).map(function (l) {
+          return util.parseLocString(l, function (ref) {
+            return isValidRefName(ref, assemblyName);
           });
-          this.navToMultiple(locations);
-          return;
-        }
-
-        var assemblyName = optAssemblyName;
-        var defaultRefName = '';
-
-        if (self.displayedRegions.length !== 0) {
-          // defaults
-          assemblyName = self.displayedRegions[0].assemblyName;
-          defaultRefName = self.displayedRegions[0].refName;
-        }
-
-        var assembly = assemblyName && assemblyManager.get(assemblyName);
-
-        if (!assembly) {
-          throw new Error("Could not find assembly ".concat(assemblyName));
-        }
-
-        var _assembly = assembly,
-            regions = _assembly.regions;
-
-        if (!regions) {
-          throw new Error("Regions for assembly ".concat(assemblyName, " not yet loaded"));
-        }
-
-        if (locStrings.length > 1) {
-          throw new Error('Navigating to multiple locations is not allowed when viewing a whole chromosome');
-        }
-
-        var parsedLocString = util.parseLocString(locStrings[0], function (refName) {
-          return isValidRefName(refName, assemblyName);
         });
-        var changedAssembly = false;
+        var locations = parsedLocStrings.map(function (region) {
+          var asmName = region.assemblyName || assemblyName;
+          var asm = assemblyManager.get(asmName);
+          var refName = region.refName;
 
-        if (parsedLocString.assemblyName && parsedLocString.assemblyName !== assemblyName) {
-          var newAssembly = assemblyManager.get(parsedLocString.assemblyName);
-
-          if (!newAssembly) {
-            throw new Error("Could not find assembly ".concat(parsedLocString.assemblyName));
+          if (!asm) {
+            throw new Error("assembly ".concat(asmName, " not found"));
           }
 
-          assembly = newAssembly;
-          changedAssembly = true;
-          var newRegions = newAssembly.regions;
+          var regions = asm.regions;
 
-          if (!newRegions) {
-            throw new Error("Regions for assembly ".concat(parsedLocString.assemblyName, " not yet loaded"));
+          if (!regions) {
+            throw new Error("regions not loaded yet for ".concat(asmName));
           }
 
-          regions = newRegions;
-        }
-
-        var canonicalRefName = assembly.getCanonicalRefName(parsedLocString.refName);
+          var canonicalRefName = asm.getCanonicalRefName(region.refName);
 
-        if (!canonicalRefName) {
-          throw new Error("Could not find refName ".concat(parsedLocString.refName, " in ").concat(assembly.name));
-        }
+          if (!canonicalRefName) {
+            throw new Error("Could not find refName ".concat(refName, " in ").concat(asm.name));
+          }
 
-        if (changedAssembly || canonicalRefName !== defaultRefName) {
-          var newDisplayedRegion = regions.find(function (region) {
+          var parentRegion = regions.find(function (region) {
             return region.refName === canonicalRefName;
           });
 
-          if (newDisplayedRegion) {
-            this.setDisplayedRegions([newDisplayedRegion]);
-          } else {
-            throw new Error("Could not find refName ".concat(parsedLocString.refName, " in ").concat(assembly.name));
+          if (!parentRegion) {
+            throw new Error("Could not find refName ".concat(refName, " in ").concat(asmName));
           }
-        }
 
-        var displayedRegion = regions.find(function (region) {
-          return region.refName === canonicalRefName;
+          return _objectSpread2(_objectSpread2({}, region), {}, {
+            assemblyName: asmName,
+            parentRegion: parentRegion
+          });
         });
 
-        if (displayedRegion) {
-          var _parsedLocString$star, _parsedLocString$end;
-
-          var start = util.clamp((_parsedLocString$star = parsedLocString === null || parsedLocString === void 0 ? void 0 : parsedLocString.start) !== null && _parsedLocString$star !== void 0 ? _parsedLocString$star : 0, 0, displayedRegion.end);
-          var end = util.clamp((_parsedLocString$end = parsedLocString === null || parsedLocString === void 0 ? void 0 : parsedLocString.end) !== null && _parsedLocString$end !== void 0 ? _parsedLocString$end : displayedRegion.end, 0, displayedRegion.end);
-          this.navTo(_objectSpread2(_objectSpread2({}, parsedLocString), {}, {
-            start: start,
-            end: end
+        if (locations.length === 1) {
+          var loc = locations[0];
+          this.setDisplayedRegions([_objectSpread2({
+            reversed: loc.reversed
+          }, loc.parentRegion)]);
+          var start = loc.start,
+              end = loc.end,
+              parentRegion = loc.parentRegion;
+          this.navTo(_objectSpread2(_objectSpread2({}, loc), {}, {
+            start: util.clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
+            end: util.clamp(end !== null && end !== void 0 ? end : parentRegion.end, 0, parentRegion.end)
+          }));
+        } else {
+          this.setDisplayedRegions( // @ts-ignore
+          locations.map(function (r) {
+            return r.start === undefined ? r.parentRegion : r;
           }));
+          this.showAllRegions();
         }
       },
 
@@ -7235,26 +7151,6 @@ function stateModelFactory$1(pluginManager) {
               if (location.refName !== region.refName) {
                 throw new Error("Entered location ".concat(util.assembleLocString(location), " does not match with displayed regions"));
               }
-
-              if (locationIndex > 0) {
-                // does it reach the left side?
-                var matchesLeft = region.reversed ? locationEnd === region.end : locationStart === region.start;
-
-                if (!matchesLeft) {
-                  throw new Error("".concat(region.reversed ? 'End' : 'Start', " of region ").concat(util.assembleLocString(location), " should be ").concat((region.reversed ? region.end : region.start + 1).toLocaleString('en-US'), ", but it is not"));
-                }
-              }
-
-              var isLast = locationIndex === locations.length - 1;
-
-              if (!isLast) {
-                // does it reach the right side?
-                var matchesRight = region.reversed ? locationStart === region.start : locationEnd === region.end;
-
-                if (!matchesRight) {
-                  throw new Error("".concat(region.reversed ? 'Start' : 'End', " of region ").concat(util.assembleLocString(location), " should be ").concat((region.reversed ? region.start + 1 : region.end).toLocaleString('en-US'), ", but it is not"));
-                }
-              }
             }
 
             locationIndex -= 1;
@@ -7542,8 +7438,6 @@ function stateModelFactory$1(pluginManager) {
 
     };
   }).views(function (self) {
-    var currentlyCalculatedStaticBlocks;
-    var stringifiedCurrentlyCalculatedStaticBlocks = '';
     return {
       menuItems: function menuItems() {
         var canShowCytobands = self.canShowCytobands,
@@ -7551,10 +7445,10 @@ function stateModelFactory$1(pluginManager) {
         var menuItems = [{
           label: 'Return to import form',
           onClick: function onClick() {
-            util.getSession(self).queueDialog(function (doneCallback) {
-              return [ReturnToImportFormDlg, {
+            util.getSession(self).queueDialog(function (handleClose) {
+              return [ui.ReturnToImportFormDialog, {
                 model: self,
-                handleClose: doneCallback
+                handleClose: handleClose
               }];
             });
           },
@@ -7563,10 +7457,10 @@ function stateModelFactory$1(pluginManager) {
           label: 'Export SVG',
           icon: PhotoCameraIcon,
           onClick: function onClick() {
-            util.getSession(self).queueDialog(function (doneCallback) {
+            util.getSession(self).queueDialog(function (handleClose) {
               return [ExportSvgDlg, {
                 model: self,
-                handleClose: doneCallback
+                handleClose: handleClose
               }];
             });
           }
@@ -7666,8 +7560,12 @@ function stateModelFactory$1(pluginManager) {
         }
 
         return menuItems;
-      },
-
+      }
+    };
+  }).views(function (self) {
+    var currentlyCalculatedStaticBlocks;
+    var stringifiedCurrentlyCalculatedStaticBlocks = '';
+    return {
       get staticBlocks() {
         var ret = calculateStaticBlocks(self);
         var sret = JSON.stringify(ret);
@@ -8089,7 +7987,7 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
   return LinearGenomeViewPlugin;
 }(Plugin);
 
-var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -8101,7 +7999,7 @@ var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
 });
 function HelpDialog$1(_ref) {
   var handleClose = _ref.handleClose;
-  var classes = useStyles$n();
+  var classes = useStyles$m();
   return /*#__PURE__*/React__default.createElement(core.Dialog, {
     open: true,
     maxWidth: "xl",
@@ -8112,7 +8010,7 @@ function HelpDialog$1(_ref) {
     onClick: function onClick() {
       handleClose();
     }
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, null)) : null), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("h3", null, "Searching"), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."), /*#__PURE__*/React__default.createElement("li", null, "Jump to a specific region by typing the region into the location box as: ", /*#__PURE__*/React__default.createElement("code", null, "ref:start..end"), " or ", /*#__PURE__*/React__default.createElement("code", null, "ref:start-end"), ". Commas are allowed in the start and end coordinates.")), /*#__PURE__*/React__default.createElement("h3", null, "Example Searches"), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "BRCA"), " - searches for the feature named BRCA"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr4"), " - jumps to chromosome 4"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr4:79,500,000..80,000,000"), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."))), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, null)) : null), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogContent, null, /*#__PURE__*/React__default.createElement("h3", null, "Searching"), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."), /*#__PURE__*/React__default.createElement("li", null, "Jump to a specific region by typing the region into the location box as: ", /*#__PURE__*/React__default.createElement("code", null, "ref:start..end"), " or ", /*#__PURE__*/React__default.createElement("code", null, "ref:start-end"), ". Commas are allowed in the start and end coordinates. A space-separated list of locstrings can be used to open up multiple chromosomes at a time")), /*#__PURE__*/React__default.createElement("h3", null, "Example Searches"), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "BRCA"), " - searches for the feature named BRCA"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr4"), " - jumps to chromosome 4"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr4:79,500,000..80,000,000"), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr1:1-100 chr2:1-100"), " - create a split view of chr1:1-100 and chr2:1-100"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr1 chr2 chr3"), " - open up multiple chromosomes at once"), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("code", null, "chr1:1-100[rev] chr2:1-100"), " - open up the first region in the horizontally flipped orientation"))), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
     onClick: function onClick() {
       return handleClose();
     },
@@ -8122,11 +8020,11 @@ function HelpDialog$1(_ref) {
 
 var HelpDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$n,
+  useStyles: useStyles$m,
   'default': HelpDialog$1
 };
 
-var useStyles$o = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -8146,7 +8044,7 @@ var useStyles$o = /*#__PURE__*/core.makeStyles(function (theme) {
 function SetMaxHeightDlg$1(props) {
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$o();
+  var classes = useStyles$n();
   var _model$maxHeight = model.maxHeight,
       maxHeight = _model$maxHeight === void 0 ? '' : _model$maxHeight;