@jbrowse/plugin-linear-genome-view 1.6.3 → 1.6.6

package/dist/plugin-linear-genome-view.esm.js

@@ -6,15 +6,15 @@ import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 import Plugin from '@jbrowse/core/Plugin';
-import { getContainingView, getContainingDisplay, makeAbortableReaction, assembleLocString, getSession, isSessionModelWithWidgets, isSelectionContainer, isAbortException, stringify, useDebounce, measureText, useDebouncedCallback, viewBpToPx, clamp, isViewContainer, parseLocString, findLastIndex, springAnimate, isAbstractMenuManager } from '@jbrowse/core/util';
+import { getContainingView, getContainingDisplay, makeAbortableReaction, assembleLocString, getSession, isSessionModelWithWidgets, isSelectionContainer, isAbortException, stringify, getBpDisplayStr, useDebounce, measureText, useDebouncedCallback, viewBpToPx, clamp, isViewContainer, parseLocString, findLastIndex, springAnimate, isAbstractMenuManager } from '@jbrowse/core/util';
 import LineStyleIcon from '@material-ui/icons/LineStyle';
-import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Typography as Typography$1, Button as Button$1, Popover, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, IconButton, Dialog, DialogTitle, DialogContent, FormControlLabel, Checkbox, DialogActions, Divider, FormGroup, Paper, Container, Grid, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Typography as Typography$1, Button as Button$1, Popover, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, IconButton, Dialog, DialogTitle, DialogContent, FormControlLabel, Checkbox, DialogActions, FormGroup, Paper, Container, Grid, Divider, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
 import CompositeMap from '@jbrowse/core/util/compositeMap';
 import { isFeature } from '@jbrowse/core/util/simpleFeature';
 import { getParentRenderProps, getTrackAssemblyNames, getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { getParent, types, cast, isAlive, addDisposer, getEnv, resolveIdentifier, getRoot, getSnapshot } from 'mobx-state-tree';
 import MenuOpenIcon from '@material-ui/icons/MenuOpen';
-import { Menu, ResizeHandle } from '@jbrowse/core/ui';
+import { Menu, ResizeHandle, ReturnToImportFormDialog } from '@jbrowse/core/ui';
 import { observer, PropTypes } from 'mobx-react';
 import { usePopper } from 'react-popper';
 import { makeStyles } from '@material-ui/core/styles';
@@ -50,13 +50,13 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import IconButton$1 from '@material-ui/core/IconButton';
 import Slider from '@material-ui/core/Slider';
 import ZoomOut from '@material-ui/icons/ZoomOut';
-import Paper$1 from '@material-ui/core/Paper';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import DragIcon from '@material-ui/icons/DragIndicator';
 import normalizeWheel from 'normalize-wheel';
 import { alpha as alpha$1 } from '@material-ui/core/styles/colorManipulator';
 import Popover$1 from '@material-ui/core/Popover';
 import Tooltip$2 from '@material-ui/core/Tooltip';
+import Paper$1 from '@material-ui/core/Paper';
 import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
 import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
@@ -1305,8 +1305,7 @@ var RenderedBlocks = /*#__PURE__*/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 = getContainingView(model);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Blockset",
@@ -1318,10 +1317,6 @@ function LinearBlocks(_ref2) {
     model: model
   }));
 }
-
-LinearBlocks.propTypes = {
-  model: PropTypes.observableObject.isRequired
-};
 var LinearBlocks$1 = /*#__PURE__*/observer(LinearBlocks);
 
 function round(value) {
@@ -1346,7 +1341,7 @@ var useStyles$2 = /*#__PURE__*/makeStyles$1(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'
@@ -2324,9 +2319,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
               case 0:
                 self.setError();
                 aborter = new AbortController();
-                view = getContainingView(self);
+                view = 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;
                 }
@@ -2377,7 +2373,7 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
     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)
@@ -2390,9 +2386,10 @@ var BaseLinearDisplay$1 = /*#__PURE__*/types.compose('BaseLinearDisplay', BaseDi
               case 0:
                 _context2.prev = 0;
                 aborter = new AbortController();
-                view = getContainingView(self);
+                view = 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;
                 }
