@jbrowse/plugin-variants 3.1.0 → 3.3.0

package/dist/shared/MultiVariantBaseModel.js

@@ -39,18 +39,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MultiVariantBaseModelF;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
+const serializableFilterChain_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain"));
 const util_1 = require("@jbrowse/core/util");
 const stopToken_1 = require("@jbrowse/core/util/stopToken");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const Category_1 = __importDefault(require("@mui/icons-material/Category"));
 const FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
 const Height_1 = __importDefault(require("@mui/icons-material/Height"));
 const Splitscreen_1 = __importDefault(require("@mui/icons-material/Splitscreen"));
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const mobx_state_tree_1 = require("mobx-state-tree");
+const getSources_1 = require("./getSources");
 const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetColorDialog'))));
 const MAFFilterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/MAFFilterDialog'))));
-const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ClusterDialog'))));
+const AddFiltersDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/AddFiltersDialog'))));
+const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/MultiVariantClusterDialog/ClusterDialog'))));
 const SetRowHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetRowHeightDialog'))));
 function MultiVariantBaseModelF(configSchema) {
     return mobx_state_tree_1.types
@@ -58,14 +62,18 @@ function MultiVariantBaseModelF(configSchema) {
         type: mobx_state_tree_1.types.literal('LinearVariantMatrixDisplay'),
         layout: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), []),
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-        minorAlleleFrequencyFilter: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 0.1),
+        minorAlleleFrequencyFilter: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 0),
         showSidebarLabelsSetting: true,
         renderingMode: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, 'alleleCount'),
         rowHeightSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.number, 8),
         autoHeight: true,
+        lengthCutoffFilter: Number.MAX_SAFE_INTEGER,
+        jexlFilters: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.array(mobx_state_tree_1.types.string)),
+        referenceDrawingMode: 'skip',
     }))
         .volatile(() => ({
         sourcesLoadingStopToken: undefined,
+        simplifiedFeaturesStopToken: undefined,
         featureUnderMouseVolatile: undefined,
         sourcesVolatile: undefined,
         featuresVolatile: undefined,
@@ -74,6 +82,9 @@ function MultiVariantBaseModelF(configSchema) {
         hoveredGenotype: undefined,
     }))
         .actions(self => ({
+        setJexlFilters(f) {
+            self.jexlFilters = (0, mobx_state_tree_1.cast)(f);
+        },
         setRowHeight(arg) {
             self.rowHeightSetting = arg;
         },
@@ -95,6 +106,12 @@ function MultiVariantBaseModelF(configSchema) {
             }
             self.sourcesLoadingStopToken = str;
         },
+        setSimplifiedFeaturesLoading(str) {
+            if (self.simplifiedFeaturesStopToken) {
+                (0, stopToken_1.stopStopToken)(self.simplifiedFeaturesStopToken);
+            }
+            self.simplifiedFeaturesStopToken = str;
+        },
         setSources(sources) {
             if (!(0, fast_deep_equal_1.default)(sources, self.sourcesVolatile)) {
                 self.sourcesVolatile = sources;
@@ -120,50 +137,48 @@ 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 : (0, configuration_1.getConf)(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        },
         get preSources() {
             return self.layout.length ? self.layout : self.sourcesVolatile;
         },
+        get sourcesWithoutLayout() {
+            return self.sourcesVolatile
+                ? (0, getSources_1.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
+                ? (0, getSources_1.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;
@@ -241,6 +256,28 @@ 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: FilterList_1.default,
@@ -257,10 +294,23 @@ function MultiVariantBaseModelF(configSchema) {
                                     ]);
                                 },
                             },
+                            {
+                                label: 'Edit filters',
+                                onClick: () => {
+                                    (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                        AddFiltersDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
                         ],
                     },
                     {
                         label: 'Cluster by genotype',
+                        icon: Category_1.default,
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
                                 ClusterDialog,
@@ -289,26 +339,34 @@ 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_1.default({
+                    filters: self.activeFilters,
+                }),
             };
         },
     }));

package/dist/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/dist/shared/components/AddFiltersDialog.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    dialogContent: {
+        width: '80em',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+function checkJexl(code) {
+    (0, jexlStrings_1.stringToJexlExpression)(code);
+}
+const AddFiltersDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { activeFilters } = model;
+    const [data, setData] = (0, react_1.useState)(activeFilters.join('\n'));
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(material_1.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,
+                                },
+                            },
+                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
+                            model.setJexlFilters(data.split('\n'));
+                            handleClose();
+                        }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = AddFiltersDialog;

package/dist/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/dist/shared/components/MultiVariantBaseDisplayComponent.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const mobx_react_1 = require("mobx-react");
+const MultiVariantCrosshairs_1 = __importDefault(require("./MultiVariantCrosshairs"));
+const MultiVariantLegendBar_1 = __importDefault(require("./MultiVariantLegendBar"));
+const MultiVariantBaseDisplayComponent = (0, mobx_react_1.observer)(function (props) {
+    const { model } = props;
+    const ref = (0, react_1.useRef)(null);
+    const [mouseY, setMouseY] = (0, react_1.useState)();
+    const [mouseX, setMouseX] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }), (0, jsx_runtime_1.jsx)(MultiVariantLegendBar_1.default, { model: model }), mouseX && mouseY ? ((0, jsx_runtime_1.jsx)(MultiVariantCrosshairs_1.default, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
+});
+exports.default = MultiVariantBaseDisplayComponent;

package/dist/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/dist/shared/components/MultiVariantClusterDialog/ClusterDialog.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const ClusterDialogAuto_1 = __importDefault(require("./ClusterDialogAuto"));
+const ClusterDialogManual_1 = __importDefault(require("./ClusterDialogManual"));
+function Header({ activeMode, setActiveMode, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { marginBottom: 30 }, children: "This procedure will cluster the visible genotype data using hierarchical clustering" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                    auto: ((0, jsx_runtime_1.jsx)("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
+                    manual: ((0, jsx_runtime_1.jsx)("div", { children: "Download R script to run clustering (faster, uses R implementation of hclust)" })),
+                }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: activeMode === key, onChange: () => {
+                            setActiveMode(key);
+                        } }), label: val }, key))) })] }));
+}
+const ClusterDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const [activeMode, setActiveMode] = (0, react_1.useState)('auto');
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, title: "Cluster by genotype", onClose: (_, reason) => {
+            if (reason !== 'backdropClick') {
+                handleClose();
+            }
+        }, children: activeMode === 'auto' ? ((0, jsx_runtime_1.jsx)(ClusterDialogAuto_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) : ((0, jsx_runtime_1.jsx)(ClusterDialogManual_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) }));
+});
+exports.default = ClusterDialog;

