@jbrowse/core 2.16.1 → 2.18.0

package/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -7,10 +7,9 @@ exports.default = ArrayValue;
 const react_1 = __importDefault(require("react"));
 const is_object_1 = __importDefault(require("is-object"));
 const mui_1 = require("tss-react/mui");
-// locals
 const Attributes_1 = __importDefault(require("./Attributes"));
-const FieldName_1 = __importDefault(require("./FieldName"));
 const BasicValue_1 = __importDefault(require("./BasicValue"));
+const FieldName_1 = __importDefault(require("./FieldName"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     field: {
         display: 'flex',

package/BaseFeatureWidget/BaseFeatureDetail/Attributes.js

@@ -6,15 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Attributes;
 const react_1 = __importDefault(require("react"));
 const is_object_1 = __importDefault(require("is-object"));
-// locals
-const util_1 = require("./util");
-const util_2 = require("../../util");
-const DataGridDetails_1 = __importDefault(require("./DataGridDetails"));
 const ArrayValue_1 = __importDefault(require("./ArrayValue"));
-const UriField_1 = __importDefault(require("./UriField"));
+const DataGridDetails_1 = __importDefault(require("./DataGridDetails"));
 const SimpleField_1 = __importDefault(require("./SimpleField"));
+const UriField_1 = __importDefault(require("./UriField"));
+const util_1 = require("./util");
+const util_2 = require("../../util");
 const MAX_FIELD_NAME_WIDTH = 170;
-// these are always omitted as too detailed
 const globalOmit = [
     '__jbrowsefmt',
     'length',
@@ -37,8 +35,6 @@ function Attributes(props) {
         .map(([key, value]) => {
         const description = (0, util_1.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_1.default, { key: key, name: key, prefix: prefix, value: value })) : (react_1.default.createElement(ArrayValue_1.default, { key: key, name: key, value: value, description: description, prefix: prefix }));
         }
         else if ((0, is_object_1.default)(value)) {

package/BaseFeatureWidget/BaseFeatureDetail/BaseCard.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { BaseCardProps } from '../types';
+import type { BaseCardProps } from '../types';
 export default function BaseCard({ children, title, defaultExpanded, }: BaseCardProps): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/BaseCard.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BaseCard;
 const react_1 = __importDefault(require("react"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-// icons
-const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     expansionPanelDetails: {
         display: 'block',

package/BaseFeatureWidget/BaseFeatureDetail/BasicValue.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BasicValue;
 const react_1 = __importDefault(require("react"));
-const mui_1 = require("tss-react/mui");
-const is_object_1 = __importDefault(require("is-object"));
 const material_1 = require("@mui/material");
-// locals
+const is_object_1 = __importDefault(require("is-object"));
+const mui_1 = require("tss-react/mui");
 const ui_1 = require("../../ui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     fieldValue: {

package/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { BaseProps } from '../types';
+import type { BaseProps } from '../types';
 export default function CoreDetails(props: BaseProps): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/CoreDetails.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CoreDetails;
 const react_1 = __importDefault(require("react"));
-// locals
-const util_1 = require("../../util");
-const SimpleField_1 = __importDefault(require("./SimpleField"));
 const Position_1 = __importDefault(require("./Position"));
+const SimpleField_1 = __importDefault(require("./SimpleField"));
+const util_1 = require("../../util");
 function CoreDetails(props) {
     const { feature } = props;
     const obj = feature;

package/BaseFeatureWidget/BaseFeatureDetail/DataGridDetails.js

@@ -28,13 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DataGridDetails;
 const react_1 = __importStar(require("react"));
-const mui_1 = require("tss-react/mui");
-const x_data_grid_1 = require("@mui/x-data-grid");
 const material_1 = require("@mui/material");
-// locals
-const util_1 = require("../../util");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mui_1 = require("tss-react/mui");
 const FieldName_1 = __importDefault(require("./FieldName"));
 const ui_1 = require("../../ui");
+const util_1 = require("../../util");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     margin: {
         marginBottom: theme.spacing(4),
@@ -50,12 +49,11 @@ function DataGridDetails({ value, prefix, name, }) {
     const [checked, setChecked] = (0, react_1.useState)(false);
     const keys = Object.keys(value[0]).sort();
     const unionKeys = new Set(keys);
-    // avoids key 'id' from being used in row data
     const rows = Object.entries(value).map(([k, val]) => {
         const { id, ...rest } = val;
         return {
-            id: k, // used by material UI
-            identifier: id, // renamed from id to identifier
+            id: k,
+            identifier: id,
             ...rest,
         };
     });
@@ -64,8 +62,6 @@ function DataGridDetails({ value, prefix, name, }) {
             unionKeys.add(k);
         }
     }
-    // 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');
@@ -81,23 +77,24 @@ function DataGridDetails({ value, prefix, name, }) {
             react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: checked, onChange: event => {
                         setChecked(event.target.checked);
                     } }), label: react_1.default.createElement(material_1.Typography, { variant: "body2" }, "Show options") }),
-            react_1.default.createElement(x_data_grid_1.DataGrid, { autoHeight: true, disableRowSelectionOnClick: true, rows: rows, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: {
-                    toolbar: checked ? x_data_grid_1.GridToolbar : null,
-                }, slotProps: {
-                    toolbar: {
-                        printOptions: {
-                            disableToolbarButton: true,
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                react_1.default.createElement(x_data_grid_1.DataGrid, { disableRowSelectionOnClick: true, rows: rows, rowHeight: 20, columnHeaderHeight: 35, hideFooter: rows.length < 25, slots: {
+                        toolbar: checked ? x_data_grid_1.GridToolbar : null,
+                    }, slotProps: {
+                        toolbar: {
+                            printOptions: {
+                                disableToolbarButton: true,
+                            },
+                        },
+                    }, columns: colNames.map((val, index) => ({
+                        field: val,
+                        renderCell: params => {
+                            const value = params.value;
+                            return (react_1.default.createElement("div", { className: classes.cell },
+                                react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value || '') })));
                         },
-                    },
-                }, columns: colNames.map((val, index) => ({
-                    field: val,
-                    renderCell: params => {
-                        const value = params.value;
-                        return (react_1.default.createElement("div", { className: classes.cell },
-                            react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value || '') })));
-                    },
-                    width: widths[index],
-                })) })));
+                        width: widths[index],
+                    })) }))));
     }
     return null;
 }

