@jbrowse/core 1.7.11 → 2.0.0

package/BaseFeatureWidget/BaseFeatureDetail.d.ts

@@ -2,7 +2,17 @@ import React from 'react';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { BaseCardProps, BaseProps } from './types';
 import { SimpleFeatureSerialized } from '../util/simpleFeature';
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"expandIcon" | "expansionPanelDetails" | "field" | "fieldDescription" | "fieldName" | "fieldValue" | "fieldSubvalue">;
+export declare const useStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"expansionPanelDetails" | "expandIcon" | "field" | "fieldDescription" | "fieldName" | "fieldValue" | "fieldSubvalue", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
+};
 export declare function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): JSX.Element;
 export declare const FieldName: ({ description, name, width, prefix, }: {
     description?: React.ReactNode;

package/BaseFeatureWidget/BaseFeatureDetail.js

@@ -26,16 +26,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactErrorBoundary = require("react-error-boundary");
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _mui = require("tss-react/mui");
+
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 
 var _xDataGrid = require("@mui/x-data-grid");
 
 var _mobxReact = require("mobx-react");
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _isObject = _interopRequireDefault(require("is-object"));
 
 var _configuration = require("../configuration");
@@ -64,7 +64,7 @@ var MAX_FIELD_NAME_WIDTH = 170; // these are always omitted as too detailed
 var globalOmit = ['__jbrowsefmt', 'length', 'position', 'subfeatures', 'uniqueId', 'exonFrames', 'parentId', 'thickStart', 'thickEnd']; // coreDetails are omitted in some circumstances
 
 var coreDetails = ['name', 'start', 'end', 'strand', 'refName', 'description', 'type'];
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     expansionPanelDetails: {
       display: 'block',
@@ -86,6 +86,7 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
       wordBreak: 'break-all',
       minWidth: '90px',
       borderBottom: '1px solid #0003',
+      fontSize: 12,
       background: theme.palette.grey[200],
       marginRight: theme.spacing(1),
       padding: theme.spacing(0.5)
@@ -93,6 +94,7 @@ var useStyles = (0, _core.makeStyles)(function (theme) {
     fieldValue: {
       wordBreak: 'break-word',
       maxHeight: 300,
+      fontSize: 12,
       padding: theme.spacing(0.5),
       overflow: 'auto'
     },
@@ -114,14 +116,16 @@ function BaseCard(_ref) {
       title = _ref.title,
       _ref$defaultExpanded = _ref.defaultExpanded,
       defaultExpanded = _ref$defaultExpanded === void 0 ? true : _ref$defaultExpanded;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
 
   var _useState = (0, _react.useState)(defaultExpanded),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
+  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
     expanded: expanded,
     onChange: function onChange() {
       return setExpanded(function (s) {
@@ -131,13 +135,13 @@ function BaseCard(_ref) {
     TransitionProps: {
       unmountOnExit: true
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
+  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
     expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
       className: classes.expandIcon
     })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "button"
-  }, " ", title)), /*#__PURE__*/_react.default.createElement(_core.AccordionDetails, {
+  }, " ", title)), /*#__PURE__*/_react.default.createElement(_material.AccordionDetails, {
     className: classes.expansionPanelDetails
   }, children));
 }
@@ -148,13 +152,17 @@ var FieldName = function FieldName(_ref2) {
       width = _ref2.width,
       _ref2$prefix = _ref2.prefix,
       prefix = _ref2$prefix === void 0 ? [] : _ref2$prefix;
-  var classes = useStyles();
+
+  var _useStyles2 = useStyles(),
+      classes = _useStyles2.classes,
+      cx = _useStyles2.cx;
+
   var val = [].concat((0, _toConsumableArray2.default)(prefix), [name]).join('.');
-  return description ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  return description ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: description,
     placement: "left"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.fieldDescription, classes.fieldName)
+    className: cx(classes.fieldDescription, classes.fieldName)
   }, val)) : /*#__PURE__*/_react.default.createElement("div", {
     className: classes.fieldName,
     style: {
@@ -167,7 +175,10 @@ exports.FieldName = FieldName;
 
 var BasicValue = function BasicValue(_ref3) {
   var value = _ref3.value;
-  var classes = useStyles();
+
+  var _useStyles3 = useStyles(),
+      classes = _useStyles3.classes;
+
   var isLink = "".concat(value).match(/^https?:\/\//);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.fieldValue
@@ -186,7 +197,10 @@ var SimpleValue = function SimpleValue(_ref4) {
       description = _ref4.description,
       prefix = _ref4.prefix,
       width = _ref4.width;
-  var classes = useStyles();
+
+  var _useStyles4 = useStyles(),
+      classes = _useStyles4.classes;
+
   return value !== null && value !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
     className: classes.field
   }, /*#__PURE__*/_react.default.createElement(FieldName, {
@@ -207,7 +221,9 @@ var ArrayValue = function ArrayValue(_ref5) {
       description = _ref5.description,
       _ref5$prefix = _ref5.prefix,
       prefix = _ref5$prefix === void 0 ? [] : _ref5$prefix;
-  var classes = useStyles();
+
+  var _useStyles5 = useStyles(),
+      classes = _useStyles5.classes;
 
   if (value.length === 1) {
     return (0, _isObject.default)(value[0]) ? /*#__PURE__*/_react.default.createElement(Attributes, {
@@ -343,11 +359,18 @@ var DataGridDetails = function DataGridDetails(_ref10) {
       colNames = (0, _toConsumableArray2.default)(unionKeys);
     }
 
+    var getStr = function getStr(obj) {
+      return (0, _isObject.default)(obj) ? JSON.stringify(obj) : String(obj);
+    };
+
     var columns = colNames.map(function (val) {
       return {
         field: val,
+        renderCell: function renderCell(val) {
+          return getStr(val.formattedValue);
+        },
         width: Math.max.apply(Math, (0, _toConsumableArray2.default)(rows.map(function (row) {
-          return Math.min(Math.max((0, _util.measureText)(String(row[val]), 14) + 50, 80), 1000);
+          return Math.min(Math.max((0, _util.measureText)(getStr(row[val]), 14) + 50, 80), 1000);
         })))
       };
     }); // disableSelection on click helps avoid
@@ -363,11 +386,9 @@ var DataGridDetails = function DataGridDetails(_ref10) {
       }
     }, /*#__PURE__*/_react.default.createElement(_xDataGrid.DataGrid, {
       disableSelectionOnClick: true,
-      rowHeight: 20,
-      headerHeight: 25,
+      rowHeight: 25,
       rows: rows,
       rowsPerPageOptions: [],
-      hideFooterRowCount: true,
       hideFooterSelectedRowCount: true,
       columns: columns,
       hideFooter: rows.length < 100
@@ -405,7 +426,10 @@ function UriAttribute(_ref13) {
   var value = _ref13.value,
       prefix = _ref13.prefix,
       name = _ref13.name;
-  var classes = useStyles();
+
+  var _useStyles6 = useStyles(),
+      classes = _useStyles6.classes;
+
   var uri = value.uri,
       _value$baseUri = value.baseUri,
       baseUri = _value$baseUri === void 0 ? '' : _value$baseUri;
@@ -451,7 +475,6 @@ function Attributes(props) {
 
     return v !== undefined && !omits.includes(k);
   }), prefix);
-  var labelWidth = maxLabelWidth <= MAX_FIELD_NAME_WIDTH ? maxLabelWidth : MAX_FIELD_NAME_WIDTH;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.entries(formattedAttributes).filter(function (_ref16) {
     var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
         k = _ref17[0],
@@ -468,7 +491,7 @@ function Attributes(props) {
     if (Array.isArray(value)) {
       // check if it looks like an array of objects, which could be used
       // in data grid
-      return value.length > 2 && value.every(function (val) {
+      return value.length > 1 && value.every(function (val) {
         return (0, _isObject.default)(val);
       }) ? /*#__PURE__*/_react.default.createElement(DataGridDetails, {
         key: key,
@@ -502,7 +525,7 @@ function Attributes(props) {
         value: formatter(value, key),
         description: description,
         prefix: prefix,
-        width: labelWidth
+        width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH)
       });
     }
   }));
@@ -548,14 +571,14 @@ var FeatureDetails = function FeatureDetails(props) {
   var sequenceTypes = (0, _configuration.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
   return /*#__PURE__*/_react.default.createElement(BaseCard, {
     title: generateTitle(name, id, type)
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Core details"), /*#__PURE__*/_react.default.createElement(CoreDetails, props), /*#__PURE__*/_react.default.createElement(_core.Divider, null), /*#__PURE__*/_react.default.createElement(_core.Typography, null, "Attributes"), /*#__PURE__*/_react.default.createElement(Attributes, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Core details"), /*#__PURE__*/_react.default.createElement(CoreDetails, props), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Attributes"), /*#__PURE__*/_react.default.createElement(Attributes, (0, _extends2.default)({
     attributes: feature
   }, props, {
     omit: [].concat((0, _toConsumableArray2.default)(omit), coreDetails)
   })), sequenceTypes.includes(feature.type) ? /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: function FallbackComponent(_ref20) {
       var error = _ref20.error;
-      return /*#__PURE__*/_react.default.createElement(_core.Typography, {
+      return /*#__PURE__*/_react.default.createElement(_material.Typography, {
         color: "error"
       }, "".concat(error));
     }

package/BaseFeatureWidget/SequenceFeatureDetails.js

@@ -22,7 +22,9 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@material-ui/core");
+var _material = require("@mui/material");
+
+var _mui = require("tss-react/mui");
 
 var _reactIntersectionObserver = require("react-intersection-observer");
 
@@ -42,7 +44,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-var useStyles = (0, _core.makeStyles)(function (theme) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     button: {
       margin: theme.spacing(1)
@@ -250,7 +252,10 @@ function SequenceFeatureDetails(_ref6) {
 
   var model = _ref6.model,
       feature = _ref6.feature;
-  var classes = useStyles();
+
+  var _useStyles = useStyles(),
+      classes = _useStyles.classes;
+
   var parentFeature = feature;
   var hasCDS = (_parentFeature$subfea = parentFeature.subfeatures) === null || _parentFeature$subfea === void 0 ? void 0 : _parentFeature$subfea.find(function (sub) {
     return sub.type === 'CDS';
@@ -421,26 +426,26 @@ function SequenceFeatureDetails(_ref6) {
   var loading = !sequence;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_core.Select, {
+  }, /*#__PURE__*/_react.default.createElement(_material.FormControl, null, /*#__PURE__*/_react.default.createElement(_material.Select, {
     value: mode,
     onChange: function onChange(event) {
       return setMode(event.target.value);
     }
-  }, hasCDS ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, hasCDS ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "cds"
-  }, "CDS") : null, hasCDS ? /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "CDS") : null, hasCDS ? /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "protein"
-  }, "Protein") : null, /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Protein") : null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "gene"
-  }, "Gene w/ introns"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Gene w/ introns"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "gene_collapsed_intron"
-  }, "Gene w/ 10bp of intron"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Gene w/ 10bp of intron"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "gene_updownstream"
-  }, "Gene w/ 500bp up+down stream"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Gene w/ 500bp up+down stream"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "gene_updownstream_collapsed_intron"
-  }, "Gene w/ 500bp up+down stream w/ 10bp intron"), /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
+  }, "Gene w/ 500bp up+down stream w/ 10bp intron"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     value: "cdna"
-  }, "cDNA")), /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, "cDNA"))), /*#__PURE__*/_react.default.createElement(_material.Button, {
     className: classes.button,
     type: "button",
     variant: "contained",
@@ -457,9 +462,9 @@ function SequenceFeatureDetails(_ref6) {
         }, 1000);
       }
     }
-  }, copied ? 'Copied to clipboard!' : 'Copy as plaintext'), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+  }, copied ? 'Copied to clipboard!' : 'Copy as plaintext'), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
     title: "Note that 'Copy as HTML' can retain the colors but cannot be pasted into some programs like notepad that only expect plain text"
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     className: classes.button,
     type: "button",
     variant: "contained",
@@ -478,7 +483,7 @@ function SequenceFeatureDetails(_ref6) {
     }
   }, copiedHtml ? 'Copied to clipboard!' : 'Copy as HTML')), /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "feature_sequence"
