@jbrowse/plugin-variants 3.1.0 → 3.3.0

package/esm/shared/MultiVariantBaseModel.d.ts

@@ -1,4 +1,4 @@
-import type { SampleInfo, Source } from '../shared/types';
+import type { SampleInfo, Source } from './types';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { Feature } from '@jbrowse/core/util';
 import type { Instance } from 'mobx-state-tree';
@@ -90,6 +90,9 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     renderingMode: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     rowHeightSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     autoHeight: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    lengthCutoffFilter: import("mobx-state-tree").IType<number | undefined, number, number>;
+    jexlFilters: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>>;
+    referenceDrawingMode: import("mobx-state-tree").IType<string | undefined, string, string>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -233,19 +236,28 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     renderProps(): any;
 } & {
     sourcesLoadingStopToken: string | undefined;
+    simplifiedFeaturesStopToken: string | undefined;
     featureUnderMouseVolatile: Feature | undefined;
     sourcesVolatile: Source[] | undefined;
     featuresVolatile: Feature[] | undefined;
     hasPhased: boolean;
     sampleInfo: undefined | Record<string, SampleInfo>;
-    hoveredGenotype: string | undefined;
+    hoveredGenotype: {
+        genotype: string;
+        name: string;
+    } | undefined;
 } & {
+    setJexlFilters(f?: string[]): void;
     setRowHeight(arg: number): void;
-    setHoveredGenotype(arg: string): void;
+    setHoveredGenotype(arg?: {
+        genotype: string;
+        name: string;
+    }): void;
     setFeatures(f: Feature[]): void;
     setLayout(layout: Source[]): void;
     clearLayout(): void;
     setSourcesLoading(str: string): void;
+    setSimplifiedFeaturesLoading(str: string): void;
     setSources(sources: Source[]): void;
     setMafFilter(arg: number): void;
     setShowSidebarLabels(arg: boolean): void;
@@ -253,8 +265,19 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     setAutoHeight(arg: boolean): void;
     setHasPhased(arg: boolean): void;
     setSampleInfo(arg: Record<string, SampleInfo>): void;
+    setReferenceDrawingMode(arg: string): void;
 } & {
+    readonly activeFilters: any;
     readonly preSources: Source[] | undefined;
+    readonly sourcesWithoutLayout: {
+        label: string;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
     readonly sources: {
         label: string;
         id: string;
@@ -265,6 +288,17 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
         HP?: number;
     }[] | undefined;
 } & {
+    readonly sourceMap: {
+        [k: string]: {
+            label: string;
+            id: string;
+            baseUri?: string;
+            name: string;
+            color?: string;
+            group?: string;
+            HP?: number;
+        };
+    } | undefined;
     readonly rowHeight: number;
     adapterProps(): 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 | {
@@ -318,6 +352,18 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        type: string;
+        subMenu: {
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+        }[];
+        icon?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
@@ -330,10 +376,20 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
 } & {
     readonly canDisplayLabels: boolean;
     readonly totalHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/esm/shared/MultiVariantBaseModel.js

@@ -1,17 +1,21 @@
 import { lazy } from 'react';
-import { ConfigurationReference } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { getSession } from '@jbrowse/core/util';
 import { stopStopToken } from '@jbrowse/core/util/stopToken';
 import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view';
+import CategoryIcon from '@mui/icons-material/Category';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import HeightIcon from '@mui/icons-material/Height';
 import SplitscreenIcon from '@mui/icons-material/Splitscreen';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import deepEqual from 'fast-deep-equal';
-import { types } from 'mobx-state-tree';
+import { cast, types } from 'mobx-state-tree';
+import { getSources } from './getSources';
 const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
 const MAFFilterDialog = lazy(() => import('./components/MAFFilterDialog'));
-const ClusterDialog = lazy(() => import('./components/ClusterDialog'));
+const AddFiltersDialog = lazy(() => import('./components/AddFiltersDialog'));
+const ClusterDialog = lazy(() => import('./components/MultiVariantClusterDialog/ClusterDialog'));
 const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'));
 export default function MultiVariantBaseModelF(configSchema) {
     return types
@@ -19,14 +23,18 @@ export default function MultiVariantBaseModelF(configSchema) {
         type: types.literal('LinearVariantMatrixDisplay'),
         layout: types.optional(types.frozen(), []),
         configuration: ConfigurationReference(configSchema),
-        minorAlleleFrequencyFilter: types.optional(types.number, 0.1),
+        minorAlleleFrequencyFilter: types.optional(types.number, 0),
         showSidebarLabelsSetting: true,
         renderingMode: types.optional(types.string, 'alleleCount'),
         rowHeightSetting: types.optional(types.number, 8),
         autoHeight: true,
+        lengthCutoffFilter: Number.MAX_SAFE_INTEGER,
+        jexlFilters: types.maybe(types.array(types.string)),
+        referenceDrawingMode: 'skip',
     }))
         .volatile(() => ({
         sourcesLoadingStopToken: undefined,
+        simplifiedFeaturesStopToken: undefined,
         featureUnderMouseVolatile: undefined,
         sourcesVolatile: undefined,
         featuresVolatile: undefined,
@@ -35,6 +43,9 @@ export default function MultiVariantBaseModelF(configSchema) {
         hoveredGenotype: undefined,
     }))
         .actions(self => ({
+        setJexlFilters(f) {
+            self.jexlFilters = cast(f);
+        },
         setRowHeight(arg) {
             self.rowHeightSetting = arg;
         },
@@ -56,6 +67,12 @@ export default function MultiVariantBaseModelF(configSchema) {
             }
             self.sourcesLoadingStopToken = str;
         },
+        setSimplifiedFeaturesLoading(str) {
+            if (self.simplifiedFeaturesStopToken) {
+                stopStopToken(self.simplifiedFeaturesStopToken);
+            }
+            self.simplifiedFeaturesStopToken = str;
+        },
         setSources(sources) {
             if (!deepEqual(sources, self.sourcesVolatile)) {
                 self.sourcesVolatile = sources;
@@ -81,50 +98,48 @@ export default function MultiVariantBaseModelF(configSchema) {
                 self.sampleInfo = arg;
             }
         },
+        setReferenceDrawingMode(arg) {
+            self.referenceDrawingMode = arg;
+        },
     }))
         .views(self => ({
+        get activeFilters() {
+            var _a;
+            return ((_a = self.jexlFilters) !== null && _a !== void 0 ? _a : getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        },
         get preSources() {
             return self.layout.length ? self.layout : self.sourcesVolatile;
         },
+        get sourcesWithoutLayout() {
+            return self.sourcesVolatile
+                ? getSources({
+                    sources: self.sourcesVolatile,
+                    renderingMode: self.renderingMode,
+                    sampleInfo: self.sampleInfo,
+                })
+                : undefined;
+        },
         get sources() {
-            var _a, _b;
-            if (this.preSources) {
-                const rows = [];
-                const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
-                for (const row of this.preSources) {
-                    if (self.renderingMode === 'phased') {
-                        const info = (_b = self.sampleInfo) === null || _b === void 0 ? void 0 : _b[row.name];
-                        if (info === null || info === void 0 ? void 0 : info.isPhased) {
-                            const ploidy = info.maxPloidy;
-                            for (let i = 0; i < ploidy; i++) {
-                                const id = `${row.name} HP${i}`;
-                                rows.push({
-                                    ...sources[row.name],
-                                    ...row,
-                                    label: id,
-                                    HP: i,
-                                    id: id,
-                                });
-                            }
-                        }
-                    }
-                    else {
-                        rows.push({
-                            ...sources[row.name],
-                            ...row,
-                            label: row.name,
-                            id: row.name,
-                        });
-                    }
-                }
-                return rows;
-            }
-            return undefined;
+            const sourcesWithLayout = self.layout.length
+                ? self.layout
+                : self.sourcesVolatile;
+            return sourcesWithLayout
+                ? getSources({
+                    sources: sourcesWithLayout,
+                    renderingMode: self.renderingMode,
+                    sampleInfo: self.sampleInfo,
+                })
+                : undefined;
         },
     }))
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
+            get sourceMap() {
+                return self.sources
+                    ? Object.fromEntries(self.sources.map(source => [source.name, source]))
+                    : undefined;
+            },
             get rowHeight() {
                 const { sources, autoHeight, rowHeightSetting, height } = self;
                 return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
@@ -202,6 +217,28 @@ export default function MultiVariantBaseModelF(configSchema) {
                             },
                         ],
                     },
+                    {
+                        label: 'Reference mode',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Fill background grey, skip reference allele mouseovers (helps with large overlapping SVs)',
+                                type: 'radio',
+                                checked: self.referenceDrawingMode === 'skip',
+                                onClick: () => {
+                                    self.setReferenceDrawingMode('skip');
+                                },
+                            },
+                            {
+                                label: "Don't fill background grey, only draw actual reference alleles as grey",
+                                type: 'radio',
+                                checked: self.referenceDrawingMode === 'draw',
+                                onClick: () => {
+                                    self.setReferenceDrawingMode('draw');
+                                },
+                            },
+                        ],
+                    },
                     {
                         label: 'Filter by',
                         icon: FilterListIcon,
@@ -218,10 +255,23 @@ export default function MultiVariantBaseModelF(configSchema) {
                                     ]);
                                 },
                             },
