@jbrowse/plugin-linear-genome-view 1.6.7 → 1.7.0

package/dist/LinearGenomeView/components/OverviewScaleBar.js

@@ -0,0 +1,403 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Polygon = exports.Cytobands = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Base1DViewModel = _interopRequireDefault(require("@jbrowse/core/util/Base1DViewModel"));
+
+var _util = require("@jbrowse/core/util");
+
+var _blockTypes = require("@jbrowse/core/util/blockTypes");
+
+var _ = require("..");
+
+var _util2 = require("../util");
+
+var _OverviewRubberBand = _interopRequireDefault(require("./OverviewRubberBand"));
+
+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 wholeSeqSpacer = 2;
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    scaleBar: {
+      height: _.HEADER_OVERVIEW_HEIGHT
+    },
+    scaleBarBorder: {
+      border: '1px solid'
+    },
+    scaleBarContig: {
+      backgroundColor: theme.palette.background["default"],
+      position: 'absolute',
+      top: 0,
+      height: _.HEADER_OVERVIEW_HEIGHT
+    },
+    scaleBarContigForward: {
+      backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E\")",
+      backgroundRepeat: 'repeat'
+    },
+    scaleBarContigReverse: {
+      backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E\")",
+      backgroundRepeat: 'repeat'
+    },
+    scaleBarRefName: {
+      position: 'absolute',
+      fontWeight: 'bold',
+      pointerEvents: 'none',
+      zIndex: 100
+    },
+    scaleBarLabel: {
+      height: _.HEADER_OVERVIEW_HEIGHT,
+      width: 1,
+      position: 'absolute',
+      display: 'flex',
+      justifyContent: 'center',
+      pointerEvents: 'none'
+    },
+    scaleBarVisibleRegion: {
+      position: 'absolute',
+      height: _.HEADER_OVERVIEW_HEIGHT,
+      pointerEvents: 'none',
+      zIndex: 100,
+      border: '1px solid'
+    },
+    overview: {
+      height: _.HEADER_BAR_HEIGHT,
+      position: 'relative'
+    },
+    overviewSvg: {
+      width: '100%',
+      position: 'absolute'
+    }
+  };
+});
+var Polygon = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model,
+      overview = _ref.overview,
+      _ref$useOffset = _ref.useOffset,
+      useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
+  var theme = (0, _core.useTheme)();
+  var multiplier = Number(useOffset);
+  var interRegionPaddingWidth = model.interRegionPaddingWidth,
+      offsetPx = model.offsetPx,
+      dynamicBlocks = model.dynamicBlocks,
+      cytobandOffset = model.cytobandOffset;
+  var contentBlocks = dynamicBlocks.contentBlocks,
+      totalWidthPxWithoutBorders = dynamicBlocks.totalWidthPxWithoutBorders;
+  var _theme$palette = theme.palette,
+      tertiary = _theme$palette.tertiary,
+      primary = _theme$palette.primary;
+  var polygonColor = tertiary ? tertiary.light : primary.light;
+
+  if (!contentBlocks.length) {
+    return null;
+  }
+
+  var first = contentBlocks[0];
+  var last = contentBlocks[contentBlocks.length - 1];
+  var topLeft = (overview.bpToPx(_objectSpread(_objectSpread({}, first), {}, {
+    coord: first.reversed ? first.end : first.start
+  })) || 0) + cytobandOffset * multiplier;
+  var topRight = (overview.bpToPx(_objectSpread(_objectSpread({}, last), {}, {
+    coord: last.reversed ? last.start : last.end
+  })) || 0) + cytobandOffset * multiplier;
+  var startPx = Math.max(0, -offsetPx);
+  var endPx = startPx + totalWidthPxWithoutBorders + contentBlocks.length * interRegionPaddingWidth / 2;
+  var points = [[startPx, _.HEADER_BAR_HEIGHT], [endPx, _.HEADER_BAR_HEIGHT], [topRight, 0], [topLeft, 0]];
+  return /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: points.toString(),
+    fill: (0, _core.alpha)(polygonColor, 0.3),
+    stroke: (0, _core.alpha)(polygonColor, 0.8)
+  });
+});
+exports.Polygon = Polygon;
+
+// rounded rect from https://stackoverflow.com/a/45889603/2129219
+// prettier-ignore
+function rightRoundedRect(x, y, width, height, radius) {
+  return "M" + x + "," + y + "h" + (width - radius) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + (height - 2 * radius) + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius + "h" + (radius - width) + "z";
+} // prettier-ignore
+
+
+function leftRoundedRect(x, y, width, height, radius) {
+  return "M" + (x + radius) + "," + y + "h" + (width - radius) + "v" + height + "h" + (radius - width) + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius + "v" + (2 * radius - height) + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius + "z";
+}
+
+var colorMap = {
+  gneg: 'rgb(227,227,227)',
+  gpos25: 'rgb(142,142,142)',
+  gpos50: 'rgb(85,85,85)',
+  gpos100: 'rgb(0,0,0)',
+  gpos75: 'rgb(57,57,57)',
+  gvar: 'rgb(0,0,0)',
+  stalk: 'rgb(127,127,127)',
+  acen: '#800'
+};
+var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
+  var _assembly$cytobands;
+
+  var overview = _ref2.overview,
+      block = _ref2.block,
+      assembly = _ref2.assembly;
+  var offsetPx = block.offsetPx,
+      reversed = block.reversed;
+  var cytobands = assembly === null || assembly === void 0 ? void 0 : (_assembly$cytobands = assembly.cytobands) === null || _assembly$cytobands === void 0 ? void 0 : _assembly$cytobands.map(function (f) {
+    return {
+      refName: assembly.getCanonicalRefName(f.get('refName')),
+      start: f.get('start'),
+      end: f.get('end'),
+      type: f.get('type')
+    };
+  }).filter(function (f) {
+    return f.refName === block.refName;
+  }).map(function (f) {
+    var refName = f.refName,
+        start = f.start,
+        end = f.end,
+        type = f.type;
+    return [overview.bpToPx({
+      refName: refName,
+      coord: start
+    }), overview.bpToPx({
+      refName: refName,
+      coord: end
+    }), type];
+  });
+  var arr = cytobands || [];
+  var lcap = reversed ? arr.length - 1 : 0;
+  var rcap = reversed ? 0 : arr.length - 1;
+  var firstCent = true;
+  return cytobands ? /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(-".concat(offsetPx, ")")
+  }, cytobands.map(function (_ref3, index) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 3),
+        start = _ref4[0],
+        end = _ref4[1],
+        type = _ref4[2];
+
+    var key = "".concat(start, "-").concat(end, "-").concat(type);
+
+    if (type === 'acen' && firstCent) {
+      firstCent = false;
+      return /*#__PURE__*/_react["default"].createElement("polygon", {
+        key: key,
+        points: [[start, 0], [end, _.HEADER_OVERVIEW_HEIGHT / 2], [start, _.HEADER_OVERVIEW_HEIGHT]].toString(),
+        fill: colorMap[type]
+      });
+    }
+
+    if (type === 'acen' && !firstCent) {
+      return /*#__PURE__*/_react["default"].createElement("polygon", {
+        key: key,
+        points: [[start, _.HEADER_OVERVIEW_HEIGHT / 2], [end, 0], [end, _.HEADER_OVERVIEW_HEIGHT]].toString(),
+        fill: colorMap[type]
+      });
+    }
+
+    if (lcap === index) {
+      return /*#__PURE__*/_react["default"].createElement("path", {
+        key: key,
+        d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), _.HEADER_OVERVIEW_HEIGHT, 8),
+        fill: colorMap[type]
+      });
+    } else if (rcap === index) {
+      return /*#__PURE__*/_react["default"].createElement("path", {
+        key: key,
+        d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, _.HEADER_OVERVIEW_HEIGHT, 8),
+        fill: colorMap[type]
+      });
+    } else {
+      return /*#__PURE__*/_react["default"].createElement("rect", {
+        key: key,
+        x: Math.min(start, end),
+        y: 0,
+        width: Math.abs(end - start),
+        height: _.HEADER_OVERVIEW_HEIGHT,
+        fill: colorMap[type]
+      });
+    }
+  })) : null;
+});
+exports.Cytobands = Cytobands;
+var OverviewBox = (0, _mobxReact.observer)(function (_ref5) {
+  var scale = _ref5.scale,
+      model = _ref5.model,
+      block = _ref5.block,
+      overview = _ref5.overview;
+  var classes = useStyles();
+  var cytobandOffset = model.cytobandOffset,
+      showCytobands = model.showCytobands;
+  var start = block.start,
+      end = block.end,
+      reversed = block.reversed,
+      refName = block.refName,
+      assemblyName = block.assemblyName;
+
+  var _chooseGridPitch = (0, _util2.chooseGridPitch)(scale, 120, 15),
+      majorPitch = _chooseGridPitch.majorPitch;
+
+  var _getSession = (0, _util.getSession)(model),
+      assemblyManager = _getSession.assemblyManager;
+
+  var assembly = assemblyManager.get(assemblyName);
+  var refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
+  var tickLabels = [];
+
+  for (var i = 0; i < Math.floor((end - start) / majorPitch); i++) {
+    var offsetLabel = (i + 1) * majorPitch;
+    tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    style: {
+      left: block.offsetPx + 3,
+      color: showCytobands ? 'black' : refNameColor
+    },
+    className: classes.scaleBarRefName
+  }, refName), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(classes.scaleBarContig, showCytobands ? undefined : reversed ? classes.scaleBarContigReverse : classes.scaleBarContigForward, !showCytobands ? classes.scaleBarBorder : undefined),
+    style: {
+      left: block.offsetPx + cytobandOffset,
+      width: block.widthPx,
+      borderColor: refNameColor
+    }
+  }, !showCytobands ? tickLabels.map(function (tickLabel, labelIdx) {
+    return /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      key: "".concat(JSON.stringify(block), "-").concat(tickLabel, "-").concat(labelIdx),
+      className: classes.scaleBarLabel,
+      variant: "body2",
+      style: {
+        left: (labelIdx + 1) * majorPitch / scale,
+        pointerEvents: 'none',
+        color: refNameColor
+      }
+    }, tickLabel.toLocaleString('en-US'));
+  }) : null, showCytobands ? /*#__PURE__*/_react["default"].createElement("svg", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Cytobands, {
+    overview: overview,
+    assembly: assembly,
+    block: block
+  })) : null));
+});
+var ScaleBar = (0, _mobxReact.observer)(function (_ref6) {
+  var model = _ref6.model,
+      scale = _ref6.scale,
+      overview = _ref6.overview;
+  var classes = useStyles();
+  var theme = (0, _core.useTheme)();
+  var dynamicBlocks = model.dynamicBlocks,
+      showCytobands = model.showCytobands,
+      cytobandOffset = model.cytobandOffset;
+  var visibleRegions = dynamicBlocks.contentBlocks;
+  var overviewVisibleRegions = overview.dynamicBlocks;
+  var _theme$palette2 = theme.palette,
+      tertiary = _theme$palette2.tertiary,
+      primary = _theme$palette2.primary;
+  var scaleBarColor = tertiary ? tertiary.light : primary.light;
+
+  if (!visibleRegions.length) {
+    return null;
+  }
+
+  var first = visibleRegions[0];
+  var firstOverviewPx = overview.bpToPx(_objectSpread(_objectSpread({}, first), {}, {
+    coord: first.reversed ? first.end : first.start
+  })) || 0;
+  var last = visibleRegions[visibleRegions.length - 1];
+  var lastOverviewPx = overview.bpToPx(_objectSpread(_objectSpread({}, last), {}, {
+    coord: last.reversed ? last.start : last.end
+  })) || 0;
+  var color = showCytobands ? '#f00' : scaleBarColor;
+  var transparency = showCytobands ? 0.1 : 0.3;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.scaleBar
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.scaleBarVisibleRegion,
+    style: {
+      width: lastOverviewPx - firstOverviewPx,
+      left: firstOverviewPx + cytobandOffset,
+      background: (0, _core.alpha)(color, transparency),
+      borderColor: color
+    }
+  }), overviewVisibleRegions.map(function (block, idx) {
+    return !(block instanceof _blockTypes.ContentBlock) ? /*#__PURE__*/_react["default"].createElement("div", {
+      key: "".concat(JSON.stringify(block), "-").concat(idx),
+      className: classes.scaleBarContig,
+      style: {
+        width: block.widthPx,
+        left: block.offsetPx,
+        backgroundColor: '#999',
+        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)'
+      }
+    }) : /*#__PURE__*/_react["default"].createElement(OverviewBox, {
+      scale: scale,
+      block: block,
+      model: model,
+      overview: overview,
+      key: "".concat(JSON.stringify(block), "-").concat(idx)
+    });
+  }));
+});
+
+function OverviewScaleBar(_ref7) {
+  var model = _ref7.model,
+      children = _ref7.children;
+  var classes = useStyles();
+  var totalBp = model.totalBp,
+      width = model.width,
+      cytobandOffset = model.cytobandOffset,
+      displayedRegions = model.displayedRegions;
+
+  var overview = _Base1DViewModel["default"].create({
+    displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+    interRegionPaddingWidth: 0,
+    minimumBlockWidth: model.minimumBlockWidth
+  });
+
+  var modWidth = width - cytobandOffset;
+  overview.setVolatileWidth(modWidth);
+  overview.showAllRegions();
+  var scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_OverviewRubberBand["default"], {
+    model: model,
+    overview: overview,
+    ControlComponent: /*#__PURE__*/_react["default"].createElement(ScaleBar, {
+      model: model,
+      overview: overview,
+      scale: scale
+    })
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.overview
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    height: _.HEADER_BAR_HEIGHT,
+    className: classes.overviewSvg
+  }, /*#__PURE__*/_react["default"].createElement(Polygon, {
+    model: model,
+    overview: overview
+  })), children));
+}
+
+var _default = (0, _mobxReact.observer)(OverviewScaleBar);
+
+exports["default"] = _default;