@haniffalab/cherita-react 0.2.0-dev.2024-05-09.07fb18ed → 0.2.0-dev.2024-05-21.ca7d726c

package/dist/components/obs-list/ObsList.js

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _requests = require("../../utils/requests");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _colorHelper = require("../../helpers/color-helper");
 var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _reactBootstrap = require("react-bootstrap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -59,7 +58,6 @@ function ObsColsList() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
-  const colorHelper = new _colorHelper.ColorHelper();
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
@@ -133,7 +131,7 @@ function ObsColsList() {
       value: obs
     });
   }, [obs, dispatch]);
-  function categoricalList(item) {
+  const categoricalList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -143,19 +141,25 @@ function ObsColsList() {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
           variant: "flush",
-          children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup.Item, {
-            children: [value, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "cm-string cm-color",
-              style: {
-                backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
-              }
-            })]
+          children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "d-flex justify-content-between",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "text-wrap text-break",
+                children: value
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "cm-string cm-color",
+                style: {
+                  backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
+                }
+              })]
+            })
           }, index))
         })
       })]
     }, item.name);
-  }
-  function continuousList(item) {
+  }, [obs]);
+  const continuousList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -176,8 +180,8 @@ function ObsColsList() {
         })]
       })]
     }, item.name);
-  }
-  function otherList(item) {
+  }, []);
+  const otherList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
@@ -188,7 +192,7 @@ function ObsColsList() {
         children: item.type
       })]
     }, item.name);
-  }
+  }, []);
   const obsList = (0, _react.useMemo)(() => obsColsList.map(item => {
     if (item.type === "categorical") {
       return categoricalList(item, active);
@@ -197,7 +201,7 @@ function ObsColsList() {
     } else {
       return otherList(item, active);
     }
-  }), [obsColsList, active]);
+  }), [obsColsList, categoricalList, active, continuousList, otherList]);
   if (!serverError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "position-relative",
@@ -212,6 +216,10 @@ function ObsColsList() {
                 type: "obsSelected",
                 obs: obsColsList.find(obs => obs.name === key)
               });
+              dispatch({
+                type: "set.colorEncoding",
+                value: "obs"
+              });
             }
           },
           children: obsList

package/dist/components/scatterplot/Legend.js

@@ -4,63 +4,73 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Legend = Legend;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = require("react");
-var _DatasetContext = require("../../context/DatasetContext");
+require("bootstrap/dist/css/bootstrap.min.css");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _colorHelper = require("../../helpers/color-helper");
-var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
-var _layers = require("@nebula.gl/layers");
-var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
-var _constants = require("../../constants/constants");
-var _editModes = require("@nebula.gl/edit-modes");
-var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
-var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
-var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _DatasetContext = require("../../context/DatasetContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Legend(_ref) {
   let {
-    values
+    scale
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
-  const colorHelper = new _colorHelper.ColorHelper();
-  if (dataset.colorEncoding === "var") {
-    let c = colorHelper.getScale(dataset, values);
-    var dom = c.domain ? c.domain() : [0, 1],
-      dmin = Math.min(dom[0], dom[dom.length - 1]),
-      dmax = Math.max(dom[dom.length - 1], dom[0]);
-    let legendList = [];
-    for (var i = 0; i <= 100; i++) {
-      var color = c(dmin + i / 100 * (dmax - dmin));
-      //console.log(color.hex());
-      legendList.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "grad-step",
-        style: {
-          backgroundColor: color.hex()
-        }
-      }, i));
+  const [legendData, setLegendData] = (0, _react.useState)({
+    dmin: 0,
+    dmax: 1,
+    list: []
+  });
+  (0, _react.useEffect)(() => {
+    if (scale) {
+      const dom = scale.domain ? scale.domain() : [0, 1];
+      const dmin = Math.min(dom[0], dom[dom.length - 1]);
+      const dmax = Math.max(dom[dom.length - 1], dom[0]);
+      const spanList = _lodash.default.range(100).map(i => {
+        var color = scale(dmin + i / 100 * (dmax - dmin)).hex();
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "grad-step",
+          style: {
+            backgroundColor: color
+          }
+        }, i);
+      });
+      setLegendData({
+        dmin: dmin,
+        dmax: dmax,
+        list: spanList
+      });
     }
+  }, [scale]);
+  if (dataset.colorEncoding === "var" && scale) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "cherita-legend",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "gradient",
-        children: [legendList, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "small m-0 p-0",
+          children: dataset.selectedVar ? dataset.selectedVar.name : ""
+        }), legendData.list, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-min",
-          children: dmin.toString()
+          children: legendData.dmin.toFixed(1)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-med",
-          children: ((dmin + dmax) * 0.5).toString()
+          children: ((legendData.dmin + legendData.dmax) * 0.5).toFixed(1)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "domain-max",
-          children: dmax.toString()
+          children: legendData.dmax.toFixed(1)
         })]
       })
     });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "cherita-legend",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "gradient",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "small m-0 p-0",
