@jbrowse/core 1.7.11 → 2.1.0

package/BaseFeatureWidget/BaseFeatureDetail.js

@@ -1,602 +1,357 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-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;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactErrorBoundary = require("react-error-boundary");
-
-var _core = require("@material-ui/core");
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/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");
-
-var _util = require("../util");
-
-var _SanitizedHTML = _interopRequireDefault(require("../ui/SanitizedHTML"));
-
-var _SequenceFeatureDetails = _interopRequireDefault(require("./SequenceFeatureDetails"));
-
-var _util2 = require("./util");
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 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) {
-  return {
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureDetails = exports.BaseAttributes = exports.Attributes = exports.UriLink = exports.BaseCoreDetails = exports.SimpleValue = exports.BasicValue = exports.FieldName = exports.BaseCard = exports.useStyles = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importStar(require("react"));
+const react_error_boundary_1 = require("react-error-boundary");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mobx_react_1 = require("mobx-react");
+const is_object_1 = __importDefault(require("is-object"));
+// locals
+const configuration_1 = require("../configuration");
+const util_1 = require("../util");
+const SanitizedHTML_1 = __importDefault(require("../ui/SanitizedHTML"));
+const SequenceFeatureDetails_1 = __importDefault(require("./SequenceFeatureDetails"));
+const util_2 = require("./util");
+const MAX_FIELD_NAME_WIDTH = 170;
+// these are always omitted as too detailed
+const globalOmit = [
+    '__jbrowsefmt',
+    'length',
+    'position',
+    'subfeatures',
+    'uniqueId',
+    'exonFrames',
+    'parentId',
+    'thickStart',
+    'thickEnd',
+];
+// coreDetails are omitted in some circumstances
+const coreDetails = [
+    'name',
+    'start',
+    'end',
+    'strand',
+    'refName',
+    'description',
+    'type',
+];
+exports.useStyles = (0, mui_1.makeStyles)()(theme => ({
     expansionPanelDetails: {
-      display: 'block',
-      padding: theme.spacing(1)
+        display: 'block',
+        padding: theme.spacing(1),
     },
     expandIcon: {
-      color: '#FFFFFF'
+        color: '#FFFFFF',
     },
     field: {
-      display: 'flex',
-      flexWrap: 'wrap'
+        display: 'flex',
+        flexWrap: 'wrap',
     },
     fieldDescription: {
-      '&:hover': {
-        background: 'yellow'
-      }
+        '&:hover': {
+            background: 'yellow',
+        },
     },
     fieldName: {
-      wordBreak: 'break-all',
-      minWidth: '90px',
-      borderBottom: '1px solid #0003',
-      background: theme.palette.grey[200],
-      marginRight: theme.spacing(1),
-      padding: theme.spacing(0.5)
+        wordBreak: 'break-all',
+        minWidth: 90,
+        borderBottom: '1px solid #0003',
+        fontSize: 12,
+        background: theme.palette.grey[200],
+        marginRight: theme.spacing(1),
+        padding: theme.spacing(0.5),
     },
     fieldValue: {
-      wordBreak: 'break-word',
-      maxHeight: 300,
-      padding: theme.spacing(0.5),
-      overflow: 'auto'
+        wordBreak: 'break-word',
+        maxHeight: 300,
+        fontSize: 12,
+        padding: theme.spacing(0.5),
+        overflow: 'auto',
     },
     fieldSubvalue: {
-      wordBreak: 'break-word',
-      maxHeight: 300,
-      padding: theme.spacing(0.5),
-      background: theme.palette.grey[100],
-      border: "1px solid ".concat(theme.palette.grey[300]),
-      boxSizing: 'border-box',
-      overflow: 'auto'
-    }
-  };
-});
-exports.useStyles = useStyles;
-
-function BaseCard(_ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      _ref$defaultExpanded = _ref.defaultExpanded,
-      defaultExpanded = _ref$defaultExpanded === void 0 ? true : _ref$defaultExpanded;
-  var classes = useStyles();
-
-  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, {
-    expanded: expanded,
-    onChange: function onChange() {
-      return setExpanded(function (s) {
-        return !s;
-      });
+        wordBreak: 'break-word',
+        maxHeight: 300,
+        padding: theme.spacing(0.5),
+        background: theme.palette.grey[100],
+        border: `1px solid ${theme.palette.grey[300]}`,
+        boxSizing: 'border-box',
+        overflow: 'auto',
     },
-    TransitionProps: {
-      unmountOnExit: true
-    }
-  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
-      className: classes.expandIcon
-    })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
-    variant: "button"
-  }, " ", title)), /*#__PURE__*/_react.default.createElement(_core.AccordionDetails, {
-    className: classes.expansionPanelDetails
-  }, children));
+}));
+function BaseCard({ children, title, defaultExpanded = true, }) {
+    const { classes } = (0, exports.useStyles)();
+    const [expanded, setExpanded] = (0, react_1.useState)(defaultExpanded);
+    return (react_1.default.createElement(material_1.Accordion, { expanded: expanded, onChange: () => setExpanded(s => !s), TransitionProps: { unmountOnExit: true } },
+        react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
+            react_1.default.createElement(material_1.Typography, { variant: "button" },
+                " ",
+                title)),
+        react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails }, children)));
 }
