@haniffalab/cherita-react 1.2.0 → 1.3.0-dev.2025-05-29.ee7e9b72

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

@@ -13,9 +13,11 @@ var _editModes = require("@nebula.gl/edit-modes");
 var _layers2 = require("@nebula.gl/layers");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _SpatialControls = require("./SpatialControls");
+var _Toolbox = require("./Toolbox");
 var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
+var _SettingsContext = require("../../context/SettingsContext");
 var _ZarrDataContext = require("../../context/ZarrDataContext");
 var _colorHelper = require("../../helpers/color-helper");
 var _mapHelper = require("../../helpers/map-helper");
@@ -23,11 +25,13 @@ var _Legend = require("../../utils/Legend");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _string = require("../../utils/string");
 var _zarrData = require("../../utils/zarrData");
-var _SpatialControls = require("./SpatialControls");
-var _Toolbox = require("./Toolbox");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+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); }
 window.deck.log.level = 1;
 const INITIAL_VIEW_STATE = {
   longitude: 0,
@@ -38,17 +42,21 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 function Scatterplot(_ref) {
+  var _settings$selectedObs3, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs4, _obsmData$data;
   let {
-    radius = 30
+    radius = 30,
+    setShowObs,
+    setShowVars,
+    isFullscreen = false
   } = _ref;
-  const dataset = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
     valueMin,
     valueMax,
     slicedLength
   } = (0, _FilterContext.useFilteredData)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -66,7 +74,7 @@ function Scatterplot(_ref) {
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [features, setFeatures] = (0, _react.useState)({
     type: "FeatureCollection",
-    features: dataset.polygons[dataset.selectedObsm] || []
+    features: settings.polygons[settings.selectedObsm] || []
   });
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
   const {
@@ -79,12 +87,12 @@ function Scatterplot(_ref) {
 
   (0, _react.useEffect)(() => {
     if (!obsmData.isPending && !obsmData.serverError) {
+      var _deckRef$current, _deckRef$current2;
       setIsRendering(true);
       setData(d => {
-        return {
-          ...d,
+        return _objectSpread(_objectSpread({}, d), {}, {
           positions: obsmData.data
-        };
+        });
       });
       const mapHelper = new _mapHelper.MapHelper();
       const {
@@ -92,35 +100,34 @@ function Scatterplot(_ref) {
         longitude,
         zoom
       } = mapHelper.fitBounds(obsmData.data, {
-        width: deckRef?.current?.deck?.width,
-        height: deckRef?.current?.deck?.height
+        width: deckRef === null || deckRef === void 0 || (_deckRef$current = deckRef.current) === null || _deckRef$current === void 0 || (_deckRef$current = _deckRef$current.deck) === null || _deckRef$current === void 0 ? void 0 : _deckRef$current.width,
+        height: deckRef === null || deckRef === void 0 || (_deckRef$current2 = deckRef.current) === null || _deckRef$current2 === void 0 || (_deckRef$current2 = _deckRef$current2.deck) === null || _deckRef$current2 === void 0 ? void 0 : _deckRef$current2.height
       });
       setViewState(v => {
-        return {
-          ...v,
+        return _objectSpread(_objectSpread({}, v), {}, {
           longitude: longitude,
           latitude: latitude,
           zoom: zoom
-        };
+        });
       });
     } else if (!obsmData.isPending && obsmData.serverError) {
       setIsRendering(true);
       setData(d => {
-        return {
-          ...d,
+        return _objectSpread(_objectSpread({}, d), {}, {
           positions: []
-        };
+        });
       });
     }
-  }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  }, [settings.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
   const getBounds = (0, _react.useCallback)(() => {
+    var _deckRef$current3, _deckRef$current4;
     const {
       latitude,
       longitude,
       zoom
     } = new _mapHelper.MapHelper().fitBounds(data.positions, {
-      width: deckRef?.current?.deck?.width,
-      height: deckRef?.current?.deck?.height
+      width: deckRef === null || deckRef === void 0 || (_deckRef$current3 = deckRef.current) === null || _deckRef$current3 === void 0 || (_deckRef$current3 = _deckRef$current3.deck) === null || _deckRef$current3 === void 0 ? void 0 : _deckRef$current3.width,
+      height: deckRef === null || deckRef === void 0 || (_deckRef$current4 = deckRef.current) === null || _deckRef$current4 === void 0 || (_deckRef$current4 = _deckRef$current4.deck) === null || _deckRef$current4 === void 0 ? void 0 : _deckRef$current4.height
     });
     return {
       latitude,
@@ -129,69 +136,64 @@ function Scatterplot(_ref) {
     };
   }, [data.positions]);
   (0, _react.useEffect)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
       setIsRendering(true);
       if (!xData.isPending && !xData.serverError) {
         // @TODO: add condition to check obs slicing
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             values: xData.data
-          };
+          });
         });
       } else if (!xData.isPending && xData.serverError) {
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             values: []
-          };
+          });
         });
       }
     }
