@jbrowse/plugin-variants 3.6.4 → 3.7.0

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.js

@@ -50,7 +50,8 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                                 }
                             }
                             else {
-                                let c = colorCache[genotype];
+                                const cacheKey = `${genotype}:${mostFrequentAlt}`;
+                                let c = colorCache[cacheKey];
                                 if (c === undefined) {
                                     let alt = 0;
                                     let uncalled = 0;
@@ -74,7 +75,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                                         }
                                     }
                                     c = getColorAlleleCount(ref, alt, alt2, uncalled, total, true);
-                                    colorCache[genotype] = c;
+                                    colorCache[cacheKey] = c;
                                 }
                                 if (c) {
                                     drawColorAlleleCount(c, ctx, x, y, w, h);
@@ -106,7 +107,8 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                             }
                         }
                         else {
-                            let c = colorCache[genotype];
+                            const cacheKey = `${genotype}:${mostFrequentAlt}`;
+                            let c = colorCache[cacheKey];
                             if (c === undefined) {
                                 let alt = 0;
                                 let uncalled = 0;
@@ -130,7 +132,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                                     }
                                 }
                                 c = getColorAlleleCount(ref, alt, alt2, uncalled, total, true);
-                                colorCache[genotype] = c;
+                                colorCache[cacheKey] = c;
                             }
                             if (c) {
                                 drawColorAlleleCount(c, ctx, x, y, w, h);

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.d.ts

@@ -8,7 +8,8 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        rbush: any;
+        flatbush: ArrayBufferLike;
+        items: any[];
         featureGenotypeMap: {
             [k: string]: {
                 alt: any;
@@ -26,7 +27,8 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        rbush: any;
+        flatbush: ArrayBufferLike;
+        items: any[];
         featureGenotypeMap: {
             [k: string]: {
                 alt: any;
@@ -44,7 +46,8 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
-        rbush: any;
+        flatbush: ArrayBufferLike;
+        items: any[];
         featureGenotypeMap: {
             [k: string]: {
                 alt: any;

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

@@ -1,7 +1,11 @@
 import type { Source } from '../../shared/types';
 import type { Feature } from '@jbrowse/core/util';
 import type { Region } from '@jbrowse/core/util/types';
-type SerializedRBush = any;
+interface Item {
+    genotype: string;
+    featureId: string;
+    bpLen: number;
+}
 interface MinimizedVariantRecord {
     alt: string[];
     ref: string;
@@ -19,7 +23,8 @@ declare const MultiVariantRendering: (props: {
     scrollTop: number;
     featureGenotypeMap: Record<string, MinimizedVariantRecord>;
     totalHeight: number;
-    rbush: SerializedRBush;
+    flatbush: any;
+    items: Item[];
     displayModel: any;
     onMouseLeave?: (event: React.MouseEvent) => void;
     onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void;

package/esm/MultiLinearVariantRenderer/components/MultiLinearVariantRendering.js

@@ -2,33 +2,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { getBpDisplayStr } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
 import { observer } from 'mobx-react';
-import RBush from 'rbush';
 import { minElt } from './util';
 import { makeSimpleAltString } from '../../VcfFeature/util';
 const MultiVariantRendering = observer(function (props) {
-    const { featureGenotypeMap, totalHeight, scrollTop } = props;
-    const { rbush, displayModel } = props;
+    const { flatbush, items, displayModel, featureGenotypeMap, totalHeight, scrollTop, } = props;
     const ref = useRef(null);
-    const rbush2 = useMemo(() => new RBush().fromJSON(rbush), [rbush]);
+    const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush]);
     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 - ((displayModel === null || displayModel === void 0 ? void 0 : displayModel.scrollTop) || 0);
+        if (!ref.current) {
+            return;
         }
-        const x = rbush2.search({
-            minX: offsetX,
-            maxX: offsetX + 1,
-            minY: offsetY,
-            maxY: offsetY + 1,
-        });
+        const rect = ref.current.getBoundingClientRect();
+        offsetX = eventClientX - rect.left;
+        offsetY = eventClientY - rect.top - ((displayModel === null || displayModel === void 0 ? void 0 : displayModel.scrollTop) || 0);
+        const x = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
         if (x.length) {
-            const { minX, minY, maxX, maxY, genotype, featureId, ...rest } = minElt(x, elt => elt.maxX - elt.minX);
-            const ret = featureGenotypeMap[featureId];
-            if (ret) {
+            const res = minElt(x, idx => { var _a, _b; return (_b = (_a = items[idx]) === null || _a === void 0 ? void 0 : _a.bpLen) !== null && _b !== void 0 ? _b : 0; });
+            const { bpLen, genotype, featureId, ...rest } = (_a = items[res]) !== null && _a !== void 0 ? _a : {};
+            const ret = featureId !== undefined ? featureGenotypeMap[featureId] : undefined;
+            if (ret && genotype) {
                 const { ref, alt, name, description, length } = ret;
                 const alleles = makeSimpleAltString(genotype, ref, alt);
                 return {

package/esm/MultiLinearVariantRenderer/makeImageData.d.ts

@@ -1,6 +1,7 @@
 import type { MultiRenderArgsDeserialized } from './types';
 export declare function makeImageData(ctx: CanvasRenderingContext2D, props: MultiRenderArgsDeserialized): Promise<{
-    rbush: any;
+    flatbush: ArrayBufferLike;
+    items: any[];
     featureGenotypeMap: {
         [k: string]: {
             alt: any;

package/esm/MultiLinearVariantRenderer/makeImageData.js

@@ -1,6 +1,6 @@
 import { featureSpanPx, forEachWithStopTokenCheck, updateStatus, } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
 import { checkStopToken } from '@jbrowse/core/util/stopToken';
-import RBush from 'rbush';
 import { f2 } from '../shared/constants';
 import { drawColorAlleleCount, getColorAlleleCount, } from '../shared/drawAlleleCount';
 import { drawPhased } from '../shared/drawPhased';
@@ -17,11 +17,14 @@ export async function makeImageData(ctx, props) {
         lengthCutoffFilter,
     }));
     checkStopToken(stopToken);
-    const rbush = new RBush();
+    const coords = [];
+    const items = [];
+    const colorCache = {};
     await updateStatus('Drawing variants', statusCallback, () => {
         forEachWithStopTokenCheck(mafs, stopToken, ({ mostFrequentAlt, feature }) => {
             const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-            const flen = feature.get('end') - feature.get('start');
+            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;
@@ -37,15 +40,13 @@ export async function makeImageData(ctx, props) {
                         if (isPhased) {
                             const alleles = genotype.split('|');
                             if (drawPhased(alleles, ctx, x, y, w, h, HP, undefined, referenceDrawingMode === 'draw')) {
-                                rbush.insert({
-                                    minX: x,
-                                    maxX: x + w,
-                                    minY: y,
-                                    maxY: y + h,
-                                    genotype,
+                                items.push({
                                     name,
-                                    featureId: feature.id(),
+                                    genotype,
+                                    featureId,
+                                    bpLen,
                                 });
+                                coords.push(x, y, x + w, y + h);
                             }
                         }
                         else {
@@ -57,14 +58,14 @@ export async function makeImageData(ctx, props) {
                 }
             }
             else {
-                const colorCache = {};
                 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) {
-                        let c = colorCache[genotype];
+                        const cacheKey = `${genotype}:${mostFrequentAlt}`;
+                        let c = colorCache[cacheKey];
                         if (c === undefined) {
                             let alt = 0;
                             let uncalled = 0;
@@ -88,19 +89,17 @@ export async function makeImageData(ctx, props) {
                                 }
                             }
                             c = getColorAlleleCount(ref, alt, alt2, uncalled, total, referenceDrawingMode === 'draw');
-                            colorCache[genotype] = c;
+                            colorCache[cacheKey] = c;
                         }
                         if (c) {
-                            drawColorAlleleCount(c, ctx, x, y, w, h, feature.get('type'), feature.get('strand'), flen > 5 ? 0.75 : 1);
-                            rbush.insert({
-                                minX: x,
-                                maxX: x + w,
-                                minY: y,
-                                maxY: y + h,
-                                genotype,
+                            drawColorAlleleCount(c, ctx, x, y, w, h, feature.get('type'), feature.get('strand'), bpLen > 5 ? 0.75 : 1);
+                            items.push({
                                 name,
-                                featureId: feature.id(),
+                                genotype,
+                                featureId,
+                                bpLen,
                             });
+                            coords.push(x, y, x + w, y + h);
                         }
                     }
                     y += rowHeight;
@@ -108,8 +107,19 @@ export async function makeImageData(ctx, props) {
             }
         });
     });
+    const flatbush = new Flatbush(Math.max(items.length, 1));
+    if (items.length) {
+        for (let i = 0; i < coords.length; i += 4) {
+            flatbush.add(coords[i], coords[i + 1], coords[i + 2], coords[i + 3]);
+        }
+    }
+    else {
+        flatbush.add(0, 0);
+    }
+    flatbush.finish();
     return {
-        rbush: rbush.toJSON(),
+        flatbush: flatbush.data,
+        items,
         featureGenotypeMap: Object.fromEntries(mafs.map(({ feature }) => [
             feature.id(),
             {

package/esm/StructuralVariantChordRenderer/ReactComponent.js

@@ -18,7 +18,7 @@ const StructuralVariantChordsReactComponent = observer(function ({ features, con
     }, [blockDefinitions]);
     return (_jsx("g", { "data-testid": "structuralVariantChordRenderer", children: [...features.values()].map(feature => {
             const id = feature.id();
-            const selected = String(selectedFeatureId) === String(id);
+            const selected = selectedFeatureId === id;
             return (_jsx(Chord, { feature: feature, config: config, radius: radius, bezierRadius: bezierRadius, blocksForRefs: blocksForRefsMemo, selected: selected, onClick: onChordClick }, id));
         }) }));
 });

package/esm/VariantFeatureWidget/AltFormatter.d.ts

@@ -1,4 +1,4 @@
-export default function AltFormatter({ value, ref, }: {
+export default function AltFormatter({ value, refString, }: {
     value: string;
-    ref: string;
+    refString: string;
 }): string | import("react/jsx-runtime").JSX.Element;

package/esm/VariantFeatureWidget/AltFormatter.js

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

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -53,7 +53,7 @@ const FeatDefined = observer(function (props) {
                     ...variantFieldDescriptions,
                     ...descriptions,
                 }, formatter: (value, key) => {
-                    return key === 'ALT' ? (_jsx(AltFormatter, { value: `${value}`, ref: REF })) : (_jsx(Formatter, { value: value }));
+                    return key === 'ALT' ? (_jsx(AltFormatter, { value: `${value}`, refString: REF })) : (_jsx(Formatter, { value: value }));
                 }, ...props }), _jsxs(Suspense, { fallback: null, children: [_jsx(CsqPanel, { feature: rest, descriptions: descriptions }), _jsx(AnnPanel, { feature: rest, descriptions: descriptions }), _jsx(LaunchBreakendWidgetArea, { model: model })] }), _jsx(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })] }));
 });
 const VariantFeatureWidget = observer(function (props) {

package/esm/VariantFeatureWidget/stateModelFactory.d.ts

@@ -18,14 +18,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         upperCaseCDS: boolean;
         charactersPerRow: number;
         feature: import("@jbrowse/core/util").SimpleFeatureSerialized | undefined;
-        mode: string;
+        mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein";
     } & {
         setFeature(f: import("@jbrowse/core/util").SimpleFeatureSerialized): void;
         setUpDownBp(f: number): void;
         setIntronBp(f: number): void;
         setUpperCaseCDS(f: boolean): void;
         setShowCoordinates(f: "none" | "relative" | "genomic"): void;
-        setMode(mode: string): void;
+        setMode(mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein"): void;
     } & {
         readonly showCoordinates: boolean;
         readonly showGenomicCoordsOption: boolean;
@@ -69,14 +69,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         upperCaseCDS: boolean;
         charactersPerRow: number;
         feature: import("@jbrowse/core/util").SimpleFeatureSerialized | undefined;
-        mode: string;
+        mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein";
     } & {
         setFeature(f: import("@jbrowse/core/util").SimpleFeatureSerialized): void;
         setUpDownBp(f: number): void;
         setIntronBp(f: number): void;
         setUpperCaseCDS(f: boolean): void;
         setShowCoordinates(f: "none" | "relative" | "genomic"): void;
-        setMode(mode: string): void;
+        setMode(mode: "" | "genomic" | "gene" | "gene_collapsed_intron" | "gene_updownstream" | "cdna" | "cds" | "genomic_sequence_updownstream" | "protein"): void;
     } & {
         readonly showCoordinates: boolean;
         readonly showGenomicCoordsOption: boolean;

package/esm/VcfAdapter/VcfAdapter.d.ts

@@ -1,15 +1,15 @@
-import IntervalTree from '@flatten-js/interval-tree';
+import { IntervalTree } from '@flatten-js/interval-tree';
 import VcfParser from '@gmod/vcf';
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
 import type { BaseOptions } from '@jbrowse/core/data_adapters/BaseAdapter';
 import type { Feature, Region } from '@jbrowse/core/util';
 type StatusCallback = (arg: string) => void;
 export default class VcfAdapter extends BaseFeatureDataAdapter {
-    calculatedIntervalTreeMap: Record<string, IntervalTree>;
+    calculatedIntervalTreeMap: Record<string, IntervalTree<Feature>>;
     vcfFeatures?: Promise<{
         header: string;
         parser: VcfParser;
-        intervalTreeMap: Record<string, (sc?: StatusCallback) => IntervalTree>;
+        intervalTreeMap: Record<string, (sc?: StatusCallback) => IntervalTree<Feature>>;
     }>;
     static capabilities: string[];
     getHeader(): Promise<string>;
@@ -18,13 +18,13 @@ export default class VcfAdapter extends BaseFeatureDataAdapter {
         header: string;
         parser: VcfParser;
         intervalTreeMap: {
-            [k: string]: (sc?: (arg: string) => void) => IntervalTree<any>;
+            [k: string]: (sc?: (arg: string) => void) => IntervalTree<Feature>;
         };
     }>;
     setup(): Promise<{
         header: string;
         parser: VcfParser;
-        intervalTreeMap: Record<string, (sc?: StatusCallback) => IntervalTree>;
+        intervalTreeMap: Record<string, (sc?: StatusCallback) => IntervalTree<Feature>>;
     }>;
     getRefNames(_?: BaseOptions): Promise<string[]>;
     getFeatures(region: Region, opts?: BaseOptions): import("rxjs").Observable<Feature>;

package/esm/VcfAdapter/VcfAdapter.js

@@ -1,4 +1,4 @@
-import IntervalTree from '@flatten-js/interval-tree';
+import { IntervalTree } from '@flatten-js/interval-tree';
 import VcfParser from '@gmod/vcf';
 import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
 import { fetchAndMaybeUnzip } from '@jbrowse/core/util';

package/esm/VcfFeature/index.d.ts

@@ -1,6 +1,6 @@
+import { type Feature } from '@jbrowse/core/util';
 import type VCFParser from '@gmod/vcf';
 import type { Variant } from '@gmod/vcf';
-import type { Feature } from '@jbrowse/core/util';
 export default class VCFFeature implements Feature {
     private variant;
     private parser;

package/esm/VcfFeature/index.js

@@ -1,3 +1,4 @@
+import { max } from '@jbrowse/core/util';
 import { getSOTermAndDescription } from './util';
 function dataFromVariant(variant, parser) {
     const { REF = '', ALT, POS, CHROM, ID } = variant;
@@ -13,15 +14,30 @@ function dataFromVariant(variant, parser) {
     };
 }
 function getEnd(variant) {
-    const { POS, REF = '', ALT } = variant;
-    const isTRA = ALT === null || ALT === void 0 ? void 0 : ALT.includes('<TRA>');
+    var _a;
+    const { POS, REF = '', ALT = [] } = variant;
+    const isTRA = ALT.includes('<TRA>');
     const start = POS - 1;
-    const isSymbolic = ALT === null || ALT === void 0 ? void 0 : ALT.some(f => f.includes('<'));
+    const isSymbolic = ALT.some(f => f.includes('<'));
     if (isSymbolic) {
         const info = variant.INFO;
         if (info.END && !isTRA) {
             return +info.END[0];
         }
+        const lens = [];
+        if (info.SVLEN && !isTRA) {
+            const svlens = info.SVLEN;
+            for (let i = 0; i < svlens.length; i++) {
+                const svlen = svlens[i];
+                if ((_a = ALT[i]) === null || _a === void 0 ? void 0 : _a.startsWith('<INS')) {
+                    lens.push(1);
+                }
+                else {
+                    lens.push(Math.abs(+svlen));
+                }
+            }
+            return start + max(lens);
+        }
     }
     return start + REF.length;
 }

package/esm/shared/MultiVariantBaseModel.d.ts

@@ -186,6 +186,7 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -200,9 +201,22 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -211,6 +225,7 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/shared/SharedVariantMixin.d.ts

@@ -174,6 +174,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
@@ -188,9 +189,22 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
     readonly featureUnderMouse: Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -199,6 +213,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogManual.js

@@ -63,7 +63,7 @@ const ClusterDialogManuals = observer(function ({ model, handleClose, children,
         })();
     }, [model]);
     const results = ret
-        ? `inputMatrix<-matrix(c(${Object.values(ret)
+        ? String.raw `inputMatrix<-matrix(c(${Object.values(ret)
             .map(val => val.join(','))
             .join(',\n')}
 ),nrow=${Object.values(ret).length},byrow=TRUE)
@@ -71,7 +71,7 @@ rownames(inputMatrix)<-c(${Object.keys(ret)
             .map(key => `'${key}'`)
             .join(',')})
 resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
-cat(resultClusters$order,sep='\\n')`
+cat(resultClusters$order,sep='\n')`
         : undefined;
     const resultsTsv = ret
         ? Object.entries(ret)
@@ -102,7 +102,7 @@ cat(resultClusters$order,sep='\\n')`
                                                     complete: 'Complete',
                                                 }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
                                                             setClusterMethod(key);
-                                                        } }), label: val }, key))) })] })) : null, results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+                                                        } }), label: val }, key))) })] })) : null, results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", message: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
                                             setPaste(event.target.value);
                                         }, slotProps: {
                                             input: {

package/esm/shared/components/SetColorDialog.js

@@ -1,49 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
-import { useLocalStorage } from '@jbrowse/core/util';
-import { Button, DialogActions, DialogContent } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import BulkEditPanel from './BulkEditPanel';
-import HelpfulTips from './HelpfulTips';
-import RowPalettizer from './RowPalettizer';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SourcesGrid from './SourcesGrid';
-const useStyles = makeStyles()({
-    content: {
-        minWidth: 800,
-    },
-    fr: {
-        float: 'right',
-        display: 'flex',
-        gap: 8,
-    },
-    textAreaFont: {
-        fontFamily: 'Courier New',
-    },
-});
+import SharedSetColorDialog from './ui/SetColorDialog';
 export default function SetColorDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    const { sources } = model;
-    const [showBulkEditor, setShowBulkEditor] = useState(false);
-    const [currLayout, setCurrLayout] = useState(sources || []);
-    const [showTips, setShowTips] = useLocalStorage('multivariant-showTips', false);
-    return (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-sample variant display - Color/arrangement editor", children: showBulkEditor ? (_jsx(BulkEditPanel, { currLayout: currLayout, onClose: arg => {
-                if (arg) {
-                    setCurrLayout(arg);
-                }
-                setShowBulkEditor(false);
-            } })) : (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { className: classes.content, children: [_jsxs("div", { className: classes.fr, children: [_jsx(Button, { variant: "contained", onClick: () => {
-                                        setShowTips(!showTips);
-                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), _jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
-                                        setShowBulkEditor(!showBulkEditor);
-                                    }, children: "Show Bulk row editor" })] }), showTips ? _jsx(HelpfulTips, {}) : null, _jsx("br", {}), _jsx(RowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout }), _jsx(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
-                                model.clearLayout();
-                                setCurrLayout(model.sources || []);
-                            }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                                setCurrLayout([...(model.sources || [])]);
-                            }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
-                                model.setLayout(currLayout);
-                                handleClose();
-                            }, children: "Submit" })] })] })) }));
+    return (_jsx(SharedSetColorDialog, { model: model, handleClose: handleClose, title: "Multi-sample variant display - Color/arrangement editor", enableBulkEdit: true, enableRowPalettizer: true, showTipsStorageKey: "multivariant-showTips", SourcesGridComponent: SourcesGrid }));
 }

package/esm/shared/components/SetColorDialogBulkEditPanel.d.ts

@@ -0,0 +1,10 @@
+export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }: {
+    currLayout: {
+        name: string;
+        [key: string]: unknown;
+    }[];
+    onClose: (arg?: {
+        name: string;
+        [key: string]: unknown;
+    }[]) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/{BulkEditPanel.js → SetColorDialogBulkEditPanel.js}

@@ -8,7 +8,7 @@ const useStyles = makeStyles()({
         fontFamily: 'Courier New',
     },
 });
-export default function BulkEditPanel({ onClose, currLayout, }) {
+export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
     const { classes } = useStyles();
     const [val, setVal] = useState('');
     const [error, setError] = useState();

package/esm/shared/components/SetColorDialogHelpfulTips.d.ts

@@ -0,0 +1 @@
+export default function SetColorDialogHelpfulTips(): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/{HelpfulTips.js → SetColorDialogHelpfulTips.js}

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export default function HelpfulTips() {
+export default function SetColorDialogHelpfulTips() {
     return (_jsxs(_Fragment, { children: ["Helpful tips", _jsxs("ul", { children: [_jsx("li", { children: "You can select rows in the table with the checkboxes" }), _jsx("li", { children: "Multi-select is enabled with shift-click and control-click" }), _jsx("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), _jsx("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), _jsx("li", { children: "Changes are applied when you hit Submit" }), _jsx("li", { children: "You can click and drag the dialog box to move it on the screen" }), _jsx("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
 }