@haniffalab/cherita-react 1.3.0-dev.2025-06-06.9f7ff5ad → 1.3.0-dev.2025-06-06.7dfb207c

package/dist/cjs/components/obs-list/ObsItem.js

@@ -155,8 +155,12 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
   } = _ref;
+  const {
+    useUnsColors
+  } = (0, _DatasetContext.useDataset)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
@@ -241,7 +245,7 @@ function CategoricalItem(_ref) {
     y: "0",
     width: "10",
     height: "10",
-    fill: "rgb(".concat(getColor({
+    fill: "rgb(".concat(getColor(_objectSpread({
       value: (code - min) / (max - min),
       categorical: true,
       grayOut: isOmitted,
@@ -249,7 +253,9 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    }), ")")
+    }, useUnsColors ? {
+      colorscale: colors
+    } : {})), ")")
   }))) : null))));
 }
 function CategoricalObs(_ref2) {
@@ -291,9 +297,10 @@ function CategoricalObs(_ref2) {
         value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
         pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
-      isSliced: isSliced
+      isSliced: isSliced,
+      colors: obs.colors
     };
-  }, [settings.colorEncoding, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  }, [obs.values, obs.codes, obs.value_counts, obs.omit, obs.colors, totalCounts, settings.colorEncoding, obsHistograms.fetchedData, obsHistograms.isPending, isSliced, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct]);
   showColor &= settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
     variant: "flush",

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

@@ -16,6 +16,7 @@ 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");
@@ -42,13 +43,16 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 function Scatterplot(_ref) {
-  var _settings$selectedObs2, _settings$selectedObs5, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs6, _data$positions;
+  var _settings$selectedObs2, _settings$selectedObs5, _settings$selectedObs8, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs9, _data$positions;
   let {
     radius = null,
     setShowObs,
     setShowVars,
     isFullscreen = false
   } = _ref;
+  const {
+    useUnsColors
+  } = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
@@ -69,6 +73,7 @@ function Scatterplot(_ref) {
     positions: [],
     values: []
   });
+  const [coordsError, setCoordsError] = (0, _react.useState)(null);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = (0, _react.useState)(() => _editModes.ViewMode);
@@ -106,8 +111,22 @@ function Scatterplot(_ref) {
         } else if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
           values = !obsData.serverError ? obsData.data : values;
         }
+        if (!obsmData.serverError && obsmData.data) {
+          if (obsmData.data[0].length !== 2) {
+            setCoordsError("Invalid coordinates. Expected 2D coordinates");
+            return {
+              positions: [],
+              values: []
+            };
+          }
+          setCoordsError(null);
+          return {
+            positions: obsmData.data,
+            values: values
+          };
+        }
         return {
-          positions: !obsmData.serverError ? obsmData.data : d.positions,
+          positions: d.positions,
           values: values
         };
       });
@@ -207,16 +226,19 @@ function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = (0, _react.useCallback)((_d, _ref2) => {
+    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
     const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
-    return getColor({
+    return getColor(_objectSpread({
       value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }) || [0, 0, 0, 100];
-  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical]);
+    }, useUnsColors && settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && (_settings$selectedObs6 = settings.selectedObs) !== null && _settings$selectedObs6 !== void 0 && _settings$selectedObs6.colors ? {
+      colorscale: (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.colors
+    } : {})) || [0, 0, 0, 100];
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.colors]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
   const getRadius = (0, _react.useCallback)((_d, _ref3) => {
@@ -344,7 +366,7 @@ function Scatterplot(_ref) {
       }
     };
   };
-  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
+  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -396,7 +418,7 @@ function Scatterplot(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTriangleExclamation
   }), "\xA0Error loading data"), /*#__PURE__*/_react.default.createElement(_Toolbox.Toolbox, {
-    mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name : null,
+    mode: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS ? (_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name : null,
     obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
     slicedLength: parseInt(slicedLength)
   })), /*#__PURE__*/_react.default.createElement(_Legend.Legend, {

package/dist/cjs/context/DatasetContext.js

@@ -69,7 +69,8 @@ const initialDataset = {
   obsGroups: null,
   imageUrl: null,
   defaultSettings: {},
-  canOverrideSettings: true
+  canOverrideSettings: true,
+  useUnsColors: false
 };
 function DatasetProvider(_ref2) {
   let {

package/dist/esm/components/obs-list/ObsItem.js

@@ -147,8 +147,12 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
   } = _ref;
+  const {
+    useUnsColors
+  } = useDataset();
   const {
     getColor
   } = useColor();
@@ -233,7 +237,7 @@ function CategoricalItem(_ref) {
     y: "0",
     width: "10",
     height: "10",
-    fill: "rgb(".concat(getColor({
+    fill: "rgb(".concat(getColor(_objectSpread({
       value: (code - min) / (max - min),
       categorical: true,
       grayOut: isOmitted,
@@ -241,7 +245,9 @@ function CategoricalItem(_ref) {
         alpha: 1
       },
       colorEncoding: "obs"
-    }), ")")
+    }, useUnsColors ? {
+      colorscale: colors
+    } : {})), ")")
   }))) : null))));
 }
 export function CategoricalObs(_ref2) {
@@ -283,9 +289,10 @@ export function CategoricalObs(_ref2) {
         value_counts: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts[obs.values[index]]) || 0,
         pct: (filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct[obs.values[index]]) || 0
       },
-      isSliced: isSliced
+      isSliced: isSliced,
+      colors: obs.colors
     };
-  }, [settings.colorEncoding, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  }, [obs.values, obs.codes, obs.value_counts, obs.omit, obs.colors, totalCounts, settings.colorEncoding, obsHistograms.fetchedData, obsHistograms.isPending, isSliced, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct]);
   showColor &= settings.colorEncoding === COLOR_ENCODINGS.OBS;
   return /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",

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

