@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/shared/components/MultiVariantTooltip.js

@@ -1,18 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SanitizedHTML } from '@jbrowse/core/ui';
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
-import escapeHTML from 'escape-html';
-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 !== 'HP' &&
-                    key !== 'name' &&
-                    key !== 'id' &&
-                    val !== undefined)
-                    .map(([key, value]) => `${key}:${escapeHTML(`${value}`)}`)
-                    .join('<br/>') })] }));
-}
+import { memo } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Portal, alpha } from '@mui/material';
+const useStyles = makeStyles()(theme => ({
+    tooltip: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        backgroundColor: alpha(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.fontSize,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+        zIndex: 100000,
+    },
+    row: {
+        whiteSpace: 'nowrap',
+    },
+    colorBox: {
+        width: 10,
+        height: 10,
+        display: 'inline-block',
+        marginRight: 4,
+    },
+}));
+const EXCLUDE_KEYS = new Set(['color', 'HP', 'name', 'id']);
+const MultiVariantTooltip = memo(function MultiVariantTooltip({ source, x, y, }) {
+    const { classes } = useStyles();
+    return (_jsx(Portal, { children: _jsxs("div", { className: classes.tooltip, style: { transform: `translate(${x + 10}px, ${y + 10}px)` }, children: [source.color ? (_jsx("div", { className: classes.colorBox, style: { backgroundColor: source.color } })) : null, Object.entries(source).map(([key, value]) => !EXCLUDE_KEYS.has(key) && value !== undefined ? (_jsxs("div", { className: classes.row, children: [key, ": ", String(value)] }, key)) : null)] }) }));
+});
+export default MultiVariantTooltip;

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

