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

package/dist/LinearBasicDisplay/model.d.ts

@@ -27,7 +27,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
         renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | undefined;
-        features: Map<string, import("@jbrowse/core/util/simpleFeature").Feature> | undefined;
+        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
         layout: any;
         status: string;
         error: unknown;
@@ -45,7 +45,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
         setMessage(messageText: string): void;
         setRendered(props: {
             reactElement: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-            features: Map<string, import("@jbrowse/core/util/simpleFeature").Feature>;
+            features: Map<string, import("@jbrowse/core/util").Feature>;
             layout: any;
             maxHeightReached: boolean;
             renderProps: any;
@@ -119,7 +119,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     currBpPerPx: number;
     message: string;
     featureIdUnderMouse: string | undefined;
-    contextMenuFeature: import("@jbrowse/core/util/simpleFeature").Feature | undefined;
+    contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
     scrollTop: number;
     estimatedRegionStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").Stats> | undefined;
     estimatedRegionStats: import("@jbrowse/core/data_adapters/BaseAdapter").Stats | undefined;
@@ -132,8 +132,8 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     readonly selectedFeatureId: string | undefined;
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
 } & {
-    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util/simpleFeature").Feature>;
-    readonly featureUnderMouse: import("@jbrowse/core/util/simpleFeature").Feature | undefined;
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
+    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
     getFeatureOverlapping(blockKey: string, x: number, y: number): any;
     getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
     searchFeatureByID(id: string): [number, number, number, number] | undefined;
@@ -160,11 +160,11 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     setCurrBpPerPx(n: number): void;
     deleteBlock(key: string): void;
-    selectFeature(feature: import("@jbrowse/core/util/simpleFeature").Feature): void;
+    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature: string | undefined): void;
     reload(): void;
-    setContextMenuFeature(feature?: import("@jbrowse/core/util/simpleFeature").Feature | undefined): void;
+    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
 } & {
     readonly regionTooLarge: boolean;
     readonly regionTooLargeReason: string;

package/dist/LinearBasicDisplay/model.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _util = require("@jbrowse/core/util");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+
+var _BaseLinearDisplay = require("../BaseLinearDisplay");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2["default"])(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SetMaxHeightDlg = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./components/SetMaxHeight'));
+  });
+});
+
+var stateModelFactory = function stateModelFactory(configSchema) {
+  return _mobxStateTree.types.compose('LinearBasicDisplay', _BaseLinearDisplay.BaseLinearDisplay, _mobxStateTree.types.model({
+    type: _mobxStateTree.types.literal('LinearBasicDisplay'),
+    trackShowLabels: _mobxStateTree.types.maybe(_mobxStateTree.types["boolean"]),
+    trackShowDescriptions: _mobxStateTree.types.maybe(_mobxStateTree.types["boolean"]),
+    trackDisplayMode: _mobxStateTree.types.maybe(_mobxStateTree.types.string),
+    trackMaxHeight: _mobxStateTree.types.maybe(_mobxStateTree.types.number),
+    configuration: (0, _configuration.ConfigurationReference)(configSchema)
+  })).views(function (self) {
+    return {
+      get rendererTypeName() {
+        return (0, _configuration.getConf)(self, ['renderer', 'type']);
+      },
+
+      get showLabels() {
+        var _self$trackShowLabels;
+
+        return (_self$trackShowLabels = self.trackShowLabels) !== null && _self$trackShowLabels !== void 0 ? _self$trackShowLabels : (0, _configuration.getConf)(self, ['renderer', 'showLabels']);
+      },
+
+      get showDescriptions() {
+        var _self$trackShowDescri;
+
+        return (_self$trackShowDescri = self.trackShowDescriptions) !== null && _self$trackShowDescri !== void 0 ? _self$trackShowDescri : (0, _configuration.getConf)(self, ['renderer', 'showLabels']);
+      },
+
+      get maxHeight() {
+        var _self$trackMaxHeight;
+
+        return (_self$trackMaxHeight = self.trackMaxHeight) !== null && _self$trackMaxHeight !== void 0 ? _self$trackMaxHeight : (0, _configuration.getConf)(self, ['renderer', 'maxHeight']);
+      },
+
+      get displayMode() {
+        var _self$trackDisplayMod;
+
+        var displayMode = (0, _configuration.getConf)(self, ['renderer', 'displayMode']);
+        return (_self$trackDisplayMod = self.trackDisplayMode) !== null && _self$trackDisplayMod !== void 0 ? _self$trackDisplayMod : displayMode;
+      },
+
+      get rendererConfig() {
+        var configBlob = (0, _configuration.getConf)(self, ['renderer']) || {};
+        return self.rendererType.configSchema.create(_objectSpread(_objectSpread({}, configBlob), {}, {
+          showLabels: this.showLabels,
+          showDescriptions: this.showDescriptions,
+          displayMode: this.displayMode,
+          maxHeight: this.maxHeight
+        }), (0, _mobxStateTree.getEnv)(self));
+      }
+
+    };
+  }).actions(function (self) {
+    return {
+      toggleShowLabels: function toggleShowLabels() {
+        self.trackShowLabels = !self.showLabels;
+      },
+      toggleShowDescriptions: function toggleShowDescriptions() {
+        self.trackShowDescriptions = !self.showDescriptions;
+      },
+      setDisplayMode: function setDisplayMode(val) {
+        self.trackDisplayMode = val;
+      },
+      setMaxHeight: function setMaxHeight(val) {
+        self.trackMaxHeight = val;
+      }
+    };
+  }).views(function (self) {
+    var superTrackMenuItems = self.trackMenuItems,
+        superRenderProps = self.renderProps;
+    return {
+      renderProps: function renderProps() {
+        var config = self.rendererConfig;
+        return _objectSpread(_objectSpread({}, superRenderProps()), {}, {
+          config: config
+        });
+      },
+      trackMenuItems: function trackMenuItems() {
+        return [].concat((0, _toConsumableArray2["default"])(superTrackMenuItems()), [{
+          label: 'Show labels',
+          icon: _Visibility["default"],
+          type: 'checkbox',
+          checked: self.showLabels,
+          onClick: function onClick() {
+            self.toggleShowLabels();
+          }
+        }, {
+          label: 'Show descriptions',
+          icon: _Visibility["default"],
+          type: 'checkbox',
+          checked: self.showDescriptions,
+          onClick: function onClick() {
+            self.toggleShowDescriptions();
+          }
+        }, {
+          label: 'Display mode',
+          icon: _Visibility["default"],
+          subMenu: ['compact', 'reducedRepresentation', 'normal', 'collapse'].map(function (val) {
+            return {
+              label: val,
+              onClick: function onClick() {
+                self.setDisplayMode(val);
+              }
+            };
+          })
+        }, {
+          label: 'Set max height',
+          onClick: function onClick() {
+            (0, _util.getSession)(self).queueDialog(function (doneCallback) {
+              return [SetMaxHeightDlg, {
+                model: self,
+                handleClose: doneCallback
+              }];
+            });
+          }
+        }]);
+      }
+    };
+  });
+};
+
+var _default = stateModelFactory;
+exports["default"] = _default;

