@jbrowse/plugin-variants 2.17.0 → 2.18.0

package/esm/MultiLinearVariantMatrixRenderer/index.js

@@ -0,0 +1,14 @@
+import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import LinearVariantMatrixRenderer from './LinearVariantMatrixRenderer';
+import configSchema from './configSchema';
+export default function LinearVariantMatrixRendererF(pluginManager) {
+    pluginManager.addRendererType(() => {
+        return new LinearVariantMatrixRenderer({
+            name: 'LinearVariantMatrixRenderer',
+            displayName: 'Linear variant matrix renderer',
+            ReactComponent: PrerenderedCanvas,
+            configSchema,
+            pluginManager,
+        });
+    });
+}

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.d.ts

@@ -0,0 +1,48 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { Source } from '../util';
+import type { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { Feature } from '@jbrowse/core/util';
+import type { ThemeOptions } from '@mui/material';
+export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
+    bpPerPx: number;
+    height: number;
+    highResolutionScaling: number;
+    themeOptions: ThemeOptions;
+}
+export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
+    features: Map<string, Feature>;
+}
+export interface MultiRenderArgsDeserialized extends RenderArgsDeserializedWithFeatures {
+    sources: Source[];
+    rowHeight: number;
+    scrollTop: number;
+}
+export default class MultiVariantBaseRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: MultiRenderArgsDeserialized): Promise<{
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        canvasRecordedData: any;
+        reactElement?: import("react").ReactElement;
+        html?: string;
+    } | {
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        reactElement: React.JSX.Element;
+        html?: string;
+    } | {
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        imageData: any;
+        reactElement?: import("react").ReactElement;
+        html?: string;
+    }>;
+    draw(ctx: CanvasRenderingContext2D, props: MultiRenderArgsDeserialized): Promise<void>;
+}
+export type { RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.js

@@ -0,0 +1,54 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import { featureSpanPx, renderToAbstractCanvas } from '@jbrowse/core/util';
+import { getCol } from '../util';
+export default class MultiVariantBaseRenderer extends FeatureRendererType {
+    constructor() {
+        super(...arguments);
+        this.supportsSVG = true;
+    }
+    async render(renderProps) {
+        const features = await this.getFeatures(renderProps);
+        const { height, regions, bpPerPx } = renderProps;
+        const region = regions[0];
+        const width = (region.end - region.start) / bpPerPx;
+        const rest = await renderToAbstractCanvas(width, height, renderProps, async (ctx) => {
+            await this.draw(ctx, {
+                ...renderProps,
+                features,
+            });
+            return undefined;
+        });
+        const results = await super.render({
+            ...renderProps,
+            ...rest,
+            features,
+            height,
+            width,
+        });
+        return {
+            ...results,
+            ...rest,
+            features: new Map(),
+            height,
+            width,
+            containsNoTransferables: true,
+        };
+    }
+    async draw(ctx, props) {
+        const { scrollTop, sources, rowHeight, features, regions, bpPerPx } = props;
+        const region = regions[0];
+        for (const feature of features.values()) {
+            if (feature.get('end') - feature.get('start') <= 10) {
+                const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+                const w = Math.max(Math.round(rightPx - leftPx), 2);
+                const genotypes = feature.get('genotypes');
+                let t = -scrollTop;
+                for (const { name } of sources) {
+                    ctx.fillStyle = getCol(genotypes[name]);
+                    ctx.fillRect(Math.floor(leftPx), t, w, Math.max(t + rowHeight, 1));
+                    t += rowHeight;
+                }
+            }
+        }
+    }
+}

package/esm/MultiLinearVariantRenderer/MultiVariantRendering.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Source } from '../util';
+import type { Feature } from '@jbrowse/core/util';
+import type { Region } from '@jbrowse/core/util/types';
+declare const MultiVariantRendering: (props: {
+    regions: Region[];
+    features: Map<string, Feature>;
+    bpPerPx: number;
+    width: number;
+    height: number;
+    sources: Source[];
+    scrollTop: number;
+    totalHeight: number;
+    onMouseLeave?: (event: React.MouseEvent) => void;
+    onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void;
+    onFeatureClick?: (event: React.MouseEvent, arg?: Feature) => void;
+}) => React.JSX.Element;
+export default MultiVariantRendering;

