npm - @haniffalab/cherita-react - Versions diffs - 0.2.0-dev.2024-05-09.07fb18ed → 0.2.0-dev.2024-05-22.5ce64346 - Mend

@haniffalab/cherita-react 0.2.0-dev.2024-05-09.07fb18ed → 0.2.0-dev.2024-05-22.5ce64346

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/App.scss +25 -4
package/dist/components/obs-list/ObsList.js +75 -27
package/dist/components/obsm-list/ObsmList.js +26 -10
package/dist/components/scatterplot/Legend.js +47 -37
package/dist/components/scatterplot/Scatterplot.js +226 -123
package/dist/components/scatterplot/SpatialControls.js +121 -0
package/dist/components/scatterplot/Toolbox.js +10 -60
package/dist/components/var-list/VarList.js +70 -31
package/dist/helpers/color-helper.js +28 -20
package/dist/helpers/zarr-helper.js +37 -2
package/dist/utils/search.js +4 -0
package/package.json +2 -2

package/dist/App.scss CHANGED Viewed

@@ -14,7 +14,7 @@
 .cherita-navbar {
     position: absolute;
-    z-index: 10;
+    z-index: 11;
     top: 20px;
     right: 20px;
     left: 20px;
@@ -59,20 +59,41 @@
 .cherita-container-scatterplot {
     position: relative;
-    min-height: 500px;
+    min-height: 300px;
+    height: 100%;
 }
 .cherita-toolbox {
     position: absolute;
     z-index: 10;
     bottom: 20px;
-    right: 20px;
+    left: 20px;
+}
+.cherita-spatial-controls {
+    position: absolute;
+    z-index: 10;
+    top: 20px;
+    left: 20px;
 }
+@include media-breakpoint-down(xl) {
+    .cherita-spatial-controls {
+        top: 100px;
+    }
+    .cherita-toolbox {
+        right: 20px;
+        left: auto;
+    }
+  }
 .cherita-legend {
     position: absolute;
     z-index: 10;
     bottom: 20px;
-    left: 20px;
+    right: 20px;
     width: 200px;
 }

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

@@ -11,9 +11,10 @@ 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 _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _jsxRuntime = require("react/jsx-runtime");
 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 && Object.prototype.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; }
@@ -59,7 +60,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 +133,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,
@@ -141,21 +141,76 @@ function ObsColsList() {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__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"], ")")
-              }
-            })]
-          }, index))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              class: "d-flex",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                class: "flex-grow-1",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+                  // prettier-ignore
+                  type: "switch",
+                  id: "custom-switch",
+                  label: "Toggle all"
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: key => {
+                      if (key != null) {
+                        dispatch({
+                          type: "obsSelected",
+                          obs: obsColsList.find(obs => obs.name === item.name)
+                        });
+                        dispatch({
+                          type: "set.colorEncoding",
+                          value: "obs"
+                        });
+                      }
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                      icon: _freeSolidSvgIcons.faDroplet
+                    })
+                  })
+                })
+              })]
+            })
+          }), item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              class: "d-flex",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                class: "flex-grow-1",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+                  // prettier-ignore
+                  type: "switch",
+                  id: "custom-switch",
+                  label: value
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  fill: "currentColor",
+                  viewBox: "0 0 10 10",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+                    x: "0",
+                    y: "0",
+                    width: "10",
+                    height: "10",
+                    fill: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
+                  })
+                })
+              })]
+            })
+          }, value))]
         })
       })]
     }, 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 +231,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 +243,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 +252,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",
@@ -206,14 +261,7 @@ function ObsColsList() {
         children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
           flush: true,
           defaultActiveKey: active,
-          onSelect: key => {
-            if (key != null) {
-              dispatch({
-                type: "obsSelected",
-                obs: obsColsList.find(obs => obs.name === key)
-              });
-            }
-          },
+          alwaysOpen: true,
           children: obsList
         })]
       })

package/dist/components/obsm-list/ObsmList.js CHANGED Viewed