-
-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;
-  var classes = useStyles();
-  var val = [].concat((0, _toConsumableArray2.default)(prefix), [name]).join('.');
-  return description ? /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    title: description,
-    placement: "left"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.fieldDescription, classes.fieldName)
-  }, val)) : /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.fieldName,
-    style: {
-      width: width
-    }
-  }, val);
+exports.BaseCard = BaseCard;
+const FieldName = ({ description, name, width, prefix = [], }) => {
+    const { classes, cx } = (0, exports.useStyles)();
+    const val = [...prefix, name].join('.');
+    return description ? (react_1.default.createElement(material_1.Tooltip, { title: description, placement: "left" },
+        react_1.default.createElement("div", { className: cx(classes.fieldDescription, classes.fieldName) }, val))) : (react_1.default.createElement("div", { className: classes.fieldName, style: { width: width } }, val));
 };
-
 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 : 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)
-  }));
+const BasicValue = ({ value }) => {
+    const { classes } = (0, exports.useStyles)();
+    const isLink = `${value}`.match(/^https?:\/\//);
+    return (react_1.default.createElement("div", { className: classes.fieldValue }, react_1.default.isValidElement(value) ? (value) : isLink ? (react_1.default.createElement(SanitizedHTML_1.default, { html: `<a href="${value}">${value}</a>` })) : (react_1.default.createElement(SanitizedHTML_1.default, { html: (0, is_object_1.default)(value) ? JSON.stringify(value) : String(value) }))));
 };
-
 exports.BasicValue = BasicValue;
-
-var SimpleValue = function SimpleValue(_ref4) {
-  var name = _ref4.name,
-      value = _ref4.value,
-      description = _ref4.description,
-      prefix = _ref4.prefix,
-      width = _ref4.width;
-  var classes = useStyles();
-  return value !== null && value !== undefined ? /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.field
-  }, /*#__PURE__*/_react.default.createElement(FieldName, {
-    prefix: prefix,
-    description: description,
-    name: name,
-    width: width
-  }), /*#__PURE__*/_react.default.createElement(BasicValue, {
-    value: value
-  })) : null;
+const SimpleValue = ({ name, value, description, prefix, width, }) => {
+    const { classes } = (0, exports.useStyles)();
+    return value !== null && value !== undefined ? (react_1.default.createElement("div", { className: classes.field },
+        react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name, width: width }),
+        react_1.default.createElement(exports.BasicValue, { value: value }))) : null;
 };
-
 exports.SimpleValue = SimpleValue;
