@jbrowse/plugin-variants 3.2.0 → 3.3.0

package/dist/MultiLinearVariantRenderer/{MultiVariantRendering.js → components/MultiLinearVariantRendering.js}

@@ -6,29 +6,47 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 mobx_react_1 = require("mobx-react");
 const rbush_1 = __importDefault(require("rbush"));
+const util_2 = require("./util");
+const util_3 = require("../../VcfFeature/util");
 const MultiVariantRendering = (0, mobx_react_1.observer)(function (props) {
-    const { totalHeight, scrollTop } = props;
+    const { featureGenotypeMap, totalHeight, scrollTop } = props;
     const { rbush, displayModel } = props;
     const ref = (0, react_1.useRef)(null);
     const rbush2 = (0, react_1.useMemo)(() => new rbush_1.default().fromJSON(rbush), [rbush]);
     function getFeatureUnderMouse(eventClientX, eventClientY) {
-        var _a;
         let offsetX = 0;
         let offsetY = 0;
         if (ref.current) {
             const r = ref.current.getBoundingClientRect();
             offsetX = eventClientX - r.left;
-            offsetY = eventClientY - r.top;
+            offsetY = eventClientY - r.top - ((displayModel === null || displayModel === void 0 ? void 0 : displayModel.scrollTop) || 0);
         }
-        const ret = rbush2.search({
+        const x = rbush2.search({
             minX: offsetX,
-            maxX: offsetX + 3,
+            maxX: offsetX + 1,
             minY: offsetY,
-            maxY: offsetY + 3,
+            maxY: offsetY + 1,
         });
-        return (_a = ret[0]) === null || _a === void 0 ? void 0 : _a.genotype;
+        if (x.length) {
+            const { minX, minY, maxX, maxY, genotype, featureId, ...rest } = (0, util_2.minElt)(x, elt => elt.maxX - elt.minX);
+            const ret = featureGenotypeMap[featureId];
+            if (ret) {
+                const { ref, alt, name, description, length } = ret;
+                const alleles = (0, util_3.makeSimpleAltString)(genotype, ref, alt);
+                return {
+                    ...rest,
+                    genotype,
+                    alleles,
+                    featureName: name,
+                    description: alt.length >= 3 ? 'multiple ALT alleles' : description,
+                    length: (0, util_1.getBpDisplayStr)(length),
+                };
+            }
+        }
+        return undefined;
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onMouseMove: e => {
             var _a;

package/dist/MultiLinearVariantRenderer/components/util.d.ts

@@ -0,0 +1 @@
+export declare function minElt<T>(arr: Iterable<T>, cb: (arg: T) => number): T | undefined;

package/dist/MultiLinearVariantRenderer/components/util.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.minElt = minElt;
+function minElt(arr, cb) {
+    let min = Infinity;
+    let minElement;
+    for (const entry of arr) {
+        const val = cb(entry);
+        if (val < min) {
+            min = val;
+            minElement = entry;
+        }
+    }
+    return minElement;
+}

package/dist/MultiLinearVariantRenderer/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MultiVariantRendererF;
 const MultiVariantRenderer_1 = __importDefault(require("./MultiVariantRenderer"));
-const MultiVariantRendering_1 = __importDefault(require("./components/MultiVariantRendering"));
+const MultiLinearVariantRendering_1 = __importDefault(require("./components/MultiLinearVariantRendering"));
 const configSchema_1 = __importDefault(require("./configSchema"));
 function MultiVariantRendererF(pluginManager) {
     pluginManager.addRendererType(() => {
         return new MultiVariantRenderer_1.default({
             name: 'MultiVariantRenderer',
-            ReactComponent: MultiVariantRendering_1.default,
+            ReactComponent: MultiLinearVariantRendering_1.default,
             configSchema: configSchema_1.default,
             pluginManager,
         });

package/dist/MultiLinearVariantRenderer/makeImageData.d.ts

@@ -1,4 +1,13 @@
 import type { MultiRenderArgsDeserialized } from './types';
 export declare function makeImageData(ctx: CanvasRenderingContext2D, props: MultiRenderArgsDeserialized): Promise<{
     rbush: any;
+    featureGenotypeMap: {
+        [k: string]: {
+            alt: any;
+            ref: any;
+            name: any;
+            description: any;
+            length: number;
+        };
+    };
 }>;

package/dist/MultiLinearVariantRenderer/makeImageData.js

@@ -12,56 +12,88 @@ const drawAlleleCount_1 = require("../shared/drawAlleleCount");
 const drawPhased_1 = require("../shared/drawPhased");
 const minorAlleleFrequencyUtils_1 = require("../shared/minorAlleleFrequencyUtils");
 async function makeImageData(ctx, props) {
-    const { scrollTop, minorAlleleFrequencyFilter, sources, rowHeight, features, regions, bpPerPx, renderingMode, stopToken, } = props;
+    const { scrollTop, minorAlleleFrequencyFilter, sources, rowHeight, features, regions, bpPerPx, renderingMode, stopToken, lengthCutoffFilter, referenceDrawingMode, } = props;
     const region = regions[0];
     (0, stopToken_1.checkStopToken)(stopToken);
-    const mafs = (0, minorAlleleFrequencyUtils_1.getFeaturesThatPassMinorAlleleFrequencyFilter)(features.values(), minorAlleleFrequencyFilter);
+    const mafs = (0, minorAlleleFrequencyUtils_1.getFeaturesThatPassMinorAlleleFrequencyFilter)({
+        stopToken,
+        features: features.values(),
+        minorAlleleFrequencyFilter,
+        lengthCutoffFilter,
+    });
     (0, stopToken_1.checkStopToken)(stopToken);
     const rbush = new rbush_1.default();
-    let start = performance.now();
-    for (const { mostFrequentAlt, feature } of mafs) {
-        if (performance.now() - start > 400) {
-            (0, stopToken_1.checkStopToken)(stopToken);
-            start = performance.now();
-        }
+    (0, util_1.forEachWithStopTokenCheck)(mafs, stopToken, ({ mostFrequentAlt, feature }) => {
         const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
         const w = Math.max(Math.round(rightPx - leftPx), 2);
         const samp = feature.get('genotypes');
         let y = -scrollTop;
         const s = sources.length;
-        for (let j = 0; j < s; j++) {
-            const { name, HP } = sources[j];
-            const genotype = samp[name];
-            const x = Math.floor(leftPx);
-            const h = Math.max(rowHeight, 1);
-            if (genotype) {
-                rbush.insert({
-                    minX: x - constants_1.f2,
-                    maxX: x + w + constants_1.f2,
-                    minY: y - constants_1.f2,
-                    maxY: y + h + constants_1.f2,
-                    genotype,
-                });
-                const isPhased = genotype.includes('|');
-                if (renderingMode === 'phased') {
+        if (renderingMode === 'phased') {
+            for (let j = 0; j < s; j++) {
+                const { name, HP } = sources[j];
+                const genotype = samp[name];
+                const x = Math.floor(leftPx);
+                const h = Math.max(rowHeight, 1);
+                if (genotype) {
+                    const isPhased = genotype.includes('|');
                     if (isPhased) {
                         const alleles = genotype.split('|');
-                        (0, drawPhased_1.drawPhased)(alleles, ctx, x, y, w, h, HP);
+                        if ((0, drawPhased_1.drawPhased)(alleles, ctx, x, y, w, h, HP, undefined, referenceDrawingMode === 'draw')) {
+                            rbush.insert({
+                                minX: x,
+                                maxX: x + w,
+                                minY: y,
+                                maxY: y + h,
+                                genotype,
+                                name,
+                                featureId: feature.id(),
+                            });
+                        }
                     }
                     else {
                         ctx.fillStyle = 'black';
                         ctx.fillRect(x - constants_1.f2, y - constants_1.f2, w + constants_1.f2, h + constants_1.f2);
                     }
                 }
-                else {
+                y += rowHeight;
+            }
+        }
+        else {
+            for (let j = 0; j < s; j++) {
+                const { name } = sources[j];
+                const genotype = samp[name];
+                const x = Math.floor(leftPx);
+                const h = Math.max(rowHeight, 1);
+                if (genotype) {
                     const alleles = genotype.split(/[/|]/);
-                    (0, drawAlleleCount_1.drawColorAlleleCount)(alleles, ctx, x, y, w, h, mostFrequentAlt);
+                    if ((0, drawAlleleCount_1.drawColorAlleleCount)(alleles, ctx, x, y, w, h, mostFrequentAlt, referenceDrawingMode === 'draw', feature.get('type'), feature.get('strand'), 0.75)) {
+                        rbush.insert({
+                            minX: x,
+                            maxX: x + w,
+                            minY: y,
+                            maxY: y + h,
+                            genotype,
+                            name,
+                            featureId: feature.id(),
+                        });
+                    }
                 }
+                y += rowHeight;
             }
-            y += rowHeight;
         }
-    }
+    });
     return {
         rbush: rbush.toJSON(),
+        featureGenotypeMap: Object.fromEntries(mafs.map(({ feature }) => [
+            feature.id(),
+            {
+                alt: feature.get('ALT'),
+                ref: feature.get('REF'),
+                name: feature.get('name'),
+                description: feature.get('description'),
+                length: feature.get('end') - feature.get('start'),
+            },
+        ])),
     };
 }

package/dist/MultiLinearVariantRenderer/types.d.ts

@@ -16,4 +16,5 @@ export interface MultiRenderArgsDeserialized extends RenderArgsDeserializedWithF
     rowHeight: number;
     scrollTop: number;
     minorAlleleFrequencyFilter: number;
+    lengthCutoffFilter: number;
 }

package/dist/SplitVcfTabixAdapter/configSchema.js

@@ -19,9 +19,11 @@ const SplitVcfTabixAdapter = (0, configuration_1.ConfigurationSchema)('SplitVcfT
         type: 'fileLocation',
         defaultValue: {
             uri: '/path/to/samples.tsv',
-            description: 'tsv with header like name\tpopulation\tetc. where the first column is required, and is the sample names',
+            description: 'tsv with header like "name\tpopulation\tetc" where the first column is required, and corresponds to the sample names in the VCF files',
             locationType: 'UriLocation',
         },
     },
-}, { explicitlyTyped: true });
+}, {
+    explicitlyTyped: true,
+});
 exports.default = SplitVcfTabixAdapter;

package/dist/VariantFeatureWidget/AltFormatter.d.ts

@@ -0,0 +1,4 @@
+export default function AltFormatter({ value, ref, }: {
+    value: string;
+    ref: string;
+}): string | import("react/jsx-runtime").JSX.Element;

package/dist/VariantFeatureWidget/AltFormatter.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AltFormatter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const util_1 = require("../VcfFeature/util");
+function AltFormatter({ value, ref, }) {
+    const [show, setShow] = (0, react_1.useState)(false);
+    const alt = (0, util_1.getMinimalDesc)(ref, value);
+    return alt !== value ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    setShow(!show);
+                }, children: show ? 'Show simplified ALT' : 'Show raw ALT' }), ' ', show ? value : (0, util_1.getMinimalDesc)(ref, value)] })) : (value);
+}

package/dist/VariantFeatureWidget/Checkbox2.js

@@ -3,13 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Checkbox2;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    block: {
-        display: 'block',
-    },
-});
 function Checkbox2({ checked, disabled, label, onChange, }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: disabled, className: classes.block, control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: onChange }), label: label }));
+    return ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: disabled, control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: onChange }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: label }) }));
 }

package/dist/VariantFeatureWidget/Formatter.d.ts

@@ -0,0 +1,3 @@
+export default function Formatter({ value }: {
+    value: unknown;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/VariantFeatureWidget/Formatter.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Formatter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+function Formatter({ value }) {
+    const [show, setShow] = (0, react_1.useState)(false);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const display = String(value);
+    return display.length > 100 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                    (0, copy_to_clipboard_1.default)(display);
+                    setCopied(true);
+                    setTimeout(() => {
+                        setCopied(false);
+                    }, 700);
+                }, children: copied ? 'Copied to clipboard' : 'Copy' }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                    setShow(val => !val);
+                }, children: show ? 'Show less' : 'Show more' }), (0, jsx_runtime_1.jsx)("div", { children: show ? display : `${display.slice(0, 100)}...` })] })) : ((0, jsx_runtime_1.jsx)("div", { children: display }));
+}

package/dist/VariantFeatureWidget/{VariantConsequenceDataGridWrapper.js → VariantConsequence/VariantConsequenceDataGridWrapper.js}

@@ -9,12 +9,10 @@ const x_data_grid_1 = require("@mui/x-data-grid");
 function VariantConsequenceDataGridWrapper({ rows, columns, }) {
     const [checked, setChecked] = (0, react_1.useState)(false);
     const widths = columns.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e.field])));
