@jbrowse/plugin-variants 2.18.0 → 3.0.1

package/esm/shared/ClusterDialog.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+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';
@@ -17,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         gap: theme.spacing(4),
     },
 }));
-export default function HierarchicalCluster({ model, handleClose, }) {
+export default function ClusterDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const [results, setResults] = useState();
     const [error, setError] = useState();
@@ -32,12 +33,12 @@ export default function HierarchicalCluster({ model, handleClose, }) {
                     return;
                 }
                 const { rpcManager } = getSession(model);
-                const { sources, mafFilter, adapterConfig } = model;
+                const { sources, minorAlleleFrequencyFilter, adapterConfig } = model;
                 const sessionId = getRpcSessionId(model);
                 const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources,
-                    mafFilter,
+                    minorAlleleFrequencyFilter,
                     sessionId,
                     adapterConfig,
                 }));
@@ -59,63 +60,44 @@ cat(resultClusters$order,sep='\\n')`;
             }
         })();
     }, [model]);
-    return (React.createElement(Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose },
-        React.createElement(DialogContent, null,
-            React.createElement("div", { className: classes.mgap },
-                React.createElement(Typography, null, "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`."),
-                React.createElement(Typography, null, "You can then paste the results in this form to specify the row ordering."),
-                results ? (React.createElement("div", null,
-                    React.createElement("div", null,
-                        "Step 1:",
-                        ' ',
-                        React.createElement(Button, { variant: "contained", onClick: () => {
-                                saveAs(new Blob([results || ''], {
-                                    type: 'text/plain;charset=utf-8',
-                                }), 'cluster.R');
-                            } }, "Download Rscript"),
-                        ' ',
-                        "or",
-                        ' ',
-                        React.createElement(Button, { variant: "contained", onClick: () => {
-                                copy(results || '');
-                            } }, "Copy Rscript to clipboard"),
-                        React.createElement("div", null,
-                            React.createElement(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,
-                                        },
-                                    },
-                                } }))))) : (React.createElement(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })),
-                error ? React.createElement(ErrorMessage, { error: error }) : null)),
-        React.createElement(DialogActions, null,
-            React.createElement(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 (_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;
+                                    }));
                                 }
-                                return ret;
-                            }));
-                        }
-                        catch (e) {
-                            console.error(e);
-                            setError(e);
-                        }
-                    }
-                    handleClose();
-                } }, "Apply clustering"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"))));
+                                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

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

package/esm/shared/ColorLegend.js

