@jbrowse/plugin-alignments 1.6.9 → 1.7.3

package/dist/PileupRenderer/components/PileupRendering.d.ts

@@ -1,23 +1,23 @@
-import { Region } from '@jbrowse/core/util/types';
-import React from 'react';
-import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
-declare function PileupRendering(props: {
-    blockKey: string;
-    displayModel: BaseLinearDisplayModel;
-    width: number;
-    height: number;
-    regions: Region[];
-    bpPerPx: number;
-    sortedBy?: {
-        type: string;
-        pos: number;
-        refName: string;
-    };
-    colorBy?: {
-        type: string;
-        tag?: string;
-    };
-    onMouseMove?: (event: React.MouseEvent, featureId: string | undefined) => void;
-}): JSX.Element;
-declare const _default: typeof PileupRendering;
-export default _default;
+import { Region } from '@jbrowse/core/util/types';
+import React from 'react';
+import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
+declare function PileupRendering(props: {
+    blockKey: string;
+    displayModel: BaseLinearDisplayModel;
+    width: number;
+    height: number;
+    regions: Region[];
+    bpPerPx: number;
+    sortedBy?: {
+        type: string;
+        pos: number;
+        refName: string;
+    };
+    colorBy?: {
+        type: string;
+        tag?: string;
+    };
+    onMouseMove?: (event: React.MouseEvent, featureId: string | undefined) => void;
+}): JSX.Element;
+declare const _default: typeof PileupRendering;
+export default _default;

package/dist/PileupRenderer/components/PileupRendering.js

