@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.e8bbb191

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

@@ -3,28 +3,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-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";
-import { ViewMode } from "@nebula.gl/edit-modes";
-import { EditableGeoJsonLayer } from "@nebula.gl/layers";
-import _ from "lodash";
-import { Alert } from "react-bootstrap";
-import { SpatialControls } from "./SpatialControls";
-import { Toolbox } from "./Toolbox";
-import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { useZarrData } from "../../context/ZarrDataContext";
-import { rgbToHex, useColor } from "../../helpers/color-helper";
-import { MapHelper } from "../../helpers/map-helper";
-import { Legend } from "../../utils/Legend";
-import { LoadingLinear, LoadingSpinner } from "../../utils/LoadingIndicators";
-import { formatNumerical } from "../../utils/string";
-import { useLabelObsData } from "../../utils/zarrData";
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
+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';
+import { ViewMode } from '@nebula.gl/edit-modes';
+import { EditableGeoJsonLayer } from '@nebula.gl/layers';
+import _ from 'lodash';
+import { Alert } from 'react-bootstrap';
+import { SpatialControls } from './SpatialControls';
+import { Toolbox } from './Toolbox';
+import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { useZarrData } from '../../context/ZarrDataContext';
+import { rgbToHex, useColor } from '../../helpers/color-helper';
+import { MapHelper } from '../../helpers/map-helper';
+import { Legend } from '../../utils/Legend';
+import { LoadingLinear, LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useSelectedObs } from '../../utils/Resolver';
+import { formatNumerical } from '../../utils/string';
+import { useLabelObsData } from '../../utils/zarrData';
+import { PlotAlert } from '../full-page/PlotAlert';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 window.deck.log.level = 1;
 const INITIAL_VIEW_STATE = {
   longitude: 0,
@@ -35,11 +38,13 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 export function Scatterplot(_ref) {
-  var _settings$selectedObs2, _settings$selectedObs5, _settings$selectedObs8, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs9, _data$positions;
+  var _features$features2, _obsmData$serverError, _labelObsData$serverE, _settings$selectedVar, _data$positions;
   let {
     radius = null,
     setShowObs,
     setShowVars,
+    plotType,
+    setPlotType,
     isFullscreen = false
   } = _ref;
   const {
@@ -66,11 +71,14 @@ export function Scatterplot(_ref) {
     values: []
   });
   const [coordsError, setCoordsError] = useState(null);
+  const [hasObsm, setHasObsm] = useState(true);
+  const [dataError, setDataError] = useState(null);
+  const selectedObs = useSelectedObs();
 
   // EditableGeoJsonLayer
   const [mode, setMode] = useState(() => ViewMode);
   const [features, setFeatures] = useState({
-    type: "FeatureCollection",
+    type: 'FeatureCollection',
     features: settings.polygons[settings.selectedObsm] || []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = useState([]);
@@ -99,13 +107,25 @@ export function Scatterplot(_ref) {
       setData(d => {
         let values = d.values;
         if (settings.colorEncoding === COLOR_ENCODINGS.VAR) {
-          values = !xData.serverError ? xData.data : values;
+          if (!xData.serverError) {
+            values = xData.data;
+            setDataError(null);
+          } else {
+            values = [];
+            setDataError(xData.serverError);
+          }
         } else if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
-          values = !obsData.serverError ? obsData.data : values;
+          if (!obsData.serverError) {
+            values = obsData.data;
+            setDataError(null);
+          } else {
+            values = [];
+            setDataError(obsData.serverError);
+          }
         }
         if (!obsmData.serverError && obsmData.data) {
           if (obsmData.data[0].length !== 2) {
-            setCoordsError("Invalid coordinates. Expected 2D coordinates");
+            setCoordsError('Invalid coordinates. Expected 2D coordinates');
             return {
               positions: [],
               values: []
@@ -174,8 +194,7 @@ export function Scatterplot(_ref) {
     getOriginalIndex,
     sortedIndexMap
   } = useMemo(() => {
-    var _settings$selectedObs;
-    if ((settings.colorEncoding === COLOR_ENCODINGS.VAR || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
+    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 {
@@ -192,24 +211,17 @@ export function Scatterplot(_ref) {
       // return original index
       sortedIndexMap: identitySortedIndexMap // return original index
     };
-  }, [data, identityGetOriginalIndex, identitySortedIndexMap, settings.colorEncoding, (_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type]);
+  }, [data, identityGetOriginalIndex, identitySortedIndexMap, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type, settings.colorEncoding]);
   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) {
-      var _settings$selectedObs3, _settings$selectedObs4;
-      return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === OBS_TYPES.BOOLEAN;
+      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, (_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.type]);
-  useEffect(() => {
-    dispatch({
-      type: "set.controls.valueRange",
-      valueRange: [valueMin, valueMax]
-    });
-  }, [dispatch, valueMax, valueMin]);
+  }, [settings.colorEncoding, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type]);
   const {
     min,
     max
@@ -218,7 +230,6 @@ export function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = useCallback((_d, _ref2) => {
-    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
@@ -227,10 +238,10 @@ export function Scatterplot(_ref) {
       value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }, useUnsColors && settings.colorEncoding === COLOR_ENCODINGS.OBS && (_settings$selectedObs6 = settings.selectedObs) !== null && _settings$selectedObs6 !== void 0 && _settings$selectedObs6.colors ? {
-      colorscale: (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.colors
+    }, 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, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.colors]);
+  }, [isPending, sortedObsIndices, 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) => {
@@ -242,7 +253,7 @@ export function Scatterplot(_ref) {
   }, [sortedObsIndices]);
   const memoizedLayers = useMemo(() => {
     return [new ScatterplotLayer({
-      id: "cherita-layer-scatterplot",
+      id: 'cherita-layer-scatterplot',
       pickable: true,
       data: sortedData.positions,
       radiusScale: radiusScale,
@@ -255,7 +266,7 @@ export function Scatterplot(_ref) {
         getRadius: getRadius
       }
     }), new EditableGeoJsonLayer({
-      id: "cherita-layer-draw",
+      id: 'cherita-layer-draw',
       data: features,
       mode: mode,
       selectedFeatureIndexes,
@@ -267,7 +278,7 @@ export function Scatterplot(_ref) {
         } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-        if (editType === "addFeature") {
+        if (editType === 'addFeature') {
           const {
             featureIndexes
           } = editContext;
@@ -295,13 +306,13 @@ export function Scatterplot(_ref) {
     var _features$features;
     if (!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length)) {
       dispatch({
-        type: "disable.slice.polygons"
+        type: 'disable.slice.polygons'
       });
     }
   }, [dispatch, features === null || features === void 0 || (_features$features2 = features.features) === null || _features$features2 === void 0 ? void 0 : _features$features2.length]);
   useEffect(() => {
     dispatch({
-      type: "set.polygons",
+      type: 'set.polygons',
       obsm: settings.selectedObsm,
       polygons: (features === null || features === void 0 ? void 0 : features.features) || []
     });
@@ -311,7 +322,7 @@ export function Scatterplot(_ref) {
       // don't change selection while editing
       return;
     }
-    setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
+    setSelectedFeatureIndexes(f => info.object ? info.layer.id === 'cherita-layer-draw' ? [info.index] : f : []);
   }
   const getLabel = function (o, v) {
     let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -326,13 +337,11 @@ export function Scatterplot(_ref) {
       object,
       index
     } = _ref5;
-    if (!object || (object === null || object === void 0 ? void 0 : object.type) === "Feature") return;
+    if (!object || (object === null || object === void 0 ? void 0 : object.type) === 'Feature') return;
     const text = [];
-    if (settings.colorEncoding === COLOR_ENCODINGS.OBS && settings.selectedObs && !_.some(settings.labelObs, {
-      name: settings.selectedObs.name
-    })) {
+    if (settings.colorEncoding === COLOR_ENCODINGS.OBS && selectedObs && !_.includes(settings.labelObs, selectedObs.name)) {
       var _data$values;
-      text.push(getLabel(settings.selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
+      text.push(getLabel(selectedObs, (_data$values = data.values) === null || _data$values === void 0 ? void 0 : _data$values[getOriginalIndex(index)]));
     }
     if (settings.colorEncoding === COLOR_ENCODINGS.VAR && settings.selectedVar) {
       var _data$values2;
@@ -340,82 +349,102 @@ export function Scatterplot(_ref) {
     }
     if (settings.labelObs.length) {
       text.push(..._.map(labelObsData.data, (v, k) => {
-        const labelObs = _.find(settings.labelObs, o => o.name === k);
+        const labelObs = settings.data.obs[k];
         return getLabel(labelObs, v[getOriginalIndex(index)]);
       }));
     }
     if (!text.length) return;
     const grayOut = sortedObsIndices && !sortedObsIndices.has(index);
     return {
-      text: text.length ? _.compact(text).join("\n") : null,
-      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      text: text.length ? _.compact(text).join('\n') : null,
+      className: grayOut ? 'tooltip-grayout' : 'deck-tooltip',
       style: !grayOut ? {
-        "border-left": "3px solid ".concat(rgbToHex(getFillColor(null, {
+        'border-left': "3px solid ".concat(rgbToHex(getFillColor(null, {
           index
         })))
       } : {
-        "border-left": "none"
+        'border-left': 'none'
       }
     };
   };
-  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-container-scatterplot"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "cherita-scatterplot"
-  }, obsmData.isPending && /*#__PURE__*/React.createElement(LoadingSpinner, {
-    disableShrink: true
-  }), isPending && /*#__PURE__*/React.createElement(LoadingLinear, null), /*#__PURE__*/React.createElement(DeckGL, {
-    viewState: viewState,
-    onViewStateChange: e => setViewState(e.viewState),
-    controller: {
-      doubleClickZoom: mode === ViewMode
-    },
-    layers: layers,
-    onClick: onLayerClick,
-    getTooltip: getTooltip,
-    onAfterRender: () => {
-      setIsRendering(false);
-    },
-    useDevicePixels: false,
-    getCursor: _ref6 => {
-      let {
-        isDragging
-      } = _ref6;
-      return mode !== ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-    },
-    ref: deckRef
-  }), /*#__PURE__*/React.createElement(SpatialControls, {
-    mode: mode,
-    setMode: setMode,
-    features: features,
-    setFeatures: setFeatures,
-    selectedFeatureIndexes: selectedFeatureIndexes,
-    resetBounds: () => setViewState(getBounds()),
-    increaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
-      zoom: v.zoom + 1
-    })),
-    decreaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
-      zoom: v.zoom - 1
-    })),
-    setShowObs: setShowObs,
-    setShowVars: setShowVars,
-    isFullscreen: isFullscreen
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "cherita-spatial-footer"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "cherita-toolbox-footer"
-  }, !!error && !isRendering && /*#__PURE__*/React.createElement(Alert, {
-    variant: "danger"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTriangleExclamation
-  }), "\xA0Error loading data"), /*#__PURE__*/React.createElement(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 ? (_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name : null,
-    obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
-    slicedLength: parseInt(slicedLength)
-  })), /*#__PURE__*/React.createElement(Legend, {
-    isCategorical: isCategorical,
-    min: min,
-    max: max
-  }))));
+  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || dataError || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
+  if (!hasObsm) {
+    return /*#__PURE__*/_jsx(PlotAlert, {
+      variant: "info",
+      heading: "Scatterplot unavailable for this dataset",
+      plotType: plotType,
+      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."
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/_jsx(LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/_jsx(LoadingLinear, {}), /*#__PURE__*/_jsx(DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          return mode !== ViewMode ? 'crosshair' : isDragging ? 'grabbing' : 'grab';
+        },
+        ref: deckRef
+      }), /*#__PURE__*/_jsx(SpatialControls, {
+        mode: mode,
+        setMode: setMode,
+        features: features,
+        setFeatures: setFeatures,
+        selectedFeatureIndexes: selectedFeatureIndexes,
+        resetBounds: () => setViewState(getBounds()),
+        increaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
+          zoom: v.zoom + 1
+        })),
+        decreaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
+          zoom: v.zoom - 1
+        })),
+        setShowObs: setShowObs,
+        setShowVars: setShowVars,
+        isFullscreen: isFullscreen
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "cherita-spatial-footer",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "cherita-toolbox-footer",
+          children: [!!error && !isRendering && /*#__PURE__*/_jsxs(Alert, {
+            variant: "danger",
+            children: [/*#__PURE__*/_jsxs(Alert.Heading, {
+              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: faTriangleExclamation
+              }), "\xA0Error loading data"]
+            }), /*#__PURE__*/_jsx("p", {
+              className: "mb-0",
+              children: error.message
+            })]
+          }), /*#__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$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
+            slicedLength: parseInt(slicedLength),
+            setHasObsm: setHasObsm
+          })]
+        }), !error && /*#__PURE__*/_jsx(Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
+        })]
+      })]
+    })
+  });
 }

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

