@jbrowse/plugin-alignments 1.6.9 → 1.7.3

package/dist/LinearAlignmentsDisplay/models/model.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _models = require("@jbrowse/core/pluggableElementTypes/models");
+
+var _mobx = require("mobx");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _util = require("@jbrowse/core/util");
+
+var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
+
+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 minDisplayHeight = 20;
+
+var stateModelFactory = function stateModelFactory(pluginManager, configSchema) {
+  return _mobxStateTree.types.compose('LinearAlignmentsDisplay', _models.BaseDisplay, _mobxStateTree.types.model({
+    PileupDisplay: _mobxStateTree.types.maybe(pluginManager.getDisplayType('LinearPileupDisplay').stateModel),
+    SNPCoverageDisplay: _mobxStateTree.types.maybe(pluginManager.getDisplayType('LinearSNPCoverageDisplay').stateModel),
+    snpCovHeight: 45,
+    type: _mobxStateTree.types.literal('LinearAlignmentsDisplay'),
+    configuration: (0, _configuration.ConfigurationReference)(configSchema),
+    height: 250,
+    showCoverage: true,
+    showPileup: true,
+    userFeatureScreenDensity: _mobxStateTree.types.maybe(_mobxStateTree.types.number)
+  }))["volatile"](function () {
+    return {
+      scrollTop: 0
+    };
+  }).actions(function (self) {
+    return {
+      toggleCoverage: function toggleCoverage() {
+        self.showCoverage = !self.showCoverage;
+      },
+      togglePileup: function togglePileup() {
+        self.showPileup = !self.showPileup;
+      },
+      setScrollTop: function setScrollTop(scrollTop) {
+        self.scrollTop = scrollTop;
+      },
+      setSNPCoverageHeight: function setSNPCoverageHeight(n) {
+        self.snpCovHeight = n;
+      }
+    };
+  }).views(function (self) {
+    var superTrackMenuItems = self.trackMenuItems;
+    return {
+      get pileupDisplayConfig() {
+        var conf = (0, _configuration.getConf)(self, 'pileupDisplay');
+        var track = (0, _util.getContainingTrack)(self);
+        return _objectSpread(_objectSpread({}, conf), {}, {
+          type: 'LinearPileupDisplay',
+          name: "".concat((0, _configuration.getConf)(track, 'name'), " pileup"),
+          displayId: "".concat(self.configuration.displayId, "_pileup_xyz") // xyz to avoid someone accidentally naming the displayId similar to this
+
+        });
+      },
+
+      getFeatureByID: function getFeatureByID(blockKey, id) {
+        return self.PileupDisplay.getFeatureByID(blockKey, id);
+      },
+      searchFeatureByID: function searchFeatureByID(id) {
+        return self.PileupDisplay.searchFeatureByID(id);
+      },
+
+      get features() {
+        return self.PileupDisplay.features;
+      },
+
+      get DisplayBlurb() {
+        var _self$PileupDisplay;
+
+        return (_self$PileupDisplay = self.PileupDisplay) === null || _self$PileupDisplay === void 0 ? void 0 : _self$PileupDisplay.DisplayBlurb;
+      },
+
+      get sortedBy() {
+        return self.PileupDisplay.sortedBy;
+      },
+
+      get sortedByPosition() {
+        return self.PileupDisplay.sortedByPosition;
+      },
+
+      get sortedByRefName() {
+        return self.PileupDisplay.sortedByRefName;
+      },
+
+      get snpCoverageDisplayConfig() {
+        var conf = (0, _configuration.getConf)(self, 'snpCoverageDisplay');
+        var track = (0, _util.getContainingTrack)(self);
+        return _objectSpread(_objectSpread({}, conf), {}, {
+          type: 'LinearSNPCoverageDisplay',
+          name: "".concat((0, _configuration.getConf)(track, 'name'), " snp coverage"),
+          displayId: "".concat(self.configuration.displayId, "_snpcoverage_xyz") // xyz to avoid someone accidentally naming the displayId similar to this
+
+        });
+      },
+
+      trackMenuItems: function trackMenuItems() {
+        return [].concat((0, _toConsumableArray2["default"])(superTrackMenuItems()), [{
+          type: 'subMenu',
+          label: 'Pileup settings',
+          subMenu: self.PileupDisplay.trackMenuItems()
+        }, {
+          type: 'subMenu',
+          label: 'SNPCoverage settings',
+          subMenu: self.SNPCoverageDisplay.trackMenuItems()
+        }]);
+      }
+    };
+  }).actions(function (self) {
+    return {
+      setSNPCoverageDisplay: function setSNPCoverageDisplay(displayConfig) {
+        self.SNPCoverageDisplay = {
+          type: 'LinearSNPCoverageDisplay',
+          configuration: displayConfig,
+          height: self.snpCovHeight
+        };
+      },
+      setUserFeatureScreenDensity: function setUserFeatureScreenDensity(limit) {
+        self.PileupDisplay.setUserFeatureScreenDensity(limit);
+        self.SNPCoverageDisplay.setUserFeatureScreenDensity(limit);
+      },
+      setPileupDisplay: function setPileupDisplay(displayConfig) {
+        self.PileupDisplay = {
+          type: 'LinearPileupDisplay',
+          configuration: displayConfig
+        };
+      },
+      setHeight: function setHeight(displayHeight) {
+        if (displayHeight > minDisplayHeight) {
+          self.height = displayHeight;
+        } else {
+          self.height = minDisplayHeight;
+        }
+
+        return self.height;
+      },
+      resizeHeight: function resizeHeight(distance) {
+        var oldHeight = self.height;
+        var newHeight = this.setHeight(self.height + distance);
+        return newHeight - oldHeight;
+      }
+    };
+  }).actions(function (self) {
+    return {
+      afterAttach: function afterAttach() {
+        (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)(function () {
+          if (!self.SNPCoverageDisplay) {
+            self.setSNPCoverageDisplay(self.snpCoverageDisplayConfig);
+          } else if (!(0, _fastDeepEqual["default"])(self.snpCoverageDisplayConfig, (0, _mobxStateTree.getSnapshot)(self.SNPCoverageDisplay.configuration))) {
+            self.SNPCoverageDisplay.setHeight(self.snpCovHeight);
+            self.SNPCoverageDisplay.setConfig(self.snpCoverageDisplayConfig);
+          }
+
+          if (!self.PileupDisplay) {
+            self.setPileupDisplay(self.pileupDisplayConfig);
+          } else if (!(0, _fastDeepEqual["default"])(self.pileupDisplayConfig, (0, _mobxStateTree.getSnapshot)(self.PileupDisplay.configuration))) {
+            self.PileupDisplay.setConfig(self.pileupDisplayConfig);
+          } // propagate the filterBy setting from pileupdisplay to snpcoverage
+          // note: the snpcoverage display is not able to control filterBy
+          // itself
+
+
+          if (self.PileupDisplay.filterBy && !(0, _fastDeepEqual["default"])((0, _mobxStateTree.getSnapshot)(self.PileupDisplay.filterBy), (0, _mobxStateTree.getSnapshot)(self.SNPCoverageDisplay.filterBy))) {
+            self.SNPCoverageDisplay.setFilterBy((0, _mobxStateTree.getSnapshot)(self.PileupDisplay.filterBy));
+          }
+
+          if (self.PileupDisplay.colorBy && !(0, _fastDeepEqual["default"])((0, _mobxStateTree.getSnapshot)(self.PileupDisplay.colorBy), self.SNPCoverageDisplay.colorBy ? (0, _mobxStateTree.getSnapshot)(self.SNPCoverageDisplay.colorBy) : {})) {
+            self.SNPCoverageDisplay.setColorBy((0, _mobxStateTree.getSnapshot)(self.PileupDisplay.colorBy));
+          }
+        }));
+        (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)(function () {
+          self.setSNPCoverageHeight(self.SNPCoverageDisplay.height);
+        }));
+      },
+      renderSvg: function renderSvg(opts) {
+        return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          var pileupHeight;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  pileupHeight = self.height - self.SNPCoverageDisplay.height;
+                  _context.next = 3;
+                  return (0, _mobx.when)(function () {
+                    return self.PileupDisplay.ready;
+                  });
+
+                case 3:
+                  _context.t0 = _react["default"];
+                  _context.t1 = _react["default"].Fragment;
+                  _context.t2 = _react["default"];
+                  _context.next = 8;
+                  return self.SNPCoverageDisplay.renderSvg(opts);
+
+                case 8:
+                  _context.t3 = _context.sent;
+                  _context.t4 = _context.t2.createElement.call(_context.t2, "g", null, _context.t3);
+                  _context.t5 = _react["default"];
+                  _context.t6 = {
+                    transform: "translate(0 ".concat(self.SNPCoverageDisplay.height, ")")
+                  };
+                  _context.next = 14;
+                  return self.PileupDisplay.renderSvg(_objectSpread(_objectSpread({}, opts), {}, {
+                    overrideHeight: pileupHeight
+                  }));
+
+                case 14:
+                  _context.t7 = _context.sent;
+                  _context.t8 = _context.t5.createElement.call(_context.t5, "g", _context.t6, _context.t7);
+                  return _context.abrupt("return", _context.t0.createElement.call(_context.t0, _context.t1, null, _context.t4, _context.t8));
+
+                case 17:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      }
+    };
+  });
+};
+
+var _default = stateModelFactory;
+exports["default"] = _default;

