@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/MultiLinearVariantRenderer/makeImageData.js

@@ -1,115 +1,130 @@
-import { featureSpanPx, forEachWithStopTokenCheck, updateStatus, } from '@jbrowse/core/util';
+import { featureSpanPx, updateStatus } from '@jbrowse/core/util';
 import Flatbush from '@jbrowse/core/util/flatbush';
-import { checkStopToken } from '@jbrowse/core/util/stopToken';
-import { f2 } from '../shared/constants';
-import { drawColorAlleleCount, getColorAlleleCount, } from '../shared/drawAlleleCount';
-import { drawPhased } from '../shared/drawPhased';
-import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../shared/minorAlleleFrequencyUtils';
+import { checkStopToken2, createStopTokenChecker, } from '@jbrowse/core/util/stopToken';
+import { f2 } from "../shared/constants.js";
+import { drawColorAlleleCount, getAlleleColor, } from "../shared/drawAlleleCount.js";
+import { drawPhased } from "../shared/drawPhased.js";
+import { getFeaturesThatPassMinorAlleleFrequencyFilter } from "../shared/minorAlleleFrequencyUtils.js";
+function drawPhasedMode(drawCtx, itemData, mafs) {
+    const { ctx, sources, region, bpPerPx, startRow, endRow, h, drawH, scrollTop, splitCache, drawRef, genotypesCache, stopToken, } = drawCtx;
+    const { items, coords } = itemData;
+    const lastCheck = createStopTokenChecker(stopToken);
+    for (const { feature } of mafs) {
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const featureId = feature.id();
+        const bpLen = feature.get('end') - feature.get('start');
+        const w = Math.max(Math.round(rightPx - leftPx), 2);
+        const x = Math.floor(leftPx);
+        let samp = genotypesCache.get(featureId);
+        if (!samp) {
+            samp = feature.get('genotypes');
+            genotypesCache.set(featureId, samp);
+        }
+        for (let j = startRow; j < endRow; j++) {
+            const y = j * h - scrollTop;
+            const { name, HP } = sources[j];
+            const genotype = samp[name];
+            if (genotype) {
+                const isPhased = genotype.includes('|');
+                if (isPhased) {
+                    const alleles = splitCache[genotype] ?? (splitCache[genotype] = genotype.split('|'));
+                    if (drawPhased(alleles, ctx, x, y, w, drawH, HP, undefined, drawRef)) {
+                        items.push({ name, genotype, featureId, bpLen });
+                        coords.push(x, y, x + w, y + drawH);
+                    }
+                }
+                else {
+                    ctx.fillStyle = 'black';
+                    ctx.fillRect(x - f2, y - f2, w + f2, drawH + f2);
+                }
+            }
+        }
+        checkStopToken2(lastCheck);
+    }
+}
+function drawAlleleCountMode(drawCtx, itemData, mafs, colorCache) {
+    const { ctx, sources, region, bpPerPx, startRow, endRow, h, drawH, scrollTop, splitCache, drawRef, genotypesCache, stopToken, } = drawCtx;
+    const { items, coords } = itemData;
+    const lastCheck = createStopTokenChecker(stopToken);
+    for (const { mostFrequentAlt, feature } of mafs) {
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const featureId = feature.id();
+        const bpLen = feature.get('end') - feature.get('start');
+        const w = Math.max(Math.round(rightPx - leftPx), 2);
+        const x = Math.floor(leftPx);
+        let samp = genotypesCache.get(featureId);
+        if (!samp) {
+            samp = feature.get('genotypes');
+            genotypesCache.set(featureId, samp);
+        }
+        const featureType = feature.get('type');
+        const featureStrand = feature.get('strand');
+        const alpha = bpLen > 5 ? 0.75 : 1;
+        for (let j = startRow; j < endRow; j++) {
+            const y = j * h - scrollTop;
+            const { name } = sources[j];
+            const genotype = samp[name];
+            if (genotype) {
+                const c = getAlleleColor(genotype, mostFrequentAlt, colorCache, splitCache, drawRef);
+                if (c) {
+                    drawColorAlleleCount(c, ctx, x, y, w, drawH, featureType, featureStrand, alpha);
+                    items.push({ name, genotype, featureId, bpLen });
+                    coords.push(x, y, x + w, y + drawH);
+                }
+            }
+        }
+        checkStopToken2(lastCheck);
+    }
+}
 export async function makeImageData(ctx, props) {
-    const { scrollTop, minorAlleleFrequencyFilter, sources, rowHeight, features, regions, bpPerPx, renderingMode, stopToken, lengthCutoffFilter, referenceDrawingMode, } = props;
+    const { scrollTop, minorAlleleFrequencyFilter, sources, rowHeight, height: canvasHeight, features, regions, bpPerPx, renderingMode, stopToken, lengthCutoffFilter, referenceDrawingMode, statusCallback = () => { }, } = props;
     const region = regions[0];
-    const { statusCallback = () => { } } = props;
-    checkStopToken(stopToken);
+    const lastCheck = createStopTokenChecker(stopToken);
+    const coords = [];
+    const items = [];
+    const colorCache = {};
+    const splitCache = {};
+    const genotypesCache = new Map();
+    const drawRef = referenceDrawingMode === 'draw';
+    const h = rowHeight;
+    const drawH = Math.max(rowHeight, 1);
+    const startRow = Math.floor(scrollTop / h);
+    const endRow = Math.min(sources.length, Math.ceil((scrollTop + canvasHeight) / h));
     const mafs = await updateStatus('Calculating stats', statusCallback, () => getFeaturesThatPassMinorAlleleFrequencyFilter({
-        stopToken,
+        lastCheck,
         features: features.values(),
         minorAlleleFrequencyFilter,
         lengthCutoffFilter,
+        genotypesCache,
+        splitCache,
     }));
-    checkStopToken(stopToken);
-    const coords = [];
-    const items = [];
-    const colorCache = {};
+    const drawCtx = {
+        ctx,
+        sources,
+        region,
+        bpPerPx,
+        startRow,
+        endRow,
+        h,
+        drawH,
+        scrollTop,
+        splitCache,
+        drawRef,
+        genotypesCache,
+        stopToken,
+    };
+    const itemData = { items, coords };
     await updateStatus('Drawing variants', statusCallback, () => {
-        forEachWithStopTokenCheck(mafs, stopToken, ({ mostFrequentAlt, feature }) => {
-            const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-            const featureId = feature.id();
-            const bpLen = feature.get('end') - feature.get('start');
-            const w = Math.max(Math.round(rightPx - leftPx), 2);
-            const samp = feature.get('genotypes');
-            let y = -scrollTop;
-            const s = sources.length;
-            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('|');
-                            if (drawPhased(alleles, ctx, x, y, w, h, HP, undefined, referenceDrawingMode === 'draw')) {
-                                items.push({
-                                    name,
-                                    genotype,
-                                    featureId,
-                                    bpLen,
-                                });
-                                coords.push(x, y, x + w, y + h);
-                            }
-                        }
-                        else {
-                            ctx.fillStyle = 'black';
-                            ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
-                        }
-                    }
-                    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 cacheKey = `${genotype}:${mostFrequentAlt}`;
-                        let c = colorCache[cacheKey];
-                        if (c === undefined) {
-                            let alt = 0;
-                            let uncalled = 0;
-                            let alt2 = 0;
-                            let ref = 0;
-                            const alleles = genotype.split(/[/|]/);
-                            const total = alleles.length;
-                            for (let i = 0; i < total; i++) {
-                                const allele = alleles[i];
-                                if (allele === mostFrequentAlt) {
-                                    alt++;
-                                }
-                                else if (allele === '0') {
-                                    ref++;
-                                }
-                                else if (allele === '.') {
-                                    uncalled++;
-                                }
-                                else {
-                                    alt2++;
-                                }
-                            }
-                            c = getColorAlleleCount(ref, alt, alt2, uncalled, total, referenceDrawingMode === 'draw');
-                            colorCache[cacheKey] = c;
-                        }
-                        if (c) {
-                            drawColorAlleleCount(c, ctx, x, y, w, h, feature.get('type'), feature.get('strand'), bpLen > 5 ? 0.75 : 1);
-                            items.push({
-                                name,
-                                genotype,
-                                featureId,
-                                bpLen,
-                            });
-                            coords.push(x, y, x + w, y + h);
-                        }
-                    }
-                    y += rowHeight;
-                }
-            }
-        });
+        if (renderingMode === 'phased') {
+            drawPhasedMode(drawCtx, itemData, mafs);
+        }
+        else {
+            drawAlleleCountMode(drawCtx, itemData, mafs, colorCache);
+        }
     });
     const flatbush = new Flatbush(Math.max(items.length, 1));
     if (items.length) {
-        for (let i = 0; i < coords.length; i += 4) {
+        for (let i = 0, l = coords.length; i < l; i += 4) {
             flatbush.add(coords[i], coords[i + 1], coords[i + 2], coords[i + 3]);
         }
     }
@@ -117,18 +132,20 @@ export async function makeImageData(ctx, props) {
         flatbush.add(0, 0);
     }
     flatbush.finish();
+    const featureGenotypeMap = {};
+    for (const { feature } of mafs) {
+        const id = feature.id();
+        featureGenotypeMap[id] = {
+            alt: feature.get('ALT'),
+            ref: feature.get('REF'),
+            name: feature.get('name'),
+            description: feature.get('description'),
+            length: feature.get('end') - feature.get('start'),
+        };
+    }
     return {
         flatbush: flatbush.data,
         items,
-        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'),
-            },
-        ])),
+        featureGenotypeMap,
     };
 }

