@jbrowse/plugin-variants 1.6.8 → 1.7.1

package/dist/StructuralVariantChordRenderer/ReactComponent.js

@@ -0,0 +1,228 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _mst = require("@jbrowse/core/util/types/mst");
+
+var _vcf = require("@gmod/vcf");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function bpToRadians(block, pos) {
+  var blockStart = block.region.elided ? 0 : block.region.start;
+  var blockEnd = block.region.elided ? 0 : block.region.end;
+  var bpOffset = block.flipped ? blockEnd - pos : pos - blockStart;
+  var radians = bpOffset / block.bpPerRadian + block.startRadians;
+  return radians;
+}
+
+var Chord = (0, _mobxReact.observer)(function Chord(_ref) {
+  var _feature$get;
+
+  var feature = _ref.feature,
+      blocksForRefs = _ref.blocksForRefs,
+      radius = _ref.radius,
+      config = _ref.config,
+      bezierRadius = _ref.bezierRadius,
+      selected = _ref.selected,
+      _onClick = _ref.onClick;
+  // find the blocks that our start and end points belong to
+  var startBlock = blocksForRefs[feature.get('refName')];
+
+  if (!startBlock) {
+    return null;
+  }
+
+  var svType;
+
+  if (feature.get('INFO')) {
+    ;
+
+    var _ref2 = feature.get('INFO').SVTYPE || [];
+
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1);
+
+    svType = _ref3[0];
+  } else if (feature.get('mate')) {
+    svType = 'mate';
+  }
+
+  var endPosition;
+  var endBlock;
+  var alt = (_feature$get = feature.get('ALT')) === null || _feature$get === void 0 ? void 0 : _feature$get[0];
+  var bnd = alt && (0, _vcf.parseBreakend)(alt);
+
+  if (bnd) {
+    // VCF BND
+    var matePosition = bnd.MatePosition.split(':');
+    endPosition = +matePosition[1];
+    endBlock = blocksForRefs[matePosition[0]];
+  } else if (alt === '<TRA>') {
+    var _feature$get2, _feature$get2$CHR, _feature$get3, _feature$get3$END;
+
+    // VCF TRA
+    var chr2 = (_feature$get2 = feature.get('INFO')) === null || _feature$get2 === void 0 ? void 0 : (_feature$get2$CHR = _feature$get2.CHR2) === null || _feature$get2$CHR === void 0 ? void 0 : _feature$get2$CHR[0];
+    var end = (_feature$get3 = feature.get('INFO')) === null || _feature$get3 === void 0 ? void 0 : (_feature$get3$END = _feature$get3.END) === null || _feature$get3$END === void 0 ? void 0 : _feature$get3$END[0];
+    endPosition = parseInt(end, 10);
+    endBlock = blocksForRefs[chr2];
+  } else if (svType === 'mate') {
+    // generic simplefeatures arcs
+    var mate = feature.get('mate');
+    var _chr = mate.refName;
+    endPosition = mate.start;
+    endBlock = blocksForRefs[_chr];
+  }
+
+  if (endBlock) {
+    var startPos = feature.get('start');
+    var startRadians = bpToRadians(startBlock, startPos);
+    var endRadians = bpToRadians(endBlock, endPosition);
+    var startXY = (0, _util.polarToCartesian)(radius, startRadians);
+    var endXY = (0, _util.polarToCartesian)(radius, endRadians);
+    var controlXY = (0, _util.polarToCartesian)(bezierRadius, (endRadians + startRadians) / 2);
+    var strokeColor = selected ? (0, _configuration.readConfObject)(config, 'strokeColorSelected', {
+      feature: feature
+    }) : (0, _configuration.readConfObject)(config, 'strokeColor', {
+      feature: feature
+    });
+    var hoverStrokeColor = (0, _configuration.readConfObject)(config, 'strokeColorHover', {
+      feature: feature
+    });
+    return /*#__PURE__*/_react["default"].createElement("path", {
+      "data-testid": "chord-".concat(feature.id()),
+      d: ['M'].concat((0, _toConsumableArray2["default"])(startXY), ['Q'], (0, _toConsumableArray2["default"])(controlXY), (0, _toConsumableArray2["default"])(endXY)).join(' '),
+      style: {
+        stroke: strokeColor
+      },
+      onClick: function onClick(evt) {
+        return _onClick(feature, startBlock.region, endBlock.region, evt);
+      },
+      onMouseOver: function onMouseOver(evt) {
+        if (!selected) {
+          evt.target.style.stroke = hoverStrokeColor;
+          evt.target.style.strokeWidth = 3;
+        }
+      },
+      onMouseOut: function onMouseOut(evt) {
+        if (!selected) {
+          evt.target.style.stroke = strokeColor;
+          evt.target.style.strokeWidth = 1;
+        }
+      }
+    });
+  }
+
+  return null;
+});
+
+function StructuralVariantChords(props) {
+  var features = props.features,
+      config = props.config,
+      displayModel = props.displayModel,
+      blockDefinitions = props.blockDefinitions,
+      radius = props.radius,
+      bezierRadius = props.bezierRadius,
+      selectedFeatureId = props.displayModel.selectedFeatureId,
+      onChordClick = props.onChordClick; // make a map of refName -> blockDefinition
+
+  var blocksForRefsMemo = (0, _react.useMemo)(function () {
+    var blocksForRefs = {};
+    blockDefinitions.forEach(function (block) {
+      var regions = block.region.elided ? block.region.regions : [block.region];
+      regions.forEach(function (region) {
+        blocksForRefs[region.refName] = block;
+      });
+    });
+    return blocksForRefs;
+  }, [blockDefinitions]); // console.log(blocksForRefs)
+
+  var chords = [];
+
+  var _iterator = _createForOfIteratorHelper(features),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = (0, _slicedToArray2["default"])(_step.value, 2),
+          id = _step$value[0],
+          feature = _step$value[1];
+
+      var selected = String(selectedFeatureId) === String(feature.id());
+      chords.push( /*#__PURE__*/_react["default"].createElement(Chord, {
+        key: id,
+        feature: feature,
+        config: config,
+        displayModel: displayModel,
+        radius: radius,
+        bezierRadius: bezierRadius,
+        blocksForRefs: blocksForRefsMemo,
+        selected: selected,
+        onClick: onChordClick
+      }));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  var trackStyleId = "chords-".concat(displayModel.id);
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    id: trackStyleId,
+    "data-testid": "structuralVariantChordRenderer"
+  }, /*#__PURE__*/_react["default"].createElement("style", {
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "\n          #".concat(trackStyleId, " > path {\n            cursor: crosshair;\n            fill: none;\n          }\n")
+    }
+  }), chords);
+}
+
+StructuralVariantChords.propTypes = {
+  features: _propTypes["default"].instanceOf(Map).isRequired,
+  config: _mst.PropTypes.ConfigSchema.isRequired,
+  displayModel: _mobxReact.PropTypes.objectOrObservableObject,
+  blockDefinitions: _propTypes["default"].arrayOf(_mobxReact.PropTypes.objectOrObservableObject).isRequired,
+  radius: _propTypes["default"].number.isRequired,
+  bezierRadius: _propTypes["default"].number.isRequired,
+  selectedFeatureId: _propTypes["default"].string,
+  onChordClick: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string])
+};
+StructuralVariantChords.defaultProps = {
+  displayModel: undefined,
+  selectedFeatureId: '',
+  onChordClick: undefined
+};
+
+var _default = (0, _mobxReact.observer)(StructuralVariantChords);
+
+exports["default"] = _default;

