@jbrowse/plugin-variants 2.17.0 → 3.0.0

package/esm/VcfTabixAdapter/VcfTabixAdapter.js

@@ -1,25 +1,29 @@
-import { BaseFeatureDataAdapter, } from '@jbrowse/core/data_adapters/BaseAdapter';
-import { openLocation } from '@jbrowse/core/util/io';
-import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { TabixIndexedFile } from '@gmod/tabix';
 import VcfParser from '@gmod/vcf';
-// local
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { fetchAndMaybeUnzipText, updateStatus } from '@jbrowse/core/util';
+import { openLocation } from '@jbrowse/core/util/io';
+import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import VcfFeature from '../VcfFeature';
 export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
-    async configurePre() {
-        const pm = this.pluginManager;
+    async configurePre(opts) {
+        const { statusCallback = () => { } } = opts || {};
         const vcfGzLocation = this.getConf('vcfGzLocation');
         const location = this.getConf(['index', 'location']);
         const indexType = this.getConf(['index', 'indexType']);
-        const filehandle = openLocation(vcfGzLocation, pm);
+        const filehandle = openLocation(vcfGzLocation, this.pluginManager);
         const isCSI = indexType === 'CSI';
         const vcf = new TabixIndexedFile({
             filehandle,
-            csiFilehandle: isCSI ? openLocation(location, pm) : undefined,
-            tbiFilehandle: !isCSI ? openLocation(location, pm) : undefined,
+            csiFilehandle: isCSI
+                ? openLocation(location, this.pluginManager)
+                : undefined,
+            tbiFilehandle: !isCSI
+                ? openLocation(location, this.pluginManager)
+                : undefined,
             chunkCacheSize: 50 * 2 ** 20,
         });
-        const header = await vcf.getHeader();
+        const header = await updateStatus('Downloading index', statusCallback, () => vcf.getHeader());
         return {
             vcf,
             parser: new VcfParser({ header }),
@@ -49,8 +53,9 @@ export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
     getFeatures(query, opts = {}) {
         return ObservableCreate(async (observer) => {
             const { refName, start, end } = query;
+            const { statusCallback = () => { } } = opts;
             const { vcf, parser } = await this.configure();
-            await vcf.getLines(refName, start, end, {
+            await updateStatus('Downloading variants', statusCallback, () => vcf.getLines(refName, start, end, {
                 lineCallback: (line, fileOffset) => {
                     observer.next(new VcfFeature({
                         variant: parser.parseLine(line),
@@ -59,9 +64,35 @@ export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
                     }));
                 },
                 ...opts,
-            });
+            }));
             observer.complete();
-        }, opts.signal);
+        }, opts.stopToken);
+    }
+    async getSources() {
+        const conf = this.getConf('samplesTsvLocation');
+        if (conf.uri === '' || conf.uri === '/path/to/samples.tsv') {
+            const { parser } = await this.configure();
+            return parser.samples.map(name => ({
+                name,
+            }));
+        }
+        else {
+            const txt = await fetchAndMaybeUnzipText(openLocation(conf, this.pluginManager));
+            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);
+            return lines
+                .slice(1)
+                .map(line => {
+                const cols = line.split('\t');
+                return {
+                    name: cols[0],
+                    ...Object.fromEntries(cols.slice(1).map((c, idx) => [header[idx + 1], c])),
+                };
+            })
+                .filter(f => s.has(f.name));
+        }
     }
-    freeResources( /* { region } */) { }
+    freeResources() { }
 }

package/esm/VcfTabixAdapter/configSchema.d.ts

@@ -1,7 +1,4 @@
 declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     vcfGzLocation: {
         type: string;
         defaultValue: {
@@ -10,17 +7,11 @@ declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configuration
         };
     };
     index: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-        /**
-         * #slot index.indexType
-         */
         indexType: {
             model: import("mobx-state-tree").ISimpleType<string>;
             type: string;
             defaultValue: string;
         };
