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

package/dist/LinearGenomeView/util.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chooseGridPitch = chooseGridPitch;
+exports.makeTicks = makeTicks;
+
+/**
+ * Given a scale ( bp/px ) and minimum distances (px) between major and minor
+ * gridlines, return an object like `{ majorPitch: bp, minorPitch: bp }` giving
+ * the gridline pitches to use.
+ */
+function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
+  scale = Math.abs(scale);
+  var minMajorPitchBp = minMajorPitchPx * scale;
+  var majorMagnitude = parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
+  var majorPitch = Math.pow(10, majorMagnitude);
+
+  while (majorPitch < minMajorPitchBp) {
+    majorPitch *= 2;
+
+    if (majorPitch >= minMajorPitchBp) {
+      break;
+    }
+
+    majorPitch *= 2.5;
+  }
+
+  majorPitch = Math.max(majorPitch, 5);
+  var majorPitchPx = majorPitch / scale;
+  var minorPitch = 0;
+
+  if (!(majorPitch % 10) && majorPitchPx / 10 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 10;
+  } else if (!(majorPitch % 5) && majorPitchPx / 5 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 5;
+  } else if (!(majorPitch % 2) && majorPitchPx / 2 >= minMinorPitchPx) {
+    minorPitch = majorPitch / 2;
+  }
+
+  return {
+    majorPitch: majorPitch,
+    minorPitch: minorPitch
+  };
+}
+
+function makeTicks(start, end, bpPerPx) {
+  var emitMajor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var emitMinor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var gridPitch = chooseGridPitch(bpPerPx, 60, 15);
+  var minBase = start;
+  var maxBase = end;
+
+  if (minBase === null || maxBase === null) {
+    return [];
+  }
+
+  if (bpPerPx < 0) {
+    ;
+    var _ref = [maxBase, minBase];
+    minBase = _ref[0];
+    maxBase = _ref[1];
+  } // add 20px additional on the right and left to allow us to draw the ends
+  // of labels that lie a little outside our region
+
+
+  minBase -= Math.abs(20 * bpPerPx) - 1;
+  maxBase += Math.abs(20 * bpPerPx) + 1;
+  var iterPitch = gridPitch.minorPitch || gridPitch.majorPitch;
+  var index = 0;
+  var ticks = [];
+
+  for (var base = Math.ceil(minBase / iterPitch) * iterPitch; base < maxBase; base += iterPitch) {
+    if (emitMinor && base % (gridPitch.majorPitch * 2)) {
+      ticks.push({
+        type: 'minor',
+        base: base - 1,
+        index: index
+      });
+      index += 1;
+    } else if (emitMajor && !(base % (gridPitch.majorPitch * 2))) {
+      ticks.push({
+        type: 'major',
+        base: base - 1,
+        index: index
+      });
+      index += 1;
+    }
+  }
+
+  return ticks;
+}

package/dist/LinearGenomeView/util.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _util = require("./util");
+
+describe('tick calculation', function () {
+  test('one', function () {
+    var result = Array.from((0, _util.makeTicks)(0, 10, 0.05));
+    expect(result).toEqual([{
+      type: 'major',
+      base: -1,
+      index: 0
+    }, {
+      type: 'minor',
+      base: 0,
+      index: 1
+    }, {
+      type: 'minor',
+      base: 1,
+      index: 2
+    }, {
+      type: 'minor',
+      base: 2,
+      index: 3
+    }, {
+      type: 'minor',
+      base: 3,
+      index: 4
+    }, {
+      type: 'minor',
+      base: 4,
+      index: 5
+    }, {
+      type: 'minor',
+      base: 5,
+      index: 6
+    }, {
+      type: 'minor',
+      base: 6,
+      index: 7
+    }, {
+      type: 'minor',
+      base: 7,
+      index: 8
+    }, {
+      type: 'minor',
+      base: 8,
+      index: 9
+    }, {
+      type: 'major',
+      base: 9,
+      index: 10
+    }, {
+      type: 'minor',
+      base: 10,
+      index: 11
+    }]);
+  });
+  test('two', function () {
+    var result = Array.from((0, _util.makeTicks)(0, 50, 1));
+    expect(result).toEqual([{
+      type: 'major',
+      base: -1,
+      index: 0
+    }, {
+      type: 'minor',
+      base: 19,
+      index: 1
+    }, {
+      type: 'minor',
+      base: 39,
+      index: 2
+    }, {
+      type: 'minor',
+      base: 59,
+      index: 3
+    }]);
+  });
+});

package/dist/index.js

@@ -1,8 +1,295 @@
+"use strict";
 
