@jbrowse/plugin-linear-genome-view 1.7.8 → 1.7.11

package/dist/LinearGenomeView/components/ImportForm.js

@@ -11,8 +11,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -35,6 +33,8 @@ var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
 var _RefNameAutocomplete = _interopRequireDefault(require("./RefNameAutocomplete"));
 
+var _util2 = require("./util");
+
 var _ = require("..");
 
 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); }
@@ -98,106 +98,68 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
 
   var option = new _BaseResults.default({
     label: value
-  });
-
-  function fetchResults(_x, _x2) {
-    return _fetchResults.apply(this, arguments);
-  } // gets a string as input, or use stored option results from previous query,
+  }); // gets a string as input, or use stored option results from previous query,
   // then re-query and
   // 1) if it has multiple results: pop a dialog
   // 2) if it's a single result navigate to it
   // 3) else assume it's a locstring and navigate to it
 
-
-  function _fetchResults() {
-    _fetchResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query, searchType) {
-      var _assembly$allRefNames;
-
-      var textSearchResults, refNameResults;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!textSearchManager) {
-                console.warn('No text search manager');
-              }
-
-              _context.next = 3;
-              return textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
-                queryString: query,
-                searchType: searchType
-              }, searchScope, rankSearchResults);
-
-            case 3:
-              textSearchResults = _context.sent;
-              refNameResults = assembly === null || assembly === void 0 ? void 0 : (_assembly$allRefNames = assembly.allRefNames) === null || _assembly$allRefNames === void 0 ? void 0 : _assembly$allRefNames.filter(function (refName) {
-                return refName.startsWith(query);
-              }).map(function (r) {
-                return new _BaseResults.default({
-                  label: r
-                });
-              }).slice(0, 10);
-              return _context.abrupt("return", [].concat((0, _toConsumableArray2.default)(refNameResults || []), (0, _toConsumableArray2.default)(textSearchResults || [])));
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _fetchResults.apply(this, arguments);
-  }
-
-  function handleSelectedRegion(_x3) {
+  function handleSelectedRegion(_x) {
     return _handleSelectedRegion.apply(this, arguments);
   }
 
   function _handleSelectedRegion() {
-    _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(input) {
+    _handleSelectedRegion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(input) {
       var trackId, location, _location$split, _location$split2, ref, rest, allRefs, results;
 
-      return _regenerator.default.wrap(function _callee2$(_context2) {
+      return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context.prev = _context.next) {
             case 0:
               if (option) {
-                _context2.next = 2;
+                _context.next = 2;
                 break;
               }
 
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
 
             case 2:
               trackId = option.getTrackId();
               location = input || option.getLocation() || '';
               _location$split = location.split(':'), _location$split2 = (0, _slicedToArray2.default)(_location$split, 2), ref = _location$split2[0], rest = _location$split2[1];
               allRefs = (assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) || [];
-              _context2.prev = 6;
+              _context.prev = 6;
 
               if (!(allRefs.includes(location) || allRefs.includes(ref) && rest !== undefined && !Number.isNaN(parseInt(rest, 10)))) {
-                _context2.next = 11;
+                _context.next = 11;
                 break;
               }
 
               model.navToLocString(location, selectedAsm);
-              _context2.next = 22;
+              _context.next = 22;
               break;
 
             case 11:
-              _context2.next = 13;
-              return fetchResults(input, 'exact');
+              _context.next = 13;
+              return (0, _util2.fetchResults)({
+                queryString: input,
+                searchType: 'exact',
+                searchScope: searchScope,
+                rankSearchResults: rankSearchResults,
+                textSearchManager: textSearchManager,
+                assembly: assembly
+              });
 
             case 13:
-              results = _context2.sent;
+              results = _context.sent;
 
               if (!(results.length > 1)) {
-                _context2.next = 19;
+                _context.next = 19;
                 break;
               }
 
               model.setSearchResults(results, input.toLowerCase());
-              return _context2.abrupt("return");
+              return _context.abrupt("return");
 
             case 19:
               if (results.length === 1) {
@@ -213,21 +175,21 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
               }
 
             case 22:
-              _context2.next = 28;
+              _context.next = 28;
               break;
 
             case 24:
-              _context2.prev = 24;
-              _context2.t0 = _context2["catch"](6);
-              console.error(_context2.t0);
-              session.notify("".concat(_context2.t0), 'warning');
+              _context.prev = 24;
+              _context.t0 = _context["catch"](6);
+              console.error(_context.t0);
+              session.notify("".concat(_context.t0), 'warning');
 
             case 28:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
         }
-      }, _callee2, null, [[6, 24]]);
+      }, _callee, null, [[6, 24]]);
     }));
     return _handleSelectedRegion.apply(this, arguments);
   }
@@ -276,7 +238,15 @@ var ImportForm = (0, _mobxReact.observer)(function (_ref) {
       color: 'red'
     }
   }) : value ? /*#__PURE__*/_react.default.createElement(_RefNameAutocomplete.default, {
-    fetchResults: fetchResults,
+    fetchResults: function fetchResults(queryString) {
+      return (0, _util2.fetchResults)({
+        queryString: queryString,
+        assembly: assembly,
+        textSearchManager: textSearchManager,
+        rankSearchResults: rankSearchResults,
+        searchScope: searchScope
+      });
+    },
     model: model,
     assemblyName: assemblyError ? undefined : selectedAsm,
     value: value // note: minWidth 270 accomodates full width of helperText

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -109,7 +109,7 @@ var LinearGenomeView = (0, _mobxReact.observer)(function (_ref) {
   }, !tracks.length ? /*#__PURE__*/_react.default.createElement(_core.Paper, {
     variant: "outlined",
     className: classes.note
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "No tracks active."), /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, !model.hideNoTracksActive ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "No tracks active."), /*#__PURE__*/_react.default.createElement(_core.Button, {
     variant: "contained",
     color: "primary",
     onClick: model.activateTrackSelector,
@@ -117,7 +117,11 @@ var LinearGenomeView = (0, _mobxReact.observer)(function (_ref) {
       zIndex: 1000
     },
     startIcon: /*#__PURE__*/_react.default.createElement(_Icons.TrackSelector, null)
-  }, "Open track selector")) : tracks.map(function (track) {
+  }, "Open track selector")) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '48px'
+    }
+  })) : tracks.map(function (track) {
     return /*#__PURE__*/_react.default.createElement(_TrackContainer.default, {
       key: track.id,
       model: model,

package/dist/LinearGenomeView/components/LinearGenomeView.test.js

@@ -129,7 +129,7 @@ describe('<LinearGenomeView />', function () {
 
           case 9:
             _context2.next = 11;
-            return findByText('100 bp');
+            return findByText('100bp');
 
           case 11:
             expect(container.firstChild).toMatchSnapshot();
@@ -215,7 +215,7 @@ describe('<LinearGenomeView />', function () {
 
           case 10:
             _context3.next = 12;
-            return findByText('798 bp');
+            return findByText('798bp');
 
           case 12:
             _context3.next = 14;

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

@@ -18,7 +18,10 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         error: Error | undefined;
         regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
         refNameAliases: {
-            [key: string]: string;
+            [x: string]: string;
+        } | undefined;
+        lowerCaseRefNameAliases: {
+            [x: string]: string;
         } | undefined;
         cytobands: import("@jbrowse/core/util").Feature[] | undefined;
     } & {
@@ -37,17 +40,22 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         isValidRefName(refName: string): boolean;
     } & {
         setLoading(): void;
-        setLoaded({ adapterRegionsWithAssembly, refNameAliases, cytobands, }: {
+        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: {
             adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
             refNameAliases: {
                 [x: string]: string;
             };
+            lowerCaseRefNameAliases: {
+                [x: string]: string;
+            };
             cytobands: import("@jbrowse/core/util").Feature[];
         }): void;
         setError(e: Error): void;
         setRegions(regions: import("@jbrowse/core/util").Region[]): void;
         setRefNameAliases(refNameAliases: {
             [x: string]: string;
+        }, lowerCaseRefNameAliases: {
+            [x: string]: string;
         }): void;
         setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
         afterAttach(): void;
@@ -72,7 +80,10 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         error: Error | undefined;
         regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
         refNameAliases: {
-            [key: string]: string;
+            [x: string]: string;
+        } | undefined;
+        lowerCaseRefNameAliases: {
+            [x: string]: string;
         } | undefined;
         cytobands: import("@jbrowse/core/util").Feature[] | undefined;
     } & {
@@ -91,17 +102,22 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         isValidRefName(refName: string): boolean;
     } & {
         setLoading(): void;
-        setLoaded({ adapterRegionsWithAssembly, refNameAliases, cytobands, }: {
+        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: {
             adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
             refNameAliases: {
                 [x: string]: string;
             };
+            lowerCaseRefNameAliases: {
+                [x: string]: string;
+            };
             cytobands: import("@jbrowse/core/util").Feature[];
         }): void;
         setError(e: Error): void;
         setRegions(regions: import("@jbrowse/core/util").Region[]): void;
         setRefNameAliases(refNameAliases: {
             [x: string]: string;
+        }, lowerCaseRefNameAliases: {
+            [x: string]: string;
         }): void;
         setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
         afterAttach(): void;
@@ -122,7 +138,7 @@ declare const Cytobands: ({ overview, block, assembly, }: {
         }>;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
     block: ContentBlock;
-}) => JSX.Element | null;
+}) => JSX.Element;
 declare function OverviewScaleBar({ model, children, }: {
     model: LGV;
     children: React.ReactNode;

package/dist/LinearGenomeView/components/OverviewScaleBar.js

@@ -66,7 +66,6 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
     },
     scaleBarLabel: {
       height: _.HEADER_OVERVIEW_HEIGHT,
-      width: 1,
       position: 'absolute',
       display: 'flex',
       justifyContent: 'center',
@@ -151,15 +150,11 @@ var colorMap = {
   stalk: 'rgb(127,127,127)',
   acen: '#800'
 };
-var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
+
+function getCytobands(assembly, refName) {
   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 (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'),
@@ -167,8 +162,18 @@ var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
       type: f.get('type')
     };
   }).filter(function (f) {
-    return f.refName === block.refName;
-  }).map(function (f) {
+    return f.refName === refName;
+  })) || [];
+}
+
+var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
+  var overview = _ref2.overview,
+      block = _ref2.block,
+      assembly = _ref2.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,
@@ -185,9 +190,9 @@ var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
   var lcap = reversed ? arr.length - 1 : 0;
   var rcap = reversed ? 0 : arr.length - 1;
   var firstCent = true;
-  return cytobands ? /*#__PURE__*/_react.default.createElement("g", {
+  return /*#__PURE__*/_react.default.createElement("g", {
     transform: "translate(-".concat(offsetPx, ")")
-  }, cytobands.map(function (_ref3, index) {
+  }, coords.map(function (_ref3, index) {
     var _ref4 = (0, _slicedToArray2.default)(_ref3, 3),
         start = _ref4[0],
         end = _ref4[1],
@@ -234,7 +239,7 @@ var Cytobands = (0, _mobxReact.observer)(function (_ref2) {
         fill: colorMap[type]
       });
     }
-  })) : null;
+  }));
 });
 exports.Cytobands = Cytobands;
 var OverviewBox = (0, _mobxReact.observer)(function (_ref5) {
@@ -244,6 +249,7 @@ var OverviewBox = (0, _mobxReact.observer)(function (_ref5) {
       overview = _ref5.overview;
   var classes = useStyles();
   var cytobandOffset = model.cytobandOffset,
+      bpPerPx = model.bpPerPx,
       showCytobands = model.showCytobands;
   var start = block.start,
       end = block.end,
@@ -266,20 +272,21 @@ var OverviewBox = (0, _mobxReact.observer)(function (_ref5) {
     tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
   }
 
+  var canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Typography, {
     style: {
       left: block.offsetPx + 3,
-      color: showCytobands ? 'black' : refNameColor
+      color: canDisplayCytobands ? '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),
+    className: (0, _clsx.default)(classes.scaleBarContig, canDisplayCytobands ? undefined : reversed ? classes.scaleBarContigReverse : classes.scaleBarContigForward, !canDisplayCytobands ? classes.scaleBarBorder : undefined),
     style: {
       left: block.offsetPx + cytobandOffset,
       width: block.widthPx,
       borderColor: refNameColor
     }
-  }, !showCytobands ? tickLabels.map(function (tickLabel, labelIdx) {
+  }, !canDisplayCytobands ? tickLabels.map(function (tickLabel, labelIdx) {
     return /*#__PURE__*/_react.default.createElement(_core.Typography, {
       key: "".concat(JSON.stringify(block), "-").concat(tickLabel, "-").concat(labelIdx),
       className: classes.scaleBarLabel,
@@ -289,8 +296,8 @@ var OverviewBox = (0, _mobxReact.observer)(function (_ref5) {
         pointerEvents: 'none',
         color: refNameColor
       }
-    }, tickLabel.toLocaleString('en-US'));
-  }) : null, showCytobands ? /*#__PURE__*/_react.default.createElement("svg", {
+    }, (0, _util.getTickDisplayStr)(tickLabel, bpPerPx));
+  }) : null, canDisplayCytobands ? /*#__PURE__*/_react.default.createElement("svg", {
     style: {
       width: '100%'
     }

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

@@ -21,6 +21,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
         hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<"hierarchical">, [undefined]>;
         trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -52,6 +53,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     } & {
         readonly width: number;
         readonly interRegionPaddingWidth: number;
+        readonly assemblyNames: string[];
     } & {
         readonly assemblyErrors: string;
         readonly assembliesInitialized: boolean;
@@ -71,7 +73,6 @@ declare const _default: React.ForwardRefExoticComponent<{
         readonly minOffset: number;
         readonly displayedRegionsTotalPx: number;
         renderProps(): any;
-        readonly assemblyNames: string[];
         searchScope(assemblyName: string): {
             assemblyName: string;
             includeAggregateIndexes: boolean;
@@ -117,6 +118,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         setError(error: Error | undefined): void;
         toggleHeader(): void;
         toggleHeaderOverview(): void;
+        toggleNoTracksActive(): void;
         scrollTo(offsetPx: number): number;
         zoomTo(bpPerPx: number): number;
         setOffsets(left: import("..").BpOffset | undefined, right: import("..").BpOffset | undefined): void;
@@ -218,6 +220,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
         hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<"hierarchical">, [undefined]>;
         trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
         showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -249,6 +252,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     } & {
         readonly width: number;
         readonly interRegionPaddingWidth: number;
+        readonly assemblyNames: string[];
     } & {
         readonly assemblyErrors: string;
         readonly assembliesInitialized: boolean;
@@ -268,7 +272,6 @@ declare const _default: React.ForwardRefExoticComponent<{
         readonly minOffset: number;
         readonly displayedRegionsTotalPx: number;
         renderProps(): any;
-        readonly assemblyNames: string[];
         searchScope(assemblyName: string): {
             assemblyName: string;
             includeAggregateIndexes: boolean;
@@ -314,6 +317,7 @@ declare const _default: React.ForwardRefExoticComponent<{
         setError(error: Error | undefined): void;
         toggleHeader(): void;
         toggleHeaderOverview(): void;
+        toggleNoTracksActive(): void;
         scrollTo(offsetPx: number): number;
         zoomTo(bpPerPx: number): number;
         setOffsets(left: import("..").BpOffset | undefined, right: import("..").BpOffset | undefined): void;

package/dist/LinearGenomeView/components/ScaleBar.js

@@ -27,6 +27,8 @@ var _Block = require("../../BaseLinearDisplay/components/Block");
 
 var _util = require("../util");
 
+var _util2 = require("@jbrowse/core/util");
+
 var _excluded = ["model", "style", "className"];
 
 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; }
@@ -100,16 +102,19 @@ var RenderedRefNameLabels = (0, _mobxReact.observer)(function (_ref) {
 var RenderedScaleBarLabels = (0, _mobxReact.observer)(function (_ref2) {
   var model = _ref2.model;
   var classes = useStyles();
+  var bpPerPx = model.bpPerPx;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, model.staticBlocks.map(function (block, index) {
     if (block instanceof _blockTypes.ContentBlock) {
-      var ticks = (0, _util.makeTicks)(block.start, block.end, model.bpPerPx, true, false);
+      var start = block.start,
+          end = block.end;
+      var ticks = (0, _util.makeTicks)(start, end, bpPerPx, true, false);
       return /*#__PURE__*/_react.default.createElement(_Block.ContentBlock, {
         key: "".concat(block.key, "-").concat(index),
         block: block
       }, ticks.map(function (tick) {
         if (tick.type === 'major') {
           var x = (block.reversed ? block.end - tick.base : tick.base - block.start) / model.bpPerPx;
-          var baseNumber = (tick.base + 1).toLocaleString('en-US');
+          var baseNumber = tick.base + 1;
           return /*#__PURE__*/_react.default.createElement("div", {
             key: tick.base,
             className: classes.tick,
@@ -118,7 +123,7 @@ var RenderedScaleBarLabels = (0, _mobxReact.observer)(function (_ref2) {
             }
           }, baseNumber ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
             className: classes.majorTickLabel
-          }, baseNumber) : null);
+          }, (0, _util2.getTickDisplayStr)(baseNumber, bpPerPx)) : null);
         }
 
         return null;