@jbrowse/plugin-variants 3.0.5 → 3.2.0

package/esm/shared/components/SourcesDataGrid.js

@@ -14,49 +14,56 @@ const useStyles = makeStyles()({
 });
 export default function SourcesDataGrid({ rows, onChange, setSelected, }) {
     const { classes } = useStyles();
-    const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
     const [currSort, setCurrSort] = useState({
         idx: 0,
         field: null,
     });
-    return (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                setSelected(arg);
-            }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                {
-                    field: 'color',
-                    headerName: 'Color',
-                    renderCell: params => {
-                        const { value, id } = params;
-                        return (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
-                                const elt = rows.find(f => f.name === id);
-                                if (elt) {
-                                    elt.color = c;
-                                }
-                                onChange([...rows]);
-                            } }));
+    if (rows.length) {
+        const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
+        return (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                    setSelected(arg);
+                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                    {
+                        field: 'color',
+                        headerName: 'Color',
+                        renderCell: params => {
+                            const { value, id } = params;
+                            return (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } }));
+                        },
                     },
-                },
-                {
-                    field: 'label',
-                    headerName: 'Name',
-                    width: measureGridWidth(rows.map(r => r.label)),
-                },
-                ...Object.keys(rest).map(val => ({
-                    field: val,
-                    renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
-                    width: measureGridWidth(rows.map(r => `${r[val]}`)),
-                })),
-            ], sortModel: [], onSortModelChange: args => {
-                const sort = args[0];
-                const idx = (currSort.idx + 1) % 2;
-                const field = sort.field || currSort.field;
-                setCurrSort({ idx, field });
-                onChange(field
-                    ? [...rows].sort((a, b) => {
-                        const aa = getStr(a[field]);
-                        const bb = getStr(b[field]);
-                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
-                    })
-                    : rows);
-            } }) }));
+                    {
+                        field: 'label',
+                        headerName: 'Name',
+                        width: measureGridWidth(rows.map(r => r.label)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
+                        width: measureGridWidth(rows.map(r => `${r[val]}`)),
+                    })),
+                ], sortModel: [], onSortModelChange: args => {
+                    const sort = args[0];
+                    const idx = (currSort.idx + 1) % 2;
+                    const field = sort.field || currSort.field;
+                    setCurrSort({ idx, field });
+                    onChange(field
+                        ? [...rows].sort((a, b) => {
+                            const aa = getStr(a[field]);
+                            const bb = getStr(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }) }));
+    }
+    else {
+        return _jsx("div", { children: "No rows, check sample metadata configuration" });
+    }
 }

package/esm/shared/components/SourcesGridHeader.js

@@ -22,12 +22,12 @@ export default function SourcesGridHeader({ selected, onChange, rows, showTips,
                     onChange(moveDown([...rows], selected, rows.length));
                 }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowDownIcon, {}), showTips ? 'Move selected items to bottom' : null] }), _jsx(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
                     setWidgetColor(c);
-                    selected.forEach(id => {
+                    for (const id of selected) {
                         const elt = rows.find(f => f.name === id);
                         if (elt) {
                             elt.color = c;
                         }
-                    });
+                    }
                     onChange([...rows]);
                 }, onClose: () => {
                     setAnchorEl(null);

package/esm/shared/getSources.d.ts

@@ -0,0 +1,15 @@
+import type { SampleInfo, Source } from './types';
+export declare function getSources({ sources, layout, renderingMode, sampleInfo, }: {
+    sources: Source[];
+    layout?: Source[];
+    renderingMode: string;
+    sampleInfo?: Record<string, SampleInfo>;
+}): {
+    label: string;
+    id: string;
+    baseUri?: string;
+    name: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+}[];

package/esm/shared/getSources.js

@@ -0,0 +1,31 @@
+export function getSources({ sources, layout = sources, renderingMode, sampleInfo, }) {
+    const rows = [];
+    const sourceMap = Object.fromEntries(sources.map(s => [s.name, s]));
+    for (const row of layout) {
+        if (renderingMode === 'phased') {
+            const info = sampleInfo === null || sampleInfo === void 0 ? void 0 : sampleInfo[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({
+                        ...sourceMap[row.name],
+                        ...row,
+                        label: id,
+                        HP: i,
+                        id: id,
+                    });
+                }
+            }
+        }
+        else {
+            rows.push({
+                ...sourceMap[row.name],
+                ...row,
+                label: row.name,
+                id: row.name,
+            });
+        }
+    }
+    return rows;
+}

package/esm/shared/minorAlleleFrequencyUtils.d.ts

@@ -1,11 +1,9 @@
 import type { Feature } from '@jbrowse/core/util';
 export declare function findSecondLargestNumber(arr: Iterable<number>): number;
