@haniffalab/cherita-react 1.4.1-dev.2025-10-22.61540191 → 1.4.1-dev.2025-10-23.3179e534

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

@@ -5,25 +5,31 @@ import { ButtonGroup, Dropdown, Form } from "react-bootstrap";
 import { PSEUDOSPATIAL_CATEGORICAL_MODES as MODES, PSEUDOSPATIAL_PLOT_TYPES as PLOT_TYPES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function CategoricalMode() {
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
+  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/_jsx(Dropdown.Item, {
     active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.categoricalMode",
         categoricalMode: m.value
       });
-    }
-  }, _.capitalize(m.name)));
+    },
+    children: _.capitalize(m.name)
+  }, key));
   const mode = _.find(MODES, {
     value: settings.pseudospatial.categoricalMode
   });
-  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, _.capitalize(mode.name)), /*#__PURE__*/React.createElement(Dropdown.Menu, null, modeList));
+  return /*#__PURE__*/_jsxs(Dropdown, {
+    children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+      variant: "light",
+      children: _.capitalize(mode.name)
+    }), /*#__PURE__*/_jsx(Dropdown.Menu, {
+      children: modeList
+    })]
+  });
 }
 function MaskSet() {
   var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
@@ -32,16 +38,16 @@ function MaskSet() {
   const {
     pseudospatial: maskSets
   } = settings.data;
-  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
+  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/_jsx(Dropdown.Item, {
     active: settings.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
         type: "set.pseudospatial.maskSet",
         maskSet: key
       });
-    }
-  }, _.capitalize(key)));
+    },
+    children: _.capitalize(key)
+  }, key));
   const handleMaskChange = mask => {
     var _settings$pseudospati, _settings$pseudospati2;
     let newMasks = settings.pseudospatial.maskValues || (maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.maskSet]);
@@ -68,28 +74,44 @@ function MaskSet() {
       });
     }
   };
-  const masksList = _.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/React.createElement(Dropdown.ItemText, {
-    key: mask
-  }, /*#__PURE__*/React.createElement(Form.Check, {
-    type: "checkbox",
-    label: mask,
-    checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
-    onChange: () => handleMaskChange(mask)
-  })));
+  const masksList = _.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/_jsx(Dropdown.ItemText, {
+    children: /*#__PURE__*/_jsx(Form.Check, {
+      type: "checkbox",
+      label: mask,
+      checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
+      onChange: () => handleMaskChange(mask)
+    })
+  }, mask));
   const nMasks = settings.pseudospatial.maskValues ? (_settings$pseudospati6 = settings.pseudospatial.maskValues) === null || _settings$pseudospati6 === void 0 ? void 0 : _settings$pseudospati6.length : (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps2 = maskSets[(_settings$pseudospati7 = settings.pseudospatial) === null || _settings$pseudospati7 === void 0 ? void 0 : _settings$pseudospati7.maskSet]) === null || _maskSets$settings$ps2 === void 0 ? void 0 : _maskSets$settings$ps2.length) || "No";
   const toggleAllChecked = !settings.pseudospatial.maskValues || ((_settings$pseudospati8 = settings.pseudospatial.maskValues) === null || _settings$pseudospati8 === void 0 ? void 0 : _settings$pseudospati8.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps3 = maskSets[(_settings$pseudospati9 = settings.pseudospatial) === null || _settings$pseudospati9 === void 0 ? void 0 : _settings$pseudospati9.maskSet]) === null || _maskSets$settings$ps3 === void 0 ? void 0 : _maskSets$settings$ps3.length);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, _.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(Dropdown.ItemText, {
-    key: "toggle-all"
-  }, /*#__PURE__*/React.createElement(Form.Check, {
-    type: "checkbox",
-    label: "Toggle all",
-    checked: toggleAllChecked,
-    onChange: toggleMasks
-  })), masksList)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Dropdown, {
+      children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+        variant: "light",
+        children: _.capitalize(settings.pseudospatial.maskSet || "Select a mask set")
+      }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+        children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+          children: "Mask set"
+        }), maskSetList]
+      })]
+    }), /*#__PURE__*/_jsxs(Dropdown, {
+      children: [/*#__PURE__*/_jsxs(Dropdown.Toggle, {
+        variant: "light",
+        children: [nMasks, " masks selected"]
+      }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+        children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+          children: "Masks"
+        }), /*#__PURE__*/_jsx(Dropdown.ItemText, {
+          children: /*#__PURE__*/_jsx(Form.Check, {
+            type: "checkbox",
+            label: "Toggle all",
+            checked: toggleAllChecked,
+            onChange: toggleMasks
+          })
+        }, "toggle-all"), masksList]
+      })]
+    })]
+  });
 }
 function OpacitySlider(_ref) {
   let {
@@ -97,32 +119,35 @@ function OpacitySlider(_ref) {
     setOpacity
   } = _ref;
   const [sliderValue, setSliderValue] = useState(opacity);
-  return /*#__PURE__*/React.createElement(Box, {
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    id: "opacity-range",
-    gutterBottom: true
-  }, "Reference image opacity"), /*#__PURE__*/React.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/React.createElement(Slider, {
-    "aria-labelledby": "opacity-range",
-    min: 0,
-    max: 1,
-    step: 0.05,
-    value: sliderValue,
-    onChange: (_e, value) => setSliderValue(value),
-    onChangeCommitted: (_e, value) => setOpacity(value),
-    valueLabelDisplay: "auto",
-    getAriaValueText: value => "".concat(value * 100, "%"),
-    valueLabelFormat: value => "".concat((value * 100).toFixed(0), "%"),
-    marks: [{
-      value: 0,
-      label: "0%"
-    }, {
-      value: 1,
-      label: "100%"
-    }]
-  })));
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      id: "opacity-range",
+      gutterBottom: true,
+      children: "Reference image opacity"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "px-4",
+      children: /*#__PURE__*/_jsx(Slider, {
+        "aria-labelledby": "opacity-range",
+        min: 0,
+        max: 1,
+        step: 0.05,
+        value: sliderValue,
+        onChange: (_e, value) => setSliderValue(value),
+        onChangeCommitted: (_e, value) => setOpacity(value),
+        valueLabelDisplay: "auto",
+        getAriaValueText: value => "".concat(value * 100, "%"),
+        valueLabelFormat: value => "".concat((value * 100).toFixed(0), "%"),
+        marks: [{
+          value: 0,
+          label: "0%"
+        }, {
+          value: 1,
+          label: "100%"
+        }]
+      })
+    })]
+  });
 }
 
 // @TODO: add colormap, colorbar slider