package/esm/MultiLinearVariantRenderer/MultiVariantRendering.js

@@ -0,0 +1,18 @@
+import React, { useRef } from 'react';
+import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const MultiVariantRendering = observer(function (props) {
+    const { totalHeight, scrollTop } = props;
+    const ref = useRef(null);
+    return (React.createElement("div", { ref: ref, style: {
+            overflow: 'visible',
+            position: 'relative',
+            height: totalHeight,
+        } },
+        React.createElement(PrerenderedCanvas, { ...props, style: {
+                position: 'absolute',
+                left: 0,
+                top: scrollTop,
+            } })));
+});
+export default MultiVariantRendering;

package/esm/MultiLinearVariantRenderer/configSchema.d.ts

@@ -0,0 +1,34 @@
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    color: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    posColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    negColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    clipColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    bicolorPivot: {
+        type: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    bicolorPivotValue: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+export default configSchema;

package/esm/MultiLinearVariantRenderer/configSchema.js

@@ -0,0 +1,8 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import baseWiggleRendererConfigSchema from '../configSchema';
+function x() { }
+const configSchema = ConfigurationSchema('MultiVariantRenderer', {}, {
+    baseConfiguration: baseWiggleRendererConfigSchema,
+    explicitlyTyped: true,
+});
+export default configSchema;

package/esm/MultiLinearVariantRenderer/index.d.ts

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

package/esm/MultiLinearVariantRenderer/index.js

@@ -0,0 +1,13 @@
+import MultiVariantRenderer from './MultiVariantRenderer';
+import ReactComponent from './MultiVariantRendering';
+import configSchema from './configSchema';
+export default function MultiVariantRendererF(pluginManager) {
+    pluginManager.addRendererType(() => {
+        return new MultiVariantRenderer({
+            name: 'MultiVariantRenderer',
+            ReactComponent,
+            configSchema,
+            pluginManager,
+        });
+    });
+}

package/esm/MultiVariantBaseRenderer.d.ts

@@ -0,0 +1,46 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { Source } from './util';
+import type { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { Feature } from '@jbrowse/core/util';
+import type { ThemeOptions } from '@mui/material';
+export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
+    bpPerPx: number;
+    height: number;
+    highResolutionScaling: number;
+    themeOptions: ThemeOptions;
+}
+export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
+    features: Map<string, Feature>;
+}
+export interface MultiRenderArgsDeserialized extends RenderArgsDeserializedWithFeatures {
+    sources: Source[];
+}
+export default abstract class MultiVariantBaseRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: RenderArgsDeserialized): Promise<{
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        canvasRecordedData: any;
+        reactElement?: import("react").ReactElement;
+        html?: string;
+    } | {
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        reactElement: React.JSX.Element;
+        html?: string;
+    } | {
+        features: Map<string, Feature>;
+        height: number;
+        width: number;
+        containsNoTransferables: boolean;
+        imageData: any;
+        reactElement?: import("react").ReactElement;
+        html?: string;
+    }>;
+    abstract draw<T extends RenderArgsDeserializedWithFeatures>(ctx: CanvasRenderingContext2D, props: T): Promise<Record<string, unknown> | undefined>;
+}
+export type { RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';

package/esm/MultiVariantBaseRenderer.js

@@ -0,0 +1,33 @@
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import { renderToAbstractCanvas } from '@jbrowse/core/util';
+export default class MultiVariantBaseRenderer extends FeatureRendererType {
+    constructor() {
+        super(...arguments);
+        this.supportsSVG = true;
+    }
+    async render(renderProps) {
+        const features = await this.getFeatures(renderProps);
+        const { height, regions, bpPerPx } = renderProps;
+        const region = regions[0];
+        const width = (region.end - region.start) / bpPerPx;
+        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => this.draw(ctx, {
+            ...renderProps,
+            features,
+        }));
+        const results = await super.render({
+            ...renderProps,
+            ...rest,
+            features,
+            height,
+            width,
+        });
+        return {
+            ...results,
+            ...rest,
+            features: new Map(),
+            height,
+            width,
+            containsNoTransferables: true,
+        };
+    }
+}

