@jbrowse/plugin-linear-genome-view 1.5.1 → 1.5.2

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

@@ -51,6 +51,7 @@ var BaseResult = require('@jbrowse/core/TextSearch/BaseResults');
 var BaseResult__default = _interopDefault(BaseResult);
 var SearchIcon = _interopDefault(require('@material-ui/icons/Search'));
 var Autocomplete = _interopDefault(require('@material-ui/lab/Autocomplete'));
+var HelpIcon = _interopDefault(require('@material-ui/icons/Help'));
 var CloseIcon = _interopDefault(require('@material-ui/icons/Close'));
 var ArrowForwardIcon = _interopDefault(require('@material-ui/icons/ArrowForward'));
 var ArrowBackIcon = _interopDefault(require('@material-ui/icons/ArrowBack'));
@@ -65,6 +66,7 @@ var colorManipulator = require('@material-ui/core/styles/colorManipulator');
 var Popover = _interopDefault(require('@material-ui/core/Popover'));
 var Tooltip$1 = _interopDefault(require('@material-ui/core/Tooltip'));
 var AssemblySelector = _interopDefault(require('@jbrowse/core/ui/AssemblySelector'));
+var ErrorMessage = _interopDefault(require('@jbrowse/core/ui/ErrorMessage'));
 var ArrowDown = _interopDefault(require('@material-ui/icons/KeyboardArrowDown'));
 var Menu = _interopDefault(require('@jbrowse/core/ui/Menu'));
 var copy = _interopDefault(require('copy-to-clipboard'));
@@ -2518,7 +2520,9 @@ function mathPower(num) {
   return "".concat(mathPower(~~(num / 1000)), ",").concat("00".concat(~~(num % 1000)).substr(-3, 3));
 }
 