+                            {
+                                label: 'Edit filters',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        AddFiltersDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
                         ],
                     },
                     {
                         label: 'Cluster by genotype',
+                        icon: CategoryIcon,
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 ClusterDialog,
@@ -250,26 +300,34 @@ export default function MultiVariantBaseModelF(configSchema) {
     })
         .views(self => ({
         get canDisplayLabels() {
-            return self.rowHeight > 8 && self.showSidebarLabelsSetting;
+            return self.rowHeight >= 8 && self.showSidebarLabelsSetting;
         },
         get totalHeight() {
             var _a;
             return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
         },
+        get featuresReady() {
+            return !!self.featuresVolatile;
+        },
     }))
         .views(self => ({
         renderProps() {
             const superProps = self.adapterProps();
             return {
                 ...superProps,
-                notReady: superProps.notReady || !self.sources || !self.featuresVolatile,
+                notReady: superProps.notReady || !self.sources || !self.featuresReady,
                 height: self.height,
                 totalHeight: self.totalHeight,
                 renderingMode: self.renderingMode,
                 minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                lengthCutoffFilter: self.lengthCutoffFilter,
                 rowHeight: self.rowHeight,
                 sources: self.sources,
                 scrollTop: self.scrollTop,
+                referenceDrawingMode: self.referenceDrawingMode,
+                filters: new SerializableFilterChain({
+                    filters: self.activeFilters,
+                }),
             };
         },
     }));