-'use strict'
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./plugin-linear-genome-view.cjs.production.min.js')
-} else {
-  module.exports = require('./plugin-linear-genome-view.cjs.development.js')
-}
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseLinearDisplay", {
+  enumerable: true,
+  get: function get() {
+    return _BaseLinearDisplay.BaseLinearDisplay;
+  }
+});
+Object.defineProperty(exports, "BaseLinearDisplayComponent", {
+  enumerable: true,
+  get: function get() {
+    return _BaseLinearDisplay.BaseLinearDisplayComponent;
+  }
+});
+Object.defineProperty(exports, "RefNameAutocomplete", {
+  enumerable: true,
+  get: function get() {
+    return _LinearGenomeView.RefNameAutocomplete;
+  }
+});
+Object.defineProperty(exports, "SearchBox", {
+  enumerable: true,
+  get: function get() {
+    return _LinearGenomeView.SearchBox;
+  }
+});
+Object.defineProperty(exports, "baseLinearDisplayConfigSchema", {
+  enumerable: true,
+  get: function get() {
+    return _BaseLinearDisplay.baseLinearDisplayConfigSchema;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "linearBareDisplayConfigSchemaFactory", {
+  enumerable: true,
+  get: function get() {
+    return _LinearBareDisplay.configSchemaFactory;
+  }
+});
+Object.defineProperty(exports, "linearBasicDisplayConfigSchemaFactory", {
+  enumerable: true,
+  get: function get() {
+    return _LinearBasicDisplay.configSchema;
+  }
+});
+Object.defineProperty(exports, "linearBasicDisplayModelFactory", {
+  enumerable: true,
+  get: function get() {
+    return _LinearBasicDisplay.modelFactory;
+  }
+});
+Object.defineProperty(exports, "renderToSvg", {
+  enumerable: true,
+  get: function get() {
+    return _LinearGenomeView.renderToSvg;
+  }
+});
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _mobx = require("mobx");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _models = require("@jbrowse/core/pluggableElementTypes/models");
+
+var _TrackType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/TrackType"));
+
+var _DisplayType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/DisplayType"));
+
+var _ViewType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
+
+var _Plugin2 = _interopRequireDefault(require("@jbrowse/core/Plugin"));
+
+var _util = require("@jbrowse/core/util");
+
+var _LineStyle = _interopRequireDefault(require("@material-ui/icons/LineStyle"));
+
+var _BaseLinearDisplay = require("./BaseLinearDisplay");
+
+var _LinearBareDisplay = require("./LinearBareDisplay");
+
+var _LinearGenomeView = require("./LinearGenomeView");
+
+var _LinearBasicDisplay = require("./LinearBasicDisplay");
+
+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; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var LinearGenomeViewPlugin = /*#__PURE__*/function (_Plugin) {
+  (0, _inherits2["default"])(LinearGenomeViewPlugin, _Plugin);
+
+  var _super = _createSuper(LinearGenomeViewPlugin);
+
+  function LinearGenomeViewPlugin() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, LinearGenomeViewPlugin);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "name", 'LinearGenomeViewPlugin');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "exports", {
+      BaseLinearDisplayComponent: _BaseLinearDisplay.BaseLinearDisplayComponent,
+      BaseLinearDisplay: _BaseLinearDisplay.BaseLinearDisplay,
+      baseLinearDisplayConfigSchema: _BaseLinearDisplay.baseLinearDisplayConfigSchema
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(LinearGenomeViewPlugin, [{
+    key: "install",
+    value: function install(pluginManager) {
+      pluginManager.addTrackType(function () {
+        var configSchema = (0, _configuration.ConfigurationSchema)('FeatureTrack', {}, {
+          baseConfiguration: (0, _models.createBaseTrackConfig)(pluginManager),
+          explicitIdentifier: 'trackId'
+        });
+        return new _TrackType["default"]({
+          name: 'FeatureTrack',
+          configSchema: configSchema,
+          stateModel: (0, _models.createBaseTrackModel)(pluginManager, 'FeatureTrack', configSchema)
+        });
+      });
+      pluginManager.addTrackType(function () {
+        var configSchema = (0, _configuration.ConfigurationSchema)('BasicTrack', {}, {
+          baseConfiguration: (0, _models.createBaseTrackConfig)(pluginManager),
+          explicitIdentifier: 'trackId'
+        });
+        return new _TrackType["default"]({
+          name: 'BasicTrack',
+          configSchema: configSchema,
+          stateModel: (0, _models.createBaseTrackModel)(pluginManager, 'BasicTrack', configSchema)
+        });
+      });
+      pluginManager.addDisplayType(function () {
+        var configSchema = (0, _LinearBareDisplay.configSchemaFactory)(pluginManager);
+        return new _DisplayType["default"]({
+          name: 'LinearBareDisplay',
+          configSchema: configSchema,
+          stateModel: (0, _LinearBareDisplay.stateModelFactory)(configSchema),
+          trackType: 'BasicTrack',
+          viewType: 'LinearGenomeView',
+          ReactComponent: _BaseLinearDisplay.BaseLinearDisplayComponent
+        });
+      });
+      pluginManager.addDisplayType(function () {
+        var configSchema = (0, _LinearBasicDisplay.configSchema)(pluginManager);
+        return new _DisplayType["default"]({
+          name: 'LinearBasicDisplay',
+          configSchema: configSchema,
+          stateModel: (0, _LinearBasicDisplay.modelFactory)(configSchema),
+          trackType: 'FeatureTrack',
+          viewType: 'LinearGenomeView',
+          ReactComponent: _BaseLinearDisplay.BaseLinearDisplayComponent
+        });
+      });
+      pluginManager.addViewType(function () {
+        return new _ViewType["default"]({
+          name: 'LinearGenomeView',
+          stateModel: (0, _LinearGenomeView.stateModelFactory)(pluginManager),
+          ReactComponent: /*#__PURE__*/(0, _react.lazy)(function () {
+            return Promise.resolve().then(function () {
+              return _interopRequireWildcard(require('./LinearGenomeView/components/LinearGenomeView'));
+            });
+          })
+        });
+      });
+      pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView',
+      /*#__PURE__*/
+      // @ts-ignore
+      function () {
+        var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref) {
+          var session, assembly, loc, _ref$tracks, tracks, assemblyManager, view, asm, idsNotFound;
+
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  session = _ref.session, assembly = _ref.assembly, loc = _ref.loc, _ref$tracks = _ref.tracks, tracks = _ref$tracks === void 0 ? [] : _ref$tracks;
+                  assemblyManager = session.assemblyManager;
+                  view = session.addView('LinearGenomeView', {});
+                  _context.next = 5;
+                  return (0, _mobx.when)(function () {
+                    return !!view.volatileWidth;
+                  });
+
+                case 5:
+                  if (assembly) {
+                    _context.next = 7;
+                    break;
+                  }
+
+                  throw new Error('No assembly provided when launching linear genome view');
+
+                case 7:
+                  _context.next = 9;
+                  return assemblyManager.waitForAssembly(assembly);
+
+                case 9:
+                  asm = _context.sent;
+
+                  if (asm) {
+                    _context.next = 12;
+                    break;
+                  }
+
+                  throw new Error("Assembly \"".concat(assembly, "\" not found when launching linear genome view"));
+
+                case 12:
+                  view.navToLocString(loc, assembly);
+                  idsNotFound = [];
+                  tracks.forEach(function (track) {
+                    try {
+                      view.showTrack(track);
+                    } catch (e) {
+                      if ("".concat(e).match('Could not resolve identifier')) {
+                        idsNotFound.push(track);
+                      } else {
+                        throw e;
+                      }
+                    }
+                  });
+
+                  if (!idsNotFound.length) {
+                    _context.next = 17;
+                    break;
+                  }
+
+                  throw new Error("Could not resolve identifiers: ".concat(idsNotFound.join(',')));
+
+                case 17:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }());
+    }
+  }, {
+    key: "configure",
+    value: function configure(pluginManager) {
+      if ((0, _util.isAbstractMenuManager)(pluginManager.rootModel)) {
+        pluginManager.rootModel.appendToSubMenu(['Add'], {
+          label: 'Linear genome view',
+          icon: _LineStyle["default"],
+          onClick: function onClick(session) {
+            session.addView('LinearGenomeView', {});
+          }
+        });
+      }
+    }
+  }]);
+  return LinearGenomeViewPlugin;
+}(_Plugin2["default"]);
+
+exports["default"] = LinearGenomeViewPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -18,15 +18,12 @@
   "distMain": "dist/index.js",
   "srcMain": "src/index.ts",
   "main": "dist/index.js",