+          children: dataset.selectedObs ? dataset.selectedObs.name : ""
+        })
+      })
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 }

package/dist/components/scatterplot/Scatterplot.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Scatterplot = Scatterplot;
 exports.ScatterplotControls = ScatterplotControls;
-require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+require("bootstrap/dist/css/bootstrap.min.css");
 var _react2 = _interopRequireDefault(require("@deck.gl/react"));
 var _layers = require("@deck.gl/layers");
 var _layers2 = require("@nebula.gl/layers");
@@ -19,6 +20,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _mapHelper = require("../../helpers/map-helper");
 var _zarrHelper = require("../../helpers/zarr-helper");
 var _colorHelper = require("../../helpers/color-helper");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -47,138 +49,232 @@ function ScatterplotControls() {
     })]
   });
 }
+const INITIAL_VIEW_STATE = {
+  longitude: 0,
+  latitude: 0,
+  zoom: 0,
+  maxZoom: 16,
+  pitch: 0,
+  bearing: 0
+};
+const DEFAULT_DATA_POINT = {
+  value: null,
+  position: null,
+  color: null
+};
 function Scatterplot(_ref) {
+  var _dataset$selectedObs;
   let {
     radius = 30
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const {
+    getScale,
+    getColor
+  } = (0, _colorHelper.useColor)();
+  const [viewState, setViewState] = (0, _react.useState)(INITIAL_VIEW_STATE);
   const [features, setFeatures] = (0, _react.useState)({
     type: "FeatureCollection",
     features: []
   });
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = (0, _react.useState)([]);
-  let [featureState, setFeatureState] = (0, _react.useState)([]);
-  let [data, setData] = (0, _react.useState)([]);
-  let [position, setPosition] = (0, _react.useState)([]);
-  let [values, setValues] = (0, _react.useState)([]);
-  let [viewport, setViewport] = (0, _react.useState)({
-    longitude: 0,
-    latitude: 0,
-    zoom: 0,
-    maxZoom: 16,
-    pitch: 0,
-    bearing: 0
+  const [featureState, setFeatureState] = (0, _react.useState)([]);
+  const [scale, setScale] = (0, _react.useState)(() => getScale());
+  const [data, setData] = (0, _react.useState)([]);
+  const [obsmParams, setObsmParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obsm/" + dataset.selectedObsm
   });
+  const [xParams, setXParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "X"
+  });
+  const [obsParams, setObsParams] = (0, _react.useState)({
+    url: dataset.url,
+    path: "obs/" + ((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) + "/codes"
+  });
+
+  // needs to be wrapped in useMemo as it is an array an could cause an infinite loop otherwise
+  const xSelection = (0, _react.useMemo)(() => {
+    var _dataset$selectedVar;
+    return [null, (_dataset$selectedVar = dataset.selectedVar) === null || _dataset$selectedVar === void 0 ? void 0 : _dataset$selectedVar.matrix_index];
+  }, [dataset.selectedVar]);
+  const obsmData = (0, _zarrHelper.useZarr)(obsmParams, null, _zarrHelper.GET_OPTIONS);
+  const xData = (0, _zarrHelper.useZarr)(xParams, xSelection, _zarrHelper.GET_OPTIONS);
+  const obsData = (0, _zarrHelper.useZarr)(obsParams, null, _zarrHelper.GET_OPTIONS);
+  (0, _react.useEffect)(() => {
+    setObsmParams(p => {
+      return {
+        ...p,
+        path: "obsm/" + dataset.selectedObsm
+      };
+    });
+  }, [dataset.selectedObsm]);
+  (0, _react.useEffect)(() => {
+    setXParams(p => {
+      var _dataset$selectedVar2;
+      return {
+        ...p,
+        s: [null, (_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index]
+      };
+    });
+  }, [dataset.selectedVar]);
+  (0, _react.useEffect)(() => {
+    setObsParams(p => {
+      var _dataset$selectedObs2;
+      return {
+        ...p,
+        path: "obs/" + ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) + "/codes"
+      };
+    });
+  }, [dataset.selectedObs]);
+  (0, _react.useEffect)(() => {
+    setObsmParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+    setXParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+    setObsParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+
+  // @TODO: assert length of obsmData, xData, obsData is equal
+
   (0, _react.useEffect)(() => {
-    setData(function (prevState, props) {
-      const colorHelper = new _colorHelper.ColorHelper();
-      let scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset.controls.colorScale, values) : null;
-      var data = position.map(function (e, i) {
-        var _dataset$obs$dataset$, _dataset$selectedObs;
+    if (!obsmData.isPending && !obsmData.serverError) {
+      setData(d => {
+        return _lodash.default.map(obsmData.data, (p, index) => {
+          return _lodash.default.defaults({
+            position: p
+          }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
+        });
+      });
+      const mapHelper = new _mapHelper.MapHelper();
+      const {
+        latitude,
+        longitude,
+        zoom
+      } = mapHelper.fitBounds(obsmData.data);
+      setViewState(v => {
         return {
-          index: i,
-          position: [position[i][0], position[i][1]],
-          value: values[i],
-          color: colorHelper.getColor(dataset.colorEncoding, (_dataset$obs$dataset$ = dataset.obs[(_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name]) === null || _dataset$obs$dataset$ === void 0 ? void 0 : _dataset$obs$dataset$.state, values[i], scale)
+          ...v,
+          longitude: longitude,
+          latitude: latitude,
+          zoom: zoom
         };
       });
-      return data;
-    });
-  }, [position, values, dataset.controls.colorScale, dataset.colorEncoding, dataset.obs, dataset.selectedObs]);
-  (0, _react.useEffect)(() => {
-    if (dataset.selectedObsm) {
-      const helper = new _mapHelper.MapHelper();
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchObsm = async () => {
-        const z = await zarrHelper.open(dataset.url, "obsm/" + dataset.selectedObsm);
-        await z.get(null, _zarrHelper.GET_OPTIONS).then(result => {
-          const {
-            latitude,
-            longitude,
-            zoom
-          } = helper.fitBounds(result.data);
-          setViewport({
-            longitude: latitude,
-            latitude: longitude,
-            zoom: zoom,
-            maxZoom: 16,
-            pitch: 0,
-            bearing: 0
-          });
-          setPosition(result.data);
+    } else if (!obsmData.isPending && obsmData.serverError) {
+      setData(d => {
+        return _lodash.default.map(d, e => {
+          return _lodash.default.defaults({
+            position: null
+          }, e, DEFAULT_DATA_POINT);
         });
-      };
-      fetchObsm().catch(console.error);
+      });
     }
-  }, [dataset.url, dataset.selectedObsm]);
+  }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
   (0, _react.useEffect)(() => {
-    if (dataset.selectedVar) {
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchData = async () => {
-        const z = await zarrHelper.open(dataset.url, "X");
-        await z.get([null, dataset.selectedVar.matrix_index], _zarrHelper.GET_OPTIONS).then(result => {
-          setValues(result.data);
-          dispatch({
-            type: "set.colorEncoding",
-            value: "var"
+    if (dataset.colorEncoding === "var") {
+      if (!xData.isPending && !xData.serverError) {
+        const s = getScale(xData.data);
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(xData.data, (v, index) => {
+            return _lodash.default.defaults({
+              value: v,
+              color: getColor(s, v)
+            }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
           });
         });
-      };
-      fetchData().catch(console.error);
+      } else if (!xData.isPending && xData.serverError) {
+        const s = getScale();
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(d, e => {
+            return _lodash.default.defaults({
+              value: null,
+              color: null
+            }, e, DEFAULT_DATA_POINT);
+          });
+        });
+      }
     }
-  }, [dataset.url, dataset.selectedVar, dispatch]);
+  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getScale, getColor]);
   (0, _react.useEffect)(() => {
-    if (dataset.selectedObs) {
-      const zarrHelper = new _zarrHelper.ZarrHelper();
-      const fetchData = async () => {
-        const z = await zarrHelper.open(dataset.url, "obs/" + dataset.selectedObs.name + "/codes");
-        await z.get().then(result => {
-          setValues(result.data);
-          dispatch({
-            type: "set.colorEncoding",
-            value: "obs"
+    if (dataset.colorEncoding === "obs") {
+      if (!obsData.isPending && !obsData.serverError) {
+        const s = getScale(obsData.data);
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(obsData.data, (v, index) => {
+            return _lodash.default.defaults({
+              value: v,
+              color: getColor(s, v)
+            }, d === null || d === void 0 ? void 0 : d[index], DEFAULT_DATA_POINT);
+          });
+        });
+      } else if (!obsData.isPending && obsData.serverError) {
+        const s = getScale();
+        setScale(() => s);
+        setData(d => {
+          return _lodash.default.map(d, e => {
+            return _lodash.default.defaults({
+              value: null,
+              color: null
+            }, e, DEFAULT_DATA_POINT);
           });
         });
-      };
-      fetchData().catch(console.error);
-    }
-  }, [dataset.url, dataset.selectedObs, dispatch]);
-  const layers = [new _layers.ScatterplotLayer({
-    id: "cherita-layer-scatterplot",
-    data,
-    radiusScale: radius,
-    radiusMinPixels: 1,
-    getPosition: d => d.position,
-    getFillColor: d => d.color,
-    getRadius: 1
-  }), new _layers2.EditableGeoJsonLayer({
-    id: "cherita-layer-draw",
-    data: features,
-    mode,
-    selectedFeatureIndexes,
-    onEdit: _ref2 => {
-      let {
-        updatedData,
-        editType,
-        editContext
-      } = _ref2;
-      setFeatures(updatedData);
-      let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
-      setFeatureState({
-        data: updatedData
-      });
-      if (editType === "addFeature") {
-        // when a drawing is complete, the value of editType becomes addFeature
-        const {
-          featureIndexes
-        } = editContext; //extracting indexes of current features selected
-        updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
       }
-      setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
     }
-  })];
+  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, getScale, getColor]);
+  const layers = (0, _react.useMemo)(() => {
+    return [new _layers.ScatterplotLayer({
+      id: "cherita-layer-scatterplot",
+      data: data,
+      radiusScale: radius,
+      radiusMinPixels: 1,
+      getPosition: d => d.position,
+      getFillColor: d => d.color,
+      getRadius: 1
+    }), new _layers2.EditableGeoJsonLayer({
+      id: "cherita-layer-draw",
+      data: features,
+      mode: mode,
+      selectedFeatureIndexes,
+      onEdit: _ref2 => {
+        let {
+          updatedData,
+          editType,
+          editContext
+        } = _ref2;
+        setFeatures(updatedData);
+        let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
+        setFeatureState({
+          data: updatedData
+        });
+        if (editType === "addFeature") {
+          // when a drawing is complete, the value of editType becomes addFeature
+          const {
+            featureIndexes
+          } = editContext; //extracting indexes of current features selected
+          updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
+        }
+        setSelectedFeatureIndexes(updatedSelectedFeatureIndexes); //now update your state
+      }
+    })];
+  }, [data, features, mode, radius, selectedFeatureIndexes]);
   function onLayerClick(info) {
     if (mode !== _editModes.ViewMode) {
       // don't change selection while editing
@@ -186,22 +282,23 @@ function Scatterplot(_ref) {
     }
     setSelectedFeatureIndexes(info.object ? [info.index] : []);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "cherita-scatterplot",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
-        layers: layers,
-        initialViewState: viewport,
-        controller: true,
-        onClick: onLayerClick
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
-        mode: mode,
-        setMode: setMode,
-        features: mode,
-        setFeatures: setFeatures
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
-        values: values
-      })]
-    })
+
+  // @TODO: add error message
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-scatterplot",
+    children: [(obsmData.isPending || xData.isPending || obsmData.isPending) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.default, {
+      viewState: viewState,
+      onViewStateChange: e => setViewState(e.viewState),
+      controller: true,
+      layers: layers,
+      onClick: onLayerClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
+      mode: mode,
+      setMode: setMode,
+      features: mode,
+      setFeatures: setFeatures
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+      scale: scale
+    })]
   });
 }

package/dist/components/var-list/VarList.js

@@ -55,6 +55,10 @@ function VarNamesList(_ref) {
         type: "varSelected",
         var: item
       });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
       dispatch({
         type: "multiVarSelected",

package/dist/helpers/color-helper.js

@@ -3,27 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorHelper = void 0;
+exports.useColor = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _constants = require("../constants/constants");
+var _DatasetContext = require("../context/DatasetContext");
+var _react = require("react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-class ColorHelper {
-  constructor() {
-    _defineProperty(this, "getScale", (colorScale, values) => {
-      return _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[colorScale]).domain([_lodash.default.min(values), _lodash.default.max(values)]);
-    });
-    _defineProperty(this, "getColor", function (colorEncoding, state, value) {
-      let scale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _chromaJs.default.scale();
-      if (colorEncoding === "var") {
-        return scale(value).rgb();
-      } else if (colorEncoding === "obs") {
-        return state !== null && state !== void 0 && state.hasOwnProperty(value) ? state[value]["color"] : null;
-      }
-    });
-  }
-}
-exports.ColorHelper = ColorHelper;
+const useColor = () => {
+  var _dataset$selectedObs2;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const getScale = (0, _react.useCallback)(function () {
+    let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    const c = _chromaJs.default.scale(_constants.CHROMA_COLORSCALES[dataset.controls.colorScale]).domain(values ? [_lodash.default.min(values), _lodash.default.max(values)] : [0, 1]);
+    return c;
+  }, [dataset.controls.colorScale]);
+  const getColor = (0, _react.useCallback)(function (scale, value) {
+    let colorEncoding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : dataset.colorEncoding;
+    if (colorEncoding === "var") {
+      return scale(value).rgb();
+    } else if (colorEncoding === "obs") {
+      var _dataset$obs$dataset$, _dataset$selectedObs;
+      return (_dataset$obs$dataset$ = dataset.obs[(_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name]) === null || _dataset$obs$dataset$ === void 0 || (_dataset$obs$dataset$ = _dataset$obs$dataset$.state) === null || _dataset$obs$dataset$ === void 0 || (_dataset$obs$dataset$ = _dataset$obs$dataset$[value]) === null || _dataset$obs$dataset$ === void 0 ? void 0 : _dataset$obs$dataset$["color"];
+    } else {
+      return null;
+    }
+  }, [dataset.colorEncoding, dataset.obs, (_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name]);
+  return {
+    getScale,
+    getColor
+  };
+};
+exports.useColor = useColor;

package/dist/helpers/zarr-helper.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZarrHelper = exports.GET_OPTIONS = void 0;
+exports.useZarr = exports.ZarrHelper = exports.GET_OPTIONS = void 0;
+var _react = require("react");
 var _zarr = require("zarr");
 const GET_OPTIONS = exports.GET_OPTIONS = {
   concurrencyLimit: 10,
@@ -26,4 +27,38 @@ class ZarrHelper {
     return z;
   }
 }
-exports.ZarrHelper = ZarrHelper;
+exports.ZarrHelper = ZarrHelper;
+const useZarr = function (_ref2) {
+  let {
+    url,
+    path
+  } = _ref2;
+  let s = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const [data, setData] = (0, _react.useState)(null);
+  const [isPending, setIsPending] = (0, _react.useState)(true);
+  const [serverError, setServerError] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const fetchData = async () => {
+      try {
+        setIsPending(true);
+        setServerError(null);
+        const zarrHelper = new ZarrHelper();
+        const z = await zarrHelper.open(url, path);
+        const result = await z.get(s, opts);
+        setData(result.data);
+      } catch (error) {
+        setServerError(error.message);
+      } finally {
+        setIsPending(false);
+      }
+    };
+    fetchData();
+  }, [opts, path, s, url]);
+  return {
+    data,
+    isPending,
+    serverError
+  };
+};
+exports.useZarr = useZarr;

package/dist/utils/search.js

@@ -45,6 +45,10 @@ const useVarSearch = () => {
       type: "multiVarSelected",
       var: item
     });
+    dispatch({
+      type: "set.colorEncoding",
+      value: "var"
+    });
   };
   return {
     params,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-05-09.07fb18ed",
+  "version": "0.2.0-dev.2024-05-21.ca7d726c",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "07fb18ed8d66be9ecd7817e41b76b1b5cdf3ba7b"
+  "prereleaseSha": "ca7d726c238e548f4db9899190cd6773f79ea5d0"
 }