-
-var ArrayValue = function ArrayValue(_ref5) {
-  var name = _ref5.name,
-      value = _ref5.value,
-      description = _ref5.description,
-      _ref5$prefix = _ref5.prefix,
-      prefix = _ref5$prefix === void 0 ? [] : _ref5$prefix;
-  var classes = useStyles();
-
-  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);
-  })) {
-    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", {
-      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');
+const ArrayValue = ({ name, value, description, prefix = [], }) => {
+    const { classes } = (0, exports.useStyles)();
+    if (value.length === 1) {
+        return (0, is_object_1.default)(value[0]) ? (react_1.default.createElement(Attributes, { attributes: value[0], prefix: [...prefix, name] })) : (react_1.default.createElement("div", { className: classes.field },
+            react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name }),
+            react_1.default.createElement(exports.BasicValue, { value: value[0] })));
+    }
+    else if (value.every(val => (0, is_object_1.default)(val))) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, value.map((val, i) => (react_1.default.createElement(Attributes, { key: JSON.stringify(val) + '-' + i, attributes: val, prefix: [...prefix, name + '-' + i] })))));
+    }
+    else {
+        return (react_1.default.createElement("div", { className: classes.field },
+            react_1.default.createElement(exports.FieldName, { prefix: prefix, description: description, name: name }),
+            value.map((val, i) => (react_1.default.createElement("div", { key: JSON.stringify(val) + '-' + i, className: classes.fieldSubvalue },
+                react_1.default.createElement(exports.BasicValue, { value: val }))))));
+    }
 };
-
+const toLocale = (n) => n.toLocaleString('en-US');
 function CoreDetails(props) {
-  var feature = props.feature;
-  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 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 (_ref6) {
-    var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
-        value = _ref7[1];
-
-    return value !== null && value !== undefined;
-  }).map(function (_ref8) {
-    var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-        key = _ref9[0],
-        value = _ref9[1];
-
-    return /*#__PURE__*/_react.default.createElement(SimpleValue, {
-      key: key,
-      name: key,
-      value: value
-    });
-  }));
+    const { feature } = props;
+    const obj = feature;
+    // eslint-disable-next-line no-underscore-dangle
+    const formattedFeat = { ...obj, ...obj.__jbrowsefmt };
+    const { start, strand, end, refName } = formattedFeat;
+    const strandMap = {
+        '-1': '-',
+        '0': '',
+        '1': '+',
+    };
+    const str = strandMap[strand] ? `(${strandMap[strand]})` : '';
+    const displayedDetails = {
+        ...formattedFeat,
+        length: toLocale(end - start),
+        position: `${refName}:${toLocale(start + 1)}..${toLocale(end)} ${str}`,
+    };
+    const coreRenderedDetails = {
+        position: 'Position',
+        description: 'Description',
+        name: 'Name',
+        length: 'Length',
+        type: 'Type',
+        assemblyName: 'Assembly name',
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(coreRenderedDetails)
+        .map(([key, name]) => [name, displayedDetails[key]])
+        .filter(([, value]) => value !== null && value !== undefined)
+        .map(([name, value]) => (react_1.default.createElement(exports.SimpleValue, { key: name, name: name, value: value })))));
 }
