react-msaview 3.0.0 → 3.0.2

package/dist/components/dialogs/SettingsDialog.js

@@ -8,47 +8,56 @@ const useStyles = makeStyles()(theme => ({
     field: {
         margin: theme.spacing(4),
     },
+    flex: {
+        display: 'flex',
+    },
 }));
-const SettingsDialog = observer(function ({ model, onClose, }) {
+function FormControlLabel2(rest) {
+    return (React.createElement("div", null,
+        React.createElement(FormControlLabel, { ...rest })));
+}
+const SettingsContent = observer(function ({ model }) {
     const { classes } = useStyles();
     const { bgColor, colWidth, colorSchemeName, drawTree, drawNodeBubbles, labelsAlignRight, noTree, rowHeight, showBranchLen, treeWidthMatchesArea, treeWidth, } = model;
-    return (React.createElement(Dialog, { open: true, onClose: () => onClose(), title: "Settings" },
-        React.createElement(DialogContent, null,
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: showBranchLen, onChange: () => model.setShowBranchLen(!showBranchLen) }), label: "Show branch length" }),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: bgColor, onChange: () => model.setBgColor(!bgColor) }), label: "Color background" }),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: drawNodeBubbles, onChange: () => model.setDrawNodeBubbles(!drawNodeBubbles) }), label: "Draw node bubbles" }),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: drawTree, onChange: () => model.setDrawTree(!drawTree) }), label: "Draw tree (if available)" }),
-            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: labelsAlignRight, onChange: () => model.setLabelsAlignRight(!labelsAlignRight) }), label: "Labels align right" }),
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            React.createElement(Button, { onClick: () => model.clearHidden() }, "Clear hidden"),
+            React.createElement("h1", null, "Tree options"),
+            React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: showBranchLen, onChange: () => model.setShowBranchLen(!showBranchLen) }), label: "Show branch length?" }),
+            React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: drawNodeBubbles, onChange: () => model.setDrawNodeBubbles(!drawNodeBubbles) }), label: "Draw clickable bubbles on tree branches?" }),
+            React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: drawTree, onChange: () => model.setDrawTree(!drawTree) }), label: "Show tree?" }),
+            React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: labelsAlignRight, onChange: () => model.setLabelsAlignRight(!labelsAlignRight) }), label: "Tree labels align right?" }),
             !noTree ? (React.createElement("div", null,
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: treeWidthMatchesArea, onChange: () => model.setTreeWidthMatchesArea(!treeWidthMatchesArea) }), label: "Make tree width fit to tree area?" }),
-                !treeWidthMatchesArea ? (React.createElement("div", { style: { display: 'flex' } },
+                React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: treeWidthMatchesArea, onChange: () => model.setTreeWidthMatchesArea(!treeWidthMatchesArea) }), label: "Make tree width fit to tree area?" }),
+                !treeWidthMatchesArea ? (React.createElement("div", { className: classes.flex },
                     React.createElement(Typography, null,
                         "Tree width (",
                         treeWidth,
                         "px)"),
-                    React.createElement(Slider, { className: classes.field, min: 50, max: 600, value: treeWidth, onChange: (_, val) => model.setTreeWidth(val) }))) : null)) : null,
-            React.createElement("div", { style: { display: 'flex' } },
+                    React.createElement(Slider, { className: classes.field, min: 50, max: 600, value: treeWidth, onChange: (_, val) => model.setTreeWidth(val) }))) : null)) : null),
+        React.createElement("div", null,
+            React.createElement("h1", null, "MSA options"),
+            React.createElement(FormControlLabel2, { control: React.createElement(Checkbox, { checked: bgColor, onChange: () => model.setBgColor(!bgColor) }), label: "Color background tiles of MSA?" }),
+            React.createElement("div", { className: classes.flex },
                 React.createElement(Typography, null,
                     "Column width (",
                     colWidth,
                     "px)"),
                 React.createElement(Slider, { className: classes.field, min: 1, max: 50, value: colWidth, onChange: (_, val) => model.setColWidth(val) })),
-            React.createElement("div", { style: { display: 'flex' } },
+            React.createElement("div", { className: classes.flex },
                 React.createElement(Typography, null,
                     "Row height (",
                     rowHeight,
                     "px)"),
                 React.createElement(Slider, { className: classes.field, min: 1, max: 50, value: rowHeight, onChange: (_, val) => model.setRowHeight(val) })),
-            React.createElement(TextField, { select: true, label: "Color scheme", value: colorSchemeName, onChange: event => model.setColorSchemeName(event.target.value) }, Object.keys(colorSchemes).map(option => (React.createElement(MenuItem, { key: option, value: option }, option)))),
+            React.createElement(TextField, { select: true, label: "Color scheme", value: colorSchemeName, onChange: event => model.setColorSchemeName(event.target.value) }, Object.keys(colorSchemes).map(option => (React.createElement(MenuItem, { key: option, value: option }, option)))))));
+});
+const SettingsDialog = observer(function ({ model, onClose, }) {
+    return (React.createElement(Dialog, { open: true, onClose: () => onClose(), title: "Settings" },
+        React.createElement(DialogContent, null,
+            React.createElement(SettingsContent, { model: model }),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: () => {
-                        model.setRowHeight(+rowHeight);
-                        model.setColWidth(+colWidth);
-                        if (!noTree) {
-                            model.setTreeWidth(+treeWidth);
-                        }
-                        onClose();
-                    }, variant: "contained", color: "primary" }, "Submit")))));
+                React.createElement(Button, { onClick: () => onClose(), variant: "contained", color: "primary" }, "Submit")))));
 });
 export default SettingsDialog;
 //# sourceMappingURL=SettingsDialog.js.map