-  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
+  }, [settings.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
   (0, _react.useEffect)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
       setIsRendering(true);
       if (!obsData.isPending && !obsData.serverError) {
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             values: obsData.data
-          };
+          });
         });
       } else if (!obsData.isPending && obsData.serverError) {
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             values: []
-          };
+          });
         });
       }
-    } else if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && dataset.sliceBy.obs) {
+    } else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.sliceBy.obs) {
       if (!obsData.isPending && !obsData.serverError) {
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             sliceValues: obsData.data
-          };
+          });
         });
       } else if (!obsData.isPending && obsData.serverError) {
         setData(d => {
-          return {
-            ...d,
+          return _objectSpread(_objectSpread({}, d), {}, {
             sliceValues: []
-          };
+          });
         });
       }
     }
-  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, dataset.sliceBy.obs]);
+  }, [settings.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, settings.sliceBy.obs]);
   const isCategorical = (0, _react.useMemo)(() => {
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
-      return dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN;
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+      var _settings$selectedObs, _settings$selectedObs2;
+      return ((_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.type) === _constants.OBS_TYPES.CATEGORICAL || ((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.type) === _constants.OBS_TYPES.BOOLEAN;
     } else {
       return false;
     }
-  }, [dataset.colorEncoding, dataset.selectedObs?.type]);
+  }, [settings.colorEncoding, (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.type]);
   (0, _react.useEffect)(() => {
     dispatch({
       type: "set.controls.valueRange",
@@ -202,8 +204,8 @@ function Scatterplot(_ref) {
     min,
     max
   } = {
-    min: dataset.controls.range[0] * (valueMax - valueMin) + valueMin,
-    max: dataset.controls.range[1] * (valueMax - valueMin) + valueMin
+    min: settings.controls.range[0] * (valueMax - valueMin) + valueMin,
+    max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
     let {
@@ -277,19 +279,20 @@ function Scatterplot(_ref) {
   const layers = (0, _react.useDeferredValue)(mode === _editModes.ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
 
   (0, _react.useEffect)(() => {
-    if (!features?.features?.length) {
+    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"
       });
     }
-  }, [dispatch, features?.features?.length]);
+  }, [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",
-      obsm: dataset.selectedObsm,
-      polygons: features?.features || []
+      obsm: settings.selectedObsm,
+      polygons: (features === null || features === void 0 ? void 0 : features.features) || []
     });
-  }, [dataset.selectedObsm, dispatch, features.features]);
+  }, [settings.selectedObsm, dispatch, features.features]);
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
@@ -300,9 +303,9 @@ function Scatterplot(_ref) {
   const getLabel = function (o, v) {
     let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (isVar || o.type === _constants.OBS_TYPES.CONTINUOUS) {
-      return `${o.name}: ${(0, _string.formatNumerical)(parseFloat(v))}`;
+      return "".concat(o.name, ": ").concat((0, _string.formatNumerical)(parseFloat(v)));
     } else {
-      return `${o.name}: ${o.codesMap[v]}`;
+      return "".concat(o.name, ": ").concat(o.codesMap[v]);
     }
   };
   const getTooltip = _ref5 => {
@@ -310,19 +313,21 @@ function Scatterplot(_ref) {
       object,
       index
     } = _ref5;
-    if (!object || object?.type === "Feature") return;
+    if (!object || (object === null || object === void 0 ? void 0 : object.type) === "Feature") return;
     const text = [];
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs && !_lodash.default.some(dataset.labelObs, {
-      name: dataset.selectedObs.name
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && settings.selectedObs && !_lodash.default.some(settings.labelObs, {
+      name: settings.selectedObs.name
     })) {
-      text.push(getLabel(dataset.selectedObs, obsData.data?.[index]));
+      var _obsData$data;
+      text.push(getLabel(settings.selectedObs, (_obsData$data = obsData.data) === null || _obsData$data === void 0 ? void 0 : _obsData$data[index]));
     }
-    if (dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && dataset.selectedVar) {
-      text.push(getLabel(dataset.selectedVar, xData.data?.[index], true));
+    if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && settings.selectedVar) {
+      var _xData$data;
+      text.push(getLabel(settings.selectedVar, (_xData$data = xData.data) === null || _xData$data === void 0 ? void 0 : _xData$data[index], true));
     }
-    if (dataset.labelObs.length) {
+    if (settings.labelObs.length) {
       text.push(..._lodash.default.map(labelObsData.data, (v, k) => {
-        const labelObs = _lodash.default.find(dataset.labelObs, o => o.name === k);
+        const labelObs = _lodash.default.find(settings.labelObs, o => o.name === k);
         return getLabel(labelObs, v[index]);
       }));
     }
@@ -332,16 +337,16 @@ function Scatterplot(_ref) {
       text: text.length ? _lodash.default.compact(text).join("\n") : null,
       className: grayOut ? "tooltip-grayout" : "deck-tooltip",
       style: !grayOut ? {
-        "border-left": `3px solid ${(0, _colorHelper.rgbToHex)(getFillColor(null, {
+        "border-left": "3px solid ".concat((0, _colorHelper.rgbToHex)(getFillColor(null, {
           index
-        }))}`
+        })))
       } : {
         "border-left": "none"
       }
     };
   };
   const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
