@jbrowse/plugin-variants 2.18.0 → 3.0.1

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.js

@@ -0,0 +1,96 @@
+import { getColorAlleleCount, getColorPhased, getColorPhasedWithPhaseSet, } from '../shared/multiVariantColor';
+import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../util';
+const fudgeFactor = 0.6;
+const f2 = fudgeFactor / 2;
+function drawColorAlleleCount(alleles, ctx, x, y, w, h) {
+    ctx.fillStyle = getColorAlleleCount(alleles);
+    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+}
+function drawPhased(alleles, ctx, x, y, w, h, HP, PS) {
+    ctx.fillStyle =
+        PS !== undefined
+            ? getColorPhasedWithPhaseSet(alleles, HP, PS)
+            : getColorPhased(alleles, HP);
+    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+}
+export function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }) {
+    var _a, _b;
+    const { renderingMode: renderingMode, minorAlleleFrequencyFilter, sources, features, } = renderArgs;
+    const { statusCallback = () => { } } = renderArgs;
+    statusCallback('Drawing variant matrix');
+    const h = canvasHeight / sources.length;
+    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(features.values(), minorAlleleFrequencyFilter);
+    const arr = [];
+    const m = mafs.length;
+    const w = canvasWidth / m;
+    for (let i = 0; i < m; i++) {
+        const arr2 = [];
+        const f = mafs[i];
+        const hasPhaseSet = f.get('format').includes('PS');
+        if (hasPhaseSet) {
+            const samp = f.get('samples');
+            const x = (i / mafs.length) * canvasWidth;
+            const sln = sources.length;
+            for (let j = 0; j < sln; j++) {
+                const y = (j / sln) * canvasHeight;
+                const { name, HP } = sources[j];
+                const s = samp[name];
+                if (s) {
+                    const genotype = (_a = s.GT) === null || _a === void 0 ? void 0 : _a[0];
+                    if (genotype) {
+                        arr2.push(genotype);
+                        const isPhased = genotype.includes('|');
+                        if (renderingMode === 'phased') {
+                            if (isPhased) {
+                                const PS = (_b = s.PS) === null || _b === void 0 ? void 0 : _b[0];
+                                const alleles = genotype.split('|');
+                                drawPhased(alleles, ctx, x, y, w, h, HP, PS);
+                            }
+                            else {
+                                ctx.fillStyle = 'black';
+                                ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+                            }
+                        }
+                        else {
+                            const alleles = genotype.split(/[/|]/);
+                            drawColorAlleleCount(alleles, ctx, x, y, w, h);
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            const samp = f.get('genotypes');
+            const x = (i / mafs.length) * canvasWidth;
+            const sln = sources.length;
+            for (let j = 0; j < sln; j++) {
+                const y = (j / sln) * canvasHeight;
+                const { name, HP } = sources[j];
+                const genotype = samp[name];
+                if (genotype) {
+                    arr2.push(genotype);
+                    const isPhased = genotype.includes('|');
+                    if (renderingMode === 'phased') {
+                        if (isPhased) {
+                            const alleles = genotype.split('|');
+                            drawPhased(alleles, ctx, x, y, w, h, HP);
+                        }
+                        else {
+                            ctx.fillStyle = 'black';
+                            ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+                        }
+                    }
+                    else {
+                        const alleles = genotype.split(/[/|]/);
+                        drawColorAlleleCount(alleles, ctx, x, y, w, h);
+                    }
+                }
+            }
+        }
+        arr.push(arr2);
+    }
+    return {
+        mafs,
+        arr,
+    };
+}

package/esm/MultiLinearVariantMatrixRenderer/types.d.ts

@@ -0,0 +1,15 @@
+import type { Source } from '../types';
+import type { RenderArgsDeserialized as BoxRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+import type { Feature } from '@jbrowse/core/util';
+export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
+    sources: Source[];
+    minorAlleleFrequencyFilter: number;
+    highResolutionScaling: number;
+    height: number;
+    renderingMode: string;
+}
+export interface RenderArgsDeserializedWithFeaturesAndLayout extends RenderArgsDeserialized {
+    sources: Source[];
+    features: Map<string, Feature>;
+    renderingMode: string;
+}

package/esm/MultiLinearVariantMatrixRenderer/types.js

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

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.d.ts

@@ -1,22 +1,6 @@
 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 { MultiRenderArgsDeserialized } from './types';
 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<{
@@ -25,14 +9,14 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         width: number;
         containsNoTransferables: boolean;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<string, Feature>;
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         features: Map<string, Feature>;
@@ -40,9 +24,8 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         width: number;
         containsNoTransferables: boolean;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: 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

@@ -1,6 +1,5 @@
 import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-import { featureSpanPx, renderToAbstractCanvas } from '@jbrowse/core/util';
-import { getCol } from '../util';
+import { renderToAbstractCanvas } from '@jbrowse/core/util';
 export default class MultiVariantBaseRenderer extends FeatureRendererType {
     constructor() {
         super(...arguments);
@@ -11,13 +10,11 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         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 { makeImageData } = await import('./makeImageData');
+        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData(ctx, {
+            ...renderProps,
+            features,
+        }));
         const results = await super.render({
             ...renderProps,
             ...rest,
@@ -34,21 +31,4 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
             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

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { Source } from '../util';
+import RBush from 'rbush';
+import type { Source } from '../types';
 import type { Feature } from '@jbrowse/core/util';
 import type { Region } from '@jbrowse/core/util/types';
 declare const MultiVariantRendering: (props: {
@@ -11,8 +11,12 @@ declare const MultiVariantRendering: (props: {
     sources: Source[];
     scrollTop: number;
     totalHeight: number;
+    rbush: RBush<{
+        genotype: string;
+    }>;
+    displayModel: any;
     onMouseLeave?: (event: React.MouseEvent) => void;
     onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void;
     onFeatureClick?: (event: React.MouseEvent, arg?: Feature) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MultiVariantRendering;

package/esm/MultiLinearVariantRenderer/MultiVariantRendering.js

@@ -1,18 +1,47 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
+import RBush from 'rbush';
 const MultiVariantRendering = observer(function (props) {
     const { totalHeight, scrollTop } = props;
+    const { rbush, displayModel } = props;
     const ref = useRef(null);
-    return (React.createElement("div", { ref: ref, style: {
+    const rbush2 = useMemo(() => new RBush().fromJSON(rbush), [rbush]);
+    function getFeatureUnderMouse(eventClientX, eventClientY) {
+        var _a;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (ref.current) {
+            const r = ref.current.getBoundingClientRect();
+            offsetX = eventClientX - r.left;
+            offsetY = eventClientY - r.top;
+        }
+        const ret = rbush2.search({
+            minX: offsetX,
+            maxX: offsetX + 3,
+            minY: offsetY,
+            maxY: offsetY + 3,
+        });
+        return (_a = ret[0]) === null || _a === void 0 ? void 0 : _a.genotype;
+    }
+    return (_jsx("div", { ref: ref, onMouseMove: e => {
+            var _a;
+            return (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, getFeatureUnderMouse(e.clientX, e.clientY));
+        }, onMouseLeave: () => {
+            var _a;
+            (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, undefined);
+        }, onMouseOut: () => {
+            var _a;
+            (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, undefined);
+        }, style: {
             overflow: 'visible',
             position: 'relative',
             height: totalHeight,
-        } },
-        React.createElement(PrerenderedCanvas, { ...props, style: {
+        }, children: _jsx(PrerenderedCanvas, { ...props, style: {
                 position: 'absolute',
                 left: 0,
                 top: scrollTop,
-            } })));
+            } }) }));
 });
 export default MultiVariantRendering;

package/esm/MultiLinearVariantRenderer/configSchema.d.ts

@@ -1,34 +1,2 @@
-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>>;
+declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default configSchema;

package/esm/MultiLinearVariantRenderer/configSchema.js

@@ -1,8 +1,6 @@
 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/makeImageData.d.ts

@@ -0,0 +1,4 @@
+import type { MultiRenderArgsDeserialized } from './types';
+export declare function makeImageData(ctx: CanvasRenderingContext2D, props: MultiRenderArgsDeserialized): Promise<{
+    rbush: any;
+}>;

package/esm/MultiLinearVariantRenderer/makeImageData.js

@@ -0,0 +1,61 @@
+import { featureSpanPx } from '@jbrowse/core/util';
+import RBush from 'rbush';
+import { getColorAlleleCount, getColorPhased, } from '../shared/multiVariantColor';
+import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../util';
+const fudgeFactor = 0.6;
+const f2 = fudgeFactor / 2;
+function drawColorAlleleCount(alleles, ctx, x, y, w, h) {
+    ctx.fillStyle = getColorAlleleCount(alleles);
+    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+}
+function drawPhased(alleles, ctx, x, y, w, h, HP) {
+    ctx.fillStyle = getColorPhased(alleles, HP);
+    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+}
+export async function makeImageData(ctx, props) {
+    const { scrollTop, minorAlleleFrequencyFilter, sources, rowHeight, features, regions, bpPerPx, renderingMode, } = props;
+    const region = regions[0];
+    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(features.values(), minorAlleleFrequencyFilter);
+    const rbush = new RBush();
+    for (const feature of mafs) {
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        const w = Math.max(Math.round(rightPx - leftPx), 2);
+        const samp = feature.get('genotypes');
+        let y = -scrollTop;
+        const s = sources.length;
+        for (let j = 0; j < s; j++) {
+            const { name, HP } = sources[j];
+            const genotype = samp[name];
+            const x = Math.floor(leftPx);
+            const h = Math.max(rowHeight, 1);
+            if (genotype) {
+                rbush.insert({
+                    minX: x - f2,
+                    maxX: x + w + f2,
+                    minY: y - f2,
+                    maxY: y + h + f2,
+                    genotype,
+                });
+                const isPhased = genotype.includes('|');
+                if (renderingMode === 'phased') {
+                    if (isPhased) {
+                        const alleles = genotype.split('|');
+                        drawPhased(alleles, ctx, x, y, w, h, HP);
+                    }
+                    else {
+                        ctx.fillStyle = 'black';
+                        ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+                    }
+                }
+                else {
+                    const alleles = genotype.split(/[/|]/);
+                    drawColorAlleleCount(alleles, ctx, x, y, w, h);
+                }
+            }
+            y += rowHeight;
+        }
+    }
+    return {
+        rbush: rbush.toJSON(),
+    };
+}

package/esm/MultiLinearVariantRenderer/types.d.ts

@@ -0,0 +1,19 @@
+import type { Source } from '../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;
+}

package/esm/MultiLinearVariantRenderer/types.js

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

package/esm/MultiVariantBaseRenderer.d.ts

@@ -1,5 +1,5 @@
 import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-import type { Source } from './util';
+import type { Source } from './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';
@@ -23,14 +23,14 @@ export default abstract class MultiVariantBaseRenderer extends FeatureRendererTy
         width: number;
         containsNoTransferables: boolean;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<string, Feature>;
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         features: Map<string, Feature>;
@@ -38,7 +38,7 @@ export default abstract class MultiVariantBaseRenderer extends FeatureRendererTy
         width: number;
         containsNoTransferables: boolean;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
     abstract draw<T extends RenderArgsDeserializedWithFeatures>(ctx: CanvasRenderingContext2D, props: T): Promise<Record<string, unknown> | undefined>;

package/esm/StructuralVariantChordRenderer/Chord.d.ts

@@ -1,23 +1,6 @@
-import React from 'react';
+import type { AnyRegion, Block } from './types';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import type { Feature } from '@jbrowse/core/util';
-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;
-}
 declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }: {
     feature: Feature;
     blocksForRefs: Record<string, Block>;
@@ -26,5 +9,5 @@ declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, se
     bezierRadius: number;
     selected: boolean;
     onClick: (feat: Feature, reg: AnyRegion, end: AnyRegion, evt: unknown) => void;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Chord;

package/esm/StructuralVariantChordRenderer/Chord.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { parseBreakend } from '@gmod/vcf';
 import { readConfObject } from '@jbrowse/core/configuration';
 import { getStrokeProps, polarToCartesian } from '@jbrowse/core/util';
@@ -62,7 +63,7 @@ const Chord = observer(function Chord({ feature, blocksForRefs, radius, config,
         const hoverStrokeColor = readConfObject(config, 'strokeColorHover', {
             feature,
         });
-        return (React.createElement("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 => {
+        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) {

package/esm/StructuralVariantChordRenderer/ReactComponent.d.ts

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

package/esm/StructuralVariantChordRenderer/ReactComponent.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+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, }) {
@@ -15,10 +16,10 @@ const StructuralVariantChordsReactComponent = observer(function ({ features, con
         }
         return blocksForRefs;
     }, [blockDefinitions]);
-    return (React.createElement("g", { "data-testid": "structuralVariantChordRenderer" }, [...features.values()].map(feature => {
-        const id = feature.id();
-        const selected = String(selectedFeatureId) === String(id);
-        return (React.createElement(Chord, { key: id, feature: feature, config: config, radius: radius, bezierRadius: bezierRadius, blocksForRefs: blocksForRefsMemo, selected: selected, onClick: onChordClick }));
-    })));
+    return (_jsx("g", { "data-testid": "structuralVariantChordRenderer", children: [...features.values()].map(feature => {
+            const id = feature.id();
+            const selected = String(selectedFeatureId) === String(id);
+            return (_jsx(Chord, { feature: feature, config: config, radius: radius, bezierRadius: bezierRadius, blocksForRefs: blocksForRefsMemo, selected: selected, onClick: onChordClick }, id));
+        }) }));
 });
 export default StructuralVariantChordsReactComponent;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { Feature } from '@jbrowse/core/util';
 type Coord = [number, number];
 export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
@@ -15,5 +15,5 @@ declare const Tooltip: ({ model, height, clientMouseCoord, offsetMouseCoord, cli
     offsetMouseCoord: Coord;
     clientRect?: DOMRect;
     TooltipContents: TooltipContentsComponent;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default Tooltip;

package/esm/Tooltip.js

@@ -1,4 +1,5 @@
-import React, { Suspense } from 'react';
+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';
@@ -18,13 +19,9 @@ const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, off
     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;
+    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/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 type { VariantFeatureWidgetModel } from './stateModelFactory';
 import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
-export default function BreakendPanel(props: {
+export default function LaunchBreakendPanel(props: {
     locStrings: string[];
     model: VariantFeatureWidgetModel;
     feature: SimpleFeatureSerialized;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;