@@ -0,0 +1,8 @@
+import type { MultiVariantBaseModel } from '../MultiVariantBaseModel.ts';
+interface ScrollableVariantContainerProps {
+    model: MultiVariantBaseModel;
+    topOffset?: number;
+    testId?: string;
+}
+declare const ScrollableVariantContainer: ({ model, topOffset, testId, }: ScrollableVariantContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollableVariantContainer;

package/esm/shared/components/ScrollableVariantContainer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import { observer } from 'mobx-react';
+import LegendBar from "./MultiVariantLegendBar.js";
+import TreeSidebar from "./TreeSidebar.js";
+const ScrollableVariantContainer = observer(function ScrollableVariantContainer({ model, topOffset = 0, testId, }) {
+    const { setScrollTop, autoHeight, availableHeight } = model;
+    return (_jsxs("div", { "data-testid": testId, style: {
+            position: 'absolute',
+            top: topOffset,
+            height: availableHeight,
+            width: '100%',
+            overflowY: autoHeight ? 'hidden' : 'auto',
+            overflowX: 'hidden',
+        }, onScroll: evt => {
+            setScrollTop(evt.currentTarget.scrollTop);
+        }, children: [_jsx(TreeSidebar, { model: model }), _jsx(LegendBar, { model: model }), _jsx("div", { style: {
+                    position: 'absolute',
+                    left: 0,
+                    width: '100%',
+                }, children: _jsx(BaseLinearDisplayComponent, { model: model }) })] }));
+});
+export default ScrollableVariantContainer;

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

@@ -1,7 +1,8 @@
-import type { Source } from '../types';
+import type { Source } from '../types.ts';
 interface ReducedModel {
     sources?: Source[];
-    setLayout: (s: Source[]) => void;
+    clusterTree?: string;
+    setLayout: (s: Source[], clearTree?: boolean) => void;
     clearLayout: () => void;
 }
 export default function SetColorDialog({ model, handleClose, }: {

package/esm/shared/components/SetColorDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import SourcesGrid from './SourcesGrid';
-import SharedSetColorDialog from './ui/SetColorDialog';
+import SharedSetColorDialog from "./BaseSetColorDialog.js";
+import SourcesGrid from "./SourcesGrid.js";
 export default function SetColorDialog({ model, handleClose, }) {
     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

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

package/esm/shared/components/SetColorDialogBulkEditPanel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     textAreaFont: {
         fontFamily: 'Courier New',
@@ -12,6 +12,27 @@ export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
     const { classes } = useStyles();
     const [val, setVal] = useState('');
     const [error, setError] = useState();
+    const processRows = (mergeExisting) => {
+        const lines = val
+            .split('\n')
+            .map(f => f.trim())
+            .filter(Boolean);
+        const fields = lines[0].split(/[,\t]/gm);
+        if (!fields.includes('name')) {
+            setError(new Error('No "name" column found on line 1'));
+            return;
+        }
+        setError('');
+        const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
+        const newData = Object.fromEntries(lines.slice(1).map(line => {
+            const cols = line.split(/[,\t]/gm);
+            const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+            return [newRecord.name, { ...newRecord, ...oldLayout[newRecord.name] }];
+        }));
+        onClose(currLayout.map(record => mergeExisting
+            ? { ...record, ...newData[record.name] }
+            : { ...newData[record.name] }));
+    };
     return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Paste CSV or TSV. If a header column is present. First line is a header. If a column called \"name\" is present, it uses that to connect to IDs in the table, otherwise it uses the first column no." }), error ? _jsx(ErrorMessage, { error: error }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, placeholder: 'name,population\nHG00098,GBR\nHG00101,GBR\nHG00459,CHS\n...', maxRows: 10, fullWidth: true, value: val, onChange: event => {
                             setVal(event.target.value);
                         }, slotProps: {
@@ -21,60 +42,9 @@ export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
                                 },
                             },
                         } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                            const lines = val
-                                .split('\n')
-                                .map(f => f.trim())
-                                .filter(f => !!f);
-                            const fields = lines[0].split(/[,\t]/gm);
-                            if (fields.includes('name')) {
-                                setError('');
-                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
-                                const newData = Object.fromEntries(lines.slice(1).map(line => {
-                                    const cols = line.split(/[,\t]/gm);
-                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
-                                    return [
-                                        newRecord.name,
-                                        {
-                                            ...newRecord,
-                                            ...oldLayout[newRecord.name],
-                                        },
-                                    ];
-                                }));
-                                onClose(currLayout.map(record => ({
-                                    ...record,
-                                    ...newData[record.name],
-                                })));
-                            }
-                            else {
-                                setError(new Error('No "name" column found on line 1'));
-                            }
+                            processRows(true);
                         }, children: "Update rows" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
-                            const lines = val
-                                .split('\n')
-                                .map(f => f.trim())
-                                .filter(f => !!f);
-                            const fields = lines[0].split(/[,\t]/gm);
-                            if (fields.includes('name')) {
-                                setError('');
-                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
-                                const newData = Object.fromEntries(lines.slice(1).map(line => {
-                                    const cols = line.split(/[,\t]/gm);
-                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
-                                    return [
-                                        newRecord.name,
-                                        {
-                                            ...newRecord,
-                                            ...oldLayout[newRecord.name],
-                                        },
-                                    ];
-                                }));
-                                onClose(currLayout.map(record => ({
-                                    ...newData[record.name],
-                                })));
-                            }
-                            else {
-                                setError(new Error('No "name" column found on line 1'));
-                            }
+                            processRows(false);
                         }, children: "Replace rows" }), _jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
                             onClose();
                         }, children: "Cancel" })] })] }));

package/esm/shared/components/SetColorDialogRowPalettizer.js

@@ -2,37 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { set1 } from '@jbrowse/core/ui/colors';
 import { randomColor } from '@jbrowse/core/util/color';
 import { Button } from '@mui/material';
