@jbrowse/plugin-variants 3.2.0 → 3.3.0

package/esm/VcfTabixAdapter/VcfTabixAdapter.js

@@ -1,7 +1,7 @@
 import { TabixIndexedFile } from '@gmod/tabix';
 import VcfParser from '@gmod/vcf';
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
-import { fetchAndMaybeUnzipText, updateStatus } from '@jbrowse/core/util';
+import { fetchAndMaybeUnzipText, shorten2, updateStatus, } from '@jbrowse/core/util';
 import { openLocation } from '@jbrowse/core/util/io';
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import VcfFeature from '../VcfFeature';
@@ -85,22 +85,27 @@ export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
             const lines = txt.split(/\n|\r\n|\r/);
             const header = lines[0].split('\t');
             const { parser } = await this.configure();
-            const s = new Set(parser.samples);
-            const ret = lines
+            const metadataLines = lines
                 .slice(1)
                 .filter(f => !!f)
                 .map(line => {
                 const [name, ...rest] = line.split('\t');
                 return {
-                    ...Object.fromEntries(rest.map((c, idx) => [header[idx + 1], c])),
+                    ...Object.fromEntries(header.slice(1).map((c, idx) => [c, rest[idx] || ''])),
                     name: name,
                 };
             });
-            const missing = ret.filter(f => !s.has(f.name));
-            if (missing.length) {
-                console.warn('Samples in metadata file not in VCF:', ret.filter(f => !s.has(f.name)));
+            const vcfSampleSet = new Set(parser.samples);
+            const metadataSet = new Set(metadataLines.map(r => r.name));
+            const metadataNotInVcfSamples = [...metadataSet].filter(f => !vcfSampleSet.has(f));
+            const vcfSamplesNotInMetadata = [...vcfSampleSet].filter(f => !metadataSet.has(f));
+            if (metadataNotInVcfSamples.length) {
+                console.warn(`There are ${metadataNotInVcfSamples.length} samples in metadata file (${metadataLines.length} lines) not in VCF (${parser.samples.length} samples):`, shorten2(metadataNotInVcfSamples.join(',')));
             }
-            return ret.filter(f => s.has(f.name));
+            if (vcfSamplesNotInMetadata.length) {
+                console.warn(`There are ${vcfSamplesNotInMetadata.length} samples in VCF file (${parser.samples.length} samples) not in metadata file (${metadataLines.length} lines):`, shorten2(vcfSamplesNotInMetadata.map(m => m).join(',')));
+            }
+            return metadataLines.filter(f => vcfSampleSet.has(f.name));
         }
     }
     freeResources() { }

package/esm/getMultiVariantFeaturesAutorun.d.ts

@@ -6,6 +6,7 @@ export declare function getMultiVariantFeaturesAutorun(self: {
     adapterConfig: AnyConfigurationModel;
     sources?: Source[];
     minorAlleleFrequencyFilter: number;
+    lengthCutoffFilter: number;
     statsReadyAndRegionNotTooLarge: boolean;
     adapterProps: () => Record<string, unknown>;
     setError: (error: unknown) => void;
@@ -13,4 +14,5 @@ export declare function getMultiVariantFeaturesAutorun(self: {
     setMessage: (str: string) => void;
     setHasPhased: (arg: boolean) => void;
     setSampleInfo: (arg: Record<string, SampleInfo>) => void;
+    setSimplifiedFeaturesLoading: (arg: string) => void;
 }): void;

package/esm/getMultiVariantFeaturesAutorun.js

@@ -1,5 +1,6 @@
 import { SimpleFeature, getContainingView, getSession, } from '@jbrowse/core/util';
 import { isAbortException } from '@jbrowse/core/util/aborting';
+import { createStopToken } from '@jbrowse/core/util/stopToken';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { autorun } from 'mobx';
 import { addDisposer, isAlive } from 'mobx-state-tree';
@@ -10,16 +11,20 @@ export function getMultiVariantFeaturesAutorun(self) {
             if (!view.initialized || !self.statsReadyAndRegionNotTooLarge) {
                 return;
             }
+            const stopToken = createStopToken();
+            self.setSimplifiedFeaturesLoading(stopToken);
             const { rpcManager } = getSession(self);
-            const { sources, minorAlleleFrequencyFilter, adapterConfig } = self;
+            const { lengthCutoffFilter, sources, minorAlleleFrequencyFilter, adapterConfig, } = self;
             if (sources) {
                 const sessionId = getRpcSessionId(self);
                 const { sampleInfo, hasPhased, features } = (await rpcManager.call(sessionId, 'MultiVariantGetSimplifiedFeatures', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources,
                     minorAlleleFrequencyFilter,
+                    lengthCutoffFilter,
                     sessionId,
                     adapterConfig,
+                    stopToken,
                 }));
                 if (isAlive(self)) {
                     self.setHasPhased(hasPhased);
@@ -34,5 +39,7 @@ export function getMultiVariantFeaturesAutorun(self) {
                 getSession(self).notifyError(`${e}`, e);
             }
         }
-    }, { delay: 1000 }));
+    }, {
+        delay: 1000,
+    }));
 }

