@jbrowse/plugin-variants 2.18.0 → 3.0.1

package/esm/VariantFeatureWidget/LaunchBreakendPanel.js

@@ -1,4 +1,5 @@
-import React, { lazy } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
 import { SimpleFeature, getEnv, getSession } from '@jbrowse/core/util';
 import { Link, Typography } from '@mui/material';
@@ -6,70 +7,58 @@ const BreakendMultiLevelOptionDialog = lazy(() => import('./BreakendMultiLevelOp
 const BreakendSingleLevelOptionDialog = lazy(() => import('./BreakendSingleLevelOptionDialog'));
 function LocStringList({ locStrings, model, }) {
     const session = getSession(model);
-    return (React.createElement("div", null,
-        React.createElement(Typography, null, "Navigate to breakend endpoint in linear view:"),
-        React.createElement("ul", null, locStrings.map((locString, index) => (React.createElement("li", { key: `${locString}-${index}` },
-            locString,
-            ' ',
-            React.createElement(Link, { href: "#", onClick: event => {
-                    var _a;
-                    event.preventDefault();
-                    const { view } = model;
-                    try {
-                        if (view) {
-                            (_a = view.navToLocString) === null || _a === void 0 ? void 0 : _a.call(view, locString);
-                        }
-                        else {
-                            throw new Error('No view associated with this feature detail panel anymore');
-                        }
-                    }
-                    catch (e) {
-                        console.error(e);
-                        session.notify(`${e}`);
-                    }
-                } }, "(LGV)")))))));
+    return (_jsxs("div", { children: [_jsx(Typography, { children: "Navigate to breakend endpoint in linear view:" }), _jsx("ul", { children: locStrings.map((locString, index) => (_jsxs("li", { children: [locString, ' ', _jsx(Link, { href: "#", onClick: event => {
+                                var _a;
+                                event.preventDefault();
+                                const { view } = model;
+                                try {
+                                    if (view) {
+                                        (_a = view.navToLocString) === null || _a === void 0 ? void 0 : _a.call(view, locString);
+                                    }
+                                    else {
+                                        throw new Error('No view associated with this feature detail panel anymore');
+                                    }
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    session.notify(`${e}`);
+                                }
+                            }, children: "(LGV)" })] }, `${locString}-${index}`))) })] }));
 }
 function LaunchBreakpointSplitViewPanel({ locStrings, model, feature, }) {
     var _a, _b;
     const session = getSession(model);
     const simpleFeature = new SimpleFeature(feature);
     const assemblyName = (_b = (_a = model.view) === null || _a === void 0 ? void 0 : _a.displayedRegions[0]) === null || _b === void 0 ? void 0 : _b.assemblyName;
-    return (React.createElement("div", null,
-        React.createElement(Typography, null, "Launch split view"),
-        React.createElement("ul", null, locStrings.map(locString => (React.createElement("li", { key: JSON.stringify(locString) },
-            `${feature.refName}:${feature.start} // ${locString}`,
-            ' ',
-            React.createElement(Link, { href: "#", onClick: event => {
-                    event.preventDefault();
-                    session.queueDialog(handleClose => [
-                        BreakendMultiLevelOptionDialog,
-                        {
-                            handleClose,
-                            session,
-                            feature: simpleFeature,
-                            stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_multilevel`,
-                            view: model.view,
-                            assemblyName,
-                        },
-                    ]);
-                } }, "(top/bottom)"),
-            ' ',
-            React.createElement(Link, { href: "#", onClick: event => {
-                    event.preventDefault();
-                    session.queueDialog(handleClose => [
-                        BreakendSingleLevelOptionDialog,
-                        {
-                            handleClose,
-                            session,
-                            feature: simpleFeature,
-                            stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_singlelevel`,
-                            view: model.view,
-                            assemblyName,
-                        },
-                    ]);
-                } }, "(single row)")))))));
+    return (_jsxs("div", { children: [_jsx(Typography, { children: "Launch split view" }), _jsx("ul", { children: locStrings.map(locString => (_jsxs("li", { children: [`${feature.refName}:${feature.start} // ${locString}`, ' ', _jsx(Link, { href: "#", onClick: event => {
+                                event.preventDefault();
+                                session.queueDialog(handleClose => [
+                                    BreakendMultiLevelOptionDialog,
+                                    {
+                                        handleClose,
+                                        session,
+                                        feature: simpleFeature,
+                                        stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_multilevel`,
+                                        view: model.view,
+                                        assemblyName,
+                                    },
+                                ]);
+                            }, children: "(top/bottom)" }), ' ', _jsx(Link, { href: "#", onClick: event => {
+                                event.preventDefault();
+                                session.queueDialog(handleClose => [
+                                    BreakendSingleLevelOptionDialog,
+                                    {
+                                        handleClose,
+                                        session,
+                                        feature: simpleFeature,
+                                        stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_singlelevel`,
+                                        view: model.view,
+                                        assemblyName,
+                                    },
+                                ]);
+                            }, children: "(single row)" })] }, JSON.stringify(locString)))) })] }));
 }
-export default function BreakendPanel(props) {
+export default function LaunchBreakendPanel(props) {
     const { model, locStrings, feature } = props;
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
@@ -79,7 +68,5 @@ export default function BreakendPanel(props) {
     }
     catch (e) {
     }
-    return (React.createElement(BaseCard, { ...props, title: "Breakends" },
-        React.createElement(LocStringList, { model: model, locStrings: locStrings }),
-        hasBreakpointSplitView ? (React.createElement(LaunchBreakpointSplitViewPanel, { model: model, locStrings: locStrings, feature: feature })) : null));
+    return (_jsxs(BaseCard, { ...props, title: "Breakends", children: [_jsx(LocStringList, { model: model, locStrings: locStrings }), hasBreakpointSplitView ? (_jsx(LaunchBreakpointSplitViewPanel, { model: model, locStrings: locStrings, feature: feature })) : null] }));
 }

package/esm/VariantFeatureWidget/LaunchBreakendWidgetArea.d.ts

@@ -0,0 +1,4 @@
+import type { VariantFeatureWidgetModel } from './stateModelFactory';
+export default function LaunchBreakendWidgetArea({ model, }: {
+    model: VariantFeatureWidgetModel;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/LaunchBreakendWidgetArea.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { parseBreakend } from '@gmod/vcf';
+const LaunchBreakendPanel = lazy(() => import('./LaunchBreakendPanel'));
+export default function LaunchBreakendWidgetArea({ model, }) {
+    const { featureData } = model;
+    const feat = JSON.parse(JSON.stringify(featureData));
+    const { type = '' } = feat;
+    return (_jsx(Suspense, { fallback: null, children: 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: {
+                uniqueId: 'random',
+                refName: feat.refName,
+                start: feat.start,
+                end: feat.start + 1,
+                mate: {
+                    refName: feat.refName,
+                    start: feat.end,
+                    end: feat.end + 1,
+                },
+            }, model: model, locStrings: [`${feat.refName}:${feat.end}`] })) : null }));
+}

package/esm/VariantFeatureWidget/VariantConsequenceDataGrid.d.ts

@@ -0,0 +1,5 @@
+export default function VariantConsequenceDataGrid({ data, fields, title, }: {
+    data: string[];
+    fields: string[];
+    title: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/esm/VariantFeatureWidget/VariantConsequenceDataGrid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import VariantConsequenceDataGridWrapper from './VariantConsequenceDataGridWrapper';
+export default function VariantConsequenceDataGrid({ data, fields, title, }) {
+    return data.length ? (_jsx(BaseCard, { title: title, children: _jsx(VariantConsequenceDataGridWrapper, { rows: data.map((elt, id) => ({
+                id,
+                ...Object.fromEntries(elt.split('|').map((e, i) => [fields[i], e])),
+            })), columns: fields.map(c => ({ field: c })) }) })) : null;
+}

package/esm/VariantFeatureWidget/VariantConsequenceDataGridWrapper.d.ts

@@ -0,0 +1,5 @@
+import type { GridColDef, GridValidRowModel } from '@mui/x-data-grid';
+export default function VariantConsequenceDataGridWrapper({ rows, columns, }: {
+    rows: GridValidRowModel[];
+    columns: GridColDef[];
+}): import("react/jsx-runtime").JSX.Element | null;

package/esm/VariantFeatureWidget/VariantConsequenceDataGridWrapper.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { measureGridWidth } from '@jbrowse/core/util';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+export default function VariantConsequenceDataGridWrapper({ rows, columns, }) {
+    const [checked, setChecked] = useState(false);
+    const widths = columns.map(e => measureGridWidth(rows.map(r => r[e.field])));
+    return rows.length ? (_jsxs("div", { children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: checked, onChange: event => {
+                        setChecked(event.target.checked);
+                    } }), label: _jsx(Typography, { variant: "body2", children: "Show options" }) }), _jsx(DataGrid, { rowHeight: 25, rows: rows, columns: columns.map((c, i) => ({
+                    ...c,
+                    width: widths[i],
+                })), slots: {
+                    toolbar: checked ? GridToolbar : null,
+                } })] })) : null;
+}