package/dist/LinearPileupDisplay/components/ColorByModifications.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { ObservableMap } from 'mobx';
-declare function ColorByTagDlg(props: {
-    model: {
-        setColorScheme: Function;
-        modificationTagMap: ObservableMap<string, string>;
-        colorBy?: {
-            type: string;
-        };
-    };
-    handleClose: () => void;
-}): JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+/// <reference types="react" />
+import { ObservableMap } from 'mobx';
+declare function ColorByTagDlg(props: {
+    model: {
+        setColorScheme: Function;
+        modificationTagMap: ObservableMap<string, string>;
+        colorBy?: {
+            type: string;
+        };
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof ColorByTagDlg;
+export default _default;

package/dist/LinearPileupDisplay/components/ColorByModifications.js

@@ -0,0 +1,123 @@
+"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 _mobxReact = require("mobx-react");
+
+var _core = require("@material-ui/core");
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    },
+    table: {
+      border: '1px solid #888',
+      margin: theme.spacing(4),
+      '& td': {
+        padding: theme.spacing(1)
+      }
+    }
+  };
+});
+
+function ModificationTable(_ref) {
+  var modifications = _ref.modifications;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: classes.table
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, modifications.map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement("td", null, key), /*#__PURE__*/_react["default"].createElement("td", null, value), /*#__PURE__*/_react["default"].createElement("td", {
+      style: {
+        width: '1em',
+        background: value
+      }
+    }));
+  })));
+}
+
+function ColorByTagDlg(props) {
+  var classes = useStyles();
+  var model = props.model,
+      handleClose = props.handleClose;
+  var colorBy = model.colorBy,
+      modificationTagMap = model.modificationTagMap;
+  var modifications = (0, _toConsumableArray2["default"])(modificationTagMap.entries());
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, "Color by modifications", /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    "aria-label": "close",
+    className: classes.closeButton,
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "You can choose to color the modifications in the BAM/CRAM MM/ML specification using this dialog. Choosing modifications colors the modified positions and can color multiple modification types. Choosing the methylation setting colors methylated and unmethylated CpG."), /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Note: you can revisit this dialog to see the current mapping of colors to modification type for the modification coloring mode"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      margin: 20
+    }
+  }, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications' ? /*#__PURE__*/_react["default"].createElement("div", null, modifications.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Current modification-type-to-color mapping", /*#__PURE__*/_react["default"].createElement(ModificationTable, {
+    modifications: (0, _toConsumableArray2["default"])(modificationTagMap.entries())
+  })) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Note: color by modifications is already enabled. Loading current modifications..."), /*#__PURE__*/_react["default"].createElement(_core.CircularProgress, {
+    size: 15
+  }))) : null, (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' ? /*#__PURE__*/_react["default"].createElement(ModificationTable, {
+    modifications: [['methylated', 'red'], ['unmethylated', 'blue']]
+  }) : null), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "primary",
+    style: {
+      margin: 5
+    },
+    onClick: function onClick() {
+      model.setColorScheme({
+        type: 'modifications'
+      });
+      handleClose();
+    }
+  }, "Modifications"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "primary",
+    style: {
+      margin: 5
+    },
+    onClick: function onClick() {
+      model.setColorScheme({
+        type: 'methylation'
+      });
+      handleClose();
+    }
+  }, "Methylation"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "secondary",
+    style: {
+      margin: 5
+    },
+    onClick: function onClick() {
+      return handleClose();
+    }
+  }, "Cancel"))));
+}
+
+var _default = (0, _mobxReact.observer)(ColorByTagDlg);
+
+exports["default"] = _default;