-  }, error ? /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, error ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "error"
   }, "".concat(error)) : loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading gene sequence...") : sequence ? /*#__PURE__*/_react.default.createElement(SequencePanel, {
     ref: seqPanelRef,

package/BaseFeatureWidget/index.d.ts

@@ -25,9 +25,9 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
 }>>, {
     id: string;
     type: "BaseFeatureWidget";
-    formattedFields: any;
-    view: import("mobx-state-tree").ReferenceIdentifier | undefined;
     track: import("mobx-state-tree").ReferenceIdentifier | undefined;
+    view: import("mobx-state-tree").ReferenceIdentifier | undefined;
+    formattedFields: any;
     finalizedFeatureData: any;
 }>;
 export { configSchema, stateModelFactory };

package/BaseFeatureWidget/index.js

@@ -111,9 +111,11 @@ function stateModelFactory(pluginManager) {
       featureData: finalizedFeatureData
     }, rest);
   }).postProcessSnapshot(function (snap) {
-    var unformattedFeatureData = snap.unformattedFeatureData,
-        featureData = snap.featureData,
-        rest = (0, _objectWithoutProperties2.default)(snap, _excluded2); // finalizedFeatureData avoids running formatter twice if loading from
+    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+    var _ref = snap,
+        unformattedFeatureData = _ref.unformattedFeatureData,
+        featureData = _ref.featureData,
+        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded2); // finalizedFeatureData avoids running formatter twice if loading from
     // snapshot
 
     return _objectSpread({

package/BaseFeatureWidget/index.test.js

@@ -2,6 +2,10 @@
 
 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");
@@ -16,36 +20,50 @@ var _ = require(".");
 
 var _BaseFeatureDetail = _interopRequireDefault(require("./BaseFeatureDetail"));
 
-test('open up a widget', function () {
-  console.warn = jest.fn();
-  var pluginManager = new _PluginManager.default([]);
+// locals
+test('open up a widget', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+  var pluginManager, Session, model, _render, container, findByText;
+
+  return _regenerator.default.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          console.warn = jest.fn();
+          pluginManager = new _PluginManager.default([]);
+          Session = _mobxStateTree.types.model({
+            pluginManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
+            rpcManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
+            configuration: (0, _configuration.ConfigurationSchema)('test', {}),
+            widget: (0, _.stateModelFactory)(pluginManager)
+          });
+          model = Session.create({
+            widget: {
+              type: 'BaseFeatureWidget'
+            }
+          });
+          _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.default, {
+            model: model.widget
+          })), container = _render.container, findByText = _render.findByText;
+          model.widget.setFeatureData({
+            start: 2,
+            end: 102,
+            strand: 1,
+            score: 37,
+            refName: 'ctgA'
+          });
+          _context.t0 = expect;
+          _context.next = 9;
+          return findByText('ctgA:3..102 (+)');
 
-  var Session = _mobxStateTree.types.model({
-    pluginManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
-    rpcManager: _mobxStateTree.types.optional(_mobxStateTree.types.frozen(), {}),
-    configuration: (0, _configuration.ConfigurationSchema)('test', {}),
-    widget: (0, _.stateModelFactory)(pluginManager)
-  });
+        case 9:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toBeTruthy();
+          expect(container.firstChild).toMatchSnapshot();
 
-  var model = Session.create({
-    widget: {
-      type: 'BaseFeatureWidget'
+        case 12:
+        case "end":
+          return _context.stop();
+      }
     }
-  });
-
-  var _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BaseFeatureDetail.default, {
-    model: model.widget
-  })),
-      container = _render.container,
-      getByText = _render.getByText;
-
-  model.widget.setFeatureData({
-    start: 2,
-    end: 102,
-    strand: 1,
-    score: 37,
-    refName: 'ctgA'
-  });
-  expect(container.firstChild).toMatchSnapshot();
-  expect(getByText('ctgA:3..102 (+)')).toBeTruthy();
-});
+  }, _callee);
+})));