-        /**
-         * #slot index.location
-         */
         location: {
             type: string;
             defaultValue: {
@@ -29,5 +20,13 @@ declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configuration
             };
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    samplesTsvLocation: {
+        type: string;
+        defaultValue: {
+            uri: string;
+            description: string;
+            locationType: string;
+        };
+    };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default VcfTabixAdapter;

package/esm/VcfTabixAdapter/configSchema.js

@@ -1,29 +1,17 @@
-import { types } from 'mobx-state-tree';
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config VcfTabixAdapter
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { types } from 'mobx-state-tree';
+function x() { }
 const VcfTabixAdapter = ConfigurationSchema('VcfTabixAdapter', {
-    /**
-     * #slot
-     */
     vcfGzLocation: {
         type: 'fileLocation',
         defaultValue: { uri: '/path/to/my.vcf.gz', locationType: 'UriLocation' },
     },
     index: ConfigurationSchema('VcfIndex', {
-        /**
-         * #slot index.indexType
-         */
         indexType: {
             model: types.enumeration('IndexType', ['TBI', 'CSI']),
             type: 'stringEnum',
             defaultValue: 'TBI',
         },
-        /**
-         * #slot index.location
-         */
         location: {
             type: 'fileLocation',
             defaultValue: {
@@ -32,5 +20,13 @@ const VcfTabixAdapter = ConfigurationSchema('VcfTabixAdapter', {
             },
         },
     }),
+    samplesTsvLocation: {
+        type: 'fileLocation',
+        defaultValue: {
+            uri: '/path/to/samples.tsv',
+            description: 'tsv with header like name\tpopulation\tetc. where the first column is required, and is the sample names',
+            locationType: 'UriLocation',
+        },
+    },
 }, { explicitlyTyped: true });
 export default VcfTabixAdapter;

package/esm/VcfTabixAdapter/index.d.ts

@@ -1,3 +1,3 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export { default as configSchema } from './configSchema';
 export default function VcfTabixAdapterF(pluginManager: PluginManager): void;

package/esm/extensionPoints.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function ExtensionPointsF(pluginManager: PluginManager): void;

package/esm/extensionPoints.js

@@ -1,48 +1,36 @@
-import { makeIndex, makeIndexType, getFileName, } from '@jbrowse/core/util/tracks';
+import { testAdapter } from '@jbrowse/core/util';
+import { getFileName, makeIndex, makeIndexType, } from '@jbrowse/core/util/tracks';
 export default function ExtensionPointsF(pluginManager) {
     pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
         return (file, index, adapterHint) => {
-            const regexGuess = /\.vcf\.b?gz$/i;
-            const adapterName = 'VcfTabixAdapter';
             const fileName = getFileName(file);
             const indexName = index && getFileName(index);
-            const obj = {
-                type: adapterName,
-                vcfGzLocation: file,
-                index: {
-                    location: index || makeIndex(file, '.tbi'),
-                    indexType: makeIndexType(indexName, 'CSI', 'TBI'),
-                },
-            };
-            if (regexGuess.test(fileName) && !adapterHint) {
-                return obj;
+            if (testAdapter(fileName, /\.vcf\.b?gz$/i, adapterHint, 'VcfTabixAdapter')) {
+                return {
+                    type: 'VcfTabixAdapter',
+                    vcfGzLocation: file,
+                    index: {
+                        location: index || makeIndex(file, '.tbi'),
+                        indexType: makeIndexType(indexName, 'CSI', 'TBI'),
+                    },
+                };
+            }
+            else if (testAdapter(fileName, /\.vcf(\.gz)?$/i, adapterHint, 'VcfAdapter')) {
+                return {
+                    type: 'VcfAdapter',
+                    vcfLocation: file,
+                };
             }
-            if (adapterHint === adapterName) {
-                return obj;
+            else {
+                return adapterGuesser(file, index, adapterHint);
             }
-            return adapterGuesser(file, index, adapterHint);
         };
     });
     pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
         return (adapterName) => {
-            if (adapterName === 'VcfTabixAdapter' || adapterName === 'VcfAdapter') {
-                return 'VariantTrack';
-            }
-            return trackTypeGuesser(adapterName);
-        };
-    });
-    pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
-        return (file, index, adapterHint) => {
-            const regexGuess = /\.vcf$/i;
-            const adapterName = 'VcfAdapter';
-            const fileName = getFileName(file);
-            if (regexGuess.test(fileName) || adapterHint === adapterName) {
-                return {
-                    type: adapterName,
-                    vcfLocation: file,
-                };
-            }
-            return adapterGuesser(file, index, adapterHint);
+            return ['VcfTabixAdapter', 'VcfAdapter'].includes(adapterName)
+                ? 'VariantTrack'
+                : trackTypeGuesser(adapterName);
         };
     });
 }

