@haniffalab/cherita-react 2.0.0 → 2.1.0

package/dist/esm/components/pseudospatial/Pseudospatial.js

@@ -85,7 +85,8 @@ export function Pseudospatial(_ref) {
     setPlotType
   } = _ref;
   const {
-    imageUrl
+    imageUrl,
+    valueLabel
   } = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -93,7 +94,9 @@ export function Pseudospatial(_ref) {
   const [layout, setLayout] = useState({});
   const {
     getColor
-  } = useColor();
+  } = useColor({
+    isCategorical: false
+  });
   const colorscale = useRef(settings.controls.colorScale);
   const {
     valueMin,
@@ -129,7 +132,7 @@ export function Pseudospatial(_ref) {
           return trace;
         }
         const color = rgbToHex(getColor({
-          value: (v - min) / (max - min)
+          value: (v - min) / Math.max(max - min, 1e-6)
         }));
         return _objectSpread(_objectSpread({}, trace), {}, {
           fillcolor: color,
@@ -172,7 +175,7 @@ export function Pseudospatial(_ref) {
             return trace;
           }
           const color = rgbToHex(getColor({
-            value: (v - min) / (max - min)
+            value: (v - min) / Math.max(max - min, 1e-6)
           }));
           return _objectSpread(_objectSpread({}, trace), {}, {
             fillcolor: color,
@@ -271,7 +274,7 @@ export function Pseudospatial(_ref) {
         }), hasSelections && showLegend && /*#__PURE__*/_jsx(Legend, {
           min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,
           max: layout === null || layout === void 0 || (_layout$coloraxis6 = layout.coloraxis) === null || _layout$coloraxis6 === void 0 ? void 0 : _layout$coloraxis6.cmax,
-          addText: plotType === PLOT_TYPES.GENE ? ' - Mean expression' : plotType === PLOT_TYPES.CATEGORICAL ? ' - %' : plotType === PLOT_TYPES.CONTINUOUS ? ' - Mean value' : ''
+          addText: plotType === PLOT_TYPES.GENE ? " - Mean ".concat(valueLabel) : plotType === PLOT_TYPES.CATEGORICAL ? ' - %' : plotType === PLOT_TYPES.CONTINUOUS ? ' - Mean value' : ''
         })]
       })
     });

package/dist/esm/components/scatterplot/Scatterplot.js

@@ -5,7 +5,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { LinearInterpolator } from '@deck.gl/core';
-import { ScatterplotLayer } from '@deck.gl/layers';
 import { DeckGL } from '@deck.gl/react';
 import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -13,9 +12,10 @@ import { ViewMode } from '@nebula.gl/edit-modes';
 import { EditableGeoJsonLayer } from '@nebula.gl/layers';
 import _ from 'lodash';
 import { Alert } from 'react-bootstrap';
+import { ScatterplotLayer } from './ScatterplotLayer';
 import { SpatialControls } from './SpatialControls';
 import { Toolbox } from './Toolbox';
-import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from '../../constants/constants';
+import { COLOR_ENCODINGS, OBS_TYPES, PLOT_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR, GRAY } from '../../constants/constants';
 import { useDataset } from '../../context/DatasetContext';
 import { useFilteredData } from '../../context/FilterContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
@@ -28,6 +28,7 @@ import { useSelectedObs } from '../../utils/Resolver';
 import { formatNumerical } from '../../utils/string';
 import usePlotVisibility from '../../utils/usePlotVisibility';
 import { useLabelObsData } from '../../utils/zarrData';
+import { createScatterplotWorker } from '../../workers/scatterplotData.js';
 import { PlotAlert } from '../plot/PlotAlert';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 window.deck.log.level = 1;
