@haniffalab/cherita-react 2.0.0 → 2.1.0

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Scatterplot = Scatterplot;
 var _react = require("react");
 var _core = require("@deck.gl/core");
-var _layers = require("@deck.gl/layers");
 var _react2 = require("@deck.gl/react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _editModes = require("@nebula.gl/edit-modes");
-var _layers2 = require("@nebula.gl/layers");
+var _layers = require("@nebula.gl/layers");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _ScatterplotLayer = require("./ScatterplotLayer");
 var _SpatialControls = require("./SpatialControls");
 var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
@@ -29,6 +29,7 @@ var _Resolver = require("../../utils/Resolver");
 var _string = require("../../utils/string");
 var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
 var _zarrData = require("../../utils/zarrData");
+var _scatterplotData = require("../../workers/scatterplotData.js");
 var _PlotAlert = require("../plot/PlotAlert");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -55,15 +56,15 @@ const getRadiusScale = bounds => {
   return rs;
 };
 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
@@ -76,9 +77,6 @@ function Scatterplot(_ref) {
     slicedLength
   } = (0, _FilterContext.useFilteredData)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const {
-    getColor
-  } = (0, _colorHelper.useColor)();
   const deckRef = (0, _react.useRef)(null);
   const [viewport, setViewport] = (0, _react.useState)(null);
   const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
@@ -94,8 +92,6 @@ function Scatterplot(_ref) {
   const radiusScale = settings.controls.radiusScale[settings.selectedObsm] || 1;
   const selectedObs = (0, _Resolver.useSelectedObs)();
   const selectedObsIndex = settings.selectedObsIndex;
-  const [hoveredIndex, setHoveredIndex] = (0, _react.useState)(null);
-  const [isHoveringPoint, setIsHoveringPoint] = (0, _react.useState)(false);
   const {
     showSearchBtn
   } = (0, _usePlotVisibility.default)(isFullscreen);
@@ -114,6 +110,22 @@ function Scatterplot(_ref) {
   } = (0, _ZarrDataContext.useZarrData)();
   const labelObsData = (0, _zarrData.useLabelObsData)();
   const clickedInsideRef = (0, _react.useRef)(false);
+  const workerRef = (0, _react.useRef)(null);
+  const [scatterplotAttributes, setScatterplotAttributes] = (0, _react.useState)(null);
+  const isCategorical = (0, _react.useMemo)(() => {
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      return (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.BOOLEAN;
+    } else {
+      return false;
+    }
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
+  const {
+    colormap,
+    getColor
+  } = (0, _colorHelper.useColor)({
+    isCategorical,
+    colorscale: useUnsColors && settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.colors : null
+  });
 
   // @TODO: assert length of obsmData, xData, obsData is equal
 
@@ -163,7 +175,8 @@ function Scatterplot(_ref) {
     }
   }, [obsData.data, obsData.isPending, obsData.serverError, obsmData.data, obsmData.isPending, obsmData.serverError, settings.colorEncoding, xData.data, xData.isPending, xData.serverError]);
   (0, _react.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.MapHelper();
       const {
@@ -198,10 +211,10 @@ function Scatterplot(_ref) {
     }
   }, [dispatch, settings.controls.radiusScale, settings.selectedObsm, viewport === null || viewport === void 0 ? void 0 : viewport.bounds]);
   (0, _react.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) {
@@ -236,116 +249,110 @@ function Scatterplot(_ref) {
       zoom
     };
   }, [data.positions]);
-
-  // Make stable references for getOriginalIndex and sortedIndexMap
-  const identityGetOriginalIndex = (0, _react.useCallback)(i => i, []);
-  const identitySortedIndexMap = (0, _react.useMemo)(() => ({
-    get: key => key
-  }), []);
-  const {
-    sortedData,
-    getOriginalIndex,
-    sortedIndexMap
-  } = (0, _react.useMemo)(() => {
-    if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
-      const sortedIndices = _lodash.default.map(data.values, (_v, i) => i).sort((a, b) => data.values[a] - data.values[b]);
-      const sortedIndexMap = new Map(_lodash.default.map(sortedIndices, (originalIndex, sortedIndex) => [originalIndex, sortedIndex]));
-      return {
-        sortedData: _lodash.default.mapValues(data, (v, _k) => {
-          return v ? _lodash.default.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 _layers.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 = (0, _react.useMemo)(() => {
-    return obsIndices ? new Set(Array.from(obsIndices, i => sortedIndexMap.get(i))) : obsIndices;
-  }, [obsIndices, sortedIndexMap]);
-  const isCategorical = (0, _react.useMemo)(() => {
-    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      return (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.OBS_TYPES.BOOLEAN;
-    } else {
-      return false;
-    }
-  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
   const {
     min,
     max
-  } = {
+  } = (0, _react.useMemo)(() => ({
     min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
-  };
-  const getFillColor = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    workerRef.current = (0, _scatterplotData.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();
+    };
+  }, []);
+  (0, _react.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 === _constants.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 = (0, _react.useCallback)((_d, _ref3) => {
+  }, [data.positions]);
+  (0, _react.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]);
+  (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => {
-    return [new _layers.ScatterplotLayer({
+    const hasSelection = settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.selectedVar || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs;
+    return [new _ScatterplotLayer.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
-      }
-    }), new _layers2.EditableGeoJsonLayer({
+      colormap: isPending ? ["".concat((0, _colorHelper.rgbToHex)(_constants.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 _layers.EditableGeoJsonLayer({
       id: 'cherita-layer-draw',
       data: features,
       mode: mode,
+      parameters: {
+        depthTest: false
+      },
       selectedFeatureIndexes,
       onEdit: _ref4 => {
         let {
@@ -376,12 +383,9 @@ 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 = (0, _react.useDeferredValue)(mode === _editModes.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 = (0, _react.useDeferredValue)([...memoizedLayers, hoverLayer].filter(Boolean));
   (0, _react.useEffect)(() => {
     var _features$features;
     if (!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length)) {
@@ -398,22 +402,22 @@ function Scatterplot(_ref) {
     });
   }, [settings.selectedObsm, dispatch, features.features]);
   function onLayerClick(info) {
+    var _info$layer, _info$layer2;
     if (mode !== _editModes.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) {
@@ -438,25 +442,26 @@ 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 === _constants.COLOR_ENCODINGS.OBS && selectedObs && !_lodash.default.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 === _constants.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(..._lodash.default.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 ? _lodash.default.compact(text).join('\n') : null,
       className: grayOut ? 'tooltip-grayout' : 'deck-tooltip',
@@ -474,7 +479,7 @@ function Scatterplot(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlotAlert.PlotAlert, {
       variant: "info",
       heading: "Scatterplot unavailable for this dataset",
-      plotType: plotType,
+      plotType: _constants.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."
     });
@@ -498,22 +503,14 @@ 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 !== _editModes.ViewMode) return 'crosshair';
           if (isDragging) return 'grabbing';
-          if (isHoveringPoint) return 'pointer';
+          if (isHovering && pointInteractionEnabled) return 'pointer';
           return 'grab';
         },
         ref: deckRef
@@ -532,7 +529,8 @@ function Scatterplot(_ref) {
         })),
         setShowCategories: setShowCategories,
         setShowSearch: setShowSearch,
-        isFullscreen: isFullscreen
+        isFullscreen: isFullscreen,
+        isSearchObs: isSearchObs
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-spatial-footer",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -549,7 +547,7 @@ function Scatterplot(_ref) {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
             mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.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/cjs/components/scatterplot/ScatterplotLayer.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScatterplotLayer = void 0;
+var _core = require("@luma.gl/core");
+var _deck = require("deck.gl");
+var _constants = require("../../constants/constants");
+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); }
+class ScatterplotLayer extends _deck.ScatterplotLayer {
+  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 _core.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 = [..._constants.GRAY, 255 * _constants.GRAY_ALPHA],
+      grayMix = _constants.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();
+  }
+}
+exports.ScatterplotLayer = ScatterplotLayer;

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

@@ -14,6 +14,7 @@ var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _ScatterplotControls = require("./ScatterplotControls");
+var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _usePlotVisibility = _interopRequireDefault(require("../../utils/usePlotVisibility"));
 var _OffCanvas = require("../offcanvas/OffCanvas");
@@ -32,8 +33,10 @@ function SpatialControls(_ref) {
     decreaseZoom,
     setShowCategories,
     setShowSearch,
-    isFullscreen
+    isFullscreen,
+    isSearchObs = false
   } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
@@ -113,7 +116,7 @@ function SpatialControls(_ref) {
         placement: "right",
         overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
           id: "tooltip-obs",
-          children: "Browse categories"
+          children: "Explore categories"
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           size: isCompact && 'sm',
@@ -124,9 +127,9 @@ function SpatialControls(_ref) {
         })
       }), showSearchBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
         placement: "right",
-        overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
+        overlay: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Tooltip, {
           id: "tooltip-vars",
-          children: "Search features"
+          children: ["Search", ' ', isSearchObs ? dataset.obsLabel.plural : dataset.varLabel.plural]
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           size: isCompact && 'sm',