@jbrowse/plugin-variants 2.18.0 → 3.0.0

package/esm/shared/MultiVariantBaseModel.d.ts

@@ -0,0 +1,341 @@
+import type { SampleInfo, Source } from '../types';
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+import type { Instance } from 'mobx-state-tree';
+export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IType<import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        stopToken: string | undefined;
+        filled: boolean;
+        reactElement: React.ReactElement | undefined;
+        features: Map<string, Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean;
+                status?: string;
+                reactElement?: React.ReactElement;
+            };
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(newStopToken: string): void;
+        setMessage(messageText: string): void;
+        setRendered(props: import("@jbrowse/plugin-linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock").RenderedProps | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+} & {
+    type: import("mobx-state-tree").ISimpleType<"LinearBareDisplay">;
+    configuration: AnyConfigurationSchemaType;
+} & {
+    type: import("mobx-state-tree").ISimpleType<"LinearVariantMatrixDisplay">;
+    layout: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<Source[], Source[], Source[]>, [undefined]>;
+    configuration: AnyConfigurationSchemaType;
+    minorAlleleFrequencyFilter: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    showSidebarLabelsSetting: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    renderingMode: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    rowHeightSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    autoHeight: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+}, {
+    rendererTypeName: string;
+    error: unknown;
+    message: string | undefined;
+} & {
+    readonly RenderingComponent: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll?: () => void;
+        blockState?: Record<string, any>;
+    }>;
+    readonly DisplayBlurb: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    }> | null;
+    readonly adapterConfig: any;
+    readonly parentTrack: any;
+    renderProps(): any;
+    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+    regionCannotBeRendered(): null;
+} & {
+    setMessage(arg?: string): void;
+    setError(error?: unknown): void;
+    setRpcDriverName(rpcDriverName: string): void;
+    reload(): void;
+} & {
+    scrollTop: number;
+} & {
+    readonly height: number;
+} & {
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
+    featureDensityStatsP: undefined | Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    featureDensityStats: undefined | import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats;
+    currStatsBpPerPx: number;
+} & {
+    readonly currentBytesRequested: number;
+    readonly currentFeatureScreenDensity: number;
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
+    readonly maxAllowableBytes: number;
+} & {
+    afterAttach(): void;
+} & {
+    setCurrStatsBpPerPx(n: number): void;
+    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats): void;
+    clearFeatureDensityStats(): void;
+} & {
+    readonly regionTooLarge: boolean;
+    readonly regionTooLargeReason: string;
+} & {
+    readonly statsReadyAndRegionNotTooLarge: boolean;
+    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;
+} & {
+    featureIdUnderMouse: undefined | string;
+    contextMenuFeature: undefined | Feature;
+} & {
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
+    readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
+} & {
+    readonly renderDelay: number;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
+    readonly selectedFeatureId: string | undefined;
+} & {
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
+    readonly featureUnderMouse: Feature | undefined;
+    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;
+} & {
+    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
+    deleteBlock(key: string): void;
+    selectFeature(feature: Feature): void;
+    navToFeature(feature: Feature): void;
+    clearFeatureSelection(): void;
+    setFeatureIdUnderMouse(feature?: string): void;
+    setContextMenuFeature(feature?: Feature): void;
+} & {
+    reload(): Promise<void>;
+} & {
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    renderProps(): any;
+} & {
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
+    afterAttach(): void;
+} & {
+    readonly rendererConfig: {
+        [x: string]: any;
+    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
+                [x: string]: any;
+            } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+        } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+    } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
+    readonly rendererTypeName: any;
+} & {
+    renderProps(): any;
+} & {
+    sourcesLoadingStopToken: string | undefined;
+    featureUnderMouseVolatile: Feature | undefined;
+    sourcesVolatile: Source[] | undefined;
+    featuresVolatile: Feature[] | undefined;
+    hasPhased: boolean;
+    sampleInfo: undefined | Record<string, SampleInfo>;
+    hoveredGenotype: string | undefined;
+} & {
+    setRowHeight(arg: number): void;
+    setHoveredGenotype(arg: string): void;
+    setFeatures(f: Feature[]): void;
+    setLayout(layout: Source[]): void;
+    clearLayout(): void;
+    setSourcesLoading(str: string): void;
+    setSources(sources: Source[]): void;
+    setMafFilter(arg: number): void;
+    setShowSidebarLabels(arg: boolean): void;
+    setPhasedMode(arg: string): void;
+    setAutoHeight(arg: boolean): void;
+    setHasPhased(arg: boolean): void;
+    setSampleInfo(arg: Record<string, SampleInfo>): void;
+} & {
+    readonly preSources: Source[] | undefined;
+    readonly sources: {
+        label: string;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
+} & {
+    readonly rowHeight: number;
+    adapterProps(): any;
+    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        type: string;
+        checked: boolean;
+        onClick: () => void;
+        subMenu?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: ({
+            label: string;
+            disabled: boolean;
+            onClick: () => void;
+            type?: undefined;
+            checked?: undefined;
+        } | {
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+            disabled?: undefined;
+        })[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: ({
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+            disabled?: undefined;
+        } | {
+            label: string;
+            disabled: boolean;
+            checked: boolean;
+            type: string;
+            onClick: () => void;
+        })[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
+    })[];
+} & {
+    readonly canDisplayLabels: boolean;
+    readonly totalHeight: number;
+} & {
+    renderProps(): any;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type MultiVariantBaseStateModel = ReturnType<typeof MultiVariantBaseModelF>;
+export type MultiVariantBaseModel = Instance<MultiVariantBaseStateModel>;

package/esm/shared/MultiVariantBaseModel.js

@@ -0,0 +1,277 @@
+import { lazy } from 'react';
+import { ConfigurationReference } from '@jbrowse/core/configuration';
+import { getSession } from '@jbrowse/core/util';
+import { stopStopToken } from '@jbrowse/core/util/stopToken';
+import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import HeightIcon from '@mui/icons-material/Height';
+import SplitscreenIcon from '@mui/icons-material/Splitscreen';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import deepEqual from 'fast-deep-equal';
+import { types } from 'mobx-state-tree';
+const SetColorDialog = lazy(() => import('../shared/SetColorDialog'));
+const MAFFilterDialog = lazy(() => import('../shared/MAFFilterDialog'));
+const ClusterDialog = lazy(() => import('../shared/ClusterDialog'));
+const SetRowHeightDialog = lazy(() => import('../shared/SetRowHeightDialog'));
+export default function MultiVariantBaseModelF(configSchema) {
+    return types
+        .compose('LinearVariantMatrixDisplay', linearBareDisplayStateModelFactory(configSchema), types.model({
+        type: types.literal('LinearVariantMatrixDisplay'),
+        layout: types.optional(types.frozen(), []),
+        configuration: ConfigurationReference(configSchema),
+        minorAlleleFrequencyFilter: types.optional(types.number, 0.1),
+        showSidebarLabelsSetting: true,
+        renderingMode: types.optional(types.string, 'alleleCount'),
+        rowHeightSetting: types.optional(types.number, 8),
+        autoHeight: true,
+    }))
+        .volatile(() => ({
+        sourcesLoadingStopToken: undefined,
+        featureUnderMouseVolatile: undefined,
+        sourcesVolatile: undefined,
+        featuresVolatile: undefined,
+        hasPhased: false,
+        sampleInfo: undefined,
+        hoveredGenotype: undefined,
+    }))
+        .actions(self => ({
+        setRowHeight(arg) {
+            self.rowHeightSetting = arg;
+        },
+        setHoveredGenotype(arg) {
+            self.hoveredGenotype = arg;
+        },
+        setFeatures(f) {
+            self.featuresVolatile = f;
+        },
+        setLayout(layout) {
+            self.layout = layout;
+        },
+        clearLayout() {
+            self.layout = [];
+        },
+        setSourcesLoading(str) {
+            if (self.sourcesLoadingStopToken) {
+                stopStopToken(self.sourcesLoadingStopToken);
+            }
+            self.sourcesLoadingStopToken = str;
+        },
+        setSources(sources) {
+            if (!deepEqual(sources, self.sourcesVolatile)) {
+                self.sourcesVolatile = sources;
+            }
+        },
+        setMafFilter(arg) {
+            self.minorAlleleFrequencyFilter = arg;
+        },
+        setShowSidebarLabels(arg) {
+            self.showSidebarLabelsSetting = arg;
+        },
+        setPhasedMode(arg) {
+            self.renderingMode = arg;
+        },
+        setAutoHeight(arg) {
+            self.autoHeight = arg;
+        },
+        setHasPhased(arg) {
+            self.hasPhased = arg;
+        },
+        setSampleInfo(arg) {
+            if (!deepEqual(arg, self.sampleInfo)) {
+                self.sampleInfo = arg;
+            }
+        },
+    }))
+        .views(self => ({
+        get preSources() {
+            return self.layout.length ? self.layout : self.sourcesVolatile;
+        },
+        get sources() {
+            var _a, _b;
+            if (this.preSources) {
+                const rows = [];
+                const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+                for (const row of this.preSources) {
+                    if (self.renderingMode === 'phased') {
+                        const info = (_b = self.sampleInfo) === null || _b === void 0 ? void 0 : _b[row.name];
+                        if (info === null || info === void 0 ? void 0 : info.isPhased) {
+                            const ploidy = info.maxPloidy;
+                            for (let i = 0; i < ploidy; i++) {
+                                const id = `${row.name} HP${i}`;
+                                rows.push({
+                                    ...sources[row.name],
+                                    ...row,
+                                    label: id,
+                                    HP: i,
+                                    id: id,
+                                });
+                            }
+                        }
+                    }
+                    else {
+                        rows.push({
+                            ...sources[row.name],
+                            ...row,
+                            label: row.name,
+                            id: row.name,
+                        });
+                    }
+                }
+                return rows;
+            }
+            return undefined;
+        },
+    }))
+        .views(self => {
+        const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
+        return {
+            get rowHeight() {
+                const { sources, autoHeight, rowHeightSetting, height } = self;
+                return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
+            },
+            adapterProps() {
+                const superProps = superRenderProps();
+                return {
+                    ...superProps,
+                    rpcDriverName: self.rpcDriverName,
+                    displayModel: self,
+                    config: self.rendererConfig,
+                };
+            },
+            trackMenuItems() {
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        label: 'Show sidebar labels',
+                        icon: VisibilityIcon,
+                        type: 'checkbox',
+                        checked: self.showSidebarLabelsSetting,
+                        onClick: () => {
+                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
+                        },
+                    },
+                    {
+                        label: 'Row height',
+                        icon: HeightIcon,
+                        subMenu: [
+                            {
+                                label: 'Manually set row height',
+                                disabled: self.autoHeight,
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        SetRowHeightDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Auto-adjust to display height',
+                                type: 'checkbox',
+                                checked: self.autoHeight,
+                                onClick: () => {
+                                    self.setAutoHeight(!self.autoHeight);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Rendering mode',
+                        icon: SplitscreenIcon,
+                        subMenu: [
+                            {
+                                label: 'Allele count',
+                                type: 'radio',
+                                checked: self.renderingMode === 'alleleCount',
+                                onClick: () => {
+                                    self.setPhasedMode('alleleCount');
+                                },
+                            },
+                            {
+                                label: 'Phased' +
+                                    (!self.hasPhased
+                                        ? ' (disabled, no phased variants found)'
+                                        : ''),
+                                disabled: !self.hasPhased,
+                                checked: self.renderingMode === 'phased',
+                                type: 'radio',
+                                onClick: () => {
+                                    self.setPhasedMode('phased');
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Filter by',
+                        icon: FilterListIcon,
+                        subMenu: [
+                            {
+                                label: 'Minor allele frequency',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        MAFFilterDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        label: 'Cluster by genotype',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                ClusterDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Edit group colors/arrangement...',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                SetColorDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
+                ];
+            },
+        };
+    })
+        .views(self => ({
+        get canDisplayLabels() {
+            return self.rowHeight > 8 && self.showSidebarLabelsSetting;
+        },
+        get totalHeight() {
+            var _a;
+            return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
+        },
+    }))
+        .views(self => ({
+        renderProps() {
+            const superProps = self.adapterProps();
+            return {
+                ...superProps,
+                notReady: superProps.notReady || !self.sources || !self.featuresVolatile,
+                height: self.height,
+                totalHeight: self.totalHeight,
+                renderingMode: self.renderingMode,
+                minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                rowHeight: self.rowHeight,
+                sources: self.sources,
+                scrollTop: self.scrollTop,
+            };
+        },
+    }));
+}

package/esm/shared/MultiVariantTooltip.d.ts

@@ -0,0 +1,6 @@
+export default function MultiVariantTooltip({ source, }: {
+    source: {
+        color?: string;
+        [key: string]: unknown;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/MultiVariantTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+export default function MultiVariantTooltip({ source, }) {
+    return (_jsxs(BaseTooltip, { children: [source.color ? (_jsx("div", { style: {
+                    width: 10,
+                    height: 10,
+                    backgroundColor: source.color,
+                } })) : null, _jsx(SanitizedHTML, { html: Object.entries(source)
+                    .filter(([key, val]) => key !== 'color' &&
+                    key !== 'name' &&
+                    key !== 'HP' &&
+                    key !== 'id' &&
+                    val !== undefined)
+                    .map(([key, value]) => `${key}:${value}`)
+                    .join('<br/>') })] }));
+}

package/esm/shared/RectBg.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-declare const RectBg: (props: {
+declare const RectBg: ({ x, y, width, height, color, }: {
     x: number;
     y: number;
     width: number;
     height: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default RectBg;

package/esm/shared/RectBg.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
-const RectBg = (props) => {
-    const { color = 'rgb(255,255,255)' } = props;
-    return React.createElement("rect", { pointerEvents: "auto", ...props, ...getFillProps(color) });
+const RectBg = ({ x, y, width, height, color = 'rgba(255,255,255,0.5)', }) => {
+    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color) }));
 };
 export default RectBg;

package/esm/shared/RowPalettizer.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-import { type Source } from '../util';
+import type { Source } from '../types';
 export default function RowPalettizer({ setCurrLayout, currLayout, }: {
     currLayout: Source[];
     setCurrLayout: (arg: Source[]) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;