@haniffalab/cherita-react 1.3.0-dev.2025-06-06.f1eddad0 → 1.3.1

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Scatterplot = Scatterplot;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _layers = require("@deck.gl/layers");
 var _react2 = require("@deck.gl/react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
@@ -24,10 +24,12 @@ var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
 var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _Resolver = require("../../utils/Resolver");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
+var _PlotAlert = require("../full-page/PlotAlert");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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; }
@@ -43,11 +45,13 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 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 {
@@ -74,11 +78,14 @@ function Scatterplot(_ref) {
     values: []
   });
   const [coordsError, setCoordsError] = (0, _react.useState)(null);
+  const [hasObsm, setHasObsm] = (0, _react.useState)(true);
+  const [dataError, setDataError] = (0, _react.useState)(null);
+  const selectedObs = (0, _Resolver.useSelectedObs)();
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [features, setFeatures] = (0, _react.useState)({
-    type: "FeatureCollection",
+    type: 'FeatureCollection',
     features: settings.polygons[settings.selectedObsm] || []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
@@ -107,13 +114,25 @@ function Scatterplot(_ref) {
       setData(d => {
         let values = d.values;
         if (settings.colorEncoding === _constants.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 === _constants.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: []
@@ -154,7 +173,7 @@ function Scatterplot(_ref) {
         });
       });
     }
-  }, [settings.selectedObsm, getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
+  }, [getRadiusScale, obsmData.data, obsmData.isPending, obsmData.serverError, data.positions]);
   const getBounds = (0, _react.useCallback)(() => {
     var _deckRef$current3, _deckRef$current4;
     const {
@@ -182,8 +201,7 @@ function Scatterplot(_ref) {
     getOriginalIndex,
     sortedIndexMap
   } = (0, _react.useMemo)(() => {
-    var _settings$selectedObs;
-    if ((settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CONTINUOUS) && data.positions && data.values && data.positions.length === data.values.length) {
+    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 {
@@ -200,24 +218,17 @@ 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 = (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) {
-      var _settings$selectedObs3, _settings$selectedObs4;
-      return ((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.type) === _constants.OBS_TYPES.BOOLEAN;
+      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, (_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.type]);
-  (0, _react.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
@@ -226,7 +237,6 @@ function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
-    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
@@ -235,10 +245,10 @@ function Scatterplot(_ref) {
       value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }, useUnsColors && settings.colorEncoding === _constants.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 === _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, 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 = (0, _react.useCallback)((_d, _ref3) => {
@@ -250,7 +260,7 @@ function Scatterplot(_ref) {
   }, [sortedObsIndices]);
   const memoizedLayers = (0, _react.useMemo)(() => {
     return [new _layers.ScatterplotLayer({
-      id: "cherita-layer-scatterplot",
+      id: 'cherita-layer-scatterplot',
       pickable: true,
       data: sortedData.positions,
       radiusScale: radiusScale,
@@ -263,7 +273,7 @@ function Scatterplot(_ref) {
         getRadius: getRadius
       }
     }), new _layers2.EditableGeoJsonLayer({
-      id: "cherita-layer-draw",
+      id: 'cherita-layer-draw',
       data: features,
       mode: mode,
       selectedFeatureIndexes,
@@ -275,7 +285,7 @@ function Scatterplot(_ref) {
         } = _ref4;
         setFeatures(updatedData);
         let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-        if (editType === "addFeature") {
+        if (editType === 'addFeature') {
           const {
             featureIndexes
           } = editContext;
@@ -303,13 +313,13 @@ 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]);
   (0, _react.useEffect)(() => {
     dispatch({
-      type: "set.polygons",
+      type: 'set.polygons',
       obsm: settings.selectedObsm,
       polygons: (features === null || features === void 0 ? void 0 : features.features) || []
     });
@@ -319,7 +329,7 @@ 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;
@@ -334,13 +344,11 @@ 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 === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs && !_lodash.default.some(settings.labelObs, {
-      name: settings.selectedObs.name
-    })) {
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && selectedObs && !_lodash.default.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 === _constants.COLOR_ENCODINGS.VAR && settings.selectedVar) {
       var _data$values2;
@@ -348,82 +356,102 @@ function Scatterplot(_ref) {
     }
     if (settings.labelObs.length) {
       text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
-        const labelObs = _lodash.default.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 ? _lodash.default.compact(text).join("\n") : null,
-      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      text: text.length ? _lodash.default.compact(text).join('\n') : null,
+      className: grayOut ? 'tooltip-grayout' : 'deck-tooltip',
       style: !grayOut ? {
-        "border-left": "3px solid ".concat((0, _colorHelper.rgbToHex)(getFillColor(null, {
+        'border-left': "3px solid ".concat((0, _colorHelper.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 === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.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.default.createElement("div", {
-    className: "cherita-container-scatterplot"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-scatterplot"
-  }, obsmData.isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, {
-    disableShrink: true
-  }), isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), /*#__PURE__*/_react.default.createElement(_react2.DeckGL, {
-    viewState: viewState,
-    onViewStateChange: e => setViewState(e.viewState),
-    controller: {
-      doubleClickZoom: mode === _editModes.ViewMode
-    },
-    layers: layers,
-    onClick: onLayerClick,
-    getTooltip: getTooltip,
-    onAfterRender: () => {
-      setIsRendering(false);
-    },
-    useDevicePixels: false,
-    getCursor: _ref6 => {
-      let {
-        isDragging
-      } = _ref6;
-      return mode !== _editModes.ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
-    },
-    ref: deckRef
-  }), /*#__PURE__*/_react.default.createElement(_SpatialControls.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.default.createElement("div", {
-    className: "cherita-spatial-footer"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-toolbox-footer"
-  }, !!error && !isRendering && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-    variant: "danger"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faTriangleExclamation
-  }), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement(_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 ? (_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.default.createElement(_Legend.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__*/(0, _jsxRuntime.jsx)(_PlotAlert.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__*/(0, _jsxRuntime.jsx)("div", {
+    className: "cherita-container-scatterplot",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-scatterplot",
+      children: [obsmData.isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {
+        disableShrink: true
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.DeckGL, {
+        viewState: viewState,
+        onViewStateChange: e => setViewState(e.viewState),
+        controller: {
+          doubleClickZoom: mode === _editModes.ViewMode
+        },
+        layers: layers,
+        onClick: onLayerClick,
+        getTooltip: getTooltip,
+        onAfterRender: () => {
+          setIsRendering(false);
+        },
+        useDevicePixels: false,
+        getCursor: _ref6 => {
+          let {
+            isDragging
+          } = _ref6;
+          return mode !== _editModes.ViewMode ? 'crosshair' : isDragging ? 'grabbing' : 'grab';
+        },
+        ref: deckRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.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__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "cherita-spatial-footer",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "cherita-toolbox-footer",
+          children: [!!error && !isRendering && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert, {
+            variant: "danger",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Alert.Heading, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faTriangleExclamation
+              }), "\xA0Error loading data"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "mb-0",
+              children: error.message
+            })]
+          }), /*#__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$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
+            slicedLength: parseInt(slicedLength),
+            setHasObsm: setHasObsm
+          })]
+        }), !error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          isCategorical: isCategorical,
+          min: min,
+          max: max
+        })]
+      })]
+    })
+  });
 }

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

@@ -4,21 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScatterplotControls = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
+var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
+var _Resolver = require("../../utils/Resolver");
 var _Controls = require("../controls/Controls");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _jsxRuntime = require("react/jsx-runtime");
 const ScatterplotControls = () => {
-  var _settings$selectedObs;
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const [sliderValue, setSliderValue] = _react.default.useState(settings.controls.range || [0, 1]);
-  const isCategorical = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL : false;
+  const [sliderValue, setSliderValue] = (0, _react.useState)(settings.controls.range || [0, 1]);
+  const {
+    valueMin,
+    valueMax
+  } = (0, _FilterContext.useFilteredData)();
+  const selectedObs = (0, _Resolver.useSelectedObs)();
+  const isCategorical = settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.type) === _constants.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,
@@ -33,36 +39,44 @@ const ScatterplotControls = () => {
   const updateRange = (_e, value) => {
     setSliderValue(value);
     dispatch({
-      type: "set.controls.range",
+      type: 'set.controls.range',
       range: sliderValue
     });
   };
   (0, _react.useEffect)(() => {
     setSliderValue(settings.controls.range);
   }, [settings.controls.range]);
-  const rangeSlider = /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    id: "colorscale-range",
-    gutterBottom: true
-  }, "Colorscale range"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/_react.default.createElement(_material.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
-    className: "mb-2"
-  }, rangeSlider)));
+  const rangeSlider = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "colorscale-range",
+      gutterBottom: true,
+      children: "Colorscale range"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "px-4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Form, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.ColorscaleSelect, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Group, {
+        className: "mb-2",
+        children: rangeSlider
+      })]
+    })
+  });
 };
 exports.ScatterplotControls = ScatterplotControls;