@jbrowse/plugin-variants 2.17.0 → 3.0.0

package/esm/StructuralVariantChordRenderer/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function StructuralVariantChordRendererF(pluginManager: PluginManager): void;

package/esm/StructuralVariantChordRenderer/index.js

@@ -1,6 +1,6 @@
 import ChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType';
-import configSchema from './configSchema';
 import ReactComponent from './ReactComponent';
+import configSchema from './configSchema';
 export default function StructuralVariantChordRendererF(pluginManager) {
     pluginManager.addRendererType(() => new ChordRendererType({
         name: 'StructuralVariantChordRenderer',

package/esm/StructuralVariantChordRenderer/types.d.ts

@@ -0,0 +1,17 @@
+export interface Region {
+    end: number;
+    start: number;
+    refName: string;
+    elided?: false;
+}
+export interface ElidedRegion {
+    elided: true;
+    regions: Region[];
+}
+export type AnyRegion = Region | ElidedRegion;
+export interface Block {
+    flipped: boolean;
+    bpPerRadian: number;
+    startRadians: number;
+    region: AnyRegion;
+}

package/esm/StructuralVariantChordRenderer/types.js

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

package/esm/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+import type { Feature } from '@jbrowse/core/util';
+type Coord = [number, number];
+export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
+    feature: Feature;
+    model: any;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: ({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
+    model: {
+        featureUnderMouse?: Feature;
+    };
+    useClientY?: boolean;
+    height: number;
+    clientMouseCoord: Coord;
+    offsetMouseCoord: Coord;
+    clientRect?: DOMRect;
+    TooltipContents: TooltipContentsComponent;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default Tooltip;

package/esm/Tooltip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    hoverVertical: {
+        background: '#333',
+        border: 'none',
+        width: 1,
+        height: '100%',
+        cursor: 'default',
+        position: 'absolute',
+        pointerEvents: 'none',
+    },
+});
+const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
+    const { featureUnderMouse } = model;
+    const { classes } = useStyles();
+    const x = clientMouseCoord[0] + 5;
+    const y = useClientY ? clientMouseCoord[1] : (clientRect === null || clientRect === void 0 ? void 0 : clientRect.top) || 0;
+    return featureUnderMouse ? (_jsxs(_Fragment, { children: [_jsx(Suspense, { fallback: null, children: _jsx(BaseTooltip, { clientPoint: { x, y }, children: _jsx(TooltipContents, { model: model, feature: featureUnderMouse }) }) }), _jsx("div", { className: classes.hoverVertical, style: {
+                    left: offsetMouseCoord[0],
+                    height: height,
+                } })] })) : null;
+});
+export default Tooltip;

package/esm/VariantFeatureWidget/BreakendMultiLevelOptionDialog.js

@@ -1,2 +1 @@
-// re-exported for react lazy
 export { BreakendMultiLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/VariantFeatureWidget/BreakendSingleLevelOptionDialog.js

@@ -1,2 +1 @@
-// re-exported for react lazy
 export { BreakendSingleLevelOptionDialog as default } from '@jbrowse/sv-core';

package/esm/VariantFeatureWidget/Checkbox2.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export default function Checkbox2({ checked, disabled, label, onChange, }: {
     checked: boolean;
     disabled?: boolean;
     label: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/Checkbox2.js

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

package/esm/VariantFeatureWidget/LaunchBreakendPanel.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { SimpleFeatureSerialized } from '@jbrowse/core/util';
-import { VariantFeatureWidgetModel } from './stateModelFactory';
-export default function BreakendPanel(props: {
+import type { VariantFeatureWidgetModel } from './stateModelFactory';
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
+export default function LaunchBreakendPanel(props: {
     locStrings: string[];
     model: VariantFeatureWidgetModel;
     feature: SimpleFeatureSerialized;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/LaunchBreakendPanel.js

@@ -1,89 +1,72 @@
-import React, { lazy } from 'react';
-import { Link, Typography } from '@mui/material';
-import { getEnv, getSession, SimpleFeature, } from '@jbrowse/core/util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
-// lazies
+import { SimpleFeature, getEnv, getSession } from '@jbrowse/core/util';
+import { Link, Typography } from '@mui/material';
 const BreakendMultiLevelOptionDialog = lazy(() => import('./BreakendMultiLevelOptionDialog'));
 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) => (
-        /* biome-ignore lint/suspicious/noArrayIndexKey: */
-        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, viewType, }) {
+function LaunchBreakpointSplitViewPanel({ locStrings, model, feature, }) {
+    var _a, _b;
     const session = getSession(model);
     const simpleFeature = new SimpleFeature(feature);
-    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,
-                            model,
-                            feature: simpleFeature,
-                            // @ts-expect-error
-                            viewType,
-                            view: model.view,
-                            assemblyName: model.view.displayedRegions[0].assemblyName,
-                        },
-                    ]);
-                } }, "(top/bottom)"),
-            ' ',
-            React.createElement(Link, { href: "#", onClick: event => {
-                    event.preventDefault();
-                    session.queueDialog(handleClose => [
-                        BreakendSingleLevelOptionDialog,
-                        {
-                            handleClose,
-                            model,
-                            feature: simpleFeature,
-                            // @ts-expect-error
-                            viewType,
-                            view: model.view,
-                            assemblyName: model.view.displayedRegions[0].assemblyName,
-                        },
-                    ]);
-                } }, "(single row)")))))));
+    const assemblyName = (_b = (_a = model.view) === null || _a === void 0 ? void 0 : _a.displayedRegions[0]) === null || _b === void 0 ? void 0 : _b.assemblyName;
+    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);
-    let viewType;
+    let hasBreakpointSplitView = false;
     try {
-        viewType = pluginManager.getViewType('BreakpointSplitView');
+        hasBreakpointSplitView = !!pluginManager.getViewType('BreakpointSplitView');
     }
     catch (e) {
-        // ignore
     }