package/esm/MultiLinearVariantRenderer/types.d.ts

@@ -1,21 +1,4 @@
-import type { Source } from '../shared/types';
-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;
-    minorAlleleFrequencyFilter: number;
-    lengthCutoffFilter: number;
-    statusCallback?: (arg: string) => void;
+import type { MultiVariantRenderArgsBase } from '../shared/types.ts';
+export interface MultiRenderArgsDeserialized extends MultiVariantRenderArgsBase {
+    referenceDrawingMode?: string;
 }

package/esm/SplitVcfTabixAdapter/SplitVcfTabixAdapter.js

@@ -4,7 +4,7 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { fetchAndMaybeUnzipText, updateStatus } from '@jbrowse/core/util';
 import { openLocation } from '@jbrowse/core/util/io';
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
-import VcfFeature from '../VcfFeature';
+import VcfFeature from "../VcfFeature/index.js";
 export default class SplitVcfTabixAdapter extends BaseFeatureDataAdapter {
     async configurePre(refName) {
         const indexType = this.getConf('indexType');

package/esm/SplitVcfTabixAdapter/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const SplitVcfTabixAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const SplitVcfTabixAdapter: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     vcfGzLocationMap: {
         type: string;
         defaultValue: {};
@@ -19,5 +19,5 @@ declare const SplitVcfTabixAdapter: import("@jbrowse/core/configuration/configur
             locationType: string;
         };
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default SplitVcfTabixAdapter;

package/esm/SplitVcfTabixAdapter/index.d.ts

@@ -1,3 +1,3 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export { default as configSchema } from './configSchema';
+export { default as configSchema } from './configSchema.ts';
 export default function VcfTabixAdapterF(pluginManager: PluginManager): void;

package/esm/SplitVcfTabixAdapter/index.js

@@ -1,11 +1,11 @@
 import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
-import configSchema from './configSchema';
-export { default as configSchema } from './configSchema';
+import configSchema from "./configSchema.js";
+export { default as configSchema } from "./configSchema.js";
 export default function VcfTabixAdapterF(pluginManager) {
     pluginManager.addAdapterType(() => new AdapterType({
         name: 'SplitVcfTabixAdapter',
         displayName: 'VCF tabix adapter (split across multiple files)',
         configSchema,
-        getAdapterClass: () => import('./SplitVcfTabixAdapter').then(r => r.default),
+        getAdapterClass: () => import("./SplitVcfTabixAdapter.js").then(r => r.default),
     }));
 }

package/esm/StructuralVariantChordRenderer/Chord.d.ts

@@ -1,4 +1,4 @@
-import type { AnyRegion, Block } from './types';
+import type { AnyRegion, Block } from './types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature } from '@jbrowse/core/util';
 declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }: {

package/esm/StructuralVariantChordRenderer/Chord.js

@@ -10,71 +10,54 @@ function bpToRadians(block, pos) {
     const bpOffset = block.flipped ? blockEnd - pos : pos - blockStart;
     return bpOffset / block.bpPerRadian + block.startRadians;
 }
-const Chord = observer(function Chord({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }) {
-    var _a, _b, _c, _d, _e;
-    const [hovered, setHovered] = useState(false);
-    const startBlock = blocksForRefs[feature.get('refName')];
-    if (!startBlock) {
-        return null;
-    }
-    let svType;
-    if (feature.get('INFO')) {
-        ;
-        [svType] = feature.get('INFO').SVTYPE || [];
-    }
-    else if (feature.get('mate')) {
-        svType = 'mate';
-    }
-    let endPosition;
-    let endBlock;
-    const alt = (_a = feature.get('ALT')) === null || _a === void 0 ? void 0 : _a[0];
+function getEndpoint(feature, blocksForRefs, startBlock) {
+    const alt = feature.get('ALT')?.[0];
     const bnd = alt && parseBreakend(alt);
-    const startPos = feature.get('start');
+    const mate = feature.get('mate');
     if (bnd) {
-        const matePosition = bnd.MatePosition.split(':');
-        endPosition = +matePosition[1];
-        endBlock = blocksForRefs[matePosition[0]];
+        const [chr, pos] = bnd.MatePosition.split(':');
+        return { endBlock: blocksForRefs[chr], endPosition: +pos };
     }
     else if (alt === '<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];
+        const chr2 = feature.get('INFO')?.CHR2?.[0];
+        const end = feature.get('INFO')?.END?.[0];
+        return {
+            endBlock: blocksForRefs[chr2],
+            endPosition: Number.parseInt(end, 10),
+        };
     }
-    else if (svType === 'mate') {
-        const mate = feature.get('mate');
-        const chr2 = mate.refName;
-        endPosition = mate.start;
-        endBlock = blocksForRefs[chr2];
+    else if (mate) {
+        return { endBlock: blocksForRefs[mate.refName], endPosition: mate.start };
     }
-    else {
-        endBlock = startBlock;
-        endPosition = feature.get('end');
+    return { endBlock: startBlock, endPosition: feature.get('end') };
+}
+const Chord = observer(function Chord({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }) {
+    const [hovered, setHovered] = useState(false);
+    const startBlock = blocksForRefs[feature.get('refName')];
+    if (!startBlock) {
+        return null;
     }
-    if (endBlock) {
-        const startRadians = bpToRadians(startBlock, startPos);
-        const endRadians = bpToRadians(endBlock, endPosition);
-        const startXY = polarToCartesian(radius, startRadians);
-        const endXY = polarToCartesian(radius, endRadians);
-        const controlXY = polarToCartesian(bezierRadius, (endRadians + startRadians) / 2);
-        const strokeColor = selected
-            ? readConfObject(config, 'strokeColorSelected', { feature })
-            : readConfObject(config, 'strokeColor', { feature });
-        const hoverStrokeColor = readConfObject(config, 'strokeColorHover', {
-            feature,
-        });
-        return (_jsx("path", { "data-testid": `chord-${feature.id()}`, cursor: "crosshair", fill: "none", d: ['M', ...startXY, 'Q', ...controlXY, ...endXY].join(' '), ...getStrokeProps(hovered ? hoverStrokeColor : strokeColor), strokeWidth: hovered ? 3 : 1, onClick: evt => {
-                onClick(feature, startBlock.region, endBlock.region, evt);
-            }, onMouseOver: () => {
-                if (!selected) {
-                    setHovered(true);
-                }
-            }, onMouseOut: () => {
-                if (!selected) {
-                    setHovered(false);
-                }
-            } }));
+    const startPos = feature.get('start');
+    const { endBlock, endPosition } = getEndpoint(feature, blocksForRefs, startBlock);
+    if (!endBlock) {
+        return null;
     }
-    return null;
+    const startRadians = bpToRadians(startBlock, startPos);
+    const endRadians = bpToRadians(endBlock, endPosition);
+    const [x1, y1] = polarToCartesian(radius, startRadians);
+    const [x2, y2] = polarToCartesian(radius, endRadians);
+    const [cx, cy] = polarToCartesian(bezierRadius, (endRadians + startRadians) / 2);
+    const stroke = readConfObject(config, hovered
+        ? 'strokeColorHover'
+        : selected
+            ? 'strokeColorSelected'
+            : 'strokeColor', { feature });
+    return (_jsx("path", { "data-testid": `chord-${feature.id()}`, cursor: "crosshair", fill: "none", d: `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`, ...getStrokeProps(stroke), strokeWidth: hovered ? 3 : 1, onClick: evt => {
+            onClick(feature, startBlock.region, endBlock.region, evt);
+        }, onMouseOver: () => {
+            setHovered(true);
+        }, onMouseOut: () => {
+            setHovered(false);
+        } }));
 });
 export default Chord;

package/esm/StructuralVariantChordRenderer/ReactComponent.d.ts

@@ -1,7 +1,7 @@
-import type { AnyRegion, Block } from './types';
+import type { AnyRegion, Block } from './types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature } from '@jbrowse/core/util';
-declare const StructuralVariantChordsReactComponent: ({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }: {
+declare const SVChordsReactComponent: ({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }: {
     features: Map<string, Feature>;
     radius: number;
     config: AnyConfigurationModel;
@@ -13,4 +13,4 @@ declare const StructuralVariantChordsReactComponent: ({ features, config, blockD
     bezierRadius: number;
     onChordClick: (feature: Feature, reg: AnyRegion, endBlock: AnyRegion, evt: unknown) => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export default StructuralVariantChordsReactComponent;
+export default SVChordsReactComponent;

package/esm/StructuralVariantChordRenderer/ReactComponent.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { observer } from 'mobx-react';
-import Chord from './Chord';
-const StructuralVariantChordsReactComponent = observer(function ({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }) {
+import Chord from "./Chord.js";
+const SVChordsReactComponent = observer(function SVChordsReactComponent({ features, config, blockDefinitions, radius, bezierRadius, displayModel, onChordClick, }) {
     const { selectedFeatureId } = displayModel || {};
     const blocksForRefsMemo = useMemo(() => {
         const blocksForRefs = {};
@@ -22,4 +22,4 @@ const StructuralVariantChordsReactComponent = observer(function ({ features, con
             return (_jsx(Chord, { feature: feature, config: config, radius: radius, bezierRadius: bezierRadius, blocksForRefs: blocksForRefsMemo, selected: selected, onClick: onChordClick }, id));
         }) }));
 });
-export default StructuralVariantChordsReactComponent;
+export default SVChordsReactComponent;

package/esm/StructuralVariantChordRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     strokeColor: {
         type: string;
         description: string;
@@ -17,5 +17,5 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         defaultValue: string;
         contextVariable: string[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default configSchema;

package/esm/StructuralVariantChordRenderer/index.js

@@ -1,11 +1,11 @@
+import { lazy } from 'react';
 import ChordRendererType from '@jbrowse/core/pluggableElementTypes/renderers/CircularChordRendererType';
-import ReactComponent from './ReactComponent';
-import configSchema from './configSchema';
+import configSchema from "./configSchema.js";
 export default function StructuralVariantChordRendererF(pluginManager) {
     pluginManager.addRendererType(() => new ChordRendererType({
         name: 'StructuralVariantChordRenderer',
         displayName: 'SV chord renderer',
-        ReactComponent,
+        ReactComponent: lazy(() => import("./ReactComponent.js")),
         configSchema,
         pluginManager,
     }));

package/esm/Tooltip.js

@@ -1,8 +1,8 @@
 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 { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     hoverVertical: {
         background: '#333',
@@ -18,7 +18,7 @@ const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, off
     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;
+    const y = useClientY ? clientMouseCoord[1] : 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,

package/esm/VariantFeatureWidget/AltFormatter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { getMinimalDesc } from '../VcfFeature/util';
+import { getMinimalDesc } from "../VcfFeature/util.js";
 export default function AltFormatter({ value, refString, }) {
     const [show, setShow] = useState(false);
     const alt = useMemo(() => getMinimalDesc(refString, value), [refString, value]);

package/esm/VariantFeatureWidget/Formatter.js

@@ -1,11 +1,11 @@
 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: () => {
+    return display.length > 100 ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: async () => {
+                    const { default: copy } = await import('copy-to-clipboard');
                     copy(display);
                     setCopied(true);
                     setTimeout(() => {

package/esm/VariantFeatureWidget/LaunchBreakendPanel/BreakpointSplitViewChoiceDialog.d.ts

@@ -0,0 +1 @@
+export { BreakpointSplitViewChoiceDialog as default } from '@jbrowse/sv-core';

package/esm/VariantFeatureWidget/LaunchBreakendPanel/BreakpointSplitViewChoiceDialog.js

@@ -0,0 +1 @@
+export { BreakpointSplitViewChoiceDialog as default } from '@jbrowse/sv-core';

package/esm/VariantFeatureWidget/LaunchBreakendPanel/LaunchBreakendPanel.d.ts

@@ -1,4 +1,4 @@
-import type { VariantFeatureWidgetModel } from '../stateModelFactory';
+import type { VariantFeatureWidgetModel } from '../stateModelFactory.ts';
 import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function LaunchBreakendPanel(props: {
     locStrings: string[];

package/esm/VariantFeatureWidget/LaunchBreakendPanel/LaunchBreakendPanel.js

@@ -2,18 +2,17 @@ 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 { getAssemblyName } from '@jbrowse/sv-core';
 import { Link, Typography } from '@mui/material';
-const BreakendMultiLevelOptionDialog = lazy(() => import('./BreakendMultiLevelOptionDialog'));
-const BreakendSingleLevelOptionDialog = lazy(() => import('./BreakendSingleLevelOptionDialog'));
+const BreakpointSplitViewChoiceDialog = lazy(() => import("./BreakpointSplitViewChoiceDialog.js"));
 function LocStringList({ locStrings, model, }) {
     const session = getSession(model);
     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);
+                                        view.navToLocString?.(locString);
                                     }
                                     else {
                                         throw new Error('No view associated with this feature detail panel anymore');
@@ -26,37 +25,23 @@ function LocStringList({ locStrings, model, }) {
                             }, 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 (_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 => {
+    const assemblyName = getAssemblyName(model.view);
+    return assemblyName ? (_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,
+                                    BreakpointSplitViewChoiceDialog,
                                     {
                                         handleClose,
                                         session,
                                         feature: simpleFeature,
-                                        stableViewId: `${model.id}_${assemblyName}_breakpointsplitview_multilevel`,
+                                        stableViewId: `${model.id}_${assemblyName}_breakpointsplitview`,
                                         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)))) })] }));
+                            }, children: "(breakpoint split view)" })] }, locString))) })] })) : null;
 }
 export default function LaunchBreakendPanel(props) {
     const { model, locStrings, feature } = props;