@vitessce/heatmap 2.0.3 → 3.0.0

package/dist-tsc/Heatmap.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Heatmap.test.d.ts.map

package/dist-tsc/Heatmap.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.test.d.ts","sourceRoot":"","sources":["../src/Heatmap.test.jsx"],"names":[],"mappings":""}

package/dist-tsc/Heatmap.test.fixtures.d.ts

@@ -0,0 +1,7 @@
+export namespace expressionMatrix {
+    const rows: string[];
+    const cols: string[];
+    const matrix: Uint8Array;
+}
+export const cellColors: Map<string, number[]>;
+//# sourceMappingURL=Heatmap.test.fixtures.d.ts.map

package/dist-tsc/Heatmap.test.fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.test.fixtures.d.ts","sourceRoot":"","sources":["../src/Heatmap.test.fixtures.js"],"names":[],"mappings":";;;;;AAeA,+CAKG"}

package/dist-tsc/Heatmap.test.fixtures.js

@@ -0,0 +1,20 @@
+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-tsc/Heatmap.test.js

@@ -0,0 +1,17 @@
+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 React from 'react';
+import Heatmap from './Heatmap.js';
+import { expressionMatrix, cellColors } from './Heatmap.test.fixtures.js';
+afterEach(() => {
+    cleanup();
+});
+describe('<Heatmap/>', () => {
+    it('renders a DeckGL element', () => {
+        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-tsc/HeatmapOptions.d.ts

@@ -0,0 +1,2 @@
+export default function HeatmapOptions(props: any): JSX.Element;
+//# sourceMappingURL=HeatmapOptions.d.ts.map

package/dist-tsc/HeatmapOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapOptions.d.ts","sourceRoot":"","sources":["../src/HeatmapOptions.js"],"names":[],"mappings":"AAMA,gEAuFC"}

package/dist-tsc/HeatmapOptions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { debounce } from 'lodash-es';
+import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
+import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';
+import { GLSL_COLORMAPS } from '@vitessce/gl';
+export default function HeatmapOptions(props) {
+    const { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible, } = props;
+    const classes = usePlotOptionsStyles();
+    function handleGeneExpressionColormapChange(event) {
+        setGeneExpressionColormap(event.target.value);
+    }
+    function handleTooltipsVisibilityChange(event) {
+        setTooltipsVisible(event.target.checked);
+    }
+    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: "Tooltips Visible" }), _jsx(TableCell, { className: classes.inputCell, children: _jsx(Checkbox, { className: classes.checkbox, 
+                            /**
+                             * We have to use "checked" here, not "value".
+                             * The checkbox state is not persisting with value.
+                             * For reference, https://v4.mui.com/api/checkbox/
+                             */
+                            checked: tooltipsVisible, onChange: handleTooltipsVisibilityChange, name: "gene-expression-colormap-option-toltip-visibility", color: "default" }) })] }), _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-tsc/HeatmapSubscriber.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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.
+ */
+export function HeatmapSubscriber(props: {
+    uuid: number;
+    coordinationScopes: object;
+    removeGridComponent: Function;
+    title: string;
+    transpose: boolean;
+}): JSX.Element;
+//# sourceMappingURL=HeatmapSubscriber.d.ts.map

package/dist-tsc/HeatmapSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapSubscriber.d.ts","sourceRoot":"","sources":["../src/HeatmapSubscriber.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;GAUG;AACH;IATyB,IAAI,EAAlB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACS,SAAS,EAAxB,OAAO;gBA4PjB"}

package/dist-tsc/HeatmapSubscriber.js