-
-var BaseCoreDetails = function BaseCoreDetails(props) {
-  return /*#__PURE__*/_react.default.createElement(BaseCard, (0, _extends2.default)({}, props, {
-    title: "Primary data"
-  }), /*#__PURE__*/_react.default.createElement(CoreDetails, props));
+const BaseCoreDetails = (props) => {
+    return (react_1.default.createElement(BaseCard, { ...props, title: "Primary data" },
+        react_1.default.createElement(CoreDetails, { ...props })));
 };
-
 exports.BaseCoreDetails = BaseCoreDetails;
-
-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) {
-    return Object.keys(val).forEach(function (k) {
-      return unionKeys.add(k);
-    });
-  });
-
-  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 id = val.id,
-          rest = (0, _objectWithoutProperties2.default)(val, _excluded);
-      return _objectSpread({
-        id: k,
-        // used by material UI
-        identifier: id
-      }, rest);
-    }); // avoids key 'id' from being used in column names, and tries
-    // to make it at the start of the colNames array
-
-    var colNames;
-
-    if (unionKeys.has('id')) {
-      unionKeys.delete('id');
-      colNames = ['identifier'].concat((0, _toConsumableArray2.default)(unionKeys));
-    } else {
-      colNames = (0, _toConsumableArray2.default)(unionKeys);
-    }
-
-    var columns = colNames.map(function (val) {
-      return {
-        field: val,
-        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);
-        })))
-      };
-    }); // disableSelection on click helps avoid
-    // https://github.com/mui-org/material-ui-x/issues/1197
-
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldName, {
-      prefix: prefix,
-      name: name
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: Math.min(rows.length, 100) * 20 + 50 + (rows.length < 100 ? 0 : 50),
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_xDataGrid.DataGrid, {
-      disableSelectionOnClick: true,
-      rowHeight: 20,
-      headerHeight: 25,
-      rows: rows,
-      rowsPerPageOptions: [],
-      hideFooterRowCount: true,
-      hideFooterSelectedRowCount: true,
-      columns: columns,
-      hideFooter: rows.length < 100
-    })));
-  }
-
-  return null;
-}; // arr = ['a','b'], obj = {a:{b:'hello}}, returns hello (with special addition to grab description also)
-
-
-function accessNested(arr) {
-  var _obj;
-
-  var obj = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  arr.forEach(function (elt) {
-    if (obj) {
-      obj = obj[elt];
+function UriLink({ value, }) {
+    const href = (0, util_1.getUriLink)(value);
+    return react_1.default.createElement(SanitizedHTML_1.default, { html: `<a href="${href}">${href}</a>` });
+}
+exports.UriLink = UriLink;
+const DataGridDetails = ({ value, prefix, name, }) => {
+    const keys = Object.keys(value[0]).sort();
+    const unionKeys = new Set(keys);
+    value.forEach((val) => Object.keys(val).forEach(k => unionKeys.add(k)));
+    if (unionKeys.size < keys.length + 5) {
+        // avoids key 'id' from being used in row data
+        const rows = Object.entries(value).map(([k, val]) => {
+            const { id, ...rest } = val;
+            return {
+                id: k,
+                identifier: id,
+                ...rest,
+            };
+        });
+        // avoids key 'id' from being used in column names, and tries
+        // to make it at the start of the colNames array
+        let colNames;
+        if (unionKeys.has('id')) {
+            unionKeys.delete('id');
+            colNames = ['identifier', ...unionKeys];
+        }
+        else {
+            colNames = [...unionKeys];
+        }
+        const columns = colNames.map(val => ({
+            field: val,
+            renderCell: (params) => {
+                const { value } = params;
+                return (0, util_1.isUriLocation)(value) ? react_1.default.createElement(UriLink, { value: value }) : (0, util_1.getStr)(value);
+            },
+            width: (0, util_1.measureGridWidth)(rows.map(r => r[val])),
+        }));
+        const rowHeight = 25;
+        const hideFooter = rows.length < 100;
+        const headerHeight = 80;
+        // disableSelection on click helps avoid
+        // https://github.com/mui-org/material-ui-x/issues/1197
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(exports.FieldName, { prefix: prefix, name: name }),
+            react_1.default.createElement("div", { style: {
+                    height: Math.min(rows.length, 100) * rowHeight +
+                        headerHeight +
+                        (hideFooter ? 0 : 50),
+                    width: '100%',
+                } },
+                react_1.default.createElement(x_data_grid_1.DataGrid, { disableSelectionOnClick: true, rowHeight: rowHeight, rows: rows, rowsPerPageOptions: [], hideFooterSelectedRowCount: true, columns: columns, hideFooter: hideFooter }))));
     }
-  });
-  return typeof obj === 'string' ? obj : typeof ((_obj = obj) === null || _obj === void 0 ? void 0 : _obj.Description) === 'string' ? obj.Description : undefined;
+    return null;
+};
+// arr = ['a','b'], obj = {a:{b:'hello}}, returns hello (with special addition to grab description also)
+function accessNested(arr, obj = {}) {
+    arr.forEach(elt => {
+        if (obj) {
+            obj = obj[elt];
+        }
+    });
+    return typeof obj === 'string'
+        ? obj
+        : typeof (obj === null || obj === void 0 ? void 0 : obj.Description) === 'string'
+            ? obj.Description
+            : undefined;
 }
