@vitessce/heatmap 3.5.2 → 3.5.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a, H } from "./index-6ef9e70c.js";
+import { a, H } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-578f0ca5.js → jpeg-66adb130.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6ef9e70c.js";
+import { B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-357448de.js → lerc-53ffc64c.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-6ef9e70c.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-fde46e44.js → lzw-f00259f5.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6ef9e70c.js";
+import { B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-5ed5b9c6.js → packbits-a8d6509a.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6ef9e70c.js";
+import { B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-f6b0dad1.js → raw-4e18410c.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6ef9e70c.js";
+import { B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-13174dd3.js → webimage-8894b594.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-6ef9e70c.js";
+import { B as BaseDecoder } from "./index-fc077d81.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

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

@@ -1 +1 @@
-{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../src/Heatmap.js"],"names":[],"mappings":";AAsDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,2BAywBG"}
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../src/Heatmap.js"],"names":[],"mappings":";AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,2BAixBG"}

package/dist-tsc/Heatmap.js

@@ -4,7 +4,7 @@ import React, { useRef, useState, useCallback, useMemo, useEffect, useReducer, f
 import { v4 as uuidv4 } from 'uuid';
 import { deck, luma, HeatmapCompositeTextLayer, PixelatedBitmapLayer, PaddedExpressionHeatmapBitmapLayer, HeatmapBitmapLayer, TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG, COLOR_BAR_SIZE, AXIS_MARGIN, DATA_TEXTURE_SIZE, PIXELATED_TEXTURE_PARAMETERS, } from '@vitessce/gl';
 import { range, clamp, isEqual } from 'lodash-es';
-import { getLongestString, DEFAULT_GL_OPTIONS, createDefaultUpdateCellsHover, createDefaultUpdateGenesHover, createDefaultUpdateTracksHover, createDefaultUpdateViewInfo, copyUint8Array, getDefaultColor, } from '@vitessce/utils';
+import { getLongestString, DEFAULT_GL_OPTIONS, createDefaultUpdateCellsHover, createDefaultUpdateGenesHover, createDefaultUpdateTracksHover, createDefaultUpdateViewInfo, copyUint8Array, getDefaultColor, cleanFeatureId, } from '@vitessce/utils';
 import { layerFilter, getAxisSizes, mouseToHeatmapPosition, heatmapToMousePosition, mouseToCellColorPosition, } from './utils.js';
 import HeatmapWorkerPool from './HeatmapWorkerPool.js';
 // Only allocate the memory once for the container
@@ -386,10 +386,14 @@ const Heatmap = forwardRef((props, deckRef) => {
     // We do the mapping with featureLabelsMap here at one of the final steps before rendering
     // since it is for presentational purposes.
     const axisTopLabelData = useMemo(() => (!transpose && featureLabelsMap
-        ? axisTopLabels.map(d => featureLabelsMap.get(d) || d)
+        ? axisTopLabels.map(d => (featureLabelsMap.get(d)
+            || featureLabelsMap.get(cleanFeatureId(d))
+            || d))
         : axisTopLabels).map((d, i) => [i, (axisTopDashes ? `- ${d}` : d)]), [axisTopLabels, axisTopDashes, transpose, featureLabelsMap]);
     const axisLeftLabelData = useMemo(() => (transpose && featureLabelsMap
-        ? axisLeftLabels.map(d => featureLabelsMap.get(d) || d)
+        ? axisLeftLabels.map(d => (featureLabelsMap.get(d)
+            || featureLabelsMap.get(cleanFeatureId(d))
+            || d))
         : axisLeftLabels).map((d, i) => [i, (axisLeftDashes ? `${d} -` : d)]), [axisLeftLabels, axisLeftDashes, transpose, featureLabelsMap]);
     const cellColorLabelsData = useMemo(() => cellColorLabels.map((d, i) => [i, d && (transpose ? `${d} -` : `- ${d}`)]), [cellColorLabels, transpose]);
     const hideTopLabels = (transpose ? hideObservationLabels : hideVariableLabels);

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

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

package/dist-tsc/HeatmapSubscriber.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useCallback, useMemo, } from 'react';
-import { TitleInfo, useDeckCanvasSize, useGetObsMembership, useGetObsInfo, useReady, useUrls, useObsSetsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useMultiObsLabels, useFeatureLabelsData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, } from '@vitessce/vit-s';
-import { pluralize as plur, capitalize, commaNumber } from '@vitessce/utils';
+import { TitleInfo, useDeckCanvasSize, useGetObsMembership, useGetObsInfo, useReady, useUrls, useObsSetsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useMultiObsLabels, useFeatureLabelsData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useExpandedFeatureLabelsMap, } from '@vitessce/vit-s';
+import { pluralize as plur, capitalize, commaNumber, cleanFeatureId } from '@vitessce/utils';
 import { mergeObsSets, findLongestCommonPath, getCellColors } from '@vitessce/sets-utils';
 import { COMPONENT_COORDINATION_TYPES, ViewType, ViewHelpMapping } from '@vitessce/constants-internal';
 import { Legend } from '@vitessce/legend';
@@ -41,11 +41,14 @@ export function HeatmapSubscriber(props) {
     // Get data from loaders using the data hooks.
     const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
     // TODO: support multiple feature labels using featureLabelsType coordination values.
-    const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+    // eslint-disable-next-line max-len
+    const [{ featureLabelsMap: featureLabelsMapOrig }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+    const [featureLabelsMap, expandedFeatureLabelsStatus] = useExpandedFeatureLabelsMap(featureType, featureLabelsMapOrig, { stripCuriePrefixes: true });
     const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls,] = useObsFeatureMatrixData(loaders, dataset, true, {}, {}, { obsType, featureType, featureValueType });
     const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
     const isReady = useReady([
         featureLabelsStatus,
+        expandedFeatureLabelsStatus,
         matrixStatus,
         obsSetsStatus,
     ]);
@@ -68,7 +71,9 @@ export function HeatmapSubscriber(props) {
     const getObsMembership = useGetObsMembership(obsSetsMembership);
     const getFeatureInfo = useCallback((featureId) => {
         if (featureId) {
-            const featureLabel = featureLabelsMap?.get(featureId) || featureId;
+            const featureLabel = (featureLabelsMap?.get(featureId)
+                || featureLabelsMap?.get(cleanFeatureId(featureId))
+                || featureId);
             return { [`${capitalize(variablesLabel)} ID`]: featureLabel };
         }
         return null;
@@ -107,5 +112,5 @@ export function HeatmapSubscriber(props) {
                     setTargetY(target[1]);
                 }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height, width: width, theme: theme, uuid: uuid, uint8ObsFeatureMatrix: uint8ObsFeatureMatrix?.data, cellColors: cellColors, colormap: geneExpressionColormap, setIsRendering: setIsRendering, setCellHighlight: setCellHighlight, setGeneHighlight: setGeneHighlight, featureLabelsMap: featureLabelsMap, obsIndex: obsIndex, 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, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] }));
+                }, 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, featureType: featureType, featureLabelsMap: featureLabelsMap })), _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] }));
 }

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

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