package/dist/StructuralVariantChordRenderer/index.d.ts

@@ -1,3 +1,3 @@
-export default ChordRendererConfigF;
-declare function ChordRendererConfigF(pluginManager: any): ChordRendererType;
-import ChordRendererType from "@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType";
+export default ChordRendererConfigF;
+declare function ChordRendererConfigF(pluginManager: any): ChordRendererType;
+import ChordRendererType from "@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType";

package/dist/StructuralVariantChordRenderer/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _CircularChordRendererType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _ReactComponent = _interopRequireDefault(require("./ReactComponent"));
+
+var ChordRendererConfigF = function ChordRendererConfigF(pluginManager) {
+  var configSchema = (0, _configuration.ConfigurationSchema)('StructuralVariantChordRenderer', {
+    strokeColor: {
+      type: 'color',
+      description: 'the line color of each arc',
+      defaultValue: 'rgba(255,133,0,0.32)',
+      contextVariable: ['feature']
+    },
+    strokeColorSelected: {
+      type: 'color',
+      description: 'the line color of an arc that has been selected',
+      defaultValue: 'black',
+      contextVariable: ['feature']
+    },
+    strokeColorHover: {
+      type: 'color',
+      description: 'the line color of an arc that is being hovered over with the mouse',
+      defaultValue: '#555',
+      contextVariable: ['feature']
+    }
+  }, {
+    explicitlyTyped: true
+  });
+  return new _CircularChordRendererType["default"]({
+    name: 'StructuralVariantChordRenderer',
+    ReactComponent: _ReactComponent["default"],
+    configSchema: configSchema,
+    pluginManager: pluginManager
+  });
+};
+
+var _default = ChordRendererConfigF;
+exports["default"] = _default;

