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

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

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _rootModel = require("@jbrowse/web/src/rootModel");
+
+require("requestidlecallback-polyfill");
+
+var _LinearGenomeView = _interopRequireDefault(require("./LinearGenomeView"));
+
+jest.mock('@jbrowse/web/src/makeWorkerInstance', function () {
+  return function () {};
+});
+var assemblyConf = {
+  name: 'volMyt1',
+  sequence: {
+    trackId: 'sequenceConfigId',
+    type: 'ReferenceSequenceTrack',
+    adapter: {
+      type: 'FromConfigSequenceAdapter',
+      features: [{
+        refName: 'ctgA',
+        uniqueId: 'firstId',
+        start: 0,
+        end: 10,
+        seq: 'cattgttgcg'
+      }]
+    }
+  }
+};
+describe('<LinearGenomeView />', function () {
+  it('renders setup wizard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var session, model, _render, findByText;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            session = (0, _rootModel.createTestSession)();
+            session.addAssemblyConf(assemblyConf);
+            session.addView('LinearGenomeView', {
+              id: 'lgv'
+            });
+            model = session.views[0];
+            model.setWidth(800);
+            _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_LinearGenomeView["default"], {
+              model: model
+            })), findByText = _render.findByText;
+            expect(model.displayedRegions.length).toEqual(0);
+            _context.t0 = _react2.fireEvent;
+            _context.next = 10;
+            return findByText('Open');
+
+          case 10:
+            _context.t1 = _context.sent;
+
+            _context.t0.click.call(_context.t0, _context.t1);
+
+            _context.next = 14;
+            return (0, _react2.waitFor)(function () {
+              expect(model.displayedRegions.length).toEqual(1);
+            });
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders one track, one region', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var session, model, _render2, container, findByText;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            session = (0, _rootModel.createTestSession)();
+            session.addAssemblyConf(assemblyConf);
+            session.addTrackConf({
+              trackId: 'testConfig',
+              assemblyNames: ['volMyt1'],
+              name: 'Foo Track',
+              type: 'BasicTrack',
+              adapter: {
+                type: 'FromConfigAdapter',
+                features: []
+              }
+            });
+            session.addView('LinearGenomeView', {
+              type: 'LinearGenomeView',
+              id: 'lgv',
+              offsetPx: 0,
+              bpPerPx: 1,
+              tracks: [{
+                id: 'foo',
+                type: 'BasicTrack',
+                height: 20,
+                configuration: 'testConfig',
+                displays: [{
+                  type: 'LinearBareDisplay',
+                  configuration: 'testConfig-LinearBareDisplay'
+                }]
+              }],
+              displayedRegions: [{
+                assemblyName: 'volMyt1',
+                refName: 'ctgA',
+                start: 0,
+                end: 100
+              }]
+            });
+            model = session.views[0];
+            model.setWidth(800);
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_LinearGenomeView["default"], {
+              model: model
+            })), container = _render2.container, findByText = _render2.findByText;
+            _context2.next = 9;
+            return findByText('Foo Track');
+
+          case 9:
+            _context2.next = 11;
+            return findByText('100 bp');
+
+          case 11:
+            expect(container.firstChild).toMatchSnapshot();
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders two tracks, two regions', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var session, model, _render3, container, findByText, findAllByTestId;
+
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            session = (0, _rootModel.createTestSession)();
+            session.addAssemblyConf(assemblyConf);
+            session.addTrackConf({
+              trackId: 'testConfig',
+              name: 'Foo Track',
+              assemblyNames: ['volMyt1'],
+              type: 'BasicTrack',
+              adapter: {
+                type: 'FromConfigAdapter',
+                features: []
+              }
+            });
+            session.addTrackConf({
+              trackId: 'testConfig2',
+              name: 'Bar Track',
+              assemblyNames: ['volMyt1'],
+              type: 'BasicTrack',
+              adapter: {
+                type: 'FromConfigAdapter',
+                features: []
+              }
+            });
+            session.addView('LinearGenomeView', {
+              id: 'lgv',
+              offsetPx: 0,
+              bpPerPx: 1,
+              displayedRegions: [{
+                assemblyName: 'volMyt1',
+                refName: 'ctgA',
+                start: 0,
+                end: 100
+              }, {
+                assemblyName: 'volMyt1',
+                refName: 'ctgB',
+                start: 1000,
+                end: 2000
+              }],
+              tracks: [{
+                id: 'foo',
+                type: 'BasicTrack',
+                height: 20,
+                configuration: 'testConfig',
+                displays: [{
+                  type: 'LinearBareDisplay',
+                  configuration: 'testConfig-LinearBareDisplay'
+                }]
+              }, {
+                id: 'bar',
+                type: 'BasicTrack',
+                height: 20,
+                configuration: 'testConfig2',
+                displays: [{
+                  type: 'LinearBareDisplay',
+                  configuration: 'testConfig2-LinearBareDisplay'
+                }]
+              }]
+            });
+            model = session.views[0];
+            model.setWidth(800);
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_LinearGenomeView["default"], {
+              model: model
+            })), container = _render3.container, findByText = _render3.findByText, findAllByTestId = _render3.findAllByTestId;
+            _context3.next = 10;
+            return findByText('Foo Track');
+
+          case 10:
+            _context3.next = 12;
+            return findByText('798 bp');
+
+          case 12:
+            _context3.next = 14;
+            return findAllByTestId('svgfeatures');
+
+          case 14:
+            expect(container.firstChild).toMatchSnapshot();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});

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