package/dist-tsc/HeatmapTooltipSubscriber.js

@@ -3,7 +3,7 @@ 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 { parentUuid, width, height, transpose, getObsInfo, getFeatureInfo, obsHighlight, featureHighlight, featureType, featureLabelsMap, } = props;
     const sourceUuid = useComponentHover();
     const viewInfo = useComponentViewInfo(parentUuid);
     const [cellInfo, cellCoord] = (obsHighlight && getObsInfo ? ([
@@ -20,5 +20,5 @@ export default function HeatmapTooltipSubscriber(props) {
     ]) : ([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));
+    return ((cellInfo || geneInfo ? (_jsx(Tooltip2D, { x: x, y: y, parentUuid: parentUuid, parentWidth: width, parentHeight: height, sourceUuid: sourceUuid, children: _jsx(TooltipContent, { info: { ...geneInfo, ...cellInfo }, featureType: featureType, featureLabelsMap: featureLabelsMap }) })) : null));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/heatmap",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,14 +20,14 @@
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.5.2",
-    "@vitessce/gl": "3.5.2",
-    "@vitessce/legend": "3.5.2",
-    "@vitessce/sets-utils": "3.5.2",
-    "@vitessce/tooltip": "3.5.2",
-    "@vitessce/utils": "3.5.2",
-    "@vitessce/vit-s": "3.5.2",
-    "@vitessce/workers": "3.5.2"
+    "@vitessce/constants-internal": "3.5.3",
+    "@vitessce/gl": "3.5.3",
+    "@vitessce/legend": "3.5.3",
+    "@vitessce/sets-utils": "3.5.3",
+    "@vitessce/tooltip": "3.5.3",
+    "@vitessce/utils": "3.5.3",
+    "@vitessce/vit-s": "3.5.3",
+    "@vitessce/workers": "3.5.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/Heatmap.js

@@ -27,6 +27,7 @@ import {
   createDefaultUpdateViewInfo,
   copyUint8Array,
   getDefaultColor,
+  cleanFeatureId,
 } from '@vitessce/utils';
 
 
@@ -511,11 +512,19 @@ const Heatmap = forwardRef((props, deckRef) => {
   // We do the mapping with featureLabelsMap here at one of the final steps before rendering
   // since it is for presentational purposes.
   const axisTopLabelData = useMemo(() => (!transpose && featureLabelsMap
-    ? axisTopLabels.map(d => featureLabelsMap.get(d) || d)
+    ? axisTopLabels.map(d => (
+      featureLabelsMap.get(d)
+      || featureLabelsMap.get(cleanFeatureId(d))
+      || d
+    ))
     : axisTopLabels
   ).map((d, i) => [i, (axisTopDashes ? `- ${d}` : d)]), [axisTopLabels, axisTopDashes, transpose, featureLabelsMap]);
   const axisLeftLabelData = useMemo(() => (transpose && featureLabelsMap
-    ? axisLeftLabels.map(d => featureLabelsMap.get(d) || d)
+    ? axisLeftLabels.map(d => (
+      featureLabelsMap.get(d)
+      || featureLabelsMap.get(cleanFeatureId(d))
+      || d
+    ))
     : axisLeftLabels
   ).map((d, i) => [i, (axisLeftDashes ? `${d} -` : d)]), [axisLeftLabels, axisLeftDashes, transpose, featureLabelsMap]);
   const cellColorLabelsData = useMemo(() => cellColorLabels.map((d, i) => [i, d && (transpose ? `${d} -` : `- ${d}`)]), [cellColorLabels, transpose]);

package/src/HeatmapSubscriber.js

@@ -15,8 +15,9 @@ import {
   useFeatureLabelsData,
   useCoordination, useLoaders,
   useSetComponentHover, useSetComponentViewInfo,
+  useExpandedFeatureLabelsMap,
 } from '@vitessce/vit-s';
-import { pluralize as plur, capitalize, commaNumber } from '@vitessce/utils';
+import { pluralize as plur, capitalize, commaNumber, cleanFeatureId } from '@vitessce/utils';
 import { mergeObsSets, findLongestCommonPath, getCellColors } from '@vitessce/sets-utils';
 import { COMPONENT_COORDINATION_TYPES, ViewType, ViewHelpMapping } from '@vitessce/constants-internal';
 import { Legend } from '@vitessce/legend';
@@ -110,10 +111,15 @@ export function HeatmapSubscriber(props) {
     coordinationScopes, obsType, loaders, dataset,
   );
   // TODO: support multiple feature labels using featureLabelsType coordination values.
-  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
+  // eslint-disable-next-line max-len
+  const [{ featureLabelsMap: featureLabelsMapOrig }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
     loaders, dataset, false, {}, {},
     { featureType },
   );
+  const [featureLabelsMap, expandedFeatureLabelsStatus] = useExpandedFeatureLabelsMap(
+    featureType, featureLabelsMapOrig, { stripCuriePrefixes: true },
+  );
+
   const [
     { obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls,
   ] = useObsFeatureMatrixData(
@@ -128,6 +134,7 @@ export function HeatmapSubscriber(props) {
   );
   const isReady = useReady([
     featureLabelsStatus,
+    expandedFeatureLabelsStatus,
     matrixStatus,
     obsSetsStatus,
   ]);
@@ -162,7 +169,11 @@ export function HeatmapSubscriber(props) {
 
   const getFeatureInfo = useCallback((featureId) => {
     if (featureId) {
-      const featureLabel = featureLabelsMap?.get(featureId) || featureId;
+      const featureLabel = (
+        featureLabelsMap?.get(featureId)
+        || featureLabelsMap?.get(cleanFeatureId(featureId))
+        || featureId
+      );
       return { [`${capitalize(variablesLabel)} ID`]: featureLabel };
     }
     return null;
@@ -269,6 +280,8 @@ export function HeatmapSubscriber(props) {
         getFeatureInfo={getFeatureInfo}
         obsHighlight={cellHighlight}
         featureHighlight={geneHighlight}
+        featureType={featureType}
+        featureLabelsMap={featureLabelsMap}
       />
       )}
       <Legend

package/src/HeatmapTooltipSubscriber.js

@@ -8,6 +8,8 @@ export default function HeatmapTooltipSubscriber(props) {
     width, height, transpose,
     getObsInfo, getFeatureInfo,
     obsHighlight, featureHighlight,
+    featureType,
+    featureLabelsMap,
   } = props;
 
   const sourceUuid = useComponentHover();
@@ -44,7 +46,11 @@ export default function HeatmapTooltipSubscriber(props) {
         parentHeight={height}
         sourceUuid={sourceUuid}
       >
-        <TooltipContent info={{ ...geneInfo, ...cellInfo }} />
+        <TooltipContent
+          info={{ ...geneInfo, ...cellInfo }}
+          featureType={featureType}
+          featureLabelsMap={featureLabelsMap}
+        />
       </Tooltip2D>
     ) : null)
   );