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

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _core = require("@material-ui/core");
+
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+
+var _DragIndicator = _interopRequireDefault(require("@material-ui/icons/DragIndicator"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _mobxReact = require("mobx-react");
+
+// icons
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    root: {
+      background: (0, _core.alpha)(theme.palette.background.paper, 0.8),
+      '&:hover': {
+        background: theme.palette.background.paper
+      },
+      transition: theme.transitions.create(['background'], {
+        duration: theme.transitions.duration.shortest
+      })
+    },
+    trackName: {
+      margin: '0 auto',
+      width: '90%',
+      fontSize: '0.8rem',
+      pointerEvents: 'none'
+    },
+    dragHandle: {
+      cursor: 'grab',
+      color: '#135560'
+    },
+    dragHandleIcon: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      pointerEvents: 'none'
+    },
+    iconButton: {
+      padding: theme.spacing(1)
+    }
+  };
+});
+
+var TrackLabel = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var _session$getTrackActi;
+
+  var classes = useStyles();
+
+  var _React$useState = _react["default"].useState(null),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      anchorEl = _React$useState2[0],
+      setAnchorEl = _React$useState2[1];
+
+  var track = props.track,
+      className = props.className;
+  var view = (0, _util.getContainingView)(track);
+  var session = (0, _util.getSession)(track);
+  var trackConf = track.configuration;
+  var trackId = (0, _configuration.getConf)(track, 'trackId');
+
+  var handleClick = function handleClick(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  var onDragStart = function onDragStart(event) {
+    var target = event.target;
+
+    if (target.parentNode) {
+      event.dataTransfer.setDragImage(target.parentNode, 20, 20);
+      view.setDraggingTrackId(track.id);
+    }
+  };
+
+  var onDragEnd = function onDragEnd() {
+    view.setDraggingTrackId(undefined);
+  };
+
+  var trackName = (0, _configuration.getConf)(track, 'name');
+
+  if ((0, _configuration.getConf)(track, 'type') === 'ReferenceSequenceTrack') {
+    trackName = 'Reference Sequence';
+    session.assemblies.forEach(function (assembly) {
+      if (assembly.sequence === trackConf) {
+        trackName = "Reference Sequence (".concat((0, _configuration.readConfObject)(assembly, 'name'), ")");
+      }
+    });
+  }
+
+  function handleMenuItemClick(_, callback) {
+    callback();
+    handleClose();
+  }
+
+  var items = [].concat((0, _toConsumableArray2["default"])(((_session$getTrackActi = session.getTrackActionMenuItems) === null || _session$getTrackActi === void 0 ? void 0 : _session$getTrackActi.call(session, trackConf)) || []), (0, _toConsumableArray2["default"])(track.trackMenuItems())).sort(function (a, b) {
+    return (b.priority || 0) - (a.priority || 0);
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
+    ref: ref,
+    className: (0, _clsx["default"])(className, classes.root)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    draggable: true,
+    className: classes.dragHandle,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    "data-testid": "dragHandle-".concat(view.id, "-").concat(trackId)
+  }, /*#__PURE__*/_react["default"].createElement(_DragIndicator["default"], {
+    className: classes.dragHandleIcon
+  })), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    onClick: function onClick() {
+      return view.hideTrack(trackId);
+    },
+    className: classes.iconButton,
+    title: "close this track",
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    variant: "body1",
+    component: "span",
+    className: classes.trackName
+  }, trackName), /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    "aria-controls": "simple-menu",
+    "aria-haspopup": "true",
+    onClick: handleClick,
+    className: classes.iconButton,
+    color: "secondary",
+    "data-testid": "track_menu_icon",
+    disabled: !items.length
+  }, /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], null))), /*#__PURE__*/_react["default"].createElement(_ui.Menu, {
+    anchorEl: anchorEl,
+    onMenuItemClick: handleMenuItemClick,
+    open: Boolean(anchorEl),
+    onClose: handleClose,
+    menuItems: items
+  }));
+});
+
+var _default = (0, _mobxReact.observer)(TrackLabel);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/TracksContainer.js