-var useStyles$4 = /*#__PURE__*/styles.makeStyles(function () {
+var useStyles$4 = /*#__PURE__*/styles.makeStyles(function
+  /* theme */
+() {
   return {
     majorTickLabel: {
       fontSize: '11px'
@@ -2701,7 +2705,7 @@ function OverviewRubberBand(_ref2) {
 
 
       if (controlsRef.current && startX !== undefined && currentX === undefined) {
-        var clickedAt = overview.pxToBp(startX);
+        var clickedAt = overview.pxToBp(startX - cytobandOffset);
         model.centerAt(Math.round(clickedAt.coord), clickedAt.refName, clickedAt.index);
       }
 
@@ -2905,7 +2909,7 @@ var useStyles$6 = /*#__PURE__*/core.makeStyles(function (theme) {
       height: HEADER_OVERVIEW_HEIGHT,
       pointerEvents: 'none',
       zIndex: 100,
-      border: '1px solid red'
+      border: '1px solid'
     },
     overview: {
       height: HEADER_BAR_HEIGHT,
@@ -3149,6 +3153,8 @@ var ScaleBar = /*#__PURE__*/mobxReact.observer(function (_ref6) {
   var lastOverviewPx = overview.bpToPx(_objectSpread2(_objectSpread2({}, last), {}, {
     coord: last.reversed ? last.start : last.end
   })) || 0;
+  var color = showCytobands ? '#f00' : scaleBarColor;
+  var transparency = showCytobands ? 0.1 : 0.3;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.scaleBar
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -3156,7 +3162,8 @@ var ScaleBar = /*#__PURE__*/mobxReact.observer(function (_ref6) {
     style: {
       width: lastOverviewPx - firstOverviewPx,
       left: firstOverviewPx + cytobandOffset,
-      background: showCytobands ? undefined : core.alpha(scaleBarColor, 0.3)
+      background: core.alpha(color, transparency),
+      borderColor: color
     }
   }), overviewVisibleRegions.map(function (block, idx) {
     return !(block instanceof blockTypes.ContentBlock) ? /*#__PURE__*/React__default.createElement("div", {
@@ -3374,7 +3381,7 @@ var SVGHeader = function SVGHeader(_ref3) {
     block: block
   }), /*#__PURE__*/React__default.createElement("rect", {
     stroke: "red",
-    fill: "none",
+    fill: "rgb(255,0,0,0.1)",
     width: Math.max(lastOverviewPx - firstOverviewPx, 0.5),
     height: HEADER_OVERVIEW_HEIGHT - 1,
     x: firstOverviewPx,
@@ -3549,6 +3556,9 @@ function dedupe() {
   });
 }
 
+var HelpDialog = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return HelpDialog$2; });
+}); // the logic of this method is to only apply a filter to RefSequenceResults
 // because they do not have a matchedObject. the trix search results already
 // filter so don't need re-filtering
 
@@ -3580,6 +3590,8 @@ function RefNameAutocomplete(_ref) {
       style = _ref.style,
       fetchResults = _ref.fetchResults,
       value = _ref.value,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
       _ref$TextFieldProps = _ref.TextFieldProps,
       TextFieldProps = _ref$TextFieldProps === void 0 ? {} : _ref$TextFieldProps;
   var session = util.getSession(model);
@@ -3595,20 +3607,25 @@ function RefNameAutocomplete(_ref) {
       loaded = _useState4[0],
       setLoaded = _useState4[1];
 
-  var _useState5 = React.useState(''),
+  var _useState5 = React.useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentSearch = _useState6[0],
-      setCurrentSearch = _useState6[1];
+      isHelpDialogDisplayed = _useState6[0],
+      setHelpDialogDisplayed = _useState6[1];
 
   var _useState7 = React.useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
+      currentSearch = _useState8[0],
+      setCurrentSearch = _useState8[1];
 
-  var _useState9 = React.useState(),
+  var _useState9 = React.useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      searchOptions = _useState10[0],
-      setSearchOptions = _useState10[1];
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  var _useState11 = React.useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      searchOptions = _useState12[0],
+      setSearchOptions = _useState12[1];
 
   var debouncedSearch = util.useDebounce(currentSearch, 300);
   var coarseVisibleLocStrings = model.coarseVisibleLocStrings,
@@ -3688,12 +3705,13 @@ function RefNameAutocomplete(_ref) {
       active = false;
     };
   }, [assemblyName, fetchResults, debouncedSearch, session, model]);
-  var inputBoxVal = coarseVisibleLocStrings || value || ''; // heuristic, text width + icon width, minimum 200
+  var inputBoxVal = coarseVisibleLocStrings || value || ''; // heuristic, text width + icon width
+  // + 45 accomodates help icon and search icon
 
-  var width = Math.min(Math.max(util.measureText(inputBoxVal, 16) + 25, 200), 550); // notes on implementation:
+  var width = Math.min(Math.max(util.measureText(inputBoxVal, 16) + 45, minWidth), 550); // notes on implementation:
   // The selectOnFocus setting helps highlight the field when clicked
 
-  return /*#__PURE__*/React__default.createElement(Autocomplete, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Autocomplete, {
     id: "refNameAutocomplete-".concat(model.id),
     "data-testid": "autocomplete",
     disableListWrap: true,
@@ -3777,7 +3795,11 @@ function RefNameAutocomplete(_ref) {
             style: {
               marginRight: 7
             }
-          }, /*#__PURE__*/React__default.createElement(SearchIcon, null)), params.InputProps.endAdornment)
+          }, /*#__PURE__*/React__default.createElement(SearchIcon, null), /*#__PURE__*/React__default.createElement(core.IconButton, {
+            onClick: function onClick() {
+              return setHelpDialogDisplayed(true);
+            }
+          }, /*#__PURE__*/React__default.createElement(HelpIcon, null))), params.InputProps.endAdornment)
         }),
         placeholder: "Search for location",
         onChange: function onChange(e) {
@@ -3800,7 +3822,11 @@ function RefNameAutocomplete(_ref) {
     getOptionLabel: function getOptionLabel(option) {
       return (typeof option === 'string' ? option : option.result.getLabel()) || '';
     }
-  });
+  }), isHelpDialogDisplayed ? /*#__PURE__*/React__default.createElement(HelpDialog, {
+    handleClose: function handleClose() {
+      return setHelpDialogDisplayed(false);
+    }
+  }) : null);
 }
 
 var RefNameAutocomplete$1 = /*#__PURE__*/mobxReact.observer(RefNameAutocomplete);
@@ -5307,158 +5333,10 @@ function TracksContainer(_ref) {
 
 var TracksContainer$1 = /*#__PURE__*/mobxReact.observer(TracksContainer);
 
-var useStyles$i = /*#__PURE__*/styles.makeStyles(function (theme) {
-  return {
-    dialogContent: {
-      width: '80em'
-    },
-    closeButton: {
-      position: 'absolute',
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  };
+var SearchResultsDialog = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return SearchResultsDialog$2; });
 });
-function SearchResultsDialog(_ref) {
-  var _model$searchResults;
-
-  var model = _ref.model,
-      optAssemblyName = _ref.optAssemblyName,
-      handleClose = _ref.handleClose;
-  var classes = useStyles$i();
-  var session = util.getSession(model);
-
-  var _getEnv = mobxStateTree.getEnv(session),
-      pluginManager = _getEnv.pluginManager;
-
-  var assemblyManager = session.assemblyManager;
-  var assemblyName = optAssemblyName;
-
-  if (model.displayedRegions.length > 0) {
-    var _model$displayedRegio;
-
-    assemblyName = (_model$displayedRegio = model.displayedRegions[0]) === null || _model$displayedRegio === void 0 ? void 0 : _model$displayedRegio.assemblyName;
-  }
-
-  if (!assemblyName) {
-    throw new Error("Assembly name not found");
-  }
-
-  var assembly = assemblyManager.get(assemblyName);
-
-  if (!assembly) {
-    throw new Error("assembly ".concat(assemblyName, " not found"));
-  }
-
-  if (!assembly.regions) {
-    throw new Error("assembly ".concat(assemblyName, " regions not loaded"));
-  }
-
-  var assemblyRegions = assembly.regions;
-
-  function handleClick(location) {
-    try {
-      var newRegion = assemblyRegions.find(function (region) {
-        return location === region.refName;
-      });
-
-      if (newRegion) {
-        model.setDisplayedRegions([newRegion]); // we use showAllRegions after setDisplayedRegions to make the entire
-        // region visible, xref #1703
-
-        model.showAllRegions();
-      } else {
-        model.navToLocString(location, assemblyName);
-      }
-    } catch (e) {
-      console.warn(e);
-      session.notify("".concat(e), 'warning');
-    }
-  }
-
-  function getTrackName(trackId) {
-    if (trackId) {
-      var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
-      var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(model), trackId);
-
-      if (configuration) {
-        var _configuration$name;
-
-        return (_configuration$name = configuration.name) === null || _configuration$name === void 0 ? void 0 : _configuration$name.value;
-      }
-    }
-
-    return '';
-  }
-
-  return /*#__PURE__*/React__default.createElement(core.Dialog, {
-    open: true,
-    maxWidth: "xl",
-    onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, {
-    id: "search-results-dialog"
-  }, "Search Results", handleClose ? /*#__PURE__*/React__default.createElement(core.IconButton, {
-    "data-testid": "close-resultsDialog",
-    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, ((_model$searchResults = model.searchResults) === null || _model$searchResults === void 0 ? void 0 : _model$searchResults.length) === 0 || model.searchResults === undefined ? /*#__PURE__*/React__default.createElement(core.Typography, null, "No results found for ", /*#__PURE__*/React__default.createElement("b", null, model.searchQuery)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.DialogContentText, {
-    id: "alert-dialog-slide-description"
-  }, "Showing results for ", /*#__PURE__*/React__default.createElement("b", null, model.searchQuery)), /*#__PURE__*/React__default.createElement(core.TableContainer, {
-    component: core.Paper
-  }, /*#__PURE__*/React__default.createElement(core.Table, null, /*#__PURE__*/React__default.createElement(core.TableHead, null, /*#__PURE__*/React__default.createElement(core.TableRow, null, /*#__PURE__*/React__default.createElement(core.TableCell, null, "Name"), /*#__PURE__*/React__default.createElement(core.TableCell, {
-    align: "right"
-  }, "Location"), /*#__PURE__*/React__default.createElement(core.TableCell, {
-    align: "right"
-  }, "Track"), /*#__PURE__*/React__default.createElement(core.TableCell, {
-    align: "right"
-  }))), /*#__PURE__*/React__default.createElement(core.TableBody, null, model.searchResults.map(function (result, index) {
-    return /*#__PURE__*/React__default.createElement(core.TableRow, {
-      key: "".concat(result.getLabel(), "-").concat(index)
-    }, /*#__PURE__*/React__default.createElement(core.TableCell, {
-      component: "th",
-      scope: "row"
-    }, result.getLabel()), /*#__PURE__*/React__default.createElement(core.TableCell, {
-      align: "right"
-    }, result.getLocation()), /*#__PURE__*/React__default.createElement(core.TableCell, {
-      align: "right"
-    }, getTrackName(result.getTrackId()) || 'N/A'), /*#__PURE__*/React__default.createElement(core.TableCell, {
-      align: "right"
-    }, /*#__PURE__*/React__default.createElement(core.Button, {
-      onClick: function onClick() {
-        handleClick(result.getLocation());
-        handleClose();
-      },
-      color: "primary",
-      variant: "contained"
-    }, "Go to location")), /*#__PURE__*/React__default.createElement(core.TableCell, {
-      align: "right"
-    }, /*#__PURE__*/React__default.createElement(core.Button, {
-      onClick: function onClick() {
-        handleClick(result.getLocation());
-        var resultTrackId = result.getTrackId();
-
-        if (resultTrackId) {
-          model.showTrack(resultTrackId);
-        }
-
-        handleClose();
-      },
-      disabled: !getTrackName(result.getTrackId()),
-      color: "primary",
-      variant: "contained"
-    }, "Show Track")));
-  })))))), /*#__PURE__*/React__default.createElement(core.Divider, null), /*#__PURE__*/React__default.createElement(core.DialogActions, null, /*#__PURE__*/React__default.createElement(core.Button, {
-    onClick: function onClick() {
-      handleClose();
-    },
-    color: "primary"
-  }, "Cancel")));
-}
-
-var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
+var useStyles$i = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5468,18 +5346,11 @@ var useStyles$j = /*#__PURE__*/core.makeStyles(function (theme) {
     }
   };
 });
