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

package/dist/BaseLinearDisplay/components/BaseLinearDisplay.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
-declare const Tooltip: ({ model, clientMouseCoord, }: {
-    model: BaseLinearDisplayModel;
-    clientMouseCoord: Coord;
-}) => JSX.Element | null;
-declare type Coord = [number, number];
-declare const BaseLinearDisplay: (props: {
-    model: BaseLinearDisplayModel;
-    children?: React.ReactNode;
-}) => JSX.Element;
-export default BaseLinearDisplay;
-export { Tooltip };
+import React from 'react';
+import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
+declare const Tooltip: ({ model, clientMouseCoord, }: {
+    model: BaseLinearDisplayModel;
+    clientMouseCoord: Coord;
+}) => JSX.Element | null;
+declare type Coord = [number, number];
+declare const BaseLinearDisplay: (props: {
+    model: BaseLinearDisplayModel;
+    children?: React.ReactNode;
+}) => JSX.Element;
+export default BaseLinearDisplay;
+export { Tooltip };

package/dist/BaseLinearDisplay/components/BaseLinearDisplay.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Tooltip = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _reactPopper = require("react-popper");
+
+var _LinearBlocks = _interopRequireDefault(require("./LinearBlocks"));
+
+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; }
+
+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 round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    display: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      textAlign: 'left',
+      width: '100%',
+      minHeight: '100%'
+    },
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+      pointerEvents: 'none',
+      backgroundColor: (0, _core.alpha)(theme.palette.grey[700], 0.9),
+      borderRadius: theme.shape.borderRadius,
+      color: theme.palette.common.white,
+      fontFamily: theme.typography.fontFamily,
+      padding: '4px 8px',
+      fontSize: theme.typography.pxToRem(12),
+      lineHeight: "".concat(round(14 / 10), "em"),
+      maxWidth: 300,
+      wordWrap: 'break-word'
+    }
+  };
+});
+
+var TooltipContents = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var message = _ref.message;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref
+  }, message);
+});
+
+var Tooltip = (0, _mobxReact.observer)(function (_ref2) {
+  var model = _ref2.model,
+      clientMouseCoord = _ref2.clientMouseCoord;
+  var classes = useStyles();
+  var featureUnderMouse = model.featureUnderMouse;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      popperElt = _useState4[0],
+      setPopperElt = _useState4[1]; // must be memoized a la https://github.com/popperjs/react-popper/issues/391
+
+
+  var virtElement = (0, _react.useMemo)(function () {
+    return {
+      getBoundingClientRect: function getBoundingClientRect() {
+        var x = clientMouseCoord[0] + width / 2 + 20;
+        var y = clientMouseCoord[1];
+        return {
+          top: y,
+          left: x,
+          bottom: y,
+          right: x,
+          width: 0,
+          height: 0,
+          x: x,
+          y: y,
+          toJSON: function toJSON() {}
+        };
+      }
+    };
+  }, [clientMouseCoord, width]);
+
+  var _usePopper = (0, _reactPopper.usePopper)(virtElement, popperElt),
+      styles = _usePopper.styles,
+      attributes = _usePopper.attributes;
+
+  var contents = featureUnderMouse ? (0, _configuration.getConf)(model, 'mouseover', {
+    feature: featureUnderMouse
+  }) : undefined;
+  return featureUnderMouse && contents ? /*#__PURE__*/_react["default"].createElement(_core.Portal, null, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    ref: setPopperElt,
+    className: classes.tooltip // zIndex needed to go over widget drawer
+    ,
+    style: _objectSpread(_objectSpread({}, styles.popper), {}, {
+      zIndex: 100000
+    })
+  }, attributes.popper), /*#__PURE__*/_react["default"].createElement(TooltipContents, {
+    ref: function ref(elt) {
+      return setWidth((elt === null || elt === void 0 ? void 0 : elt.getBoundingClientRect().width) || 0);
+    },
+    message: contents
+  }))) : null;
+});
+exports.Tooltip = Tooltip;
+var BaseLinearDisplay = (0, _mobxReact.observer)(function (props) {
+  var classes = useStyles();
+  var theme = (0, _core.useTheme)();
+  var ref = (0, _react.useRef)(null);
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      clientRect = _useState6[0],
+      setClientRect = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([0, 0]),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      offsetMouseCoord = _useState8[0],
+      setOffsetMouseCoord = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([0, 0]),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      clientMouseCoord = _useState10[0],
+      setClientMouseCoord = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      contextCoord = _useState12[0],
+      setContextCoord = _useState12[1];
+
+  var model = props.model,
+      children = props.children;
+  var TooltipComponent = model.TooltipComponent,
+      DisplayMessageComponent = model.DisplayMessageComponent,
+      contextMenuItems = model.contextMenuItems,
+      height = model.height,
+      setContextMenuFeature = model.setContextMenuFeature;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    "data-testid": "display-".concat((0, _configuration.getConf)(model, 'displayId')),
+    className: classes.display,
+    onContextMenu: function onContextMenu(event) {
+      event.preventDefault();
+
+      if (contextCoord) {
+        // There's already a context menu open, so close it
+        setContextCoord(undefined);
+      } else if (ref.current) {
+        setContextCoord([event.clientX, event.clientY]);
+      }
+    },
+    onMouseMove: function onMouseMove(event) {
+      if (!ref.current) {
+        return;
+      }
+
+      var rect = ref.current.getBoundingClientRect();
+      var left = rect.left,
+          top = rect.top;
+      setOffsetMouseCoord([event.clientX - left, event.clientY - top]);
+      setClientMouseCoord([event.clientX, event.clientY]);
+      setClientRect(rect);
+    }
+  }, DisplayMessageComponent ? /*#__PURE__*/_react["default"].createElement(DisplayMessageComponent, {
+    model: model
+  }) : /*#__PURE__*/_react["default"].createElement(_LinearBlocks["default"], props), children, /*#__PURE__*/_react["default"].createElement(TooltipComponent, {
+    model: model,
+    height: height,
+    offsetMouseCoord: offsetMouseCoord,
+    clientMouseCoord: clientMouseCoord,
+    clientRect: clientRect,
+    mouseCoord: offsetMouseCoord
+  }), /*#__PURE__*/_react["default"].createElement(_ui.Menu, {
+    open: Boolean(contextCoord) && Boolean(contextMenuItems().length),
+    onMenuItemClick: function onMenuItemClick(_, callback) {
+      callback();
+      setContextCoord(undefined);
+    },
+    onClose: function onClose() {
+      setContextCoord(undefined);
+      setContextMenuFeature(undefined);
+    },
+    TransitionProps: {
+      onExit: function onExit() {
+        setContextCoord(undefined);
+        setContextMenuFeature(undefined);
+      }
+    },
+    anchorReference: "anchorPosition",
+    anchorPosition: contextCoord ? {
+      top: contextCoord[1],
+      left: contextCoord[0]
+    } : undefined,
+    style: {
+      zIndex: theme.zIndex.tooltip
+    },
+    menuItems: contextMenuItems(),
+    "data-testid": "base_linear_display_context_menu"
+  }));
+});
+var _default = BaseLinearDisplay;
+exports["default"] = _default;