@@ -0,0 +1,270 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _ui = require("@jbrowse/core/ui");
+
+var _util = require("@jbrowse/core/util");
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+// used so that user can click-away-from-feature below the laid out features
+// (issue #1248)
+var canvasPadding = 100;
+
+function PileupRendering(props) {
+  var onMouseMove = props.onMouseMove,
+      blockKey = props.blockKey,
+      displayModel = props.displayModel,
+      width = props.width,
+      height = props.height,
+      regions = props.regions,
+      bpPerPx = props.bpPerPx,
+      sortedBy = props.sortedBy,
+      colorBy = props.colorBy;
+  var selectedFeatureId = displayModel.selectedFeatureId,
+      featureIdUnderMouse = displayModel.featureIdUnderMouse,
+      contextMenuFeature = displayModel.contextMenuFeature;
+
+  var _regions = (0, _slicedToArray2["default"])(regions, 1),
+      region = _regions[0];
+
+  var highlightOverlayCanvas = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      mouseIsDown = _useState2[0],
+      setMouseIsDown = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      movedDuringLastMouseDown = _useState4[0],
+      setMovedDuringLastMouseDown = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var _displayModel$getFeat, _displayModel$getFeat2;
+
+    var canvas = highlightOverlayCanvas.current;
+
+    if (!canvas) {
+      return;
+    }
+
+    var ctx = canvas.getContext('2d');
+
+    if (!ctx) {
+      return;
+    }
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    var selectedRect = selectedFeatureId ? (_displayModel$getFeat = displayModel.getFeatureByID) === null || _displayModel$getFeat === void 0 ? void 0 : _displayModel$getFeat.call(displayModel, blockKey, selectedFeatureId) : undefined;
+
+    if (selectedRect) {
+      var _selectedRect = (0, _slicedToArray2["default"])(selectedRect, 4),
+          leftBp = _selectedRect[0],
+          topPx = _selectedRect[1],
+          rightBp = _selectedRect[2],
+          bottomPx = _selectedRect[3];
+
+      var _bpSpanPx = (0, _util.bpSpanPx)(leftBp, rightBp, region, bpPerPx),
+          _bpSpanPx2 = (0, _slicedToArray2["default"])(_bpSpanPx, 2),
+          leftPx = _bpSpanPx2[0],
+          rightPx = _bpSpanPx2[1];
+
+      var rectTop = Math.round(topPx);
+      var rectHeight = Math.round(bottomPx - topPx);
+      ctx.shadowColor = '#222266';
+      ctx.shadowBlur = 10;
+      ctx.lineJoin = 'bevel';
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = '#00b8ff';
+      ctx.strokeRect(leftPx - 2, rectTop - 2, rightPx - leftPx + 4, rectHeight + 4);
+      ctx.clearRect(leftPx, rectTop, rightPx - leftPx, rectHeight);
+    }
+
+    var highlightedFeature = featureIdUnderMouse || (contextMenuFeature === null || contextMenuFeature === void 0 ? void 0 : contextMenuFeature.id());
+    var highlightedRect = highlightedFeature ? (_displayModel$getFeat2 = displayModel.getFeatureByID) === null || _displayModel$getFeat2 === void 0 ? void 0 : _displayModel$getFeat2.call(displayModel, blockKey, highlightedFeature) : undefined;
+
+    if (highlightedRect) {
+      var _highlightedRect = (0, _slicedToArray2["default"])(highlightedRect, 4),
+          _leftBp = _highlightedRect[0],
+          _topPx = _highlightedRect[1],
+          _rightBp = _highlightedRect[2],
+          _bottomPx = _highlightedRect[3];
+
+      var _bpSpanPx3 = (0, _util.bpSpanPx)(_leftBp, _rightBp, region, bpPerPx),
+          _bpSpanPx4 = (0, _slicedToArray2["default"])(_bpSpanPx3, 2),
+          _leftPx = _bpSpanPx4[0],
+          _rightPx = _bpSpanPx4[1];
+
+      var _rectTop = Math.round(_topPx);
+
+      var _rectHeight = Math.round(_bottomPx - _topPx);
+
+      ctx.fillStyle = '#0003';
+      ctx.fillRect(_leftPx, _rectTop, _rightPx - _leftPx, _rectHeight);
+    }
+  }, [bpPerPx, region, blockKey, selectedFeatureId, displayModel, featureIdUnderMouse, contextMenuFeature]);
+
+  function _onMouseDown(event) {
+    setMouseIsDown(true);
+    setMovedDuringLastMouseDown(false);
+    callMouseHandler('MouseDown', event);
+  }
+
+  function _onMouseEnter(event) {
+    callMouseHandler('MouseEnter', event);
+  }
+
+  function _onMouseOut(event) {
+    callMouseHandler('MouseOut', event);
+    callMouseHandler('MouseLeave', event);
+  }
+
+  function _onMouseOver(event) {
+    callMouseHandler('MouseOver', event);
+  }
+
+  function _onMouseUp(event) {
+    setMouseIsDown(false);
+    callMouseHandler('MouseUp', event);
+  }
+
+  function _onClick(event) {
+    if (!movedDuringLastMouseDown) {
+      callMouseHandler('Click', event);
+    }
+  }
+
+  function _onMouseLeave(event) {
+    callMouseHandler('MouseOut', event);
+    callMouseHandler('MouseLeave', event);
+  }
+
+  function _onContextMenu(event) {
+    callMouseHandler('ContextMenu', event);
+  }
+
+  function mouseMove(event) {
+    if (mouseIsDown) {
+      setMovedDuringLastMouseDown(true);
+    }
+
+    var offsetX = 0;
+    var offsetY = 0;
+    var canvas = highlightOverlayCanvas.current;
+
+    if (canvas) {
+      var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+          left = _canvas$getBoundingCl.left,
+          top = _canvas$getBoundingCl.top;
+
+      offsetX = left;
+      offsetY = top;
+    }
+
+    offsetX = event.clientX - offsetX;
+    offsetY = event.clientY - offsetY;
+    var px = region.reversed ? width - offsetX : offsetX;
+    var clientBp = region.start + bpPerPx * px;
+    var featIdUnderMouse = displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY);
+
+    if (onMouseMove) {
+      onMouseMove(event, featIdUnderMouse);
+    }
+  }
+
+  function callMouseHandler(handlerName, event) {
+    // @ts-ignore
+    // eslint-disable-next-line react/destructuring-assignment
+    var featureHandler = props["onFeature".concat(handlerName)]; // @ts-ignore
+    // eslint-disable-next-line react/destructuring-assignment
+
+    var canvasHandler = props["on".concat(handlerName)];
+
+    if (featureHandler && featureIdUnderMouse) {
+      featureHandler(event, featureIdUnderMouse);
+    } else if (canvasHandler) {
+      canvasHandler(event, featureIdUnderMouse);
+    }
+  }
+
+  var canvasWidth = Math.ceil(width); // need to call this in render so we get the right observer behavior
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "PileupRendering",
+    "data-testid": "pileup-".concat(sortedBy || colorBy ? "".concat((sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type) || '').concat((colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) || '').concat((colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag) || '') : 'normal'),
+    style: {
+      position: 'relative',
+      width: canvasWidth,
+      height: height
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ui.PrerenderedCanvas, (0, _extends2["default"])({}, props, {
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0
+    }
+  })), /*#__PURE__*/_react["default"].createElement("canvas", {
+    "data-testid": "pileup_overlay_canvas",
+    width: canvasWidth,
+    height: height + canvasPadding,
+    style: {
+      position: 'absolute',
+      left: 0,
+      top: 0
+    },
+    className: "highlightOverlayCanvas",
+    ref: highlightOverlayCanvas,
+    onMouseDown: function onMouseDown(event) {
+      return _onMouseDown(event);
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      return _onMouseEnter(event);
+    },
+    onMouseOut: function onMouseOut(event) {
+      return _onMouseOut(event);
+    },
+    onMouseOver: function onMouseOver(event) {
+      return _onMouseOver(event);
+    },
+    onMouseUp: function onMouseUp(event) {
+      return _onMouseUp(event);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      return _onMouseLeave(event);
+    },
+    onMouseMove: function onMouseMove(event) {
+      return mouseMove(event);
+    },
+    onClick: function onClick(event) {
+      return _onClick(event);
+    },
+    onContextMenu: function onContextMenu(event) {
+      return _onContextMenu(event);
+    },
+    onFocus: function onFocus() {},
+    onBlur: function onBlur() {}
+  }));
+}
+
+var _default = (0, _mobxReact.observer)(PileupRendering);
+
+exports["default"] = _default;

