@jbrowse/core 1.7.9 → 2.0.0

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

@@ -4,9 +4,30 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"BaseFeatureWidget">;
     featureData: import("mobx-state-tree").IType<any, any, any>;
+    formattedFields: import("mobx-state-tree").IType<any, any, any>;
+    unformattedFeatureData: import("mobx-state-tree").IType<any, any, any>;
     view: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
+    track: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
 }, {
-    setFeatureData(data: Record<string, unknown>): void;
+    setFeatureData(featureData: Record<string, unknown>): void;
     clearFeatureData(): void;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+    setFormattedData(feat: Record<string, unknown>): void;
+} & {
+    afterCreate(): void;
+}, import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<"BaseFeatureWidget">;
+    featureData: import("mobx-state-tree").IType<any, any, any>;
+    formattedFields: import("mobx-state-tree").IType<any, any, any>;
+    unformattedFeatureData: import("mobx-state-tree").IType<any, any, any>;
+    view: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
+    track: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
+}>>, {
+    id: string;
+    type: "BaseFeatureWidget";
+    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

@@ -1,34 +1,131 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.configSchema = void 0;
 exports.stateModelFactory = exports.default = stateModelFactory;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _mobxStateTree = require("mobx-state-tree");
 
+var _mobx = require("mobx");
+
 var _configuration = require("../configuration");
 
+var _clone = _interopRequireDefault(require("clone"));
+
 var _mst = require("../util/types/mst");
 
+var _excluded = ["featureData", "finalizedFeatureData"],
+    _excluded2 = ["unformattedFeatureData", "featureData"];
+
+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; }
+
 var configSchema = (0, _configuration.ConfigurationSchema)('BaseFeatureWidget', {});
 exports.configSchema = configSchema;
 