@@ -1,4 +1,4 @@
-import { LinearGenomeViewModel, ExportSvgOptions } from '..';
-declare type LGV = LinearGenomeViewModel;
-export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
-export {};
+import { LinearGenomeViewModel, ExportSvgOptions } from '..';
+declare type LGV = LinearGenomeViewModel;
+export declare function renderToSvg(model: LGV, opts: ExportSvgOptions): Promise<string>;
+export {};

package/dist/LinearGenomeView/components/LinearGenomeViewSvg.js

@@ -0,0 +1,349 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderToSvg = renderToSvg;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _server = require("react-dom/server");
+
+var _mobx = require("mobx");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _util = require("@jbrowse/core/util");
+
+var _Base1DViewModel = _interopRequireDefault(require("@jbrowse/core/util/Base1DViewModel"));
+
+var _Ruler = _interopRequireDefault(require("./Ruler"));
+
+var _ = require("..");
+
+var _OverviewScaleBar = require("./OverviewScaleBar");
+
+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; }
+
+function ScaleBar(_ref) {
+  var model = _ref.model,
+      fontSize = _ref.fontSize;
+  var offsetPx = model.offsetPx,
+      _model$dynamicBlocks = model.dynamicBlocks,
+      totalWidthPx = _model$dynamicBlocks.totalWidthPxWithoutBorders,
+      totalBp = _model$dynamicBlocks.totalBp;
+  var displayBp = (0, _util.getBpDisplayStr)(totalBp);
+  var x0 = Math.max(-offsetPx, 0);
+  var x1 = x0 + totalWidthPx;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("line", {
+    x1: x0,
+    x2: x1,
+    y1: 10,
+    y2: 10,
+    stroke: "black"
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: x0,
+    x2: x0,
+    y1: 5,
+    y2: 15,
+    stroke: "black"
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: x1,
+    x2: x1,
+    y1: 5,
+    y2: 15,
+    stroke: "black"
+  }), /*#__PURE__*/_react["default"].createElement("text", {
+    x: x0 + (x1 - x0) / 2,
+    y: fontSize * 2,
+    textAnchor: "middle",
+    fontSize: fontSize
+  }, displayBp));
+}
+
+function SVGRuler(_ref2) {
+  var model = _ref2.model,
+      fontSize = _ref2.fontSize,
+      width = _ref2.width;
+  var contentBlocks = model.dynamicBlocks.contentBlocks,
+      viewOffsetPx = model.offsetPx,
+      bpPerPx = model.bpPerPx;
+  var renderRuler = contentBlocks.length < 5;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+    id: "clip-ruler"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: 0,
+    y: 0,
+    width: width,
+    height: 20
+  }))), contentBlocks.map(function (block) {
+    var key = block.key,
+        start = block.start,
+        end = block.end,
+        reversed = block.reversed,
+        offsetPx = block.offsetPx,
+        refName = block.refName;
+    var offsetLeft = offsetPx - viewOffsetPx;
+    return /*#__PURE__*/_react["default"].createElement("g", {
+      key: "".concat(key),
+      transform: "translate(".concat(offsetLeft, " 0)")
+    }, /*#__PURE__*/_react["default"].createElement("text", {
+      x: offsetLeft / bpPerPx,
+      y: fontSize,
+      fontSize: fontSize
+    }, refName), renderRuler ? /*#__PURE__*/_react["default"].createElement("g", {
+      transform: "translate(0 20)",
+      clipPath: "url(#clip-ruler)"
+    }, /*#__PURE__*/_react["default"].createElement(_Ruler["default"], {
+      start: start,
+      end: end,
+      bpPerPx: bpPerPx,
+      reversed: reversed
+    })) : /*#__PURE__*/_react["default"].createElement("line", {
+      strokeWidth: 1,
+      stroke: "black",
+      x1: start / bpPerPx,
+      x2: end / bpPerPx,
+      y1: 20,
+      y2: 20
+    }));
+  }));
+}
+
+var fontSize = 15;
+var rulerHeight = 50;
+var textHeight = fontSize + 5;
+var paddingHeight = 20;
+var headerHeight = textHeight + 20;
+var cytobandHeightIfExists = 100;
+
+var totalHeight = function totalHeight(tracks) {
+  return tracks.reduce(function (accum, track) {
+    var display = track.displays[0];
+    return accum + display.height + paddingHeight + textHeight;
+  }, 0);
+}; // SVG component, ruler and assembly name
+
+
+var SVGHeader = function SVGHeader(_ref3) {
+  var model = _ref3.model;
+  var width = model.width,
+      assemblyNames = model.assemblyNames,
+      showCytobands = model.showCytobands,
+      displayedRegions = model.displayedRegions;
+
+  var _getSession = (0, _util.getSession)(model),
+      assemblyManager = _getSession.assemblyManager;
+
+  var assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
+  var assembly = assemblyManager.get(assemblyName);
+
+  var overview = _Base1DViewModel["default"].create({
+    displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+    interRegionPaddingWidth: 0,
+    minimumBlockWidth: model.minimumBlockWidth
+  });
+
+  var visibleRegions = model.dynamicBlocks.contentBlocks;
+  overview.setVolatileWidth(width);
+  overview.showAllRegions();
+  var block = overview.dynamicBlocks.contentBlocks[0];
+  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 cytobandHeight = showCytobands ? cytobandHeightIfExists : 0;
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    id: "header"
+  }, /*#__PURE__*/_react["default"].createElement("text", {
+    x: 0,
+    y: fontSize,
+    fontSize: fontSize
+  }, assemblyName), showCytobands ? /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(0 ".concat(rulerHeight, ")")
+  }, /*#__PURE__*/_react["default"].createElement(_OverviewScaleBar.Cytobands, {
+    overview: overview,
+    assembly: assembly,
+    block: block
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    stroke: "red",
+    fill: "rgb(255,0,0,0.1)",
+    width: Math.max(lastOverviewPx - firstOverviewPx, 0.5),
+    height: _.HEADER_OVERVIEW_HEIGHT - 1,
+    x: firstOverviewPx,
+    y: 0.5
+  }), /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(0,".concat(_.HEADER_OVERVIEW_HEIGHT, ")")
+  }, /*#__PURE__*/_react["default"].createElement(_OverviewScaleBar.Polygon, {
+    overview: overview,
+    model: model,
+    useOffset: false
+  }))) : null, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(0 ".concat(fontSize + cytobandHeight, ")")
+  }, /*#__PURE__*/_react["default"].createElement(ScaleBar, {
+    model: model,
+    fontSize: fontSize
+  })), /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(0 ".concat(rulerHeight + cytobandHeight, ")")
+  }, /*#__PURE__*/_react["default"].createElement(SVGRuler, {
+    model: model,
+    fontSize: fontSize,
+    width: width
+  })));
+}; // SVG component, region separator
+
+
+var SVGRegionSeparators = function SVGRegionSeparators(_ref4) {
+  var model = _ref4.model,
+      height = _ref4.height;
+  var dynamicBlocks = model.dynamicBlocks,
+      offsetPx = model.offsetPx,
+      interRegionPaddingWidth = model.interRegionPaddingWidth;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, dynamicBlocks.contentBlocks.slice(1).map(function (block) {
+    return /*#__PURE__*/_react["default"].createElement("rect", {
+      key: block.key,
+      x: block.offsetPx - offsetPx - interRegionPaddingWidth,
+      width: interRegionPaddingWidth,
+      y: 0,
+      height: height,
+      stroke: "none",
+      fill: "grey"
+    });
+  }));
+}; // SVG component, tracks
+
+
+function SVGTracks(_ref5) {
+  var displayResults = _ref5.displayResults,
+      model = _ref5.model,
+      offset = _ref5.offset;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, displayResults.map(function (_ref6) {
+    var track = _ref6.track,
+        result = _ref6.result;
+    var current = offset;
+    var trackName = (0, _configuration.getConf)(track, 'name') || "Reference sequence (".concat((0, _configuration.readConfObject)((0, _mobxStateTree.getParent)(track.configuration), 'name'), ")");
+    var display = track.displays[0];
+    offset += display.height + paddingHeight + textHeight;
+    return /*#__PURE__*/_react["default"].createElement("g", {
+      key: track.configuration.trackId,
+      transform: "translate(0 ".concat(current, ")")
+    }, /*#__PURE__*/_react["default"].createElement("text", {
+      fontSize: fontSize,
+      x: Math.max(-model.offsetPx, 0)
+    }, trackName), /*#__PURE__*/_react["default"].createElement("g", {
+      transform: "translate(0 ".concat(textHeight, ")")
+    }, result, /*#__PURE__*/_react["default"].createElement(SVGRegionSeparators, {
+      model: model,
+      height: display.height
+    })));
+  }));
+} // render LGV to SVG
+
+
+function renderToSvg(_x, _x2) {
+  return _renderToSvg.apply(this, arguments);
+}
+
+function _renderToSvg() {
+  _renderToSvg = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(model, opts) {
+    var width, tracks, showCytobands, shift, offset, height, displayResults;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return (0, _mobx.when)(function () {
+              return model.initialized;
+            });
+
+          case 2:
+            width = model.width, tracks = model.tracks, showCytobands = model.showCytobands;
+            shift = 50;
+            offset = headerHeight + rulerHeight + (showCytobands ? cytobandHeightIfExists : 0) + 20;
+            height = totalHeight(tracks) + offset;
+            _context2.next = 8;
+            return Promise.all(tracks.map( /*#__PURE__*/function () {
+              var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(track) {
+                var display, result;
+                return _regenerator["default"].wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        display = track.displays[0];
+                        _context.next = 3;
+                        return (0, _mobx.when)(function () {
+                          return display.ready !== undefined ? display.ready : true;
+                        });
+
+                      case 3:
+                        _context.next = 5;
+                        return display.renderSvg(opts);
+
+                      case 5:
+                        result = _context.sent;
+                        return _context.abrupt("return", {
+                          track: track,
+                          result: result
+                        });
+
+                      case 7:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              }));
+
+              return function (_x3) {
+                return _ref7.apply(this, arguments);
+              };
+            }()));
+
+          case 8:
+            displayResults = _context2.sent;
+            return _context2.abrupt("return", (0, _server.renderToStaticMarkup)( /*#__PURE__*/_react["default"].createElement("svg", {
+              width: width,
+              height: height,
+              xmlns: "http://www.w3.org/2000/svg",
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              viewBox: [0, 0, width + shift * 2, height].toString()
+            }, /*#__PURE__*/_react["default"].createElement("rect", {
+              width: width + shift * 2,
+              height: height,
+              fill: "white"
+            }), /*#__PURE__*/_react["default"].createElement("g", {
+              stroke: "none",
+              transform: "translate(".concat(shift, " ").concat(fontSize, ")")
+            }, /*#__PURE__*/_react["default"].createElement(SVGHeader, {
+              model: model
+            }), /*#__PURE__*/_react["default"].createElement(SVGTracks, {
+              model: model,
+              displayResults: displayResults,
+              offset: offset
+            })))));
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _renderToSvg.apply(this, arguments);
+}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { LinearGenomeViewModel } from '..';
-declare const MiniControls: (props: {
-    model: LinearGenomeViewModel;
-}) => JSX.Element;
-export default MiniControls;
+/// <reference types="react" />
+import { LinearGenomeViewModel } from '..';
+declare const MiniControls: (props: {
+    model: LinearGenomeViewModel;
+}) => JSX.Element;
+export default MiniControls;

