@jbrowse/core 1.7.9 → 2.0.0

package/BaseFeatureWidget/BaseFeatureDetail.d.ts

@@ -2,9 +2,19 @@ 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, prefix, width, }: {
+export declare const FieldName: ({ description, name, width, prefix, }: {
     description?: React.ReactNode;
     name: string;
     prefix?: string[] | undefined;
@@ -28,7 +38,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 +48,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;
 
@@ -25,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 _mui = require("tss-react/mui");
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+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");
@@ -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,10 +61,10 @@ 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) {
+var useStyles = (0, _mui.makeStyles)()(function (theme) {
   return {
     expansionPanelDetails: {
       display: 'block',
@@ -84,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)
@@ -91,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'
     },
@@ -112,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) {
@@ -129,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));
 }
@@ -143,16 +149,20 @@ 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;
-  var classes = useStyles();
+      prefix = _ref2$prefix === void 0 ? [] : _ref2$prefix;
+
+  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: {
@@ -165,10 +175,16 @@ 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
-  }, /*#__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)
   }));
 };
@@ -181,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, {
@@ -202,76 +221,89 @@ var ArrayValue = function ArrayValue(_ref5) {
       description = _ref5.description,
       _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) {
+
+  var _useStyles5 = useStyles(),
+      classes = _useStyles5.classes;
+
+  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 +321,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 +335,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);
@@ -327,12 +359,18 @@ var DataGridDetails = function DataGridDetails(_ref11) {
       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) {
-          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)(getStr(row[val]), 14) + 50, 80), 1000);
         })))
       };
     }); // disableSelection on click helps avoid
@@ -348,11 +386,9 @@ var DataGridDetails = function DataGridDetails(_ref11) {
       }
     }, /*#__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
@@ -386,7 +422,36 @@ 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 _useStyles6 = useStyles(),
+      classes = _useStyles6.classes;
+
+  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,15 +463,19 @@ 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];
 
     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 +486,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 > 1 && 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: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH)
+      });
     }
-
-    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 +546,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,19 +570,17 @@ 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(' - ')
-  }, /*#__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)({
+    title: generateTitle(name, id, type)
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Core details"), /*#__PURE__*/_react.default.createElement(CoreDetails, props), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Attributes"), /*#__PURE__*/_react.default.createElement(Attributes, (0, _extends2.default)({
     attributes: feature
   }, props, {
     omit: [].concat((0, _toConsumableArray2.default)(omit), coreDetails)
   })), sequenceTypes.includes(feature.type) ? /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: function FallbackComponent(_ref20) {
       var error = _ref20.error;
-      return /*#__PURE__*/_react.default.createElement(_core.Typography, {
+      return /*#__PURE__*/_react.default.createElement(_material.Typography, {
         color: "error"
-      }, "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 +602,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;