package/dist/components/dialogs/SettingsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsDialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/SettingsDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SettingsDialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/SettingsDialog.tsx"],"names":[],"mappings":"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"}

package/dist/model.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import { Instance, SnapshotIn } from 'mobx-state-tree';
 import { HierarchyNode } from 'd3-hierarchy';
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types';
+import { NodeWithIds, NodeWithIdsAndLength } from './util';
+import ClustalMSA from './parsers/ClustalMSA';
+import StockholmMSA from './parsers/StockholmMSA';
+import FastaMSA from './parsers/FastaMSA';
+import { StructureModel } from './StructureModel';
 export interface RowDetails {
     [key: string]: unknown;
     name: string;
@@ -10,17 +15,17 @@ export interface RowDetails {
         end: number;
     };
 }
-import { NodeWithIds, NodeWithIdsAndLength } from './util';
-import ClustalMSA from './parsers/ClustalMSA';
-import StockholmMSA from './parsers/StockholmMSA';
-import FastaMSA from './parsers/FastaMSA';
-import { StructureModel } from './StructureModel';
 interface BasicTrackModel {
     id: string;
     name: string;
     associatedRowName?: string;
     height: number;
 }
+interface Structure {
+    pdb: string;
+    startPos: number;
+    endPos: number;
+}
 export interface TextTrackModel extends BasicTrackModel {
     customColorScheme?: Record<string, string>;
     data: string;
@@ -56,10 +61,6 @@ declare const model: import("mobx-state-tree").IModelType<{
     rowHeight: import("mobx-state-tree").IType<number | undefined, number, number>;
     scrollY: import("mobx-state-tree").IType<number | undefined, number, number>;
     scrollX: import("mobx-state-tree").IType<number | undefined, number, number>;
-    resizeHandleWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
-    blockSize: import("mobx-state-tree").IType<number | undefined, number, number>;
-    mouseRow: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    mouseCol: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     selectedStructures: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         structure: import("mobx-state-tree").IModelType<{
@@ -78,6 +79,11 @@ declare const model: import("mobx-state-tree").IModelType<{
     highResScaleFactor: import("mobx-state-tree").IType<number | undefined, number, number>;
     colorSchemeName: import("mobx-state-tree").IType<string | undefined, string, string>;
     treeFilehandle: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISnapshotProcessor<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+        /**
+         * #property
+         * high resolution scale factor, helps make canvas look better on hi-dpi
+         * screens
+         */
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -117,20 +123,29 @@ declare const model: import("mobx-state-tree").IModelType<{
         localPath: import("mobx-state-tree").ISimpleType<string>;
     }, {}> | ({
         locationType: "UriLocation";
-        uri: string;
+        uri: string; /**
+         * #volatile
+         * the currently mouse-hovered row
+         */
     } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-         * #action
-         */
+        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         internetAccountPreAuthorization: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
             internetAccountType: import("mobx-state-tree").ISimpleType<string>;
             authInfo: import("mobx-state-tree").IType<any, any, any>;
-        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
+         * #action
+         * set the height of the view in px
+         */
     }>> & import("mobx-state-tree/dist/internal").NonEmptyObject)>, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     msaFilehandle: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISnapshotProcessor<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+        /**
+         * #property
+         * high resolution scale factor, helps make canvas look better on hi-dpi
+         * screens
+         */
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -170,20 +185,29 @@ declare const model: import("mobx-state-tree").IModelType<{
         localPath: import("mobx-state-tree").ISimpleType<string>;
     }, {}> | ({
         locationType: "UriLocation";
-        uri: string;
+        uri: string; /**
+         * #volatile
+         * the currently mouse-hovered row
+         */
     } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-         * #action
-         */
+        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         internetAccountPreAuthorization: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
             internetAccountType: import("mobx-state-tree").ISimpleType<string>;
             authInfo: import("mobx-state-tree").IType<any, any, any>;
-        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
+         * #action
+         * set the height of the view in px
+         */
     }>> & import("mobx-state-tree/dist/internal").NonEmptyObject)>, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     treeMetadataFilehandle: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISnapshotProcessor<import("mobx-state-tree").ITypeUnion<import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+        /**
+         * #property
+         * high resolution scale factor, helps make canvas look better on hi-dpi
+         * screens
+         */
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -223,21 +247,26 @@ declare const model: import("mobx-state-tree").IModelType<{
         localPath: import("mobx-state-tree").ISimpleType<string>;
     }, {}> | ({
         locationType: "UriLocation";
-        uri: string;
+        uri: string; /**
+         * #volatile
+         * the currently mouse-hovered row
+         */
     } & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
         locationType: import("mobx-state-tree").ISimpleType<"UriLocation">;
         uri: import("mobx-state-tree").ISimpleType<string>;
         baseUri: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-         * #action
-         */
+        internetAccountId: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         internetAccountPreAuthorization: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
             internetAccountType: import("mobx-state-tree").ISimpleType<string>;
             authInfo: import("mobx-state-tree").IType<any, any, any>;
-        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>; /**
+         * #action
+         * set the height of the view in px
+         */
     }>> & import("mobx-state-tree/dist/internal").NonEmptyObject)>, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     currentAlignment: import("mobx-state-tree").IType<number | undefined, number, number>;
     collapsed: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
+    hidden: import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>;
     showOnly: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     boxTracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
         id: import("mobx-state-tree").ISimpleType<string>;
@@ -267,11 +296,6 @@ declare const model: import("mobx-state-tree").IModelType<{
         }[] | undefined;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     turnedOffTracks: import("mobx-state-tree").IMapType<import("mobx-state-tree").ISimpleType<boolean>>;
-    annotatedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-        start: import("mobx-state-tree").ISimpleType<number>;
-        end: import("mobx-state-tree").ISimpleType<number>;
-        attributes: import("mobx-state-tree").IType<Record<string, string[]>, Record<string, string[]>, Record<string, string[]>>;
-    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     data: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
         tree: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         msa: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -298,6 +322,26 @@ declare const model: import("mobx-state-tree").IModelType<{
     removeActiveDialog(): void;
     queueDialog(cb: (doneCallback: () => void) => [import("@jbrowse/core/util").DialogComponentType, unknown]): void;
 } & {
+    /**
+     * #volatile
+     * resize handle width between tree and msa area, px
+     */
+    resizeHandleWidth: number;
+    /**
+     * #volatile
+     * size of blocks of content to be drawn, px
+     */
+    blockSize: number;
+    /**
+     * #volatile
+     * the currently mouse-hovered row
+     */
+    mouseRow: number | undefined;
+    /**
+     * #volatile
+     * the currently mouse-hovered column
+     */
+    mouseCol: number | undefined;
     /**
      * #volatile
      * a dummy variable that is incremented when ref changes so autorun for
@@ -329,18 +373,22 @@ declare const model: import("mobx-state-tree").IModelType<{
 } & {
     /**
      * #action
+     * set the height of the view in px
      */
     setHeight(height: number): void;
     /**
      * #action
+     * add to the selected structures
      */
     addStructureToSelection(elt: StructureSnap): void;
     /**
      * #action
+     * remove from the selected structures
      */
     removeStructureFromSelection(elt: StructureSnap): void;
     /**
      * #action
+     * toggle a structure from the selected structures list
      */
     toggleStructureSelection(elt: {
         id: string;
@@ -352,46 +400,57 @@ declare const model: import("mobx-state-tree").IModelType<{
     }): void;
     /**
      * #action
+     * clear all selected structures
      */
     clearSelectedStructures(): void;
     /**
      * #action
+     * set error state
      */
     setError(error?: unknown): void;
     /**
      * #action
+     * set mouse position (row, column) in the MSA
      */
     setMousePos(col?: number, row?: number): void;
     /**
      * #action
+     * set row height (px)
      */
     setRowHeight(n: number): void;
     /**
      * #action
+     * set col width (px)
      */
     setColWidth(n: number): void;
     /**
      * #action
+     * set color scheme name
      */
     setColorSchemeName(name: string): void;
     /**
      * #action
+     * synchronize the treewidth and treeareawidth
      */
     setTreeWidthMatchesArea(arg: boolean): void;
     /**
      * #action
+     * set scroll Y-offset (px)
      */
     setScrollY(n: number): void;
     /**
      * #action
+     * set tree area width (px)
      */
     setTreeAreaWidth(n: number): void;
     /**
      * #action
+     * set tree width (px)
      */
     setTreeWidth(n: number): void;
     /**
      * #action
+     *
      */
     setCurrentAlignment(n: number): void;
     /**
@@ -402,6 +461,14 @@ declare const model: import("mobx-state-tree").IModelType<{
      * #action
      */
     setDrawTree(arg: boolean): void;
+    /**
+     * #action
+     */
+    hideNode(arg: string): void;
+    /**
+     * #action
+     */
+    clearHidden(): void;
     /**
      * #action
      */
@@ -524,14 +591,15 @@ declare const model: import("mobx-state-tree").IModelType<{
     /**
      * #getter
      */
-    readonly tree: NodeWithIds;
+    readonly _tree: NodeWithIds;
     /**
      * #getter
      */
     readonly rowNames: string[];
     /**
      * #getter
-     */ readonly mouseOverRowName: string | undefined;
+     */
+    readonly mouseOverRowName: string | undefined;
     /**
      * #method
      */
@@ -543,11 +611,7 @@ declare const model: import("mobx-state-tree").IModelType<{
     /**
      * #getter
      */
-    readonly structures: Record<string, {
-        pdb: string;
-        startPos: number;
-        endPos: number;
-    }[]>;
+    readonly structures: Record<string, Structure[]>;
     /**
      * #getter
      */
@@ -558,6 +622,7 @@ declare const model: import("mobx-state-tree").IModelType<{
     };
     /**
      * #getter
+     * widget width minus the tree area gives the space for the MSA
      */
     readonly msaAreaWidth: number;
     /**
@@ -567,7 +632,7 @@ declare const model: import("mobx-state-tree").IModelType<{
     /**
      * #getter
      */
-    readonly rows: [string, string[]][];
+    readonly rows: [string, string][];
     /**
      * #getter
      */
@@ -640,6 +705,14 @@ declare const model: import("mobx-state-tree").IModelType<{
      * #getter
      */
     readonly conservation: string[];
+    /**
+     * #getter
+     */
+    readonly adapterTrackModels: BasicTrack[];
+    /**
+     * #getter
+     */
+    readonly boxTrackModels: BasicTrack[];
     /**
      * #getter
      */
@@ -668,30 +741,23 @@ declare const model: import("mobx-state-tree").IModelType<{
     /**
      * #method
      */
-    getPos(pos: number): number;
-} & {
-    /**
-     * #action
-     */
-    addAnnotation(start: number, end: number, attributes: Record<string, string[]>): void;
-    /**
-     * #action
-     */
-    setAnnotationClickBoundaries(left: number, right: number): void;
-    /**
-     * #action
-     */
-    clearAnnotationClickBoundaries(): void;
+    relativePxToBp2(rowName: string, position: number): number;
     /**
-     * #action
+     * #method
      */
-    incrementRef(): void;
+    getPos(pos: number): number;
 } & {
     /**
      * #getter
+     * total height of track area (px)
      */
     readonly totalTrackAreaHeight: number;
 } & {
+    /**
+     * #action
+     * internal, used for drawing to canvas
+     */
+    incrementRef(): void;
     afterCreate(): void;
 }, import("mobx-state-tree")._NotCustomized, {
     id: string;
@@ -701,8 +767,6 @@ declare const model: import("mobx-state-tree").IModelType<{
     rowHeight: number;
     scrollY: number;
     scrollX: number;
-    resizeHandleWidth: number;
-    blockSize: number;
     labelsAlignRight: boolean;
     colWidth: number;
     showBranchLen: boolean;
@@ -714,8 +778,6 @@ declare const model: import("mobx-state-tree").IModelType<{
     currentAlignment: number;
     treeAreaWidth: number;
     treeWidth: number;
-    mouseRow: number | undefined;
-    mouseCol: number | undefined;
     selectedStructures: import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
         structure: import("mobx-state-tree").IModelType<{
@@ -774,6 +836,7 @@ declare const model: import("mobx-state-tree").IModelType<{
         localPath: import("mobx-state-tree").ISimpleType<string>;
     }> | undefined;
     collapsed: string[];
+    hidden: string[];
     showOnly: string | undefined;
     boxTracks: import("mobx-state-tree").ModelSnapshotType<{
         id: import("mobx-state-tree").ISimpleType<string>;
@@ -783,11 +846,6 @@ declare const model: import("mobx-state-tree").IModelType<{
         height: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     }>[];
     turnedOffTracks: import("mobx").IKeyValueMap<boolean>;
-    annotatedRegions: import("mobx-state-tree").ModelSnapshotType<{
-        start: import("mobx-state-tree").ISimpleType<number>;
-        end: import("mobx-state-tree").ISimpleType<number>;
-        attributes: import("mobx-state-tree").IType<Record<string, string[]>, Record<string, string[]>, Record<string, string[]>>;
-    }>[];
     displayName: string | undefined;
     minimized: boolean;
     data: {