@@ -135,15 +160,20 @@ export function PseudospatialToolbar(_ref2) {
   } = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-pseudospatial-toolbar"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(ButtonGroup, null, plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)), imageUrl && /*#__PURE__*/React.createElement(OpacitySlider, {
-    opacity: settings.pseudospatial.refImg.opacity,
-    setOpacity: opacity => {
-      dispatch({
-        type: "set.pseudospatial.refImg.opacity",
-        opacity: opacity
-      });
-    }
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "cherita-pseudospatial-toolbar",
+    children: [/*#__PURE__*/_jsx(ButtonGroup, {
+      children: /*#__PURE__*/_jsx(MaskSet, {})
+    }), /*#__PURE__*/_jsx(ButtonGroup, {
+      children: plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_jsx(CategoricalMode, {})
+    }), imageUrl && /*#__PURE__*/_jsx(OpacitySlider, {
+      opacity: settings.pseudospatial.refImg.opacity,
+      setOpacity: opacity => {
+        dispatch({
+          type: "set.pseudospatial.refImg.opacity",
+          opacity: opacity
+        });
+      }
+    })]
+  });
 }

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

@@ -3,7 +3,7 @@ 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 { 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";
@@ -12,8 +12,6 @@ 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";
@@ -26,6 +24,10 @@ 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 { SpatialControls } from "./SpatialControls";
+import { Toolbox } from "./Toolbox";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 window.deck.log.level = 1;
 const INITIAL_VIEW_STATE = {
   longitude: 0,
@@ -41,6 +43,8 @@ export function Scatterplot(_ref) {
     radius = null,
     setShowObs,
     setShowVars,
+    plotType,
+    setPlotType,
     isFullscreen = false
   } = _ref;
   const {
@@ -67,6 +71,7 @@ export function Scatterplot(_ref) {
     values: []
   });
   const [coordsError, setCoordsError] = useState(null);
+  const [hasObsm, setHasObsm] = useState(true);
   const [dataError, setDataError] = useState(null);
   const selectedObs = useSelectedObs();
 
@@ -363,65 +368,83 @@ export function Scatterplot(_ref) {
     };
   };
   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;
-  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(Alert.Heading, null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTriangleExclamation
-  }), "\xA0Error loading data"), /*#__PURE__*/React.createElement("p", {
-    className: "mb-0"
-  }, error.message)), /*#__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 ? 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)
-  })), !error && /*#__PURE__*/React.createElement(Legend, {
-    isCategorical: isCategorical,
-    min: min,
-    max: max
-  }))));
+  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,4 +1,4 @@
-import React, { useEffect } from "react";
+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";
@@ -6,10 +6,11 @@ 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 = () => {
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const [sliderValue, setSliderValue] = React.useState(settings.controls.range || [0, 1]);
+  const [sliderValue, setSliderValue] = useState(settings.controls.range || [0, 1]);
   const {
     valueMin,
     valueMax
@@ -39,28 +40,36 @@ export const ScatterplotControls = () => {
   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
+      })]
+    })
+  });
 };