package/esm/getMultiVariantSourcesAutorun.js

@@ -13,12 +13,13 @@ export function getMultiVariantSourcesAutorun(self) {
             }
             const { rpcManager } = getSession(self);
             const { adapterConfig } = self;
-            const token = createStopToken();
-            self.setSourcesLoading(token);
+            const stopToken = createStopToken();
+            self.setSourcesLoading(stopToken);
             const sessionId = getRpcSessionId(self);
             const sources = (await rpcManager.call(sessionId, 'MultiVariantGetSources', {
                 sessionId,
                 adapterConfig,
+                stopToken,
             }));
             if (isAlive(self)) {
                 self.setSources(sources);

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,7 +265,9 @@ 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;
@@ -274,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 | {
@@ -327,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">> & {

package/esm/shared/MultiVariantBaseModel.js

@@ -1,5 +1,6 @@
 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';
@@ -9,11 +10,12 @@ 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/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
@@ -21,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,
@@ -37,6 +43,9 @@ export default function MultiVariantBaseModelF(configSchema) {
         hoveredGenotype: undefined,
     }))
         .actions(self => ({
+        setJexlFilters(f) {
+            self.jexlFilters = cast(f);
+        },
         setRowHeight(arg) {
             self.rowHeightSetting = arg;
         },
@@ -58,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;
@@ -83,8 +98,15 @@ 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;
         },
@@ -113,6 +135,11 @@ export default function MultiVariantBaseModelF(configSchema) {
         .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;
@@ -190,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,
@@ -206,6 +255,18 @@ export default function MultiVariantBaseModelF(configSchema) {
                                     ]);
                                 },
                             },