package/esm/getMultiVariantFeaturesAutorun.d.ts

@@ -0,0 +1,16 @@
+import type { SampleInfo, Source } from './types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+export declare function getMultiVariantFeaturesAutorun(self: {
+    configuration: AnyConfigurationModel;
+    adapterConfig: AnyConfigurationModel;
+    sources?: Source[];
+    minorAlleleFrequencyFilter: number;
+    statsReadyAndRegionNotTooLarge: boolean;
+    adapterProps: () => Record<string, unknown>;
+    setError: (error: unknown) => void;
+    setFeatures: (f: Feature[]) => void;
+    setMessage: (str: string) => void;
+    setHasPhased: (arg: boolean) => void;
+    setSampleInfo: (arg: Record<string, SampleInfo>) => void;
+}): void;

package/esm/getMultiVariantFeaturesAutorun.js

@@ -0,0 +1,38 @@
+import { SimpleFeature, getContainingView, getSession, } from '@jbrowse/core/util';
+import { isAbortException } from '@jbrowse/core/util/aborting';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { autorun } from 'mobx';
+import { addDisposer, isAlive } from 'mobx-state-tree';
+export function getMultiVariantFeaturesAutorun(self) {
+    addDisposer(self, autorun(async () => {
+        try {
+            const view = getContainingView(self);
+            if (!view.initialized || !self.statsReadyAndRegionNotTooLarge) {
+                return;
+            }
+            const { rpcManager } = getSession(self);
+            const { 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,
+                    sessionId,
+                    adapterConfig,
+                }));
+                if (isAlive(self)) {
+                    self.setHasPhased(hasPhased);
+                    self.setSampleInfo(sampleInfo);
+                    self.setFeatures(features.map(f => new SimpleFeature(f)));
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+            if (!isAbortException(e) && isAlive(self)) {
+                getSession(self).notifyError(`${e}`, e);
+            }
+        }
+    }, { delay: 1000 }));
+}

package/esm/getMultiVariantSourcesAutorun.d.ts

@@ -0,0 +1,11 @@
+import type { Source } from './types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export declare function getMultiVariantSourcesAutorun(self: {
+    configuration: AnyConfigurationModel;
+    adapterConfig: AnyConfigurationModel;
+    adapterProps: () => Record<string, unknown>;
+    setSourcesLoading: (aborter: string) => void;
+    setError: (error: unknown) => void;
+    setMessage: (str: string) => void;
+    setSources: (sources: Source[]) => void;
+}): void;

package/esm/getMultiVariantSourcesAutorun.js