@@ -15,6 +15,7 @@ import { Alert } from "react-bootstrap";
 import { SpatialControls } from "./SpatialControls";
 import { Toolbox } from "./Toolbox";
 import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 import { useZarrData } from "../../context/ZarrDataContext";
@@ -34,13 +35,16 @@ const INITIAL_VIEW_STATE = {
   bearing: 0
 };
 export function Scatterplot(_ref) {
-  var _settings$selectedObs2, _settings$selectedObs5, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs6, _data$positions;
+  var _settings$selectedObs2, _settings$selectedObs5, _settings$selectedObs8, _features$features2, _obsmData$serverError, _xData$serverError, _obsData$serverError, _labelObsData$serverE, _settings$selectedVar, _settings$selectedObs9, _data$positions;
   let {
     radius = null,
     setShowObs,
     setShowVars,
     isFullscreen = false
   } = _ref;
+  const {
+    useUnsColors
+  } = useDataset();
   const settings = useSettings();
   const {
     obsIndices,
@@ -61,6 +65,7 @@ export function Scatterplot(_ref) {
     positions: [],
     values: []
   });
+  const [coordsError, setCoordsError] = useState(null);
 
   // EditableGeoJsonLayer
   const [mode, setMode] = useState(() => ViewMode);
@@ -98,8 +103,22 @@ export function Scatterplot(_ref) {
         } else if (settings.colorEncoding === COLOR_ENCODINGS.OBS) {
           values = !obsData.serverError ? obsData.data : values;
         }
+        if (!obsmData.serverError && obsmData.data) {
+          if (obsmData.data[0].length !== 2) {
+            setCoordsError("Invalid coordinates. Expected 2D coordinates");
+            return {
+              positions: [],
+              values: []
+            };
+          }
+          setCoordsError(null);
+          return {
+            positions: obsmData.data,
+            values: values
+          };
+        }
         return {
-          positions: !obsmData.serverError ? obsmData.data : d.positions,
+          positions: d.positions,
           values: values
         };
       });
@@ -199,16 +218,19 @@ export function Scatterplot(_ref) {
     max: settings.controls.range[1] * (valueMax - valueMin) + valueMin
   };
   const getFillColor = useCallback((_d, _ref2) => {
+    var _settings$selectedObs6, _settings$selectedObs7;
     let {
       index
     } = _ref2;
     const grayOut = isPending || sortedObsIndices && !sortedObsIndices.has(index);
-    return getColor({
+    return getColor(_objectSpread({
       value: (sortedData.values[index] - min) / (max - min),
       categorical: isCategorical,
       grayOut: grayOut
-    }) || [0, 0, 0, 100];
-  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical]);
+    }, useUnsColors && settings.colorEncoding === COLOR_ENCODINGS.OBS && (_settings$selectedObs6 = settings.selectedObs) !== null && _settings$selectedObs6 !== void 0 && _settings$selectedObs6.colors ? {
+      colorscale: (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.colors
+    } : {})) || [0, 0, 0, 100];
+  }, [isPending, sortedObsIndices, getColor, sortedData.values, min, max, isCategorical, useUnsColors, settings.colorEncoding, (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.colors]);
 
   // @TODO: add support for pseudospatial hover to reflect in radius
   const getRadius = useCallback((_d, _ref3) => {
@@ -336,7 +358,7 @@ export function Scatterplot(_ref) {
       }
     };
   };
-  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length);
+  const error = settings.selectedObsm && ((_obsmData$serverError = obsmData.serverError) === null || _obsmData$serverError === void 0 ? void 0 : _obsmData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.VAR && ((_xData$serverError = xData.serverError) === null || _xData$serverError === void 0 ? void 0 : _xData$serverError.length) || settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_obsData$serverError = obsData.serverError) === null || _obsData$serverError === void 0 ? void 0 : _obsData$serverError.length) || settings.labelObs.length && ((_labelObsData$serverE = labelObsData.serverError) === null || _labelObsData$serverE === void 0 ? void 0 : _labelObsData$serverE.length) || coordsError;
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-container-scatterplot"
   }, /*#__PURE__*/React.createElement("div", {
@@ -388,7 +410,7 @@ export function Scatterplot(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTriangleExclamation
   }), "\xA0Error loading data"), /*#__PURE__*/React.createElement(Toolbox, {
-    mode: settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === COLOR_ENCODINGS.OBS ? (_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name : null,
+    mode: settings.colorEncoding === COLOR_ENCODINGS.VAR ? (_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name : settings.colorEncoding === COLOR_ENCODINGS.OBS ? (_settings$selectedObs9 = settings.selectedObs) === null || _settings$selectedObs9 === void 0 ? void 0 : _settings$selectedObs9.name : null,
     obsLength: parseInt((_data$positions = data.positions) === null || _data$positions === void 0 ? void 0 : _data$positions.length),
     slicedLength: parseInt(slicedLength)
   })), /*#__PURE__*/React.createElement(Legend, {

package/dist/esm/context/DatasetContext.js

@@ -59,7 +59,8 @@ const initialDataset = {
   obsGroups: null,
   imageUrl: null,
   defaultSettings: {},
-  canOverrideSettings: true
+  canOverrideSettings: true,
+  useUnsColors: false
 };
 export function DatasetProvider(_ref2) {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-06-06.9f7ff5ad",
+  "version": "1.3.0-dev.2025-06-06.7dfb207c",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -127,5 +127,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "9f7ff5ad72d373bccc11058ca146ba13811cfa70"
+  "prereleaseSha": "7dfb207c69d972eecfa5d3a8bf564dd6546fd0f8"
 }