@jbrowse/plugin-variants 1.6.7 → 1.7.0

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.js

@@ -0,0 +1,251 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _simpleFeature = _interopRequireDefault(require("@jbrowse/core/util/simpleFeature"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _BaseFeatureDetail = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+
+var _BreakendOptionDialog = _interopRequireDefault(require("./BreakendOptionDialog"));
+
+var _vcf = require("@gmod/vcf");
+
+var _excluded = ["samples"];
+
+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 VariantSamples(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      showFilters = _useState4[0],
+      setShowFilters = _useState4[1];
+
+  var feature = props.feature;
+  var _feature$samples = feature.samples,
+      samples = _feature$samples === void 0 ? {} : _feature$samples;
+  var preFilteredRows = Object.entries(samples);
+
+  if (!preFilteredRows.length) {
+    return null;
+  }
+
+  var infoFields = ['sample'].concat((0, _toConsumableArray2["default"])(Object.keys(preFilteredRows[0][1]))).map(function (field) {
+    return {
+      field: field
+    };
+  });
+  var error;
+  var rows = [];
+  var filters = Object.keys(filter); // catch some error thrown from regex
+  // note: maps all values into a string, if this is not done rows are not
+  // sortable by the data-grid
+
+  try {
+    rows = preFilteredRows.map(function (row) {
+      return _objectSpread(_objectSpread({}, Object.fromEntries(Object.entries(row[1]).map(function (entry) {
+        return [entry[0], String(entry[1])];
+      }))), {}, {
+        sample: row[0],
+        id: row[0]
+      });
+    }).filter(function (row) {
+      return filters.length ? filters.every(function (key) {
+        var val = row[key];
+        var currFilter = filter[key];
+        return currFilter ? val.match(new RegExp(currFilter, 'i')) : true;
+      }) : true;
+    });
+  } catch (e) {
+    error = e;
+  } // disableSelectionOnClick helps avoid
+  // https://github.com/mui-org/material-ui-x/issues/1197
+
+
+  return /*#__PURE__*/_react["default"].createElement(_BaseFeatureDetail.BaseCard, (0, _extends2["default"])({}, props, {
+    title: "Samples"
+  }), error ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    color: "error"
+  }, "".concat(error)) : null, /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
+    control: /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
+      checked: showFilters,
+      onChange: function onChange() {
+        return setShowFilters(function (f) {
+          return !f;
+        });
+      }
+    }),
+    label: "Show sample filters"
+  }), showFilters ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "These filters can use a plain text search or regex style query, e.g. in the genotype field, entering 1 will query for all genotypes that include the first alternate allele e.g. 0|1 or 1|1, entering [1-9]\\d* will find any non-zero allele e.g. 0|2 or 2/33"), infoFields.map(function (_ref) {
+    var field = _ref.field;
+    return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+      key: "filter-".concat(field),
+      placeholder: "Filter ".concat(field),
+      value: filter[field] || '',
+      onChange: function onChange(event) {
+        return setFilter(_objectSpread(_objectSpread({}, filter), {}, (0, _defineProperty2["default"])({}, field, event.target.value)));
+      }
+    });
+  })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      height: 600,
+      width: '100%',
+      overflow: 'auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_xDataGrid.DataGrid, {
+    rows: rows,
+    columns: infoFields,
+    rowHeight: 20,
+    headerHeight: 25,
+    disableSelectionOnClick: true,
+    disableColumnMenu: true
+  })));
+}
+
+function BreakendPanel(props) {
+  var model = props.model,
+      locStrings = props.locStrings,
+      feature = props.feature;
+  var session = (0, _util.getSession)(model);
+
+  var _getEnv = (0, _mobxStateTree.getEnv)(session),
+      pluginManager = _getEnv.pluginManager;
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      breakpointDialog = _useState6[0],
+      setBreakpointDialog = _useState6[1];
+
+  var viewType;
+
+  try {
+    viewType = pluginManager.getViewType('BreakpointSplitView');
+  } catch (e) {// ignore
+  }
+
+  var simpleFeature = new _simpleFeature["default"](feature);
+  return /*#__PURE__*/_react["default"].createElement(_BaseFeatureDetail.BaseCard, (0, _extends2["default"])({}, props, {
+    title: "Breakends"
+  }), /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Link to linear view of breakend endpoints"), /*#__PURE__*/_react["default"].createElement("ul", null, locStrings.map(function (locString) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: "".concat(JSON.stringify(locString))
+    }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+      href: "#",
+      onClick: function onClick(event) {
+        event.preventDefault();
+        var view = model.view;
+
+        try {
+          if (view) {
+            var _view$navToLocString;
+
+            (_view$navToLocString = view.navToLocString) === null || _view$navToLocString === void 0 ? void 0 : _view$navToLocString.call(view, locString);
+          } else {
+            throw new Error('No view associated with this feature detail panel anymore');
+          }
+        } catch (e) {
+          console.error(e);
+          session.notify("".concat(e));
+        }
+      }
+    }, "LGV - ".concat(locString)));
+  })), viewType ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Launch split views with breakend source and target"), /*#__PURE__*/_react["default"].createElement("ul", null, locStrings.map(function (locString) {
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: "".concat(JSON.stringify(locString))
+    }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+      href: "#",
+      onClick: function onClick(event) {
+        event.preventDefault();
+        setBreakpointDialog(true);
+      }
+    }, "".concat(feature.refName, ":").concat(feature.start, " // ").concat(locString, " (split view)")));
+  })), breakpointDialog ? /*#__PURE__*/_react["default"].createElement(_BreakendOptionDialog["default"], {
+    model: model,
+    feature: simpleFeature,
+    viewType: viewType,
+    handleClose: function handleClose() {
+      setBreakpointDialog(false);
+    }
+  }) : null) : null);
+}
+
+function VariantFeatureDetails(props) {
+  var model = props.model;
+  var featureData = model.featureData,
+      descriptions = model.descriptions;
+  var feat = JSON.parse(JSON.stringify(featureData));
+  var samples = feat.samples,
+      rest = (0, _objectWithoutProperties2["default"])(feat, _excluded);
+  var basicDescriptions = {
+    CHROM: 'chromosome: An identifier from the reference genome',
+    POS: 'position: The reference position, with the 1st base having position 1',
+    ID: 'identifier: Semi-colon separated list of unique identifiers where available',
+    REF: 'reference base(s): Each base must be one of A,C,G,T,N (case insensitive).',
+    ALT: 'alternate base(s): Comma-separated list of alternate non-reference alleles',
+    QUAL: 'quality: Phred-scaled quality score for the assertion made in ALT',
+    FILTER: 'filter status: PASS if this position has passed all filters, otherwise a semicolon-separated list of codes for filters that fail'
+  };
+  return /*#__PURE__*/_react["default"].createElement(_core.Paper, {
+    "data-testid": "variant-side-drawer"
+  }, /*#__PURE__*/_react["default"].createElement(_BaseFeatureDetail.FeatureDetails, (0, _extends2["default"])({
+    feature: rest,
+    descriptions: _objectSpread(_objectSpread({}, basicDescriptions), descriptions)
+  }, props)), /*#__PURE__*/_react["default"].createElement(_core.Divider, null), feat.type === 'breakend' ? /*#__PURE__*/_react["default"].createElement(BreakendPanel, {
+    feature: feat,
+    locStrings: feat.ALT.map(function (alt) {
+      var _parseBreakend;
+
+      return ((_parseBreakend = (0, _vcf.parseBreakend)(alt)) === null || _parseBreakend === void 0 ? void 0 : _parseBreakend.MatePosition) || '';
+    }),
+    model: model
+  }) : null, feat.type === 'translocation' ? /*#__PURE__*/_react["default"].createElement(BreakendPanel, {
+    feature: feat,
+    model: model,
+    locStrings: ["".concat(feat.INFO.CHR2[0], ":").concat(feat.INFO.END)]
+  }) : null, /*#__PURE__*/_react["default"].createElement(VariantSamples, (0, _extends2["default"])({
+    feature: feat
+  }, props)));
+}
+
+var _default = (0, _mobxReact.observer)(VariantFeatureDetails);
+
+exports["default"] = _default;