package/PluginManager.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IAnyType } from 'mobx-state-tree';
+import { IAnyType, IAnyModelType } from 'mobx-state-tree';
 import PluggableElementBase from './pluggableElementTypes/PluggableElementBase';
 import RendererType from './pluggableElementTypes/renderers/RendererType';
 import AdapterType from './pluggableElementTypes/AdapterType';
@@ -99,91 +99,19 @@ export default class PluginManager {
     /** get a MST type for the union of all specified pluggable MST types */
     pluggableMstType(typeGroup: PluggableElementTypeGroup, fieldName: PluggableElementMember, fallback?: IAnyType): IAnyType;
     /** get a MST type for the union of all specified pluggable config schemas */
-    pluggableConfigSchemaType(typeGroup: PluggableElementTypeGroup, fieldName?: PluggableElementMember): IAnyType;
+    pluggableConfigSchemaType(typeGroup: PluggableElementTypeGroup, fieldName?: PluggableElementMember): IAnyModelType;
     jbrequireCache: Map<any, any>;
     lib: {
-        mobx: typeof import("mobx");
-        'mobx-state-tree': typeof import("mobx-state-tree");
-        react: typeof import("react");
-        'react-dom': typeof import("react-dom");
-        'mobx-react': typeof import("mobx-react");
-        'prop-types': typeof import("prop-types");
-        '@material-ui/core': typeof import("@material-ui/core");
-        '@material-ui/core/SvgIcon': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").SvgIconTypeMap<{}, "svg">>;
-        '@material-ui/core/utils': typeof import("@material-ui/core/utils");
-        '@material-ui/lab': typeof import("@material-ui/lab");
-        '@mui/x-data-grid': typeof import("@mui/x-data-grid");
-        '@material-ui/data-grid': typeof import("@mui/x-data-grid");
-        '@material-ui/core/colors': typeof import("./ReExports/material-ui-colors");
-        '@material-ui/core/styles': typeof import("@material-ui/core/styles");
-        '@material-ui/core/Box': import("react").ComponentType<import("@material-ui/core").BoxProps>;
-        '@material-ui/core/Button': import("@material-ui/core").ExtendButtonBase<import("@material-ui/core").ButtonTypeMap<{}, "button">>;
-        '@material-ui/core/ButtonGroup': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ButtonGroupTypeMap<{}, "div">>;
-        '@material-ui/core/Card': typeof import("@material-ui/core").Card;
-        '@material-ui/core/CardContent': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").CardContentTypeMap<{}, "div">>;
-        '@material-ui/core/Container': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ContainerTypeMap<{}, "div">>;
-        '@material-ui/core/Checkbox': typeof import("@material-ui/core").Checkbox;
-        '@material-ui/core/Dialog': typeof import("@material-ui/core").Dialog;
-        '@material-ui/core/FormGroup': typeof import("@material-ui/core").FormGroup;
-        '@material-ui/core/FormLabel': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").FormLabelTypeMap<{}, "label">>;
-        '@material-ui/core/FormControl': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").FormControlTypeMap<{}, "div">>;
-        '@material-ui/core/FormControlLabel': typeof import("@material-ui/core").FormControlLabel;
-        '@material-ui/core/Grid': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").GridTypeMap<{}, "div">>;
-        '@material-ui/core/Icon': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").IconTypeMap<{}, "span">>;
-        '@material-ui/core/IconButton': import("@material-ui/core").ExtendButtonBase<import("@material-ui/core").IconButtonTypeMap<{}, "button">>;
-        '@material-ui/core/InputAdornment': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").InputAdornmentTypeMap<{}, "div">>;
-        '@material-ui/core/LinearProgress': typeof import("@material-ui/core").LinearProgress;
-        '@material-ui/core/ListItemIcon': typeof import("@material-ui/core").ListItemIcon;
-        '@material-ui/core/ListItemText': typeof import("@material-ui/core").ListItemText;
-        '@material-ui/core/Menu': typeof import("@material-ui/core").Menu;
-        '@material-ui/core/MenuItem': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").MenuItemTypeMap<{
-            button: false;
-        }, "li">> & ((props: {
-            href: string;
-        } & {
-            button?: true | undefined;
-        } & {
-            alignItems?: "center" | "flex-start" | undefined;
-            autoFocus?: boolean | undefined;
-            button?: boolean | undefined;
-            ContainerComponent?: import("react").ElementType<import("react").HTMLAttributes<HTMLDivElement>> | undefined;
-            ContainerProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-            dense?: boolean | undefined;
-            disabled?: boolean | undefined;
-            disableGutters?: boolean | undefined;
-            divider?: boolean | undefined;
-            focusVisibleClassName?: string | undefined;
-            selected?: boolean | undefined;
-        } & {
-            action?: import("react").Ref<import("@material-ui/core").ButtonBaseActions> | undefined;
-            buttonRef?: import("react").Ref<unknown> | undefined;
-            centerRipple?: boolean | undefined;
-            children?: import("react").ReactNode;
-            disabled?: boolean | undefined;
-            disableRipple?: boolean | undefined;
-            disableTouchRipple?: boolean | undefined;
-            focusRipple?: boolean | undefined;
-            focusVisibleClassName?: string | undefined;
-            onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-            tabIndex?: string | number | undefined;
-            TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-        } & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").MenuItemTypeMap<{
-            button?: true | undefined;
-        }, "li">>> & Pick<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
-            ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-        }, "id" | "is" | "color" | "type" | "defaultValue" | "key" | "prefix" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "href" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy">) => JSX.Element) & import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").ExtendButtonBaseTypeMap<import("@material-ui/core").MenuItemTypeMap<{
-            button?: true | undefined;
-        }, "li">>>;
-        '@material-ui/core/RadioGroup': typeof import("@material-ui/core").RadioGroup;
-        '@material-ui/core/Radio': typeof import("@material-ui/core").Radio;
-        '@material-ui/core/Select': typeof import("@material-ui/core").Select;
-        '@material-ui/core/Snackbar': typeof import("@material-ui/core").Snackbar;
-        '@material-ui/core/SnackbarContent': typeof import("@material-ui/core").SnackbarContent;
-        '@material-ui/core/TextField': typeof import("@material-ui/core").TextField;
-        '@material-ui/core/Tooltip': typeof import("@material-ui/core").Tooltip;
-        '@material-ui/core/Typography': import("@material-ui/core/OverridableComponent").OverridableComponent<import("@material-ui/core").TypographyTypeMap<{}, "span">>;
-        '@material-ui/lab/ToggleButton': import("@material-ui/core").ExtendButtonBase<import("@material-ui/lab").ToggleButtonTypeMap<{}, "button">>;
-        '@material-ui/lab/ToggleButtonGroup': typeof import("@material-ui/lab").ToggleButtonGroup;
+        '@material-ui/lab/ToggleButton': import("react").LazyExoticComponent<import("@mui/material").ExtendButtonBase<import("@mui/material").ToggleButtonTypeMap<{}, "button">>>;
+        '@material-ui/lab/ToggleButtonGroup': import("react").LazyExoticComponent<typeof import("@mui/material").ToggleButtonGroup>;
+        '@material-ui/lab/Autocomplete': import("react").LazyExoticComponent<typeof import("@mui/material").Autocomplete>;
+        '@material-ui/lab/Alert': import("react").LazyExoticComponent<typeof import("@mui/material").Alert>;
+        '@material-ui/lab': {
+            Alert: import("react").LazyExoticComponent<typeof import("@mui/material").Alert>;
+            Autocomplete: import("react").LazyExoticComponent<typeof import("@mui/material").Autocomplete>;
+            ToggleButton: import("react").LazyExoticComponent<import("@mui/material").ExtendButtonBase<import("@mui/material").ToggleButtonTypeMap<{}, "button">>>;
+            ToggleButtonGroup: import("react").LazyExoticComponent<typeof import("@mui/material").ToggleButtonGroup>;
+        };
         '@jbrowse/core/Plugin': typeof Plugin;
         '@jbrowse/core/pluggableElementTypes': typeof import("./pluggableElementTypes");
         '@jbrowse/core/pluggableElementTypes/ViewType': typeof ViewType;