@@ -0,0 +1,214 @@
+"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 _styles = require("@material-ui/core/styles");
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _normalizeWheel = _interopRequireDefault(require("normalize-wheel"));
+
+var _ = require("..");
+
+var _RubberBand = _interopRequireDefault(require("./RubberBand"));
+
+var _ScaleBar = _interopRequireDefault(require("./ScaleBar"));
+
+var _VerticalGuides = _interopRequireDefault(require("./VerticalGuides"));
+
+var _CenterLine = _interopRequireDefault(require("./CenterLine"));
+
+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 {
+    tracksContainer: {
+      position: 'relative',
+      borderRadius: theme.shape.borderRadius,
+      overflow: 'hidden'
+    },
+    spacer: {
+      position: 'relative',
+      height: _.RESIZE_HANDLE_HEIGHT
+    }
+  };
+});
+
+function TracksContainer(_ref) {
+  var children = _ref.children,
+      model = _ref.model;
+  var classes = useStyles(); // refs are to store these variables to avoid repeated rerenders associated
+  // with useState/setState
+
+  var delta = (0, _react.useRef)(0);
+  var scheduled = (0, _react.useRef)(false);
+  var timeout = (0, _react.useRef)();
+  var ref = (0, _react.useRef)(null);
+  var prevX = (0, _react.useRef)(0);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      mouseDragging = _useState2[0],
+      setMouseDragging = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var cleanup = function cleanup() {};
+
+    function globalMouseMove(event) {
+      event.preventDefault();
+      var currX = event.clientX;
+      var distance = currX - prevX.current;
+
+      if (distance) {
+        // use rAF to make it so multiple event handlers aren't fired per-frame
+        // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+        if (!scheduled.current) {
+          scheduled.current = true;
+          window.requestAnimationFrame(function () {
+            model.horizontalScroll(-distance);
+            scheduled.current = false;
+            prevX.current = event.clientX;
+          });
+        }
+      }
+    }
+
+    function globalMouseUp() {
+      prevX.current = 0;
+
+      if (mouseDragging) {
+        setMouseDragging(false);
+      }
+    }
+
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove, true);
+      window.addEventListener('mouseup', globalMouseUp, true);
+
+      cleanup = function cleanup() {
+        window.removeEventListener('mousemove', globalMouseMove, true);
+        window.removeEventListener('mouseup', globalMouseUp, true);
+      };
+    }
+
+    return cleanup;
+  }, [model, mouseDragging, prevX]);
+
+  function mouseDown(event) {
+    // check if clicking a draggable element or a resize handle
+    var target = event.target;
+
+    if (target.draggable || target.dataset.resizer) {
+      return;
+    } // otherwise do click and drag scroll
+
+
+    if (event.button === 0) {
+      prevX.current = event.clientX;
+      setMouseDragging(true);
+    }
+  } // this local mouseup is used in addition to the global because sometimes
+  // the global add/remove are not called in time, resulting in issue #533
+
+
+  function mouseUp(event) {
+    event.preventDefault();
+    setMouseDragging(false);
+  }
+
+  function mouseLeave(event) {
+    event.preventDefault();
+  }
+
+  (0, _react.useEffect)(function () {
+    var curr = ref.current; // if ctrl is held down, zoom in with y-scroll
+    // else scroll horizontally with x-scroll
+
+    function onWheel(origEvent) {
+      var event = (0, _normalizeWheel["default"])(origEvent);
+
+      if (origEvent.ctrlKey === true) {
+        origEvent.preventDefault();
+        delta.current += event.pixelY / 500;
+        model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
+
+        if (timeout.current) {
+          clearTimeout(timeout.current);
+        }
+
+        timeout.current = setTimeout(function () {
+          model.setScaleFactor(1);
+          model.zoomTo(delta.current > 0 ? model.bpPerPx * (1 + delta.current) : model.bpPerPx / (1 - delta.current));
+          delta.current = 0;
+        }, 300);
+      } else {
+        // this is needed to stop the event from triggering "back button
+        // action" on MacOSX etc.  but is a heuristic to avoid preventing the
+        // inner-track scroll behavior
+        if (Math.abs(event.pixelX) > Math.abs(2 * event.pixelY)) {
+          origEvent.preventDefault();
+        }
+
+        delta.current += event.pixelX;
+
+        if (!scheduled.current) {
+          // use rAF to make it so multiple event handlers aren't fired per-frame
+          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+          scheduled.current = true;
+          window.requestAnimationFrame(function () {
+            model.horizontalScroll(delta.current);
+            delta.current = 0;
+            scheduled.current = false;
+          });
+        }
+      }
+    }
+
+    if (curr) {
+      curr.addEventListener('wheel', onWheel);
+      return function () {
+        curr.removeEventListener('wheel', onWheel);
+      };
+    }
+
+    return function () {};
+  }, [model]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    role: "presentation",
+    className: classes.tracksContainer,
+    onMouseDown: mouseDown,
+    onMouseUp: mouseUp,
+    onMouseLeave: mouseLeave
+  }, /*#__PURE__*/_react["default"].createElement(_VerticalGuides["default"], {
+    model: model
+  }), model.showCenterLine ? /*#__PURE__*/_react["default"].createElement(_CenterLine["default"], {
+    model: model
+  }) : null, /*#__PURE__*/_react["default"].createElement(_RubberBand["default"], {
+    model: model,
+    ControlComponent: /*#__PURE__*/_react["default"].createElement(_ScaleBar["default"], {
+      model: model,
+      style: {
+        height: _.SCALE_BAR_HEIGHT,
+        boxSizing: 'border-box'
+      }
+    })
+  }), children);
+}
+
+var _default = (0, _mobxReact.observer)(TracksContainer);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/VerticalGuides.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _blockTypes = require("@jbrowse/core/util/blockTypes");
+
+var _styles = require("@material-ui/core/styles");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Block = require("../../BaseLinearDisplay/components/Block");
+
+var _util = require("../util");
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    verticalGuidesZoomContainer: {
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      zIndex: 1,
+      pointerEvents: 'none'
+    },
+    verticalGuidesContainer: {
+      position: 'absolute',
+      height: '100%',
+      zIndex: 1,
+      pointerEvents: 'none',
+      display: 'flex'
+    },
+    tick: {
+      position: 'absolute',
+      height: '100%',
+      width: 1
+    },
+    majorTick: {
+      background: theme.palette.text.hint
+    },
+    minorTick: {
+      background: theme.palette.divider
+    }
+  };
+});
+var RenderedVerticalGuides = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, model.staticBlocks.map(function (block, index) {
+    if (block instanceof _blockTypes.ContentBlock) {
+      var ticks = (0, _util.makeTicks)(block.start, block.end, model.bpPerPx);
+      return /*#__PURE__*/_react["default"].createElement(_Block.ContentBlock, {
+        key: "".concat(block.key, "-").concat(index),
+        block: block
+      }, ticks.map(function (tick) {
+        var x = (block.reversed ? block.end - tick.base : tick.base - block.start) / model.bpPerPx;
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: tick.base,
+          className: (0, _clsx["default"])(classes.tick, tick.type === 'major' || tick.type === 'labeledMajor' ? classes.majorTick : classes.minorTick),
+          style: {
+            left: x
+          }
+        });
+      }));
+    }
+
+    if (block instanceof _blockTypes.ElidedBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.ElidedBlock, {
+        key: block.key,
+        width: block.widthPx
+      });
+    }
+
+    if (block instanceof _blockTypes.InterRegionPaddingBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.InterRegionPaddingBlock, {
+        key: block.key,
+        width: block.widthPx,
+        boundary: block.variant === 'boundary'
+      });
+    }
+
+    return null;
+  }));
+});
+
+function VerticalGuides(_ref2) {
+  var model = _ref2.model;
+  var classes = useStyles(); // find the block that needs pinning to the left side for context
+
+  var offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.verticalGuidesZoomContainer,
+    style: {
+      transform: model.scaleFactor !== 1 ? "scaleX(".concat(model.scaleFactor, ")") : undefined
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.verticalGuidesContainer,
+    style: {
+      left: offsetLeft,
+      width: model.staticBlocks.totalWidthPx
+    }
+  }, /*#__PURE__*/_react["default"].createElement(RenderedVerticalGuides, {
+    model: model
+  })));
+}
+
+var _default = (0, _mobxReact.observer)(VerticalGuides);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/ZoomControls.js