package/dist/BaseLinearDisplay/components/Block.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { BaseBlock } from '@jbrowse/core/util/blockTypes';
-declare const ContentBlock: ({ block, children }: {
-    block: BaseBlock;
-    children: React.ReactNode;
-}) => JSX.Element;
-declare function ElidedBlock({ width }: {
-    width: number;
-}): JSX.Element;
-declare function InterRegionPaddingBlock({ boundary, width, style, }: {
-    boundary: boolean;
-    width: number;
-    style?: React.CSSProperties;
-}): JSX.Element;
-export { ContentBlock, ElidedBlock, InterRegionPaddingBlock };
+import React from 'react';
+import { BaseBlock } from '@jbrowse/core/util/blockTypes';
+declare const ContentBlock: ({ block, children }: {
+    block: BaseBlock;
+    children: React.ReactNode;
+}) => JSX.Element;
+declare function ElidedBlock({ width }: {
+    width: number;
+}): JSX.Element;
+declare function InterRegionPaddingBlock({ boundary, width, style, }: {
+    boundary: boolean;
+    width: number;
+    style?: React.CSSProperties;
+}): JSX.Element;
+export { ContentBlock, ElidedBlock, InterRegionPaddingBlock };

package/dist/BaseLinearDisplay/components/Block.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentBlock = void 0;
+exports.ElidedBlock = ElidedBlock;
+exports.InterRegionPaddingBlock = InterRegionPaddingBlock;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _mobxReact = require("mobx-react");
+
+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; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    contentBlock: {
+      position: 'relative',
+      minHeight: '100%',
+      boxSizing: 'border-box',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    elidedBlock: {
+      minHeight: '100%',
+      boxSizing: 'border-box',
+      backgroundColor: '#999',
+      backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)'
+    },
+    interRegionPaddingBlock: {
+      minHeight: '100%',
+      backgroundColor: theme.palette.text.primary
+    },
+    boundaryPaddingBlock: {
+      minHeight: '100%',
+      backgroundColor: theme.palette.action.disabledBackground
+    }
+  };
+});
+var ContentBlock = (0, _mobxReact.observer)(function (_ref) {
+  var block = _ref.block,
+      children = _ref.children;
+  var classes = useStyles();
+  var widthPx = block.widthPx;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: widthPx
+    },
+    className: classes.contentBlock
+  }, children);
+});
+exports.ContentBlock = ContentBlock;
+
+function ElidedBlock(_ref2) {
+  var width = _ref2.width;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.elidedBlock,
+    style: {
+      width: width
+    }
+  });
+}
+
+function InterRegionPaddingBlock(_ref3) {
+  var boundary = _ref3.boundary,
+      width = _ref3.width,
+      _ref3$style = _ref3.style,
+      style = _ref3$style === void 0 ? {} : _ref3$style;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: width
+    }),
+    className: boundary ? classes.boundaryPaddingBlock : classes.interRegionPaddingBlock
+  });
+}