@@ -272,14 +200,58 @@ export default class PluginManager {
             zoomIn(): void;
             zoomTo(newBpPerPx: number, offset?: number): void;
             scrollTo(offsetPx: number): number;
-            centerAt(bp: number, refName: string, regionIndex: number): void;
+            centerAt(coord: number, refName: string, regionNumber: number): void;
             scroll(distance: number): number;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
         '@jbrowse/core/util/io': typeof import("./util/io");
         '@jbrowse/core/util/mst-reflection': typeof import("./util/mst-reflection");
         '@jbrowse/core/util/rxjs': typeof import("./util/rxjs");
-        '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail': typeof import("./BaseFeatureWidget/BaseFeatureDetail");
+        '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail': {
+            Attributes: (props: any) => JSX.Element;
+            FeatureDetails: (props: any) => JSX.Element;
+            BaseCard: (props: any) => JSX.Element;
+        };
         '@jbrowse/core/data_adapters/BaseAdapter': typeof import("./data_adapters/BaseAdapter");
+        mobx: typeof import("mobx");
+        'mobx-state-tree': typeof import("mobx-state-tree");
+        react: typeof import("react");
+        'react-dom': typeof import("react-dom");
+        'mobx-react': typeof import("mobx-react");
+        '@mui/x-data-grid': {
+            DataGrid: any;
+            useGridApiContext: typeof import("@mui/x-data-grid").useGridApiContext;
+            useGridApiRef: <Api extends import("@mui/x-data-grid").GridApiCommon = import("@mui/x-data-grid/models/api/gridApiCommunity").GridApiCommunity>() => import("react").MutableRefObject<Api>;
+            useGridRootProps: () => import("@mui/x-data-grid/models/props/DataGridProps").DataGridProcessedProps<any>;
+        };
+        '@mui/material/utils': typeof import("@mui/material/utils");
+        '@material-ui/core/utils': typeof import("@mui/material/utils");
+        'tss-react/mui': {
+            makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
+                name?: string | Record<string, unknown> | undefined;
+                uniqId?: string | undefined;
+            } | undefined) => <RuleName extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName, import("tss-react/types").CSSObject> | ((theme: import("@mui/material").Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName, import("tss-react/types").CSSObject>)) => (params: Params, styleOverrides?: {
+                props: {
+                    classes?: Record<string, string> | undefined;
+                } & Record<string, unknown>;
+                ownerState?: Record<string, unknown> | undefined;
+            } | undefined) => {
+                classes: Record<RuleName, string>;
+                theme: import("@mui/material").Theme;
+                css: import("tss-react/types").Css;
+                cx: import("tss-react/types").Cx;
+            };
+        };
+        '@material-ui/core': {
+            useTheme: typeof import("@mui/material").useTheme;
+            alpha: typeof import("@mui/system").alpha;
+            makeStyles: (args: any) => () => Record<string, string>;
+        };
+        '@mui/material': {
+            [k: string]: (props: any) => JSX.Element;
+        };
+        'prop-types': typeof import("prop-types");
+        '@mui/material/styles': typeof import("@mui/material/styles");
+        '@material-ui/core/styles': typeof import("@mui/material/styles");
     };
     load: <FTYPE extends AnyFunction>(lib: FTYPE) => ReturnType<FTYPE>;
     /**