@jbrowse/core 1.7.10 → 2.0.1

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;
@@ -24,7 +34,7 @@ export declare const BaseCoreDetails: (props: BaseProps) => JSX.Element;
 interface AttributeProps {
     attributes: Record<string, any>;
     omit?: string[];
-    formatter?: (val: unknown, key: string) => React.ReactElement;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
     descriptions?: Record<string, React.ReactNode>;
     prefix?: string[];
 }
@@ -34,14 +44,14 @@ export interface BaseInputProps extends BaseCardProps {
     omit?: string[];
     model: any;
     descriptions?: Record<string, React.ReactNode>;
-    formatter?: (val: unknown, key: string) => React.ReactElement;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
 }
 export declare const FeatureDetails: (props: {
     model: IAnyStateTreeNode;
     feature: SimpleFeatureSerialized;
     depth?: number | undefined;
     omit?: string[] | undefined;
-    formatter?: ((val: unknown, key: string) => React.ReactElement) | undefined;
+    formatter?: ((val: unknown, key: string) => React.ReactNode) | undefined;
 }) => JSX.Element;
 declare const BaseFeatureDetails: (props: BaseInputProps) => JSX.Element | null;
 export default BaseFeatureDetails;

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, {
@@ -276,22 +292,33 @@ function CoreDetails(props) {
     position: "".concat(refName, ":").concat(toLocale(start + 1), "..").concat(toLocale(end), " ").concat(str)
   });
 