-  const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
+  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.lengh && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -375,14 +380,15 @@ function Scatterplot(_ref) {
     setFeatures: setFeatures,
     selectedFeatureIndexes: selectedFeatureIndexes,
     resetBounds: () => setViewState(getBounds()),
-    increaseZoom: () => setViewState(v => ({
-      ...v,
+    increaseZoom: () => setViewState(v => _objectSpread(_objectSpread({}, v), {}, {
       zoom: v.zoom + 1
     })),
-    decreaseZoom: () => setViewState(v => ({
-      ...v,
+    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", {
@@ -392,8 +398,8 @@ function Scatterplot(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTriangleExclamation
   }), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
-    mode: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
-    obsLength: parseInt(obsmData.data?.length),
+    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$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name : null,
+    obsLength: parseInt((_obsmData$data = obsmData.data) === null || _obsmData$data === void 0 ? void 0 : _obsmData$data.length),
     slicedLength: parseInt(slicedLength)
   })), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {
     isCategorical: isCategorical,

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

@@ -6,31 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.ScatterplotControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _colorscales = require("../../constants/colorscales");
 var _constants = require("../../constants/constants");
-var _DatasetContext = require("../../context/DatasetContext");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _SettingsContext = require("../../context/SettingsContext");
+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); }
 const ScatterplotControls = () => {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [sliderValue, setSliderValue] = _react.default.useState(dataset.controls.range || [0, 1]);
-  const isCategorical = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL : false;
-  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    key: key,
-    active: dataset.controls.colorScale === key,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: key
-      });
-    }
-  }, key));
+  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 valueLabelFormat = value => {
-    return (value * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]).toFixed(2);
+    return (value * (settings.controls.valueRange[1] - settings.controls.valueRange[0]) + settings.controls.valueRange[0]).toFixed(2);
   };
   const marks = [{
     value: 0,
@@ -50,14 +38,16 @@ const ScatterplotControls = () => {
     });
   };
   (0, _react.useEffect)(() => {
-    setSliderValue(dataset.controls.range);
-  }, [dataset.controls.range]);
+    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(_material.Slider, {
+  }, "Colorscale range"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "px-4"
+  }, /*#__PURE__*/_react.default.createElement(_material.Slider, {
     "aria-labelledby": "colorscale-range",
     min: 0,
     max: 1,
@@ -70,12 +60,9 @@ const ScatterplotControls = () => {
     valueLabelFormat: valueLabelFormat,
     marks: marks,
     disabled: isCategorical
-  }));
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
-    id: "dropdownColorscale",
-    variant: "light"
-  }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "m-4"
-  }, rangeSlider));
+  })));
+  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)));
 };
 exports.ScatterplotControls = ScatterplotControls;

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