package/dist/PileupRenderer/components/PileupRendering.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _PrecomputedLayout = _interopRequireDefault(require("@jbrowse/core/util/layouts/PrecomputedLayout"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _PileupRendering = _interopRequireDefault(require("./PileupRendering"));
+
+// these tests do very little, let's try to expand them at some point
+test('one', function () {
+  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PileupRendering["default"], {
+    width: 500,
+    height: 500,
+    regions: [{
+      refName: 'zonk',
+      start: 1,
+      end: 3
+    }],
+    layout: new _PrecomputedLayout["default"]({
+      rectangles: {},
+      totalHeight: 20
+    }),
+    displayModel: {},
+    bpPerPx: 3,
+    config: {
+      type: 'DummyRenderer'
+    }
+  })),
+      container = _render.container;
+
+  expect(container.firstChild).toMatchSnapshot();
+});

package/dist/PileupRenderer/configSchema.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
-export default _default;
+declare const _default: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+export default _default;

package/dist/PileupRenderer/configSchema.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _default = (0, _configuration.ConfigurationSchema)('PileupRenderer', {
+  // default magenta here is used to detect the user has not customized this
+  color: {
+    type: 'color',
+    description: 'the color of each feature in a pileup alignment',
+    defaultValue: '#f0f',
+    contextVariable: ['feature']
+  },
+  orientationType: {
+    type: 'stringEnum',
+    model: _mobxStateTree.types.enumeration('orientationType', ['fr', 'rf', 'ff']),
+    defaultValue: 'fr',
+    description: 'read sequencer orienation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options'
+  },
+  displayMode: {
+    type: 'stringEnum',
+    model: _mobxStateTree.types.enumeration('displayMode', ['normal', 'compact', 'collapse']),
+    description: 'Alternative display modes',
+    defaultValue: 'normal'
+  },
+  minSubfeatureWidth: {
+    type: 'number',
+    description: 'the minimum width in px for a pileup mismatch feature. use for increasing mismatch marker widths when zoomed out to e.g. 1px or 0.5px',
+    defaultValue: 0
+  },
+  maxHeight: {
+    type: 'integer',
+    description: 'the maximum height to be used in a pileup rendering',
+    defaultValue: 1200
+  },
+  maxClippingSize: {
+    type: 'integer',
+    description: 'the max clip size to be used in a pileup rendering',
+    defaultValue: 10000
+  },
+  height: {
+    type: 'number',
+    description: 'the height of each feature in a pileup alignment',
+    defaultValue: 7,
+    contextVariable: ['feature']
+  },
+  noSpacing: {
+    type: 'boolean',
+    description: 'remove spacing between features',
+    defaultValue: false
+  },
+  largeInsertionIndicatorScale: {
+    type: 'number',
+    description: 'scale at which to draw the large insertion indicators (bp/pixel)',
+    defaultValue: 10
+  },
+  mismatchAlpha: {
+    type: 'boolean',
+    defaultValue: false,
+    description: 'Fade low quality mismatches'
+  }
+}, {
+  explicitlyTyped: true
+});
+
+exports["default"] = _default;

package/dist/PileupRenderer/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
-export default function register(pluginManager: PluginManager): void;
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function register(pluginManager: PluginManager): void;

package/dist/PileupRenderer/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = register;
+
+var _PileupRenderer = _interopRequireDefault(require("./PileupRenderer"));
+
+var _PileupRendering = _interopRequireDefault(require("./components/PileupRendering"));
+
+var _configSchema = _interopRequireDefault(require("./configSchema"));
+
+function register(pluginManager) {
+  pluginManager.addRendererType(function () {
+    return new _PileupRenderer["default"]({
+      name: 'PileupRenderer',
+      ReactComponent: _PileupRendering["default"],
+      configSchema: _configSchema["default"],
+      pluginManager: pluginManager
+    });
+  });
+}