-
 function generateMaxWidth(array, prefix) {
-  // @ts-ignore
-  var arr = [];
-  array.forEach(function (key, value) {
-    var val = [].concat((0, _toConsumableArray2.default)(prefix), [key[0]]).join('.');
-    arr.push((0, _util.measureText)(val, 12));
-  }); // @ts-ignore
-
-  return Math.ceil(Math.max.apply(Math, arr)) + 10;
+    // @ts-ignore
+    const arr = [];
+    array.forEach((key, value) => {
+        const val = [...prefix, key[0]].join('.');
+        arr.push((0, util_1.measureText)(val, 12));
+    });
+    // @ts-ignore
+    return Math.ceil(Math.max(...arr)) + 10;
 }
-
-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 UriAttribute({ value, prefix, name, }) {
+    const { classes } = (0, exports.useStyles)();
+    const { uri, baseUri = '' } = value;
+    let href;
+    try {
+        href = new URL(uri, baseUri).href;
+    }
+    catch (e) {
+        href = uri;
+    }
+    return (react_1.default.createElement("div", { className: classes.field },
+        react_1.default.createElement(exports.FieldName, { prefix: prefix, name: name }),
+        react_1.default.createElement(exports.BasicValue, { value: href })));
 }
-
 function Attributes(props) {
-  var attributes = props.attributes,
-      _props$omit = props.omit,
-      omit = _props$omit === void 0 ? [] : _props$omit,
-      descriptions = props.descriptions,
-      _props$formatter = props.formatter,
-      formatter = _props$formatter === void 0 ? function (val) {
-    return val;
-  } : _props$formatter,
-      _props$prefix = props.prefix,
-      prefix = _props$prefix === void 0 ? [] : _props$prefix;
-  var omits = [].concat((0, _toConsumableArray2.default)(omit), globalOmit);
-  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(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) {
-    var _ref19 = (0, _slicedToArray2.default)(_ref18, 2),
-        key = _ref19[0],
-        value = _ref19[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 (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
-      });
-    } 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
-      });
-    }
-  }));
+    const { attributes, omit = [], descriptions, formatter = val => val, prefix = [], } = props;
+    const omits = [...omit, ...globalOmit];
+    const { __jbrowsefmt, ...rest } = attributes;
+    const formattedAttributes = { ...rest, ...__jbrowsefmt };
+    const maxLabelWidth = generateMaxWidth(Object.entries(formattedAttributes).filter(([k, v]) => v !== undefined && !omits.includes(k)), prefix);
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(formattedAttributes)
+        .filter(([k, v]) => v !== undefined && !omits.includes(k))
+        .map(([key, value]) => {
+        const description = accessNested([...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 > 1 && value.every(val => (0, is_object_1.default)(val)) ? (react_1.default.createElement(DataGridDetails, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue, { key: key, name: key, value: value, description: description, prefix: prefix }));
+        }
+        else if ((0, is_object_1.default)(value)) {
+            return (0, util_1.isUriLocation)(value) ? (react_1.default.createElement(UriAttribute, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(Attributes, { ...props, omit: omits, key: key, attributes: value, descriptions: descriptions, prefix: [...prefix, key] }));
+        }
+        else {
+            return (react_1.default.createElement(exports.SimpleValue, { key: key, name: key, value: formatter(value, key), description: description, prefix: prefix, width: Math.min(maxLabelWidth, MAX_FIELD_NAME_WIDTH) }));
+        }
+    })));
 }
-
-var BaseAttributes = function BaseAttributes(props) {
-  var feature = props.feature;
-  return /*#__PURE__*/_react.default.createElement(BaseCard, (0, _extends2.default)({}, props, {
-    title: "Attributes"
-  }), /*#__PURE__*/_react.default.createElement(Attributes, (0, _extends2.default)({}, props, {
-    attributes: feature
-  })));
+exports.Attributes = Attributes;
+const BaseAttributes = (props) => {
+    const { feature } = props;
+    return (react_1.default.createElement(BaseCard, { ...props, title: "Attributes" },
+        react_1.default.createElement(Attributes, { ...props, attributes: feature })));
 };
-
 exports.BaseAttributes = BaseAttributes;
-
 function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
+    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(' - ');
+    return [(0, util_2.ellipses)(`${name}` || `${id}`), `${type}`]
+        .filter(f => !!f)
+        .join(' - ');
 }