package/dist/VariantFeatureWidget/VariantFeatureWidget.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _PluginManager = _interopRequireDefault(require("@jbrowse/core/PluginManager"));
+
+var _ = require(".");
+
+var _VariantFeatureWidget = _interopRequireDefault(require("./VariantFeatureWidget"));
+
+describe('VariantTrack widget', function () {
+  it('renders with just the required model elements', function () {
+    console.warn = jest.fn();
+    var pluginManager = new _PluginManager["default"]([]);
+
+    var Session = _mobxStateTree.types.model({
+      rpcManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
+      pluginManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
+      configuration: (0, _configuration.ConfigurationSchema)('test', {}),
+      widget: (0, _.stateModelFactory)(pluginManager)
+    });
+
+    var model = Session.create({
+      widget: {
+        type: 'VariantFeatureWidget'
+      }
+    });
+    model.widget.setFeatureData({
+      refName: 'ctgA',
+      start: 176,
+      end: 177,
+      name: 'rs123',
+      REF: 'A',
+      ALT: ['<TRA>'],
+      QUAL: 10.4,
+      INFO: {
+        MQ: 5
+      }
+    });
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_VariantFeatureWidget["default"], {
+      model: model.widget
+    })),
+        container = _render.container;
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/dist/VariantFeatureWidget/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configSchema = void 0;
+exports.stateModelFactory = stateModelFactory;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _mst = require("@jbrowse/core/util/types/mst");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var configSchema = (0, _configuration.ConfigurationSchema)('VariantFeatureWidget', {});
+exports.configSchema = configSchema;
+
+function stateModelFactory(pluginManager) {
+  return _mobxStateTree.types.model('VariantFeatureWidget', {
+    id: _mst.ElementId,
+    type: _mobxStateTree.types.literal('VariantFeatureWidget'),
+    view: _mobxStateTree.types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
+    featureData: _mobxStateTree.types.frozen(),
+    descriptions: _mobxStateTree.types.frozen()
+  }).actions(function (self) {
+    return {
+      setFeatureData: function setFeatureData(data) {
+        self.featureData = data;
+      },
+      clearFeatureData: function clearFeatureData() {
+        self.featureData = undefined;
+      }
+    };
+  });
+}