@@ -0,0 +1,34 @@
+import { 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';
+export function getMultiVariantSourcesAutorun(self) {
+    addDisposer(self, autorun(async () => {
+        try {
+            const view = getContainingView(self);
+            if (!view.initialized) {
+                return;
+            }
+            const { rpcManager } = getSession(self);
+            const { adapterConfig } = self;
+            const token = createStopToken();
+            self.setSourcesLoading(token);
+            const sessionId = getRpcSessionId(self);
+            const sources = (await rpcManager.call(sessionId, 'MultiVariantGetSources', {
+                sessionId,
+                adapterConfig,
+            }));
+            if (isAlive(self)) {
+                self.setSources(sources);
+            }
+        }
+        catch (e) {
+            if (!isAbortException(e) && isAlive(self)) {
+                console.error(e);
+                getSession(self).notifyError(`${e}`, e);
+            }
+        }
+    }, { delay: 1000 }));
+}

package/esm/index.d.ts

@@ -1,5 +1,5 @@
 import Plugin from '@jbrowse/core/Plugin';
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class VariantsPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/esm/index.js

@@ -1,12 +1,19 @@
-import VcfAdapterF from './VcfAdapter';
-import VcfTabixAdapterF from './VcfTabixAdapter';
-import ExtensionPointsF from './extensionPoints';
-import VariantTrackF from './VariantTrack';
 import Plugin from '@jbrowse/core/Plugin';
 import ChordVariantDisplayF from './ChordVariantDisplay';
 import LinearVariantDisplayF from './LinearVariantDisplay';
+import MultiLinearVariantDisplayF from './MultiLinearVariantDisplay';
+import LinearVariantMatrixDisplayF from './MultiLinearVariantMatrixDisplay';
+import LinearVariantMatrixRendererF from './MultiLinearVariantMatrixRenderer';
+import MultiVariantRendererF from './MultiLinearVariantRenderer';
 import StructuralVariantChordRendererF from './StructuralVariantChordRenderer';
 import VariantFeatureWidgetF from './VariantFeatureWidget';
+import { MultiVariantGetGenotypeMatrix } from './VariantRPC/MultiVariantGetGenotypeMatrix';
+import { MultiVariantGetSimplifiedFeatures } from './VariantRPC/MultiVariantGetSimplifiedFeatures';
+import { MultiVariantGetSources } from './VariantRPC/MultiVariantGetSources';
+import VariantTrackF from './VariantTrack';
+import VcfAdapterF from './VcfAdapter';
+import VcfTabixAdapterF from './VcfTabixAdapter';
+import ExtensionPointsF from './extensionPoints';
 export default class VariantsPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -19,8 +26,15 @@ export default class VariantsPlugin extends Plugin {
         VariantTrackF(pluginManager);
         ExtensionPointsF(pluginManager);
         LinearVariantDisplayF(pluginManager);
+        LinearVariantMatrixDisplayF(pluginManager);
+        MultiLinearVariantDisplayF(pluginManager);
+        MultiVariantRendererF(pluginManager);
+        LinearVariantMatrixRendererF(pluginManager);
         StructuralVariantChordRendererF(pluginManager);
         ChordVariantDisplayF(pluginManager);
+        pluginManager.addRpcMethod(() => new MultiVariantGetSources(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetGenotypeMatrix(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetSimplifiedFeatures(pluginManager));
     }
 }
 export { default as VcfFeature } from './VcfFeature';

package/esm/shared/BulkEditPanel.d.ts

@@ -0,0 +1,5 @@
+import type { Source } from '../types';
+export default function BulkEditPanel({ onClose, currLayout, }: {
+    currLayout: Source[];
+    onClose: (arg?: Source[]) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/BulkEditPanel.js

@@ -0,0 +1,81 @@
+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 { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+});
+export default function BulkEditPanel({ onClose, currLayout, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = useState('');
+    const [error, setError] = useState();
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Paste CSV or TSV. If a header column is present. First line is a header. If a column called \"name\" is present, it uses that to connect to IDs in the table, otherwise it uses the first column no." }), error ? _jsx(ErrorMessage, { error: error }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, placeholder: 'name,population\nHG00098,GBR\nHG00101,GBR\nHG00459,CHS\n...', maxRows: 10, fullWidth: true, value: val, onChange: event => {
+                            setVal(event.target.value);
+                        }, slotProps: {
+                            input: {
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            const lines = val
+                                .split('\n')
+                                .map(f => f.trim())
+                                .filter(f => !!f);
+                            const fields = lines[0].split(/[,\t]/gm);
+                            if (fields.includes('name')) {
+                                setError('');
+                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
+                                const newData = Object.fromEntries(lines.slice(1).map(line => {
+                                    const cols = line.split(/[,\t]/gm);
+                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                                    return [
+                                        newRecord.name,
+                                        {
+                                            ...newRecord,
+                                            ...oldLayout[newRecord.name],
+                                        },
+                                    ];
+                                }));
+                                onClose(currLayout.map(record => ({
+                                    ...record,
+                                    ...newData[record.name],
+                                })));
+                            }
+                            else {
+                                setError(new Error('No "name" column found on line 1'));
+                            }
+                        }, children: "Update rows" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            const lines = val
+                                .split('\n')
+                                .map(f => f.trim())
+                                .filter(f => !!f);
+                            const fields = lines[0].split(/[,\t]/gm);
+                            if (fields.includes('name')) {
+                                setError('');
+                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
+                                const newData = Object.fromEntries(lines.slice(1).map(line => {
+                                    const cols = line.split(/[,\t]/gm);
+                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                                    return [
+                                        newRecord.name,
+                                        {
+                                            ...newRecord,
+                                            ...oldLayout[newRecord.name],
+                                        },
+                                    ];
+                                }));
+                                onClose(currLayout.map(record => ({
+                                    ...newData[record.name],
+                                })));
+                            }
+                            else {
+                                setError(new Error('No "name" column found on line 1'));
+                            }
+                        }, children: "Replace rows" }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
+                            onClose();
+                        }, children: "Cancel" })] })] }));
+}

