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

package/dist/LinearGenomeView/components/OverviewRubberBand.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _util = require("@jbrowse/core/util");
+
+var _mobxReact = require("mobx-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("..");
+
+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, _core.makeStyles)(function (theme) {
+  var _theme$palette = theme.palette,
+      tertiary = _theme$palette.tertiary,
+      primary = _theme$palette.primary;
+  var background = tertiary ? (0, _core.alpha)(tertiary.main, 0.7) : (0, _core.alpha)(primary.main, 0.7);
+  return {
+    rubberBand: {
+      height: '100%',
+      background: background,
+      position: 'absolute',
+      zIndex: 10,
+      textAlign: 'center',
+      overflow: 'hidden'
+    },
+    rubberBandControl: {
+      cursor: 'crosshair',
+      width: '100%',
+      minHeight: 8
+    },
+    rubberBandText: {
+      color: tertiary ? tertiary.contrastText : primary.contrastText
+    },
+    popover: {
+      mouseEvents: 'none',
+      cursor: 'crosshair'
+    },
+    paper: {
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1)
+    },
+    guide: {
+      pointerEvents: 'none',
+      height: '100%',
+      width: 1,
+      position: 'absolute',
+      zIndex: 10
+    }
+  };
+});
+var HoverTooltip = (0, _mobxReact.observer)(function (_ref) {
+  var _assembly$cytobands;
+
+  var model = _ref.model,
+      open = _ref.open,
+      guideX = _ref.guideX,
+      overview = _ref.overview;
+  var classes = useStyles();
+  var cytobandOffset = model.cytobandOffset;
+
+  var _getSession = (0, _util.getSession)(model),
+      assemblyManager = _getSession.assemblyManager;
+
+  var px = overview.pxToBp(guideX - cytobandOffset);
+  var assembly = assemblyManager.get(px.assemblyName);
+  var cytoband = assembly === null || assembly === void 0 ? void 0 : (_assembly$cytobands = assembly.cytobands) === null || _assembly$cytobands === void 0 ? void 0 : _assembly$cytobands.find(function (f) {
+    return px.coord > f.get('start') && px.coord < f.get('end') && px.refName === assembly.getCanonicalRefName(f.get('refName'));
+  });
+  return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
+    open: open,
+    placement: "top",
+    title: [(0, _util.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '),
+    arrow: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.guide,
+    style: {
+      left: guideX
+    }
+  }));
+});
+
+function OverviewRubberBand(_ref2) {
+  var model = _ref2.model,
+      overview = _ref2.overview,
+      _ref2$ControlComponen = _ref2.ControlComponent,
+      ControlComponent = _ref2$ControlComponen === void 0 ? /*#__PURE__*/_react["default"].createElement("div", null) : _ref2$ControlComponen;
+  var cytobandOffset = model.cytobandOffset;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      startX = _useState2[0],
+      setStartX = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      currentX = _useState4[0],
+      setCurrentX = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      guideX = _useState6[0],
+      setGuideX = _useState6[1];
+
+  var controlsRef = (0, _react.useRef)(null);
+  var rubberBandRef = (0, _react.useRef)(null);
+  var classes = useStyles();
+  var mouseDragging = startX !== undefined;
+  (0, _react.useEffect)(function () {
+    function globalMouseMove(event) {
+      var ref = controlsRef.current;
+
+      if (ref && mouseDragging) {
+        var relativeX = event.clientX - ref.getBoundingClientRect().left;
+        setCurrentX(relativeX);
+      }
+    }
+
+    function globalMouseUp() {
+      if (controlsRef.current && startX !== undefined && currentX !== undefined) {
+        if (Math.abs(currentX - startX) > 3) {
+          model.zoomToDisplayedRegions(overview.pxToBp(startX - cytobandOffset), overview.pxToBp(currentX - cytobandOffset));
+        }
+      }
+      /* handling clicking and centering at a specific Bp */
+
+
+      if (controlsRef.current && startX !== undefined && currentX === undefined) {
+        var clickedAt = overview.pxToBp(startX - cytobandOffset);
+        model.centerAt(Math.round(clickedAt.coord), clickedAt.refName, clickedAt.index);
+      }
+
+      setStartX(undefined);
+      setCurrentX(undefined);
+
+      if (startX !== undefined) {
+        setGuideX(undefined);
+      }
+    }
+
+    function globalKeyDown(event) {
+      if (event.key === 'Escape') {
+        setStartX(undefined);
+        setCurrentX(undefined);
+      }
+    }
+
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove, true);
+      window.addEventListener('mouseup', globalMouseUp, true);
+      window.addEventListener('keydown', globalKeyDown, true);
+      return function () {
+        window.removeEventListener('mousemove', globalMouseMove, true);
+        window.removeEventListener('mouseup', globalMouseUp, true);
+        window.removeEventListener('keydown', globalKeyDown, true);
+      };
+    }
+
+    return function () {};
+  }, [mouseDragging, currentX, startX, model, overview, cytobandOffset]);
+
+  function mouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (controlsRef.current) {
+      setStartX(event.clientX - controlsRef.current.getBoundingClientRect().left);
+    }
+  }
+
+  function mouseMove(event) {
+    if (controlsRef.current) {
+      setGuideX(event.clientX - controlsRef.current.getBoundingClientRect().left);
+    }
+  }
+
+  function mouseOut() {
+    setGuideX(undefined);
+  }
+
+  if (startX === undefined) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, guideX !== undefined ? /*#__PURE__*/_react["default"].createElement(HoverTooltip, {
+      model: model,
+      open: !mouseDragging,
+      overview: overview,
+      guideX: guideX
+    }) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.rubberBandControl,
+      role: "presentation",
+      ref: controlsRef,
+      onMouseDown: mouseDown,
+      onMouseOut: mouseOut,
+      onMouseMove: mouseMove
+    }, ControlComponent));
+  }
+
+  var left = startX || 0;
+  var width = 0;
+
+  if (startX !== undefined && currentX !== undefined) {
+    left = currentX < startX ? currentX : startX;
+    width = currentX - startX;
+  } // calculate the start and end bp of drag
+
+
+  var leftBpOffset;
+  var rightBpOffset;
+
+  if (startX) {
+    leftBpOffset = overview.pxToBp(startX - cytobandOffset);
+    rightBpOffset = overview.pxToBp(startX + width - cytobandOffset);
+
+    if (currentX && currentX < startX) {
+      ;
+      var _ref3 = [rightBpOffset, leftBpOffset];
+      leftBpOffset = _ref3[0];
+      rightBpOffset = _ref3[1];
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, rubberBandRef.current ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Popover, {
+    className: classes.popover,
+    classes: {
+      paper: classes.paper
+    },
+    open: true,
+    anchorEl: rubberBandRef.current,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    keepMounted: true,
+    disableRestoreFocus: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, leftBpOffset ? (0, _util.stringify)(leftBpOffset) : '')), /*#__PURE__*/_react["default"].createElement(_core.Popover, {
+    className: classes.popover,
+    classes: {
+      paper: classes.paper
+    },
+    open: true,
+    anchorEl: rubberBandRef.current,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    keepMounted: true,
+    disableRestoreFocus: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, rightBpOffset ? (0, _util.stringify)(rightBpOffset) : ''))) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: rubberBandRef,
+    className: classes.rubberBand,
+    style: {
+      left: left,
+      width: Math.abs(width),
+      height: _.HEADER_OVERVIEW_HEIGHT
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "rubberBand_controls",
+    className: classes.rubberBandControl,
+    role: "presentation",
+    ref: controlsRef,
+    onMouseDown: mouseDown,
+    onMouseOut: mouseOut,
+    onMouseMove: mouseMove
+  }, ControlComponent));
+}
+
+OverviewRubberBand.propTypes = {
+  model: _mobxReact.PropTypes.objectOrObservableObject.isRequired,
+  overview: _mobxReact.PropTypes.objectOrObservableObject.isRequired,
+  ControlComponent: _propTypes["default"].node
+};
+OverviewRubberBand.defaultProps = {
+  ControlComponent: /*#__PURE__*/_react["default"].createElement("div", null)
+};
+
+var _default = (0, _mobxReact.observer)(OverviewRubberBand);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/OverviewScaleBar.d.ts