package/esm/VariantFeatureWidget/VariantConsequencePanel.d.ts

@@ -0,0 +1,5 @@
+export default function VariantConsequencePanel({ data, fields, title, }: {
+    data: string[];
+    fields: string[];
+    title: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/esm/VariantFeatureWidget/VariantConsequencePanel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import VariantConsequenceDataGridWrapper from './VariantConsequenceDataGridWrapper';
+export default function VariantConsequencePanel({ data, fields, title, }) {
+    return data.length ? (_jsx(BaseCard, { title: title, children: _jsx(VariantConsequenceDataGridWrapper, { rows: data.map((elt, id) => ({
+                id,
+                ...Object.fromEntries(elt.split('|').map((e, i) => [fields[i], e])),
+            })), columns: fields.map(c => ({ field: c })) }) })) : null;
+}

package/esm/VariantFeatureWidget/VariantFeatureWidget.d.ts

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

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -1,54 +1,55 @@
-import React, { Suspense, lazy } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
 import { parseBreakend } from '@gmod/vcf';
 import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import VariantAnnotationTable from './VariantAnnotationTable';
 import VariantSampleGrid from './VariantSampleGrid';
 import { variantFieldDescriptions } from './variantFieldDescriptions';
 const LaunchBreakendPanel = lazy(() => import('./LaunchBreakendPanel'));
+const VariantConsequenceDataGrid = lazy(() => import('./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 (React.createElement(VariantAnnotationTable, { fields: annFields, data: ann, title: "Variant ANN field" }));
+    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 (React.createElement(VariantAnnotationTable, { fields: csqFields, data: csq, title: "Variant CSQ field" }));
+    return (_jsx(VariantConsequenceDataGrid, { fields: csqFields, data: csq, title: "Variant CSQ field" }));
+}
+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: {
+            uniqueId: 'random',
+            refName: feat.refName,
+            start: feat.start,
+            end: feat.start + 1,
+            mate: {
+                refName: feat.refName,
+                start: feat.end,
+                end: feat.end + 1,
+            },
+        }, model: model, locStrings: [`${feat.refName}:${feat.end}`] })) : null;
 }
 const VariantFeatureWidget = observer(function (props) {
     const { model } = props;
     const { featureData, descriptions } = model;
     const feat = JSON.parse(JSON.stringify(featureData));
-    const { samples, ALT, type = '', ...rest } = feat;
-    return (React.createElement(Paper, { "data-testid": "variant-side-drawer" },
-        React.createElement(FeatureDetails, { feature: rest, descriptions: { ...variantFieldDescriptions, ...descriptions }, ...props }),
-        React.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
-        React.createElement(AnnPanel, { feature: rest, descriptions: descriptions }),
-        React.createElement(Suspense, { fallback: null },
-            type === 'breakend' ? (React.createElement(LaunchBreakendPanel, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = parseBreakend(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : null,
-            type === 'translocation' ? (React.createElement(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : null,
-            type === 'paired_feature' ? (React.createElement(LaunchBreakendPanel, { feature: feat, model: model, locStrings: [`${feat.mate.refName}:${feat.mate.start}`] })) : null,
-            type.includes('inversion') ||
-                type.includes('deletion') ||
-                type.includes('duplication') ||
-                type.includes('cnv') ||
-                type.includes('sv') ? (React.createElement(LaunchBreakendPanel, { feature: {
-                    uniqueId: 'random',
-                    refName: feat.refName,
-                    start: feat.start,
-                    end: feat.start + 1,
-                    mate: {
-                        refName: feat.refName,
-                        start: feat.end,
-                        end: feat.end + 1,
-                    },
-                }, model: model, locStrings: [`${feat.refName}:${feat.end}`] })) : null),
-        React.createElement(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })));
+    const { samples, ALT, ...rest } = feat;
+    return (_jsxs(Paper, { "data-testid": "variant-side-drawer", children: [_jsx(FeatureDetails, { feature: rest, descriptions: {
+                    ...variantFieldDescriptions,
+                    ...descriptions,
+                }, ...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 })] }));
 });
 export default VariantFeatureWidget;

package/esm/VariantFeatureWidget/VariantSampleFilters.d.ts

@@ -0,0 +1,9 @@
+type Filters = Record<string, string>;
+export default function SampleFilters({ columns, filter, setFilter, }: {
+    columns: {
+        field: string;
+    }[];
+    filter: Filters;
+    setFilter: (arg: Filters) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/VariantFeatureWidget/VariantSampleFilters.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 });
+                } }, `filter-${field}`)))] }));
+}