package/esm/shared/components/AddFiltersDialog.d.ts

@@ -0,0 +1,9 @@
+declare const AddFiltersDialog: ({ model, handleClose, }: {
+    model: {
+        jexlFilters?: string[];
+        activeFilters: string[];
+        setJexlFilters: (arg?: string[]) => void;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AddFiltersDialog;

package/esm/shared/components/AddFiltersDialog.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    dialogContent: {
+        width: '80em',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+function checkJexl(code) {
+    stringToJexlExpression(code);
+}
+const AddFiltersDialog = observer(function ({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { activeFilters } = model;
+    const [data, setData] = useState(activeFilters.join('\n'));
+    const [error, setError] = useState();
+    useEffect(() => {
+        try {
+            data
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => !!line)
+                .map(line => {
+                checkJexl(line.trim());
+            });
+            setError(undefined);
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    }, [data]);
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+                            setData(event.target.value);
+                        }, slotProps: {
+                            input: {
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
+                            model.setJexlFilters(data.split('\n'));
+                            handleClose();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+export default AddFiltersDialog;

package/esm/shared/components/MultiVariantBaseDisplayComponent.d.ts

@@ -0,0 +1,5 @@
+import type { MultiVariantBaseModel } from '../MultiVariantBaseModel';
+declare const MultiVariantBaseDisplayComponent: (props: {
+    model: MultiVariantBaseModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiVariantBaseDisplayComponent;

package/esm/shared/components/MultiVariantBaseDisplayComponent.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import { observer } from 'mobx-react';
+import Crosshair from './MultiVariantCrosshairs';
+import LegendBar from './MultiVariantLegendBar';
+const MultiVariantBaseDisplayComponent = observer(function (props) {
+    const { model } = props;
+    const ref = useRef(null);
+    const [mouseY, setMouseY] = useState();
+    const [mouseX, setMouseX] = useState();
+    return (_jsxs("div", { ref: ref, onMouseMove: event => {
+            var _a;
+            const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const top = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
+            const left = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
+            setMouseY(event.clientY - top);
+            setMouseX(event.clientX - left);
+        }, onMouseLeave: () => {
+            setMouseY(undefined);
+            setMouseX(undefined);
+        }, children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(LegendBar, { model: model }), mouseX && mouseY ? (_jsx(Crosshair, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
+});
+export default MultiVariantBaseDisplayComponent;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialog.d.ts

@@ -0,0 +1,6 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialog: ({ model, handleClose, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialog;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import ClusterDialogAuto from './ClusterDialogAuto';
+import ClusterDialogManual from './ClusterDialogManual';
+function Header({ activeMode, setActiveMode, }) {
+    return (_jsxs("div", { children: [_jsx(Typography, { style: { marginBottom: 30 }, children: "This procedure will cluster the visible genotype data using hierarchical clustering" }), _jsx(RadioGroup, { children: Object.entries({
+                    auto: (_jsx("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
+                    manual: (_jsx("div", { children: "Download R script to run clustering (faster, uses R implementation of hclust)" })),
+                }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: activeMode === key, onChange: () => {
+                            setActiveMode(key);
+                        } }), label: val }, key))) })] }));
+}
+const ClusterDialog = observer(function ({ model, handleClose, }) {
+    const [activeMode, setActiveMode] = useState('auto');
+    return (_jsx(Dialog, { open: true, title: "Cluster by genotype", onClose: (_, reason) => {
+            if (reason !== 'backdropClick') {
+                handleClose();
+            }
+        }, children: activeMode === 'auto' ? (_jsx(ClusterDialogAuto, { model: model, handleClose: handleClose, children: _jsx(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) : (_jsx(ClusterDialogManual, { model: model, handleClose: handleClose, children: _jsx(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) }));
+});
+export default ClusterDialog;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogAuto.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogAuto: ({ model, children, handleClose, }: {
+    model: ReducedModel;
+    children: React.ReactNode;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogAuto;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogAuto.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { getContainingView, getSession, isAbortException, } from '@jbrowse/core/util';
+import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import { observer } from 'mobx-react';
+import { isAlive } from 'mobx-state-tree';
+const ClusterDialogAuto = observer(function ({ model, children, handleClose, }) {
+    const [progress, setProgress] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [stopToken, setStopToken] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs("div", { children: [loading ? (_jsxs("div", { style: { padding: 50 }, children: [_jsx("span", { children: progress || 'Loading...' }), _jsx(Button, { onClick: () => {
+                                            stopStopToken(stopToken);
+                                        }, children: "Stop" })] })) : null, error ? _jsx(ErrorMessage, { error: error }) : null] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", disabled: loading, onClick: async () => {
+                            try {
+                                setError(undefined);
+                                setProgress('Initializing');
+                                setLoading(true);
+                                const view = getContainingView(model);
+                                if (!view.initialized) {
+                                    return;
+                                }
+                                const { rpcManager } = getSession(model);
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
+                                if (sourcesWithoutLayout) {
+                                    const sessionId = getRpcSessionId(model);
+                                    const stopToken = createStopToken();
+                                    setStopToken(stopToken);
+                                    const ret = (await rpcManager.call(sessionId, 'MultiVariantClusterGenotypeMatrix', {
+                                        regions: view.dynamicBlocks.contentBlocks,
+                                        sources: sourcesWithoutLayout,
+                                        minorAlleleFrequencyFilter,
+                                        lengthCutoffFilter,
+                                        sessionId,
+                                        adapterConfig,
+                                        stopToken,
+                                        statusCallback: (arg) => {
+                                            setProgress(arg);
+                                        },
+                                    }));
+                                    model.setLayout(ret.order.map(idx => {
+                                        const ret = sourcesWithoutLayout[idx];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                handleClose();
+                            }
+                            catch (e) {
+                                if (!isAbortException(e) && isAlive(model)) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            finally {
+                                setLoading(false);
+                                setProgress('');
+                                setStopToken('');
+                            }
+                        }, children: "Run clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                            if (stopToken) {
+                                stopStopToken(stopToken);
+                            }
+                        }, children: "Cancel" })] })] }));
+});
+export default ClusterDialogAuto;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogManual.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogManuals: ({ model, handleClose, children, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogManuals;