@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/VariantFeatureWidget/VariantConsequence/VariantConsequenceDataGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
-import VariantConsequenceDataGridWrapper from './VariantConsequenceDataGridWrapper';
+import VariantConsequenceDataGridWrapper from "./VariantConsequenceDataGridWrapper.js";
 export default function VariantConsequenceDataGrid({ data, fields, title, }) {
     return data.length ? (_jsx(BaseCard, { title: title, children: _jsx(VariantConsequenceDataGridWrapper, { rows: data.map((elt, id) => ({
                 id,

package/esm/VariantFeatureWidget/VariantFeatureWidget.d.ts

@@ -1,4 +1,4 @@
-import type { VariantFeatureWidgetModel } from './stateModelFactory';
+import type { VariantFeatureWidgetModel } from './stateModelFactory.ts';
 declare const VariantFeatureWidget: (props: {
     model: VariantFeatureWidgetModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -4,35 +4,24 @@ import { parseBreakend } from '@gmod/vcf';
 import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import AltFormatter from './AltFormatter';
-import Formatter from './Formatter';
-import VariantSampleGrid from './VariantSampleGrid/VariantSampleGrid';
-import { variantFieldDescriptions } from './variantFieldDescriptions';
-const LaunchBreakendPanel = lazy(() => import('./LaunchBreakendPanel/LaunchBreakendPanel'));
-const VariantConsequenceDataGrid = lazy(() => import('./VariantConsequence/VariantConsequenceDataGrid'));
-function AnnPanel({ descriptions, feature, }) {
-    var _a, _b, _c, _d, _e;
-    const annDesc = (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.INFO) === null || _a === void 0 ? void 0 : _a.ANN) === null || _b === void 0 ? void 0 : _b.Description;
-    const annFields = ((_d = (_c = annDesc === null || annDesc === void 0 ? void 0 : annDesc.match(/.*Functional annotations:'(.*)'$/)) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.split('|')) || [];
-    const ann = ((_e = feature.INFO) === null || _e === void 0 ? void 0 : _e.ANN) || [];
-    return (_jsx(VariantConsequenceDataGrid, { fields: annFields, data: ann, title: "Variant ANN field" }));
-}
-function CsqPanel({ descriptions, feature, }) {
-    var _a, _b, _c, _d, _e;
-    const csqDescription = (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.INFO) === null || _a === void 0 ? void 0 : _a.CSQ) === null || _b === void 0 ? void 0 : _b.Description;
-    const csqFields = ((_d = (_c = csqDescription === null || csqDescription === void 0 ? void 0 : csqDescription.match(/.*Format: (.*)/)) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.split('|')) || [];
-    const csq = ((_e = feature.INFO) === null || _e === void 0 ? void 0 : _e.CSQ) || [];
-    return (_jsx(VariantConsequenceDataGrid, { fields: csqFields, data: csq, title: "Variant CSQ field" }));
+import AltFormatter from "./AltFormatter.js";
+import Formatter from "./Formatter.js";
+import VariantSampleGrid from "./VariantSampleGrid/VariantSampleGrid.js";
+import { variantFieldDescriptions } from "./variantFieldDescriptions.js";
+const LaunchBreakendPanel = lazy(() => import("./LaunchBreakendPanel/LaunchBreakendPanel.js"));
+const VariantConsequenceDataGrid = lazy(() => import("./VariantConsequence/VariantConsequenceDataGrid.js"));
+function AnnotationPanel({ descriptions, feature, fieldKey, title, regex, }) {
+    const desc = descriptions?.INFO?.[fieldKey]?.Description;
+    const fields = desc?.match(regex)?.[1]?.split('|') || [];
+    const data = feature.INFO?.[fieldKey] || [];
+    return (_jsx(VariantConsequenceDataGrid, { fields: fields, data: data, title: title }));
 }
+const svTypes = ['inversion', 'deletion', 'duplication', 'cnv', 'sv'];
 function LaunchBreakendWidgetArea({ model, }) {
     const { featureData } = model;
     const feat = JSON.parse(JSON.stringify(featureData));
     const { type = '' } = feat;
-    return type === 'breakend' ? (_jsx(LaunchBreakendPanel, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = parseBreakend(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : type === 'translocation' ? (_jsx(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : type === 'paired_feature' ? (_jsx(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.mate.refName}:${feat.mate.start}`] })) : type.includes('inversion') ||
-        type.includes('deletion') ||
-        type.includes('duplication') ||
-        type.includes('cnv') ||
-        type.includes('sv') ? (_jsx(LaunchBreakendPanel, { feature: {
+    return type === 'breakend' ? (_jsx(LaunchBreakendPanel, { feature: feat, locStrings: feat.ALT.map((alt) => parseBreakend(alt)?.MatePosition || ''), model: model })) : type === 'translocation' ? (_jsx(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : type === 'paired_feature' ? (_jsx(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.mate.refName}:${feat.mate.start}`] })) : svTypes.some(t => type.includes(t)) ? (_jsx(LaunchBreakendPanel, { feature: {
             uniqueId: 'random',
             refName: feat.refName,
             start: feat.start,
@@ -44,7 +33,7 @@ function LaunchBreakendWidgetArea({ model, }) {
             },
         }, model: model, locStrings: [`${feat.refName}:${feat.end}`] })) : null;
 }
-const FeatDefined = observer(function (props) {
+const FeatDefined = observer(function FeatDefined(props) {
     const { feat, model } = props;
     const { descriptions } = model;
     const { samples, ...rest } = feat;
@@ -52,11 +41,9 @@ const FeatDefined = observer(function (props) {
     return (_jsxs(Paper, { "data-testid": "variant-side-drawer", children: [_jsx(FeatureDetails, { feature: rest, descriptions: {
                     ...variantFieldDescriptions,
                     ...descriptions,
-                }, formatter: (value, key) => {
-                    return key === 'ALT' ? (_jsx(AltFormatter, { value: `${value}`, refString: REF })) : (_jsx(Formatter, { value: value }));
-                }, ...props }), _jsxs(Suspense, { fallback: null, children: [_jsx(CsqPanel, { feature: rest, descriptions: descriptions }), _jsx(AnnPanel, { feature: rest, descriptions: descriptions }), _jsx(LaunchBreakendWidgetArea, { model: model })] }), _jsx(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })] }));
+                }, formatter: (value, key) => key === 'ALT' ? (_jsx(AltFormatter, { value: `${value}`, refString: REF })) : (_jsx(Formatter, { value: value })), ...props }), _jsxs(Suspense, { fallback: null, children: [_jsx(AnnotationPanel, { feature: rest, descriptions: descriptions, fieldKey: "CSQ", title: "Variant CSQ field", regex: /.*Format: (.*)/ }), _jsx(AnnotationPanel, { feature: rest, descriptions: descriptions, fieldKey: "ANN", title: "Variant ANN field", regex: /.*Functional annotations:'(.*)'$/ }), _jsx(LaunchBreakendWidgetArea, { model: model })] }), _jsx(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })] }));
 });
-const VariantFeatureWidget = observer(function (props) {
+const VariantFeatureWidget = observer(function VariantFeatureWidget(props) {
     const { model } = props;
     const { featureData } = model;
     const feat = structuredClone(featureData);

package/esm/VariantFeatureWidget/VariantSampleGrid/VariantGenotypeFrequencyTable.d.ts

@@ -1,4 +1,7 @@
-import type { VariantSampleGridRow } from './types';
-export default function VariantGenotypeFrequencyTable({ rows, }: {
+import type { VariantSampleGridRow } from './types.ts';
+export default function VariantGenotypeFrequencyTable({ rows, selectedGenotypes, setSelectedGenotypes, showToolbar, }: {
     rows: VariantSampleGridRow[];
+    selectedGenotypes: Set<string> | null;
+    setSelectedGenotypes: (v: Set<string> | null) => void;
+    showToolbar?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/VariantSampleGrid/VariantGenotypeFrequencyTable.js

@@ -1,47 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import DataGridFlexContainer from '@jbrowse/core/ui/DataGridFlexContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { measureGridWidth } from '@jbrowse/core/util';
-import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 function toP(n) {
     return n.toPrecision(3);
 }
-export default function VariantGenotypeFrequencyTable({ rows, }) {
-    const [useCounts, setUseCounts] = useState(false);
+export default function VariantGenotypeFrequencyTable({ rows, selectedGenotypes, setSelectedGenotypes, showToolbar, }) {
     const summary = {};
-    if (!useCounts) {
-        for (const row of rows) {
-            const gt = row.GT;
-            if (!summary[gt]) {
-                summary[gt] = {
-                    count: 0,
-                    GT: row.GT,
-                    genotype: row.genotype,
-                };
-            }
-            summary[gt].count++;
-        }
-    }
-    else {
-        for (const row of rows) {
-            const alleleCounts = {};
-            const alleles = row.GT.split(/[/|]/);
-            for (const allele of alleles) {
-                alleleCounts[allele] = (alleleCounts[allele] || 0) + 1;
-            }
-            const key = Object.entries(alleleCounts)
-                .map(([key, val]) => `${key}:${val}`)
-                .join(';');
-            if (!summary[key]) {
-                summary[key] = {
-                    count: 0,
-                    GT: key,
-                    genotype: row.genotype,
-                };
-            }
-            summary[key].count++;
+    for (const row of rows) {
+        const gt = row.GT;
+        if (!summary[gt]) {
+            summary[gt] = {
+                count: 0,
+                GT: row.GT,
+                genotype: row.genotype,
+            };
         }
+        summary[gt].count++;
     }
     const gridRows = Object.entries(summary).map(([key, val]) => ({
         id: key,
@@ -49,26 +24,60 @@ export default function VariantGenotypeFrequencyTable({ rows, }) {
         count: `${val.count} / ${rows.length}`,
         frequency: `${toP((val.count / rows.length) * 100)}%`,
     }));
-    const keys = gridRows[0] ? Object.keys(gridRows[0]) : [];
-    const widths = keys.map(e => measureGridWidth(gridRows.map(r => `${r[e]}`)));
-    return (_jsxs("div", { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: useCounts }), label: _jsx(Typography, { variant: "body2", children: "Use allele counts instead of exact GT" }), onChange: (_, checked) => {
-                    setUseCounts(checked);
-                } }), _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { rows: gridRows, hideFooter: true, rowHeight: 25, columnHeaderHeight: 35, columns: [
-                        {
-                            field: 'GT',
-                            width: widths[0],
-                        },
-                        {
-                            field: 'count',
-                            width: widths[1],
-                        },
-                        {
-                            field: 'frequency',
-                            width: widths[2],
-                        },
-                        {
-                            field: 'genotype',
-                            width: widths[3],
-                        },
-                    ] }) })] }));
+    const allSelected = selectedGenotypes === null ||
+        gridRows.every(r => selectedGenotypes.has(r.GT));
+    const height = 25 + gridRows.length * 25 + 15 + (showToolbar ? 40 : 0);
+    return (_jsx("div", { style: { height }, children: _jsx(DataGrid, { rows: gridRows, hideFooter: true, rowHeight: 25, columnHeaderHeight: 25, columns: [
+                {
+                    field: 'select',
+                    headerName: '',
+                    width: 27,
+                    sortable: false,
+                    disableColumnMenu: true,
+                    renderHeader: () => (_jsx(Checkbox, { checked: allSelected, indeterminate: selectedGenotypes !== null &&
+                            selectedGenotypes.size > 0 &&
+                            selectedGenotypes.size < gridRows.length, onChange: (_, checked) => {
+                            if (checked) {
+                                setSelectedGenotypes(null);
+                            }
+                            else {
+                                setSelectedGenotypes(new Set());
+                            }
+                        }, size: "small" })),
+                    renderCell: params => {
+                        const isChecked = selectedGenotypes === null ||
+                            selectedGenotypes.has(params.row.GT);
+                        return (_jsx(Checkbox, { checked: isChecked, onChange: (_, checked) => {
+                                const newSet = new Set(selectedGenotypes === null
+                                    ? gridRows.map(r => r.GT)
+                                    : selectedGenotypes);
+                                if (checked) {
+                                    newSet.add(params.row.GT);
+                                }
+                                else {
+                                    newSet.delete(params.row.GT);
+                                }
+                                if (newSet.size === gridRows.length) {
+                                    setSelectedGenotypes(null);
+                                }
+                                else {
+                                    setSelectedGenotypes(newSet);
+                                }
+                            }, size: "small" }));
+                    },
+                },
+                { field: 'GT', width: measureGridWidth(gridRows.map(r => r.GT)) },
+                {
+                    field: 'count',
+                    width: measureGridWidth(gridRows.map(r => r.count)),
+                },
+                {
+                    field: 'frequency',
+                    width: measureGridWidth(gridRows.map(r => r.frequency)),
+                },
+                {
+                    field: 'genotype',
+                    width: measureGridWidth(gridRows.map(r => r.genotype)),
+                },
+            ], showToolbar: showToolbar }) }));
 }

package/esm/VariantFeatureWidget/VariantSampleGrid/VariantSampleFilters.js

@@ -1,7 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useTransition } from 'react';
 import { TextField, Typography } from '@mui/material';
 export default function SampleFilters({ columns, filter, setFilter, }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "These filters can use a plain text search or regex style query, e.g. in the genotype field, entering 1 will query for all genotypes that include the first alternate allele e.g. 0|1 or 1|1, entering [1-9]\\d* will find any non-zero allele e.g. 0|2 or 2/33" }), columns.map(({ field }) => (_jsx(TextField, { placeholder: `Filter ${field}`, value: filter[field] || '', onChange: event => {
-                    setFilter({ ...filter, [field]: event.target.value });
+    const [localFilter, setLocalFilter] = useState(filter);
+    const [, startTransition] = useTransition();
+    useEffect(() => {
+        setLocalFilter(filter);
+    }, [filter]);
+    return (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "These filters can use a plain text search or regex style query, e.g. in the genotype field, entering 1 will query for all genotypes that include the first alternate allele e.g. 0|1 or 1|1, entering [1-9]\\d* will find any non-zero allele e.g. 0|2 or 2/33" }), columns.map(({ field }) => (_jsx(TextField, { placeholder: `Filter ${field}`, value: localFilter[field] || '', onChange: event => {
+                    const value = event.target.value;
+                    const newFilter = { ...localFilter, [field]: value };
+                    setLocalFilter(newFilter);
+                    startTransition(() => {
+                        setFilter(newFilter);
+                    });
                 } }, `filter-${field}`)))] }));
 }

package/esm/VariantFeatureWidget/VariantSampleGrid/VariantSampleGrid.d.ts

@@ -1,4 +1,4 @@
-import type { VariantFieldDescriptions } from './types';
+import type { VariantFieldDescriptions } from './types.ts';
 import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function VariantSampleGrid(props: {
     feature: SimpleFeatureSerialized;

package/esm/VariantFeatureWidget/VariantSampleGrid/VariantSampleGrid.js

@@ -1,48 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
 import { ErrorMessage } from '@jbrowse/core/ui';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import DataGridFlexContainer from '@jbrowse/core/ui/DataGridFlexContainer';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { measureGridWidth } from '@jbrowse/core/util';
+import SettingsIcon from '@mui/icons-material/Settings';
 import { ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
-import Checkbox2 from '../Checkbox2';
-import VariantGenotypeFrequencyTable from './VariantGenotypeFrequencyTable';
-import SampleFilters from './VariantSampleFilters';
-import { getSampleGridRows } from './getSampleGridRows';
+import VariantGenotypeFrequencyTable from "./VariantGenotypeFrequencyTable.js";
+import SampleFilters from "./VariantSampleFilters.js";
+import { getSampleGridRows } from "./getSampleGridRows.js";
+const gtOnlyFields = new Set(['sample', 'GT']);
+const genotypeFields = new Set(['sample', 'GT', 'genotype']);
 export default function VariantSampleGrid(props) {
     const { feature, descriptions = {} } = props;
     const [filter, setFilter] = useState({});
     const [columnDisplayMode, setColumnDisplayMode] = useState('all');
     const [showFilters, setShowFilters] = useState(false);
+    const [showFrequencyTable, setShowFrequencyTable] = useState(true);
+    const [showToolbar, setShowToolbar] = useState(false);
+    const [useCounts, setUseCounts] = useState(false);
+    const [selectedGenotypes, setSelectedGenotypes] = useState(null);
     const samples = (feature.samples || {});
     const ALT = feature.ALT;
     const REF = feature.REF;
-    const { rows, error } = getSampleGridRows(samples, REF, ALT, filter);
-    const colKeySet = new Set(['sample', ...Object.keys(rows[0] || {})]);
-    colKeySet.delete('id');
-    const keys = [...colKeySet];
-    const widths = keys.map(e => measureGridWidth(rows.map(r => r[e])));
-    const columns = keys.map((field, index) => {
-        var _a, _b;
-        return ({
+    const { rows, error } = getSampleGridRows(samples, REF, ALT, filter, useCounts);
+    const filteredRows = useMemo(() => selectedGenotypes === null
+        ? rows
+        : rows.filter(row => selectedGenotypes.has(row.GT)), [rows, selectedGenotypes]);
+    const columns = useMemo(() => {
+        const keys = [
+            'sample',
+            ...Object.keys(rows[0] || {}).filter(k => k !== 'id' && k !== 'sample'),
+        ];
+        return keys.map(field => ({
             field,
-            description: (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.FORMAT) === null || _a === void 0 ? void 0 : _a[field]) === null || _b === void 0 ? void 0 : _b.Description,
-            width: widths[index],
-        });
-    });
-    const s1 = new Set(['sample', 'GT']);
-    const s2 = new Set(['sample', 'GT', 'genotype']);
-    return !rows.length ? null : (_jsxs(_Fragment, { children: [_jsx(BaseCard, { ...props, title: "Genotype frequencies", children: _jsx(ErrorBoundary, { FallbackComponent: ErrorMessage, children: _jsx(VariantGenotypeFrequencyTable, { rows: rows }) }) }), _jsxs(BaseCard, { ...props, title: "Samples", children: [error ? _jsx(Typography, { color: "error", children: `${error}` }) : null, _jsxs("div", { children: [_jsx(Checkbox2, { label: "Show filters", checked: showFilters, onChange: event => {
-                                    setShowFilters(event.target.checked);
-                                } }), _jsxs(ToggleButtonGroup, { value: columnDisplayMode, exclusive: true, size: "small", onChange: (_, newValue) => {
-                                    if (newValue !== null) {
-                                        setColumnDisplayMode(newValue);
-                                    }
-                                }, children: [_jsx(ToggleButton, { value: "all", children: "All" }), _jsx(ToggleButton, { value: "gtOnly", children: "GT only" }), _jsx(ToggleButton, { value: "genotypeOnly", children: "GT+resolved genotype" })] })] }), showFilters ? (_jsx(SampleFilters, { setFilter: setFilter, columns: columns, filter: filter })) : null, _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { rows: rows, hideFooter: rows.length < 100, columns: columnDisplayMode === 'gtOnly'
-                                ? columns.filter(f => s1.has(f.field))
-                                : columnDisplayMode === 'genotypeOnly'
-                                    ? columns.filter(f => s2.has(f.field))
-                                    : columns, rowHeight: 25, columnHeaderHeight: 35, showToolbar: true }) })] })] }));
+            description: descriptions?.FORMAT?.[field]?.Description,
+            width: measureGridWidth(filteredRows.map(r => r[field])),
+        }));
+    }, [rows, filteredRows, descriptions]);
+    return !rows.length ? null : (_jsxs(BaseCard, { ...props, title: "Samples", children: [error ? _jsx(Typography, { color: "error", children: `${error}` }) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(CascadingMenuButton, { menuItems: [
+                            {
+                                label: 'Show allele counts ("dosage") instead of exact GT',
+                                helpText: 'This converts a genotype like 1/1 into 1:2 which says there were two occurrences of the ALT allele 1 in the genotype',
+                                type: 'checkbox',
+                                checked: useCounts,
+                                onClick: () => {
+                                    setUseCounts(!useCounts);
+                                    setSelectedGenotypes(null);
+                                },
+                            },
+                            {
+                                label: 'Show frequency table',
+                                type: 'checkbox',
+                                checked: showFrequencyTable,
+                                onClick: () => {
+                                    setShowFrequencyTable(!showFrequencyTable);
+                                },
+                            },
+                            {
+                                label: 'Show filters',
+                                type: 'checkbox',
+                                checked: showFilters,
+                                onClick: () => {
+                                    setShowFilters(!showFilters);
+                                },
+                            },
+                            {
+                                label: 'Show toolbar',
+                                type: 'checkbox',
+                                checked: showToolbar,
+                                onClick: () => {
+                                    setShowToolbar(!showToolbar);
+                                },
+                            },
+                        ], children: _jsx(SettingsIcon, {}) }), _jsxs(ToggleButtonGroup, { value: columnDisplayMode, exclusive: true, size: "small", onChange: (_, newValue) => {
+                            if (newValue !== null) {
+                                setColumnDisplayMode(newValue);
+                            }
+                        }, children: [_jsx(ToggleButton, { value: "all", children: "All" }), _jsx(ToggleButton, { value: "gtOnly", children: "GT only" }), _jsx(ToggleButton, { value: "genotypeOnly", children: "GT+resolved genotype" })] })] }), showFilters ? (_jsx(SampleFilters, { setFilter: setFilter, columns: columns, filter: filter })) : null, showFrequencyTable ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "subtitle2", style: { marginTop: 8 }, children: "Genotype frequencies (click to filter)" }), _jsx(ErrorBoundary, { FallbackComponent: ErrorMessage, children: _jsx(VariantGenotypeFrequencyTable, { rows: rows, selectedGenotypes: selectedGenotypes, setSelectedGenotypes: setSelectedGenotypes, showToolbar: showToolbar }) })] })) : null, _jsxs(Typography, { variant: "subtitle2", style: { marginTop: 16 }, children: ["Samples", ' ', selectedGenotypes !== null
+                        ? `(${filteredRows.length} of ${rows.length})`
+                        : `(${rows.length})`] }), _jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { rows: filteredRows, hideFooter: filteredRows.length < 100, columns: columnDisplayMode === 'gtOnly'
+                        ? columns.filter(f => gtOnlyFields.has(f.field))
+                        : columnDisplayMode === 'genotypeOnly'
+                            ? columns.filter(f => genotypeFields.has(f.field))
+                            : columns, rowHeight: 25, columnHeaderHeight: 25, showToolbar: showToolbar }) })] }));
 }