-  "distModule": "dist/plugin-linear-genome-view.esm.js",
-  "module": "dist/plugin-linear-genome-view.esm.js",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "start": "tsdx watch --verbose --noClean",
-    "build": "tsdx build",
+    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
     "test": "cd ../..; jest plugins/linear-genome-view",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
@@ -44,8 +41,7 @@
     "is-object": "^1.0.1",
     "json-stable-stringify": "^1.0.1",
     "normalize-wheel": "^1.0.1",
-    "react-popper": "^2.0.0",
-    "react-sizeme": "^3.0.2"
+    "react-popper": "^2.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^1.0.0",
@@ -61,5 +57,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f6c3d4edfadc26f7ac635a2fa7259f50f0c7e5e3"
+  "gitHead": "cc13844074d11881d211342a6a7eea113561b70b"
 }

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -8,6 +8,7 @@ import {
   isAbortException,
   getContainingView,
   getSession,
+  getViewParams,
   isSelectionContainer,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
@@ -623,6 +624,7 @@ export const BaseLinearDisplay = types
           return rendererType.renderInClient(rpcManager, {
             ...renderArgs,
             ...renderProps,
+            viewParams: getViewParams(self, true),
             exportSVG: opts,
           })
         }),

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -1,20 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
 import { types, getParent, isAlive, cast, Instance } from 'mobx-state-tree'
 import { readConfObject } from '@jbrowse/core/configuration'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import {
+  assembleLocString,
+  getSession,
+  getContainingDisplay,
+  getViewParams,
+  makeAbortableReaction,
+  Feature,
+} from '@jbrowse/core/util'
 import { Region } from '@jbrowse/core/util/types/mst'
 import {
   AbstractDisplayModel,
   isRetryException,
 } from '@jbrowse/core/util/types'