package/esm/VariantFeatureWidget/VariantSampleGrid.d.ts

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

package/esm/VariantFeatureWidget/VariantSampleGrid.js

@@ -1,15 +1,10 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
 import { measureGridWidth } from '@jbrowse/core/util';
-import { Checkbox, FormControlLabel, TextField, Typography, } from '@mui/material';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-function SampleFilters({ columns, filter, setFilter, }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Typography, null, "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 }) => (React.createElement(TextField, { key: `filter-${field}`, placeholder: `Filter ${field}`, value: filter[field] || '', onChange: event => {
-                setFilter({ ...filter, [field]: event.target.value });
-            } })))));
-}
+import SampleFilters from './VariantSampleFilters';
 export default function VariantSamples(props) {
     var _a;
     const { feature, descriptions = {} } = props;
@@ -51,18 +46,16 @@ export default function VariantSamples(props) {
             width: widths[index],
         });
     });
-    return !preFilteredRows.length ? null : (React.createElement(BaseCard, { ...props, title: "Samples" },
-        error ? React.createElement(Typography, { color: "error" }, `${error}`) : null,
-        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: checked, onChange: event => {
-                    setChecked(event.target.checked);
-                } }), label: React.createElement(Typography, { variant: "body2" }, "Show options") }),
-        checked ? (React.createElement(SampleFilters, { setFilter: setFilter, columns: columns, filter: filter })) : null,
-        React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
-            React.createElement(DataGrid, { rows: rows, hideFooter: rows.length < 100, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, columnHeaderHeight: 35, disableColumnMenu: true, slots: { toolbar: checked ? GridToolbar : null }, slotProps: {
-                    toolbar: {
-                        printOptions: {
-                            disableToolbarButton: true,
+    return !preFilteredRows.length ? null : (_jsxs(BaseCard, { ...props, title: "Samples", children: [error ? _jsx(Typography, { color: "error", children: `${error}` }) : null, _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: checked, onChange: event => {
+                        setChecked(event.target.checked);
+                    } }), label: _jsx(Typography, { variant: "body2", children: "Show options" }) }), checked ? (_jsx(SampleFilters, { setFilter: setFilter, columns: columns, filter: filter })) : null, _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: _jsx(DataGrid, { rows: rows, hideFooter: rows.length < 100, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, columnHeaderHeight: 35, disableColumnMenu: true, slots: { toolbar: checked ? GridToolbar : null }, slotProps: {
+                        toolbar: {
+                            printOptions: {
+                                disableToolbarButton: true,
+                            },
                         },
-                    },
-                } }))));
+                    } }) })] }));
 }

