@vitessce/heatmap 2.0.3 → 3.0.0

package/dist-tsc/utils.test.js

@@ -0,0 +1,71 @@
+import { mouseToHeatmapPosition, heatmapToMousePosition } from './utils.js';
+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);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/heatmap",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,28 +8,33 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "plur": "^5.1.0",
-    "uuid": "^3.3.2",
-    "@vitessce/constants-internal": "2.0.3",
-    "@vitessce/gl": "2.0.3",
-    "@vitessce/sets-utils": "2.0.3",
-    "@vitessce/tooltip": "2.0.3",
-    "@vitessce/utils": "2.0.3",
-    "@vitessce/vit-s": "2.0.3",
-    "@vitessce/workers": "2.0.3"
+    "uuid": "^9.0.0",
+    "@vitessce/constants-internal": "3.0.0",
+    "@vitessce/gl": "3.0.0",
+    "@vitessce/legend": "3.0.0",
+    "@vitessce/sets-utils": "3.0.0",
+    "@vitessce/tooltip": "3.0.0",
+    "@vitessce/utils": "3.0.0",
+    "@vitessce/vit-s": "3.0.0",
+    "@vitessce/workers": "3.0.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.3.0",
+    "vitest": "^0.23.4",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -37,5 +42,12 @@
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/Heatmap.js

@@ -2,7 +2,7 @@
 import React, {
   useRef, useState, useCallback, useMemo, useEffect, useReducer, forwardRef,
 } from 'react';