@@ -0,0 +1,120 @@
+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, useGetObsMembership, useGetObsInfo, useReady, useUrls, useObsSetsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useMultiObsLabels, useFeatureLabelsData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
+import { capitalize, commaNumber, getCellColors } from '@vitessce/utils';
+import { mergeObsSets, findLongestCommonPath } from '@vitessce/sets-utils';
+import { COMPONENT_COORDINATION_TYPES, ViewType } from '@vitessce/constants-internal';
+import { Legend } from '@vitessce/legend';
+import Heatmap from './Heatmap.js';
+import HeatmapTooltipSubscriber from './HeatmapTooltipSubscriber.js';
+import HeatmapOptions from './HeatmapOptions.js';
+/**
+ * @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.
+ */
+export function HeatmapSubscriber(props) {
+    const { uuid, coordinationScopes, removeGridComponent, theme, transpose, observationsLabelOverride, variablesLabelOverride, 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, tooltipsVisible, }, { setHeatmapZoomX: setZoomX, setHeatmapZoomY: setZoomY, setHeatmapTargetX: setTargetX, setHeatmapTargetY: setTargetY, setObsHighlight: setCellHighlight, setFeatureSelection: setGeneSelection, setObsColorEncoding: setCellColorEncoding, setFeatureHighlight: setGeneHighlight, setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, setFeatureValueColormapRange: setGeneExpressionColormapRange, setFeatureValueColormap: setGeneExpressionColormap, setTooltipsVisible, }] = 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);
+    // We need to know whether the user is currently hovering over the expression part
+    // of the heatmap vs. the color bar part, which will affect whether we call
+    // setObsColorEncoding with 'geneSelection' or 'cellSetSelection' upon a click.
+    const [hoveredColorEncoding, setHoveredColorEncoding] = useState('geneSelection');
+    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 [uint8ObsFeatureMatrix, obsFeatureMatrixExtent] = useUint8ObsFeatureMatrix({ obsFeatureMatrix });
+    const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
+    const cellColors = useMemo(() => getCellColors({
+        cellSets: mergedCellSets,
+        cellSetSelection,
+        cellSetColor,
+        obsIndex,
+        theme,
+    }), [mergedCellSets, theme,
+        cellSetColor, cellSetSelection, obsIndex]);
+    const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+    const getObsMembership = useGetObsMembership(obsSetsMembership);
+    const getFeatureInfo = useCallback((featureId) => {
+        if (featureId) {
+            const featureLabel = featureLabelsMap?.get(featureId) || featureId;
+            return { [`${capitalize(variablesLabel)} ID`]: featureLabel };
+        }
+        return null;
+    }, [variablesLabel, featureLabelsMap]);
+    const expressionMatrix = useMemo(() => {
+        if (obsIndex && featureIndex && uint8ObsFeatureMatrix) {
+            return {
+                rows: obsIndex,
+                cols: (featureLabelsMap
+                    ? featureIndex.map(key => featureLabelsMap.get(key) || key)
+                    : featureIndex),
+                matrix: uint8ObsFeatureMatrix.data,
+            };
+        }
+        return null;
+    }, [obsIndex, featureIndex, uint8ObsFeatureMatrix, 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 onHeatmapClick = () => {
+        if (hoveredColorEncoding === 'geneSelection' && geneHighlight) {
+            setGeneSelection([geneHighlight]);
+            setCellColorEncoding('geneSelection');
+        }
+        else if (hoveredColorEncoding === 'cellSelection' && cellSetSelection) {
+            const selectionFullPath = getObsMembership(cellHighlight);
+            if (selectionFullPath?.length > 0) {
+                const selectionToHighlight = findLongestCommonPath(selectionFullPath, cellSetSelection);
+                if (selectionToHighlight) {
+                    setCellSetSelection([selectionToHighlight]);
+                    setCellColorEncoding('cellSelection');
+                }
+            }
+        }
+    };
+    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, tooltipsVisible: tooltipsVisible, setTooltipsVisible: setTooltipsVisible })), 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, featureIndex: featureIndex, setTrackHighlight: setTrackHighlight, setComponentHover: () => {
+                    setComponentHover(uuid);
+                }, updateViewInfo: setComponentViewInfo, observationsTitle: observationsTitle, variablesTitle: variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels: cellColorLabels, useDevicePixels: true, onHeatmapClick: onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && (_jsx(HeatmapTooltipSubscriber, { parentUuid: uuid, width: width, height: height, transpose: transpose, getObsInfo: getObsInfo, getFeatureInfo: getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] }));
+}

