@jbrowse/plugin-linear-genome-view 1.6.5 → 1.6.8

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

@@ -6,16 +6,16 @@ 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 { observer, PropTypes } from 'mobx-react';
+import { Menu, ResizeHandle, ReturnToImportFormDialog } from '@jbrowse/core/ui';
 import { usePopper } from 'react-popper';
 import { makeStyles } from '@material-ui/core/styles';
 import { ContentBlock as ContentBlock$1, ElidedBlock as ElidedBlock$1, InterRegionPaddingBlock as InterRegionPaddingBlock$1 } from '@jbrowse/core/util/blockTypes';
@@ -1341,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'
@@ -1459,14 +1459,17 @@ var BaseLinearDisplay = /*#__PURE__*/observer(function (props) {
       }
     },
     onMouseMove: function onMouseMove(event) {
-      if (ref.current) {
-        var rect = ref.current.getBoundingClientRect();
-        setOffsetMouseCoord([event.clientX - rect.left, event.clientY - rect.top]);
-        setClientMouseCoord([event.clientX, event.clientY]);
-        setClientRect(rect);
+      if (!ref.current) {
+        return;
       }
-    },
-    role: "presentation"
+
+      var rect = ref.current.getBoundingClientRect();
+      var left = rect.left,
+          top = rect.top;
+      setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
+      setClientMouseCoord([event.clientX, event.clientY]);
+      setClientRect(rect);
+    }
   }, DisplayMessageComponent ? /*#__PURE__*/React.createElement(DisplayMessageComponent, {
     model: model
   }) : /*#__PURE__*/React.createElement(LinearBlocks$1, Object.assign({}, props)), children, /*#__PURE__*/React.createElement(TooltipComponent, {
@@ -2386,9 +2389,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;
                 }
@@ -3237,7 +3241,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')),
@@ -3260,6 +3265,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, ")")
@@ -3288,13 +3296,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),
@@ -3473,20 +3481,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;
@@ -4369,51 +4363,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',
@@ -4426,7 +4376,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,
@@ -4473,7 +4423,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,
@@ -4508,7 +4458,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,
@@ -4522,7 +4472,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,
@@ -4540,7 +4490,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",
@@ -4551,7 +4501,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, {
@@ -4585,7 +4535,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),
@@ -4619,7 +4569,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),
@@ -4713,9 +4663,11 @@ var TrackLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var TrackLabel$1 = /*#__PURE__*/observer(TrackLabel);
 
-var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$c = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {},
+    root: {
+      marginTop: 2
+    },
     resizeHandle: {
       height: RESIZE_HANDLE_HEIGHT,
       boxSizing: 'border-box',
@@ -4731,6 +4683,11 @@ var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
       zIndex: 3,
       borderRadius: theme.shape.borderRadius
     },
+    trackLabel: {
+      zIndex: 3
+    },
+    // aligns with block bounderies. check for example the breakpoint split view
+    // demo to see if features align if wanting to change things
     renderingComponentContainer: {
       position: 'absolute',
       // -1 offset because of the 1px border of the Paper
@@ -4738,10 +4695,6 @@ var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
       height: '100%',
       width: '100%'
     },
-    trackLabel: {
-      zIndex: 3,
-      margin: theme.spacing(1)
-    },
     trackLabelInline: {
       position: 'relative',
       display: 'inline-block'
@@ -4755,22 +4708,30 @@ var useStyles$d = /*#__PURE__*/makeStyles(function (theme) {
       whiteSpace: 'nowrap',
       position: 'relative',
       background: 'none',
-      zIndex: 2,
-      boxSizing: 'content-box'
+      zIndex: 2
     }
   };
 });
+var TrackContainerLabel = /*#__PURE__*/observer(function (_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.createElement(TrackLabel$1, {
+    track: model,
+    className: clsx(classes.trackLabel, labelStyle)
+  }) : null;
+});
 