@@ -20,7 +20,7 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         refNameAliases: {
             [key: string]: string;
         } | undefined;
-        cytobands: import("@jbrowse/core/util/simpleFeature").Feature[] | undefined;
+        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
     } & {
         readonly initialized: boolean;
         readonly name: string;
@@ -40,12 +40,12 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         setLoaded({ adapterRegionsWithAssembly, refNameAliases, cytobands, }: {
             adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
             refNameAliases: Record<string, string>;
-            cytobands: import("@jbrowse/core/util/simpleFeature").Feature[];
+            cytobands: import("@jbrowse/core/util").Feature[];
         }): void;
         setError(e: Error): void;
         setRegions(regions: import("@jbrowse/core/util").Region[]): void;
         setRefNameAliases(refNameAliases: Record<string, string>): void;
-        setCytobands(cytobands: import("@jbrowse/core/util/simpleFeature").Feature[]): void;
+        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
         afterAttach(): void;
     } & {
         getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
@@ -70,7 +70,7 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         refNameAliases: {
             [key: string]: string;
         } | undefined;
-        cytobands: import("@jbrowse/core/util/simpleFeature").Feature[] | undefined;
+        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
     } & {
         readonly initialized: boolean;
         readonly name: string;
@@ -90,12 +90,12 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         setLoaded({ adapterRegionsWithAssembly, refNameAliases, cytobands, }: {
             adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
             refNameAliases: Record<string, string>;
-            cytobands: import("@jbrowse/core/util/simpleFeature").Feature[];
+            cytobands: import("@jbrowse/core/util").Feature[];
         }): void;
         setError(e: Error): void;
         setRegions(regions: import("@jbrowse/core/util").Region[]): void;
         setRefNameAliases(refNameAliases: Record<string, string>): void;
-        setCytobands(cytobands: import("@jbrowse/core/util/simpleFeature").Feature[]): void;
+        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
         afterAttach(): void;
     } & {
         getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{