-    return rows.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: event => {
+    return rows.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Show options" }), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: event => {
                         setChecked(event.target.checked);
-                    } }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Show options" }) }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rowHeight: 25, rows: rows, columns: columns.map((c, i) => ({
+                    } }) }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rowHeight: 25, hideFooter: rows.length < 100, rows: rows, showToolbar: checked, columns: columns.map((c, i) => ({
                     ...c,
                     width: widths[i],
-                })), slots: {
-                    toolbar: checked ? x_data_grid_1.GridToolbar : null,
-                } })] })) : null;
+                })) })] })) : null;
 }

package/dist/VariantFeatureWidget/VariantFeatureWidget.js

@@ -42,10 +42,12 @@ const vcf_1 = require("@gmod/vcf");
 const FeatureDetails_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
+const AltFormatter_1 = __importDefault(require("./AltFormatter"));
+const Formatter_1 = __importDefault(require("./Formatter"));
 const VariantSampleGrid_1 = __importDefault(require("./VariantSampleGrid/VariantSampleGrid"));
 const variantFieldDescriptions_1 = require("./variantFieldDescriptions");
 const LaunchBreakendPanel = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./LaunchBreakendPanel/LaunchBreakendPanel'))));
-const VariantConsequenceDataGrid = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./VariantConsequenceDataGrid'))));
+const VariantConsequenceDataGrid = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./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;
@@ -84,10 +86,13 @@ const VariantFeatureWidget = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
     const { featureData, descriptions } = model;
     const feat = JSON.parse(JSON.stringify(featureData));