@@ -1,4 +1,5 @@
-import React from 'react';
+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';
@@ -6,14 +7,11 @@ const ColorLegend = observer(function ({ model, labelWidth, }) {
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = clamp(rowHeight, 8, 12);
     const colorBoxWidth = 15;
-    const legendWidth = labelWidth + colorBoxWidth + 5;
-    return sources ? (React.createElement(React.Fragment, null,
-        canDisplayLabels ? (React.createElement(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
-        sources.map((source, idx) => {
-            const { color, name } = source;
-            return (React.createElement(React.Fragment, { key: `${name}-${idx}` },
-                color ? (React.createElement(RectBg, { y: idx * rowHeight + 1, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null,
-                canDisplayLabels ? (React.createElement("text", { y: idx * rowHeight + svgFontSize, x: colorBoxWidth + 2, fontSize: svgFontSize }, name)) : null));
-        }))) : null;
+    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;

package/esm/shared/HelpfulTips.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function HelpfulTips() {
+    return (_jsxs(_Fragment, { children: ["Helpful tips", _jsxs("ul", { children: [_jsx("li", { children: "You can select rows in the table with the checkboxes" }), _jsx("li", { children: "Multi-select is enabled with shift-click and control-click" }), _jsx("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), _jsx("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), _jsx("li", { children: "Changes are applied when you hit Submit" }), _jsx("li", { children: "You can click and drag the dialog box to move it on the screen" }), _jsx("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
+}

package/esm/shared/LegendBar.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { Source } from '../util';
+import type { Source } from '../types';
 interface ReducedModel {
     scrollTop: number;
     totalHeight: number;
@@ -8,11 +7,12 @@ interface ReducedModel {
     sources?: Source[];
     canDisplayLabels: boolean;
     height: number;
+    samplePloidy?: Record<string, number>;
     id: string;
 }
 export declare const LegendBar: (props: {
     model: ReducedModel;
     orientation?: string;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default LegendBar;

package/esm/shared/LegendBar.js

@@ -1,16 +1,11 @@
-import React from 'react';
-import { clamp, getContainingView, measureText } from '@jbrowse/core/util';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp, getContainingView, max, measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import ColorLegend from './ColorLegend';
 const Wrapper = observer(function ({ children, model, exportSVG, }) {
     const { id, scrollTop, height } = model;
     const clipid = `legend-${id}`;
-    return exportSVG ? (React.createElement(React.Fragment, null,
-        React.createElement("defs", null,
-            React.createElement("clipPath", { id: clipid },
-                React.createElement("rect", { x: 0, y: 0, width: 1000, height: height }))),
-        React.createElement("g", { clipPath: `url(#${clipid})` },
-            React.createElement("g", { transform: `translate(0,${-scrollTop})` }, children)))) : (React.createElement("svg", { style: {
+    return exportSVG ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: 1000, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipid})`, children: _jsx("g", { transform: `translate(0,${-scrollTop})`, children: children }) })] })) : (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
@@ -18,15 +13,14 @@ const Wrapper = observer(function ({ children, model, exportSVG, }) {
             pointerEvents: 'none',
             height: model.totalHeight,
             width: getContainingView(model).width,
-        } }, children));
+        }, children: children }));
 });
 export const LegendBar = observer(function (props) {
     const { model } = props;
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = clamp(rowHeight, 8, 12);
-    return sources ? (React.createElement(Wrapper, { ...props },
-        React.createElement(ColorLegend, { model: model, labelWidth: Math.max(...sources
-                .map(s => measureText(s.name, svgFontSize) + 10)
-                .map(width => (canDisplayLabels ? width : 20))) }))) : null;
+    return sources ? (_jsx(Wrapper, { ...props, children: _jsx(ColorLegend, { model: model, labelWidth: max(sources
+                .map(s => measureText(s.label, svgFontSize) + 10)
+                .map(width => (canDisplayLabels ? width : 20)), 0) }) })) : null;
 });
 export default LegendBar;

package/esm/shared/MAFFilterDialog.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const MAFFilterDialog: ({ model, handleClose, }: {
     model: {
-        mafFilter?: number;
+        minorAlleleFrequencyFilter?: number;
         setMafFilter: (arg: number) => void;
     };
     handleClose: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MAFFilterDialog;

package/esm/shared/MAFFilterDialog.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -8,24 +9,18 @@ const useStyles = makeStyles()({
     },
 });
 const MAFFilterDialog = observer(function ({ model, handleClose, }) {
-    const { mafFilter = '' } = model;
+    const { minorAlleleFrequencyFilter = '' } = model;
     const { classes } = useStyles();
-    const [maf, setMaf] = useState(`${mafFilter}`);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set minor allele frequency (MAF)" },
-        React.createElement(DialogContent, { className: classes.root },
-            React.createElement(Typography, null, "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns"),
-            React.createElement(TextField, { value: maf, autoFocus: true, placeholder: "Enter MAF", onChange: event => {
-                    setMaf(event.target.value);
-                } }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                        if (!Number.isNaN(+maf)) {
-                            model.setMafFilter(+maf);
-                        }
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    const [maf, setMaf] = useState(`${minorAlleleFrequencyFilter}`);
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set minor allele frequency (MAF)", children: _jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns" }), _jsx(TextField, { value: maf, autoFocus: true, placeholder: "Enter MAF", onChange: event => {
+                        setMaf(event.target.value);
+                    } }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                                if (!Number.isNaN(+maf)) {
+                                    model.setMafFilter(+maf);
+                                }
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 export default MAFFilterDialog;