package/dist-tsc/HeatmapTooltipSubscriber.d.ts

@@ -0,0 +1,2 @@
+export default function HeatmapTooltipSubscriber(props: any): JSX.Element | null;
+//# sourceMappingURL=HeatmapTooltipSubscriber.d.ts.map

package/dist-tsc/HeatmapTooltipSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapTooltipSubscriber.d.ts","sourceRoot":"","sources":["../src/HeatmapTooltipSubscriber.js"],"names":[],"mappings":"AAIA,iFA8CC"}

package/dist-tsc/HeatmapTooltipSubscriber.js

@@ -0,0 +1,24 @@
+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-tsc/HeatmapWorkerPool.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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();
+    /**
+     * 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`
+     */
+    process(args: any): array;
+}
+import { Pool } from "@vitessce/utils";
+//# sourceMappingURL=HeatmapWorkerPool.d.ts.map

package/dist-tsc/HeatmapWorkerPool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatmapWorkerPool.d.ts","sourceRoot":"","sources":["../src/HeatmapWorkerPool.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH;IACE,cAEC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,0BAeC;CACF"}

package/dist-tsc/HeatmapWorkerPool.js

@@ -0,0 +1,49 @@
+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-tsc/index.d.ts

@@ -0,0 +1,3 @@
+export { HeatmapSubscriber } from "./HeatmapSubscriber.js";
+export { default as Heatmap } from "./Heatmap.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}

package/dist-tsc/index.js

@@ -1,2 +1,2 @@
-export { HeatmapSubscriber, register } from './HeatmapSubscriber';
-export { default as Heatmap } from './Heatmap';
+export { HeatmapSubscriber } from './HeatmapSubscriber.js';
+export { default as Heatmap } from './Heatmap.js';

package/dist-tsc/utils.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 }: {
+    layer: object;
+    viewport: object;
+}): boolean;
+/**
+ * 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: boolean, longestGeneLabel: string, longestCellLabel: string, hideObservationLabels: boolean, hideVariableLabels: boolean): number[];
+/**
+ * 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: number, mouseY: number, { offsetLeft, offsetTop, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }: object): number[];
+/**
+ * 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: number, rowI: number, { offsetLeft, offsetTop, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }: object): number[];
+/**
+ * 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: number, mouseY: number, { axisOffsetTop, axisOffsetLeft, offsetTop, offsetLeft, colorBarSize, numCellColorTracks, transpose, targetX, targetY, scaleFactor, matrixWidth, matrixHeight, numRows, numCols, }: object): number[];
+//# sourceMappingURL=utils.d.ts.map

package/dist-tsc/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":"AASA;;;;;;;GAOG;AACH;IAJ0B,KAAK,EAApB,MAAM;IACS,QAAQ,EAAvB,MAAM;IACJ,OAAO,CA8BnB;AAqBD;;;;;;;;;;GAUG;AACH,wCARW,OAAO,6EAGP,OAAO,sBACP,OAAO,GAEL,MAAM,EAAE,CAuBpB;AAED;;;;;;GAMG;AACH,+CALW,MAAM,UACN,MAAM,0GACN,MAAM,GACJ,MAAM,EAAE,CAiCpB;AAED;;;;;;GAMG;AACH,6CALW,MAAM,QACN,MAAM,0GACN,MAAM,GACJ,MAAM,EAAE,CA0CpB;AAED;;;;;;GAMG;AACH,iDALW,MAAM,UACN,MAAM,sLACN,MAAM,GACJ,MAAM,EAAE,CAoDpB"}

package/dist-tsc/utils.js

@@ -0,0 +1,181 @@
+import { clamp } from 'lodash-es';
+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-tsc/utils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=utils.test.d.ts.map

package/dist-tsc/utils.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.test.d.ts","sourceRoot":"","sources":["../src/utils.test.js"],"names":[],"mappings":""}