@@ -8,17 +8,20 @@ var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _editModes = require("@nebula.gl/edit-modes");
+var _reactBootstrap = require("react-bootstrap");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _offcanvas = require("../offcanvas");
 var _ScatterplotControls = require("./ScatterplotControls");
+var _SettingsContext = require("../../context/SettingsContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 SpatialControls(_ref) {
+  var _features$features;
   let {
     mode,
     setMode,
@@ -27,13 +30,20 @@ function SpatialControls(_ref) {
     selectedFeatureIndexes,
     resetBounds,
     increaseZoom,
-    decreaseZoom
+    decreaseZoom,
+    setShowObs,
+    setShowVars,
+    isFullscreen
   } = _ref;
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
+  const LgBreakpoint = (0, _useMediaQuery.default)("(max-width: 991.98px)");
+  const XlBreakpoint = (0, _useMediaQuery.default)("(max-width: 1199.98px)");
+  const showObsBtn = isFullscreen ? LgBreakpoint : true;
+  const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
       case "DrawPolygonMode":
@@ -62,7 +72,7 @@ function SpatialControls(_ref) {
     });
   };
   const polygonControls = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    active: dataset.sliceBy.polygons,
+    active: settings.sliceBy.polygons,
     title: "Filter data with polygons",
     onClick: () => {
       setMode(() => _editModes.ViewMode);
@@ -85,10 +95,37 @@ function SpatialControls(_ref) {
   })));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-controls"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+  }, (showObsBtn || showVarsBtn) && /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
     vertical: true,
     className: "w-100 mb-1"
+  }, showObsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-obs"
+    }, "Browse categories")
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faList
+  }))), showVarsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-vars"
+    }, "Search features")
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSearch
+  })))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setMode(() => _editModes.ViewMode),
+    title: "Set dragging mode",
+    active: mode === _editModes.ViewMode
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faHand
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: increaseZoom,
     title: "Increase zoom"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
@@ -98,24 +135,13 @@ function SpatialControls(_ref) {
     title: "Decrease zoom"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faMinus
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "border-bottom"
+  }), " ", /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: resetBounds,
     title: "Reset zoom and center"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faCrosshairs
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleShowControls
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faSliders
-  }))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setMode(() => _editModes.ViewMode),
-    title: "Set dragging mode",
-    active: mode === _editModes.ViewMode
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faHand
   })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     as: _ButtonGroup.default,
     className: "caret-off",
@@ -123,7 +149,7 @@ function SpatialControls(_ref) {
     onSelect: onSelect
   }, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
     id: "dropdown-autoclose-outside",
-    className: `caret-off ${mode === _editModes.DrawPolygonByDraggingMode || mode === _editModes.ModifyMode ? "active" : ""}`
+    className: "caret-off ".concat(mode === _editModes.DrawPolygonByDraggingMode || mode === _editModes.ModifyMode ? "active" : "")
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faDrawPolygon
   })), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Header, null, "Polygon tools"), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
@@ -141,7 +167,11 @@ function SpatialControls(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTrash,
     className: "nav-icon"
-  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+  }), "Delete polygons"))), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders
+  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: _ScatterplotControls.ScatterplotControls

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toolbox = Toolbox;
 var _react = _interopRequireDefault(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _reactBootstrap = require("react-bootstrap");
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
@@ -19,22 +17,7 @@ function Toolbox(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-toolbox"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), mode && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "The color scale is currently set to ", mode)
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet,
-    className: "me-1"
-  }), " ", mode)), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
       id: "tooltip-dropped-mode"