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

package/dist/LinearGenomeView/components/RefNameAutocomplete.js

@@ -0,0 +1,331 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _util = require("@jbrowse/core/util");
+
+var _BaseResults = _interopRequireWildcard(require("@jbrowse/core/TextSearch/BaseResults"));
+
+var _core = require("@material-ui/core");
+
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+
+var _Autocomplete = _interopRequireDefault(require("@material-ui/lab/Autocomplete"));
+
+var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
+
+var _util2 = require("./util");
+
+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 _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 || (0, _typeof2["default"])(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; }
+
+// lazy
+var HelpDialog = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./HelpDialog'));
+  });
+});
+
+// the logic of this method is to only apply a filter to RefSequenceResults
+// because they do not have a matchedObject. the trix search results already
+// filter so don't need re-filtering
+function _filterOptions(options, searchQuery) {
+  return options.filter(function (option) {
+    var result = option.result;
+    return result.getLabel().toLowerCase().includes(searchQuery) || result.matchedObject;
+  });
+} // MyPopper used to expand search results box wider if needed
+// xref https://stackoverflow.com/a/63583835/2129219
+
+
+var MyPopper = function MyPopper(props) {
+  var style = props.style;
+  return /*#__PURE__*/_react["default"].createElement(_core.Popper, (0, _extends2["default"])({}, props, {
+    style: {
+      width: 'fit-content',
+      minWidth: Math.min(+((style === null || style === void 0 ? void 0 : style.width) || 0), 200),
+      background: 'white'
+    },
+    placement: "bottom-start"
+  }));
+};
+
+function RefNameAutocomplete(_ref) {
+  var model = _ref.model,
+      _ref$showHelp = _ref.showHelp,
+      showHelp = _ref$showHelp === void 0 ? true : _ref$showHelp,
+      onSelect = _ref.onSelect,
+      assemblyName = _ref.assemblyName,
+      style = _ref.style,
+      fetchResults = _ref.fetchResults,
+      value = _ref.value,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
+      _ref$TextFieldProps = _ref.TextFieldProps,
+      TextFieldProps = _ref$TextFieldProps === void 0 ? {} : _ref$TextFieldProps;
+  var session = (0, _util.getSession)(model);
+  var assemblyManager = session.assemblyManager;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isHelpDialogDisplayed = _useState6[0],
+      setHelpDialogDisplayed = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      currentSearch = _useState8[0],
+      setCurrentSearch = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      searchOptions = _useState12[0],
+      setSearchOptions = _useState12[1];
+
+  var debouncedSearch = (0, _util.useDebounce)(currentSearch, 300);
+  var coarseVisibleLocStrings = model.coarseVisibleLocStrings,
+      hasDisplayedRegions = model.hasDisplayedRegions;
+  var assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var regions = (assembly === null || assembly === void 0 ? void 0 : assembly.regions) || [];
+  var options = (0, _react.useMemo)(function () {
+    return regions.map(function (option) {
+      return {
+        result: new _BaseResults.RefSequenceResult({
+          refName: option.refName,
+          label: option.refName,
+          matchedAttribute: 'refName'
+        })
+      };
+    });
+  }, [regions]);
+  (0, _react.useEffect)(function () {
+    var active = true;
+    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var results;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!(debouncedSearch === '' || !assemblyName)) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              setLoaded(false);
+              _context.next = 6;
+              return fetchResults(debouncedSearch);
+
+            case 6:
+              results = _context.sent;
+
+              if (active) {
+                setSearchOptions((0, _util2.dedupe)(results, function (r) {
+                  return r.getDisplayString();
+                }).map(function (result) {
+                  return {
+                    result: result
+                  };
+                }));
+                setLoaded(true);
+              }
+
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+              console.error(_context.t0);
+
+              if (active) {
+                session.notify("".concat(_context.t0), 'error');
+              }
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10]]);
+    }))();
+    return function () {
+      active = false;
+    };
+  }, [assemblyName, fetchResults, debouncedSearch, session, model]);
+  var inputBoxVal = coarseVisibleLocStrings || value || ''; // heuristic, text width + icon width
+  // + 45 accomodates help icon and search icon
+
+  var width = Math.min(Math.max((0, _util.measureText)(inputBoxVal, 16) + 45, minWidth), 550); // notes on implementation:
+  // The selectOnFocus setting helps highlight the field when clicked
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
+    id: "refNameAutocomplete-".concat(model.id),
+    "data-testid": "autocomplete",
+    disableListWrap: true,
+    disableClearable: true,
+    PopperComponent: MyPopper,
+    disabled: !assemblyName,
+    freeSolo: true,
+    includeInputInList: true,
+    selectOnFocus: true,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: width
+    }),
+    value: inputBoxVal,
+    loading: !loaded,
+    inputValue: inputValue,
+    onInputChange: function onInputChange(event, newInputValue) {
+      return setInputValue(newInputValue);
+    },
+    loadingText: "loading results",
+    open: open,
+    onOpen: function onOpen() {
+      return setOpen(true);
+    },
+    onClose: function onClose() {
+      setOpen(false);
+      setLoaded(true);
+
+      if (hasDisplayedRegions) {
+        setCurrentSearch('');
+        setSearchOptions(undefined);
+      }
+    },
+    onChange: function onChange(_event, selectedOption) {
+      if (!selectedOption || !assemblyName) {
+        return;
+      }
+
+      if (typeof selectedOption === 'string') {
+        // handles string inputs on keyPress enter
+        onSelect(new _BaseResults["default"]({
+          label: selectedOption
+        }));
+      } else {
+        onSelect(selectedOption.result);
+      }
+
+      setInputValue(inputBoxVal);
+    },
+    options: !(searchOptions !== null && searchOptions !== void 0 && searchOptions.length) ? options : searchOptions,
+    getOptionDisabled: function getOptionDisabled(option) {
+      return (option === null || option === void 0 ? void 0 : option.group) === 'limitOption';
+    },
+    filterOptions: function filterOptions(options, params) {
+      var filtered = _filterOptions(options, params.inputValue.toLocaleLowerCase());
+
+      return [].concat((0, _toConsumableArray2["default"])(filtered.slice(0, 100)), (0, _toConsumableArray2["default"])(filtered.length > 100 ? [{
+        group: 'limitOption',
+        result: new _BaseResults["default"]({
+          label: 'keep typing for more results'
+        })
+      }] : []));
+    },
+    renderInput: function renderInput(params) {
+      var helperText = TextFieldProps.helperText,
+          _TextFieldProps$Input = TextFieldProps.InputProps,
+          InputProps = _TextFieldProps$Input === void 0 ? {} : _TextFieldProps$Input;
+      return /*#__PURE__*/_react["default"].createElement(_core.TextField, (0, _extends2["default"])({
+        onBlur: function onBlur() {
+          // this is used to restore a refName or the non-user-typed input
+          // to the box on blurring
+          setInputValue(inputBoxVal);
+        }
+      }, params, TextFieldProps, {
+        helperText: helperText,
+        InputProps: _objectSpread(_objectSpread(_objectSpread({}, params.InputProps), InputProps), {}, {
+          endAdornment: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, regions.length === 0 ? /*#__PURE__*/_react["default"].createElement(_core.CircularProgress, {
+            color: "inherit",
+            size: 20
+          }) : /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
+            position: "end",
+            style: {
+              marginRight: 7
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Search["default"], null), showHelp ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+            onClick: function onClick() {
+              return setHelpDialogDisplayed(true);
+            }
+          }, /*#__PURE__*/_react["default"].createElement(_Help["default"], null)) : null), params.InputProps.endAdornment)
+        }),
+        placeholder: "Search for location",
+        onChange: function onChange(e) {
+          setCurrentSearch(e.target.value);
+        }
+      }));
+    },
+    renderOption: function renderOption(option) {
+      var result = option.result;
+      var component = result.getRenderingComponent();
+
+      if (component && /*#__PURE__*/_react["default"].isValidElement(component)) {
+        return component;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+        noWrap: true
+      }, result.getDisplayString());
+    },
+    getOptionLabel: function getOptionLabel(option) {
+      return (typeof option === 'string' ? option : option.result.getLabel()) || '';
+    }
+  }), isHelpDialogDisplayed ? /*#__PURE__*/_react["default"].createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react["default"].createElement("div", null)
+  }, /*#__PURE__*/_react["default"].createElement(HelpDialog, {
+    handleClose: function handleClose() {
+      return setHelpDialogDisplayed(false);
+    }
+  })) : null);
+}
+
+var _default = (0, _mobxReact.observer)(RefNameAutocomplete);
+
+exports["default"] = _default;

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

