@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/esm/CramAdapter/readFeaturesToMismatches.js

@@ -0,0 +1,103 @@
+export function readFeaturesToMismatches(readFeatures = [], start, qual) {
+    const mismatches = new Array(readFeatures.length);
+    let j = 0;
+    let refPos = 0;
+    let sublen = 0;
+    let lastPos = start;
+    let insertedBases = '';
+    for (const ret of readFeatures) {
+        const { refPos: p, code, pos, data, sub, ref } = ret;
+        sublen = refPos - lastPos;
+        lastPos = refPos;
+        if (sublen && insertedBases.length > 0) {
+            mismatches[j++] = {
+                start: refPos,
+                type: 'insertion',
+                base: `${insertedBases.length}`,
+                insertedBases,
+                length: 0,
+            };
+            insertedBases = '';
+        }
+        refPos = p - 1 - start;
+        if (code === 'X') {
+            mismatches[j++] = {
+                start: refPos,
+                length: 1,
+                base: sub,
+                qual: qual === null || qual === void 0 ? void 0 : qual[pos - 1],
+                altbase: ref === null || ref === void 0 ? void 0 : ref.toUpperCase(),
+                type: 'mismatch',
+            };
+        }
+        else if (code === 'I') {
+            mismatches[j++] = {
+                start: refPos,
+                type: 'insertion',
+                base: `${data.length}`,
+                insertedBases: data,
+                length: 0,
+            };
+        }
+        else if (code === 'N') {
+            mismatches[j++] = {
+                type: 'skip',
+                length: data,
+                start: refPos,
+                base: 'N',
+            };
+        }
+        else if (code === 'S') {
+            const len = data.length;
+            mismatches[j++] = {
+                start: refPos,
+                type: 'softclip',
+                base: `S${len}`,
+                cliplen: len,
+                length: 1,
+            };
+        }
+        else if (code === 'P') {
+        }
+        else if (code === 'H') {
+            const len = data;
+            mismatches[j++] = {
+                start: refPos,
+                type: 'hardclip',
+                base: `H${len}`,
+                cliplen: len,
+                length: 1,
+            };
+        }
+        else if (code === 'D') {
+            mismatches[j++] = {
+                type: 'deletion',
+                length: data,
+                start: refPos,
+                base: '*',
+            };
+        }
+        else if (code === 'b') {
+        }
+        else if (code === 'q') {
+        }
+        else if (code === 'B') {
+        }
+        else if (code === 'i') {
+            insertedBases += data;
+        }
+        else if (code === 'Q') {
+        }
+    }
+    if (sublen && insertedBases.length > 0) {
+        mismatches[j++] = {
+            start: refPos,
+            type: 'insertion',
+            base: `${insertedBases.length}`,
+            insertedBases,
+            length: 0,
+        };
+        insertedBases = '';
+    }
+    return mismatches.slice(0, j);
+}

package/esm/LinearAlignmentsDisplay/components/AlignmentsDisplay.js

@@ -3,13 +3,17 @@ import { getConf } from '@jbrowse/core/configuration';
 import { ResizeHandle } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     resizeHandle: {
         height: 5,
         position: 'absolute',
         zIndex: 2,
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
     },
-});
+}));
 const AlignmentsDisplay = observer(function AlignmentsDisplay({ model, }) {
     var _a;
     const { PileupDisplay, SNPCoverageDisplay } = model;

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.d.ts

@@ -181,6 +181,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -195,9 +196,22 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -206,6 +220,7 @@ export declare function SharedLinearPileupDisplayMixin(configSchema: AnyConfigur
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -15,8 +15,8 @@ import LinearPileupDisplayBlurb from './components/LinearPileupDisplayBlurb';
 import { getUniqueTags } from '../shared/getUniqueTags';
 const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
 const ColorByTagDialog = lazy(() => import('./components/ColorByTagDialog'));
-const SetFeatureHeightDialog = lazy(() => import('./components/SetFeatureHeightDialog'));
-const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeightDialog'));
+const SetFeatureHeightDialog = lazy(() => import('../shared/components/SetFeatureHeightDialog'));
+const SetMaxHeightDialog = lazy(() => import('../shared/components/SetMaxHeightDialog'));
 const rendererTypes = new Map([
     ['pileup', 'PileupRenderer'],
     ['svg', 'SvgFeatureRenderer'],

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -51,7 +51,7 @@ const GroupByTagDialog = observer(function (props) {
                                         maxLength: 2,
                                         'data-testid': 'group-tag-name-input',
                                     },
-                                } }), error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { title: "Loading unique tags" })) : tagSet ? (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                                } }), error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Loading unique tags" })) : tagSet ? (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
                             const track = getContainingTrack(model);
                             const trackConf = structuredClone(getSnapshot(track.configuration));
                             const session = getSession(model);