-import React from 'react'
 
-import {
-  assembleLocString,
-  makeAbortableReaction,
-  getSession,
-  getContainingDisplay,
-} from '@jbrowse/core/util'
 import {
   getTrackAssemblyNames,
   getRpcSessionId,
@@ -296,6 +297,7 @@ async function renderBlockEffect(
     await rendererType.renderInClient(rpcManager, {
       ...renderArgs,
       ...renderProps,
+      viewParams: getViewParams(self),
       signal,
     })
   return {

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -61,7 +61,7 @@ function SetMaxHeightDlg(props: {
       <DialogContent className={classes.root}>
         <Typography>
           Set max height for the track. For example, you can increase this if
-          the layout says "Max height reached"
+          the layout says &quot;Max height reached&quot;
         </Typography>
         <TextField
           value={max}

package/src/LinearBasicDisplay/model.ts

@@ -1,10 +1,17 @@
 import { lazy } from 'react'
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import {
+  getConf,
+  ConfigurationReference,
+  AnyConfigurationSchemaType,
+} from '@jbrowse/core/configuration'
 import { getSession } from '@jbrowse/core/util'
 import { MenuItem } from '@jbrowse/core/ui'
-import VisibilityIcon from '@material-ui/icons/Visibility'
 import { types, getEnv, Instance } from 'mobx-state-tree'
-import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration/configurationSchema'
+
+// icons
+import VisibilityIcon from '@material-ui/icons/Visibility'
+
+// locals
 import { BaseLinearDisplay } from '../BaseLinearDisplay'
 
 const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
@@ -29,31 +36,23 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       },
 
       get showLabels() {
-        const showLabels = getConf(self, ['renderer', 'showLabels'])
-        return self.trackShowLabels !== undefined
-          ? self.trackShowLabels
-          : showLabels
+        return self.trackShowLabels ?? getConf(self, ['renderer', 'showLabels'])
       },
 
       get showDescriptions() {
-        const showDescriptions = getConf(self, ['renderer', 'showLabels'])
-        return self.trackShowDescriptions !== undefined
-          ? self.trackShowDescriptions
-          : showDescriptions
+        return (
+          self.trackShowDescriptions ??
+          getConf(self, ['renderer', 'showLabels'])
+        )
       },
 
       get maxHeight() {
-        const maxHeight = getConf(self, ['renderer', 'maxHeight'])
-        return self.trackMaxHeight !== undefined
-          ? self.trackMaxHeight
-          : maxHeight
+        return self.trackMaxHeight ?? getConf(self, ['renderer', 'maxHeight'])
       },
 
       get displayMode() {
         const displayMode = getConf(self, ['renderer', 'displayMode'])
-        return self.trackDisplayMode !== undefined
-          ? self.trackDisplayMode
-          : displayMode
+        return self.trackDisplayMode ?? displayMode
       },
       get rendererConfig() {
         const configBlob = getConf(self, ['renderer']) || {}

package/src/LinearGenomeView/components/Header.tsx

@@ -17,8 +17,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'
 // locals
 import {
   LinearGenomeViewModel,
-  SPACING,
   WIDGET_HEIGHT,
+  SPACING,
   HEADER_BAR_HEIGHT,
 } from '..'
 import OverviewScaleBar from './OverviewScaleBar'