package/dist/PileupRenderer/sortUtil.d.ts

@@ -1,8 +1,8 @@
-import { Feature } from '@jbrowse/core/util/simpleFeature';
-interface SortObject {
-    pos: number;
-    type: string;
-    tag?: string;
-}
-export declare const sortFeature: (features: Map<string, Feature>, sortedBy: SortObject) => Map<string, Feature>;
-export {};
+import { Feature } from '@jbrowse/core/util/simpleFeature';
+interface SortObject {
+    pos: number;
+    type: string;
+    tag?: string;
+}
+export declare const sortFeature: (features: Map<string, Feature>, sortedBy: SortObject) => Map<string, Feature>;
+export {};

package/dist/PileupRenderer/sortUtil.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortFeature = void 0;
+
+var _range = require("@jbrowse/core/util/range");
+
+var sortFeature = function sortFeature(features, sortedBy) {
+  var featureArray = Array.from(features.values());
+  var featuresInCenterLine = [];
+  var featuresOutsideCenter = [];
+  var pos = sortedBy.pos,
+      type = sortedBy.type; // only sort on features that intersect center line, append those outside post-sort
+
+  featureArray.forEach(function (innerArray) {
+    var feature = innerArray;
+    var start = feature.get('start');
+    var end = feature.get('end');
+
+    if ((0, _range.doesIntersect2)(pos - 1, pos, start, end)) {
+      featuresInCenterLine.push(innerArray);
+    } else {
+      featuresOutsideCenter.push(innerArray);
+    }
+  });
+  var isCram = featureArray.length ? featureArray[0].get('tags') : false;
+
+  switch (type) {
+    case 'Start location':
+      {
+        featuresInCenterLine.sort(function (a, b) {
+          return a.get('start') - b.get('start');
+        });
+        break;
+      }
+
+    case 'tag':
+      {
+        var tag = sortedBy.tag;
+
+        var getTag = function getTag(f, t) {
+          return isCram ? f.get('tags')[t] : f.get(t);
+        };
+
+        var isString = featuresInCenterLine[0] && typeof getTag(featuresInCenterLine[0], tag) === 'string';
+
+        if (isString) {
+          featuresInCenterLine.sort(function (a, b) {
+            return getTag(b, tag).localeCompare(getTag(a, tag));
+          });
+        } else {
+          featuresInCenterLine.sort(function (a, b) {
+            return (getTag(b, tag) || 0) - (getTag(a, tag) || 0);
+          });
+        }
+
+        break;
+      }
+    // first sort all mismatches, then all reference bases at the end
+
+    case 'Base pair':
+      {
+        var baseSortArray = [];
+        featuresInCenterLine.forEach(function (feature) {
+          var mismatches = feature.get('mismatches');
+          mismatches.forEach(function (mismatch) {
+            var start = feature.get('start');
+            var offset = start + mismatch.start + 1;
+            var consuming = mismatch.type === 'insertion' || mismatch.type === 'softclip';
+            var len = consuming ? 0 : mismatch.length;
+
+            if (pos >= offset && pos < offset + len) {
+              baseSortArray.push([feature.id(), mismatch]);
+            }
+          });
+        });
+        var baseMap = new Map(baseSortArray);
+        featuresInCenterLine.sort(function (a, b) {
+          var aMismatch = baseMap.get(a.id());
+          var bMismatch = baseMap.get(b.id());
+          var acode = bMismatch && bMismatch.base.toUpperCase();
+          var bcode = aMismatch && aMismatch.base.toUpperCase();
+
+          if (acode === bcode && acode === '*') {
+            // @ts-ignore
+            return aMismatch.length - bMismatch.length;
+          }
+
+          return (acode ? acode.charCodeAt(0) : 0) - (bcode ? bcode.charCodeAt(0) : 0);
+        });
+        break;
+      }
+    // sorts positive strands then negative strands
+
+    case 'Read strand':
+      {
+        featuresInCenterLine.sort(function (a, b) {
+          return a.get('strand') <= b.get('strand') ? 1 : -1;
+        });
+        break;
+      }
+  }
+
+  var sortedMap = new Map(featuresInCenterLine.concat(featuresOutsideCenter).map(function (feature) {
+    return [feature.id(), feature];
+  }));
+  return sortedMap;
+};
+
+exports.sortFeature = sortFeature;