package/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { SimpleFeatureSerialized } from '../../util';
+import type { SimpleFeatureSerialized } from '../../util';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 export default function FeatureDetails(props: {
     model: IAnyStateTreeNode;
     feature: SimpleFeatureSerialized;

package/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -7,15 +7,13 @@ exports.default = FeatureDetails;
 const react_1 = __importDefault(require("react"));
 const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
 const material_1 = require("@mui/material");
-// locals
-const util_1 = require("../../util");
-const ui_1 = require("../../ui");
-const util_2 = require("./util");
+const util_1 = require("./util");
 const SequenceFeatureDetails_1 = __importDefault(require("../SequenceFeatureDetails"));
 const Attributes_1 = __importDefault(require("./Attributes"));
 const BaseCard_1 = __importDefault(require("./BaseCard"));
 const CoreDetails_1 = __importDefault(require("./CoreDetails"));
-// coreDetails are omitted in some circumstances
+const ui_1 = require("../../ui");
+const util_2 = require("../../util");
 const coreDetails = [
     'name',
     'start',
@@ -29,15 +27,15 @@ function FeatureDetails(props) {
     const { omit = [], model, feature, depth = 0 } = props;
     const { maxDepth } = model;
     const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
-    const pm = (0, util_1.getEnv)(model).pluginManager;
-    const session = (0, util_1.getSession)(model);
+    const pm = (0, util_2.getEnv)(model).pluginManager;
+    const session = (0, util_2.getSession)(model);
     const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
         session,
         feature,
         model,
     });
     const m = mate;
-    return (react_1.default.createElement(BaseCard_1.default, { title: (0, util_2.generateTitle)(name, id, type) },
+    return (react_1.default.createElement(BaseCard_1.default, { title: (0, util_1.generateTitle)(name, id, type) },
         react_1.default.createElement(material_1.Typography, null, "Core details"),
         react_1.default.createElement(CoreDetails_1.default, { ...props }),
         m ? (react_1.default.createElement(react_1.default.Fragment, null,

package/BaseFeatureWidget/BaseFeatureDetail/Position.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { BaseProps } from '../types';
+import type { BaseProps } from '../types';
 export default function Position(props: BaseProps): React.JSX.Element;

package/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SimpleField;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
-const FieldName_1 = __importDefault(require("./FieldName"));
 const BasicValue_1 = __importDefault(require("./BasicValue"));
+const FieldName_1 = __importDefault(require("./FieldName"));
 const useStyles = (0, mui_1.makeStyles)()({
     field: {
         display: 'flex',

package/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = UriField;
 const react_1 = __importDefault(require("react"));
-const FieldName_1 = __importDefault(require("./FieldName"));
 const mui_1 = require("tss-react/mui");
 const BasicValue_1 = __importDefault(require("./BasicValue"));
+const FieldName_1 = __importDefault(require("./FieldName"));
 const useStyles = (0, mui_1.makeStyles)()({
     field: {
         display: 'flex',

package/BaseFeatureWidget/BaseFeatureDetail/index.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { BaseCardProps, BaseProps } from '../types';
-import BaseCard from './BaseCard';
-import FeatureDetails from './FeatureDetails';
+import type { BaseCardProps, BaseProps } from '../types';
 export declare const BaseCoreDetails: (props: BaseProps) => React.JSX.Element;
 export declare const BaseAttributes: (props: BaseProps) => React.JSX.Element;
 export interface BaseInputProps extends BaseCardProps {
@@ -12,4 +10,5 @@ export interface BaseInputProps extends BaseCardProps {
 }
 declare const BaseFeatureDetail: ({ model }: BaseInputProps) => React.JSX.Element | null;
 export default BaseFeatureDetail;
-export { BaseCard, FeatureDetails };
+export { default as BaseCard } from './BaseCard';
+export { default as FeatureDetails } from './FeatureDetails';

package/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -6,17 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureDetails = exports.BaseCard = exports.BaseAttributes = exports.BaseCoreDetails = void 0;
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
-// utils
-const ui_1 = require("../../ui");
 const util_1 = require("./util");
 const util_2 = require("../util");
-// locals
 const Attributes_1 = __importDefault(require("./Attributes"));
 const BaseCard_1 = __importDefault(require("./BaseCard"));
-exports.BaseCard = BaseCard_1.default;
 const CoreDetails_1 = __importDefault(require("./CoreDetails"));
 const FeatureDetails_1 = __importDefault(require("./FeatureDetails"));
-exports.FeatureDetails = FeatureDetails_1.default;
+const ui_1 = require("../../ui");
 const BaseCoreDetails = (props) => {
     const { title = 'Primary data' } = props;
     return (react_1.default.createElement(BaseCard_1.default, { ...props, title: title },
@@ -38,12 +34,12 @@ const BaseFeatureDetail = (0, mobx_react_1.observer)(function ({ model }) {
         return null;
     }
     else {
-        // 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 featureData2 = (0, util_2.replaceUndefinedWithNull)(featureData);
         return (0, util_1.isEmpty)(featureData2) ? null : (react_1.default.createElement(FeatureDetails_1.default, { model: model, feature: featureData2 }));
     }
 });
 exports.default = BaseFeatureDetail;
+var BaseCard_2 = require("./BaseCard");
+Object.defineProperty(exports, "BaseCard", { enumerable: true, get: function () { return __importDefault(BaseCard_2).default; } });
+var FeatureDetails_2 = require("./FeatureDetails");
+Object.defineProperty(exports, "FeatureDetails", { enumerable: true, get: function () { return __importDefault(FeatureDetails_2).default; } });

package/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -21,11 +21,6 @@ function generateTitle(name, id, type) {
 function generateMaxWidth(array, prefix) {
     return (Math.ceil((0, util_1.max)(array.map(key => (0, util_1.measureText)([...prefix, key[0]].join('.'), 12)))) + 10);
 }
-// pick using a path from an object, similar to _.get from lodash with special
-// logic for Descriptions from e.g. VCF headers
-//
-// @param arr  example ['a','b'], obj = {a:{b:'hello}}
-// @returns hello (with special addition to grab description also)
 function accessNested(arr, obj = {}) {
     let obj2 = obj;
     arr.forEach(elt => {

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SimpleFeatureSerialized } from '../../util';
-import { BaseFeatureWidgetModel } from '../stateModelFactory';
+import type { SimpleFeatureSerialized } from '../../util';
+import type { BaseFeatureWidgetModel } from '../stateModelFactory';
 declare const SequenceFeatureDetails: ({ model, feature, }: {
     model: BaseFeatureWidgetModel;
     feature: SimpleFeatureSerialized;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeatureDetails.js

@@ -29,17 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-// locals
 const hooks_1 = require("./hooks");
 const ui_1 = require("../../ui");
-// icons
 const SequenceFeatureMenu_1 = __importDefault(require("./dialogs/SequenceFeatureMenu"));
 const SequenceTypeSelector_1 = __importDefault(require("./dialogs/SequenceTypeSelector"));
-// lazies
 const SequencePanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequencePanel'))));
 const SequenceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/SequenceDialog'))));
-// set the key on this component to feature.id to clear state after new feature
-// is selected
 const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, feature, }) {
     const { sequenceFeatureDetails } = model;
     const { upDownBp } = sequenceFeatureDetails;
@@ -57,8 +52,6 @@ const SequenceFeatureDetails = (0, mobx_react_1.observer)(function ({ model, fea
                     {
                         label: 'Open in dialog',
                         onClick: () => {
-                            // this is given a setTimeout because it allows the menu to
-                            // close before dialog opens
                             setTimeout(() => {
                                 setOpenInDialog(true);
                             }, 1);

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseFeatureWidgetModel } from '../stateModelFactory';
-import { SimpleFeatureSerialized } from '../../util';
+import type { SimpleFeatureSerialized } from '../../util';
+import type { BaseFeatureWidgetModel } from '../stateModelFactory';
 declare const SequenceFeaturePanel: ({ model, feature, }: {
     model: BaseFeatureWidgetModel;
     feature: SimpleFeatureSerialized;

package/BaseFeatureWidget/SequenceFeatureDetails/SequenceFeaturePanel.js

@@ -27,15 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-// locals
 const ui_1 = require("../../ui");
 const util_1 = require("../../util");
-// icons
-const Help_1 = __importDefault(require("@mui/icons-material/Help"));
-// lazies
 const SequenceFeatureDetails = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SequenceFeatureDetails'))));
 const HelpDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/HelpDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -47,9 +44,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         marginBottom: theme.spacing(4),
     },
 }));
-// display the stitched-together sequence of a gene's CDS, cDNA, or protein
-// sequence. this is a best effort and weird genomic phenomena could lead these
-// to not be 100% accurate
 const SequenceFeaturePanel = (0, mobx_react_1.observer)(function ({ model, feature, }) {
     const { classes } = useStyles();
     const [shown, setShown] = (0, react_1.useState)(false);

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { SimpleFeatureSerialized } from '../../util';
-import { SeqState } from '../util';
-import { SequenceFeatureDetailsModel } from './model';
+import type { SequenceFeatureDetailsModel } from './model';
+import type { SimpleFeatureSerialized } from '../../util';
+import type { SeqState } from '../util';
 interface SequencePanelProps {
     sequence: SeqState;
     feature: SimpleFeatureSerialized;

package/BaseFeatureWidget/SequenceFeatureDetails/SequencePanel.js

@@ -5,14 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
-// locals
 const util_1 = require("../../util");
 const util_2 = require("../util");
-// panel types
 const CDNASequence_1 = __importDefault(require("./seqtypes/CDNASequence"));
-const ProteinSequence_1 = __importDefault(require("./seqtypes/ProteinSequence"));
-const GenomicSequence_1 = __importDefault(require("./seqtypes/GenomicSequence"));
 const CDSSequence_1 = __importDefault(require("./seqtypes/CDSSequence"));
+const GenomicSequence_1 = __importDefault(require("./seqtypes/GenomicSequence"));
+const ProteinSequence_1 = __importDefault(require("./seqtypes/ProteinSequence"));
 function getStrand(strand) {
     if (strand === -1) {
         return '(-)';
@@ -26,7 +24,6 @@ function getStrand(strand) {
 }
 function WordWrap({ children }) {
     return (react_1.default.createElement("pre", { style: {
-            /* raw styles instead of className so that html copy works */
             fontFamily: 'monospace',
             color: 'black',
             fontSize: 11,
@@ -34,7 +31,6 @@ function WordWrap({ children }) {
 }
 function NoWordWrap({ children }) {
     return (react_1.default.createElement("div", { style: {
-            /* raw styles instead of className so that html copy works */
             fontFamily: 'monospace',
             color: 'black',
             fontSize: 11,
@@ -44,9 +40,27 @@ function NoWordWrap({ children }) {
         } }, children));
 }
 const SequencePanel = (0, mobx_react_1.observer)(react_1.default.forwardRef(function S(props, ref) {
-    const { model, feature } = props;
+    const { sequence, model, feature } = props;
     const { showCoordinates, mode } = model;
-    let { sequence: { seq, upstream = '', downstream = '' }, } = props;
+    const Container = showCoordinates ? WordWrap : NoWordWrap;
+    return (react_1.default.createElement("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' } },
+        react_1.default.createElement(Container, null,
+            react_1.default.createElement(SequenceName, { model: model, mode: mode, feature: feature }),
+            react_1.default.createElement(SequenceContents, { model: model, mode: mode, feature: feature, sequence: sequence }))));
+}));
+function SequenceName({ mode, model, feature, }) {
+    return (react_1.default.createElement("div", { style: { background: 'white' } }, `>${[
+        [feature.name || feature.id, mode].filter(f => !!f).join('-'),
+        `${feature.refName}:${(0, util_1.toLocale)(feature.start + 1)}-${(0, util_1.toLocale)(feature.end)}${getStrand(feature.strand)}`,
+        mode.endsWith('updownstream')
+            ? `+/- ${(0, util_1.toLocale)(model.upDownBp)} up/downstream bp`
+            : '',
+    ]
+        .filter(f => !!f)
+        .join(' ')}\n`));
+}
+function SequenceContents({ mode, feature, sequence, model, }) {
+    let { seq, upstream = '', downstream = '' } = sequence;
     const { subfeatures = [] } = feature;
     const children = subfeatures
         .sort((a, b) => a.start - b.start)
@@ -55,15 +69,6 @@ const SequencePanel = (0, mobx_react_1.observer)(react_1.default.forwardRef(func
         start: sub.start - feature.start,
         end: sub.end - feature.start,
     }));
-    // we filter duplicate entries in cds and exon lists duplicate entries
-    // may be rare but was seen in Gencode v36 track NCList, likely a bug
-    // on GFF3 or probably worth ignoring here (produces broken protein
-    // translations if included)
-    //
-    // position 1:224,800,006..225,203,064 gene ENSG00000185842.15 first
-    // transcript ENST00000445597.6
-    //
-    // http://localhost:3000/?config=test_data%2Fconfig.json&session=share-FUl7G1isvF&password=HXh5Y
     let cds = (0, util_2.dedupe)(children.filter(sub => sub.type === 'CDS'));
     let utr = (0, util_2.dedupe)(children.filter(sub => { var _a; return (_a = sub.type) === null || _a === void 0 ? void 0 : _a.match(/utr/i); }));
     let exons = (0, util_2.dedupe)(children.filter(sub => sub.type === 'exon'));
@@ -78,8 +83,6 @@ const SequencePanel = (0, mobx_react_1.observer)(react_1.default.forwardRef(func
         });
     }
     if (feature.strand === -1) {
-        // doing this in a single assignment is needed because downstream and
-        // upstream are swapped so this avoids a temp variable
         ;
         [seq, upstream, downstream] = [
             (0, util_1.revcom)(seq),
@@ -91,18 +94,6 @@ const SequencePanel = (0, mobx_react_1.observer)(react_1.default.forwardRef(func
         utr = (0, util_2.revlist)(utr, seq.length);
     }
     const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
-    const Container = showCoordinates ? WordWrap : NoWordWrap;
-    return (react_1.default.createElement("div", { "data-testid": "sequence_panel", ref: ref, style: { maxHeight: 300, overflow: 'auto' } },
-        react_1.default.createElement(Container, null,
-            react_1.default.createElement("div", { style: { background: 'white' } }, `>${[
-                `${feature.name || feature.id}-${mode}`,
-                `${feature.refName}:${(0, util_1.toLocale)(feature.start + 1)}-${(0, util_1.toLocale)(feature.end)}${getStrand(feature.strand)}`,
-                mode.endsWith('updownstream')
-                    ? `+/- ${(0, util_1.toLocale)(model.upDownBp)} up/downstream bp`
-                    : '',
-            ]
-                .filter(f => !!f)
-                .join(' ')}\n`),
-            mode === 'genomic' ? (react_1.default.createElement(GenomicSequence_1.default, { feature: feature, model: model, sequence: seq })) : mode === 'genomic_sequence_updownstream' ? (react_1.default.createElement(GenomicSequence_1.default, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(CDSSequence_1.default, { model: model, cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq })) : mode === 'protein' ? (react_1.default.createElement(ProteinSequence_1.default, { model: model, cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : (react_1.default.createElement("div", null, "Unknown type")))));
-}));
+    return (react_1.default.createElement(react_1.default.Fragment, null, mode === 'genomic' ? (react_1.default.createElement(GenomicSequence_1.default, { feature: feature, model: model, sequence: seq })) : mode === 'genomic_sequence_updownstream' ? (react_1.default.createElement(GenomicSequence_1.default, { model: model, feature: feature, sequence: seq, upstream: upstream, downstream: downstream })) : mode === 'cds' ? (react_1.default.createElement(CDSSequence_1.default, { model: model, cds: cds, sequence: seq })) : mode === 'cdna' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq })) : mode === 'protein' ? (react_1.default.createElement(ProteinSequence_1.default, { model: model, cds: cds, codonTable: codonTable, sequence: seq })) : mode === 'gene' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, utr: utr, sequence: seq, includeIntrons: true })) : mode === 'gene_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, includeIntrons: true, collapseIntron: true })) : mode === 'gene_updownstream' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true })) : mode === 'gene_updownstream_collapsed_intron' ? (react_1.default.createElement(CDNASequence_1.default, { model: model, exons: exons, feature: feature, cds: cds, sequence: seq, utr: utr, upstream: upstream, downstream: downstream, includeIntrons: true, collapseIntron: true })) : (react_1.default.createElement("div", null, "Unknown type"))));
+}
 exports.default = SequencePanel;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/HelpDialog.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = HelpDialog;
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
-// icons
 const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const material_1 = require("@mui/material");
 function HelpDialog({ handleClose, }) {
     return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: () => {
             handleClose();

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SimpleFeatureSerialized } from '../../../util';
-import { BaseFeatureWidgetModel } from '../../stateModelFactory';
+import type { SimpleFeatureSerialized } from '../../../util';
+import type { BaseFeatureWidgetModel } from '../../stateModelFactory';
 declare const SequenceDialog: ({ handleClose, model, feature, }: {
     handleClose: () => void;
     feature: SimpleFeatureSerialized;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceDialog.js

@@ -27,13 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-// locals
-const hooks_1 = require("../hooks");
+const mui_1 = require("tss-react/mui");
 const SequencePanel_1 = __importDefault(require("../SequencePanel"));
+const hooks_1 = require("../hooks");
 const SequenceFeatureMenu_1 = __importDefault(require("./SequenceFeatureMenu"));
 const SequenceTypeSelector_1 = __importDefault(require("./SequenceTypeSelector"));
 const useStyles = (0, mui_1.makeStyles)()({

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SequenceFeatureDetailsModel } from '../model';
-import { MenuItem } from '../../../ui';
+import type { MenuItem } from '../../../ui';
+import type { SequenceFeatureDetailsModel } from '../model';
 interface Props {
     model: SequenceFeatureDetailsModel;
     extraItems?: MenuItem[];

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceFeatureMenu.js

@@ -27,15 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const file_saver_1 = require("file-saver");
-// locals
+const mobx_react_1 = require("mobx-react");
 const CascadingMenuButton_1 = __importDefault(require("../../../ui/CascadingMenuButton"));
-// icons
-const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
-// lazies
 const SequenceFeatureSettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./SettingsDialog'))));
 const SequenceFeatureMenu = (0, mobx_react_1.observer)(react_1.default.forwardRef(function SequenceFeatureMenu2({ model, extraItems = [] }, ref) {
     if (typeof ref === 'function') {

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SequenceTypeSelector.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SequenceFeatureDetailsModel } from '../model';
+import type { SequenceFeatureDetailsModel } from '../model';
 declare const SequenceTypeSelector: ({ model, }: {
     model: SequenceFeatureDetailsModel;
 }) => React.JSX.Element;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SettingsDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SequenceFeatureDetailsModel } from '../model';
+import type { SequenceFeatureDetailsModel } from '../model';
 declare const SequenceFeatureSettingsDialog: ({ handleClose, model, }: {
     handleClose: () => void;
     model: SequenceFeatureDetailsModel;

package/BaseFeatureWidget/SequenceFeatureDetails/dialogs/SettingsDialog.js

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
-const mui_1 = require("tss-react/mui");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     formElt: {
         margin: theme.spacing(3),