-    const { samples, ALT, ...rest } = feat;
+    const { samples, ...rest } = feat;
+    const { REF } = rest;
     return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { "data-testid": "variant-side-drawer", children: [(0, jsx_runtime_1.jsx)(FeatureDetails_1.default, { feature: rest, descriptions: {
                     ...variantFieldDescriptions_1.variantFieldDescriptions,
                     ...descriptions,
+                }, formatter: (value, key) => {
+                    return key === 'ALT' ? ((0, jsx_runtime_1.jsx)(AltFormatter_1.default, { value: `${value}`, ref: REF })) : ((0, jsx_runtime_1.jsx)(Formatter_1.default, { value: value }));
                 }, ...props }), (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: null, children: [(0, jsx_runtime_1.jsx)(CsqPanel, { feature: rest, descriptions: descriptions }), (0, jsx_runtime_1.jsx)(AnnPanel, { feature: rest, descriptions: descriptions }), (0, jsx_runtime_1.jsx)(LaunchBreakendWidgetArea, { model: model })] }), (0, jsx_runtime_1.jsx)(VariantSampleGrid_1.default, { feature: feat, ...props, descriptions: descriptions })] }));
 });
 exports.default = VariantFeatureWidget;

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

@@ -0,0 +1,4 @@
+import type { VariantSampleGridRow } from './types';
+export default function VariantGenotypeFrequencyTable({ rows, }: {
+    rows: VariantSampleGridRow[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/VariantFeatureWidget/VariantSampleGrid/VariantGenotypeFrequencyTable.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VariantGenotypeFrequencyTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DataGridFlexContainer_1 = __importDefault(require("@jbrowse/core/ui/DataGridFlexContainer"));
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const x_data_grid_1 = require("@mui/x-data-grid");
+function toP(n) {
+    return n.toPrecision(3);
+}
+function VariantGenotypeFrequencyTable({ rows, }) {
+    const [useCounts, setUseCounts] = (0, react_1.useState)(false);
+    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++;
+        }
+    }
+    const gridRows = Object.entries(summary).map(([key, val]) => ({
+        id: key,
+        ...val,
+        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 => (0, util_1.measureGridWidth)(gridRows.map(r => `${r[e]}`)));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: useCounts }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Use allele counts instead of exact GT" }), onChange: (_, checked) => {
+                    setUseCounts(checked);
+                } }), (0, jsx_runtime_1.jsx)(DataGridFlexContainer_1.default, { children: (0, jsx_runtime_1.jsx)(x_data_grid_1.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],
+                        },
+                    ] }) })] }));
+}