package/dist/LinearGenomeView/components/CenterLine.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styles = require("@material-ui/core/styles");
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useStyles = (0, _styles.makeStyles)(function () {
+  return {
+    centerLineContainer: {
+      background: 'transparent',
+      height: '100%',
+      zIndex: 5,
+      // above the track but under menu
+      position: 'absolute',
+      border: '1px black dashed',
+      borderTop: 'none',
+      borderBottom: 'none',
+      pointerEvents: 'none'
+    },
+    centerLineText: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      fontWeight: 'bold'
+    }
+  };
+});
+
+function CenterLine(_ref) {
+  var model = _ref.model;
+  var bpPerPx = model.bpPerPx,
+      centerLineInfo = model.centerLineInfo,
+      trackHeights = model.trackHeights,
+      tracks = model.tracks,
+      width = model.width;
+  var ref = (0, _react.useRef)(null);
+  var classes = useStyles();
+  var startingPosition = width / 2;
+  return tracks.length ? /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "centerline_container",
+    className: classes.centerLineContainer,
+    role: "presentation",
+    ref: ref,
+    style: {
+      left: "".concat(startingPosition, "px"),
+      width: Math.max(1 / bpPerPx, 1)
+    }
+  }, centerLineInfo && /*#__PURE__*/_react["default"].createElement("div", {
+    // text that indicates what bp is center, positioned
+    // at the bottom right of the center line
+    "data-testid": "centerline_text",
+    className: classes.centerLineText,
+    role: "presentation",
+    style: {
+      left: Math.max(1 / bpPerPx, 1) + 5,
+      top: trackHeights
+    }
+  }, centerLineInfo.refName, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0))) : null;
+}
+
+CenterLine.propTypes = {
+  model: _mobxReact.PropTypes.objectOrObservableObject.isRequired
+};
+
+var _default = (0, _mobxReact.observer)(CenterLine);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/ExportSvgDialog.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ExportSvgDlg;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _core = require("@material-ui/core");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+
+function ExportSvgDlg(_ref) {
+  var model = _ref.model,
+      handleClose = _ref.handleClose;
+  // @ts-ignore
+  var offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+
+  var _useState = (0, _react.useState)(offscreenCanvas),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      rasterizeLayers = _useState2[0],
+      setRasterizeLayers = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, "Export SVG", /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    className: classes.closeButton,
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, error ? /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      color: 'red'
+    }
+  }, "".concat(error)) : loading ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.CircularProgress, {
+    size: 20,
+    style: {
+      marginRight: 20
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    display: "inline"
+  }, "Creating SVG")) : null, offscreenCanvas ? /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
+    control: /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
+      checked: rasterizeLayers,
+      onChange: function onChange() {
+        return setRasterizeLayers(function (val) {
+          return !val;
+        });
+      }
+    }),
+    label: "Rasterize canvas based tracks? File may be much larger if this is turned off"
+  }) : /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large")), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "primary",
+    type: "submit",
+    onClick: /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              setError(undefined);
+              _context.prev = 2;
+              _context.next = 5;
+              return model.exportSvg({
+                rasterizeLayers: rasterizeLayers
+              });
+
+            case 5:
+              handleClose();
+              _context.next = 12;
+              break;
+
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](2);
+              console.error(_context.t0);
+              setError(_context.t0);
+
+            case 12:
+              _context.prev = 12;
+              setLoading(false);
+              return _context.finish(12);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 8, 12, 15]]);
+    }))
+  }, "Submit")));
+}

