@jbrowse/plugin-variants 2.18.0 → 3.0.1

package/dist/shared/ClusterDialog.js

@@ -1,33 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = HierarchicalCluster;
-const react_1 = __importStar(require("react"));
+exports.default = ClusterDialog;
+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");
@@ -46,7 +24,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         gap: theme.spacing(4),
     },
 }));
-function HierarchicalCluster({ model, handleClose, }) {
+function ClusterDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const [results, setResults] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)();
@@ -61,12 +39,12 @@ function HierarchicalCluster({ model, handleClose, }) {
                     return;
                 }
                 const { rpcManager } = (0, util_1.getSession)(model);
-                const { sources, mafFilter, adapterConfig } = model;
+                const { sources, minorAlleleFrequencyFilter, adapterConfig } = model;
                 const sessionId = (0, tracks_1.getRpcSessionId)(model);
                 const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources,
-                    mafFilter,
+                    minorAlleleFrequencyFilter,
                     sessionId,
                     adapterConfig,
                 }));
@@ -88,63 +66,44 @@ cat(resultClusters$order,sep='\\n')`;
             }
         })();
     }, [model]);
-    return (react_1.default.createElement(ui_1.Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose },
-        react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement("div", { className: classes.mgap },
-                react_1.default.createElement(material_1.Typography, null, "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`."),
-                react_1.default.createElement(material_1.Typography, null, "You can then paste the results in this form to specify the row ordering."),
-                results ? (react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", null,
-                        "Step 1:",
-                        ' ',
-                        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                                (0, file_saver_1.saveAs)(new Blob([results || ''], {
-                                    type: 'text/plain;charset=utf-8',
-                                }), 'cluster.R');
-                            } }, "Download Rscript"),
-                        ' ',
-                        "or",
-                        ' ',
-                        react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => {
-                                (0, copy_to_clipboard_1.default)(results || '');
-                            } }, "Copy Rscript to clipboard"),
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement(material_1.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_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })),
-                error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null)),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose, children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes.mgap, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`." }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "You can then paste the results in this form to specify the row ordering." }), results ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { children: ["Step 1:", ' ', (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" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.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,
+                                                    },
+                                                },
+                                            } }) })] }) })) : ((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)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.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);
                                 }
-                                return ret;
-                            }));
-                        }
-                        catch (e) {
-                            console.error(e);
-                            setError(e);
-                        }
-                    }
-                    handleClose();
-                } }, "Apply clustering"),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    handleClose();
-                } }, "Cancel"))));
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
 }

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

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const RectBg_1 = __importDefault(require("./RectBg"));
@@ -11,14 +12,11 @@ const ColorLegend = (0, mobx_react_1.observer)(function ({ model, labelWidth, })
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = (0, util_1.clamp)(rowHeight, 8, 12);
     const colorBoxWidth = 15;
-    const legendWidth = labelWidth + colorBoxWidth + 5;
-    return sources ? (react_1.default.createElement(react_1.default.Fragment, null,
-        canDisplayLabels ? (react_1.default.createElement(RectBg_1.default, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
-        sources.map((source, idx) => {
-            const { color, name } = source;
-            return (react_1.default.createElement(react_1.default.Fragment, { key: `${name}-${idx}` },
-                color ? (react_1.default.createElement(RectBg_1.default, { y: idx * rowHeight + 1, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null,
-                canDisplayLabels ? (react_1.default.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [canDisplayLabels ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => {
+                const { color, name, label } = source;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null, canDisplayLabels ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, children: label || name })) : null] }, `${label}-${idx}`));
+            })] })) : null;
 });
 exports.default = ColorLegend;

package/dist/shared/HelpfulTips.d.ts

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

package/dist/shared/HelpfulTips.js

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

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

@@ -4,19 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LegendBar = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const ColorLegend_1 = __importDefault(require("./ColorLegend"));
 const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
     const { id, scrollTop, height } = model;
     const clipid = `legend-${id}`;
-    return exportSVG ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("defs", null,
-            react_1.default.createElement("clipPath", { id: clipid },
-                react_1.default.createElement("rect", { x: 0, y: 0, width: 1000, height: height }))),
-        react_1.default.createElement("g", { clipPath: `url(#${clipid})` },
-            react_1.default.createElement("g", { transform: `translate(0,${-scrollTop})` }, children)))) : (react_1.default.createElement("svg", { style: {
+    return exportSVG ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipid, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 1000, height: height }) }) }), (0, jsx_runtime_1.jsx)("g", { clipPath: `url(#${clipid})`, children: (0, jsx_runtime_1.jsx)("g", { transform: `translate(0,${-scrollTop})`, children: children }) })] })) : ((0, jsx_runtime_1.jsx)("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
@@ -24,15 +19,14 @@ const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSV
             pointerEvents: 'none',
             height: model.totalHeight,
             width: (0, util_1.getContainingView)(model).width,
-        } }, children));
+        }, children: children }));
 });
 exports.LegendBar = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = (0, util_1.clamp)(rowHeight, 8, 12);
-    return sources ? (react_1.default.createElement(Wrapper, { ...props },
-        react_1.default.createElement(ColorLegend_1.default, { model: model, labelWidth: Math.max(...sources
-                .map(s => (0, util_1.measureText)(s.name, svgFontSize) + 10)
-                .map(width => (canDisplayLabels ? width : 20))) }))) : null;
+    return sources ? ((0, jsx_runtime_1.jsx)(Wrapper, { ...props, children: (0, jsx_runtime_1.jsx)(ColorLegend_1.default, { model: model, labelWidth: (0, util_1.max)(sources
+                .map(s => (0, util_1.measureText)(s.label, svgFontSize) + 10)
+                .map(width => (canDisplayLabels ? width : 20)), 0) }) })) : null;
 });
 exports.default = exports.LegendBar;

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

@@ -1,29 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
@@ -33,24 +11,18 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 const MAFFilterDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
-    const { mafFilter = '' } = model;
+    const { minorAlleleFrequencyFilter = '' } = model;
     const { classes } = useStyles();
-    const [maf, setMaf] = (0, react_1.useState)(`${mafFilter}`);
-    return (react_1.default.createElement(material_1.Dialog, { open: true, onClose: handleClose, title: "Set minor allele frequency (MAF)" },
-        react_1.default.createElement(material_1.DialogContent, { className: classes.root },
-            react_1.default.createElement(material_1.Typography, null, "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns"),
-            react_1.default.createElement(material_1.TextField, { value: maf, autoFocus: true, placeholder: "Enter MAF", onChange: event => {
-                    setMaf(event.target.value);
-                } }),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                        if (!Number.isNaN(+maf)) {
-                            model.setMafFilter(+maf);
-                        }
-                        handleClose();
-                    } }, "Submit"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
+    const [maf, setMaf] = (0, react_1.useState)(`${minorAlleleFrequencyFilter}`);
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { open: true, onClose: handleClose, title: "Set minor allele frequency (MAF)", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.root, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: maf, autoFocus: true, placeholder: "Enter MAF", onChange: event => {
+                        setMaf(event.target.value);
+                    } }), (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, onClick: () => {
+                                if (!Number.isNaN(+maf)) {
+                                    model.setMafFilter(+maf);
+                                }
+                                handleClose();
+                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
 });
 exports.default = MAFFilterDialog;