+function formatSubfeatures(obj, depth, parse) {
+  var _obj$subfeatures;
+
+  var currentDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var returnObj = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
+  if (depth <= currentDepth) {
+    return returnObj;
+  }
+
+  returnObj.subfeatures = (_obj$subfeatures = obj.subfeatures) === null || _obj$subfeatures === void 0 ? void 0 : _obj$subfeatures.map(function (sub) {
+    formatSubfeatures(sub, depth, parse, currentDepth + 1, returnObj);
+    return parse(sub);
+  });
+  return returnObj;
+}
+
 function stateModelFactory(pluginManager) {
   return _mobxStateTree.types.model('BaseFeatureWidget', {
     id: _mst.ElementId,
     type: _mobxStateTree.types.literal('BaseFeatureWidget'),
     featureData: _mobxStateTree.types.frozen(),
-    view: _mobxStateTree.types.safeReference(pluginManager.pluggableMstType('view', 'stateModel'))
+    formattedFields: _mobxStateTree.types.frozen(),
+    unformattedFeatureData: _mobxStateTree.types.frozen(),
+    view: _mobxStateTree.types.safeReference(pluginManager.pluggableMstType('view', 'stateModel')),
+    track: _mobxStateTree.types.safeReference(pluginManager.pluggableMstType('track', 'stateModel'))
+  }).volatile(function () {
+    return {};
   }).actions(function (self) {
     return {
-      setFeatureData: function setFeatureData(data) {
-        self.featureData = data;
+      setFeatureData: function setFeatureData(featureData) {
+        self.unformattedFeatureData = featureData;
       },
       clearFeatureData: function clearFeatureData() {
         self.featureData = undefined;
+      },
+      setFormattedData: function setFormattedData(feat) {
+        self.featureData = feat;
       }
     };
+  }).actions(function (self) {
+    return {
+      afterCreate: function afterCreate() {
+        (0, _mobxStateTree.addDisposer)(self, (0, _mobx.autorun)(function () {
+          var unformattedFeatureData = self.unformattedFeatureData,
+              track = self.track;
+
+          if (unformattedFeatureData) {
+            var feature = (0, _clone.default)(unformattedFeatureData);
+
+            if (track) {
+              // eslint-disable-next-line no-underscore-dangle
+              feature.__jbrowsefmt = (0, _configuration.getConf)(track, ['formatDetails', 'feature'], {
+                feature: feature
+              });
+              var depth = (0, _configuration.getConf)(track, ['formatDetails', 'depth']);
+              formatSubfeatures(feature, depth, function (subfeature) {
+                // eslint-disable-next-line no-underscore-dangle
+                subfeature.__jbrowsefmt = (0, _configuration.getConf)(track, ['formatDetails', 'subfeatures'], {
+                  feature: subfeature
+                });
+              });
+            }
+
+            self.setFormattedData(feature);
+          }
+        }));
+      }
+    };
+  }).preProcessSnapshot(function (snap) {
+    // @ts-ignore
+    var featureData = snap.featureData,
+        finalizedFeatureData = snap.finalizedFeatureData,
+        rest = (0, _objectWithoutProperties2.default)(snap, _excluded);
+    return _objectSpread({
+      unformattedFeatureData: featureData,
+      featureData: finalizedFeatureData
+    }, rest);
+  }).postProcessSnapshot(function (snap) {
+    // 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({
+      // replacing undefined with null helps with allowing fields to be
+      // hidden, setting null is not allowed by jexl so we set it to
+      // undefined to hide. see config guide. this replacement happens both
+      // here and when displaying the featureData in base feature widget
+      finalizedFeatureData: JSON.parse(JSON.stringify(featureData, function (_, v) {
+        return typeof v === 'undefined' ? null : v;
+      }))
+    }, rest);
   });
 }

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>;
     /**

package/ReExports/Attributes.d.ts

@@ -0,0 +1,2 @@
+import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+export default Attributes;

package/ReExports/Attributes.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BaseFeatureDetail = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+
+// convert named export to default for lazy react
+var _default = _BaseFeatureDetail.Attributes;
+exports.default = _default;

package/ReExports/BaseCard.d.ts

@@ -0,0 +1,2 @@
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+export default BaseCard;

package/ReExports/BaseCard.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BaseFeatureDetail = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+
+// convert named export to default for lazy react
+var _default = _BaseFeatureDetail.BaseCard;
+exports.default = _default;

package/ReExports/DataGrid.d.ts

@@ -0,0 +1,2 @@
+import { DataGrid } from '@mui/x-data-grid';
+export { DataGrid as default };

package/ReExports/DataGrid.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _xDataGrid.DataGrid;
+  }
+});
+
+var _xDataGrid = require("@mui/x-data-grid");

package/ReExports/FeatureDetails.d.ts

@@ -0,0 +1,2 @@
+import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+export default FeatureDetails;

package/ReExports/FeatureDetails.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BaseFeatureDetail = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
+
+// convert named export to default for lazy react
+var _default = _BaseFeatureDetail.FeatureDetails;
+exports.default = _default;

package/ReExports/list.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = ['mobx', 'mobx-state-tree', 'react', 'react-dom', 'mobx-react', 'prop-types', '@material-ui/core', '@material-ui/core/SvgIcon', '@material-ui/core/utils', '@material-ui/lab', '@mui/x-data-grid', '@jbrowse/core/Plugin', '@jbrowse/core/pluggableElementTypes', '@jbrowse/core/pluggableElementTypes/ViewType', '@jbrowse/core/pluggableElementTypes/AdapterType', '@jbrowse/core/pluggableElementTypes/DisplayType', '@jbrowse/core/pluggableElementTypes/TrackType', '@jbrowse/core/pluggableElementTypes/WidgetType', '@jbrowse/core/pluggableElementTypes/models', '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType', '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType', '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType', '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType', '@jbrowse/core/pluggableElementTypes/renderers/RendererType', '@jbrowse/core/configuration', '@jbrowse/core/util/types/mst', '@jbrowse/core/ui', '@jbrowse/core/util', '@jbrowse/core/util/color', '@jbrowse/core/util/layouts', '@jbrowse/core/util/tracks', '@jbrowse/core/util/Base1DViewModel', '@jbrowse/core/util/io', '@jbrowse/core/util/mst-reflection', '@jbrowse/core/util/rxjs', '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail', '@jbrowse/core/data_adapters/BaseAdapter'];
+var _default = ['mobx', 'mobx-state-tree', 'react', 'react-dom', 'mobx-react', 'prop-types', '@jbrowse/core/Plugin', '@jbrowse/core/pluggableElementTypes', '@jbrowse/core/pluggableElementTypes/ViewType', '@jbrowse/core/pluggableElementTypes/AdapterType', '@jbrowse/core/pluggableElementTypes/DisplayType', '@jbrowse/core/pluggableElementTypes/TrackType', '@jbrowse/core/pluggableElementTypes/WidgetType', '@jbrowse/core/pluggableElementTypes/models', '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType', '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType', '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType', '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType', '@jbrowse/core/pluggableElementTypes/renderers/RendererType', '@jbrowse/core/configuration', '@jbrowse/core/util/types/mst', '@jbrowse/core/ui', '@jbrowse/core/util', '@jbrowse/core/util/color', '@jbrowse/core/util/layouts', '@jbrowse/core/util/tracks', '@jbrowse/core/util/Base1DViewModel', '@jbrowse/core/util/io', '@jbrowse/core/util/mst-reflection', '@jbrowse/core/util/rxjs', '@jbrowse/core/data_adapters/BaseAdapter'];
 exports.default = _default;