-function TrackContainer(props) {
-  var classes = useStyles$d();
-  var model = props.model,
-      track = props.track;
+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 = getContainingView(display);
   var trackId = getConf(track, 'trackId');
   var ref = useRef(null);
   useEffect(function () {
@@ -4793,13 +4754,13 @@ function TrackContainer(props) {
   var RenderingComponent = display.RenderingComponent,
       DisplayBlurb = display.DisplayBlurb;
   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, {
-    variant: "outlined",
+  return /*#__PURE__*/React.createElement(Paper$1, {
+    className: classes.root,
+    variant: "outlined"
+  }, /*#__PURE__*/React.createElement(TrackContainerLabel, {
+    model: track,
+    view: model
+  }), /*#__PURE__*/React.createElement("div", {
     className: classes.trackRenderingContainer,
     style: {
       height: height
@@ -4809,7 +4770,7 @@ 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.createElement("div", {
     ref: ref,
@@ -4819,7 +4780,6 @@ function TrackContainer(props) {
     }
   }, /*#__PURE__*/React.createElement(RenderingComponent, {
     model: display,
-    blockState: {},
     onHorizontalScroll: horizontalScroll
   })), DisplayBlurb ? /*#__PURE__*/React.createElement("div", {
     style: {
@@ -4827,7 +4787,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,
@@ -4844,7 +4804,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: {
@@ -4883,7 +4843,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",
@@ -4927,7 +4887,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;
@@ -5130,7 +5090,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',
@@ -5174,7 +5134,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) {
@@ -5196,7 +5156,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);
@@ -5249,7 +5209,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
@@ -5277,7 +5237,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',
@@ -5308,7 +5268,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);
@@ -5348,7 +5308,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", {
@@ -5369,7 +5329,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',
@@ -5398,7 +5358,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",
@@ -5425,7 +5385,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',
@@ -5442,7 +5402,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);
@@ -5598,8 +5558,6 @@ function TracksContainer(_ref) {
         boxSizing: 'border-box'
       }
     })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.spacer
   }), children);
 }
 
@@ -5608,7 +5566,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)
@@ -5622,7 +5580,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,
@@ -5922,7 +5880,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)
@@ -6018,7 +5976,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(),
@@ -6183,7 +6141,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'
@@ -6202,7 +6160,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),
@@ -6323,11 +6281,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',
@@ -6363,7 +6321,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, {
@@ -6444,7 +6402,7 @@ function calculateVisibleLocStrings(contentBlocks) {
       assemblyName: isSingleAssemblyName ? undefined : block.assemblyName
     }));
   });
-  return locs.join(';');
+  return locs.join(' ');
 }
 
 var HEADER_BAR_HEIGHT = 48;
@@ -7008,100 +6966,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();
         }
       },
 
@@ -7223,26 +7154,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;
@@ -7537,10 +7448,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
               }];
             });
           },
@@ -7549,10 +7460,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
               }];
             });
           }
@@ -8079,7 +7990,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',
@@ -8091,7 +8002,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",
@@ -8102,7 +8013,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();
     },
@@ -8112,11 +8023,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
@@ -8136,7 +8047,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;
 
@@ -8156,26 +8067,30 @@ function SetMaxHeightDlg$1(props) {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(DialogContent, {
     className: classes.root
-  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track"), /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(Typography$1, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""), /*#__PURE__*/React.createElement(TextField, {
     value: max,
     onChange: function onChange(event) {
-      setMax(event.target.value);
+      return setMax(event.target.value);
     },
     placeholder: "Enter max score"
-  }), /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
     variant: "contained",
     color: "primary",
     type: "submit",
-    style: {
-      marginLeft: 20
-    },
+    autoFocus: true,
     onClick: function onClick() {
       model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
       handleClose();
     }
-  }, "Submit"))));
+  }, "Submit"), /*#__PURE__*/React.createElement(Button$1, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
 }
 
 var SetMaxHeight = /*#__PURE__*/observer(SetMaxHeightDlg$1);