@vitessce/heatmap 2.0.2 → 2.0.3

package/dist/Heatmap.test.fixtures.js

@@ -1,20 +0,0 @@
-export const expressionMatrix = {
-    rows: ['cell-0', 'cell-1', 'cell-2', 'cell-3', 'cell-4'],
-    cols: ['gene-0', 'gene-1', 'gene-2', 'gene-3'],
-    // "An image with an 'F' on it has a clear direction so it's easy to tell
-    // if it's turned or flipped etc when we use it as a texture."
-    // - https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html
-    matrix: Uint8Array.from([
-        0, 255, 255, 0,
-        0, 255, 0, 0,
-        0, 255, 255, 0,
-        0, 255, 0, 0,
-        0, 255, 0, 0,
-    ]),
-};
-export const cellColors = new Map([
-    ['cell-1', [0, 0, 255]],
-    ['cell-0', [0, 0, 255]],
-    ['cell-3', [255, 0, 0]],
-    ['cell-2', [255, 0, 0]],
-]);

package/dist/Heatmap.test.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable func-names */
-import '@testing-library/jest-dom';
-import { cleanup, render } from '@testing-library/react';
-import { afterEach } from 'vitest';
-import Heatmap from './Heatmap';
-import { expressionMatrix, cellColors } from './Heatmap.test.fixtures';
-afterEach(() => {
-    cleanup();
-});
-describe('<Heatmap/>', () => {
-    it('renders a DeckGL element', function () {
-        const { container } = render(_jsx(Heatmap, { uuid: "heatmap-0", theme: "dark", width: 100, height: 100, colormap: "plasma", colormapRange: [0.0, 1.0], expressionMatrix: expressionMatrix, cellColors: cellColors, transpose: true, viewState: { zoom: 0, target: [0, 0] } }));
-        expect(container.querySelectorAll('#deckgl-overlay-heatmap-0-wrapper').length).toEqual(1);
-    });
-});

package/dist/HeatmapOptions.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import debounce from 'lodash/debounce';
-import Slider from '@material-ui/core/Slider';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
-import { GLSL_COLORMAPS } from '@vitessce/gl';
-export default function HeatmapOptions(props) {
-    const { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, } = props;
-    const classes = usePlotOptionsStyles();
-    function handleGeneExpressionColormapChange(event) {
-        setGeneExpressionColormap(event.target.value);
-    }
-    function handleColormapRangeChange(event, value) {
-        setGeneExpressionColormapRange(value);
-    }
-    const handleColormapRangeChangeDebounced = useCallback(debounce(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
-    return (_jsxs(OptionsContainer, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
-                                id: 'gene-expression-colormap-select',
-                            }, children: GLSL_COLORMAPS.map(cmap => (_jsx("option", { value: cmap, children: cmap }, cmap))) }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Slider, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 0.005, min: 0.0, max: 1.0 }) })] })] }));
-}