-export declare function calculateAlleleCounts(feat: Feature): {
-    alleleCounts: Map<any, any>;
-    mostFrequentAlt: any;
-};
+export declare function calculateAlleleCounts(feat: Feature): Map<any, any>;
 export declare function calculateMinorAlleleFrequency(alleleCounts: Map<string, number>): number;
-export declare function getFeaturesThatPassMinorAlleleFrequencyFilter(feats: Iterable<Feature>, minorAlleleFrequencyFilter: number): {
+export declare function getFeaturesThatPassMinorAlleleFrequencyFilter(feats: Iterable<Feature>, minorAlleleFrequencyFilter: number, lengthCutoffFilter?: number): {
     feature: Feature;
     mostFrequentAlt: string;
+    alleleCounts: Map<string, number>;
 }[];

package/esm/shared/minorAlleleFrequencyUtils.js

@@ -22,6 +22,13 @@ export function calculateAlleleCounts(feat) {
             alleleCounts.set(allele, (alleleCounts.get(allele) || 0) + 1);
         }
     }
+    return alleleCounts;
+}
+export function calculateMinorAlleleFrequency(alleleCounts) {
+    return (findSecondLargestNumber(alleleCounts.values()) /
+        (sum(alleleCounts.values()) || 1));
+}
+function getMostFrequentAlt(alleleCounts) {
     let mostFrequentAlt;
     let max = 0;
     for (const [alt, altCount] of alleleCounts.entries()) {
@@ -32,22 +39,20 @@ export function calculateAlleleCounts(feat) {
             }
         }
     }
-    return { alleleCounts, mostFrequentAlt };
-}
-export function calculateMinorAlleleFrequency(alleleCounts) {
-    return (findSecondLargestNumber(alleleCounts.values()) /
-        (sum(alleleCounts.values()) || 1));
+    return mostFrequentAlt;
 }
-export function getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter) {
+export function getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter, lengthCutoffFilter = 10) {
     const results = [];
     for (const feature of feats) {
-        if (feature.get('end') - feature.get('start') <= 10) {
-            const { mostFrequentAlt, alleleCounts } = calculateAlleleCounts(feature);
+        if (feature.get('end') - feature.get('start') <= lengthCutoffFilter) {
+            const alleleCounts = calculateAlleleCounts(feature);
             if (calculateMinorAlleleFrequency(alleleCounts) >=
                 minorAlleleFrequencyFilter) {
+                const mostFrequentAlt = getMostFrequentAlt(alleleCounts);
                 results.push({
                     feature,
                     mostFrequentAlt,
+                    alleleCounts,
                 });
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "3.0.5",
+  "version": "3.2.0",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -40,10 +40,10 @@
     "@gmod/bgzf-filehandle": "^2.0.1",
     "@gmod/tabix": "^2.0.0",
     "@gmod/vcf": "^6.0.8",
-    "@jbrowse/core": "^3.0.5",
-    "@jbrowse/plugin-circular-view": "^3.0.5",
-    "@jbrowse/plugin-linear-genome-view": "^3.0.5",
-    "@jbrowse/sv-core": "^3.0.5",
+    "@jbrowse/core": "^3.2.0",
+    "@jbrowse/plugin-circular-view": "^3.2.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.2.0",
+    "@jbrowse/sv-core": "^3.2.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
@@ -62,5 +62,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "a03749efe19e51609922272b845a331897346789"
+  "gitHead": "c750e3f56706a490c19ba75abd807fec5e38aebf"
 }

package/dist/shared/components/ClusterDialog.d.ts

@@ -1,11 +0,0 @@
-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/dist/shared/components/ClusterDialog.js

@@ -1,109 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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");
-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_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),
-    },
-}));
-function ClusterDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    const [results, setResults] = (0, react_1.useState)();
-    const [error, setError] = (0, react_1.useState)();
-    const [paste, setPaste] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        ;
-        (async () => {
-            try {
-                setError(undefined);
-                const view = (0, util_1.getContainingView)(model);
-                if (!view.initialized) {
-                    return;
-                }
-                const { rpcManager } = (0, util_1.getSession)(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,
-                    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 (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
-                    console.error(e);
-                    setError(e);
-                }
-            }
-        })();
-    }, [model]);
-    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);
-                                }
-                            }
-                            handleClose();
-                        }, children: "Apply clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                        }, children: "Cancel" })] })] }));
-}

package/esm/shared/components/ClusterDialog.d.ts

@@ -1,11 +0,0 @@
-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/components/ClusterDialog.js

@@ -1,103 +0,0 @@
-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" })] })] }));
-}