package/dist/BaseLinearDisplay/components/LinearBlocks.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
-declare const useStyles: (props?: any) => Record<"linearBlocks" | "heightOverflowed", string>;
-declare const RenderedBlocks: ({ model }: {
-    model: BaseLinearDisplayModel;
-}) => JSX.Element;
-declare function LinearBlocks({ model }: {
-    model: BaseLinearDisplayModel;
-}): JSX.Element;
-export { RenderedBlocks, useStyles };
-declare const _default: typeof LinearBlocks;
-export default _default;
+/// <reference types="react" />
+import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
+declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"linearBlocks" | "heightOverflowed">;
+declare const RenderedBlocks: ({ model }: {
+    model: BaseLinearDisplayModel;
+}) => JSX.Element;
+declare function LinearBlocks({ model }: {
+    model: BaseLinearDisplayModel;
+}): JSX.Element;
+export { RenderedBlocks, useStyles };
+declare const _default: typeof LinearBlocks;
+export default _default;

package/dist/BaseLinearDisplay/components/LinearBlocks.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = exports["default"] = exports.RenderedBlocks = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _util = require("@jbrowse/core/util");
+
+var _mobxReact = require("mobx-react");
+
+var _blockTypes = require("@jbrowse/core/util/blockTypes");
+
+var _Block = require("./Block");
+
+var useStyles = (0, _styles.makeStyles)({
+  linearBlocks: {
+    whiteSpace: 'nowrap',
+    textAlign: 'left',
+    position: 'absolute',
+    minHeight: '100%',
+    display: 'flex'
+  },
+  heightOverflowed: {
+    position: 'absolute',
+    color: 'rgb(77,77,77)',
+    borderBottom: '2px solid rgb(77,77,77)',
+    textShadow: 'white 0px 0px 1px',
+    whiteSpace: 'nowrap',
+    width: '100%',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    zIndex: 2000,
+    boxSizing: 'border-box'
+  }
+});
+exports.useStyles = useStyles;
+var RenderedBlocks = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model;
+  var classes = useStyles();
+  var blockDefinitions = model.blockDefinitions,
+      blockState = model.blockState;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, blockDefinitions.map(function (block) {
+    if (block instanceof _blockTypes.ContentBlock) {
+      var state = blockState.get(block.key);
+      return /*#__PURE__*/_react["default"].createElement(_Block.ContentBlock, {
+        block: block,
+        key: "".concat(model.id, "-").concat(block.key)
+      }, state && state.ReactComponent ? /*#__PURE__*/_react["default"].createElement(state.ReactComponent, {
+        model: state
+      }) : null, state && state.maxHeightReached ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.heightOverflowed,
+        style: {
+          top: state.layout.getTotalHeight() - 16,
+          pointerEvents: 'none',
+          height: 16
+        }
+      }, "Max height reached") : null);
+    }
+
+    if (block instanceof _blockTypes.ElidedBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.ElidedBlock, {
+        key: "".concat(model.id, "-").concat(block.key),
+        width: block.widthPx
+      });
+    }
+
+    if (block instanceof _blockTypes.InterRegionPaddingBlock) {
+      return /*#__PURE__*/_react["default"].createElement(_Block.InterRegionPaddingBlock, {
+        key: block.key,
+        width: block.widthPx,
+        style: {
+          background: 'none'
+        },
+        boundary: block.variant === 'boundary'
+      });
+    }
+
+    throw new Error("invalid block type ".concat((0, _typeof2["default"])(block)));
+  }));
+});
+exports.RenderedBlocks = RenderedBlocks;
+
+function LinearBlocks(_ref2) {
+  var model = _ref2.model;
+  var classes = useStyles();
+  var blockDefinitions = model.blockDefinitions;
+  var viewModel = (0, _util.getContainingView)(model);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "Blockset",
+    className: classes.linearBlocks,
+    style: {
+      left: blockDefinitions.offsetPx - viewModel.offsetPx
+    }
+  }, /*#__PURE__*/_react["default"].createElement(RenderedBlocks, {
+    model: model
+  }));
+}
+
+var _default = (0, _mobxReact.observer)(LinearBlocks);
+
+exports["default"] = _default;

package/dist/BaseLinearDisplay/components/ServerSideRenderedBlockContent.d.ts

@@ -1,4 +1,4 @@
-declare const ServerSideRenderedBlockContent: ({ model, }: {
-    model: any;
-}) => any;
-export default ServerSideRenderedBlockContent;
+declare const ServerSideRenderedBlockContent: ({ model, }: {
+    model: any;
+}) => any;
+export default ServerSideRenderedBlockContent;