package/dist/VariantFeatureWidget/VariantSampleGrid/VariantSampleGrid.d.ts

@@ -1,12 +1,6 @@
+import type { VariantFieldDescriptions } from './types';
 import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
-interface FormatRecord {
-    Description?: string;
-}
-interface Descriptions {
-    FORMAT?: Record<string, FormatRecord>;
-}
-export default function VariantSamples(props: {
+export default function VariantSampleGrid(props: {
     feature: SimpleFeatureSerialized;
-    descriptions?: Descriptions | null;
+    descriptions?: VariantFieldDescriptions | null;
 }): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/VariantFeatureWidget/VariantSampleGrid/VariantSampleGrid.js

@@ -3,30 +3,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = VariantSamples;
+exports.default = VariantSampleGrid;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const BaseCard_1 = __importDefault(require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard"));
+const ui_1 = require("@jbrowse/core/ui");
+const DataGridFlexContainer_1 = __importDefault(require("@jbrowse/core/ui/DataGridFlexContainer"));
+const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const x_data_grid_1 = require("@mui/x-data-grid");
+const Checkbox2_1 = __importDefault(require("../Checkbox2"));
+const VariantGenotypeFrequencyTable_1 = __importDefault(require("./VariantGenotypeFrequencyTable"));
 const VariantSampleFilters_1 = __importDefault(require("./VariantSampleFilters"));
-function VariantSamples(props) {
+const util_2 = require("./util");
+const util_3 = require("../../VcfFeature/util");
+function VariantSampleGrid(props) {
     var _a;
     const { feature, descriptions = {} } = props;
     const [filter, setFilter] = (0, react_1.useState)({});
+    const [showOnlyGenotypeColumns, setShowOnlyGenotypeColumns] = (0, react_1.useState)(true);
+    const [showFilters, setShowFilters] = (0, react_1.useState)(false);
     const samples = (feature.samples || {});
-    const preFilteredRows = Object.entries(samples);
+    const ALT = feature.ALT;
+    const REF = feature.REF;
+    const preFilteredRows = Object.entries(samples).map(([key, val]) => {
+        var _a, _b;
+        return [
+            key,
+            {
+                ...val,
+                GT: `${(_a = val.GT) === null || _a === void 0 ? void 0 : _a[0]}`,
+                genotype: (0, util_3.makeSimpleAltString)(`${(_b = val.GT) === null || _b === void 0 ? void 0 : _b[0]}`, REF, ALT),
+            },
+        ];
+    });
     let error;
     let rows = [];
     const filters = Object.keys(filter);
     try {
         rows = preFilteredRows
-            .map(row => {
+            .map(([key, val]) => {
             return {
-                ...Object.fromEntries(Object.entries(row[1]).map(e => [e[0], `${e[1]}`])),
-                sample: row[0],
-                id: row[0],
+                ...Object.fromEntries(Object.entries(val).map(([formatField, formatValue]) => [
+                    formatField,
+                    formatValue,
+                ])),
+                sample: key,
+                id: key,
             };
         })
             .filter(row => filters.length
@@ -39,9 +63,9 @@ function VariantSamples(props) {
             : true);
     }
     catch (e) {
+        console.error(e);
         error = e;
     }
-    const [checked, setChecked] = (0, react_1.useState)(false);
     const keys = ['sample', ...Object.keys(((_a = preFilteredRows[0]) === null || _a === void 0 ? void 0 : _a[1]) || {})];
     const widths = keys.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e])));
     const columns = keys.map((field, index) => {
@@ -52,16 +76,13 @@ function VariantSamples(props) {
             width: widths[index],
         });
     });
-    return !preFilteredRows.length ? null : ((0, jsx_runtime_1.jsxs)(BaseCard_1.default, { ...props, title: "Samples", children: [error ? (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: checked, onChange: event => {
-                        setChecked(event.target.checked);
-                    } }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Show options" }) }), checked ? ((0, jsx_runtime_1.jsx)(VariantSampleFilters_1.default, { setFilter: setFilter, columns: columns, filter: filter })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: rows, hideFooter: rows.length < 100, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, columnHeaderHeight: 35, disableColumnMenu: true, slots: { toolbar: checked ? x_data_grid_1.GridToolbar : null }, slotProps: {
-                        toolbar: {
-                            printOptions: {
-                                disableToolbarButton: true,
-                            },
-                        },
-                    } }) })] }));
+    const s1 = new Set(['sample', 'GT', 'genotype']);
+    const s2 = new Set(keys);
+    return !preFilteredRows.length ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BaseCard_1.default, { ...props, title: "Genotype frequencies", children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: ui_1.ErrorMessage, children: (0, jsx_runtime_1.jsx)(VariantGenotypeFrequencyTable_1.default, { rows: rows }) }) }), (0, jsx_runtime_1.jsxs)(BaseCard_1.default, { ...props, title: "Samples", children: [error ? (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(Checkbox2_1.default, { label: "Show filters", checked: showFilters, onChange: event => {
+                            setShowFilters(event.target.checked);
+                        } }), (0, util_2.areSetsEqual)(s1, s2) ? null : ((0, jsx_runtime_1.jsx)(Checkbox2_1.default, { label: "Show only genotype columns", checked: showOnlyGenotypeColumns, onChange: event => {
+                            setShowOnlyGenotypeColumns(event.target.checked);
+                        } })), showFilters ? ((0, jsx_runtime_1.jsx)(VariantSampleFilters_1.default, { setFilter: setFilter, columns: columns, filter: filter })) : null, (0, jsx_runtime_1.jsx)(DataGridFlexContainer_1.default, { children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { rows: rows, hideFooter: rows.length < 100, columns: showOnlyGenotypeColumns
+                                ? columns.filter(f => s1.has(f.field))
+                                : columns, rowHeight: 25, columnHeaderHeight: 35, showToolbar: true }) })] })] }));
 }

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