-
-var FeatureDetails = function FeatureDetails(props) {
-  var _props$omit2 = props.omit,
-      omit = _props$omit2 === void 0 ? [] : _props$omit2,
-      model = props.model,
-      feature = props.feature,
-      _props$depth = props.depth,
-      depth = _props$depth === void 0 ? 0 : _props$depth;
-  var _feature$name = feature.name,
-      name = _feature$name === void 0 ? '' : _feature$name,
-      _feature$id = feature.id,
-      id = _feature$id === void 0 ? '' : _feature$id,
-      _feature$type = feature.type,
-      type = _feature$type === void 0 ? '' : _feature$type,
-      subfeatures = feature.subfeatures;
-  var session = (0, _util.getSession)(model);
-  var defaultSeqTypes = ['mRNA', 'transcript'];
-  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)({
-    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, {
-        color: "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",
-    defaultExpanded: !sequenceTypes.includes(feature.type)
-  }, subfeatures.map(function (sub) {
-    return /*#__PURE__*/_react.default.createElement(FeatureDetails, {
-      key: JSON.stringify(sub),
-      feature: sub,
-      model: model,
-      depth: depth + 1
-    });
-  })) : null);
+const FeatureDetails = (props) => {
+    const { omit = [], model, feature, depth = 0 } = props;
+    const { name = '', id = '', type = '', subfeatures } = feature;
+    const session = (0, util_1.getSession)(model);
+    const defaultSeqTypes = ['mRNA', 'transcript'];
+    const sequenceTypes = (0, configuration_1.getConf)(session, ['featureDetails', 'sequenceTypes']) || defaultSeqTypes;
+    return (react_1.default.createElement(BaseCard, { title: generateTitle(name, id, type) },
+        react_1.default.createElement(material_1.Typography, null, "Core details"),
+        react_1.default.createElement(CoreDetails, { ...props }),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(material_1.Typography, null, "Attributes"),
+        react_1.default.createElement(Attributes, { attributes: feature, ...props, omit: [...omit, ...coreDetails] }),
+        sequenceTypes.includes(feature.type) ? (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => (react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`)) },
+            react_1.default.createElement(SequenceFeatureDetails_1.default, { ...props }))) : null,
+        (subfeatures === null || subfeatures === void 0 ? void 0 : subfeatures.length) ? (react_1.default.createElement(BaseCard, { title: "Subfeatures", defaultExpanded: !sequenceTypes.includes(feature.type) }, subfeatures.map((sub) => (react_1.default.createElement(exports.FeatureDetails, { key: JSON.stringify(sub), feature: sub, model: model, depth: depth + 1 }))))) : null));
 };
-
 exports.FeatureDetails = FeatureDetails;
-var BaseFeatureDetails = (0, _mobxReact.observer)(function (props) {
-  var model = props.model;
-  var featureData = model.featureData;
-
-  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, function (_, v) {
-    return typeof v === 'undefined' ? null : v;
-  }));
-
-  if (isEmpty(feature)) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(FeatureDetails, {
-    model: model,
-    feature: feature
-  });
+const BaseFeatureDetails = (0, mobx_react_1.observer)((props) => {
+    const { model } = props;
+    const { featureData } = model;
+    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
+    const feature = JSON.parse(JSON.stringify(featureData, (_, v) => typeof v === 'undefined' ? null : v));
+    if (isEmpty(feature)) {
+        return null;
+    }
+    return react_1.default.createElement(exports.FeatureDetails, { model: model, feature: feature });
 });
-var _default = BaseFeatureDetails;
-exports.default = _default;
+exports.default = BaseFeatureDetails;