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

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

@@ -15,7 +15,7 @@ import Typography from '@material-ui/core/Typography';
 import MenuOpenIcon from '@material-ui/icons/MenuOpen';
 import { autorun, when, transaction } from 'mobx';
 import { getParent, types, cast, isAlive, addDisposer, getEnv, resolveIdentifier, getRoot, getSnapshot } from 'mobx-state-tree';
-import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Popover, Typography as Typography$1, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, Dialog, DialogTitle, IconButton, DialogContent, FormControlLabel, Checkbox, DialogActions, Button as Button$1, Divider, FormGroup, DialogContentText, TableContainer, Paper as Paper$1, Table, TableHead, TableRow, TableCell, TableBody, Container, Grid } from '@material-ui/core';
+import { useTheme, makeStyles as makeStyles$1, alpha, Portal, Popover, Typography as Typography$1, Tooltip as Tooltip$1, TextField, Popper, CircularProgress, InputAdornment, IconButton, Dialog, DialogTitle, DialogContent, FormControlLabel, Checkbox, DialogActions, Button as Button$1, Divider, FormGroup, Container, Grid, TableContainer, Paper as Paper$1, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
 import { Menu, ResizeHandle } from '@jbrowse/core/ui';
 import { observer, PropTypes } from 'mobx-react';
 import { usePopper } from 'react-popper';
@@ -43,6 +43,7 @@ import clsx from 'clsx';
 import BaseResult, { RefSequenceResult } from '@jbrowse/core/TextSearch/BaseResults';
 import SearchIcon from '@material-ui/icons/Search';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import HelpIcon from '@material-ui/icons/Help';
 import CloseIcon from '@material-ui/icons/Close';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
@@ -57,6 +58,7 @@ import { alpha as alpha$2 } from '@material-ui/core/styles/colorManipulator';
 import Popover$1 from '@material-ui/core/Popover';
 import Tooltip$2 from '@material-ui/core/Tooltip';
 import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage';
 import ArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import Menu$1 from '@jbrowse/core/ui/Menu';
 import copy from 'copy-to-clipboard';
@@ -2510,7 +2512,9 @@ function mathPower(num) {
   return "".concat(mathPower(~~(num / 1000)), ",").concat("00".concat(~~(num % 1000)).substr(-3, 3));
 }
 
-var useStyles$4 = /*#__PURE__*/makeStyles(function () {
+var useStyles$4 = /*#__PURE__*/makeStyles(function
+  /* theme */
+() {
   return {
     majorTickLabel: {
       fontSize: '11px'
@@ -2693,7 +2697,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);
       }
 
@@ -2897,7 +2901,7 @@ var useStyles$6 = /*#__PURE__*/makeStyles$1(function (theme) {
       height: HEADER_OVERVIEW_HEIGHT,
       pointerEvents: 'none',
       zIndex: 100,
-      border: '1px solid red'
+      border: '1px solid'
     },
     overview: {
       height: HEADER_BAR_HEIGHT,
@@ -3141,6 +3145,8 @@ var ScaleBar = /*#__PURE__*/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.createElement("div", {
     className: classes.scaleBar
   }, /*#__PURE__*/React.createElement("div", {
@@ -3148,7 +3154,8 @@ var ScaleBar = /*#__PURE__*/observer(function (_ref6) {
     style: {
       width: lastOverviewPx - firstOverviewPx,
       left: firstOverviewPx + cytobandOffset,
-      background: showCytobands ? undefined : alpha(scaleBarColor, 0.3)
+      background: alpha(color, transparency),
+      borderColor: color
     }
   }), overviewVisibleRegions.map(function (block, idx) {
     return !(block instanceof ContentBlock$1) ? /*#__PURE__*/React.createElement("div", {
@@ -3366,7 +3373,7 @@ var SVGHeader = function SVGHeader(_ref3) {
     block: block
   }), /*#__PURE__*/React.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,
@@ -3541,6 +3548,9 @@ function dedupe() {
   });
 }
 
+var HelpDialog = /*#__PURE__*/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
 
@@ -3572,6 +3582,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 = getSession(model);
@@ -3587,20 +3599,25 @@ function RefNameAutocomplete(_ref) {
       loaded = _useState4[0],
       setLoaded = _useState4[1];
 
-  var _useState5 = useState(''),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      currentSearch = _useState6[0],
-      setCurrentSearch = _useState6[1];
+      isHelpDialogDisplayed = _useState6[0],
+      setHelpDialogDisplayed = _useState6[1];
 
   var _useState7 = useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      inputValue = _useState8[0],
-      setInputValue = _useState8[1];
+      currentSearch = _useState8[0],
+      setCurrentSearch = _useState8[1];
 
-  var _useState9 = useState(),
+  var _useState9 = useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      searchOptions = _useState10[0],
-      setSearchOptions = _useState10[1];
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  var _useState11 = useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      searchOptions = _useState12[0],
+      setSearchOptions = _useState12[1];
 
   var debouncedSearch = useDebounce(currentSearch, 300);
   var coarseVisibleLocStrings = model.coarseVisibleLocStrings,
@@ -3680,12 +3697,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(measureText(inputBoxVal, 16) + 25, 200), 550); // notes on implementation:
+  var width = Math.min(Math.max(measureText(inputBoxVal, 16) + 45, minWidth), 550); // notes on implementation:
   // The selectOnFocus setting helps highlight the field when clicked
 
-  return /*#__PURE__*/React.createElement(Autocomplete, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Autocomplete, {
     id: "refNameAutocomplete-".concat(model.id),
     "data-testid": "autocomplete",
     disableListWrap: true,
@@ -3769,7 +3787,11 @@ function RefNameAutocomplete(_ref) {
             style: {
               marginRight: 7
             }
-          }, /*#__PURE__*/React.createElement(SearchIcon, null)), params.InputProps.endAdornment)
+          }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(IconButton, {
+            onClick: function onClick() {
+              return setHelpDialogDisplayed(true);
+            }
+          }, /*#__PURE__*/React.createElement(HelpIcon, null))), params.InputProps.endAdornment)
         }),
         placeholder: "Search for location",
         onChange: function onChange(e) {
@@ -3792,7 +3814,11 @@ function RefNameAutocomplete(_ref) {
     getOptionLabel: function getOptionLabel(option) {
       return (typeof option === 'string' ? option : option.result.getLabel()) || '';
     }
-  });
+  }), isHelpDialogDisplayed ? /*#__PURE__*/React.createElement(HelpDialog, {
+    handleClose: function handleClose() {
+      return setHelpDialogDisplayed(false);
+    }
+  }) : null);
 }
 
 var RefNameAutocomplete$1 = /*#__PURE__*/observer(RefNameAutocomplete);
@@ -5299,158 +5325,10 @@ function TracksContainer(_ref) {
 
 var TracksContainer$1 = /*#__PURE__*/observer(TracksContainer);
 
-var useStyles$i = /*#__PURE__*/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__*/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 = getSession(model);
-
-  var _getEnv = 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 = resolveIdentifier(trackConfigSchema, 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.createElement(Dialog, {
-    open: true,
-    maxWidth: "xl",
-    onClose: handleClose
-  }, /*#__PURE__*/React.createElement(DialogTitle, {
-    id: "search-results-dialog"
-  }, "Search Results", handleClose ? /*#__PURE__*/React.createElement(IconButton, {
-    "data-testid": "close-resultsDialog",
-    className: classes.closeButton,
-    onClick: function onClick() {
-      handleClose();
-    }
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, ((_model$searchResults = model.searchResults) === null || _model$searchResults === void 0 ? void 0 : _model$searchResults.length) === 0 || model.searchResults === undefined ? /*#__PURE__*/React.createElement(Typography$1, null, "No results found for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContentText, {
-    id: "alert-dialog-slide-description"
-  }, "Showing results for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)), /*#__PURE__*/React.createElement(TableContainer, {
-    component: Paper$1
-  }, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, "Name"), /*#__PURE__*/React.createElement(TableCell, {
-    align: "right"
-  }, "Location"), /*#__PURE__*/React.createElement(TableCell, {
-    align: "right"
-  }, "Track"), /*#__PURE__*/React.createElement(TableCell, {
-    align: "right"
-  }))), /*#__PURE__*/React.createElement(TableBody, null, model.searchResults.map(function (result, index) {
-    return /*#__PURE__*/React.createElement(TableRow, {
-      key: "".concat(result.getLabel(), "-").concat(index)
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      component: "th",
-      scope: "row"
-    }, result.getLabel()), /*#__PURE__*/React.createElement(TableCell, {
-      align: "right"
-    }, result.getLocation()), /*#__PURE__*/React.createElement(TableCell, {
-      align: "right"
-    }, getTrackName(result.getTrackId()) || 'N/A'), /*#__PURE__*/React.createElement(TableCell, {
-      align: "right"
-    }, /*#__PURE__*/React.createElement(Button$1, {
-      onClick: function onClick() {
-        handleClick(result.getLocation());
-        handleClose();
-      },
-      color: "primary",
-      variant: "contained"
-    }, "Go to location")), /*#__PURE__*/React.createElement(TableCell, {
-      align: "right"
-    }, /*#__PURE__*/React.createElement(Button$1, {
-      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.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
-    onClick: function onClick() {
-      handleClose();
-    },
-    color: "primary"
-  }, "Cancel")));
-}
-
-var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$i = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     importFormContainer: {
       padding: theme.spacing(2)
@@ -5460,18 +5338,11 @@ var useStyles$j = /*#__PURE__*/makeStyles$1(function (theme) {
     }
   };
 });
-var ErrorDisplay = /*#__PURE__*/observer(function (_ref) {
-  var error = _ref.error;
-  return /*#__PURE__*/React.createElement(Typography$1, {
-    variant: "h6",
-    color: "error"
-  }, "".concat(error));
-});
-var ImportForm = /*#__PURE__*/observer(function (_ref2) {
+var ImportForm = /*#__PURE__*/observer(function (_ref) {
   var _regions$;
 
-  var model = _ref2.model;
-  var classes = useStyles$j();
+  var model = _ref.model;
+  var classes = useStyles$i();
   var session = getSession(model);
   var assemblyNames = session.assemblyNames,
       assemblyManager = session.assemblyManager,
@@ -5510,14 +5381,11 @@ var ImportForm = /*#__PURE__*/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() {
@@ -5643,13 +5511,13 @@ var ImportForm = /*#__PURE__*/observer(function (_ref2) {
     return _handleSelectedRegion.apply(this, arguments);
   }
 
-  return /*#__PURE__*/React.createElement("div", null, err ? /*#__PURE__*/React.createElement(ErrorDisplay, {
+  return /*#__PURE__*/React.createElement("div", null, err ? /*#__PURE__*/React.createElement(ErrorMessage, {
     error: err
   }) : null, /*#__PURE__*/React.createElement(Container, {
     className: classes.importFormContainer
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: function onSubmit(event) {
-      event.preventDefault();
+      return event.preventDefault();
     }
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
@@ -5667,20 +5535,24 @@ var ImportForm = /*#__PURE__*/observer(function (_ref2) {
     selected: selectedAsm
   })), /*#__PURE__*/React.createElement(Grid, {
     item: true
-  }, selectedAsm ? err ? /*#__PURE__*/React.createElement(Typography$1, {
-    color: "error"
-  }, "X") : selectedRegion && model.volatileWidth ? /*#__PURE__*/React.createElement(RefNameAutocomplete$1, {
+  }, selectedAsm ? err ? /*#__PURE__*/React.createElement(CloseIcon, {
+    style: {
+      color: 'red'
+    }
+  }) : selectedRegion ? /*#__PURE__*/React.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.createElement(CircularProgress, {
     role: "progressbar",
@@ -5688,6 +5560,8 @@ var ImportForm = /*#__PURE__*/observer(function (_ref2) {
     disableShrink: true
   }) : null), /*#__PURE__*/React.createElement(Grid, {
     item: true
+  }), /*#__PURE__*/React.createElement(Grid, {
+    item: true
   }, /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
     disabled: !selectedRegion,
@@ -5768,7 +5642,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)
@@ -5864,7 +5738,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(),
@@ -6029,6 +5903,150 @@ function SequenceDialog(_ref) {
 
 var SequenceDialog$1 = /*#__PURE__*/observer(SequenceDialog);
 
+var useStyles$k = /*#__PURE__*/makeStyles$1(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 = getSession(model);
+
+  var _getEnv = 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 = resolveIdentifier(trackConfigSchema, 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.createElement(Dialog, {
+    open: true,
+    maxWidth: "xl",
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Search results", handleClose ? /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "close-resultsDialog",
+    className: classes.closeButton,
+    onClick: function onClick() {
+      handleClose();
+    }
+  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogContent, null, !((_model$searchResults = model.searchResults) !== null && _model$searchResults !== void 0 && _model$searchResults.length) ? /*#__PURE__*/React.createElement(Typography$1, null, "No results found for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography$1, null, "Showing results for ", /*#__PURE__*/React.createElement("b", null, model.searchQuery)), /*#__PURE__*/React.createElement(TableContainer, {
+    component: Paper$1
+  }, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, null, "Name"), /*#__PURE__*/React.createElement(TableCell, {
+    align: "right"
+  }, "Location"), /*#__PURE__*/React.createElement(TableCell, {
+    align: "right"
+  }, "Track"), /*#__PURE__*/React.createElement(TableCell, {
+    align: "right"
+  }))), /*#__PURE__*/React.createElement(TableBody, null, model.searchResults.map(function (result) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: "".concat(result.getId())
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      component: "th",
+      scope: "row"
+    }, result.getLabel()), /*#__PURE__*/React.createElement(TableCell, {
+      align: "right"
+    }, result.getLocation()), /*#__PURE__*/React.createElement(TableCell, {
+      align: "right"
+    }, getTrackName(result.getTrackId()) || 'N/A'), /*#__PURE__*/React.createElement(TableCell, {
+      align: "right"
+    }, /*#__PURE__*/React.createElement(Button$1, {
+      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.createElement(Divider, null), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button$1, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "primary"
+  }, "Cancel")));
+}
+
+var SearchResultsDialog$2 = {
+  __proto__: null,
+  useStyles: useStyles$k,
+  'default': SearchResultsDialog$1
+};
+
 var useStyles$l = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     note: {
@@ -6089,7 +6107,7 @@ var LinearGenomeView = /*#__PURE__*/observer(function (_ref) {
     handleClose: function handleClose() {
       model.setSequenceDialogOpen(false);
     }
-  }) : null, model.isSearchDialogDisplayed ? /*#__PURE__*/React.createElement(SearchResultsDialog, {
+  }) : null, model.isSearchDialogDisplayed ? /*#__PURE__*/React.createElement(SearchResultsDialog$1, {
     model: model,
     handleClose: function handleClose() {
       model.setSearchResults(undefined, undefined);
@@ -7192,7 +7210,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;
       }
 
@@ -7721,6 +7740,43 @@ var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
 }(Plugin);
 
 var useStyles$m = /*#__PURE__*/makeStyles$1(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.createElement(Dialog, {
+    open: true,
+    maxWidth: "xl",
+    onClose: handleClose
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Using the search box", handleClose ? /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "close-resultsDialog",
+    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("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, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "primary"
+  }, "Close")));
+}
+
+var HelpDialog$2 = {
+  __proto__: null,
+  useStyles: useStyles$m,
+  'default': HelpDialog$1
+};
+
+var useStyles$n = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     root: {
       width: 500
@@ -7740,7 +7796,7 @@ var useStyles$m = /*#__PURE__*/makeStyles$1(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;