@@ -0,0 +1,21 @@
+export interface FrequencyTableEntry {
+    count: number;
+    GT: string;
+    genotype: string | undefined;
+}
+export type FrequencyTable = Record<string, FrequencyTableEntry>;
+export interface VariantSampleGridRow {
+    sample: string;
+    id: string;
+    GT: string;
+    [key: string]: string;
+}
+export type InfoFields = Record<string, unknown[]>;
+export type Filters = Record<string, string>;
+interface FormatRecord {
+    Description?: string;
+}
+export interface VariantFieldDescriptions {
+    FORMAT?: Record<string, FormatRecord>;
+}
+export {};

package/dist/VariantFeatureWidget/VariantSampleGrid/util.d.ts

@@ -0,0 +1 @@
+export declare function areSetsEqual<T>(set1: Set<T>, set2: Set<T>): boolean;

package/dist/VariantFeatureWidget/VariantSampleGrid/util.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areSetsEqual = areSetsEqual;
+function areSetsEqual(set1, set2) {
+    if (set1.size !== set2.size) {
+        return false;
+    }
+    for (const item of set1) {
+        if (!set2.has(item)) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/VariantRPC/MultiVariantClusterGenotypeMatrix.d.ts

@@ -1,21 +1,8 @@
 import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
-import type { Source } from '../shared/types';
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { Region } from '@jbrowse/core/util';
-interface Args {
-    adapterConfig: AnyConfigurationModel;
-    stopToken?: string;
-    statusCallback: (arg: string) => void;
-    sessionId: string;
-    headers?: Record<string, string>;
-    regions: Region[];
-    bpPerPx: number;
-    sources: Source[];
-    minorAlleleFrequencyFilter: number;
-}
+import type { ClusterGenotypeMatrixArgs } from './types';
 export declare class MultiVariantClusterGenotypeMatrix extends RpcMethodTypeWithFiltersAndRenameRegions {
     name: string;
-    execute(args: Args, rpcDriverClassName: string): Promise<{
+    execute(args: ClusterGenotypeMatrixArgs, rpcDriverClassName: string): Promise<{
         clusters: {
             height: number;
             indexes: number[];
@@ -25,4 +12,3 @@ export declare class MultiVariantClusterGenotypeMatrix extends RpcMethodTypeWith
         clustersGivenK: number[][][];
     }>;
 }
-export {};