package/esm/StructuralVariantChordRenderer/Chord.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Feature } from '@jbrowse/core/util';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
 export interface Region {
     end: number;
     start: number;

package/esm/StructuralVariantChordRenderer/Chord.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { polarToCartesian, getStrokeProps } from '@jbrowse/core/util';
-import { readConfObject, } from '@jbrowse/core/configuration';
 import { parseBreakend } from '@gmod/vcf';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { getStrokeProps, polarToCartesian } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
 function bpToRadians(block, pos) {
     const blockStart = block.region.elided ? 0 : block.region.start;
     const blockEnd = block.region.elided ? 0 : block.region.end;
@@ -12,7 +12,6 @@ function bpToRadians(block, pos) {
 const Chord = observer(function Chord({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }) {
     var _a, _b, _c, _d, _e;
     const [hovered, setHovered] = useState(false);
-    // find the blocks that our start and end points belong to
     const startBlock = blocksForRefs[feature.get('refName')];
     if (!startBlock) {
         return null;
@@ -31,28 +30,25 @@ const Chord = observer(function Chord({ feature, blocksForRefs, radius, config,
     const bnd = alt && parseBreakend(alt);
     const startPos = feature.get('start');
     if (bnd) {
-        // VCF BND
         const matePosition = bnd.MatePosition.split(':');
         endPosition = +matePosition[1];
         endBlock = blocksForRefs[matePosition[0]];
     }
     else if (alt === '<TRA>') {
-        // VCF TRA
         const chr2 = (_c = (_b = feature.get('INFO')) === null || _b === void 0 ? void 0 : _b.CHR2) === null || _c === void 0 ? void 0 : _c[0];
         const end = (_e = (_d = feature.get('INFO')) === null || _d === void 0 ? void 0 : _d.END) === null || _e === void 0 ? void 0 : _e[0];
         endPosition = Number.parseInt(end, 10);
         endBlock = blocksForRefs[chr2];
     }
     else if (svType === 'mate') {
-        // generic simplefeatures arcs
         const mate = feature.get('mate');
         const chr2 = mate.refName;
         endPosition = mate.start;
         endBlock = blocksForRefs[chr2];
     }
     else {
-        console.warn('unknown sv type', svType);
-        endPosition = startPos + 1;
+        endBlock = startBlock;
+        endPosition = feature.get('end');
     }
     if (endBlock) {
         const startRadians = bpToRadians(startBlock, startPos);

package/esm/StructuralVariantChordRenderer/ReactComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Feature } from '@jbrowse/core/util';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { Block, AnyRegion } from './Chord';
+import type { AnyRegion, Block } from './Chord';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
 declare const StructuralVariantChordsReactComponent: ({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }: {
     features: Map<string, Feature>;
     radius: number;

package/esm/StructuralVariantChordRenderer/ReactComponent.js

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
-// locals
 import Chord from './Chord';
 const StructuralVariantChordsReactComponent = observer(function ({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }) {
     const { selectedFeatureId } = displayModel || {};

package/esm/StructuralVariantChordRenderer/configSchema.d.ts

@@ -1,25 +1,16 @@
 declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     strokeColor: {
         type: string;
         description: string;
         defaultValue: string;
         contextVariable: string[];
     };
-    /**
-     * #slot
-     */
     strokeColorSelected: {
         type: string;
         description: string;
         defaultValue: string;
         contextVariable: string[];
     };
-    /**
-     * #slot
-     */
     strokeColorHover: {
         type: string;
         description: string;

package/esm/StructuralVariantChordRenderer/configSchema.js

@@ -1,30 +1,18 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config StructuralVariantChordRenderer
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 const configSchema = ConfigurationSchema('StructuralVariantChordRenderer', {
-    /**
-     * #slot
-     */
     strokeColor: {
         type: 'color',
         description: 'the line color of each arc',
         defaultValue: 'rgba(255,133,0,0.32)',
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     strokeColorSelected: {
         type: 'color',
         description: 'the line color of an arc that has been selected',
         defaultValue: 'black',
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     strokeColorHover: {
         type: 'color',
         description: 'the line color of an arc that is being hovered over with the mouse',

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/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import 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;
+}) => React.JSX.Element | null;
+export default Tooltip;

package/esm/Tooltip.js

@@ -0,0 +1,30 @@
+import React, { 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 ? (React.createElement(React.Fragment, null,
+        React.createElement(Suspense, { fallback: null },
+            React.createElement(BaseTooltip, { clientPoint: { x, y } },
+                React.createElement(TooltipContents, { model: model, feature: featureUnderMouse }))),
+        React.createElement("div", { className: classes.hoverVertical, style: {
+                left: offsetMouseCoord[0],
+                height: height,
+            } }))) : null;
+});
+export default Tooltip;

package/esm/VariantFeatureWidget/AnnotGrid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridColDef, GridValidRowModel } from '@mui/x-data-grid';
+import type { GridColDef, GridValidRowModel } from '@mui/x-data-grid';
 export default function VariantAnnotPanel({ rows, columns, }: {
     rows: GridValidRowModel[];
     columns: GridColDef[];

package/esm/VariantFeatureWidget/AnnotGrid.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { DataGrid, GridToolbar, } from '@mui/x-data-grid';
-import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 import { measureGridWidth } from '@jbrowse/core/util';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 export default function VariantAnnotPanel({ rows, columns, }) {
     const [checked, setChecked] = useState(false);
     const widths = columns.map(e => measureGridWidth(rows.map(r => r[e.field])));

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/LaunchBreakendPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SimpleFeatureSerialized } from '@jbrowse/core/util';
-import { VariantFeatureWidgetModel } from './stateModelFactory';
+import type { VariantFeatureWidgetModel } from './stateModelFactory';
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function BreakendPanel(props: {
     locStrings: string[];
     model: VariantFeatureWidgetModel;

package/esm/VariantFeatureWidget/LaunchBreakendPanel.js

@@ -1,17 +1,14 @@
 import React, { lazy } from 'react';
-import { Link, Typography } from '@mui/material';
-import { getEnv, getSession, SimpleFeature, } from '@jbrowse/core/util';
 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}` },
+        React.createElement("ul", null, locStrings.map((locString, index) => (React.createElement("li", { key: `${locString}-${index}` },
             locString,
             ' ',
             React.createElement(Link, { href: "#", onClick: event => {
@@ -32,9 +29,11 @@ function LocStringList({ locStrings, model, }) {
                     }
                 } }, "(LGV)")))))));
 }
-function LaunchBreakpointSplitViewPanel({ locStrings, model, feature, viewType, }) {
+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) },
@@ -46,12 +45,11 @@ function LaunchBreakpointSplitViewPanel({ locStrings, model, feature, viewType,
                         BreakendMultiLevelOptionDialog,
                         {
                             handleClose,
-                            model,
+                            session,
                             feature: simpleFeature,
-                            // @ts-expect-error
-                            viewType,
+                            stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_multilevel`,
                             view: model.view,
-                            assemblyName: model.view.displayedRegions[0].assemblyName,
+                            assemblyName,
                         },
                     ]);
                 } }, "(top/bottom)"),
@@ -62,12 +60,11 @@ function LaunchBreakpointSplitViewPanel({ locStrings, model, feature, viewType,
                         BreakendSingleLevelOptionDialog,
                         {
                             handleClose,
-                            model,
+                            session,
                             feature: simpleFeature,
-                            // @ts-expect-error
-                            viewType,
+                            stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_singlelevel`,
                             view: model.view,
-                            assemblyName: model.view.displayedRegions[0].assemblyName,
+                            assemblyName,
                         },
                     ]);
                 } }, "(single row)")))))));
@@ -76,14 +73,13 @@ export default function BreakendPanel(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));
+        hasBreakpointSplitView ? (React.createElement(LaunchBreakpointSplitViewPanel, { model: model, locStrings: locStrings, feature: feature })) : null));
 }

package/esm/VariantFeatureWidget/VariantAnnotationTable.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import AnnotGrid from './AnnotGrid';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import AnnotGrid from './AnnotGrid';
 export default function VariantAnnotationTable({ data, fields, title, }) {
     return data.length ? (React.createElement(BaseCard, { title: title },
         React.createElement(AnnotGrid, { rows: data.map((elt, id) => ({

package/esm/VariantFeatureWidget/VariantFeatureWidget.d.ts

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