package/esm/shared/ClusterDialog.d.ts

@@ -0,0 +1,11 @@
+import type { Source } from '../types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export default function ClusterDialog({ model, handleClose, }: {
+    model: {
+        sources?: Source[];
+        minorAlleleFrequencyFilter?: number;
+        adapterConfig: AnyConfigurationModel;
+        setLayout: (arg: Source[]) => void;
+    };
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/ClusterDialog.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { getContainingView, getSession, isAbortException, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import copy from 'copy-to-clipboard';
+import { saveAs } from 'file-saver';
+import { isAlive } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+export default function ClusterDialog({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const [results, setResults] = useState();
+    const [error, setError] = useState();
+    const [paste, setPaste] = useState('');
+    useEffect(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                const view = getContainingView(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = getSession(model);
+                const { sources, minorAlleleFrequencyFilter, adapterConfig } = model;
+                const sessionId = getRpcSessionId(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
+                    regions: view.dynamicBlocks.contentBlocks,
+                    sources,
+                    minorAlleleFrequencyFilter,
+                    sessionId,
+                    adapterConfig,
+                }));
+                const entries = Object.values(ret);
+                const keys = Object.keys(ret);
+                const text = `try(library(fastcluster), silent=TRUE)
+inputMatrix<-matrix(c(${entries.map(val => val.genotypes.join(',')).join(',\n')}
+),nrow=${entries.length},byrow=TRUE)
+rownames(inputMatrix)<-c(${keys.map(key => `'${key}'`).join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='single')
+cat(resultClusters$order,sep='\\n')`;
+                setResults(text);
+            }
+            catch (e) {
+                if (!isAbortException(e) && isAlive(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+        })();
+    }, [model]);
+    return (_jsxs(Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose, children: [_jsx(DialogContent, { children: _jsxs("div", { className: classes.mgap, children: [_jsx(Typography, { children: "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`." }), _jsx(Typography, { children: "You can then paste the results in this form to specify the row ordering." }), results ? (_jsx("div", { children: _jsxs("div", { children: ["Step 1:", ' ', _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" }), _jsx("div", { children: _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Step 2. 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,
+                                                    },
+                                                },
+                                            } }) })] }) })) : (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })), error ? _jsx(ErrorMessage, { error: error }) : null] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { disabled: !results, variant: "contained", onClick: () => {
+                            const { sources } = model;
+                            if (sources) {
+                                try {
+                                    model.setLayout(paste
+                                        .split('\n')
+                                        .map(t => t.trim())
+                                        .filter(f => !!f)
+                                        .map(r => +r)
+                                        .map(idx => {
+                                        const ret = sources[idx - 1];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+}

package/esm/shared/ColorLegend.d.ts

@@ -0,0 +1,10 @@
+import type { Source } from '../types';
+declare const ColorLegend: ({ model, labelWidth, }: {
+    model: {
+        canDisplayLabels: boolean;
+        rowHeight: number;
+        sources?: Source[];
+    };
+    labelWidth: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ColorLegend;

package/esm/shared/ColorLegend.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { clamp } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import RectBg from './RectBg';
+const ColorLegend = observer(function ({ model, labelWidth, }) {
+    const { canDisplayLabels, rowHeight, sources } = model;
+    const svgFontSize = clamp(rowHeight, 8, 12);
+    const colorBoxWidth = 15;
+    const hasColors = sources === null || sources === void 0 ? void 0 : sources.some(s => s.color);
+    const legendWidth = labelWidth + (hasColors ? colorBoxWidth + 5 : 0);
+    return sources ? (_jsxs(_Fragment, { children: [canDisplayLabels ? (_jsx(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => {
+                const { color, name, label } = source;
+                return (_jsxs(Fragment, { children: [color ? (_jsx(RectBg, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null, canDisplayLabels ? (_jsx("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, children: label || name })) : null] }, `${label}-${idx}`));
+            })] })) : null;
+});
+export default ColorLegend;

package/esm/shared/HelpfulTips.d.ts

@@ -0,0 +1 @@
+export default function HelpfulTips(): import("react/jsx-runtime").JSX.Element;