-    return (React.createElement(BaseCard, { ...props, title: "Breakends" },
-        React.createElement(LocStringList, { model: model, locStrings: locStrings }),
-        viewType ? (React.createElement(LaunchBreakpointSplitViewPanel, { viewType: viewType, 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 { VariantFeatureWidgetModel } from './stateModelFactory';
+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,56 +1,55 @@
-import React, { lazy, Suspense } from 'react';
-import { observer } from 'mobx-react';
-import { Paper } from '@mui/material';
-import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
 import { parseBreakend } from '@gmod/vcf';
-// locals
+import FeatureDetails from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails';
+import { Paper } from '@mui/material';
+import { observer } from 'mobx-react';
 import VariantSampleGrid from './VariantSampleGrid';
-import VariantAnnotationTable from './VariantAnnotationTable';
 import { variantFieldDescriptions } from './variantFieldDescriptions';
-// lazies
 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 { SimpleFeatureSerialized } from '@jbrowse/core/util';
+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 { FormControlLabel, Checkbox, TextField, Typography, } from '@mui/material';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { measureGridWidth } from '@jbrowse/core/util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
-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 { measureGridWidth } from '@jbrowse/core/util';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import SampleFilters from './VariantSampleFilters';
 export default function VariantSamples(props) {
     var _a;
     const { feature, descriptions = {} } = props;
@@ -19,9 +14,6 @@ export default function VariantSamples(props) {
     let error;
     let rows = [];
     const filters = Object.keys(filter);
-    // catch some error thrown from regex
-    // note: maps all values into a string, if this is not done rows are not
-    // sortable by the data-grid
     try {
         rows = preFilteredRows
             .map(row => {
@@ -54,19 +46,16 @@ export default function VariantSamples(props) {
             width: widths[index],
         });
     });
-    // disableRowSelectionOnClick helps avoid
-    // https://github.com/mui-org/material-ui-x/issues/1197
-    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(DataGrid, { autoHeight: true, 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/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function VariantFeatureWidgetF(pluginManager: PluginManager): void;

package/esm/VariantFeatureWidget/index.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
-import { stateModelFactory } from './stateModelFactory';
 import { configSchema } from './configSchema';
+import { stateModelFactory } from './stateModelFactory';
 export default function VariantFeatureWidgetF(pluginManager) {
     pluginManager.addWidgetType(() => new WidgetType({
         name: 'VariantFeatureWidget',

package/esm/VariantFeatureWidget/stateModelFactory.d.ts

@@ -1,5 +1,5 @@
-import PluginManager from '@jbrowse/core/PluginManager';
-import { Instance } from 'mobx-state-tree';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Instance } from 'mobx-state-tree';
 export declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<"BaseFeatureWidget">;

package/esm/VariantFeatureWidget/stateModelFactory.js

@@ -1,5 +1,5 @@
-import { types } from 'mobx-state-tree';
 import { stateModelFactory as baseModelFactory } from '@jbrowse/core/BaseFeatureWidget';
+import { types } from 'mobx-state-tree';
 export function stateModelFactory(pluginManager) {
     const baseModel = baseModelFactory(pluginManager);
     return types.compose(baseModel, types.model('VariantFeatureWidget', {