@jbrowse/plugin-linear-genome-view 1.6.9 → 1.7.3

package/dist/LinearGenomeView/components/Ruler.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import ReactPropTypes from 'prop-types';
-declare function Ruler({ start, end, bpPerPx, reversed, major, minor, }: {
-    start: number;
-    end: number;
-    bpPerPx: number;
-    reversed?: boolean;
-    major: boolean;
-    minor: boolean;
-}): JSX.Element;
-declare namespace Ruler {
-    var propTypes: {
-        start: ReactPropTypes.Validator<number>;
-        end: ReactPropTypes.Validator<number>;
-        bpPerPx: ReactPropTypes.Validator<number>;
-        reversed: ReactPropTypes.Requireable<boolean>;
-        major: ReactPropTypes.Requireable<boolean>;
-        minor: ReactPropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        reversed: boolean;
-        major: boolean;
-        minor: boolean;
-    };
-}
-declare const _default: typeof Ruler;
-export default _default;
+/// <reference types="react" />
+import ReactPropTypes from 'prop-types';
+declare function Ruler({ start, end, bpPerPx, reversed, major, minor, }: {
+    start: number;
+    end: number;
+    bpPerPx: number;
+    reversed?: boolean;
+    major: boolean;
+    minor: boolean;
+}): JSX.Element;
+declare namespace Ruler {
+    var propTypes: {
+        start: ReactPropTypes.Validator<number>;
+        end: ReactPropTypes.Validator<number>;
+        bpPerPx: ReactPropTypes.Validator<number>;
+        reversed: ReactPropTypes.Requireable<boolean>;
+        major: ReactPropTypes.Requireable<boolean>;
+        minor: ReactPropTypes.Requireable<boolean>;
+    };
+    var defaultProps: {
+        reversed: boolean;
+        major: boolean;
+        minor: boolean;
+    };
+}
+declare const _default: typeof Ruler;
+export default _default;

package/dist/LinearGenomeView/components/Ruler.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styles = require("@material-ui/core/styles");
+
+var _mobxReact = require("mobx-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _util = require("../util");
+
+function mathPower(num) {
+  if (num < 999) {
+    return String(num);
+  }
+
+  return "".concat(mathPower(~~(num / 1000)), ",").concat("00".concat(~~(num % 1000)).substr(-3, 3));
+}
+
+var useStyles = (0, _styles.makeStyles)(function
+  /* theme */
+() {
+  return {
+    majorTickLabel: {
+      fontSize: '11px' // fill: theme.palette.text.primary,
+
+    },
+    majorTick: {
+      stroke: '#555' // stroke: theme.palette.text.secondary,
+
+    },
+    minorTick: {
+      stroke: '#999' // stroke: theme.palette.text.hint,
+
+    }
+  };
+});
+
+function Ruler(_ref) {
+  var start = _ref.start,
+      end = _ref.end,
+      bpPerPx = _ref.bpPerPx,
+      reversed = _ref.reversed,
+      major = _ref.major,
+      minor = _ref.minor;
+  var classes = useStyles();
+  var ticks = (0, _util.makeTicks)(start, end, bpPerPx, major, minor);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (tick) {
+    var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+    return /*#__PURE__*/_react["default"].createElement("line", {
+      key: tick.base,
+      x1: x,
+      x2: x,
+      y1: 0,
+      y2: tick.type === 'major' ? 6 : 4,
+      strokeWidth: 1,
+      stroke: tick.type === 'major' ? '#555' : '#999',
+      className: tick.type === 'major' ? classes.majorTick : classes.minorTick,
+      "data-bp": tick.base
+    });
+  }), ticks.filter(function (tick) {
+    return tick.type === 'major';
+  }).map(function (tick) {
+    var x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
+    return /*#__PURE__*/_react["default"].createElement("text", {
+      x: x - 3,
+      y: 7 + 11,
+      key: "label-".concat(tick.base),
+      style: {
+        fontSize: '11px'
+      },
+      className: classes.majorTickLabel
+    }, mathPower(tick.base + 1));
+  }));
+}
+
+Ruler.propTypes = {
+  start: _propTypes["default"].number.isRequired,
+  end: _propTypes["default"].number.isRequired,
+  bpPerPx: _propTypes["default"].number.isRequired,
+  reversed: _propTypes["default"].bool,
+  major: _propTypes["default"].bool,
+  minor: _propTypes["default"].bool
+};
+Ruler.defaultProps = {
+  reversed: false,
+  major: true,
+  minor: true
+};
+
+var _default = (0, _mobxReact.observer)(Ruler);
+
+exports["default"] = _default;