@jbrowse/plugin-variants 3.2.0 → 3.3.0

package/esm/MultiLinearVariantMatrixRenderer/components/MultiLinearVariantMatrixRendering.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const MultiLinearVariantMatrixRendering = observer(function (props) {
+    const { arr, width, height, displayModel } = props;
+    const ref = useRef(null);
+    function getFeatureUnderMouse(eventClientX, eventClientY) {
+        var _a, _b, _c;
+        if (!ref.current) {
+            return;
+        }
+        const r = ref.current.getBoundingClientRect();
+        const offsetX = eventClientX - r.left;
+        const offsetY = eventClientY - r.top;
+        const dimY = arr.length;
+        const dimX = ((_a = arr[0]) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const name = (_b = displayModel.sources[Math.floor((offsetY / height) * dimX)]) === null || _b === void 0 ? void 0 : _b.name;
+        const genotype = (_c = arr[Math.floor((offsetX / width) * dimY)]) === null || _c === void 0 ? void 0 : _c[Math.floor((offsetY / height) * dimX)];
+        return genotype && name
+            ? {
+                name,
+                genotype,
+            }
+            : undefined;
+    }
+    return (_jsx("div", { ref: ref, onMouseMove: e => {
+            displayModel.setHoveredGenotype(getFeatureUnderMouse(e.clientX, e.clientY));
+        }, onMouseLeave: () => {
+            displayModel.setHoveredGenotype(undefined);
+        }, onMouseOut: () => {
+            displayModel.setHoveredGenotype(undefined);
+        }, style: {
+            overflow: 'visible',
+            position: 'relative',
+            height,
+        }, children: _jsx(PrerenderedCanvas, { ...props }) }));
+});
+export default MultiLinearVariantMatrixRendering;

package/esm/MultiLinearVariantMatrixRenderer/index.js

@@ -1,12 +1,12 @@
-import LinearVariantMatrixRenderer from './LinearVariantMatrixRenderer';
-import PrerenderedCanvas from './components/LinearVariantMatrixRendering';
+import MultiLinearVariantMatrixRenderer from './MultiLinearVariantMatrixRenderer';
+import ReactComponent from './components/MultiLinearVariantMatrixRendering';
 import configSchema from './configSchema';
 export default function LinearVariantMatrixRendererF(pluginManager) {
     pluginManager.addRendererType(() => {
-        return new LinearVariantMatrixRenderer({
+        return new MultiLinearVariantMatrixRenderer({
             name: 'LinearVariantMatrixRenderer',
             displayName: 'Linear variant matrix renderer',
-            ReactComponent: PrerenderedCanvas,
+            ReactComponent,
             configSchema,
             pluginManager,
         });

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.d.ts

@@ -1,9 +1,9 @@
-import type { RenderArgsDeserializedWithFeaturesAndLayout } from './types';
+import type { RenderArgsDeserialized } from './types';
 export declare function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }: {
     ctx: CanvasRenderingContext2D;
     canvasWidth: number;
     canvasHeight: number;
-    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+    renderArgs: RenderArgsDeserialized;
 }): Promise<{
     mafs: {
         feature: import("@jbrowse/core/util").Feature;

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.js

@@ -1,33 +1,32 @@
-import { updateStatus } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, updateStatus } from '@jbrowse/core/util';
 import { checkStopToken } from '@jbrowse/core/util/stopToken';
 import { f2 } from '../shared/constants';
 import { drawColorAlleleCount } from '../shared/drawAlleleCount';
 import { drawPhased } from '../shared/drawPhased';
 import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../shared/minorAlleleFrequencyUtils';
 export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }) {
-    const { renderingMode: renderingMode, minorAlleleFrequencyFilter, sources, features, stopToken, } = renderArgs;
+    const { renderingMode, minorAlleleFrequencyFilter, sources, features, stopToken, lengthCutoffFilter, } = renderArgs;
     const { statusCallback = () => { } } = renderArgs;
     const h = canvasHeight / sources.length;
     checkStopToken(stopToken);
-    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(features.values(), minorAlleleFrequencyFilter);
+    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter({
+        stopToken,
+        features: features.values(),
+        minorAlleleFrequencyFilter,
+        lengthCutoffFilter,
+    });
     checkStopToken(stopToken);
     const arr = [];
     const m = mafs.length;
     const w = canvasWidth / m;
     await updateStatus('Drawing variant matrix', statusCallback, () => {
-        var _a, _b, _c;
-        let start = performance.now();
-        for (let i = 0; i < m; i++) {
-            if (performance.now() - start > 400) {
-                checkStopToken(stopToken);
-                start = performance.now();
-            }
+        forEachWithStopTokenCheck(mafs, stopToken, ({ feature, mostFrequentAlt }, idx) => {
+            var _a, _b, _c;
             const arr2 = [];
-            const { feature, mostFrequentAlt } = mafs[i];
             const hasPhaseSet = (_a = feature.get('FORMAT')) === null || _a === void 0 ? void 0 : _a.includes('PS');
             if (hasPhaseSet) {
                 const samp = feature.get('samples');
-                const x = (i / mafs.length) * canvasWidth;
+                const x = (idx / mafs.length) * canvasWidth;
                 const sln = sources.length;
                 for (let j = 0; j < sln; j++) {
                     const y = (j / sln) * canvasHeight;
@@ -59,7 +58,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
             }
             else {
                 const samp = feature.get('genotypes');
-                const x = (i / mafs.length) * canvasWidth;
+                const x = (idx / mafs.length) * canvasWidth;
                 const sln = sources.length;
                 for (let j = 0; j < sln; j++) {
                     const y = (j / sln) * canvasHeight;
@@ -86,7 +85,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                 }
             }
             arr.push(arr2);
-        }
+        });
     });
     return {
         mafs,

package/esm/MultiLinearVariantMatrixRenderer/types.d.ts

@@ -6,11 +6,9 @@ export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
     minorAlleleFrequencyFilter: number;
     highResolutionScaling: number;
     height: number;
-    renderingMode: string;
-}
-export interface RenderArgsDeserializedWithFeaturesAndLayout extends RenderArgsDeserialized {
-    sources: Source[];
     features: Map<string, Feature>;
     renderingMode: string;
     statusCallback?: (arg: string) => void;
+    lengthCutoffFilter: number;
+    stopToken: string;
 }

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.d.ts

@@ -8,6 +8,16 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         canvasRecordedData: any;
         reactElement?: React.ReactElement;
         html?: string;
@@ -16,6 +26,16 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
@@ -23,9 +43,18 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         imageData: any;
         reactElement?: React.ReactElement;
         html?: string;
     }>;
 }
-export type { RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.js

@@ -7,14 +7,20 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
     }
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
-        const { height, regions, bpPerPx } = renderProps;
+        const { height, referenceDrawingMode, regions, bpPerPx } = renderProps;
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
         const { makeImageData } = await import('./makeImageData');
-        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData(ctx, {
-            ...renderProps,
-            features,
-        }));
+        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => {
+            if (referenceDrawingMode === 'skip') {
+                ctx.fillStyle = '#ccc';
+                ctx.fillRect(0, 0, width, height);
+            }
+            return makeImageData(ctx, {
+                ...renderProps,
+                features,
+            });
+        });
         const results = await super.render({
             ...renderProps,
             ...rest,

package/esm/MultiLinearVariantRenderer/components/{MultiVariantRendering.d.ts → MultiLinearVariantRendering.d.ts}

@@ -1,7 +1,14 @@
-import RBush from 'rbush';
 import type { Source } from '../../shared/types';
 import type { Feature } from '@jbrowse/core/util';
 import type { Region } from '@jbrowse/core/util/types';
+type SerializedRBush = any;
+interface MinimizedVariantRecord {
+    alt: string[];
+    ref: string;
+    name: string;
+    description: string;
+    length: number;
+}
 declare const MultiVariantRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
@@ -10,10 +17,9 @@ declare const MultiVariantRendering: (props: {
     height: number;
     sources: Source[];
     scrollTop: number;
+    featureGenotypeMap: Record<string, MinimizedVariantRecord>;
     totalHeight: number;
-    rbush: RBush<{
-        genotype: string;
-    }>;
+    rbush: SerializedRBush;
     displayModel: any;
     onMouseLeave?: (event: React.MouseEvent) => void;
     onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void;

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

@@ -1,29 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import RBush from 'rbush';
+import { minElt } from './util';
+import { makeSimpleAltString } from '../../VcfFeature/util';
 const MultiVariantRendering = observer(function (props) {
-    const { totalHeight, scrollTop } = props;
+    const { featureGenotypeMap, totalHeight, scrollTop } = props;
     const { rbush, displayModel } = props;
     const ref = useRef(null);
     const rbush2 = useMemo(() => new RBush().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 } = minElt(x, elt => elt.maxX - elt.minX);
+            const ret = featureGenotypeMap[featureId];
+            if (ret) {
+                const { ref, alt, name, description, length } = ret;
+                const alleles = makeSimpleAltString(genotype, ref, alt);
+                return {
+                    ...rest,
+                    genotype,
+                    alleles,
+                    featureName: name,
+                    description: alt.length >= 3 ? 'multiple ALT alleles' : description,
+                    length: getBpDisplayStr(length),
+                };
+            }
+        }
+        return undefined;
     }
     return (_jsx("div", { ref: ref, onMouseMove: e => {
             var _a;

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

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

package/esm/MultiLinearVariantRenderer/components/util.js

@@ -0,0 +1,12 @@
+export 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/esm/MultiLinearVariantRenderer/index.js

@@ -1,5 +1,5 @@
 import MultiVariantRenderer from './MultiVariantRenderer';
-import ReactComponent from './components/MultiVariantRendering';
+import ReactComponent from './components/MultiLinearVariantRendering';
 import configSchema from './configSchema';
 export default function MultiVariantRendererF(pluginManager) {
     pluginManager.addRendererType(() => {

package/esm/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/esm/MultiLinearVariantRenderer/makeImageData.js

@@ -1,4 +1,4 @@
-import { featureSpanPx } from '@jbrowse/core/util';
+import { featureSpanPx, forEachWithStopTokenCheck } from '@jbrowse/core/util';
 import { checkStopToken } from '@jbrowse/core/util/stopToken';
 import RBush from 'rbush';
 import { f2 } from '../shared/constants';
@@ -6,56 +6,88 @@ import { drawColorAlleleCount } from '../shared/drawAlleleCount';
 import { drawPhased } from '../shared/drawPhased';
 import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../shared/minorAlleleFrequencyUtils';
 export 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];
     checkStopToken(stopToken);
-    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(features.values(), minorAlleleFrequencyFilter);
+    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter({
+        stopToken,
+        features: features.values(),
+        minorAlleleFrequencyFilter,
+        lengthCutoffFilter,
+    });
     checkStopToken(stopToken);
     const rbush = new RBush();
-    let start = performance.now();
-    for (const { mostFrequentAlt, feature } of mafs) {
-        if (performance.now() - start > 400) {
-            checkStopToken(stopToken);
-            start = performance.now();
-        }
+    forEachWithStopTokenCheck(mafs, stopToken, ({ mostFrequentAlt, feature }) => {
         const [leftPx, rightPx] = 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 - f2,
-                    maxX: x + w + f2,
-                    minY: y - f2,
-                    maxY: y + h + 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('|');
-                        drawPhased(alleles, ctx, x, y, w, h, HP);
+                        if (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 - f2, y - f2, w + f2, h + 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(/[/|]/);
-                    drawColorAlleleCount(alleles, ctx, x, y, w, h, mostFrequentAlt);
+                    if (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/esm/MultiLinearVariantRenderer/types.d.ts

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

package/esm/SplitVcfTabixAdapter/configSchema.js

@@ -17,9 +17,11 @@ const SplitVcfTabixAdapter = ConfigurationSchema('SplitVcfTabixAdapter', {
         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,
+});
 export default SplitVcfTabixAdapter;

package/esm/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/esm/VariantFeatureWidget/AltFormatter.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getMinimalDesc } from '../VcfFeature/util';
+export default function AltFormatter({ value, ref, }) {
+    const [show, setShow] = useState(false);
+    const alt = getMinimalDesc(ref, value);
+    return alt !== value ? (_jsxs("div", { children: [_jsx("button", { onClick: () => {
+                    setShow(!show);
+                }, children: show ? 'Show simplified ALT' : 'Show raw ALT' }), ' ', show ? value : getMinimalDesc(ref, value)] })) : (value);
+}

package/esm/VariantFeatureWidget/Checkbox2.js

@@ -1,12 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox, FormControlLabel } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()({
-    block: {
-        display: 'block',
-    },
-});
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 export default function Checkbox2({ checked, disabled, label, onChange, }) {
-    const { classes } = useStyles();
-    return (_jsx(FormControlLabel, { disabled: disabled, className: classes.block, control: _jsx(Checkbox, { checked: checked, onChange: onChange }), label: label }));
+    return (_jsx(FormControlLabel, { disabled: disabled, control: _jsx(Checkbox, { checked: checked, onChange: onChange }), label: _jsx(Typography, { variant: "body2", children: label }) }));
 }

package/esm/VariantFeatureWidget/Formatter.d.ts

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

package/esm/VariantFeatureWidget/Formatter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import copy from 'copy-to-clipboard';
+export default function Formatter({ value }) {
+    const [show, setShow] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const display = String(value);
+    return display.length > 100 ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                    copy(display);
+                    setCopied(true);
+                    setTimeout(() => {
+                        setCopied(false);
+                    }, 700);
+                }, children: copied ? 'Copied to clipboard' : 'Copy' }), _jsx("button", { type: "button", onClick: () => {
+                    setShow(val => !val);
+                }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? display : `${display.slice(0, 100)}...` })] })) : (_jsx("div", { children: display }));
+}

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

@@ -2,16 +2,14 @@ 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';
+import { DataGrid } 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 => {
+    return rows.length ? (_jsxs("div", { children: [_jsx(FormControlLabel, { label: _jsx(Typography, { variant: "body2", children: "Show options" }), 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) => ({
+                    } }) }), _jsx(DataGrid, { rowHeight: 25, hideFooter: rows.length < 100, rows: rows, showToolbar: checked, columns: columns.map((c, i) => ({
                     ...c,
                     width: widths[i],
-                })), slots: {
-                    toolbar: checked ? GridToolbar : null,
-                } })] })) : null;
+                })) })] })) : null;
 }

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -4,10 +4,12 @@ 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('./VariantConsequenceDataGrid'));
+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;
@@ -46,10 +48,13 @@ const VariantFeatureWidget = 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 (_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}`, ref: 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 })] }));
 });
 export default VariantFeatureWidget;

package/esm/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;