-import uuidv4 from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import {
   deck, luma,
   HeatmapCompositeTextLayer,
@@ -17,9 +17,7 @@ import {
   DATA_TEXTURE_SIZE,
   PIXELATED_TEXTURE_PARAMETERS,
 } from '@vitessce/gl';
-import range from 'lodash/range';
-import clamp from 'lodash/clamp';
-import isEqual from 'lodash/isEqual';
+import { range, clamp, isEqual } from 'lodash-es';
 import {
   getLongestString,
   DEFAULT_GL_OPTIONS,
@@ -38,8 +36,8 @@ import {
   mouseToHeatmapPosition,
   heatmapToMousePosition,
   mouseToCellColorPosition,
-} from './utils';
-import HeatmapWorkerPool from './HeatmapWorkerPool';
+} from './utils.js';
+import HeatmapWorkerPool from './HeatmapWorkerPool.js';
 // Only allocate the memory once for the container
 const paddedExpressionContainer = new Uint8Array(DATA_TEXTURE_SIZE * DATA_TEXTURE_SIZE);
 
@@ -122,6 +120,9 @@ const Heatmap = forwardRef((props, deckRef) => {
     useDevicePixels = 1,
     hideObservationLabels = false,
     hideVariableLabels = false,
+    onHeatmapClick,
+    setColorEncoding,
+    featureIndex,
   } = props;
 
   const viewState = {
@@ -146,6 +147,7 @@ const Heatmap = forwardRef((props, deckRef) => {
   const [axisLeftLabels, setAxisLeftLabels] = useState([]);
   const [axisTopLabels, setAxisTopLabels] = useState([]);
   const [numCellColorTracks, setNumCellColorTracks] = useState([]);
+  const [cursorType, setCursorType] = useState('default');
 
 
   // Since we are storing the tile data in a ref,
@@ -688,8 +690,9 @@ const Heatmap = forwardRef((props, deckRef) => {
     matrixWidth, tileWidth, tileHeight, transpose]);
 
 
+  const showText = width > 0 && height > 0;
   const layers = heatmapLayers
-    .concat(textLayers)
+    .concat(showText ? textLayers : [])
     .concat(...cellColorsLayersList);
 
   // Set up the onHover function.
@@ -698,6 +701,9 @@ const Heatmap = forwardRef((props, deckRef) => {
       return;
     }
 
+    let highlightedCell = null;
+    let highlightedGene = null;
+
     const { x: mouseX, y: mouseY } = event.offsetCenter;
 
     const [trackColI, trackI] = mouseToCellColorPosition(mouseX, mouseY, {
@@ -717,13 +723,18 @@ const Heatmap = forwardRef((props, deckRef) => {
       numCols: width,
     });
 
+    // we are hovering over a gene colored track
     if (trackI === null || trackColI === null) {
       setTrackHighlight(null);
-    } else {
-      const obsI = expression.rows.indexOf(axisTopLabels[trackColI]);
+      setColorEncoding('geneSelection');
+    } else { // we are hovering over a cell colored track
+      const obsI = expression.rows.indexOf(transpose
+        ? axisTopLabels[trackColI]
+        : axisLeftLabels[trackColI]);
       const cellIndex = expression.rows[obsI];
-
       setTrackHighlight([cellIndex, trackI, mouseX, mouseY]);
+      highlightedCell = cellIndex;
+      setColorEncoding('cellSelection');
     }
 
     const [colI, rowI] = mouseToHeatmapPosition(mouseX, mouseY, {
@@ -738,22 +749,6 @@ const Heatmap = forwardRef((props, deckRef) => {
       numCols: width,
     });
 
-    if (colI === null) {
-      if (transpose) {
-        setCellHighlight(null);
-      } else {
-        setGeneHighlight(null);
-      }
-    }
-
-    if (rowI === null) {
-      if (transpose) {
-        setGeneHighlight(null);
-      } else {
-        setCellHighlight(null);
-      }
-    }
-
     const obsI = expression.rows.indexOf(transpose
       ? axisTopLabels[colI]
       : axisLeftLabels[rowI]);
@@ -762,13 +757,32 @@ const Heatmap = forwardRef((props, deckRef) => {
       : axisTopLabels[colI]);
 
     const obsId = expression.rows[obsI];
-    const varId = expression.cols[varI];
+
+    // We need to use featureIndex here,
+    // because expression.cols may be mapped to
+    // use featureLabels (if those were available in the dataset).
+    // Highlights and selections are assumed to be in terms of
+    // obsIndex/featureIndex (as opposed to obsLabels/featureLabels).
+    const varId = featureIndex[varI];
 
     if (setComponentHover) {
       setComponentHover();
     }
-    setCellHighlight(obsId || null);
-    setGeneHighlight(varId || null);
+
+    if (obsId) {
+      highlightedCell = obsId;
+    }
+    if (varId) {
+      highlightedGene = varId;
+    }
+
+    setCellHighlight(highlightedCell);
+    setGeneHighlight(highlightedGene);
+    if (highlightedCell !== null || highlightedGene !== null) {
+      setCursorType('pointer');
+    } else {
+      setCursorType('default');
+    }
   }
 
   const cellColorsViews = useMemo(() => {
@@ -844,12 +858,13 @@ const Heatmap = forwardRef((props, deckRef) => {
       ]}
       layers={layers}
       layerFilter={layerFilter}
-      getCursor={interactionState => (interactionState.isDragging ? 'grabbing' : 'default')}
+      getCursor={interactionState => (interactionState.isDragging ? 'grabbing' : cursorType)}
       glOptions={DEFAULT_GL_OPTIONS}
       onViewStateChange={onViewStateChange}
       viewState={viewState}
       onHover={onHover}
       useDevicePixels={useDevicePixels}
+      onClick={onHeatmapClick}
     />
   );
 });

package/src/Heatmap.test.jsx

@@ -1,17 +1,18 @@
 /* eslint-disable func-names */
 import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach } from 'vitest'
+import { cleanup, render } from '@testing-library/react';
+import { afterEach } from 'vitest';
+import React from 'react';
 
-import Heatmap from './Heatmap';
-import { expressionMatrix, cellColors } from './Heatmap.test.fixtures';
+import Heatmap from './Heatmap.js';
+import { expressionMatrix, cellColors } from './Heatmap.test.fixtures.js';
 
 afterEach(() => {
-  cleanup()
+  cleanup();
 });
 
 describe('<Heatmap/>', () => {
-  it('renders a DeckGL element', function () {
+  it('renders a DeckGL element', () => {
     const { container } = render(
       <Heatmap
         uuid="heatmap-0"

package/src/HeatmapOptions.js

@@ -1,8 +1,6 @@
 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 { 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';
 
@@ -12,6 +10,8 @@ export default function HeatmapOptions(props) {
     setGeneExpressionColormap,
     geneExpressionColormapRange,
     setGeneExpressionColormapRange,
+    tooltipsVisible,
+    setTooltipsVisible,
   } = props;
 
   const classes = usePlotOptionsStyles();
@@ -20,6 +20,10 @@ export default function HeatmapOptions(props) {
     setGeneExpressionColormap(event.target.value);
   }
 
+  function handleTooltipsVisibilityChange(event) {
+    setTooltipsVisible(event.target.checked);
+  }
+
   function handleColormapRangeChange(event, value) {
     setGeneExpressionColormapRange(value);
   }
@@ -49,6 +53,25 @@ export default function HeatmapOptions(props) {
           </OptionSelect>
         </TableCell>
       </TableRow>
+      <TableRow>
+        <TableCell className={classes.labelCell}>
+          Tooltips Visible
+        </TableCell>
+        <TableCell className={classes.inputCell}>
+          <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"
+          />
+        </TableCell>
+      </TableRow>
       <TableRow>
         <TableCell className={classes.labelCell}>
           Gene Expression Colormap Range

package/src/HeatmapSubscriber.js

@@ -5,23 +5,25 @@ import plur from 'plur';
 import {
   TitleInfo,
   useDeckCanvasSize,
+  useGetObsMembership,
   useGetObsInfo,
   useReady,
   useUrls,
   useObsSetsData,
   useObsFeatureMatrixData,
+  useUint8ObsFeatureMatrix,
   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 { mergeObsSets, findLongestCommonPath } 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';
+import { Legend } from '@vitessce/legend';
+import Heatmap from './Heatmap.js';
+import HeatmapTooltipSubscriber from './HeatmapTooltipSubscriber.js';
+import HeatmapOptions from './HeatmapOptions.js';
 
 
 /**
@@ -34,8 +36,6 @@ import HeatmapOptions from './HeatmapOptions';
  * @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 {
@@ -46,7 +46,6 @@ export function HeatmapSubscriber(props) {
     transpose,
     observationsLabelOverride,
     variablesLabelOverride,
-    disableTooltip = false,
     title = 'Heatmap',
   } = props;
 
@@ -71,17 +70,21 @@ export function HeatmapSubscriber(props) {
     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;
@@ -93,6 +96,10 @@ export function HeatmapSubscriber(props) {
   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();
@@ -122,46 +129,50 @@ export function HeatmapSubscriber(props) {
     obsSetsStatus,
   ]);
 
+  const [uint8ObsFeatureMatrix, obsFeatureMatrixExtent] = useUint8ObsFeatureMatrix(
+    { obsFeatureMatrix },
+  );
+
   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,
+  }), [mergedCellSets, theme,
     cellSetColor, cellSetSelection, obsIndex]);
 
   const getObsInfo = useGetObsInfo(
     observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership,
   );
 
+  const getObsMembership = useGetObsMembership(obsSetsMembership);
+
   const getFeatureInfo = useCallback((featureId) => {
     if (featureId) {
-      return { [`${capitalize(variablesLabel)} ID`]: featureId };
+      const featureLabel = featureLabelsMap?.get(featureId) || featureId;
+      return { [`${capitalize(variablesLabel)} ID`]: featureLabel };
     }
     return null;
-  }, [variablesLabel]);
+  }, [variablesLabel, featureLabelsMap]);
 
   const expressionMatrix = useMemo(() => {
-    if (obsIndex && featureIndex && obsFeatureMatrix) {
+    if (obsIndex && featureIndex && uint8ObsFeatureMatrix) {
       return {
         rows: obsIndex,
         cols: (featureLabelsMap
           ? featureIndex.map(key => featureLabelsMap.get(key) || key)
           : featureIndex
         ),
-        matrix: obsFeatureMatrix.data,
+        matrix: uint8ObsFeatureMatrix.data,
       };
     }
     return null;
-  }, [obsIndex, featureIndex, obsFeatureMatrix, featureLabelsMap]);
+  }, [obsIndex, featureIndex, uint8ObsFeatureMatrix, featureLabelsMap]);
 
   const cellsCount = obsIndex ? obsIndex.length : 0;
   const genesCount = featureIndex ? featureIndex.length : 0;
@@ -171,6 +182,22 @@ export function HeatmapSubscriber(props) {
     // 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]);
@@ -191,6 +218,8 @@ export function HeatmapSubscriber(props) {
           setGeneExpressionColormap={setGeneExpressionColormap}
           geneExpressionColormapRange={geneExpressionColormapRange}
           setGeneExpressionColormapRange={setGeneExpressionColormapRange}
+          tooltipsVisible={tooltipsVisible}
+          setTooltipsVisible={setTooltipsVisible}
         />
       )}
     >
@@ -216,6 +245,7 @@ export function HeatmapSubscriber(props) {
         setIsRendering={setIsRendering}
         setCellHighlight={setCellHighlight}
         setGeneHighlight={setGeneHighlight}
+        featureIndex={featureIndex}
         setTrackHighlight={setTrackHighlight}
         setComponentHover={() => {
           setComponentHover(uuid);
@@ -227,8 +257,10 @@ export function HeatmapSubscriber(props) {
         observationsDashes={false}
         cellColorLabels={cellColorLabels}
         useDevicePixels
+        onHeatmapClick={onHeatmapClick}
+        setColorEncoding={setHoveredColorEncoding}
       />
-      {!disableTooltip && (
+      {tooltipsVisible && (
       <HeatmapTooltipSubscriber
         parentUuid={uuid}
         width={width}
@@ -240,14 +272,18 @@ export function HeatmapSubscriber(props) {
         featureHighlight={geneHighlight}
       />
       )}
+      <Legend
+        visible
+        theme={theme}
+        featureType={featureType}
+        featureValueType={featureValueType}
+        obsColorEncoding="geneExpression"
+        considerSelections={false}
+        featureSelection={geneSelection}
+        featureValueColormap={geneExpressionColormap}
+        featureValueColormapRange={geneExpressionColormapRange}
+        extent={obsFeatureMatrixExtent}
+      />
     </TitleInfo>
   );
 }
-
-export function register() {
-  registerPluginViewType(
-    ViewType.HEATMAP,
-    HeatmapSubscriber,
-    COMPONENT_COORDINATION_TYPES[ViewType.HEATMAP],
-  );
-}

package/src/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/src/utils.js

@@ -1,4 +1,4 @@
-import clamp from 'lodash/clamp';
+import { clamp } from 'lodash-es';
 import {
   AXIS_LABEL_TEXT_SIZE,
   AXIS_FONT_FAMILY,

package/src/utils.test.js

@@ -1,4 +1,4 @@
-import { mouseToHeatmapPosition, heatmapToMousePosition } from './utils';
+import { mouseToHeatmapPosition, heatmapToMousePosition } from './utils.js';
 
 describe('heatmap tooltip utils', () => {
   it('transforms mouse coordinates to row and column indices when zoomed out', () => {