package/dist/HeatmapSubscriber.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback, useMemo, } from 'react';
-import plur from 'plur';
-import { TitleInfo, useDeckCanvasSize, useGetObsInfo, useReady, useUrls, useObsSetsData, useObsFeatureMatrixData, useMultiObsLabels, useFeatureLabelsData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, registerPluginViewType, } from '@vitessce/vit-s';
-import { capitalize, commaNumber, getCellColors } from '@vitessce/utils';
-import { mergeObsSets } from '@vitessce/sets-utils';
-import { COMPONENT_COORDINATION_TYPES, ViewType } from '@vitessce/constants-internal';
-import Heatmap from './Heatmap';
-import HeatmapTooltipSubscriber from './HeatmapTooltipSubscriber';
-import HeatmapOptions from './HeatmapOptions';
-/**
- * @param {object} props
- * @param {number} props.uuid The unique identifier for this component.
- * @param {object} props.coordinationScopes The mapping from coordination types to coordination
- * scopes.
- * @param {function} props.removeGridComponent The callback function to pass to TitleInfo,
- * to call when the component has been removed from the grid.
- * @param {string} props.title The component title.
- * @param {boolean} props.transpose Whether to
- * render as cell-by-gene or gene-by-cell.
- * @param {boolean} props.disableTooltip Whether to disable the
- * tooltip on mouse hover.
- */
-export function HeatmapSubscriber(props) {
-    const { uuid, coordinationScopes, removeGridComponent, theme, transpose, observationsLabelOverride, variablesLabelOverride, disableTooltip = false, title = 'Heatmap', } = props;
-    const loaders = useLoaders();
-    const setComponentHover = useSetComponentHover();
-    const setComponentViewInfo = useSetComponentViewInfo(uuid);
-    // Get "props" from the coordination space.
-    const [{ dataset, obsType, featureType, featureValueType, heatmapZoomX: zoomX, heatmapTargetX: targetX, heatmapTargetY: targetY, featureSelection: geneSelection, obsHighlight: cellHighlight, featureHighlight: geneHighlight, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, }, { setHeatmapZoomX: setZoomX, setHeatmapZoomY: setZoomY, setHeatmapTargetX: setTargetX, setHeatmapTargetY: setTargetY, setObsHighlight: setCellHighlight, setFeatureHighlight: setGeneHighlight, setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, setFeatureValueColormapRange: setGeneExpressionColormapRange, setFeatureValueColormap: setGeneExpressionColormap, }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType.HEATMAP], coordinationScopes);
-    const observationsLabel = observationsLabelOverride || obsType;
-    const observationsPluralLabel = plur(observationsLabel);
-    const variablesLabel = variablesLabelOverride || featureType;
-    const variablesPluralLabel = plur(variablesLabel);
-    const observationsTitle = capitalize(observationsPluralLabel);
-    const variablesTitle = capitalize(variablesPluralLabel);
-    const [isRendering, setIsRendering] = useState(false);
-    const [urls, addUrl] = useUrls(loaders, dataset);
-    const [width, height, deckRef] = useDeckCanvasSize();
-    // Get data from loaders using the data hooks.
-    const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset, addUrl);
-    // TODO: support multiple feature labels using featureLabelsType coordination values.
-    const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl, false, {}, {}, { featureType });
-    const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(loaders, dataset, addUrl, true, {}, {}, { obsType, featureType, featureValueType });
-    const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
-    const isReady = useReady([
-        featureLabelsStatus,
-        matrixStatus,
-        obsSetsStatus,
-    ]);
-    const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
-    const cellColors = useMemo(() => getCellColors({
-        // Only show cell set selection on heatmap labels.
-        cellColorEncoding: 'cellSetSelection',
-        geneSelection,
-        cellSets: mergedCellSets,
-        cellSetSelection,
-        cellSetColor,
-        obsIndex,
-        theme,
-    }), [mergedCellSets, geneSelection, theme,
-        cellSetColor, cellSetSelection, obsIndex]);
-    const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
-    const getFeatureInfo = useCallback((featureId) => {
-        if (featureId) {
-            return { [`${capitalize(variablesLabel)} ID`]: featureId };
-        }
-        return null;
-    }, [variablesLabel]);
-    const expressionMatrix = useMemo(() => {
-        if (obsIndex && featureIndex && obsFeatureMatrix) {
-            return {
-                rows: obsIndex,
-                cols: (featureLabelsMap
-                    ? featureIndex.map(key => featureLabelsMap.get(key) || key)
-                    : featureIndex),
-                matrix: obsFeatureMatrix.data,
-            };
-        }
-        return null;
-    }, [obsIndex, featureIndex, obsFeatureMatrix, featureLabelsMap]);
-    const cellsCount = obsIndex ? obsIndex.length : 0;
-    const genesCount = featureIndex ? featureIndex.length : 0;
-    const setTrackHighlight = useCallback(() => {
-        // No-op, since the default handler
-        // logs in the console on every hover event.
-    }, []);
-    const cellColorLabels = useMemo(() => ([
-        `${capitalize(observationsLabel)} Set`,
-    ]), [observationsLabel]);
-    const selectedCount = cellColors.size;
-    return (_jsxs(TitleInfo, { title: title, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${plur(variablesLabel, genesCount)},
-             with ${commaNumber(selectedCount)} ${plur(observationsLabel, selectedCount)} selected`, urls: urls, theme: theme, removeGridComponent: removeGridComponent, isReady: isReady && !isRendering, options: (_jsx(HeatmapOptions, { geneExpressionColormap: geneExpressionColormap, setGeneExpressionColormap: setGeneExpressionColormap, geneExpressionColormapRange: geneExpressionColormapRange, setGeneExpressionColormapRange: setGeneExpressionColormapRange })), children: [_jsx(Heatmap, { ref: deckRef, transpose: transpose, viewState: { zoom: zoomX, target: [targetX, targetY] }, setViewState: ({ zoom, target }) => {
-                    setZoomX(zoom);
-                    setZoomY(zoom);
-                    setTargetX(target[0]);
-                    setTargetY(target[1]);
-                }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height, width: width, theme: theme, uuid: uuid, expressionMatrix: expressionMatrix, cellColors: cellColors, colormap: geneExpressionColormap, setIsRendering: setIsRendering, setCellHighlight: setCellHighlight, setGeneHighlight: setGeneHighlight, setTrackHighlight: setTrackHighlight, setComponentHover: () => {
-                    setComponentHover(uuid);
-                }, updateViewInfo: setComponentViewInfo, observationsTitle: observationsTitle, variablesTitle: variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels: cellColorLabels, useDevicePixels: true }), !disableTooltip && (_jsx(HeatmapTooltipSubscriber, { parentUuid: uuid, width: width, height: height, transpose: transpose, getObsInfo: getObsInfo, getFeatureInfo: getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight }))] }));
-}
-export function register() {
-    registerPluginViewType(ViewType.HEATMAP, HeatmapSubscriber, COMPONENT_COORDINATION_TYPES[ViewType.HEATMAP]);
-}

package/dist/HeatmapTooltipSubscriber.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Tooltip2D, TooltipContent } from '@vitessce/tooltip';
-import { useComponentHover, useComponentViewInfo } from '@vitessce/vit-s';
-export default function HeatmapTooltipSubscriber(props) {
-    const { parentUuid, width, height, transpose, getObsInfo, getFeatureInfo, obsHighlight, featureHighlight, } = props;
-    const sourceUuid = useComponentHover();
-    const viewInfo = useComponentViewInfo(parentUuid);
-    const [cellInfo, cellCoord] = (obsHighlight && getObsInfo ? ([
-        getObsInfo(obsHighlight),
-        (viewInfo && viewInfo.project
-            ? viewInfo.project(obsHighlight, null)[(transpose ? 0 : 1)]
-            : null),
-    ]) : ([null, null]));
-    const [geneInfo, geneCoord] = (featureHighlight && getFeatureInfo ? ([
-        getFeatureInfo(featureHighlight),
-        (viewInfo && viewInfo.project
-            ? viewInfo.project(null, featureHighlight)[(transpose ? 1 : 0)]
-            : null),
-    ]) : ([null, null]));
-    const x = (transpose ? cellCoord : geneCoord);
-    const y = (transpose ? geneCoord : cellCoord);
-    return ((cellInfo || geneInfo ? (_jsx(Tooltip2D, { x: x, y: y, parentUuid: parentUuid, parentWidth: width, parentHeight: height, sourceUuid: sourceUuid, children: _jsx(TooltipContent, { info: { ...geneInfo, ...cellInfo } }) })) : null));
-}

package/dist/HeatmapWorkerPool.js

@@ -1,49 +0,0 @@
-import { HeatmapWorker } from '@vitessce/workers';
-import { Pool } from '@vitessce/utils';
-// Reference: https://github.com/developit/jsdom-worker/issues/14#issuecomment-1268070123
-function createWorker() {
-    return new HeatmapWorker();
-}
-/**
- * Pool for workers to decode chunks of the images.
- * This is a line-for-line copy of GeoTIFFs old implementation: https://github.com/geotiffjs/geotiff.js/blob/v1.0.0-beta.6/src/pool.js
- */
-export default class HeatmapPool extends Pool {
-    constructor() {
-        super(createWorker);
-    }
-    /**
-     * Process each heatmap tile
-     * @param {object} params The arguments passed to the heatmap worker.
-     * @param {string} params.curr The current task uuid.
-     * @param {number} params.xTiles How many tiles required in the x direction?
-     * @param {number} params.yTiles How many tiles required in the y direction?
-     * @param {number} params.tileSize How many entries along each tile axis?
-     * @param {string[]} params.cellOrdering The current ordering of cells.
-     * @param {string[]} params.rows The name of each row (cell ID).
-     * Does not take transpose into account (always cells).
-     * @param {string[]} params.cols The name of each column (gene ID).
-     * Does not take transpose into account (always genes).
-     * @param {ArrayBuffer} params.data The array buffer.
-     * Need to transfer back to main thread when done.
-     * @param {boolean} params.transpose Is the heatmap transposed?
-     * @returns {array} [message, transfers]
-     * @returns {Promise.<ArrayBuffer>} the decoded result as a `Promise`
-     */
-    async process(args) {
-        const currentWorker = await this.waitForWorker();
-        return new Promise((resolve, reject) => {
-            currentWorker.onmessage = (event) => {
-                // this.workers.push(currentWorker);
-                this.finishTask(currentWorker);
-                resolve(event.data);
-            };
-            currentWorker.onerror = (error) => {
-                // this.workers.push(currentWorker);
-                this.finishTask(currentWorker);
-                reject(error);
-            };
-            currentWorker.postMessage(['getTile', args], [args.data]);
-        });
-    }
-}

package/dist/utils.js

@@ -1,181 +0,0 @@
-import clamp from 'lodash/clamp';
-import { AXIS_LABEL_TEXT_SIZE, AXIS_FONT_FAMILY, AXIS_PADDING, AXIS_MIN_SIZE, AXIS_MAX_SIZE, } from '@vitessce/gl';
-/**
- * Called before a layer is drawn to determine whether it should be rendered.
- * Reference: https://deck.gl/docs/api-reference/core/deck#layerfilter
- * @param {object} params A viewport, layer pair.
- * @param {object} params.layer The layer to check.
- * @param {object} params.viewport The viewport to check.
- * @returns {boolean} Should this layer be rendered in this viewport?
- */
-export function layerFilter({ layer, viewport }) {
-    if (viewport.id === 'axisLeft') {
-        return layer.id.startsWith('axisLeft');
-    }
-    if (viewport.id === 'axisTop') {
-        return layer.id.startsWith('axisTop');
-    }
-    if (viewport.id === 'cellColorLabel') {
-        return layer.id.startsWith('cellColorLabel');
-    }
-    if (viewport.id === 'heatmap') {
-        return layer.id.startsWith('heatmap');
-    }
-    if (viewport.id.startsWith('colorsLeft')) {
-        const matches = viewport.id.match(/-(\d)/);
-        if (matches)
-            return layer.id.startsWith(`colorsLeftLayer-${matches[1]}`);
-    }
-    if (viewport.id.startsWith('colorsTop')) {
-        const matches = viewport.id.match(/-(\d)/);
-        if (matches)
-            return layer.id.startsWith(`colorsTopLayer-${matches[1]}`);
-    }
-    return false;
-}
-/**
- * Uses canvas.measureText to compute and return the width of the given text
- * of given font in pixels.
- *
- * @param {String} text The text to be rendered.
- * @param {String} font The css font descriptor that text is to be rendered
- * with (e.g. "bold 14px verdana").
- *
- * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
- */
-function getTextWidth(text, font) {
-    // re-use canvas object for better performance
-    const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
-    const context = canvas.getContext('2d');
-    context.font = font;
-    const metrics = context.measureText(text);
-    return metrics.width;
-}
-/**
- * Get the size of the left and top heatmap axes,
- * taking into account the maximum label string lengths.
- * @param {boolean} transpose Is the heatmap transposed?
- * @param {String} longestGeneLabel longest gene label
- * @param {String} longestCellLabel longest cell label
- * @param {boolean} hideObservationLabels are cell labels hidden?
- * @param {boolean} hideVariableLabels are gene labels hidden?
- * Increases vertical space for heatmap
- * @returns {number[]} [axisOffsetLeft, axisOffsetTop]
- */
-export function getAxisSizes(transpose, longestGeneLabel, longestCellLabel, hideObservationLabels, hideVariableLabels) {
-    const font = `${AXIS_LABEL_TEXT_SIZE}pt ${AXIS_FONT_FAMILY}`;
-    const geneLabelMaxWidth = hideVariableLabels
-        ? 0 : getTextWidth(longestGeneLabel, font) + AXIS_PADDING;
-    const cellLabelMaxWidth = hideObservationLabels
-        ? 0 : getTextWidth(longestCellLabel, font) + AXIS_PADDING;
-    const axisOffsetLeft = clamp((transpose ? geneLabelMaxWidth : cellLabelMaxWidth), AXIS_MIN_SIZE, AXIS_MAX_SIZE);
-    const axisOffsetTop = clamp((transpose ? cellLabelMaxWidth : geneLabelMaxWidth), AXIS_MIN_SIZE, AXIS_MAX_SIZE);
-    return [axisOffsetLeft, axisOffsetTop];
-}
-/**
- * Convert a mouse coordinate (x, y) to a heatmap coordinate (col index, row index).
- * @param {number} mouseX The mouse X of interest.
- * @param {number} mouseY The mouse Y of interest.
- * @param {object} param2 An object containing current sizes and scale factors.
- * @returns {number[]} [colI, rowI]
- */
-export function mouseToHeatmapPosition(mouseX, mouseY, { offsetLeft, offsetTop, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }) {
-    // TODO: use linear algebra
-    const viewMouseX = mouseX - offsetLeft;
-    const viewMouseY = mouseY - offsetTop;
-    if (viewMouseX < 0 || viewMouseY < 0) {
-        // The mouse is outside the heatmap.
-        return [null, null];
-    }
-    // Determine the rowI and colI values based on the current viewState.
-    const bboxTargetX = targetX * scaleFactor + matrixWidth * scaleFactor / 2;
-    const bboxTargetY = targetY * scaleFactor + matrixHeight * scaleFactor / 2;
-    const bboxLeft = bboxTargetX - matrixWidth / 2;
-    const bboxTop = bboxTargetY - matrixHeight / 2;
-    const zoomedOffsetLeft = bboxLeft / (matrixWidth * scaleFactor);
-    const zoomedOffsetTop = bboxTop / (matrixHeight * scaleFactor);
-    const zoomedViewMouseX = viewMouseX / (matrixWidth * scaleFactor);
-    const zoomedViewMouseY = viewMouseY / (matrixHeight * scaleFactor);
-    const zoomedMouseX = zoomedOffsetLeft + zoomedViewMouseX;
-    const zoomedMouseY = zoomedOffsetTop + zoomedViewMouseY;
-    const rowI = Math.floor(zoomedMouseY * numRows);
-    const colI = Math.floor(zoomedMouseX * numCols);
-    return [colI, rowI];
-}
-/**
- * Convert a heatmap coordinate (col index, row index) to a mouse coordinate (x, y).
- * @param {number} colI The column index of interest.
- * @param {number} rowI The row index of interest.
- * @param {object} param2 An object containing current sizes and scale factors.
- * @returns {number[]} [x, y]
- */
-export function heatmapToMousePosition(colI, rowI, { offsetLeft, offsetTop, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }) {
-    // TODO: use linear algebra
-    let zoomedMouseY = null;
-    let zoomedMouseX = null;
-    if (rowI !== null) {
-        const minY = -matrixHeight * scaleFactor / 2;
-        const maxY = matrixHeight * scaleFactor / 2;
-        const totalHeight = maxY - minY;
-        const minInViewY = (targetY * scaleFactor) - (matrixHeight / 2);
-        const maxInViewY = (targetY * scaleFactor) + (matrixHeight / 2);
-        const inViewHeight = maxInViewY - minInViewY;
-        const normalizedRowY = (rowI + 0.5) / numRows;
-        const globalRowY = minY + (normalizedRowY * totalHeight);
-        if (minInViewY <= globalRowY && globalRowY <= maxInViewY) {
-            zoomedMouseY = offsetTop + ((globalRowY - minInViewY) / inViewHeight) * matrixHeight;
-        }
-    }
-    if (colI !== null) {
-        const minX = -matrixWidth * scaleFactor / 2;
-        const maxX = matrixWidth * scaleFactor / 2;
-        const totalWidth = maxX - minX;
-        const minInViewX = (targetX * scaleFactor) - (matrixWidth / 2);
-        const maxInViewX = (targetX * scaleFactor) + (matrixWidth / 2);
-        const inViewWidth = maxInViewX - minInViewX;
-        const normalizedRowX = (colI + 0.5) / numCols;
-        const globalRowX = minX + (normalizedRowX * totalWidth);
-        if (minInViewX <= globalRowX && globalRowX <= maxInViewX) {
-            zoomedMouseX = offsetLeft + ((globalRowX - minInViewX) / inViewWidth) * matrixWidth;
-        }
-    }
-    return [zoomedMouseX, zoomedMouseY];
-}
-/**
- * Convert a mouse coordinate (x, y) to a heatmap color bar coordinate (cell index, track index).
- * @param {number} mouseX The mouse X of interest.
- * @param {number} mouseY The mouse Y of interest.
- * @param {object} param2 An object containing current sizes and scale factors.
- * @returns {number[]} [cellI, trackI]
- */
-export function mouseToCellColorPosition(mouseX, mouseY, { axisOffsetTop, axisOffsetLeft, offsetTop, offsetLeft, colorBarSize, numCellColorTracks, transpose, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }) {
-    const cellPosition = transpose ? mouseX - offsetLeft : mouseY - offsetTop;
-    const trackPosition = transpose ? mouseY - axisOffsetTop : mouseX - axisOffsetLeft;
-    const tracksWidth = numCellColorTracks * colorBarSize;
-    // outside of cell color tracks
-    if (cellPosition < 0 || trackPosition < 0 || trackPosition >= tracksWidth) {
-        return [null, null];
-    }
-    // Determine the trackI and cellI values based on the current viewState.
-    const trackI = Math.floor(trackPosition / colorBarSize);
-    let cellI;
-    if (transpose) {
-        const viewMouseX = mouseX - offsetLeft;
-        const bboxTargetX = targetX * scaleFactor + matrixWidth * scaleFactor / 2;
-        const bboxLeft = bboxTargetX - matrixWidth / 2;
-        const zoomedOffsetLeft = bboxLeft / (matrixWidth * scaleFactor);
-        const zoomedViewMouseX = viewMouseX / (matrixWidth * scaleFactor);
-        const zoomedMouseX = zoomedOffsetLeft + zoomedViewMouseX;
-        cellI = Math.floor(zoomedMouseX * numCols);
-        return [cellI, trackI];
-    }
-    // Not transposed
-    const viewMouseY = mouseY - axisOffsetTop;
-    const bboxTargetY = targetY * scaleFactor + matrixHeight * scaleFactor / 2;
-    const bboxTop = bboxTargetY - matrixHeight / 2;
-    const zoomedOffsetTop = bboxTop / (matrixHeight * scaleFactor);
-    const zoomedViewMouseY = viewMouseY / (matrixHeight * scaleFactor);
-    const zoomedMouseY = zoomedOffsetTop + zoomedViewMouseY;
-    cellI = Math.floor(zoomedMouseY * numRows);
-    return [cellI, trackI];
-}

package/dist/utils.test.js

@@ -1,71 +0,0 @@
-import { mouseToHeatmapPosition, heatmapToMousePosition } from './utils';
-describe('heatmap tooltip utils', () => {
-    it('transforms mouse coordinates to row and column indices when zoomed out', () => {
-        const mouseX = 35;
-        const mouseY = 78;
-        const [colI, rowI] = mouseToHeatmapPosition(mouseX, mouseY, {
-            offsetLeft: 10,
-            offsetTop: 10,
-            targetX: 0,
-            targetY: 0,
-            scaleFactor: 1,
-            matrixWidth: 100,
-            matrixHeight: 100,
-            numRows: 5,
-            numCols: 4,
-        });
-        expect(colI).toEqual(1);
-        expect(rowI).toEqual(3);
-    });
-    it('transforms mouse coordinates to row and column indices when zoomed in', () => {
-        const mouseX = 35;
-        const mouseY = 78;
-        const [colI, rowI] = mouseToHeatmapPosition(mouseX, mouseY, {
-            offsetLeft: 10,
-            offsetTop: 10,
-            targetX: 21,
-            targetY: -11,
-            scaleFactor: 4,
-            matrixWidth: 100,
-            matrixHeight: 100,
-            numRows: 5,
-            numCols: 4,
-        });
-        expect(colI).toEqual(2);
-        expect(rowI).toEqual(2);
-    });
-    it('transforms row and column indices when zoomed out', () => {
-        const colI = 1;
-        const rowI = 3;
-        const [mouseX, mouseY] = heatmapToMousePosition(colI, rowI, {
-            offsetLeft: 10,
-            offsetTop: 10,
-            targetX: 0,
-            targetY: 0,
-            scaleFactor: 1,
-            matrixWidth: 100,
-            matrixHeight: 100,
-            numRows: 5,
-            numCols: 4,
-        });
-        expect(mouseX).toEqual(47.5);
-        expect(mouseY).toEqual(80);
-    });
-    it('transforms row and column indices when zoomed in', () => {
-        const colI = 2;
-        const rowI = 2;
-        const [mouseX, mouseY] = heatmapToMousePosition(colI, rowI, {
-            offsetLeft: 10,
-            offsetTop: 10,
-            targetX: 21,
-            targetY: -11,
-            scaleFactor: 4,
-            matrixWidth: 100,
-            matrixHeight: 100,
-            numRows: 5,
-            numCols: 4,
-        });
-        expect(mouseX).toEqual(26);
-        expect(mouseY).toEqual(104);
-    });
-});