@@ -3241,7 +3238,8 @@ var Cytobands = /*#__PURE__*/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')),
@@ -3264,6 +3262,9 @@ var Cytobands = /*#__PURE__*/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.createElement("g", {
     transform: "translate(-".concat(offsetPx, ")")
@@ -3292,13 +3293,13 @@ var Cytobands = /*#__PURE__*/observer(function (_ref2) {
       });
     }
 
-    if (index === 0) {
+    if (lcap === index) {
       return /*#__PURE__*/React.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.createElement("path", {
         key: key,
         d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, HEADER_OVERVIEW_HEIGHT, 8),
@@ -3477,20 +3478,6 @@ function OverviewScaleBar(_ref7) {
 
 var OverviewScaleBar$1 = /*#__PURE__*/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;
@@ -4373,51 +4360,7 @@ function ExportSvgDlg(_ref) {
   }, "Submit")));
 }
 
-var useStyles$9 = /*#__PURE__*/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.createElement(Dialog, {
-    maxWidth: "xl",
-    open: true,
-    onClose: handleClose
-  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Reference sequence", handleClose ? /*#__PURE__*/React.createElement(IconButton, {
-    className: classes.closeButton,
-    onClick: function onClick() {
-      handleClose();
-    }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Typography$1, null, "Are you sure you want to return to the import form? This will lose your current view")), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
-    onClick: function onClick() {
-      model.clearView();
-      handleClose();
-    },
-    variant: "contained",
-    color: "primary",
-    autoFocus: true
-  }, "OK"), /*#__PURE__*/React.createElement(Button$1, {
-    onClick: function onClick() {
-      handleClose();
-    },
-    color: "secondary",
-    variant: "contained",
-    autoFocus: true
-  }, "Cancel")));
-}
-
-var ReturnToImportFormDlg = /*#__PURE__*/observer(ReturnToImportFormDialog);
-
-var useStyles$a = /*#__PURE__*/makeStyles({
+var useStyles$9 = /*#__PURE__*/makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -4430,7 +4373,7 @@ var useStyles$a = /*#__PURE__*/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,
@@ -4477,7 +4420,7 @@ function ZoomControls(_ref) {
 
 var ZoomControls$1 = /*#__PURE__*/observer(ZoomControls);
 
-var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$a = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     headerBar: {
       height: HEADER_BAR_HEIGHT,
@@ -4512,7 +4455,7 @@ var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
 });
 var HeaderButtons = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React.createElement(Button$1, {
     onClick: model.activateTrackSelector,
     className: classes.toggleButton,
@@ -4526,7 +4469,7 @@ var HeaderButtons = /*#__PURE__*/observer(function (_ref) {
 
 function PanControls(_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
     variant: "outlined",
     className: classes.panButton,
@@ -4544,7 +4487,7 @@ function PanControls(_ref2) {
 
 var RegionWidth = /*#__PURE__*/observer(function (_ref3) {
   var model = _ref3.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   var coarseTotalBp = model.coarseTotalBp;
   return /*#__PURE__*/React.createElement(Typography$1, {
     variant: "body2",
@@ -4555,7 +4498,7 @@ var RegionWidth = /*#__PURE__*/observer(function (_ref3) {
 
 var Controls = function Controls(_ref4) {
   var model = _ref4.model;
-  var classes = useStyles$b();
+  var classes = useStyles$a();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.headerBar
   }, /*#__PURE__*/React.createElement(HeaderButtons, {
@@ -4589,7 +4532,7 @@ var LinearGenomeViewHeader = /*#__PURE__*/observer(function (_ref5) {
   }));
 });
 
-var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$b = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       background: alpha(theme.palette.background.paper, 0.8),
@@ -4623,7 +4566,7 @@ var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
 var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _session$getTrackActi;
 
-  var classes = useStyles$c();
+  var classes = useStyles$b();
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4674,7 +4617,9 @@ var TrackLabel = /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paper, {
     ref: ref,
     className: clsx(className, classes.root)
@@ -4710,20 +4655,16 @@ var TrackLabel = /*#__PURE__*/React.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__*/observer(TrackLabel);
 
-var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {},
     resizeHandle: {
       height: RESIZE_HANDLE_HEIGHT,
-      boxSizing: 'border-box',
-      position: 'relative',
       zIndex: 2
     },
     overlay: {
@@ -4735,13 +4676,6 @@ var useStyles$d = /*#__PURE__*/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)
@@ -4759,22 +4693,22 @@ var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
       whiteSpace: 'nowrap',
       position: 'relative',
       background: 'none',
-      zIndex: 2,
-      boxSizing: 'content-box'
+      zIndex: 2
     }
   };
 });
 
-function TrackContainer(props) {
-  var classes = useStyles$d();
-  var model = props.model,
-      track = props.track;
+function TrackContainer(_ref) {
+  var model = _ref.model,
+      track = _ref.track;
+  var classes = useStyles$c();
   var display = track.displays[0];
-  var horizontalScroll = model.horizontalScroll,
+  var id = model.id,
+      trackLabels = model.trackLabels,
+      horizontalScroll = model.horizontalScroll,
       draggingTrackId = model.draggingTrackId,
       moveTrack = model.moveTrack;
   var height = display.height;
-  var view = getContainingView(display);
   var trackId = getConf(track, 'trackId');
   var ref = useRef(null);
   useEffect(function () {
@@ -4799,10 +4733,7 @@ function TrackContainer(props) {
   var dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
   return /*#__PURE__*/React.createElement("div", {
     className: classes.root
-  }, view.trackLabels !== 'hidden' ? /*#__PURE__*/React.createElement(TrackLabel$1, {
-    track: track,
-    className: clsx(classes.trackLabel, view.trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline)
-  }) : null, /*#__PURE__*/React.createElement(Paper$1, {
+  }, /*#__PURE__*/React.createElement(Paper, {
     variant: "outlined",
     className: classes.trackRenderingContainer,
     style: {
@@ -4813,11 +4744,13 @@ function TrackContainer(props) {
       display.setScrollTop(target.scrollTop);
     },
     onDragEnter: debouncedOnDragEnter,
-    "data-testid": "trackRenderingContainer-".concat(view.id, "-").concat(trackId),
+    "data-testid": "trackRenderingContainer-".concat(id, "-").concat(trackId),
     role: "presentation"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, trackLabels !== 'hidden' ? /*#__PURE__*/React.createElement(TrackLabel$1, {
+    track: track,
+    className: clsx(classes.trackLabel, trackLabels === 'overlapping' ? classes.trackLabelOverlap : classes.trackLabelInline)
+  }) : null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: classes.renderingComponentContainer,
     style: {
       transform: "scaleX(".concat(model.scaleFactor, ")")
     }
@@ -4831,7 +4764,7 @@ function TrackContainer(props) {
       left: 0,
       top: display.height - 20
     }
-  }, ' ', /*#__PURE__*/React.createElement(DisplayBlurb, {
+  }, /*#__PURE__*/React.createElement(DisplayBlurb, {
     model: display
   })) : null), /*#__PURE__*/React.createElement("div", {
     className: classes.overlay,
@@ -4848,7 +4781,7 @@ function TrackContainer(props) {
 
 var TrackContainer$1 = /*#__PURE__*/observer(TrackContainer);
 
-var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
   var background = theme.palette.tertiary ? alpha$1(theme.palette.tertiary.main, 0.7) : alpha$1(theme.palette.primary.main, 0.7);
   return {
     rubberBand: {
@@ -4887,7 +4820,7 @@ var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
 var VerticalGuide = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model,
       coordX = _ref.coordX;
-  var classes = useStyles$e();
+  var classes = useStyles$d();
   return /*#__PURE__*/React.createElement(Tooltip$2, {
     open: true,
     placement: "top",
@@ -4931,7 +4864,7 @@ function RubberBand(_ref2) {
 
   var controlsRef = useRef(null);
   var rubberBandRef = useRef(null);
-  var classes = useStyles$e();
+  var classes = useStyles$d();
   var mouseDragging = startX !== undefined && anchorPosition === undefined;
   var setOffsets = model.setOffsets,
       pxToBp = model.pxToBp;
@@ -5134,7 +5067,7 @@ RubberBand.defaultProps = {
 var RubberBand$1 = /*#__PURE__*/observer(RubberBand);
 
 var _excluded$1 = ["model", "style", "className"];
-var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$e = /*#__PURE__*/makeStyles(function (theme) {
   return {
     scaleBarContainer: {
       overflow: 'hidden',
@@ -5178,7 +5111,7 @@ var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
 });
 var RenderedRefNameLabels = /*#__PURE__*/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) {
@@ -5200,7 +5133,7 @@ var RenderedRefNameLabels = /*#__PURE__*/observer(function (_ref) {
 });
 var RenderedScaleBarLabels = /*#__PURE__*/observer(function (_ref2) {
   var model = _ref2.model;
-  var classes = useStyles$f();
+  var classes = useStyles$e();
   return /*#__PURE__*/React.createElement(React.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof ContentBlock$1) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx, true, false);
@@ -5253,7 +5186,7 @@ var ScaleBar$2 = /*#__PURE__*/React.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.createElement(Paper$1, Object.assign({
     "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -5281,7 +5214,7 @@ var ScaleBar$2 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 });
 var ScaleBar$3 = /*#__PURE__*/observer(ScaleBar$2);
 
-var useStyles$g = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$f = /*#__PURE__*/makeStyles(function (theme) {
   return {
     verticalGuidesZoomContainer: {
       position: 'absolute',
@@ -5312,7 +5245,7 @@ var useStyles$g = /*#__PURE__*/makeStyles(function (theme) {
 });
 var RenderedVerticalGuides = /*#__PURE__*/observer(function (_ref) {
   var model = _ref.model;
-  var classes = useStyles$g();
+  var classes = useStyles$f();
   return /*#__PURE__*/React.createElement(React.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof ContentBlock$1) {
       var ticks = makeTicks(block.start, block.end, model.bpPerPx);
@@ -5352,7 +5285,7 @@ var RenderedVerticalGuides = /*#__PURE__*/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.createElement("div", {
@@ -5373,7 +5306,7 @@ function VerticalGuides(_ref2) {
 
 var VerticalGuides$1 = /*#__PURE__*/observer(VerticalGuides);
 
-var useStyles$h = /*#__PURE__*/makeStyles(function () {
+var useStyles$g = /*#__PURE__*/makeStyles(function () {
   return {
     centerLineContainer: {
       background: 'transparent',
@@ -5402,7 +5335,7 @@ function CenterLine(_ref) {
       tracks = model.tracks,
       width = model.width;
   var ref = useRef(null);
-  var classes = useStyles$h();
+  var classes = useStyles$g();
   var startingPosition = width / 2;
   return tracks.length ? /*#__PURE__*/React.createElement("div", {
     "data-testid": "centerline_container",
@@ -5429,7 +5362,7 @@ CenterLine.propTypes = {
 };
 var CenterLine$1 = /*#__PURE__*/observer(CenterLine);
 
-var useStyles$i = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$h = /*#__PURE__*/makeStyles(function (theme) {
   return {
     tracksContainer: {
       position: 'relative',
@@ -5446,7 +5379,7 @@ var useStyles$i = /*#__PURE__*/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 = useRef(0);
@@ -5612,7 +5545,7 @@ var TracksContainer$1 = /*#__PURE__*/observer(TracksContainer);
 var SearchResultsDialog = /*#__PURE__*/lazy(function () {
   return Promise.resolve().then(function () { return SearchResultsDialog$2; });
 });
-var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$i = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5626,7 +5559,7 @@ var ImportForm = /*#__PURE__*/observer(function (_ref) {
   var _regions$;
 
   var model = _ref.model;
-  var classes = useStyles$j();
+  var classes = useStyles$i();
   var session = getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5926,7 +5859,7 @@ var MiniControls = /*#__PURE__*/observer(function (props) {
   }));
 });
 
-var useStyles$k = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     loadingMessage: {
       padding: theme.spacing(5)
@@ -6022,7 +5955,7 @@ function _fetchSequence() {
 function SequenceDialog(_ref) {
   var model = _ref.model,
       handleClose = _ref.handleClose;
-  var classes = useStyles$k();
+  var classes = useStyles$j();
   var session = getSession(model);
 
   var _useState = useState(),
@@ -6187,7 +6120,7 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/observer(SequenceDialog);
 
-var useStyles$l = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$k = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     dialogContent: {
       width: '80em'
@@ -6206,7 +6139,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 = getSession(model);
 
   var _getEnv = getEnv(session),
@@ -6327,11 +6260,11 @@ function SearchResultsDialog$1(_ref) {
 
 var SearchResultsDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$l,
+  useStyles: useStyles$k,
   'default': SearchResultsDialog$1
 };
 
-var useStyles$m = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$l = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     note: {
       textAlign: 'center',
@@ -6367,7 +6300,7 @@ var LinearGenomeView = /*#__PURE__*/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.createElement(Typography$1, {
@@ -6448,7 +6381,7 @@ function calculateVisibleLocStrings(contentBlocks) {
       assemblyName: isSingleAssemblyName ? undefined : block.assemblyName
     }));
   });
-  return locs.join(';');
+  return locs.join(' ');
 }
 
 var HEADER_BAR_HEIGHT = 48;
@@ -6458,6 +6391,11 @@ var RESIZE_HANDLE_HEIGHT = 3;
 var INTER_REGION_PADDING_WIDTH = 2;
 var WIDGET_HEIGHT = 32;
 var SPACING = 7;
+
+function localStorageGetItem(item) {
+  return typeof localStorage !== 'undefined' ? localStorage.getItem(item) : undefined;
+}
+
 function stateModelFactory$1(pluginManager) {
   return types.compose(BaseViewModel, types.model('LinearGenomeView', {
     id: ElementId,
@@ -6472,15 +6410,15 @@ function stateModelFactory$1(pluginManager) {
     hideHeaderOverview: false,
     trackSelectorType: types.optional(types.enumeration(['hierarchical']), 'hierarchical'),
     trackLabels: types.optional(types.string, function () {
-      return localStorage.getItem('lgv-trackLabels') || 'overlapping';
+      return localStorageGetItem('lgv-trackLabels') || 'overlapping';
     }),
     showCenterLine: types.optional(types["boolean"], function () {
-      var setting = localStorage.getItem('lgv-showCenterLine');
-      return setting !== undefined ? !!setting : false;
+      var setting = localStorageGetItem('lgv-showCenterLine');
+      return setting !== undefined && setting !== null ? !!+setting : false;
     }),
     showCytobandsSetting: types.optional(types["boolean"], function () {
-      var setting = localStorage.getItem('lgv-showCytobands');
-      return setting !== undefined ? !!setting : true;
+      var setting = localStorageGetItem('lgv-showCytobands');
+      return setting !== undefined && setting !== null ? !!+setting : true;
     })
   }))["volatile"](function () {
     return {
@@ -7007,100 +6945,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 = 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 parseLocString(ls, isValidRefName);
+        var assemblyName = optAssemblyName || assemblyNames[0];
+        var parsedLocStrings = locString.split(' ').filter(function (f) {
+          return !!f.trim();
+        }).map(function (l) {
+          return 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 = 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 = 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 = 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: clamp(start !== null && start !== void 0 ? start : 0, 0, parentRegion.end),
+            end: 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();
         }
       },
 
@@ -7222,26 +7133,6 @@ function stateModelFactory$1(pluginManager) {
               if (location.refName !== region.refName) {
                 throw new Error("Entered location ".concat(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(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(assembleLocString(location), " should be ").concat((region.reversed ? region.start + 1 : region.end).toLocaleString('en-US'), ", but it is not"));
-                }
-              }
             }
 
             locationIndex -= 1;
@@ -7529,8 +7420,6 @@ function stateModelFactory$1(pluginManager) {
 
     };
   }).views(function (self) {
-    var currentlyCalculatedStaticBlocks;
-    var stringifiedCurrentlyCalculatedStaticBlocks = '';
     return {
       menuItems: function menuItems() {
         var canShowCytobands = self.canShowCytobands,
@@ -7538,10 +7427,10 @@ function stateModelFactory$1(pluginManager) {
         var menuItems = [{
           label: 'Return to import form',
           onClick: function onClick() {
-            getSession(self).queueDialog(function (doneCallback) {
-              return [ReturnToImportFormDlg, {
+            getSession(self).queueDialog(function (handleClose) {
+              return [ReturnToImportFormDialog, {
                 model: self,
-                handleClose: doneCallback
+                handleClose: handleClose
               }];
             });
           },
@@ -7550,10 +7439,10 @@ function stateModelFactory$1(pluginManager) {
           label: 'Export SVG',
           icon: PhotoCameraIcon,
           onClick: function onClick() {
-            getSession(self).queueDialog(function (doneCallback) {
+            getSession(self).queueDialog(function (handleClose) {
               return [ExportSvgDlg, {
                 model: self,
-                handleClose: doneCallback
+                handleClose: handleClose
               }];
             });
           }
@@ -7653,8 +7542,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);
@@ -8076,7 +7969,7 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
   return LinearGenomeViewPlugin;
 }(Plugin);
 
-var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$m = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     closeButton: {
       position: 'absolute',
@@ -8088,7 +7981,7 @@ var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
 });
 function HelpDialog$1(_ref) {
   var handleClose = _ref.handleClose;
-  var classes = useStyles$n();
+  var classes = useStyles$m();
   return /*#__PURE__*/React.createElement(Dialog, {
     open: true,
     maxWidth: "xl",
@@ -8099,7 +7992,7 @@ function HelpDialog$1(_ref) {
     onClick: function onClick() {
       handleClose();
     }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("h3", null, "Searching"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."), /*#__PURE__*/React.createElement("li", null, "Jump to a specific region by typing the region into the location box as: ", /*#__PURE__*/React.createElement("code", null, "ref:start..end"), " or ", /*#__PURE__*/React.createElement("code", null, "ref:start-end"), ". Commas are allowed in the start and end coordinates.")), /*#__PURE__*/React.createElement("h3", null, "Example Searches"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "BRCA"), " - searches for the feature named BRCA"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr4"), " - jumps to chromosome 4"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr4:79,500,000..80,000,000"), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("h3", null, "Searching"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."), /*#__PURE__*/React.createElement("li", null, "Jump to a specific region by typing the region into the location box as: ", /*#__PURE__*/React.createElement("code", null, "ref:start..end"), " or ", /*#__PURE__*/React.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.createElement("h3", null, "Example Searches"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "BRCA"), " - searches for the feature named BRCA"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr4"), " - jumps to chromosome 4"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr4:79,500,000..80,000,000"), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr1:1-100 chr2:1-100"), " - create a split view of chr1:1-100 and chr2:1-100"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr1 chr2 chr3"), " - open up multiple chromosomes at once"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "chr1:1-100[rev] chr2:1-100"), " - open up the first region in the horizontally flipped orientation"))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
     onClick: function onClick() {
       return handleClose();
     },
@@ -8109,11 +8002,11 @@ function HelpDialog$1(_ref) {
 
 var HelpDialog$2 = {
   __proto__: null,
-  useStyles: useStyles$n,
+  useStyles: useStyles$m,
   'default': HelpDialog$1
 };
 
-var useStyles$o = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       width: 500
@@ -8133,7 +8026,7 @@ var useStyles$o = /*#__PURE__*/makeStyles$1(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;