package/esm/VariantFeatureWidget/types.d.ts

@@ -0,0 +1,16 @@
+export interface Descriptions {
+    INFO?: {
+        ANN?: {
+            Description?: string;
+        };
+        CSQ?: {
+            Description?: string;
+        };
+    };
+}
+export interface ReducedFeature {
+    INFO?: {
+        ANN?: string[];
+        CSQ?: string[];
+    };
+}

package/esm/VariantFeatureWidget/types.js

@@ -0,0 +1 @@
+export {};

package/esm/VariantRPC/MultiVariantGetGenotypeMatrix.js

@@ -1,6 +1,7 @@
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
 import { firstValueFrom, toArray } from 'rxjs';
+import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../util';
 export class MultiVariantGetGenotypeMatrix extends RpcMethodTypeWithFiltersAndRenameRegions {
     constructor() {
         super(...arguments);
@@ -9,39 +10,18 @@ export class MultiVariantGetGenotypeMatrix extends RpcMethodTypeWithFiltersAndRe
     async execute(args, rpcDriverClassName) {
         const pm = this.pluginManager;
         const deserializedArgs = await this.deserializeArguments(args, rpcDriverClassName);
-        const { sources, mafFilter, regions, adapterConfig, sessionId } = deserializedArgs;
+        const { sources, minorAlleleFrequencyFilter, regions, adapterConfig, sessionId, } = deserializedArgs;
         const adapter = await getAdapter(pm, sessionId, adapterConfig);
         const dataAdapter = adapter.dataAdapter;
         const region = regions[0];
         const feats = await firstValueFrom(dataAdapter.getFeatures(region, deserializedArgs).pipe(toArray()));
         const genotypeFactor = new Set();
-        const mafs = [];
+        const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter);
         for (const feat of feats) {
-            let c = 0;
-            let c2 = 0;
             const samp = feat.get('genotypes');
-            if (feat.get('end') - feat.get('start') <= 10) {
-                for (const { name } of sources) {
-                    const s = samp[name];
-                    genotypeFactor.add(s);
-                    if (s === '0|0' || s === './.') {
-                        c2++;
-                    }
-                    else if (s === '1|0' || s === '0|1') {
-                        c++;
-                    }
-                    else if (s === '1|1') {
-                        c++;
-                        c2++;
-                    }
-                    else {
-                        c++;
-                    }
-                }
-                if (c / sources.length > mafFilter &&
-                    c2 / sources.length < 1 - mafFilter) {
-                    mafs.push(feat);
-                }
+            for (const { name } of sources) {
+                const s = samp[name];
+                genotypeFactor.add(s);
             }
         }
         const genotypeFactorMap = Object.fromEntries([...genotypeFactor].map((type, idx) => [type, idx]));
@@ -50,7 +30,10 @@ export class MultiVariantGetGenotypeMatrix extends RpcMethodTypeWithFiltersAndRe
             const samp = feat.get('genotypes');
             for (const { name } of sources) {
                 if (!rows[name]) {
-                    rows[name] = { name, genotypes: [] };
+                    rows[name] = {
+                        name,
+                        genotypes: [],
+                    };
                 }
                 rows[name].genotypes.push(genotypeFactorMap[samp[name]]);
             }

package/esm/VariantRPC/MultiVariantGetSimplifiedFeatures.d.ts

@@ -1,4 +1,5 @@
 import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
+import type { SampleInfo } from '../types';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Region } from '@jbrowse/core/util';
 export declare class MultiVariantGetSimplifiedFeatures extends RpcMethodTypeWithFiltersAndRenameRegions {
@@ -11,11 +12,15 @@ export declare class MultiVariantGetSimplifiedFeatures extends RpcMethodTypeWith
         regions: Region[];
         bpPerPx: number;
     }, rpcDriverClassName: string): Promise<{
-        id: string;
-        data: {
-            start: number;
-            end: number;
-            refName: string;
-        };
-    }[]>;
+        hasPhased: boolean;
+        sampleInfo: Record<string, SampleInfo>;
+        features: {
+            id: string;
+            data: {
+                start: number;
+                end: number;
+                refName: string;
+            };
+        }[];
+    }>;
 }