package/dist/LinearPileupDisplay/components/ColorByTag.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-declare function ColorByTagDlg(props: {
-    model: {
-        setColorScheme: Function;
-    };
-    handleClose: () => void;
-}): JSX.Element;
-declare const _default: typeof ColorByTagDlg;
-export default _default;
+/// <reference types="react" />
+declare function ColorByTagDlg(props: {
+    model: {
+        setColorScheme: Function;
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof ColorByTagDlg;
+export default _default;

package/dist/LinearPileupDisplay/components/ColorByTag.js

@@ -0,0 +1,98 @@
+"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"));
+
+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) {
+  return {
+    root: {
+      width: 300
+    },
+    closeButton: {
+      position: 'absolute',
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  };
+});
+
+function ColorByTagDlg(props) {
+  var classes = useStyles();
+  var model = props.model,
+      handleClose = props.handleClose;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      tag = _useState2[0],
+      setTag = _useState2[1];
+
+  var validTag = tag.match(/^[A-Za-z][A-Za-z0-9]$/);
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: true,
+    onClose: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, null, "Color by tag", /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    "aria-label": "close",
+    className: classes.closeButton,
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))), /*#__PURE__*/_react["default"].createElement(_core.DialogContent, {
+    style: {
+      overflowX: 'hidden'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, "Enter tag to color by: "), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    color: "textSecondary"
+  }, "Examples: XS or TS for RNA-seq inferred read strand, ts (lower-case) for minimap2 read strand, HP for haplotype, RG for read group, etc."), /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    value: tag,
+    onChange: function onChange(event) {
+      return setTag(event.target.value);
+    },
+    placeholder: "Enter tag name",
+    inputProps: {
+      maxLength: 2,
+      'data-testid': 'color-tag-name-input'
+    },
+    error: tag.length === 2 && !validTag,
+    helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '',
+    autoComplete: "off",
+    "data-testid": "color-tag-name"
+  }), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "primary",
+    onClick: function onClick() {
+      model.setColorScheme({
+        type: 'tag',
+        tag: tag
+      });
+      handleClose();
+    },
+    disabled: !validTag
+  }, "Submit"), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    color: "secondary",
+    onClick: handleClose
+  }, "Cancel"))));
+}
+
+var _default = (0, _mobxReact.observer)(ColorByTagDlg);
+
+exports["default"] = _default;

package/dist/LinearPileupDisplay/components/FilterByTag.d.ts

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-declare function FilterByTagDlg(props: {
-    model: {
-        filterBy?: {
-            flagExclude: number;
-            flagInclude: number;
-            readName?: string;
-            tagFilter?: {
-                tag: string;
-                value: string;
-            };
-        };
-        setFilterBy: Function;
-    };
-    handleClose: () => void;
-}): JSX.Element;
-declare const _default: typeof FilterByTagDlg;
-export default _default;
+/// <reference types="react" />
+declare function FilterByTagDlg(props: {
+    model: {
+        filterBy?: {
+            flagExclude: number;
+            flagInclude: number;
+            readName?: string;
+            tagFilter?: {
+                tag: string;
+                value: string;
+            };
+        };
+        setFilterBy: Function;
+    };
+    handleClose: () => void;
+}): JSX.Element;
+declare const _default: typeof FilterByTagDlg;
+export default _default;