package/dist/LinearGenomeView/components/MiniControls.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _ZoomIn = _interopRequireDefault(require("@material-ui/icons/ZoomIn"));
+
+var _ZoomOut = _interopRequireDefault(require("@material-ui/icons/ZoomOut"));
+
+var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _Menu = _interopRequireDefault(require("@jbrowse/core/ui/Menu"));
+
+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; }
+
+var MiniControls = (0, _mobxReact.observer)(function (props) {
+  var model = props.model;
+  var bpPerPx = model.bpPerPx,
+      maxBpPerPx = model.maxBpPerPx,
+      minBpPerPx = model.minBpPerPx,
+      scaleFactor = model.scaleFactor;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      anchorEl = _useState2[0],
+      setAnchorEl = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    style: {
+      background: '#aaa7'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    color: "secondary",
+    onClick: function onClick(event) {
+      setAnchorEl(event.currentTarget);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowDown["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    "data-testid": "zoom_out",
+    onClick: function onClick() {
+      model.zoom(bpPerPx * 2);
+    },
+    disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomOut["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    "data-testid": "zoom_in",
+    onClick: function onClick() {
+      model.zoom(model.bpPerPx / 2);
+    },
+    disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1,
+    color: "secondary"
+  }, /*#__PURE__*/_react["default"].createElement(_ZoomIn["default"], null))), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onMenuItemClick: function onMenuItemClick(_, callback) {
+      callback();
+      setAnchorEl(undefined);
+    },
+    onClose: function onClose() {
+      setAnchorEl(undefined);
+    },
+    menuItems: model.menuItems()
+  }));
+});
+var _default = MiniControls;
+exports["default"] = _default;