@jbrowse/plugin-linear-genome-view 1.7.9 → 2.0.0

package/dist/LinearGenomeView/components/OverviewScaleBar.js

@@ -1,403 +1,315 @@
 "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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Polygon = exports.Cytobands = void 0;
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var mobx_react_1 = require("mobx-react");
+var Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
+var util_1 = require("@jbrowse/core/util");
+var blockTypes_1 = require("@jbrowse/core/util/blockTypes");
+// locals
+var __1 = require("..");
+var util_2 = require("../util");
+var OverviewRubberBand_1 = __importDefault(require("./OverviewRubberBand"));
 var wholeSeqSpacer = 2;
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     scaleBar: {
-      height: _.HEADER_OVERVIEW_HEIGHT
+        height: __1.HEADER_OVERVIEW_HEIGHT,
     },
     scaleBarBorder: {
-      border: '1px solid'
+        border: '1px solid',
     },
     scaleBarContig: {
-      backgroundColor: theme.palette.background.default,
-      position: 'absolute',
-      top: 0,
-      height: _.HEADER_OVERVIEW_HEIGHT
+        backgroundColor: theme.palette.background.default,
+        position: 'absolute',
+        top: 0,
+        height: __1.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'
+        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'
+        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
+        position: 'absolute',
+        fontWeight: 'bold',
+        pointerEvents: 'none',
+        zIndex: 100,
     },
     scaleBarLabel: {
-      height: _.HEADER_OVERVIEW_HEIGHT,
-      width: 1,
-      position: 'absolute',
-      display: 'flex',
-      justifyContent: 'center',
-      pointerEvents: 'none'
+        height: __1.HEADER_OVERVIEW_HEIGHT,
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        pointerEvents: 'none',
     },
     scaleBarVisibleRegion: {
-      position: 'absolute',
-      height: _.HEADER_OVERVIEW_HEIGHT,
-      pointerEvents: 'none',
-      zIndex: 100,
-      border: '1px solid'
+        position: 'absolute',
+        height: __1.HEADER_OVERVIEW_HEIGHT,
+        pointerEvents: 'none',
+        zIndex: 100,
+        border: '1px solid',
     },
     overview: {
-      height: _.HEADER_BAR_HEIGHT,
-      position: 'relative'
+        height: __1.HEADER_BAR_HEIGHT,
+        position: 'relative',
     },
     overviewSvg: {
-      width: '100%',
-      position: 'absolute'
+        width: '100%',
+        position: 'absolute',
+    },
+}); });
+var Polygon = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model, overview = _a.overview, _b = _a.useOffset, useOffset = _b === void 0 ? true : _b;
+    var theme = (0, material_1.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;
+    // @ts-ignore
+    var _c = theme.palette, tertiary = _c.tertiary, primary = _c.primary;
+    var polygonColor = tertiary ? tertiary.light : primary.light;
+    if (!contentBlocks.length) {
+        return null;
     }
-  };
-});
-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)
-  });
+    var first = contentBlocks[0];
+    var last = contentBlocks[contentBlocks.length - 1];
+    var topLeft = (overview.bpToPx(__assign(__assign({}, first), { coord: first.reversed ? first.end : first.start })) || 0) +
+        cytobandOffset * multiplier;
+    var topRight = (overview.bpToPx(__assign(__assign({}, 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, __1.HEADER_BAR_HEIGHT],
+        [endPx, __1.HEADER_BAR_HEIGHT],
+        [topRight, 0],
+        [topLeft, 0],
+    ];
+    return (react_1.default.createElement("polygon", { points: points.toString(), fill: (0, material_1.alpha)(polygonColor, 0.3), stroke: (0, material_1.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
-
-
+    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";
+    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'
+    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;
+function getCytobands(assembly, refName) {
+    var _a;
+    return (((_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.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 === refName; })) || []);
+}
+var Cytobands = (0, mobx_react_1.observer)(function (_a) {
+    var overview = _a.overview, block = _a.block, assembly = _a.assembly;
+    var offsetPx = block.offsetPx, reversed = block.reversed;
+    var cytobands = getCytobands(assembly, block.refName);
+    var coords = cytobands.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 (react_1.default.createElement("g", { transform: "translate(-".concat(offsetPx, ")") }, coords.map(function (_a, index) {
+        var _b = __read(_a, 3), start = _b[0], end = _b[1], type = _b[2];
+        var key = "".concat(start, "-").concat(end, "-").concat(type);
+        if (type === 'acen' && firstCent) {
+            firstCent = false;
+            return (react_1.default.createElement("polygon", { key: key, points: [
+                    [start, 0],
+                    [end, __1.HEADER_OVERVIEW_HEIGHT / 2],
+                    [start, __1.HEADER_OVERVIEW_HEIGHT],
+                ].toString(), fill: colorMap[type] }));
+        }
+        if (type === 'acen' && !firstCent) {
+            return (react_1.default.createElement("polygon", { key: key, points: [
+                    [start, __1.HEADER_OVERVIEW_HEIGHT / 2],
+                    [end, 0],
+                    [end, __1.HEADER_OVERVIEW_HEIGHT],
+                ].toString(), fill: colorMap[type] }));
+        }
+        if (lcap === index) {
+            return (react_1.default.createElement("path", { key: key, d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), __1.HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        }
+        else if (rcap === index) {
+            return (react_1.default.createElement("path", { key: key, d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, __1.HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        }
+        else {
+            return (react_1.default.createElement("rect", { key: key, x: Math.min(start, end), y: 0, width: Math.abs(end - start), height: __1.HEADER_OVERVIEW_HEIGHT, fill: colorMap[type] }));
+        }
+    })));
 });
 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%'
+var OverviewBox = (0, mobx_react_1.observer)(function (_a) {
+    var scale = _a.scale, model = _a.model, block = _a.block, overview = _a.overview;
+    var _b = useStyles(), classes = _b.classes, cx = _b.cx;
+    var cytobandOffset = model.cytobandOffset, bpPerPx = model.bpPerPx, showCytobands = model.showCytobands;
+    var start = block.start, end = block.end, reversed = block.reversed, refName = block.refName, assemblyName = block.assemblyName;
+    var majorPitch = (0, util_2.chooseGridPitch)(scale, 120, 15).majorPitch;
+    var assemblyManager = (0, util_1.getSession)(model).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);
     }
-  }, /*#__PURE__*/_react.default.createElement(Cytobands, {
-    overview: overview,
-    assembly: assembly,
-    block: block
-  })) : null));
+    var canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.Typography, { style: {
+                left: block.offsetPx + 3,
+                color: canDisplayCytobands ? 'black' : refNameColor,
+            }, className: classes.scaleBarRefName }, refName),
+        react_1.default.createElement("div", { className: cx(classes.scaleBarContig, canDisplayCytobands
+                ? undefined
+                : reversed
+                    ? classes.scaleBarContigReverse
+                    : classes.scaleBarContigForward, !canDisplayCytobands ? classes.scaleBarBorder : undefined), style: {
+                left: block.offsetPx + cytobandOffset,
+                width: block.widthPx,
+                borderColor: refNameColor,
+            } },
+            !canDisplayCytobands
+                ? tickLabels.map(function (tickLabel, labelIdx) { return (react_1.default.createElement(material_1.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,
+                    } }, (0, util_1.getTickDisplayStr)(tickLabel, bpPerPx))); })
+                : null,
+            canDisplayCytobands ? (react_1.default.createElement("svg", { style: { width: '100%' } },
+                react_1.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
+var ScaleBar = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model, scale = _a.scale, overview = _a.overview;
+    var classes = useStyles().classes;
+    var theme = (0, material_1.useTheme)();
+    var dynamicBlocks = model.dynamicBlocks, showCytobands = model.showCytobands, cytobandOffset = model.cytobandOffset;
+    var visibleRegions = dynamicBlocks.contentBlocks;
+    var overviewVisibleRegions = overview.dynamicBlocks;
+    // @ts-ignore
+    var _b = theme.palette, tertiary = _b.tertiary, primary = _b.primary;
+    var scaleBarColor = tertiary ? tertiary.light : primary.light;
+    if (!visibleRegions.length) {
+        return null;
     }
-  }), 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)
-    });
-  }));
+    var first = visibleRegions[0];
+    var firstOverviewPx = overview.bpToPx(__assign(__assign({}, first), { coord: first.reversed ? first.end : first.start })) || 0;
+    var last = visibleRegions[visibleRegions.length - 1];
+    var lastOverviewPx = overview.bpToPx(__assign(__assign({}, last), { coord: last.reversed ? last.start : last.end })) || 0;
+    var color = showCytobands ? '#f00' : scaleBarColor;
+    var transparency = showCytobands ? 0.1 : 0.3;
+    return (react_1.default.createElement("div", { className: classes.scaleBar },
+        react_1.default.createElement("div", { className: classes.scaleBarVisibleRegion, style: {
+                width: lastOverviewPx - firstOverviewPx,
+                left: firstOverviewPx + cytobandOffset,
+                background: (0, material_1.alpha)(color, transparency),
+                borderColor: color,
+            } }),
+        overviewVisibleRegions.map(function (block, idx) {
+            return !(block instanceof blockTypes_1.ContentBlock) ? (react_1.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)',
+                } })) : (react_1.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));
+function OverviewScaleBar(_a) {
+    var model = _a.model, children = _a.children;
+    var classes = useStyles().classes;
+    var totalBp = model.totalBp, width = model.width, cytobandOffset = model.cytobandOffset, displayedRegions = model.displayedRegions;
+    var overview = Base1DViewModel_1.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 (react_1.default.createElement("div", null,
+        react_1.default.createElement(OverviewRubberBand_1.default, { model: model, overview: overview, ControlComponent: react_1.default.createElement(ScaleBar, { model: model, overview: overview, scale: scale }) }),
+        react_1.default.createElement("div", { className: classes.overview },
+            react_1.default.createElement("svg", { height: __1.HEADER_BAR_HEIGHT, className: classes.overviewSvg },
+                react_1.default.createElement(Polygon, { model: model, overview: overview })),
+            children)));
 }
-
-var _default = (0, _mobxReact.observer)(OverviewScaleBar);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(OverviewScaleBar);
+//# sourceMappingURL=OverviewScaleBar.js.map