-  var coreRenderedDetails = ['Position', 'Description', 'Name', 'Length', 'Type'];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, coreRenderedDetails.map(function (key) {
-    return [key, displayedDetails[key.toLowerCase()]];
-  }).filter(function (_ref6) {
+  var coreRenderedDetails = {
+    position: 'Position',
+    description: 'Description',
+    name: 'Name',
+    length: 'Length',
+    type: 'Type',
+    assemblyName: 'Assembly name'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.entries(coreRenderedDetails).map(function (_ref6) {
     var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-        value = _ref7[1];
+        key = _ref7[0],
+        name = _ref7[1];
 
-    return value !== null && value !== undefined;
-  }).map(function (_ref8) {
+    return [name, displayedDetails[key]];
+  }).filter(function (_ref8) {
     var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-        key = _ref9[0],
         value = _ref9[1];
 
+    return value !== null && value !== undefined;
+  }).map(function (_ref10) {
+    var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
+        name = _ref11[0],
+        value = _ref11[1];
+
     return /*#__PURE__*/_react.default.createElement(SimpleValue, {
-      key: key,
-      name: key,
+      key: name,
+      name: name,
       value: value
     });
   }));
@@ -305,10 +332,10 @@ var BaseCoreDetails = function BaseCoreDetails(props) {
 
 exports.BaseCoreDetails = BaseCoreDetails;
 
-var DataGridDetails = function DataGridDetails(_ref10) {
-  var value = _ref10.value,
-      prefix = _ref10.prefix,
-      name = _ref10.name;
+var DataGridDetails = function DataGridDetails(_ref12) {
+  var value = _ref12.value,
+      prefix = _ref12.prefix,
+      name = _ref12.name;
   var keys = Object.keys(value[0]).sort();
   var unionKeys = new Set(keys);
   value.forEach(function (val) {
@@ -319,10 +346,10 @@ var DataGridDetails = function DataGridDetails(_ref10) {
 
   if (unionKeys.size < keys.length + 5) {
     // avoids key 'id' from being used in row data
-    var rows = Object.entries(value).map(function (_ref11) {
-      var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
-          k = _ref12[0],
-          val = _ref12[1];
+    var rows = Object.entries(value).map(function (_ref13) {
+      var _ref14 = (0, _slicedToArray2.default)(_ref13, 2),
+          k = _ref14[0],
+          val = _ref14[1];
 
       var id = val.id,
           rest = (0, _objectWithoutProperties2.default)(val, _excluded);
@@ -343,11 +370,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 +397,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
@@ -401,11 +433,14 @@ function generateMaxWidth(array, prefix) {
   return Math.ceil(Math.max.apply(Math, arr)) + 10;
 }
 
-function UriAttribute(_ref13) {
-  var value = _ref13.value,
-      prefix = _ref13.prefix,
-      name = _ref13.name;
-  var classes = useStyles();
+function UriAttribute(_ref15) {
+  var value = _ref15.value,
+      prefix = _ref15.prefix,
+      name = _ref15.name;
+
+  var _useStyles6 = useStyles(),
+      classes = _useStyles6.classes;
+
   var uri = value.uri,
       _value$baseUri = value.baseUri,
       baseUri = _value$baseUri === void 0 ? '' : _value$baseUri;
@@ -444,31 +479,30 @@ function Attributes(props) {
 
   var formattedAttributes = _objectSpread(_objectSpread({}, rest), __jbrowsefmt);
 
-  var maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(function (_ref14) {
-    var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
-        k = _ref15[0],
-        v = _ref15[1];
-
-    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 maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(function (_ref16) {
     var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
         k = _ref17[0],
         v = _ref17[1];
 
     return v !== undefined && !omits.includes(k);
-  }).map(function (_ref18) {
+  }), prefix);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.entries(formattedAttributes).filter(function (_ref18) {
     var _ref19 = (0, _slicedToArray2.default)(_ref18, 2),
-        key = _ref19[0],
-        value = _ref19[1];
+        k = _ref19[0],
+        v = _ref19[1];
+
+    return v !== undefined && !omits.includes(k);
+  }).map(function (_ref20) {
+    var _ref21 = (0, _slicedToArray2.default)(_ref20, 2),
+        key = _ref21[0],
+        value = _ref21[1];
 
     var description = accessNested([].concat((0, _toConsumableArray2.default)(prefix), [key]), descriptions);
 
     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,
@@ -488,13 +522,13 @@ function Attributes(props) {
         name: key,
         prefix: prefix,
         value: value
-      }) : /*#__PURE__*/_react.default.createElement(Attributes, {
+      }) : /*#__PURE__*/_react.default.createElement(Attributes, (0, _extends2.default)({}, props, {
         omit: omits,
         key: key,
         attributes: value,
         descriptions: descriptions,
         prefix: [].concat((0, _toConsumableArray2.default)(prefix), [key])
-      });
+      }));
     } else {
       return /*#__PURE__*/_react.default.createElement(SimpleValue, {
         key: key,
@@ -502,7 +536,7 @@ function Attributes(props) {
         value: formatter(value, key),
         description: description,
         prefix: prefix,
-        width: labelWidth
+        width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH)
       });
     }
   }));
@@ -548,14 +582,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, {
+    FallbackComponent: function FallbackComponent(_ref22) {
+      var error = _ref22.error;
+      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)
@@ -193,6 +195,7 @@ var SequencePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref)
     style: {
       fontFamily: 'monospace',
       wordWrap: 'break-word',
+      fontSize: 12,
       maxWidth: 600
     }
   }, ">".concat(feature.name || feature.id || 'unknown', "-").concat(mode, "\n"), mode === 'cds' ? /*#__PURE__*/_react.default.createElement(GeneCDS, {
@@ -250,7 +253,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 +427,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 +463,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 +484,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/BaseFeatureWidget/types.d.ts

@@ -4,6 +4,7 @@ import { SimpleFeatureSerialized } from '../util/simpleFeature';
 import { AbstractViewModel } from '../util';
 export interface BaseProps extends BaseCardProps {
     feature: SimpleFeatureSerialized;
+    formatter?: (val: unknown, key: string) => React.ReactNode;
     descriptions?: Record<string, React.ReactNode>;
     model?: IAnyStateTreeNode & {
         view?: AbstractViewModel & {