package/dist/LinearGenomeView/components/Header.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _SearchBox = _interopRequireDefault(require("./SearchBox"));
+
+var _Icons = require("@jbrowse/core/ui/Icons");
+
+var _ArrowForward = _interopRequireDefault(require("@material-ui/icons/ArrowForward"));
+
+var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
+
+var _ = require("..");
+
+var _OverviewScaleBar = _interopRequireDefault(require("./OverviewScaleBar"));
+
+var _ZoomControls = _interopRequireDefault(require("./ZoomControls"));
+
+// icons
+// locals
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    headerBar: {
+      height: _.HEADER_BAR_HEIGHT,
+      display: 'flex'
+    },
+    headerForm: {
+      flexWrap: 'nowrap',
+      marginRight: 7
+    },
+    spacer: {
+      flexGrow: 1
+    },
+    panButton: {
+      background: (0, _core.alpha)(theme.palette.background.paper, 0.8),
+      height: _.WIDGET_HEIGHT,
+      margin: _.SPACING
+    },
+    bp: {
+      display: 'flex',
+      alignItems: 'center',
+      marginLeft: 5
+    },
+    toggleButton: {
+      height: 44,
+      border: 'none',
+      margin: theme.spacing(0.5)
+    },
+    buttonSpacer: {
+      marginRight: theme.spacing(2)
+    }
+  };
+});
+var HeaderButtons = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: model.activateTrackSelector,
+    className: classes.toggleButton,
+    title: "Open track selector",
+    value: "track_select",
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_Icons.TrackSelector, {
+    className: classes.buttonSpacer
+  }));
+});
+
+function PanControls(_ref2) {
+  var model = _ref2.model;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "outlined",
+    className: classes.panButton,
+    onClick: function onClick() {
+      return model.slide(-0.9);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ArrowBack["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "outlined",
+    className: classes.panButton,
+    onClick: function onClick() {
+      return model.slide(0.9);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ArrowForward["default"], null)));
+}
+
+var RegionWidth = (0, _mobxReact.observer)(function (_ref3) {
+  var model = _ref3.model;
+  var classes = useStyles();
+  var coarseTotalBp = model.coarseTotalBp;
+  return /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    variant: "body2",
+    color: "textSecondary",
+    className: classes.bp
+  }, Math.round(coarseTotalBp).toLocaleString('en-US'), " bp");
+});
+
+var Controls = function Controls(_ref4) {
+  var model = _ref4.model;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.headerBar
+  }, /*#__PURE__*/_react["default"].createElement(HeaderButtons, {
+    model: model
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.spacer
+  }), /*#__PURE__*/_react["default"].createElement(_core.FormGroup, {
+    row: true,
+    className: classes.headerForm
+  }, /*#__PURE__*/_react["default"].createElement(PanControls, {
+    model: model
+  }), /*#__PURE__*/_react["default"].createElement(_SearchBox["default"], {
+    model: model
+  })), /*#__PURE__*/_react["default"].createElement(RegionWidth, {
+    model: model
+  }), /*#__PURE__*/_react["default"].createElement(_ZoomControls["default"], {
+    model: model
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.spacer
+  }));
+};
+
+var LinearGenomeViewHeader = (0, _mobxReact.observer)(function (_ref5) {
+  var model = _ref5.model;
+  return model.hideHeaderOverview ? /*#__PURE__*/_react["default"].createElement(Controls, {
+    model: model
+  }) : /*#__PURE__*/_react["default"].createElement(_OverviewScaleBar["default"], {
+    model: model
+  }, /*#__PURE__*/_react["default"].createElement(Controls, {
+    model: model
+  }));
+});
+var _default = LinearGenomeViewHeader;
+exports["default"] = _default;