@@ -1,17 +1,24 @@
-import React, { useEffect } from "react";
-import { Box, Slider, Typography } from "@mui/material";
-import { Form } from "react-bootstrap";
-import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { ColorscaleSelect } from "../controls/Controls";
+import { useState, useEffect } from 'react';
+import { Box, Slider, Typography } from '@mui/material';
+import { Form } from 'react-bootstrap';
+import { COLOR_ENCODINGS, OBS_TYPES } from '../../constants/constants';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { useSelectedObs } from '../../utils/Resolver';
+import { ColorscaleSelect } from '../controls/Controls';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const ScatterplotControls = () => {
-  var _settings$selectedObs;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const [sliderValue, setSliderValue] = React.useState(settings.controls.range || [0, 1]);
-  const isCategorical = settings.colorEncoding === COLOR_ENCODINGS.OBS ? ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === OBS_TYPES.CATEGORICAL : false;
+  const [sliderValue, setSliderValue] = useState(settings.controls.range || [0, 1]);
+  const {
+    valueMin,
+    valueMax
+  } = useFilteredData();
+  const selectedObs = useSelectedObs();
+  const isCategorical = settings.colorEncoding === COLOR_ENCODINGS.OBS ? (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === OBS_TYPES.CATEGORICAL : false;
   const valueLabelFormat = value => {
-    return (value * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]).toFixed(2);
+    return (value * (valueMax - valueMin) + valueMin).toFixed(2);
   };
   const marks = [{
     value: 0,
@@ -26,35 +33,43 @@ export const ScatterplotControls = () => {
   const updateRange = (_e, value) => {
     setSliderValue(value);
     dispatch({
-      type: "set.controls.range",
+      type: 'set.controls.range',
       range: sliderValue
     });
   };
   useEffect(() => {
     setSliderValue(settings.controls.range);
   }, [settings.controls.range]);
-  const rangeSlider = /*#__PURE__*/React.createElement(Box, {
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    id: "colorscale-range",
-    gutterBottom: true
-  }, "Colorscale range"), /*#__PURE__*/React.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/React.createElement(Slider, {
-    "aria-labelledby": "colorscale-range",
-    min: 0,
-    max: 1,
-    step: 0.001,
-    value: sliderValue,
-    onChange: updateSlider,
-    onChangeCommitted: updateRange,
-    valueLabelDisplay: "auto",
-    getAriaValueText: valueLabelFormat,
-    valueLabelFormat: valueLabelFormat,
-    marks: marks,
-    disabled: isCategorical
-  })));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ColorscaleSelect, null), /*#__PURE__*/React.createElement(Form.Group, {
-    className: "mb-2"
-  }, rangeSlider)));
+  const rangeSlider = /*#__PURE__*/_jsxs(Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      id: "colorscale-range",
+      gutterBottom: true,
+      children: "Colorscale range"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "px-4",
+      children: /*#__PURE__*/_jsx(Slider, {
+        "aria-labelledby": "colorscale-range",
+        min: 0,
+        max: 1,
+        step: 0.001,
+        value: sliderValue,
+        onChange: updateSlider,
+        onChangeCommitted: updateRange,
+        valueLabelDisplay: "auto",
+        getAriaValueText: valueLabelFormat,
+        valueLabelFormat: valueLabelFormat,
+        marks: marks,
+        disabled: isCategorical
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Form, {
+      children: [/*#__PURE__*/_jsx(ColorscaleSelect, {}), /*#__PURE__*/_jsx(Form.Group, {
+        className: "mb-2",
+        children: rangeSlider
+      })]
+    })
+  });
 };