package/esm/VariantRPC/MultiVariantGetSimplifiedFeatures.js

@@ -1,56 +1,46 @@
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import RpcMethodTypeWithFiltersAndRenameRegions from '@jbrowse/core/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions';
 import { firstValueFrom, toArray } from 'rxjs';
+import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../util';
 export class MultiVariantGetSimplifiedFeatures extends RpcMethodTypeWithFiltersAndRenameRegions {
     constructor() {
         super(...arguments);
         this.name = 'MultiVariantGetSimplifiedFeatures';
     }
     async execute(args, rpcDriverClassName) {
+        var _a, _b;
         const pm = this.pluginManager;
         const deserializedArgs = await this.deserializeArguments(args, rpcDriverClassName);
-        const { mafFilter, sources, regions, adapterConfig, sessionId } = deserializedArgs;
+        const { minorAlleleFrequencyFilter, regions, adapterConfig, sessionId } = deserializedArgs;
         const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig);
         const feats = await firstValueFrom(dataAdapter
             .getFeaturesInMultipleRegions(regions, deserializedArgs)
             .pipe(toArray()));
-        const genotypeFactor = new Set();
-        const mafs = [];
-        for (const feat of feats) {
-            let c = 0;
-            let c2 = 0;
-            const samp = feat.get('genotypes');
-            if (feat.get('end') - feat.get('start') <= 10) {
-                for (const { name } of sources) {
-                    const s = samp[name];
-                    genotypeFactor.add(s);
-                    if (s === '0|0' || s === './.') {
-                        c2++;
-                    }
-                    else if (s === '1|0' || s === '0|1') {
-                        c++;
-                    }
-                    else if (s === '1|1') {
-                        c++;
-                        c2++;
-                    }
-                    else {
-                        c++;
-                    }
-                }
-                if (c / sources.length > mafFilter &&
-                    c2 / sources.length < 1 - mafFilter) {
-                    mafs.push(feat);
-                }
+        const features = getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter);
+        const sampleInfo = {};
+        let hasPhased = false;
+        for (const f of features) {
+            const samp = f.get('genotypes');
+            for (const [key, val] of Object.entries(samp)) {
+                const isPhased = val.includes('|');
+                hasPhased || (hasPhased = isPhased);
+                sampleInfo[key] = {
+                    maxPloidy: Math.max(((_a = sampleInfo[key]) === null || _a === void 0 ? void 0 : _a.maxPloidy) || 0, val.split('|').length),
+                    isPhased: ((_b = sampleInfo[key]) === null || _b === void 0 ? void 0 : _b.isPhased) || isPhased,
+                };
             }
         }
-        return mafs.map(f => ({
-            id: f.id(),
-            data: {
-                start: f.get('start'),
-                end: f.get('end'),
-                refName: f.get('refName'),
-            },
-        }));
+        return {
+            hasPhased,
+            sampleInfo,
+            features: features.map(f => ({
+                id: f.id(),
+                data: {
+                    start: f.get('start'),
+                    end: f.get('end'),
+                    refName: f.get('refName'),
+                },
+            })),
+        };
     }
 }