@@ -0,0 +1,92 @@
+"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 _mobxReact = require("mobx-react");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ZoomIn = _interopRequireDefault(require("@material-ui/icons/ZoomIn"));
+
+var _ZoomOut = _interopRequireDefault(require("@material-ui/icons/ZoomOut"));
+
+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)({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  slider: {
+    width: 70
+  }
+});
+
+function ZoomControls(_ref) {
+  var model = _ref.model;
+  var classes = useStyles();
+  var maxBpPerPx = model.maxBpPerPx,
+      minBpPerPx = model.minBpPerPx,
+      bpPerPx = model.bpPerPx,
+      scaleFactor = model.scaleFactor;
+
+  var _useState = (0, _react.useState)(-Math.log2(bpPerPx) * 100),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setValue(-Math.log2(bpPerPx) * 100);
+  }, [setValue, bpPerPx]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    "data-testid": "zoom_out",
+    onClick: function onClick() {
+      model.zoom(bpPerPx * 2);
+    },
+    disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomOut["default"], null)), /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    className: classes.slider,
+    value: value,
+    min: -Math.log2(maxBpPerPx) * 100,
+    max: -Math.log2(minBpPerPx) * 100,
+    onChange: function onChange(_, val) {
+      return setValue(val);
+    },
+    onChangeCommitted: function onChangeCommitted() {
+      return model.zoomTo(Math.pow(2, -value / 100));
+    },
+    disabled: scaleFactor !== 1
+  }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    "data-testid": "zoom_in",
+    onClick: function onClick() {
+      model.zoom(model.bpPerPx / 2);
+    },
+    disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomIn["default"], null)));
+}
+
+var _default = (0, _mobxReact.observer)(ZoomControls);
+
+exports["default"] = _default;

package/dist/LinearGenomeView/components/util.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dedupe = dedupe;
+
+function dedupe() {
+  var results = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var cb = arguments.length > 1 ? arguments[1] : undefined;
+  return results.filter(function (elt, idx, self) {
+    return idx === self.findIndex(function (t) {
+      return cb(t) === cb(elt);
+    });
+  });
+}