package/dist/VariantFeatureWidget/BreakendOptionDialog.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { Feature } from '@jbrowse/core/util/simpleFeature';
-declare function BreakendOptionDialog({ model, handleClose, feature, viewType, }: {
-    model: any;
-    handleClose: () => void;
-    feature: Feature;
-    viewType: any;
-}): JSX.Element;
-declare const _default: typeof BreakendOptionDialog;
-export default _default;
+/// <reference types="react" />
+import { Feature } from '@jbrowse/core/util/simpleFeature';
+declare function BreakendOptionDialog({ model, handleClose, feature, viewType, }: {
+    model: any;
+    handleClose: () => void;
+    feature: Feature;
+    viewType: any;
+}): JSX.Element;
+declare const _default: typeof BreakendOptionDialog;
+export default _default;

package/dist/VariantFeatureWidget/BreakendOptionDialog.js

@@ -0,0 +1,127 @@
+"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 _core = require("@material-ui/core");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _util = require("@jbrowse/core/util");
+
+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; }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    },
+    block: {
+      display: 'block'
+    }
+  };
+});
+
+function BreakendOptionDialog(_ref) {
+  var model = _ref.model,
+      handleClose = _ref.handleClose,
+      feature = _ref.feature,
+      viewType = _ref.viewType;
+  var classes = useStyles();
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      copyTracks = _useState2[0],
+      setCopyTracks = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      mirrorTracks = _useState4[0],
+      setMirrorTracks = _useState4[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, "Breakpoint split view options", handleClose ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    className: classes.closeButton,
+    onClick: function onClick() {
+      return 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(_core.FormControlLabel, {
+    className: classes.block,
+    control: /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
+      checked: copyTracks,
+      onChange: function onChange() {
+        return setCopyTracks(function (val) {
+          return !val;
+        });
+      }
+    }),
+    label: "Copy tracks into the new view"
+  }), /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
+    className: classes.block,
+    control: /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
+      checked: mirrorTracks,
+      onChange: function onChange() {
+        return setMirrorTracks(function (val) {
+          return !val;
+        });
+      }
+    }),
+    label: "Mirror tracks vertically in vertically stacked view"
+  })), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      var view = model.view;
+      var session = (0, _util.getSession)(model);
+
+      try {
+        var viewSnapshot = viewType.snapshotFromBreakendFeature(feature, view);
+        viewSnapshot.views[0].offsetPx -= view.width / 2 + 100;
+        viewSnapshot.views[1].offsetPx -= view.width / 2 + 100;
+        viewSnapshot.featureData = feature;
+        var viewTracks = (0, _mobxStateTree.getSnapshot)(view.tracks);
+        viewSnapshot.views[0].tracks = viewTracks;
+        viewSnapshot.views[1].tracks = mirrorTracks ? viewTracks.slice().reverse() : viewTracks;
+        session.addView('BreakpointSplitView', viewSnapshot);
+      } catch (e) {
+        console.error(e);
+        session.notify("".concat(e));
+      }
+
+      handleClose();
+    },
+    variant: "contained",
+    color: "primary",
+    autoFocus: true
+  }, "OK"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: function onClick() {
+      return handleClose();
+    },
+    color: "secondary",
+    variant: "contained"
+  }, "Cancel")));
+}
+
+var _default = (0, _mobxReact.observer)(BreakendOptionDialog);
+
+exports["default"] = _default;

package/dist/VariantFeatureWidget/VariantFeatureWidget.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare function VariantFeatureDetails(props: any): JSX.Element;
-declare const _default: typeof VariantFeatureDetails;
-export default _default;
+/// <reference types="react" />
+declare function VariantFeatureDetails(props: any): JSX.Element;
+declare const _default: typeof VariantFeatureDetails;
+export default _default;