package/dist/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/dist/shared/components/MultiVariantClusterDialog/ClusterDialogAuto.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children, handleClose, }) {
+    const [progress, setProgress] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const [stopToken, setStopToken] = (0, react_1.useState)('');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsx)("span", { children: progress || 'Loading...' }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                                            (0, stopToken_1.stopStopToken)(stopToken);
+                                        }, children: "Stop" })] })) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", disabled: loading, onClick: async () => {
+                            try {
+                                setError(undefined);
+                                setProgress('Initializing');
+                                setLoading(true);
+                                const view = (0, util_1.getContainingView)(model);
+                                if (!view.initialized) {
+                                    return;
+                                }
+                                const { rpcManager } = (0, util_1.getSession)(model);
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
+                                if (sourcesWithoutLayout) {
+                                    const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                                    const stopToken = (0, stopToken_1.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 (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            finally {
+                                setLoading(false);
+                                setProgress('');
+                                setStopToken('');
+                            }
+                        }, children: "Run clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                            if (stopToken) {
+                                (0, stopToken_1.stopStopToken)(stopToken);
+                            }
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogAuto;

package/dist/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;

package/dist/shared/components/MultiVariantClusterDialog/ClusterDialogManual.js

@@ -0,0 +1,145 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handleClose, children, }) {
+    const { classes } = useStyles();
+    const [paste, setPaste] = (0, react_1.useState)('');
+    const [ret, setRet] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [showAdvanced, setShowAdvanced] = (0, util_1.useLocalStorage)('cluster-showAdvanced', false);
+    const [clusterMethod, setClusterMethod] = (0, react_1.useState)('single');
+    (0, react_1.useEffect)(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                setRet(undefined);
+                setLoading(true);
+                const view = (0, util_1.getContainingView)(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = (0, util_1.getSession)(model);
+                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
+                const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
+                    regions: view.dynamicBlocks.contentBlocks,
+                    sources: sourcesWithoutLayout,
+                    minorAlleleFrequencyFilter,
+                    lengthCutoffFilter,
+                    sessionId,
+                    adapterConfig,
+                }));
+                setRet(ret);
+            }
+            catch (e) {
+                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model]);
+    const results = ret
+        ? `inputMatrix<-matrix(c(${Object.values(ret)
+            .map(val => val.join(','))
+            .join(',\n')}
+),nrow=${Object.values(ret).length},byrow=TRUE)
+rownames(inputMatrix)<-c(${Object.keys(ret)
+            .map(key => `'${key}'`)
+            .join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
+cat(resultClusters$order,sep='\\n')`
+        : undefined;
+    const resultsTsv = ret
+        ? Object.entries(ret)
+            .map(([key, val]) => [key, ...val].join('\t'))
+            .join('\n')
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 16 }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            flexWrap: 'wrap',
+                                            marginBottom: '16px',
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, file_saver_1.saveAs)(new Blob([results || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'cluster.R');
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, copy_to_clipboard_1.default)(results || '');
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, file_saver_1.saveAs)(new Blob([resultsTsv || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'genotypes.tsv');
+                                                }, children: "Download TSV" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    }, children: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options' }) })] }), showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Advanced options" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                                                    single: 'Single',
+                                                    complete: 'Complete',
+                                                }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
+                                                            setClusterMethod(key);
+                                                        } }), label: val }, key))) })] })) : null, results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.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: {
+                                                classes: {
+                                                    input: classes.textAreaFont,
+                                                },
+                                            },
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                            const { sourcesWithoutLayout } = model;
+                            if (sourcesWithoutLayout) {
+                                try {
+                                    model.setLayout(paste
+                                        .split('\n')
+                                        .map(t => t.trim())
+                                        .filter(f => !!f)
+                                        .map(r => +r)
+                                        .map(idx => {
+                                        const ret = sourcesWithoutLayout[idx - 1];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogManuals;

package/dist/shared/components/MultiVariantClusterDialog/types.d.ts

@@ -0,0 +1,10 @@
+import type { Source } from '../../types';
+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/dist/shared/components/MultiVariantClusterDialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });