@jbrowse/plugin-linear-genome-view 1.6.9 → 1.7.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.3",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -18,21 +18,19 @@
   "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",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js"
+    "useSrc": "node ../../scripts/useSrc.js",
+    "postbuild": "tsc --build tsconfig.build.json"
   },
   "dependencies": {
     "@material-ui/icons": "^4.9.1",
@@ -44,8 +42,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 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f6c3d4edfadc26f7ac635a2fa7259f50f0c7e5e3"
+  "gitHead": "09b13c85acf4ac68dd71ab23af87656c7552fdaf"
 }

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'

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -16,7 +16,7 @@ import CloseIcon from '@material-ui/icons/Close'
 
 // locals
 import RefNameAutocomplete from './RefNameAutocomplete'
-import { LinearGenomeViewModel } from '..'
+import { LinearGenomeViewModel, WIDGET_HEIGHT } from '..'
 const SearchResultsDialog = lazy(() => import('./SearchResultsDialog'))
 
 const useStyles = makeStyles(theme => ({
@@ -26,6 +26,9 @@ const useStyles = makeStyles(theme => ({
   button: {
     margin: theme.spacing(2),
   },
+  container: {
+    padding: theme.spacing(4),
+  },
 }))
 
 type LGV = LinearGenomeViewModel
@@ -119,10 +122,12 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     }
   }
 
+  const height = WIDGET_HEIGHT + 5
+
   // implementation notes:
   // having this wrapped in a form allows intuitive use of enter key to submit
   return (
-    <div>
+    <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
       <Container className={classes.importFormContainer}>
         <form onSubmit={event => event.preventDefault()}>
@@ -140,6 +145,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 }}
                 session={session}
                 selected={selectedAsm}
+                InputProps={{ style: { height } }}
               />
             </Grid>
             <Grid item>
@@ -156,10 +162,11 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                     minWidth={270}
                     onSelect={option => setOption(option)}
                     TextFieldProps={{
-                      margin: 'normal',
                       variant: 'outlined',
                       helperText:
                         'Enter sequence name, feature name, or location',
+                      style: { minWidth: '175px' },
+                      InputProps: { style: { height } },
                     }}
                   />
                 ) : (
@@ -171,7 +178,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                 )
               ) : null}
             </Grid>
-            <Grid item></Grid>
             <Grid item>
               <Button
                 type="submit"

package/src/LinearGenomeView/components/LinearGenomeView.test.js

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import 'requestidlecallback-polyfill'
 import LinearGenomeView from './LinearGenomeView'
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 const assemblyConf = {
   name: 'volMyt1',

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -138,7 +138,7 @@ type LGV = LinearGenomeViewModel
 
 // rounded rect from https://stackoverflow.com/a/45889603/2129219
 // prettier-ignore
-function rightRoundedRect(x:number, y:number, width:number, height:number, radius:number) {
+function rightRoundedRect(x: number, y: number, width: number, height: number, radius: number) {
   return "M" + x + "," + y
        + "h" + (width - radius)
        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
@@ -149,7 +149,7 @@ function rightRoundedRect(x:number, y:number, width:number, height:number, radiu
 }
 
 // prettier-ignore
-function leftRoundedRect(x:number, y:number, width:number, height:number, radius:number ) {
+function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
   return "M" + (x + radius) + "," + y
        + "h" + (width - radius)
        + "v" + height

package/src/LinearGenomeView/components/RubberBand.tsx

@@ -1,18 +1,17 @@
 import React, { useRef, useEffect, useState } from 'react'
-import ReactPropTypes from 'prop-types'
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
-// material ui
-import { alpha } from '@material-ui/core/styles/colorManipulator'
-import { makeStyles } from '@material-ui/core/styles'
-import Popover from '@material-ui/core/Popover'
-import Tooltip from '@material-ui/core/Tooltip'
-import Typography from '@material-ui/core/Typography'
+import { observer } from 'mobx-react'
+import {
+  Popover,
+  Tooltip,
+  Typography,
+  makeStyles,
+  alpha,
+} from '@material-ui/core'
 import { stringify } from '@jbrowse/core/util'
 import { Menu } from '@jbrowse/core/ui'
-import { LinearGenomeViewStateModel, BpOffset } from '..'
+import { LinearGenomeViewModel } from '..'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles(theme => {
   const background = theme.palette.tertiary
@@ -139,11 +138,11 @@ function RubberBand({
           clientX,
           clientY,
         })
-        const { leftOffset, rightOffset } = computeOffsets(offsetX) as {
-          leftOffset: BpOffset
-          rightOffset: BpOffset
+        const args = computeOffsets(offsetX)
+        if (args) {
+          const { leftOffset, rightOffset } = args
+          setOffsets(leftOffset, rightOffset)
         }
-        setOffsets(leftOffset, rightOffset)
         setGuideX(undefined)
       }
     }
@@ -313,13 +312,4 @@ function RubberBand({
   )
 }
 
-RubberBand.propTypes = {
-  model: MobxPropTypes.objectOrObservableObject.isRequired,
-  ControlComponent: ReactPropTypes.node,
-}
-
-RubberBand.defaultProps = {
-  ControlComponent: <div />,
-}
-
 export default observer(RubberBand)

package/src/LinearGenomeView/components/ScaleBar.test.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import ScaleBar from './ScaleBar'
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 describe('ScaleBar genome view component', () => {
   it('renders two regions', () => {

package/src/LinearGenomeView/components/ScaleBar.tsx

@@ -1,16 +1,13 @@
+import { Paper, Typography, makeStyles } from '@material-ui/core'
 import {
   ContentBlock,
   ElidedBlock,
   InterRegionPaddingBlock,
 } from '@jbrowse/core/util/blockTypes'
-import Paper from '@material-ui/core/Paper'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import clsx from 'clsx'
 import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
 import React from 'react'
-import { LinearGenomeViewStateModel } from '..'
+import { LinearGenomeViewModel } from '..'
 import {
   ContentBlock as ContentBlockComponent,
   ElidedBlock as ElidedBlockComponent,
@@ -18,7 +15,7 @@ import {
 } from '../../BaseLinearDisplay/components/Block'
 import { makeTicks } from '../util'
 
-type LGV = Instance<LinearGenomeViewStateModel>
+type LGV = LinearGenomeViewModel
 
 const useStyles = makeStyles(theme => ({
   scaleBarContainer: {