package/esm/VariantFeatureWidget/VariantSampleGrid/getSampleGridRows.d.ts

@@ -1,5 +1,5 @@
-import type { Filters, InfoFields, VariantSampleGridRow } from './types';
-export declare function getSampleGridRows(samples: Record<string, InfoFields>, REF: string, ALT: string[], filter: Filters): {
+import type { Filters, InfoFields, VariantSampleGridRow } from './types.ts';
+export declare function getSampleGridRows(samples: Record<string, InfoFields>, REF: string, ALT: string[], filter: Filters, useCounts?: boolean): {
     rows: VariantSampleGridRow[];
     error: unknown;
 };

package/esm/VariantFeatureWidget/VariantSampleGrid/getSampleGridRows.js

@@ -1,38 +1,61 @@
-import { makeSimpleAltString } from '../../VcfFeature/util';
-export function getSampleGridRows(samples, REF, ALT, filter) {
-    const preFilteredRows = Object.entries(samples).map(([key, val]) => {
-        var _a;
-        const gt = (_a = val.GT) === null || _a === void 0 ? void 0 : _a[0];
-        return [
-            key,
-            {
-                ...val,
-                ...(gt
-                    ? {
-                        GT: `${gt}`,
-                        genotype: makeSimpleAltString(`${gt}`, REF, ALT),
-                    }
-                    : {}),
-            },
-        ];
-    });
+import { getBpDisplayStr } from '@jbrowse/core/util';
+import { getMinimalDesc, makeSimpleAltString } from "../../VcfFeature/util.js";
+function gtToAlleleCounts(gt) {
+    const alleleCounts = {};
+    const alleles = gt.split(/[/|]/);
+    for (const allele of alleles) {
+        alleleCounts[allele] = (alleleCounts[allele] || 0) + 1;
+    }
+    return Object.entries(alleleCounts)
+        .map(([key, val]) => `${key}:${val}`)
+        .join(';');
+}
+function genotypeToAlleleCounts(gt, ref, alt) {
+    const alleleCounts = {};
+    const alleles = gt.split(/[/|]/);
+    for (const allele of alleles) {
+        if (allele === '.') {
+            alleleCounts['.'] = (alleleCounts['.'] || 0) + 1;
+        }
+        else {
+            const resolved = +allele === 0
+                ? `ref(${ref.length < 10 ? ref : getBpDisplayStr(ref.length)})`
+                : getMinimalDesc(ref, alt[+allele - 1] || '');
+            alleleCounts[resolved] = (alleleCounts[resolved] || 0) + 1;
+        }
+    }
+    return Object.entries(alleleCounts)
+        .map(([key, val]) => `${key}:${val}`)
+        .join(';');
+}
+export function getSampleGridRows(samples, REF, ALT, filter, useCounts) {
     let error;
     let rows = [];
-    const filters = Object.keys(filter);
+    const filterKeys = Object.keys(filter);
     try {
-        rows = preFilteredRows
+        rows = Object.entries(samples)
             .map(([key, val]) => {
+            const gt = val.GT?.[0];
+            const gtStr = gt ? `${gt}` : undefined;
+            const displayGT = gtStr
+                ? useCounts
+                    ? gtToAlleleCounts(gtStr)
+                    : gtStr
+                : undefined;
+            const displayGenotype = gtStr
+                ? useCounts
+                    ? genotypeToAlleleCounts(gtStr, REF, ALT)
+                    : makeSimpleAltString(gtStr, REF, ALT)
+                : undefined;
             return {
-                ...Object.fromEntries(Object.entries(val).map(([formatField, formatValue]) => [
-                    formatField,
-                    formatValue,
-                ])),
+                ...val,
+                ...(gtStr ? { GT: displayGT, genotype: displayGenotype } : {}),
                 sample: key,
                 id: key,
             };
         })
-            .filter(row => filters.length
-            ? filters.every(key => {
+            .filter(row => filterKeys.length
+            ? filterKeys.every(key => {
                 const currFilter = filter[key];
                 return currFilter
                     ? new RegExp(currFilter, 'i').exec(row[key])

package/esm/VariantFeatureWidget/VariantSampleGrid/types.d.ts

@@ -12,10 +12,8 @@ export interface VariantSampleGridRow {
 }
 export type InfoFields = Record<string, unknown[]>;
 export type Filters = Record<string, string>;
-interface FormatRecord {
-    Description?: string;
-}
 export interface VariantFieldDescriptions {
-    FORMAT?: Record<string, FormatRecord>;
+    FORMAT?: Record<string, {
+        Description?: string;
+    }>;
 }
-export {};

package/esm/VariantFeatureWidget/configSchema.d.ts

@@ -1 +1 @@
-export declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+export declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;

package/esm/VariantFeatureWidget/index.js

@@ -1,13 +1,13 @@
 import { lazy } from 'react';
 import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
-import { configSchema } from './configSchema';
-import { stateModelFactory } from './stateModelFactory';
+import { configSchema } from "./configSchema.js";
+import { stateModelFactory } from "./stateModelFactory.js";
 export default function VariantFeatureWidgetF(pluginManager) {
     pluginManager.addWidgetType(() => new WidgetType({
         name: 'VariantFeatureWidget',
         heading: 'Feature details',
         configSchema: configSchema,
         stateModel: stateModelFactory(pluginManager),
-        ReactComponent: lazy(() => import('./VariantFeatureWidget')),
+        ReactComponent: lazy(() => import("./VariantFeatureWidget.js")),
     }));
 }