@@ -60,7 +60,7 @@ const GroupByTagDialog = observer(function (props) {
                                 if (tagSet) {
                                     const ret = [...tagSet, undefined];
                                     for (const tagValue of ret) {
-                                        const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${+Date.now()}-sessionTrack`;
+                                        const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${Date.now()}-sessionTrack`;
                                         session.addTrackConf({
                                             ...trackConf,
                                             trackId: t1,
@@ -88,8 +88,8 @@ const GroupByTagDialog = observer(function (props) {
                                 }
                             }
                             else if (type === 'strand') {
-                                const t1 = `${trackConf.trackId}-${tag}:(-)-${+Date.now()}-sessionTrack`;
-                                const t2 = `${trackConf.trackId}-${tag}:(+)-${+Date.now()}-sessionTrack`;
+                                const t1 = `${trackConf.trackId}-${tag}:(-)-${Date.now()}-sessionTrack`;
+                                const t2 = `${trackConf.trackId}-${tag}:(+)-${Date.now()}-sessionTrack`;
                                 session.addTrackConf({
                                     ...trackConf,
                                     trackId: t1,

package/esm/LinearPileupDisplay/components/SetModificationThresholdDialog.d.ts

@@ -0,0 +1,10 @@
+import type { ColorBy } from '../../shared/types';
+declare const SetModificationThresholdDialog: (props: {
+    model: {
+        modificationThreshold: number;
+        colorBy?: ColorBy;
+        setColorScheme: (colorBy: ColorBy) => void;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetModificationThresholdDialog;

package/esm/LinearPileupDisplay/components/SetModificationThresholdDialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+const SetModificationThresholdDialog = observer(function (props) {
+    const { model, handleClose } = props;
+    const [threshold, setThreshold] = useState(String(model.modificationThreshold));
+    const numThreshold = Number.parseFloat(threshold);
+    const validThreshold = !Number.isNaN(numThreshold) && numThreshold >= 0 && numThreshold <= 100;
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Adjust modification threshold", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Set the minimum probability threshold for displaying modifications" }), _jsx(Typography, { color: "textSecondary", children: "Only modifications with probability above this threshold will be displayed (0-100%)" }), _jsx(TextField, { value: threshold, onChange: event => {
+                        setThreshold(event.target.value);
+                    }, placeholder: "Enter threshold (e.g., 10)", error: threshold !== '' && !validThreshold, helperText: threshold !== '' && !validThreshold
+                        ? 'Must be a number between 0 and 100'
+                        : '', autoComplete: "off", type: "number", slotProps: {
+                        htmlInput: {
+                            min: 0,
+                            max: 100,
+                            step: 1,
+                        },
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !validThreshold, onClick: () => {
+                                const currentColorBy = model.colorBy || {
+                                    type: 'modifications',
+                                };
+                                model.setColorScheme({
+                                    ...currentColorBy,
+                                    modifications: {
+                                        ...currentColorBy.modifications,
+                                        threshold: numThreshold,
+                                    },
+                                });
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+export default SetModificationThresholdDialog;

package/esm/LinearPileupDisplay/doAfterAttach.d.ts

@@ -14,6 +14,7 @@ export declare function doAfterAttach(model: {
     setCurrSortBpPerPx: (arg: number) => void;
     setError: (arg: unknown) => void;
     updateVisibleModifications: (arg: ModificationType[]) => void;
+    setSimplexModifications: (arg: string[]) => void;
     setModificationsReady: (arg: boolean) => void;
     setSortReady: (arg: boolean) => void;
     setMessage: (arg: string) => void;

package/esm/LinearPileupDisplay/doAfterAttach.js

@@ -55,13 +55,14 @@ export function doAfterAttach(model) {
         }
         const { adapterConfig } = model;
         const { staticBlocks } = getContainingView(model);
-        const vals = await getUniqueModifications({
+        const { modifications, simplexModifications } = await getUniqueModifications({
             model,
             adapterConfig,
             blocks: staticBlocks,
         });
         if (isAlive(model)) {
-            model.updateVisibleModifications(vals);
+            model.updateVisibleModifications(modifications);
+            model.setSimplexModifications(simplexModifications);
             model.setModificationsReady(true);
         }
     }, { delay: 1000 });

package/esm/LinearPileupDisplay/model.d.ts

@@ -186,6 +186,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -200,9 +201,22 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -211,6 +225,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {
@@ -306,10 +321,12 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     sortReady: boolean;
     currSortBpPerPx: number;
     visibleModifications: import("mobx").ObservableMap<string, ModificationTypeWithColor>;
+    simplexModifications: Set<string>;
     modificationsReady: boolean;
 } & {
     setCurrSortBpPerPx(n: number): void;
     updateVisibleModifications(uniqueModifications: ModificationType[]): void;
+    setSimplexModifications(simplex: string[]): void;
     setModificationsReady(flag: boolean): void;
     setSortReady(flag: boolean): void;
     clearSelected(): void;
@@ -321,6 +338,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     reload(): void;
 } & {
     readonly visibleModificationTypes: string[];
+    readonly modificationThreshold: any;
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {

package/esm/LinearPileupDisplay/model.js

@@ -8,9 +8,11 @@ import WorkspacesIcon from '@mui/icons-material/Workspaces';
 import { observable } from 'mobx';
 import { types } from 'mobx-state-tree';
 import { SharedLinearPileupDisplayMixin } from './SharedLinearPileupDisplayMixin';
-import { getColorForModification, modificationData } from '../util';
+import { modificationData } from '../shared/modificationData';
+import { getColorForModification } from '../util';
 const SortByTagDialog = lazy(() => import('./components/SortByTagDialog'));
 const GroupByDialog = lazy(() => import('./components/GroupByDialog'));
+const SetModificationThresholdDialog = lazy(() => import('./components/SetModificationThresholdDialog'));
 function stateModelFactory(configSchema) {
     return types
         .compose('LinearPileupDisplay', SharedLinearPileupDisplayMixin(configSchema), types.model({
@@ -24,6 +26,7 @@ function stateModelFactory(configSchema) {
         sortReady: false,
         currSortBpPerPx: 0,
         visibleModifications: observable.map({}),
+        simplexModifications: new Set(),
         modificationsReady: false,
     }))
         .actions(self => ({
@@ -40,6 +43,11 @@ function stateModelFactory(configSchema) {
                 }
             }
         },
+        setSimplexModifications(simplex) {
+            for (const entry of simplex) {
+                self.simplexModifications.add(entry);
+            }
+        },
         setModificationsReady(flag) {
             self.modificationsReady = flag;
         },
@@ -92,6 +100,10 @@ function stateModelFactory(configSchema) {
         get visibleModificationTypes() {
             return [...self.visibleModifications.keys()];
         },
+        get modificationThreshold() {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = self.colorBy) === null || _a === void 0 ? void 0 : _a.modifications) === null || _b === void 0 ? void 0 : _b.threshold) !== null && _c !== void 0 ? _c : 10;
+        },
         get rendererConfig() {
             const { featureHeight, noSpacing, trackMaxHeight, mismatchAlpha, rendererTypeName, hideSmallIndels, } = self;
             const configBlob = getConf(self, ['renderers', rendererTypeName]) || {};
@@ -125,13 +137,14 @@ function stateModelFactory(configSchema) {
         const { trackMenuItems: superTrackMenuItems, renderPropsPre: superRenderPropsPre, renderProps: superRenderProps, colorSchemeSubMenuItems: superColorSchemeSubMenuItems, } = self;
         return {
             renderPropsPre() {
-                const { sortedBy, showSoftClipping, visibleModifications } = self;
+                const { sortedBy, showSoftClipping, visibleModifications, simplexModifications, } = self;
                 const superProps = superRenderPropsPre();
                 return {
                     ...superProps,
                     showSoftClip: showSoftClipping,
                     sortedBy,
                     visibleModifications: Object.fromEntries(visibleModifications.toJSON()),
+                    simplexModifications: [...simplexModifications],
                 };
             },
             renderProps() {
@@ -194,22 +207,26 @@ function stateModelFactory(configSchema) {
                                 subMenu: self.modificationsReady
                                     ? [
                                         {
-                                            label: 'All modifications',
+                                            label: `All modifications (>= ${self.modificationThreshold}% prob)`,
                                             onClick: () => {
                                                 self.setColorScheme({
                                                     type: 'modifications',
+                                                    modifications: {
+                                                        threshold: self.modificationThreshold,
+                                                    },
                                                 });
                                             },
                                         },
                                         ...self.visibleModificationTypes.map(key => {
                                             var _a;
                                             return ({
-                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key}`,
+                                                label: `Show only ${((_a = modificationData[key]) === null || _a === void 0 ? void 0 : _a.name) || key}  (>= ${self.modificationThreshold}% prob)`,
                                                 onClick: () => {
                                                     self.setColorScheme({
                                                         type: 'modifications',
                                                         modifications: {
                                                             isolatedModification: key,
+                                                            threshold: self.modificationThreshold,
                                                         },
                                                     });
                                                 },
@@ -223,6 +240,7 @@ function stateModelFactory(configSchema) {
                                                     type: 'modifications',
                                                     modifications: {
                                                         twoColor: true,
+                                                        threshold: self.modificationThreshold,
                                                     },
                                                 });
                                             },
@@ -237,6 +255,7 @@ function stateModelFactory(configSchema) {
                                                         modifications: {
                                                             isolatedModification: key,
                                                             twoColor: true,
+                                                            threshold: self.modificationThreshold,
                                                         },
                                                     });
                                                 },
@@ -248,9 +267,25 @@ function stateModelFactory(configSchema) {
                                             onClick: () => {
                                                 self.setColorScheme({
                                                     type: 'methylation',
+                                                    modifications: {
+                                                        threshold: self.modificationThreshold,
+                                                    },
                                                 });
                                             },
                                         },
+                                        { type: 'divider' },
+                                        {
+                                            label: `Adjust threshold (${self.modificationThreshold}%)`,
+                                            onClick: () => {
+                                                getSession(self).queueDialog(handleClose => [
+                                                    SetModificationThresholdDialog,
+                                                    {
+                                                        model: self,
+                                                        handleClose,
+                                                    },
+                                                ]);
+                                            },
+                                        },
                                     ]
                                     : [
                                         {

package/esm/LinearReadArcsDisplay/index.js

@@ -7,7 +7,7 @@ export default function register(pluginManager) {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearReadArcsDisplay',
-            displayName: 'Arc display',
+            displayName: 'Read arc display',
             configSchema,
             stateModel: stateModelF(configSchema),
             trackType: 'AlignmentsTrack',

package/esm/LinearReadArcsDisplay/model.d.ts

@@ -1,6 +1,4 @@
 import type React from 'react';
-import type { ChainData } from '../shared/fetchChains';
-import type { ColorBy, FilterBy } from '../shared/types';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { Instance } from 'mobx-state-tree';
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
@@ -12,13 +10,14 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
+    colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearReadArcsDisplay">;
     configuration: AnyConfigurationSchemaType;
     lineWidth: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     jitter: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
-    filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
     drawInter: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     drawLongRange: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
@@ -115,43 +114,51 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     loading: boolean;
-    chainData: ChainData | undefined;
+    chainData: import("../shared/fetchChains").ChainData | undefined;
     lastDrawnOffsetPx: number | undefined;
     lastDrawnBpPerPx: number;
     ref: HTMLCanvasElement | null;
-} & {
-    readonly colorBy: any;
-    readonly filterBy: any;
 } & {
     setLastDrawnOffsetPx(n: number): void;
     setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
-    reload(): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setColorScheme(colorBy: {
         type: string;
     }): void;
-    setChainData(args: ChainData): void;
+    setChainData(args: import("../shared/fetchChains").ChainData): void;
+    setFilterBy(filter: import("../shared/types").FilterBy): void;
+} & {
+    readonly drawn: boolean;
+} & {
+    readonly colorBy: any;
+    readonly filterBy: any;
+} & {
+    reload(): void;
     setDrawInter(f: boolean): void;
     setDrawLongRange(f: boolean): void;
-    setFilterBy(filter: FilterBy): void;
     setLineWidth(n: number): void;
     setJitter(n: number): void;
 } & {
-    readonly drawn: boolean;
     readonly lineWidthSetting: any;
     readonly jitterVal: number;
 } & {
     renderProps(): any;
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
-        subMenu?: undefined;
-        type?: undefined;
-        checked?: undefined;
     } | {
         label: string;
         subMenu: {
@@ -160,29 +167,15 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             label: string;
             onClick: () => void;
         }[];
-        icon?: undefined;
-        onClick?: undefined;
         type?: undefined;
         checked?: undefined;
+        onClick?: undefined;
     } | {
         label: string;
         type: string;
         checked: boolean;
         onClick: () => void;
-        icon?: undefined;
         subMenu?: undefined;
-    } | {
-        label: string;
-        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        };
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        onClick?: undefined;
-        type?: undefined;
-        checked?: undefined;
     })[];
 } & {
     renderSvg(opts: {