+                            {
+                                label: 'Edit filters',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        AddFiltersDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
                         ],
                     },
                     {
@@ -239,7 +300,7 @@ 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;
@@ -259,9 +320,14 @@ export default function MultiVariantBaseModelF(configSchema) {
                 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/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialog.js

@@ -7,8 +7,8 @@ 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 (slow for large data, built in JS clustering)" })),
-                    manual: (_jsx("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+                    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))) })] }));

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialogAuto.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+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';
@@ -9,19 +9,22 @@ 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: [progress ? (_jsxs("div", { style: { padding: 50 }, children: [_jsxs("span", { style: { width: 400 }, children: ["Progress: ", progress] }), _jsx(Button, { onClick: () => {
+    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", onClick: async () => {
+                                        }, 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, adapterConfig, } = model;
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                                 if (sourcesWithoutLayout) {
                                     const sessionId = getRpcSessionId(model);
                                     const stopToken = createStopToken();
@@ -30,6 +33,7 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                         regions: view.dynamicBlocks.contentBlocks,
                                         sources: sourcesWithoutLayout,
                                         minorAlleleFrequencyFilter,
+                                        lengthCutoffFilter,
                                         sessionId,
                                         adapterConfig,
                                         stopToken,
@@ -54,6 +58,7 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                 }
                             }
                             finally {
+                                setLoading(false);
                                 setProgress('');
                                 setStopToken('');
                             }

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialogManual.js

@@ -25,8 +25,8 @@ const ClusterDialogManuals = observer(function ({ model, handleClose, children,
     const [ret, setRet] = useState();
     const [error, setError] = useState();
     const [loading, setLoading] = useState(false);
-    const [showAdvanced, setShowAdvanced] = useState(false);
-    const [clusterMethod, setClusterMethod] = useLocalStorage('cluster-clusterMethod', 'single');
+    const [showAdvanced, setShowAdvanced] = useLocalStorage('cluster-showAdvanced', false);
+    const [clusterMethod, setClusterMethod] = useState('single');
     useEffect(() => {
         ;
         (async () => {
@@ -39,12 +39,13 @@ const ClusterDialogManuals = observer(function ({ model, handleClose, children,
                     return;
                 }
                 const { rpcManager } = getSession(model);
-                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                 const sessionId = getRpcSessionId(model);
                 const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources: sourcesWithoutLayout,
                     minorAlleleFrequencyFilter,
+                    lengthCutoffFilter,
                     sessionId,
                     adapterConfig,
                 }));
@@ -77,31 +78,31 @@ cat(resultClusters$order,sep='\\n')`
             .map(([key, val]) => [key, ...val].join('\t'))
             .join('\n')
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs(Paper, { style: { padding: 16 }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    gap: '8px',
-                                    flexWrap: 'wrap',
-                                    marginBottom: '16px',
-                                }, children: [_jsx(Button, { variant: "contained", onClick: () => {
-                                            saveAs(new Blob([results || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'cluster.R');
-                                        }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
-                                            copy(results || '');
-                                        }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
-                                            saveAs(new Blob([resultsTsv || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'genotypes.tsv');
-                                        }, children: "Download TSV" }), _jsxs("div", { children: [_jsx(Button, { variant: "contained", onClick: () => {
-                                                    setShowAdvanced(!showAdvanced);
-                                                }, children: showAdvanced
-                                                    ? 'Hide advanced options'
-                                                    : 'Show advanced options' }), showAdvanced ? (_jsxs("div", { children: [_jsx(Typography, { variant: "h6", children: "Advanced options" }), _jsx(RadioGroup, { children: Object.entries({
-                                                            single: 'Single',
-                                                            complete: 'Complete',
-                                                        }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
-                                                                    setClusterMethod(key);
-                                                                } }), label: val }, key))) })] })) : null] }), results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs(Paper, { style: { padding: 16 }, children: [_jsxs("div", { children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            flexWrap: 'wrap',
+                                            marginBottom: '16px',
+                                        }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                                    saveAs(new Blob([results || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'cluster.R');
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                    copy(results || '');
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                    saveAs(new Blob([resultsTsv || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'genotypes.tsv');
+                                                }, children: "Download TSV" }), _jsx("div", { children: _jsx(Button, { variant: "contained", onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    }, children: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options' }) })] }), showAdvanced ? (_jsxs("div", { children: [_jsx(Typography, { variant: "h6", children: "Advanced options" }), _jsx(RadioGroup, { children: Object.entries({
+                                                    single: 'Single',
+                                                    complete: 'Complete',
+                                                }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
+                                                            setClusterMethod(key);
+                                                        } }), label: val }, key))) })] })) : null, results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
                                             setPaste(event.target.value);
                                         }, slotProps: {
                                             input: {

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/types.d.ts

@@ -3,6 +3,7 @@ import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface ReducedModel {
     sourcesWithoutLayout?: Source[];
     minorAlleleFrequencyFilter?: number;
+    lengthCutoffFilter: number;
     adapterConfig: AnyConfigurationModel;
     setLayout: (arg: Source[]) => void;
     clearLayout: () => void;

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

@@ -0,0 +1 @@
+export {};