@@ -1,20 +1,9 @@
-import React from 'react';
-import ReactPropTypes from 'prop-types';
-import { Instance } from 'mobx-state-tree';
-import { LinearGenomeViewStateModel } from '..';
-declare type LGV = Instance<LinearGenomeViewStateModel>;
-declare function RubberBand({ model, ControlComponent, }: {
-    model: LGV;
-    ControlComponent?: React.ReactElement;
-}): JSX.Element;
-declare namespace RubberBand {
-    var propTypes: {
-        model: ReactPropTypes.Validator<any>;
-        ControlComponent: ReactPropTypes.Requireable<ReactPropTypes.ReactNodeLike>;
-    };
-    var defaultProps: {
-        ControlComponent: JSX.Element;
-    };
-}
-declare const _default: typeof RubberBand;
-export default _default;
+import React from 'react';
+import { LinearGenomeViewModel } from '..';
+declare type LGV = LinearGenomeViewModel;
+declare function RubberBand({ model, ControlComponent, }: {
+    model: LGV;
+    ControlComponent?: React.ReactElement;
+}): JSX.Element;
+declare const _default: typeof RubberBand;
+export default _default;

package/dist/LinearGenomeView/components/RubberBand.js

@@ -0,0 +1,309 @@
+"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 _core = require("@material-ui/core");
+
+var _util = require("@jbrowse/core/util");
+
+var _ui = require("@jbrowse/core/ui");
+
+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 useStyles = (0, _core.makeStyles)(function (theme) {
+  var background = theme.palette.tertiary ? (0, _core.alpha)(theme.palette.tertiary.main, 0.7) : (0, _core.alpha)(theme.palette.primary.main, 0.7);
+  return {
+    rubberBand: {
+      height: '100%',
+      background: background,
+      position: 'absolute',
+      zIndex: 10,
+      textAlign: 'center',
+      overflow: 'hidden'
+    },
+    rubberBandControl: {
+      cursor: 'crosshair',
+      width: '100%',
+      minHeight: 8
+    },
+    rubberBandText: {
+      color: theme.palette.tertiary ? theme.palette.tertiary.contrastText : theme.palette.primary.contrastText
+    },
+    popover: {
+      mouseEvents: 'none',
+      cursor: 'crosshair'
+    },
+    paper: {
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1)
+    },
+    guide: {
+      pointerEvents: 'none',
+      height: '100%',
+      width: 1,
+      position: 'absolute',
+      zIndex: 10
+    }
+  };
+});
+var VerticalGuide = (0, _mobxReact.observer)(function (_ref) {
+  var model = _ref.model,
+      coordX = _ref.coordX;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
+    open: true,
+    placement: "top",
+    title: (0, _util.stringify)(model.pxToBp(coordX)),
+    arrow: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.guide,
+    style: {
+      left: coordX,
+      background: 'red'
+    }
+  }));
+});
+
+function RubberBand(_ref2) {
+  var model = _ref2.model,
+      _ref2$ControlComponen = _ref2.ControlComponent,
+      ControlComponent = _ref2$ControlComponen === void 0 ? /*#__PURE__*/_react["default"].createElement("div", null) : _ref2$ControlComponen;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      startX = _useState2[0],
+      setStartX = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      currentX = _useState4[0],
+      setCurrentX = _useState4[1]; // clientX and clientY used for anchorPosition for menu
+  // offsetX used for calculations about width of selection
+
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      anchorPosition = _useState6[0],
+      setAnchorPosition = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      guideX = _useState8[0],
+      setGuideX = _useState8[1];
+
+  var controlsRef = (0, _react.useRef)(null);
+  var rubberBandRef = (0, _react.useRef)(null);
+  var classes = useStyles();
+  var mouseDragging = startX !== undefined && anchorPosition === undefined;
+  var setOffsets = model.setOffsets,
+      pxToBp = model.pxToBp;
+  (0, _react.useEffect)(function () {
+    function computeOffsets(offsetX) {
+      if (startX === undefined) {
+        return;
+      }
+
+      var leftPx = startX;
+      var rightPx = offsetX; // handles clicking and draging to the left
+
+      if (rightPx < leftPx) {
+        ;
+        var _ref3 = [rightPx, leftPx];
+        leftPx = _ref3[0];
+        rightPx = _ref3[1];
+      }
+
+      var leftOffset = pxToBp(leftPx);
+      var rightOffset = pxToBp(rightPx);
+      return {
+        leftOffset: leftOffset,
+        rightOffset: rightOffset
+      };
+    }
+
+    function globalMouseMove(event) {
+      if (controlsRef.current && mouseDragging) {
+        var relativeX = event.clientX - controlsRef.current.getBoundingClientRect().left;
+        setCurrentX(relativeX);
+      }
+    }
+
+    function globalMouseUp(event) {
+      if (startX !== undefined && controlsRef.current) {
+        var clientX = event.clientX,
+            clientY = event.clientY;
+        var ref = controlsRef.current;
+        var offsetX = clientX - ref.getBoundingClientRect().left; // as stated above, store both clientX/Y and offsetX for different
+        // purposes
+
+        setAnchorPosition({
+          offsetX: offsetX,
+          clientX: clientX,
+          clientY: clientY
+        });
+        var args = computeOffsets(offsetX);
+
+        if (args) {
+          var leftOffset = args.leftOffset,
+              rightOffset = args.rightOffset;
+          setOffsets(leftOffset, rightOffset);
+        }
+
+        setGuideX(undefined);
+      }
+    }
+
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove);
+      window.addEventListener('mouseup', globalMouseUp);
+      return function () {
+        window.removeEventListener('mousemove', globalMouseMove);
+        window.removeEventListener('mouseup', globalMouseUp);
+      };
+    }
+
+    return function () {};
+  }, [startX, mouseDragging, anchorPosition, setOffsets, pxToBp]);
+  (0, _react.useEffect)(function () {
+    if (!mouseDragging && currentX !== undefined && startX !== undefined && Math.abs(currentX - startX) <= 3) {
+      handleClose();
+    }
+  }, [mouseDragging, currentX, startX, model.bpPerPx]);
+
+  function mouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    var relativeX = event.clientX - event.target.getBoundingClientRect().left;
+    setStartX(relativeX);
+    setCurrentX(relativeX);
+  }
+
+  function mouseMove(event) {
+    var target = event.target;
+    setGuideX(event.clientX - target.getBoundingClientRect().left);
+  }
+
+  function mouseOut() {
+    setGuideX(undefined);
+    model.setOffsets(undefined, undefined);
+  }
+
+  function handleClose() {
+    setAnchorPosition(undefined);
+    setStartX(undefined);
+    setCurrentX(undefined);
+  }
+
+  var open = Boolean(anchorPosition);
+
+  function handleMenuItemClick(_, callback) {
+    callback();
+    handleClose();
+  }
+
+  if (startX === undefined) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, guideX !== undefined ? /*#__PURE__*/_react["default"].createElement(VerticalGuide, {
+      model: model,
+      coordX: guideX
+    }) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "rubberBand_controls",
+      className: classes.rubberBandControl,
+      role: "presentation",
+      ref: controlsRef,
+      onMouseDown: mouseDown,
+      onMouseOut: mouseOut,
+      onMouseMove: mouseMove
+    }, ControlComponent));
+  }
+  /* Calculating Pixels for Mouse Dragging */
+
+
+  var right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
+  var left = right < startX ? right : startX;
+  var width = Math.abs(right - startX);
+  var leftBpOffset = model.pxToBp(left);
+  var rightBpOffset = model.pxToBp(left + width);
+  var numOfBpSelected = Math.ceil(width * model.bpPerPx);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, rubberBandRef.current ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Popover, {
+    className: classes.popover,
+    classes: {
+      paper: classes.paper
+    },
+    open: true,
+    anchorEl: rubberBandRef.current,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    },
+    keepMounted: true,
+    disableRestoreFocus: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, (0, _util.stringify)(leftBpOffset))), /*#__PURE__*/_react["default"].createElement(_core.Popover, {
+    className: classes.popover,
+    classes: {
+      paper: classes.paper
+    },
+    open: true,
+    anchorEl: rubberBandRef.current,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    keepMounted: true,
+    disableRestoreFocus: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, (0, _util.stringify)(rightBpOffset)))) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: rubberBandRef,
+    className: classes.rubberBand,
+    style: {
+      left: left,
+      width: width
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    variant: "h6",
+    className: classes.rubberBandText
+  }, numOfBpSelected.toLocaleString('en-US'), " bp")), /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "rubberBand_controls",
+    className: classes.rubberBandControl,
+    role: "presentation",
+    ref: controlsRef,
+    onMouseDown: mouseDown,
+    onMouseOut: mouseOut,
+    onMouseMove: mouseMove
+  }, ControlComponent), anchorPosition ? /*#__PURE__*/_react["default"].createElement(_ui.Menu, {
+    anchorReference: "anchorPosition",
+    anchorPosition: {
+      left: anchorPosition.clientX,
+      top: anchorPosition.clientY
+    },
+    onMenuItemClick: handleMenuItemClick,
+    open: open,
+    onClose: handleClose,
+    menuItems: model.rubberBandMenuItems()
+  }) : null);
+}
+
+var _default = (0, _mobxReact.observer)(RubberBand);
+
+exports["default"] = _default;