@@ -10,7 +10,14 @@ var _requests = require("../../utils/requests");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _reactBootstrap = require("react-bootstrap");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
+var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
+var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
 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); }
 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 && Object.prototype.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 ObsmKeysList() {
@@ -48,9 +55,8 @@ function ObsmKeysList() {
     }
   }, [dataset.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      className: "list-group-item list-grou-item-action ".concat(active === item && "active"),
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+      className: "custom ".concat(active === item && "active"),
       onClick: () => {
         dispatch({
           type: "obsmSelected",
@@ -61,18 +67,28 @@ function ObsmKeysList() {
     }, item);
   });
   if (!serverError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "",
-      children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "list-group overflow-auto mh-100",
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownButton.default, {
+        as: _ButtonGroup.default,
+        title: dataset.selectedObsm,
+        id: "bg-nested-dropdown",
+        size: "sm",
         children: obsmList
       })]
     });
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayTrigger.default, {
+      placement: "top",
+      delay: {
+        show: 100,
+        hide: 200
+      },
+      overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
         children: serverError.message
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "danger",
+        children: "Error"
       })
     });
   }

package/dist/components/scatterplot/Legend.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -5,20 +5,23 @@ 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");
 var _editModes = require("@nebula.gl/edit-modes");
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _Toolbox = require("./Toolbox");
+var _SpatialControls = require("./SpatialControls");
 var _Legend = require("./Legend");
 var _constants = require("../../constants/constants");
 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 +50,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 +283,28 @@ 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)(_SpatialControls.SpatialControls, {
+      mode: mode,
+      setMode: setMode,
+      features: mode,
+      setFeatures: setFeatures
+    }), /*#__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/scatterplot/SpatialControls.js ADDED Viewed

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpatialControls = SpatialControls;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _react = require("react");
+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 _cheritaReact = require("@haniffalab/cherita-react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SpatialControls(_ref) {
+  let {
+    mode,
+    setMode,
+    features,
+    setFeatures
+  } = _ref;
+  const [showControls, setShowControls] = (0, _react.useState)(false);
+  const handleCloseControls = () => setShowControls(false);
+  const handleShowControls = () => setShowControls(true);
+  const onSelect = (eventKey, event) => {
+    console.log(eventKey); // selected event will trigger
+    switch (eventKey) {
+      case "DrawPolygonMode":
+        setMode(() => _editModes.DrawPolygonMode);
+        break;
+      case "DrawLineStringMode":
+        setMode(() => _editModes.DrawLineStringMode);
+        break;
+      case "DrawPolygonByDraggingMode":
+        setMode(() => _editModes.DrawPolygonByDraggingMode);
+        break;
+      case "DrawRectangleMode":
+        setMode(() => _editModes.DrawRectangleMode);
+        break;
+      case "ModifyMode":
+        setMode(() => _editModes.ModifyMode);
+        break;
+      default:
+        setMode(() => _editModes.ViewMode);
+    }
+  };
+  const deleteFeatures = (eventKey, event) => {
+    console.log(eventKey); // selected event will trigger
+    setFeatures({
+      type: "FeatureCollection",
+      features: []
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-spatial-controls",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      vertical: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPlus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faMinus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faCrosshairs
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faHand
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
+        as: _ButtonGroup.default,
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faDrawPolygon
+          })
+        }),
+        drop: "end",
+        id: "bg-vertical-dropdown-1",
+        className: "caret-off",
+        onSelect: onSelect,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
+          children: "Selection tools"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "DrawPolygonMode",
+          children: "Draw a polygon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "DrawPolygonByDraggingMode",
+          children: "Draw a Polygon by Dragging"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "ModifyMode",
+          children: "Modify polygons"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "ViewMode",
+          children: "ViewMode"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
+          onClick: deleteFeatures,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTrash
+          }), " Delete Plydons"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleShowControls,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faSliders
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.OffcanvasControls, {
+      show: showControls,
+      handleClose: handleCloseControls,
+      Controls: _cheritaReact.ScatterplotControls
+    })]
+  });
+}

package/dist/components/scatterplot/Toolbox.js CHANGED Viewed

@@ -7,7 +7,9 @@ exports.Toolbox = Toolbox;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = require("react");
+var _DatasetContext = require("../../context/DatasetContext");
 var _editModes = require("@nebula.gl/edit-modes");
+var _cheritaReact = require("@haniffalab/cherita-react");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
@@ -22,70 +24,18 @@ function Toolbox(_ref) {
     features,
     setFeatures
   } = _ref;
-  const onSelect = (eventKey, event) => {
-    console.log(eventKey); // selected event will trigger
-    switch (eventKey) {
-      case "DrawPolygonMode":
-        setMode(() => _editModes.DrawPolygonMode);
-        break;
-      case "DrawLineStringMode":
-        setMode(() => _editModes.DrawLineStringMode);
-        break;
-      case "DrawPolygonByDraggingMode":
-        setMode(() => _editModes.DrawPolygonByDraggingMode);
-        break;
-      case "DrawRectangleMode":
-        setMode(() => _editModes.DrawRectangleMode);
-        break;
-      case "ModifyMode":
-        setMode(() => _editModes.ModifyMode);
-        break;
-      default:
-        setMode(() => _editModes.ViewMode);
-    }
-  };
-  const deleteFeatures = (eventKey, event) => {
-    console.log(eventKey); // selected event will trigger
-    setFeatures({
-      type: "FeatureCollection",
-      features: []
-    });
-  };
+  const dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "cherita-toolbox",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
-        as: _ButtonGroup.default,
-        title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowPointer
-          }), " Mode"]
-        }),
-        id: "bg-nested-dropdown",
-        onSelect: onSelect,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonMode",
-          children: "DrawPolygonMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawLineStringMode",
-          children: "DrawLineStringMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonByDraggingMode",
-          children: "DrawPolygonByDraggingMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawRectangleMode",
-          children: "DrawRectangleMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ModifyMode",
-          children: "ModifyMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ViewMode",
-          children: "ViewMode"
-        })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsmKeysList, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        size: "sm",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faDroplet
+        }), " CD14"]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        variant: "primary",
-        onClick: deleteFeatures,
-        children: "Delete"
+        size: "sm",
+        children: "Cells XXXX"
       })]
     })
   });

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

@@ -7,9 +7,11 @@ exports.VarNamesList = VarNamesList;
 require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
-var _reactBootstrap = require("react-bootstrap");
 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); }
@@ -55,6 +57,10 @@ function VarNamesList(_ref) {
         type: "varSelected",
         var: item
       });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
       dispatch({
         type: "multiVarSelected",
@@ -65,36 +71,67 @@ function VarNamesList(_ref) {
   const makeList = (0, _react.useCallback)(vars => {
     return vars.map(item => {
       if (item && mode === _constants.SELECTION_MODES.SINGLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "button",
-          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
-          className: "".concat(active === item.matrix_index && "active", " m-1"),
-          onClick: () => {
-            selectVar(item);
-          },
-          disabled: item.matrix_index === -1,
-          title: item.matrix_index === -1 ? "Not present in data" : "",
-          children: item.name
-        }, item.matrix_index);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            class: "d-flex gap-1",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              class: "flex-grow-1",
+              children: item.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faCircleInfo
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                type: "button",
+                className: "m-0 p-0 px-1 btn-link ".concat(active === item.matrix_index && "active"),
+                onClick: () => {
+                  selectVar(item);
+                },
+                disabled: item.matrix_index === -1,
+                title: item.matrix_index === -1 ? "Not present in data" : "",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faDroplet
+                })
+              }, item.matrix_index)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faTrash
+              })
+            })]
+          })
+        }, item);
       } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "button",
-          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
-          className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
-          onClick: () => {
-            if (active.includes(item.matrix_index)) {
-              dispatch({
-                type: "multiVarDeselected",
-                var: item
-              });
-            } else {
-              selectVar(item);
-            }
-          },
-          disabled: item.matrix_index === -1,
-          title: item.matrix_index === -1 ? "Not present in data" : "",
-          children: item.name
-        }, item.matrix_index);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            class: "d-flex",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              class: "flex-grow-1",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                type: "button",
+                variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
+                className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
+                onClick: () => {
+                  if (active.includes(item.matrix_index)) {
+                    dispatch({
+                      type: "multiVarDeselected",
+                      var: item
+                    });
+                  } else {
+                    selectVar(item);
+                  }
+                },
+                disabled: item.matrix_index === -1,
+                title: item.matrix_index === -1 ? "Not present in data" : "",
+                children: item.name
+              }, item.matrix_index)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faPlus
+              })]
+            })]
+          })
+        }, item);
       } else {
         return null;
       }
@@ -124,7 +161,9 @@ function VarNamesList(_ref) {
             },
             children: "clear"
           })]
-        }), varList]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          children: varList
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && ((_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 || (_dataset$selectedDise2 = _dataset$selectedDise2.genes) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/helpers/color-helper.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-05-09.07fb18ed",
+  "version": "0.2.0-dev.2024-05-22.5ce64346",
   "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": "5ce64346f33423368e217552e04ebebf2022de06"
 }