@jbrowse/core 1.7.8 → 1.7.11

package/BaseFeatureWidget/BaseFeatureDetail.d.ts

@@ -4,7 +4,7 @@ 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 function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): JSX.Element;
-export declare const FieldName: ({ description, name, prefix, width, }: {
+export declare const FieldName: ({ description, name, width, prefix, }: {
     description?: React.ReactNode;
     name: string;
     prefix?: string[] | undefined;
@@ -28,7 +28,7 @@ interface AttributeProps {
     descriptions?: Record<string, React.ReactNode>;
     prefix?: string[];
 }
-export declare const Attributes: React.FunctionComponent<AttributeProps>;
+export declare function Attributes(props: AttributeProps): JSX.Element;
 export declare const BaseAttributes: (props: BaseProps) => JSX.Element;
 export interface BaseInputProps extends BaseCardProps {
     omit?: string[];
@@ -38,10 +38,7 @@ export interface BaseInputProps extends BaseCardProps {
 }
 export declare const FeatureDetails: (props: {
     model: IAnyStateTreeNode;
-    feature: SimpleFeatureSerialized & {
-        name?: string;
-        id?: string;
-    };
+    feature: SimpleFeatureSerialized;
     depth?: number | undefined;
     omit?: string[] | undefined;
     formatter?: ((val: unknown, key: string) => React.ReactElement) | undefined;

package/BaseFeatureWidget/BaseFeatureDetail.js

@@ -7,7 +7,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BaseAttributes = exports.Attributes = void 0;
+exports.Attributes = Attributes;
+exports.BaseAttributes = void 0;
 exports.BaseCard = BaseCard;
 exports.useStyles = exports.default = exports.SimpleValue = exports.FieldName = exports.FeatureDetails = exports.BasicValue = exports.BaseCoreDetails = void 0;
 
@@ -47,7 +48,8 @@ var _SequenceFeatureDetails = _interopRequireDefault(require("./SequenceFeatureD
 
 var _util2 = require("./util");
 
-var _excluded = ["id"];
+var _excluded = ["id"],
+    _excluded2 = ["__jbrowsefmt"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,7 +61,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var MAX_FIELD_NAME_WIDTH = 170; // these are always omitted as too detailed
 
-var globalOmit = ['length', 'position', 'subfeatures', 'uniqueId', 'exonFrames', 'parentId', 'thickStart', 'thickEnd']; // coreDetails are omitted in some circumstances
+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) {
@@ -143,9 +145,9 @@ function BaseCard(_ref) {
 var FieldName = function FieldName(_ref2) {
   var description = _ref2.description,
       name = _ref2.name,
+      width = _ref2.width,
       _ref2$prefix = _ref2.prefix,
-      prefix = _ref2$prefix === void 0 ? [] : _ref2$prefix,
-      width = _ref2.width;
+      prefix = _ref2$prefix === void 0 ? [] : _ref2$prefix;
   var classes = useStyles();
   var val = [].concat((0, _toConsumableArray2.default)(prefix), [name]).join('.');
   return description ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
@@ -166,9 +168,12 @@ exports.FieldName = FieldName;
 var BasicValue = function BasicValue(_ref3) {
   var value = _ref3.value;
   var classes = useStyles();
+  var isLink = "".concat(value).match(/^https?:\/\//);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.fieldValue
-  }, /*#__PURE__*/_react.default.isValidElement(value) ? value : /*#__PURE__*/_react.default.createElement(_SanitizedHTML.default, {
+  }, /*#__PURE__*/_react.default.isValidElement(value) ? value : isLink ? /*#__PURE__*/_react.default.createElement(_SanitizedHTML.default, {
+    html: "<a href=\"".concat(value, "\">").concat(value, "</a>")
+  }) : /*#__PURE__*/_react.default.createElement(_SanitizedHTML.default, {
     html: (0, _isObject.default)(value) ? JSON.stringify(value) : String(value)
   }));
 };
@@ -203,75 +208,86 @@ var ArrayValue = function ArrayValue(_ref5) {
       _ref5$prefix = _ref5.prefix,
       prefix = _ref5$prefix === void 0 ? [] : _ref5$prefix;
   var classes = useStyles();
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.length === 1 ? (0, _isObject.default)(value[0]) ? /*#__PURE__*/_react.default.createElement(Attributes, {
-    attributes: value[0],
-    prefix: [].concat((0, _toConsumableArray2.default)(prefix), [name])
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.field
-  }, /*#__PURE__*/_react.default.createElement(FieldName, {
-    prefix: prefix,
-    description: description,
-    name: name
-  }), /*#__PURE__*/_react.default.createElement(BasicValue, {
-    value: value[0]
-  })) : value.every(function (val) {
+
+  if (value.length === 1) {
+    return (0, _isObject.default)(value[0]) ? /*#__PURE__*/_react.default.createElement(Attributes, {
+      attributes: value[0],
+      prefix: [].concat((0, _toConsumableArray2.default)(prefix), [name])
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.field
+    }, /*#__PURE__*/_react.default.createElement(FieldName, {
+      prefix: prefix,
+      description: description,
+      name: name
+    }), /*#__PURE__*/_react.default.createElement(BasicValue, {
+      value: value[0]
+    }));
+  } else if (value.every(function (val) {
     return (0, _isObject.default)(val);
-  }) ? value.map(function (val, i) {
-    return /*#__PURE__*/_react.default.createElement(Attributes, {
-      key: JSON.stringify(val) + '-' + i,
-      attributes: val,
-      prefix: [].concat((0, _toConsumableArray2.default)(prefix), [name + '-' + i])
-    });
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.field
-  }, /*#__PURE__*/_react.default.createElement(FieldName, {
-    prefix: prefix,
-    description: description,
-    name: name
-  }), value.map(function (val, i) {
+  })) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.map(function (val, i) {
+      return /*#__PURE__*/_react.default.createElement(Attributes, {
+        key: JSON.stringify(val) + '-' + i,
+        attributes: val,
+        prefix: [].concat((0, _toConsumableArray2.default)(prefix), [name + '-' + i])
+      });
+    }));
+  } else {
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: JSON.stringify(val) + '-' + i,
-      className: classes.fieldSubvalue
-    }, /*#__PURE__*/_react.default.createElement(BasicValue, {
-      value: val
+      className: classes.field
+    }, /*#__PURE__*/_react.default.createElement(FieldName, {
+      prefix: prefix,
+      description: description,
+      name: name
+    }), value.map(function (val, i) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: JSON.stringify(val) + '-' + i,
+        className: classes.fieldSubvalue
+      }, /*#__PURE__*/_react.default.createElement(BasicValue, {
+        value: val
+      }));
     }));
-  })));
+  }
+};
+
+var toLocale = function toLocale(n) {
+  return n.toLocaleString('en-US');
 };
 
 function CoreDetails(props) {
   var feature = props.feature;
-  var _ref6 = feature,
-      refName = _ref6.refName,
-      start = _ref6.start,
-      end = _ref6.end,
-      strand = _ref6.strand;
+  var obj = feature; // eslint-disable-next-line no-underscore-dangle
+
+  var formattedFeat = _objectSpread(_objectSpread({}, obj), obj.__jbrowsefmt);
+
+  var start = formattedFeat.start,
+      strand = formattedFeat.strand,
+      end = formattedFeat.end,
+      refName = formattedFeat.refName;
   var strandMap = {
     '-1': '-',
     '0': '',
     '1': '+'
   };
-  var strandStr = strandMap[strand] ? "(".concat(strandMap[strand], ")") : '';
-  var displayStart = (start + 1).toLocaleString('en-US');
-  var displayEnd = end.toLocaleString('en-US');
-  var displayRef = refName ? "".concat(refName, ":") : '';
-
-  var displayedDetails = _objectSpread(_objectSpread({}, feature), {}, {
-    length: (end - start).toLocaleString('en-US'),
-    position: "".concat(displayRef).concat(displayStart, "..").concat(displayEnd, " ").concat(strandStr)
+  var str = strandMap[strand] ? "(".concat(strandMap[strand], ")") : '';
+
+  var displayedDetails = _objectSpread(_objectSpread({}, formattedFeat), {}, {
+    length: toLocale(end - start),
+    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 (_ref7) {
-    var _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
-        value = _ref8[1];
+  }).filter(function (_ref6) {
+    var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
+        value = _ref7[1];
 
     return value !== null && value !== undefined;
-  }).map(function (_ref9) {
-    var _ref10 = (0, _slicedToArray2.default)(_ref9, 2),
-        key = _ref10[0],
-        value = _ref10[1];
+  }).map(function (_ref8) {
+    var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
+        key = _ref9[0],
+        value = _ref9[1];
 
     return /*#__PURE__*/_react.default.createElement(SimpleValue, {
       key: key,
@@ -289,10 +305,10 @@ var BaseCoreDetails = function BaseCoreDetails(props) {
 
 exports.BaseCoreDetails = BaseCoreDetails;
 
-var DataGridDetails = function DataGridDetails(_ref11) {
-  var value = _ref11.value,
-      prefix = _ref11.prefix,
-      name = _ref11.name;
+var DataGridDetails = function DataGridDetails(_ref10) {
+  var value = _ref10.value,
+      prefix = _ref10.prefix,
+      name = _ref10.name;
   var keys = Object.keys(value[0]).sort();
   var unionKeys = new Set(keys);
   value.forEach(function (val) {
@@ -303,10 +319,10 @@ var DataGridDetails = function DataGridDetails(_ref11) {
 
   if (unionKeys.size < keys.length + 5) {
     // avoids key 'id' from being used in row data
-    var rows = Object.entries(value).map(function (_ref12) {
-      var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
-          k = _ref13[0],
-          val = _ref13[1];
+    var rows = Object.entries(value).map(function (_ref11) {
+      var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+          k = _ref12[0],
+          val = _ref12[1];
 
       var id = val.id,
           rest = (0, _objectWithoutProperties2.default)(val, _excluded);
@@ -331,8 +347,7 @@ var DataGridDetails = function DataGridDetails(_ref11) {
       return {
         field: val,
         width: Math.max.apply(Math, (0, _toConsumableArray2.default)(rows.map(function (row) {
-          var result = String(row[val]);
-          return Math.min(Math.max((0, _util.measureText)(result, 14) + 50, 80), 1000);
+          return Math.min(Math.max((0, _util.measureText)(String(row[val]), 14) + 50, 80), 1000);
         })))
       };
     }); // disableSelection on click helps avoid
@@ -386,7 +401,33 @@ function generateMaxWidth(array, prefix) {
   return Math.ceil(Math.max.apply(Math, arr)) + 10;
 }
 
-var Attributes = function Attributes(props) {
+function UriAttribute(_ref13) {
+  var value = _ref13.value,
+      prefix = _ref13.prefix,
+      name = _ref13.name;
+  var classes = useStyles();
+  var uri = value.uri,
+      _value$baseUri = value.baseUri,
+      baseUri = _value$baseUri === void 0 ? '' : _value$baseUri;
+  var href;
+
+  try {
+    href = new URL(uri, baseUri).href;
+  } catch (e) {
+    href = uri;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.field
+  }, /*#__PURE__*/_react.default.createElement(FieldName, {
+    prefix: prefix,
+    name: name
+  }), /*#__PURE__*/_react.default.createElement(BasicValue, {
+    value: href
+  }));
+}
+
+function Attributes(props) {
   var attributes = props.attributes,
       _props$omit = props.omit,
       omit = _props$omit === void 0 ? [] : _props$omit,
@@ -398,7 +439,12 @@ var Attributes = function Attributes(props) {
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? [] : _props$prefix;
   var omits = [].concat((0, _toConsumableArray2.default)(omit), globalOmit);
-  var maxLabelWidth = generateMaxWidth(Object.entries(attributes).filter(function (_ref14) {
+  var __jbrowsefmt = attributes.__jbrowsefmt,
+      rest = (0, _objectWithoutProperties2.default)(attributes, _excluded2);
+
+  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];
@@ -406,7 +452,7 @@ var Attributes = 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(attributes).filter(function (_ref16) {
+  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],
         v = _ref17[1];
@@ -417,51 +463,50 @@ var Attributes = function Attributes(props) {
         key = _ref19[0],
         value = _ref19[1];
 
-    if (Array.isArray(value) && value.length > 2 && value.every(function (val) {
-      return (0, _isObject.default)(val);
-    })) {
-      return /*#__PURE__*/_react.default.createElement(DataGridDetails, {
-        key: key,
-        prefix: prefix,
-        name: key,
-        value: value
-      });
-    }
-
     var description = accessNested([].concat((0, _toConsumableArray2.default)(prefix), [key]), descriptions);
 
     if (Array.isArray(value)) {
-      return /*#__PURE__*/_react.default.createElement(ArrayValue, {
+      // 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 (0, _isObject.default)(val);
+      }) ? /*#__PURE__*/_react.default.createElement(DataGridDetails, {
+        key: key,
+        name: key,
+        prefix: prefix,
+        value: value
+      }) : /*#__PURE__*/_react.default.createElement(ArrayValue, {
         key: key,
         name: key,
         value: value,
         description: description,
         prefix: prefix
       });
-    }
-
-    if ((0, _isObject.default)(value)) {
-      return /*#__PURE__*/_react.default.createElement(Attributes, {
+    } else if ((0, _isObject.default)(value)) {
+      return (0, _util.isUriLocation)(value) ? /*#__PURE__*/_react.default.createElement(UriAttribute, {
+        key: key,
+        name: key,
+        prefix: prefix,
+        value: value
+      }) : /*#__PURE__*/_react.default.createElement(Attributes, {
         omit: omits,
         key: key,
         attributes: value,
         descriptions: descriptions,
         prefix: [].concat((0, _toConsumableArray2.default)(prefix), [key])
       });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(SimpleValue, {
+        key: key,
+        name: key,
+        value: formatter(value, key),
+        description: description,
+        prefix: prefix,
+        width: labelWidth
+      });
     }
-
-    return /*#__PURE__*/_react.default.createElement(SimpleValue, {
-      key: key,
-      name: key,
-      value: formatter(value, key),
-      description: description,
-      prefix: prefix,
-      width: labelWidth
-    });
   }));
-};
-
-exports.Attributes = Attributes;
+}
 
 var BaseAttributes = function BaseAttributes(props) {
   var feature = props.feature;
@@ -478,6 +523,12 @@ function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
 
+function generateTitle(name, id, type) {
+  return [(0, _util2.ellipses)("".concat(name) || "".concat(id)), "".concat(type)].filter(function (f) {
+    return !!f;
+  }).join(' - ');
+}
+
 var FeatureDetails = function FeatureDetails(props) {
   var _props$omit2 = props.omit,
       omit = _props$omit2 === void 0 ? [] : _props$omit2,
@@ -496,9 +547,7 @@ var FeatureDetails = function FeatureDetails(props) {
   var defaultSeqTypes = ['mRNA', 'transcript'];
   var sequenceTypes = (0, _configuration.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
   return /*#__PURE__*/_react.default.createElement(BaseCard, {
-    title: [(0, _util2.ellipses)(name || id), type].filter(function (f) {
-      return !!f;
-    }).join(' - ')
+    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)({
     attributes: feature
   }, props, {
@@ -508,7 +557,7 @@ var FeatureDetails = function FeatureDetails(props) {
       var error = _ref20.error;
       return /*#__PURE__*/_react.default.createElement(_core.Typography, {
         color: "error"
-      }, "Failed to fetch sequence for feature: ", "".concat(error));
+      }, "".concat(error));
     }
   }, /*#__PURE__*/_react.default.createElement(_SequenceFeatureDetails.default, props)) : null, subfeatures !== null && subfeatures !== void 0 && subfeatures.length ? /*#__PURE__*/_react.default.createElement(BaseCard, {
     title: "Subfeatures",
@@ -530,9 +579,15 @@ var BaseFeatureDetails = (0, _mobxReact.observer)(function (props) {
 
   if (!featureData) {
     return null;
-  }
+  } // 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 snapshotting the
+  // featureData
 
-  var feature = JSON.parse(JSON.stringify(featureData));
+
+  var feature = JSON.parse(JSON.stringify(featureData, function (_, v) {
+    return typeof v === 'undefined' ? null : v;
+  }));
 
   if (isEmpty(feature)) {
     return null;

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";
+    formattedFields: any;
+    view: import("mobx-state-tree").ReferenceIdentifier | undefined;
+    track: import("mobx-state-tree").ReferenceIdentifier | undefined;
+    finalizedFeatureData: any;
+}>;
 export { configSchema, stateModelFactory };

package/BaseFeatureWidget/index.js

@@ -1,34 +1,129 @@
 "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) {
+    var unformattedFeatureData = snap.unformattedFeatureData,
+        featureData = snap.featureData,
+        rest = (0, _objectWithoutProperties2.default)(snap, _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/assemblyManager/assembly.d.ts

@@ -1,7 +1,6 @@
 import { Instance, IAnyType } from 'mobx-state-tree';
-import { Feature } from '../util/simpleFeature';
 import PluginManager from '../PluginManager';
-import { Region } from '../util/types';
+import { Region, Feature } from '../util';
 declare type RefNameAliases = Record<string, string>;
 export interface BaseOptions {
     signal?: AbortSignal;
@@ -19,9 +18,8 @@ export default function assemblyFactory(assemblyConfigType: IAnyType, pluginMana
 }, {
     error: Error | undefined;
     regions: BasicRegion[] | undefined;
-    refNameAliases: {
-        [key: string]: string;
-    } | undefined;
+    refNameAliases: RefNameAliases | undefined;
+    lowerCaseRefNameAliases: RefNameAliases | undefined;
     cytobands: Feature[] | undefined;
 } & {
     readonly initialized: boolean;
@@ -39,14 +37,15 @@ export default function assemblyFactory(assemblyConfigType: IAnyType, pluginMana
     isValidRefName(refName: string): boolean;
 } & {
     setLoading(): void;
-    setLoaded({ adapterRegionsWithAssembly, refNameAliases, cytobands, }: {
+    setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: {
         adapterRegionsWithAssembly: Region[];
         refNameAliases: RefNameAliases;
+        lowerCaseRefNameAliases: RefNameAliases;
         cytobands: Feature[];
     }): void;
     setError(e: Error): void;
     setRegions(regions: Region[]): void;
-    setRefNameAliases(refNameAliases: RefNameAliases): void;
+    setRefNameAliases(refNameAliases: RefNameAliases, lowerCaseRefNameAliases: RefNameAliases): void;
     setCytobands(cytobands: Feature[]): void;
     afterAttach(): void;
 } & {