-var ErrorDisplay = /*#__PURE__*/mobxReact.observer(function (_ref) {
-  var error = _ref.error;
-  return /*#__PURE__*/React__default.createElement(core.Typography, {
-    variant: "h6",
-    color: "error"
-  }, "".concat(error));
-});
-var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
+var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var _regions$;
 
-  var model = _ref2.model;
-  var classes = useStyles$j();
+  var model = _ref.model;
+  var classes = useStyles$i();
   var session = util.getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5518,14 +5389,11 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
 
   function fetchResults(_x, _x2) {
     return _fetchResults.apply(this, arguments);
-  }
-  /**
-   * gets a string as input, or use stored option results from previous query,
-   * then re-query and
-   * 1) if it has multiple results: pop a dialog
-   * 2) if it's a single result navigate to it
-   * 3) else assume it's a locstring and navigate to it
-   */
+  } // gets a string as input, or use stored option results from previous query,
+  // then re-query and
+  // 1) if it has multiple results: pop a dialog
+  // 2) if it's a single result navigate to it
+  // 3) else assume it's a locstring and navigate to it
 
 
   function _fetchResults() {
@@ -5651,13 +5519,13 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     return _handleSelectedRegion.apply(this, arguments);
   }
 
-  return /*#__PURE__*/React__default.createElement("div", null, err ? /*#__PURE__*/React__default.createElement(ErrorDisplay, {
+  return /*#__PURE__*/React__default.createElement("div", null, err ? /*#__PURE__*/React__default.createElement(ErrorMessage, {
     error: err
   }) : null, /*#__PURE__*/React__default.createElement(core.Container, {
     className: classes.importFormContainer
   }, /*#__PURE__*/React__default.createElement("form", {
     onSubmit: function onSubmit(event) {
-      event.preventDefault();
+      return event.preventDefault();
     }
   }, /*#__PURE__*/React__default.createElement(core.Grid, {
     container: true,
@@ -5675,20 +5543,24 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     selected: selectedAsm
   })), /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
-  }, selectedAsm ? err ? /*#__PURE__*/React__default.createElement(core.Typography, {
-    color: "error"
-  }, "X") : selectedRegion && model.volatileWidth ? /*#__PURE__*/React__default.createElement(RefNameAutocomplete$1, {
+  }, selectedAsm ? err ? /*#__PURE__*/React__default.createElement(CloseIcon, {
+    style: {
+      color: 'red'
+    }
+  }) : selectedRegion ? /*#__PURE__*/React__default.createElement(RefNameAutocomplete$1, {
     fetchResults: fetchResults,
     model: model,
     assemblyName: assemblyError ? undefined : selectedAsm,
     value: selectedRegion,
+    // note: minWidth 270 accomodates full width of helperText
+    minWidth: 270,
     onSelect: function onSelect(option) {
       return setOption(option);
     },
     TextFieldProps: {
       margin: 'normal',
       variant: 'outlined',
-      helperText: 'Enter a sequence or location'
+      helperText: 'Enter sequence name, feature name, or location'
     }
   }) : /*#__PURE__*/React__default.createElement(core.CircularProgress, {
     role: "progressbar",
@@ -5696,6 +5568,8 @@ var ImportForm = /*#__PURE__*/mobxReact.observer(function (_ref2) {
     disableShrink: true
   }) : null), /*#__PURE__*/React__default.createElement(core.Grid, {
     item: true
+  }), /*#__PURE__*/React__default.createElement(core.Grid, {
+    item: true
   }, /*#__PURE__*/React__default.createElement(core.Button, {
     type: "submit",
     disabled: !selectedRegion,
@@ -5776,7 +5650,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)
@@ -5872,7 +5746,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(),
@@ -6037,6 +5911,150 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/mobxReact.observer(SequenceDialog);
 
+var useStyles$k = /*#__PURE__*/core.makeStyles(function (theme) {
+  return {
+    dialogContent: {
+      width: '80em'
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+function SearchResultsDialog$1(_ref) {
+  var _model$searchResults;
+
+  var model = _ref.model,
+      optAssemblyName = _ref.optAssemblyName,
+      handleClose = _ref.handleClose;
+  var classes = useStyles$k();
+  var session = util.getSession(model);
+
+  var _getEnv = mobxStateTree.getEnv(session),
+      pluginManager = _getEnv.pluginManager;
+
+  var assemblyManager = session.assemblyManager;
+  var assemblyName = optAssemblyName;
+
+  if (model.displayedRegions.length > 0) {
+    var _model$displayedRegio;
+
+    assemblyName = (_model$displayedRegio = model.displayedRegions[0]) === null || _model$displayedRegio === void 0 ? void 0 : _model$displayedRegio.assemblyName;
+  }
+
+  if (!assemblyName) {
+    throw new Error("Assembly name not found");
+  }
+
+  var assembly = assemblyManager.get(assemblyName);
+
+  if (!assembly) {
+    throw new Error("assembly ".concat(assemblyName, " not found"));
+  }
+
+  if (!assembly.regions) {
+    throw new Error("assembly ".concat(assemblyName, " regions not loaded"));
+  }
+
+  var assemblyRegions = assembly.regions;
+
+  function handleClick(location) {
+    try {
+      var newRegion = assemblyRegions.find(function (region) {
+        return location === region.refName;
+      });
+
+      if (newRegion) {
+        model.setDisplayedRegions([newRegion]); // we use showAllRegions after setDisplayedRegions to make the entire
+        // region visible, xref #1703
+
+        model.showAllRegions();
+      } else {
+        model.navToLocString(location, assemblyName);
+      }
+    } catch (e) {
+      console.warn(e);
+      session.notify("".concat(e), 'warning');
+    }
+  }
+
+  function getTrackName(trackId) {
+    if (trackId) {
+      var trackConfigSchema = pluginManager.pluggableConfigSchemaType('track');
+      var configuration = mobxStateTree.resolveIdentifier(trackConfigSchema, mobxStateTree.getRoot(model), trackId);
+
+      if (configuration) {
+        var _configuration$name;
+
+        return (_configuration$name = configuration.name) === null || _configuration$name === void 0 ? void 0 : _configuration$name.value;
+      }
+    }
+
+    return '';
+  }
+
+  return /*#__PURE__*/React__default.createElement(core.Dialog, {
+    open: true,
+    maxWidth: "xl",
+    onClose: handleClose
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Search results", handleClose ? /*#__PURE__*/React__default.createElement(core.IconButton, {
+    "data-testid": "close-resultsDialog",
+    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, !((_model$searchResults = model.searchResults) !== null && _model$searchResults !== void 0 && _model$searchResults.length) ? /*#__PURE__*/React__default.createElement(core.Typography, null, "No results found for ", /*#__PURE__*/React__default.createElement("b", null, model.searchQuery)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(core.Typography, null, "Showing results for ", /*#__PURE__*/React__default.createElement("b", null, model.searchQuery)), /*#__PURE__*/React__default.createElement(core.TableContainer, {
+    component: core.Paper
+  }, /*#__PURE__*/React__default.createElement(core.Table, null, /*#__PURE__*/React__default.createElement(core.TableHead, null, /*#__PURE__*/React__default.createElement(core.TableRow, null, /*#__PURE__*/React__default.createElement(core.TableCell, null, "Name"), /*#__PURE__*/React__default.createElement(core.TableCell, {
+    align: "right"
+  }, "Location"), /*#__PURE__*/React__default.createElement(core.TableCell, {
+    align: "right"
+  }, "Track"), /*#__PURE__*/React__default.createElement(core.TableCell, {
+    align: "right"
+  }))), /*#__PURE__*/React__default.createElement(core.TableBody, null, model.searchResults.map(function (result) {
+    return /*#__PURE__*/React__default.createElement(core.TableRow, {
+      key: "".concat(result.getId())
+    }, /*#__PURE__*/React__default.createElement(core.TableCell, {
+      component: "th",
+      scope: "row"
+    }, result.getLabel()), /*#__PURE__*/React__default.createElement(core.TableCell, {
+      align: "right"
+    }, result.getLocation()), /*#__PURE__*/React__default.createElement(core.TableCell, {
+      align: "right"
+    }, getTrackName(result.getTrackId()) || 'N/A'), /*#__PURE__*/React__default.createElement(core.TableCell, {
+      align: "right"
+    }, /*#__PURE__*/React__default.createElement(core.Button, {
+      onClick: function onClick() {
+        handleClick(result.getLocation());
+        var resultTrackId = result.getTrackId();
+
+        if (resultTrackId) {
+          model.showTrack(resultTrackId);
+        }
+
+        handleClose();
+      },
+      disabled: !getTrackName(result.getTrackId()),
+      color: "primary",
+      variant: "contained"
+    }, "Go")));
+  })))))), /*#__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();
+    },
+    color: "primary"
+  }, "Cancel")));
+}
+
+var SearchResultsDialog$2 = {
+  __proto__: null,
+  useStyles: useStyles$k,
+  'default': SearchResultsDialog$1
+};
+
 var useStyles$l = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     note: {
@@ -6097,7 +6115,7 @@ var LinearGenomeView = /*#__PURE__*/mobxReact.observer(function (_ref) {
     handleClose: function handleClose() {
       model.setSequenceDialogOpen(false);
     }
-  }) : null, model.isSearchDialogDisplayed ? /*#__PURE__*/React__default.createElement(SearchResultsDialog, {
+  }) : null, model.isSearchDialogDisplayed ? /*#__PURE__*/React__default.createElement(SearchResultsDialog$1, {
     model: model,
     handleClose: function handleClose() {
       model.setSearchResults(undefined, undefined);
@@ -7200,7 +7218,8 @@ function stateModelFactory$1(pluginManager) {
       self.zoomTo(self.bpPerPx);
 
       if ( // already zoomed all the way in
-      targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx || targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx) {
+      targetBpPerPx < self.bpPerPx && self.bpPerPx === self.minBpPerPx || // already zoomed all the way out
+      targetBpPerPx > self.bpPerPx && self.bpPerPx === self.maxBpPerPx) {
         return;
       }
 
@@ -7729,6 +7748,43 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
 }(Plugin);
 
 var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+function HelpDialog$1(_ref) {
+  var handleClose = _ref.handleClose;
+  var classes = useStyles$m();
+  return /*#__PURE__*/React__default.createElement(core.Dialog, {
+    open: true,
+    maxWidth: "xl",
+    onClose: handleClose
+  }, /*#__PURE__*/React__default.createElement(core.DialogTitle, null, "Using the search box", handleClose ? /*#__PURE__*/React__default.createElement(core.IconButton, {
+    "data-testid": "close-resultsDialog",
+    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("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, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "primary"
+  }, "Close")));
+}
+
+var HelpDialog$2 = {
+  __proto__: null,
+  useStyles: useStyles$m,
+  'default': HelpDialog$1
+};
+
+var useStyles$n = /*#__PURE__*/core.makeStyles(function (theme) {
   return {
     root: {
       width: 500
@@ -7748,7 +7804,7 @@ var useStyles$m = /*#__PURE__*/core.makeStyles(function (theme) {
 function SetMaxHeightDlg$1(props) {
   var model = props.model,
       handleClose = props.handleClose;
-  var classes = useStyles$m();
+  var classes = useStyles$n();
   var _model$maxHeight = model.maxHeight,
       maxHeight = _model$maxHeight === void 0 ? '' : _model$maxHeight;