+const excludedFields = new Set(['name', 'color', 'label', 'id', 'HP']);
 export default function SetColorDialogRowPalettizer({ setCurrLayout, currLayout, }) {
-    if (!currLayout.length || !currLayout[0]) {
+    const firstRow = currLayout[0];
+    if (!firstRow) {
         return null;
     }
-    const fields = Object.keys(currLayout[0]).filter(f => f !== 'name' &&
-        f !== 'color' &&
-        f !== 'label' &&
-        f !== 'id' &&
-        f !== 'HP');
-    return (_jsxs("div", { children: ["Create color palette based on...", fields.map(r => (_jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
-                    const map = new Map();
+    const fields = Object.keys(firstRow).filter(f => !excludedFields.has(f));
+    return (_jsxs("div", { children: ["Create color palette based on...", fields.map(field => (_jsx(Button, { variant: "contained", color: "inherit", onClick: () => {
+                    const counts = new Map();
                     for (const row of currLayout) {
-                        const val = map.get(row[r]);
-                        if (!val) {
-                            map.set(row[r], 1);
-                        }
-                        else {
-                            map.set(row[r], val + 1);
-                        }
+                        const key = row[field];
+                        counts.set(key, (counts.get(key) || 0) + 1);
                     }
-                    const ret = Object.fromEntries([...map.entries()]
+                    const colorMap = Object.fromEntries([...counts.entries()]
                         .sort((a, b) => a[1] - b[1])
-                        .map((r, idx) => [r[0], set1[idx] || randomColor(r[0])]));
+                        .map(([key], idx) => [key, set1[idx] || randomColor(key)]));
                     setCurrLayout(currLayout.map(row => ({
                         ...row,
-                        color: ret[row[r]],
-                    })));
-                }, children: r }, r))), _jsx(Button, { onClick: () => {
-                    setCurrLayout(currLayout.map(row => ({
-                        ...row,
-                        color: undefined,
+                        color: colorMap[row[field]],
                     })));
+                }, children: field }, field))), _jsx(Button, { onClick: () => {
+                    setCurrLayout(currLayout.map(row => ({ ...row, color: undefined })));
                 }, children: "Clear colors" })] }));
 }

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

@@ -1,8 +1,7 @@
-import type { Source } from '../types';
 export default function SetRowHeight({ model, handleClose, }: {
     model: {
-        rowHeight?: Source[];
-        setRowHeight: (arg: number) => void;
+        rowHeight: number;
+        setRowHeight: (arg: number | 'auto') => void;
     };
     handleClose: () => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { Source } from '../types';
+import type { Source } from '../types.ts';
 import type { GridRowId } from '@mui/x-data-grid';
 export default function SourcesDataGrid({ rows, onChange, setSelected, }: {
     rows: Source[];

package/esm/shared/components/SourcesDataGrid.js

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import ColorPicker from '@jbrowse/core/ui/ColorPicker';
 import { getStr, measureGridWidth } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { DataGrid } from '@mui/x-data-grid';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     cell: {
         whiteSpace: 'nowrap',

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

@@ -1,4 +1,4 @@
-import type { Source } from '../types';
+import type { Source } from '../types.ts';
 declare function SourcesGrid({ rows, onChange, showTips, }: {
     rows: Source[];
     onChange: (arg: Source[]) => void;

package/esm/shared/components/SourcesGrid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import SourcesDataGrid from './SourcesDataGrid';
-import SourcesGridHeader from './SourcesGridHeader';
+import SourcesDataGrid from "./SourcesDataGrid.js";
+import SourcesGridHeader from "./SourcesGridHeader.js";
 function SourcesGrid({ rows, onChange, showTips, }) {
     const [selected, setSelected] = useState([]);
     return (_jsxs("div", { children: [_jsx(SourcesGridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), rows.length ? (_jsx(SourcesDataGrid, { rows: rows, onChange: onChange, setSelected: setSelected })) : (_jsx("div", { children: "No rows" }))] }));

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

@@ -1,4 +1,4 @@
-import type { Source } from '../types';
+import type { Source } from '../types.ts';
 import type { GridRowId } from '@mui/x-data-grid';
 export default function SourcesGridHeader({ selected, onChange, rows, showTips, }: {
     onChange: (arg: Source[]) => void;

package/esm/shared/components/SourcesGridHeader.js

@@ -6,7 +6,7 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import { Button } from '@mui/material';
-import { moveDown, moveUp } from '../sourcesGridUtils';
+import { moveDown, moveUp } from "../sourcesGridUtils.js";
 export default function SourcesGridHeader({ selected, onChange, rows, showTips, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const [widgetColor, setWidgetColor] = useState('blue');

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

@@ -0,0 +1,5 @@
+import type { LegendBarModel } from './types.ts';
+declare const SvgTree: ({ model, }: {
+    model: LegendBarModel;
+}) => import("react/jsx-runtime").JSX.Element[];
+export default SvgTree;

package/esm/shared/components/SvgTree.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+const SvgTree = observer(function SvgTree({ model, }) {
+    const { treeAreaWidth: _treeAreaWidth, hierarchy } = model;
+    const svg = [];
+    let idx = 0;
+    if (hierarchy) {
+        for (const link of hierarchy.links()) {
+            const { source, target } = link;
+            const sy = source.x;
+            const ty = target.x;
+            const tx = target.y;
+            const sx = source.y;
+            svg.push(_jsx("line", { x1: sx, y1: sy, x2: sx, y2: ty, stroke: "black", opacity: "0.4" }, `${sx}-${sy}-${tx}-${ty}-${idx++}`), _jsx("line", { x1: sx, y1: ty, x2: tx, y2: ty, stroke: "black", opacity: "0.4" }, `${sx}-${sy}-${tx}-${ty}-${idx++}`));
+        }
+    }
+    return svg;
+});
+export default SvgTree;

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

@@ -0,0 +1,5 @@
+import type { TreeSidebarModel } from './types.ts';
+declare const TreeSidebar: ({ model, }: {
+    model: TreeSidebarModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default TreeSidebar;

package/esm/shared/components/TreeSidebar.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { getContainingView } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    resizeHandle: {
+        position: 'absolute',
+        top: 0,
+        height: '100%',
+        width: 4,
+        zIndex: 101,
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
+    },
+}));
+function getDescendantNames(node) {
+    if (!node.children?.length) {
+        return [node.data.name];
+    }
+    return node.children.flatMap(child => getDescendantNames(child));
+}
+const TreeSidebar = observer(function TreeSidebar({ model, }) {
+    const { classes } = useStyles();
+    const { width: viewWidth } = getContainingView(model);
+    const [nodeIndex, setNodeIndex] = useState(null);
+    const [nodeData, setNodeData] = useState([]);
+    const { hierarchy, treeAreaWidth, height, scrollTop, showTree, sources } = model;
+    const treeCanvasRef = useCallback((ref) => {
+        model.setTreeCanvasRef(ref);
+    }, [model, treeAreaWidth, height]);
+    const mouseoverCanvasRef = useCallback((ref) => {
+        model.setMouseoverCanvasRef(ref);
+    }, [model, viewWidth, height]);
+    useEffect(() => {
+        return autorun(function treeSpatialIndexAutorun() {
+            const { treeAreaWidth: _t, hierarchy: h, totalHeight: th } = model;
+            void th;
+            if (!h) {
+                setNodeIndex(null);
+                setNodeData([]);
+                return;
+            }
+            const nodes = h.descendants().filter(node => node.children?.length);
+            const index = new Flatbush(nodes.length);
+            const hitRadius = 8;
+            for (const node of nodes) {
+                const x = node.y;
+                const y = node.x;
+                index.add(x - hitRadius, y - hitRadius, x + hitRadius, y + hitRadius);
+            }
+            index.finish();
+            setNodeIndex(index);
+            setNodeData(nodes);
+        }, { name: 'TreeSpatialIndex' });
+    }, [model]);
+    const handleMouseMove = useCallback((event) => {
+        if (!hierarchy || !nodeIndex) {
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top + scrollTop;
+        const results = nodeIndex.search(x, y, x, y);
+        const node = results.length > 0 ? nodeData[results[0]] : undefined;
+        if (node) {
+            model.setHoveredTreeNode({
+                node,
+                descendantNames: getDescendantNames(node),
+            });
+        }
+        else {
+            model.setHoveredTreeNode(undefined);
+        }
+    }, [hierarchy, nodeIndex, nodeData, scrollTop, model]);
+    const handleMouseLeave = useCallback(() => {
+        model.setHoveredTreeNode(undefined);
+    }, [model]);
+    if (!hierarchy || !showTree || !sources?.length) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    position: 'sticky',
+                    top: 0,
+                    left: 0,
+                    height: 0,
+                    zIndex: 100,
+                }, children: [_jsx("canvas", { ref: treeCanvasRef, width: treeAreaWidth * 2, height: height * 2, style: {
+                            width: treeAreaWidth,
+                            height,
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            pointerEvents: 'none',
+                        } }), _jsx("canvas", { ref: mouseoverCanvasRef, width: viewWidth, height: height, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            zIndex: 1,
+                            pointerEvents: 'none',
+                        } }), _jsx("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: treeAreaWidth,
+                            height,
+                            zIndex: 2,
+                            cursor: 'pointer',
+                        } })] }), _jsx(ResizeHandle, { onDrag: distance => {
+                    model.setTreeAreaWidth(Math.max(50, treeAreaWidth + distance));
+                    return undefined;
+                }, className: classes.resizeHandle, style: {
+                    left: treeAreaWidth,
+                }, vertical: true })] }));
+});
+export default TreeSidebar;

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

@@ -0,0 +1,43 @@
+import type { Source } from '../types.ts';
+import type { HierarchyNode } from 'd3-hierarchy';
+export interface ClusterNodeData {
+    name: string;
+    height: number;
+    children?: ClusterNodeData[];
+}
+export type ClusterHierarchyNode = HierarchyNode<ClusterNodeData>;
+export interface HoveredTreeNode {
+    node: ClusterHierarchyNode;
+    descendantNames: string[];
+}
+export interface TreeSidebarModel {
+    totalHeight: number;
+    hierarchy?: ClusterHierarchyNode;
+    treeAreaWidth: number;
+    height: number;
+    scrollTop: number;
+    showTree: boolean;
+    sources?: Source[];
+    setTreeCanvasRef: (ref: HTMLCanvasElement | null) => void;
+    setMouseoverCanvasRef: (ref: HTMLCanvasElement | null) => void;
+    setHoveredTreeNode: (node?: HoveredTreeNode) => void;
+    setTreeAreaWidth: (width: number) => void;
+}
+export interface LegendBarModel {
+    id: string;
+    scrollTop: number;
+    height: number;
+    hierarchy?: ClusterHierarchyNode;
+    treeAreaWidth: number;
+    totalHeight: number;
+    canDisplayLabels: boolean;
+    rowHeight: number;
+    sources?: Source[];
+    showTree: boolean;
+}
+export interface MouseState {
+    x: number;
+    y: number;
+    offsetX: number;
+    offsetY: number;
+}

package/esm/shared/components/types.js

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

package/esm/shared/constants.d.ts

@@ -1,2 +1,8 @@
-export declare const fudgeFactor = 0.6;
-export declare const f2: number;
+export declare const f2 = 0.3;
+export declare const REFERENCE_COLOR = "#ccc";
+export declare const NO_CALL_COLOR = "hsl(50,50%,50%)";
+export declare const UNPHASED_COLOR = "black";
+export declare const ALT_COLOR_HUE = 200;
+export declare const ALT_COLOR_SATURATION = 50;
+export declare const OTHER_ALT_COLOR = "hsl(0,100%,20%)";
+export declare function getAltColorForDosage(dosage: number): string;

package/esm/shared/constants.js

@@ -1,2 +1,11 @@
-export const fudgeFactor = 0.6;
-export const f2 = fudgeFactor / 2;
+export const f2 = 0.3;
+export const REFERENCE_COLOR = '#ccc';
+export const NO_CALL_COLOR = 'hsl(50,50%,50%)';
+export const UNPHASED_COLOR = 'black';
+export const ALT_COLOR_HUE = 200;
+export const ALT_COLOR_SATURATION = 50;
+export const OTHER_ALT_COLOR = 'hsl(0,100%,20%)';
+export function getAltColorForDosage(dosage) {
+    const lightness = 80 - dosage * 50;
+    return `hsl(${ALT_COLOR_HUE},${ALT_COLOR_SATURATION}%,${lightness}%)`;
+}

package/esm/shared/drawAlleleCount.d.ts

@@ -1,2 +1,3 @@
-export declare function getColorAlleleCount(ref: number, alt: number, alt2: number, uncalled: number, total: number, drawReference?: boolean): any;
+export declare function getAlleleColor(genotype: string, mostFrequentAlt: string, colorCache: Record<string, string | undefined>, splitCache: Record<string, string[]>, drawRef: boolean): string;
+export declare function getColorAlleleCount(ref: number, alt: number, alt2: number, uncalled: number, total: number, drawReference?: boolean): string;
 export declare function drawColorAlleleCount(c: string, ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, featureType?: string, featureStrand?: number, alpha?: number): void;