package/dist/LinearGenomeView/components/HelpDialog.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = HelpDialog;
+exports.useStyles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+exports.useStyles = useStyles;
+
+function HelpDialog(_ref) {
+  var handleClose = _ref.handleClose;
+  var classes = useStyles();
+  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(_Close["default"], null)) : null), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement("h3", null, "Searching"), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Jump to a feature or reference sequence by typing its name in the location box and pressing Enter."), /*#__PURE__*/_react["default"].createElement("li", null, "Jump to a specific region by typing the region into the location box as: ", /*#__PURE__*/_react["default"].createElement("code", null, "ref:start..end"), " or ", /*#__PURE__*/_react["default"].createElement("code", null, "ref:start-end"), ". Commas are allowed in the start and end coordinates. A space-separated list of locstrings can be used to open up multiple chromosomes at a time")), /*#__PURE__*/_react["default"].createElement("h3", null, "Example Searches"), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "BRCA"), " - searches for the feature named BRCA"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "chr4"), " - jumps to chromosome 4"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "chr4:79,500,000..80,000,000"), " - jumps the region on chromosome 4 between 79.5Mb and 80Mb."), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "chr1:1-100 chr2:1-100"), " - create a split view of chr1:1-100 and chr2:1-100"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "chr1 chr2 chr3"), " - open up multiple chromosomes at once"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("code", null, "chr1:1-100[rev] chr2:1-100"), " - open up the first region in the horizontally flipped orientation"))), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "primary"
+  }, "Close")));
+}