@@ -48,15 +49,15 @@ const getRadiusScale = bounds => {
   return rs;
 };
 export function Scatterplot(_ref) {
-  var _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions2;
+  var _data$positions5, _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions6;
   let {
+    pointInteractionEnabled = false,
+    showSpatialControls = true,
     setShowCategories,
     setShowSearch,
-    plotType,
     setPlotType,
     isFullscreen = false,
-    pointInteractionEnabled = false,
-    showSpatialControls = true
+    isSearchObs
   } = _ref;
   const {
     useUnsColors
@@ -69,9 +70,6 @@ export function Scatterplot(_ref) {
     slicedLength
   } = useFilteredData();
   const dispatch = useSettingsDispatch();
-  const {
-    getColor
-  } = useColor();
   const deckRef = useRef(null);
   const [viewport, setViewport] = useState(null);
   const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
@@ -87,8 +85,6 @@ export function Scatterplot(_ref) {
   const radiusScale = settings.controls.radiusScale[settings.selectedObsm] || 1;
   const selectedObs = useSelectedObs();
   const selectedObsIndex = settings.selectedObsIndex;
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const [isHoveringPoint, setIsHoveringPoint] = useState(false);
   const {
     showSearchBtn
   } = usePlotVisibility(isFullscreen);
@@ -107,6 +103,22 @@ export function Scatterplot(_ref) {
   } = useZarrData();
   const labelObsData = useLabelObsData();
   const clickedInsideRef = useRef(false);
+  const workerRef = useRef(null);
+  const [scatterplotAttributes, setScatterplotAttributes] = useState(null);
+  const isCategorical = useMemo(() => {
+    if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
+      return (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.BOOLEAN;
+    } else {
+      return false;
+    }
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
+  const {
+    colormap,
+    getColor
+  } = useColor({
+    isCategorical,
+    colorscale: useUnsColors && settings.colorEncoding === COLOR_ENCODINGS.OBS ? selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors : null
+  });
 
   // @TODO: assert length of obsmData, xData, obsData is equal
 
@@ -156,7 +168,8 @@ export function Scatterplot(_ref) {
     }
   }, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
   useEffect(() => {
-    if (data.positions && data.positions.length) {
+    var _data$positions;
+    if ((_data$positions = data.positions) !== null && _data$positions !== void 0 && _data$positions.length) {
       var _deckRef$current, _deckRef$current2;
       const mapHelper = new MapHelper();
       const {
@@ -191,10 +204,10 @@ export function Scatterplot(_ref) {
     }
   }, [dispatch, settings.controls.radiusScale, settings.selectedObsm, viewport === null || viewport === void 0 ? void 0 : viewport.bounds]);
   useEffect(() => {
-    var _data$positions;
+    var _data$positions2;
     if (!pointInteractionEnabled) return;
     if (selectedObsIndex == null) return;
-    if (!((_data$positions = data.positions) !== null && _data$positions !== void 0 && _data$positions.length)) return;
+    if (!((_data$positions2 = data.positions) !== null && _data$positions2 !== void 0 && _data$positions2.length)) return;
 
     // If the selection came from a click inside this plot, skip recentering
     if (clickedInsideRef.current) {
@@ -229,116 +242,110 @@ export function Scatterplot(_ref) {
       zoom
     };
   }, [data.positions]);
-
-  // Make stable references for getOriginalIndex and sortedIndexMap
-  const identityGetOriginalIndex = useCallback(i => i, []);
-  const identitySortedIndexMap = useMemo(() => ({
-    get: key => key
-  }), []);
-  const {
-    sortedData,
-    getOriginalIndex,
-    sortedIndexMap
-  } = useMemo(() => {
-    if ((settings.colorEncoding === COLOR_ENCODINGS.VAR || settings.colorEncoding === COLOR_ENCODINGS.OBS && (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
-      const sortedIndices = _.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
-      const sortedIndexMap = new Map(_.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
-      return {
-        sortedData: _.mapValues(data, (v, _k) => {
-          return v ? _.at(v, sortedIndices) : v;
-        }),
-        getOriginalIndex: i => sortedIndices[i],
-        sortedIndexMap: sortedIndexMap
-      };
-    }
-    return {
-      sortedData: data,
-      getOriginalIndex: identityGetOriginalIndex,
-      // return original index
-      sortedIndexMap: identitySortedIndexMap // return original index
-    };
-  }, [data, identityGetOriginalIndex, identitySortedIndexMap, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, settings.colorEncoding]);
-  const hoverLayer = typeof hoveredIndex === 'number' && Array.isArray(sortedData === null || sortedData === void 0 ? void 0 : sortedData.positions) && hoveredIndex < sortedData.positions.length ? new ScatterplotLayer({
-    id: 'hover-highlight',
-    data: [sortedData.positions[hoveredIndex]],
-    getPosition: d => d,
-    getFillColor: [255, 215, 0, 180],
-    getRadius: 10,
-    radiusMinPixels: 15,
-    radiusScale: 1,
-    pointSizeUnits: 'pixels',
-    pickable: false,
-    parameters: {
-      depthTest: false
-    }
-  }) : null;
-  const sortedObsIndices = useMemo(() => {
-    return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
-  }, [obsIndices, sortedIndexMap]);
-  const isCategorical = useMemo(() => {
-    if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
-      return (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.BOOLEAN;
-    } else {
-      return false;
-    }
-  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
   const {
     min,
     max
-  } = {
+  } = useMemo(() => ({
     min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
-  };
-  const getFillColor = useCallback((_d, _ref2) => {
-    let {
-      index
-    } = _ref2;
-    const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
-    if (pointInteractionEnabled && getOriginalIndex(index) === selectedObsIndex) {
-      return [255, 215, 0, 255];
+  }), [settings.controls.range, valueMax, valueMin]);
+  useEffect(() => {
+    workerRef.current = createScatterplotWorker();
+    workerRef.current.onmessage = _ref2 => {
+      let {
+        data
+      } = _ref2;
+      setScatterplotAttributes(p => _objectSpread(_objectSpread({}, p), data));
+    };
+    workerRef.current.onerror = e => {
+      console.error('Worker error:', e);
+    };
+    return () => {
+      var _workerRef$current;
+      (_workerRef$current = workerRef.current) === null || _workerRef$current === void 0 || _workerRef$current.terminate();
+    };
+  }, []);
+  useEffect(() => {
+    var _data$positions3;
+    if (workerRef.current && (_data$positions3 = data.positions) !== null && _data$positions3 !== void 0 && _data$positions3.length) {
+      workerRef.current.postMessage({
+        positions: data.positions
+      });
     }
-    return getColor(_objectSpread({
-      value: (sortedData.values[index] - min) / (max - min),
-      categorical: isCategorical,
-      grayOut: grayOut
-    }, useUnsColors && settings.colorEncoding === COLOR_ENCODINGS.OBS && selectedObs !== null && selectedObs !== void 0 && selectedObs.colors ? {
-      colorscale: selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors
-    } : {})) || [0, 0, 0, 100];
-  }, [isPending, sortedObsIndices, pointInteractionEnabled, getOriginalIndex, selectedObsIndex, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors]);
-
-  // @TODO: add support for pseudospatial hover to reflect in radius
-  const getRadius = useCallback((_d, _ref3) => {
+  }, [data.positions]);
+  useEffect(() => {
+    var _data$values;
+    if (workerRef.current && (_data$values = data.values) !== null && _data$values !== void 0 && _data$values.length) {
+      workerRef.current.postMessage({
+        values: data.values
+      });
+    }
+  }, [data.values]);
+  useEffect(() => {
+    var _data$positions4;
+    if (workerRef.current && (_data$positions4 = data.positions) !== null && _data$positions4 !== void 0 && _data$positions4.length && obsIndices !== undefined) {
+      workerRef.current.postMessage({
+        obsIndices,
+        length: data.positions.length
+      });
+    }
+  }, [obsIndices, (_data$positions5 = data.positions) === null || _data$positions5 === void 0 ? void 0 : _data$positions5.length]);
+  const getFillColor = useCallback((_d, _ref3) => {
     let {
       index
     } = _ref3;
-    const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
-    if (pointInteractionEnabled && getOriginalIndex(index) === selectedObsIndex) {
-      return 50;
+    const grayOut = isPending || obsIndices && !obsIndices.has(index);
+    if (pointInteractionEnabled && index === selectedObsIndex) {
+      return [255, 215, 0, 255];
     }
-    return (grayOut ? 1 : 3) * (pointInteractionEnabled ? 26 : 1);
-  }, [getOriginalIndex, pointInteractionEnabled, selectedObsIndex, sortedObsIndices]);
+    return getColor({
+      value: (data.values[index] - min) / Math.max(max - min, 1e-6),
+      grayOut: grayOut
+    }) || [0, 0, 0, 100];
+  }, [isPending, obsIndices, pointInteractionEnabled, selectedObsIndex, getColor, data.values, min, max]);
   const memoizedLayers = useMemo(() => {
+    const hasSelection = settings.colorEncoding === COLOR_ENCODINGS.VAR && settings.selectedVar || settings.colorEncoding === COLOR_ENCODINGS.OBS && selectedObs;
     return [new ScatterplotLayer({
       id: 'cherita-layer-scatterplot',
       pickable: true,
-      data: sortedData.positions,
+      autoHighlight: true,
+      highlightColor: pointInteractionEnabled ? [255, 215, 0, 255] : [0, 0, 0, 0],
+      data: {
+        length: (scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.count) || 0,
+        attributes: {
+          getPosition: {
+            value: (scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.positions) || new Float32Array(0),
+            size: 2
+          },
+          getValues: {
+            value: scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.values,
+            size: 1
+          },
+          getEnabled: {
+            value: scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.indexEnabledBitmask,
+            size: 1
+          }
+        }
+      },
       radiusScale: radiusScale,
       radiusMinPixels: 1,
-      getPosition: d => d,
-      getFillColor: getFillColor,
-      getRadius: getRadius,
       updateTriggers: {
-        getFillColor: getFillColor,
-        getRadius: [getRadius, hoveredIndex, selectedObsIndex]
+        colormap: [colormap]
       },
-      transitions: {
-        getRadius: 200,
-        getFillColor: 200
-      }
+      colormap: isPending ? ["".concat(rgbToHex(GRAY), "aa")] : hasSelection ? colormap : ['#000000aa'],
+      isCategorical,
+      valueMin: min,
+      valueMax: max,
+      selectedIndex: pointInteractionEnabled ? selectedObsIndex !== null && selectedObsIndex !== void 0 ? selectedObsIndex : -1 : -1,
+      pointInteractionEnabled,
+      highlightMultiplier: pointInteractionEnabled ? 1.5 : 1.0
     }), new EditableGeoJsonLayer({
       id: 'cherita-layer-draw',
       data: features,
       mode: mode,
+      parameters: {
+        depthTest: false
+      },
       selectedFeatureIndexes,
       onEdit: _ref4 => {
         let {
@@ -369,12 +376,9 @@ export function Scatterplot(_ref) {
         }
       }
     })];
-  }, [sortedData.positions, features, getFillColor, getRadius, hoveredIndex, mode, radiusScale, selectedFeatureIndexes, selectedObsIndex]);
+  }, [settings.colorEncoding, settings.selectedVar, selectedObs, pointInteractionEnabled, scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.count, scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.positions, scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.values, scatterplotAttributes === null || scatterplotAttributes === void 0 ? void 0 : scatterplotAttributes.indexEnabledBitmask, radiusScale, colormap, isPending, isCategorical, min, max, selectedObsIndex, features, mode, selectedFeatureIndexes]);
+  const layers = useDeferredValue(mode === ViewMode ? [...memoizedLayers].reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
-  // const layers = useDeferredValue(
-  //   mode === ViewMode ? memoizedLayers.reverse() : memoizedLayers,
-  // ); // draw scatterplot on top of polygons when in ViewMode
-  const layers = useDeferredValue([...memoizedLayers, hoverLayer].filter(Boolean));
   useEffect(() => {
     var _features$features;
     if (!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length)) {
@@ -391,22 +395,22 @@ export function Scatterplot(_ref) {
     });
   }, [settings.selectedObsm, dispatch, features.features]);
   function onLayerClick(info) {
+    var _info$layer, _info$layer2;
     if (mode !== ViewMode) return;
-    if (!info.object) {
+    if (info.index === undefined || info.index === null) {
       // clicked empty space
       setSelectedFeatureIndexes([]);
       return;
     }
-    if (info.layer.id === 'cherita-layer-draw') {
+    if (((_info$layer = info.layer) === null || _info$layer === void 0 ? void 0 : _info$layer.id) === 'cherita-layer-draw') {
       // clicked a drawn polygon
       setSelectedFeatureIndexes([info.index]);
-    } else if (info.layer.id === 'cherita-layer-scatterplot' && pointInteractionEnabled) {
+    } else if (((_info$layer2 = info.layer) === null || _info$layer2 === void 0 ? void 0 : _info$layer2.id) === 'cherita-layer-scatterplot' && pointInteractionEnabled) {
       // clicked a scatterplot point
       clickedInsideRef.current = true;
-      const originalIndex = getOriginalIndex(info.index);
       dispatch({
         type: 'set.selectedObsIndex',
-        index: originalIndex
+        index: info.index
       });
       // in collapsed view, open offcanvas
       if (pointInteractionEnabled && showSearchBtn) {
@@ -431,25 +435,26 @@ export function Scatterplot(_ref) {
       object,
       index
     } = _ref5;
-    if (!object || (object === null || object === void 0 ? void 0 : object.type) === 'Feature') return;
+    if ((object === null || object === void 0 ? void 0 : object.type) === 'Feature') return;
+    if (index < 0 || index === null) return;
     const text = [];
     if (settings.colorEncoding === COLOR_ENCODINGS.OBS && selectedObs && !_.includes(settings.labelObs, selectedObs.name)) {
-      var _data$values;
-      text.push(getLabel(selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
+      var _data$values2;
+      text.push(getLabel(selectedObs, (_data$values2 = data.values) === null || _data$values2 === void 0 ? void 0 : _data$values2[index]));
     }
     if (settings.colorEncoding === COLOR_ENCODINGS.VAR && settings.selectedVar) {
-      var _data$values2;
-      text.push(getLabel(settings.selectedVar, (_data$values2 = data.values) === null || _data$values2 === void 0 ? void 0 : _data$values2[getOriginalIndex(index)], true));
+      var _data$values3;
+      text.push(getLabel(settings.selectedVar, (_data$values3 = data.values) === null || _data$values3 === void 0 ? void 0 : _data$values3[index], true));
     }
     if (settings.labelObs.length) {
       text.push(..._.map(labelObsData.data, (v, k) => {
         if (!v) return;
         const labelObs = settings.data.obs[k];
-        return getLabel(labelObs, v[getOriginalIndex(index)]);
+        return getLabel(labelObs, v[index]);
       }));
     }
     if (!text.length) return;
-    const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
+    const grayOut = obsIndices && !obsIndices.has(index);
     return {
       text: text.length ? _.compact(text).join('\n') : null,
       className: grayOut ? 'tooltip-grayout' : 'deck-tooltip',
@@ -467,7 +472,7 @@ export function Scatterplot(_ref) {
     return /*#__PURE__*/_jsx(PlotAlert, {
       variant: "info",
       heading: "Scatterplot unavailable for this dataset",
-      plotType: plotType,
+      plotType: PLOT_TYPES.SCATTERPLOT,
       setPlotType: setPlotType,
       children: "This dataset does not include any embeddings, so a scatterplot cannot be displayed. Please choose a different plot type to explore the data."
     });
@@ -491,22 +496,14 @@ export function Scatterplot(_ref) {
           setIsRendering(false);
         },
         useDevicePixels: false,
-        onHover: _ref6 => {
+        getCursor: _ref6 => {
           let {
-            object,
-            index
+            isDragging,
+            isHovering
           } = _ref6;
-          const active = pointInteractionEnabled && !!object;
-          setHoveredIndex(active ? index : null);
-          setIsHoveringPoint(active);
-        },
-        getCursor: _ref7 => {
-          let {
-            isDragging
-          } = _ref7;
           if (mode !== ViewMode) return 'crosshair';
           if (isDragging) return 'grabbing';
-          if (isHoveringPoint) return 'pointer';
+          if (isHovering && pointInteractionEnabled) return 'pointer';
           return 'grab';
         },
         ref: deckRef
@@ -525,7 +522,8 @@ export function Scatterplot(_ref) {
         })),
         setShowCategories: setShowCategories,
         setShowSearch: setShowSearch,
-        isFullscreen: isFullscreen
+        isFullscreen: isFullscreen,
+        isSearchObs: isSearchObs
       }), /*#__PURE__*/_jsxs("div", {
         className: "cherita-spatial-footer",
         children: [/*#__PURE__*/_jsxs("div", {
@@ -542,7 +540,7 @@ export function Scatterplot(_ref) {
             })]
           }), /*#__PURE__*/_jsx(Toolbox, {
             mode: settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === COLOR_ENCODINGS.OBS ? selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.name : null,
-            obsLength: parseInt((_data$positions2 = data.positions) === null || _data$positions2 === void 0 ? void 0 : _data$positions2.length),
+            obsLength: parseInt((_data$positions6 = data.positions) === null || _data$positions6 === void 0 ? void 0 : _data$positions6.length),
             slicedLength: parseInt(slicedLength),
             setHasObsm: setHasObsm
           })]

package/dist/esm/components/scatterplot/ScatterplotLayer.js

@@ -0,0 +1,137 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Texture2D } from '@luma.gl/core';
+import { ScatterplotLayer as BaseLayer } from 'deck.gl';
+import { GRAY, GRAY_ALPHA, GRAY_MIX } from '../../constants/constants';
+export class ScatterplotLayer extends BaseLayer {
+  getShaders() {
+    const shaders = super.getShaders();
+    return _objectSpread(_objectSpread({}, shaders), {}, {
+      inject: {
+        'vs:#decl': "\n          in float value;\n          in float indexEnabled;\n          in float instanceIndex;\n          out float vNormValue;\n          out float vSelected;\n          out float vEnabled;\n          uniform float highlightMultiplier;\n          uniform bool isCategorical;\n          uniform float valueMin;\n          uniform float valueMax;\n          uniform bool pointInteractionEnabled;\n          uniform float selectedIndex;\n        ",
+        // add z-axis position based on sortValue, zMin, and zMax
+        // to draw higher sortValue points above lower sortValue points
+        // and picked points at the front
+        'vs:DECKGL_FILTER_GL_POSITION': "\n          float normValue = clamp((value - valueMin) / max(valueMax - valueMin, 1e-6), 0.0, 1.0);\n          if (isVertexPicked(geometry.pickingColor)) {\n            position.z = -position.w;\n          }\n          else if (indexEnabled < 0.5) {\n            position.z = position.w;\n          }\n          else if (isCategorical) {\n            if (value == -1.0) {\n              position.z = position.w; // draw invalid at back\n            }\n            else { position.z = 0.0; }\n          }\n          else {\n            position.z = mix(position.w, -position.w, normValue);\n          }\n        ",
+        // increase point size for hovered points
+        'vs:DECKGL_FILTER_SIZE': "\n          if (pointInteractionEnabled) {\n            size *= 4.0;\n            if(instanceIndex == selectedIndex) {\n              size *= 3.0;\n            }\n          }\n          if (isVertexPicked(geometry.pickingColor)) {\n            size *= highlightMultiplier;\n          }\n          if (indexEnabled < 0.5) {\n            size *= 0.3;\n          }\n        ",
+        // Pass colorValue to fragment shader
+        'vs:DECKGL_FILTER_COLOR': "\n          float normValue = clamp((value - valueMin) / max(valueMax - valueMin, 1e-6), 0.0, 1.0);\n          vNormValue = normValue;\n          vEnabled = indexEnabled;\n          vSelected = float(instanceIndex == selectedIndex);\n        ",
+        'fs:#decl': "\n          in float vNormValue;\n          in float vEnabled;\n          in float vSelected;\n          uniform sampler2D colorTexture;\n          uniform bool useTexture;\n          uniform float colormapSize;\n          uniform vec4 gray;\n          uniform float grayMix;\n        ",
+        // Sample color from texture in fragment shader
+        'fs:DECKGL_FILTER_COLOR': "\n          if (useTexture) {\n            // Remap to texel centers so sampling matches JS interpolation\n            float u = (vNormValue * (colormapSize - 1.0) + 0.5) / colormapSize;\n            color = texture(colorTexture, vec2(u, 0.5));\n          }\n          if (vEnabled < 0.5) {\n            color.rgb = mix(color.rgb, gray.rgb / 255.0, grayMix);\n            color.a = gray.a / 255.0;\n          }\n          if(vSelected > 0.5) {\n            color = picking_uHighlightColor;\n          }\n        "
+      }
+    });
+  }
+  initializeState() {
+    super.initializeState();
+    this.getAttributeManager().addInstanced({
+      value: {
+        size: 1,
+        accessor: 'getValues',
+        defaultValue: 0.0
+      },
+      indexEnabled: {
+        size: 1,
+        accessor: 'getEnabled',
+        defaultValue: 1.0
+      },
+      instanceIndex: {
+        size: 1,
+        accessor: (_, _ref) => {
+          let {
+            index
+          } = _ref;
+          return index;
+        },
+        defaultValue: 0
+      }
+    });
+  }
+  updateState(params) {
+    super.updateState(params);
+    const {
+      props,
+      oldProps,
+      changeFlags
+    } = params;
+    if (props.colormap !== oldProps.colormap || changeFlags.extensionsChanged) {
+      this._updateColorTexture(props.colormap);
+    }
+  }
+  _updateColorTexture(colormap) {
+    const {
+      gl
+    } = this.context;
+
+    // colormap is an array of hex strings
+    const colors = colormap.flatMap(hex => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      const a = parseInt(hex.slice(7, 9) || 'ff', 16);
+      return [r, g, b, a];
+    });
+    if (this.state.colorTexture) {
+      this.state.colorTexture.delete();
+    }
+    const texture = new Texture2D(gl, {
+      data: new Uint8Array(colors),
+      width: colormap === null || colormap === void 0 ? void 0 : colormap.length,
+      height: 1,
+      format: gl.RGBA,
+      type: gl.UNSIGNED_BYTE,
+      parameters: {
+        [gl.TEXTURE_MIN_FILTER]: gl.LINEAR,
+        [gl.TEXTURE_MAG_FILTER]: gl.LINEAR,
+        [gl.TEXTURE_WRAP_S]: gl.CLAMP_TO_EDGE,
+        [gl.TEXTURE_WRAP_T]: gl.CLAMP_TO_EDGE
+      }
+    });
+    this.setState({
+      colorTexture: texture
+    });
+  }
+  draw(params) {
+    var _this$props$colormap$, _this$props$colormap;
+    const {
+      highlightMultiplier = 1.0,
+      isCategorical = false,
+      valueMin = 0,
+      valueMax = 0,
+      pointInteractionEnabled = false,
+      selectedIndex = -1,
+      gray = [...GRAY, 255 * GRAY_ALPHA],
+      grayMix = GRAY_MIX
+    } = this.props;
+    const {
+      colorTexture
+    } = this.state;
+    const model = this.state.model;
+    if (!model) {
+      return;
+    }
+    model.setUniforms({
+      highlightMultiplier,
+      colorTexture: colorTexture || null,
+      useTexture: !!colorTexture,
+      colormapSize: (_this$props$colormap$ = (_this$props$colormap = this.props.colormap) === null || _this$props$colormap === void 0 ? void 0 : _this$props$colormap.length) !== null && _this$props$colormap$ !== void 0 ? _this$props$colormap$ : 1,
+      isCategorical,
+      valueMin: isNaN(valueMin) ? 0 : valueMin,
+      valueMax: isNaN(valueMax) ? 0 : valueMax,
+      pointInteractionEnabled,
+      selectedIndex,
+      gray,
+      grayMix
+    });
+    super.draw(params);
+  }
+  finalizeState(context) {
+    var _this$state$colorText;
+    super.finalizeState(context);
+    (_this$state$colorText = this.state.colorTexture) === null || _this$state$colorText === void 0 || _this$state$colorText.delete();
+  }
+}

package/dist/esm/components/scatterplot/SpatialControls.js

@@ -8,6 +8,7 @@ import Button from 'react-bootstrap/Button';
 import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import Dropdown from 'react-bootstrap/Dropdown';
 import { ScatterplotControls } from './ScatterplotControls';
+import { useDataset } from '../../context/DatasetContext';
 import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 import usePlotVisibility from '../../utils/usePlotVisibility';
 import { OffcanvasControls } from '../offcanvas/OffCanvas';
@@ -25,8 +26,10 @@ export function SpatialControls(_ref) {
     decreaseZoom,
     setShowCategories,
     setShowSearch,
-    isFullscreen
+    isFullscreen,
+    isSearchObs = false
   } = _ref;
+  const dataset = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
   const [showControls, setShowControls] = useState(false);
@@ -106,7 +109,7 @@ export function SpatialControls(_ref) {
         placement: "right",
         overlay: /*#__PURE__*/_jsx(Tooltip, {
           id: "tooltip-obs",
-          children: "Browse categories"
+          children: "Explore categories"
         }),
         children: /*#__PURE__*/_jsx(Button, {
           size: isCompact && 'sm',
@@ -117,9 +120,9 @@ export function SpatialControls(_ref) {
         })
       }), showSearchBtn && /*#__PURE__*/_jsx(OverlayTrigger, {
         placement: "right",
-        overlay: /*#__PURE__*/_jsx(Tooltip, {
+        overlay: /*#__PURE__*/_jsxs(Tooltip, {
           id: "tooltip-vars",
-          children: "Search features"
+          children: ["Search", ' ', isSearchObs ? dataset.obsLabel.plural : dataset.varLabel.plural]
         }),
         children: /*#__PURE__*/_jsx(Button, {
           size: isCompact && 'sm',