@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-13.274a553c

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

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import _ from "lodash";
+import { ButtonGroup, Dropdown, Form } from "react-bootstrap";
+import { PSEUDOSPATIAL_CATEGORICAL_MODES as MODES, PSEUDOSPATIAL_PLOT_TYPES as PLOT_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFetch } from "../../utils/requests";
+function CategoricalMode() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.pseudospatial.categoricalMode === m,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.categoricalMode",
+        categoricalMode: m.value
+      });
+    }
+  }, _.capitalize(m.name)));
+  const mode = _.find(MODES, {
+    value: dataset.pseudospatial.categoricalMode
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, _.capitalize(mode.name)), /*#__PURE__*/React.createElement(Dropdown.Menu, null, modeList));
+}
+function MaskSet() {
+  const ENDPOINT = "masks";
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [maskSets, setMaskSets] = useState(null);
+  const [params, setParams] = useState({
+    url: dataset.url
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setMaskSets(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.pseudospatial.maskSet === key,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.maskSet",
+        maskSet: key
+      });
+    }
+  }, _.capitalize(key)));
+  const handleMaskChange = mask => {
+    let newMasks = dataset.pseudospatial.maskValues || maskSets?.[dataset.pseudospatial?.maskSet];
+    newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
+    if (!_.difference(maskSets?.[dataset.pseudospatial?.maskSet], newMasks).length) {
+      newMasks = null;
+    }
+    dispatch({
+      type: "set.pseudospatial.maskValues",
+      maskValues: newMasks
+    });
+  };
+  const toggleMasks = () => {
+    if (!dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length) {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: []
+      });
+    } else {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: null
+      });
+    }
+  };
+  const masksList = _.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/React.createElement(Dropdown.ItemText, {
+    key: mask
+  }, /*#__PURE__*/React.createElement(Form.Check, {
+    type: "checkbox",
+    label: mask,
+    checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+    onChange: () => handleMaskChange(mask)
+  })));
+  const nMasks = dataset.pseudospatial.maskValues ? dataset.pseudospatial.maskValues?.length : maskSets?.[dataset.pseudospatial?.maskSet]?.length || "No";
+  const toggleAllChecked = !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, _.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "light"
+  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(Dropdown.ItemText, {
+    key: "toggle-all"
+  }, /*#__PURE__*/React.createElement(Form.Check, {
+    type: "checkbox",
+    label: "Toggle all",
+    checked: toggleAllChecked,
+    onChange: toggleMasks
+  })), masksList)));
+}
+
+// @TODO: add colormap, colorbar slider
+export function PseudospatialToolbar(_ref) {
+  let {
+    plotType
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cherita-pseudospatial-toolbar"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(ButtonGroup, null, plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)));
+}

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

@@ -0,0 +1,394 @@
+import React, { useEffect, useState, useMemo, useCallback, useDeferredValue, useRef } from "react";
+import { ScatterplotLayer } from "@deck.gl/layers";
+import { DeckGL } from "@deck.gl/react";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ViewMode } from "@nebula.gl/edit-modes";
+import { EditableGeoJsonLayer } from "@nebula.gl/layers";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import { SpatialControls } from "./SpatialControls";
+import { Toolbox } from "./Toolbox";
+import { COLOR_ENCODINGS, OBS_TYPES, SELECTED_POLYGON_FILLCOLOR, UNSELECTED_POLYGON_FILLCOLOR } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { useZarrData } from "../../context/ZarrDataContext";
+import { rgbToHex, useColor } from "../../helpers/color-helper";
+import { MapHelper } from "../../helpers/map-helper";
+import { Legend } from "../../utils/Legend";
+import { LoadingLinear, LoadingSpinner } from "../../utils/LoadingIndicators";
+import { formatNumerical } from "../../utils/string";
+import { useLabelObsData } from "../../utils/zarrData";
+window.deck.log.level = 1;
+const INITIAL_VIEW_STATE = {
+  longitude: 0,
+  latitude: 0,
+  zoom: 0,
+  maxZoom: 16,
+  pitch: 0,
+  bearing: 0
+};
+export function Scatterplot(_ref) {
+  let {
+    radius = 30
+  } = _ref;
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    valueMin,
+    valueMax,
+    slicedLength
+  } = useFilteredData();
+  const dispatch = useDatasetDispatch();
+  const {
+    getColor
+  } = useColor();
+  const deckRef = useRef(null);
+  const [viewState, setViewState] = useState(INITIAL_VIEW_STATE);
+  const [isRendering, setIsRendering] = useState(true);
+  const [data, setData] = useState({
+    ids: [],
+    positions: [],
+    values: [],
+    sliceValues: []
+  });
+
+  // EditableGeoJsonLayer
+  const [mode, setMode] = useState(() => ViewMode);
+  const [features, setFeatures] = useState({
+    type: "FeatureCollection",
+    features: dataset.polygons[dataset.selectedObsm] || []
+  });
+  const [selectedFeatureIndexes, setSelectedFeatureIndexes] = useState([]);
+  const {
+    obsmData,
+    xData,
+    obsData
+  } = useZarrData();
+  const labelObsData = useLabelObsData();
+  // @TODO: assert length of obsmData, xData, obsData is equal
+
+  useEffect(() => {
+    if (!obsmData.isPending && !obsmData.serverError) {
+      setIsRendering(true);
+      setData(d => {
+        return {
+          ...d,
+          positions: obsmData.data
+        };
+      });
+      const mapHelper = new MapHelper();
+      const {
+        latitude,
+        longitude,
+        zoom
+      } = mapHelper.fitBounds(obsmData.data, {
+        width: deckRef?.current?.deck?.width,
+        height: deckRef?.current?.deck?.height
+      });
+      setViewState(v => {
+        return {
+          ...v,
+          longitude: longitude,
+          latitude: latitude,
+          zoom: zoom
+        };
+      });
+    } else if (!obsmData.isPending && obsmData.serverError) {
+      setIsRendering(true);
+      setData(d => {
+        return {
+          ...d,
+          positions: []
+        };
+      });
+    }
+  }, [dataset.selectedObsm, obsmData.data, obsmData.isPending, obsmData.serverError]);
+  const getBounds = useCallback(() => {
+    const {
+      latitude,
+      longitude,
+      zoom
+    } = new MapHelper().fitBounds(data.positions, {
+      width: deckRef?.current?.deck?.width,
+      height: deckRef?.current?.deck?.height
+    });
+    return {
+      latitude,
+      longitude,
+      zoom
+    };
+  }, [data.positions]);
+  useEffect(() => {
+    if (dataset.colorEncoding === COLOR_ENCODINGS.VAR) {
+      setIsRendering(true);
+      if (!xData.isPending && !xData.serverError) {
+        // @TODO: add condition to check obs slicing
+        setData(d => {
+          return {
+            ...d,
+            values: xData.data
+          };
+        });
+      } else if (!xData.isPending && xData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            values: []
+          };
+        });
+      }
+    }
+  }, [dataset.colorEncoding, xData.data, xData.isPending, xData.serverError, getColor]);
+  useEffect(() => {
+    if (dataset.colorEncoding === COLOR_ENCODINGS.OBS) {
+      setIsRendering(true);
+      if (!obsData.isPending && !obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            values: obsData.data
+          };
+        });
+      } else if (!obsData.isPending && obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            values: []
+          };
+        });
+      }
+    } else if (dataset.colorEncoding === COLOR_ENCODINGS.VAR && dataset.sliceBy.obs) {
+      if (!obsData.isPending && !obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            sliceValues: obsData.data
+          };
+        });
+      } else if (!obsData.isPending && obsData.serverError) {
+        setData(d => {
+          return {
+            ...d,
+            sliceValues: []
+          };
+        });
+      }
+    }
+  }, [dataset.colorEncoding, obsData.data, obsData.isPending, obsData.serverError, dataset.sliceBy.obs]);
+  const isCategorical = useMemo(() => {
+    if (dataset.colorEncoding === COLOR_ENCODINGS.OBS) {
+      return dataset.selectedObs?.type === OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === OBS_TYPES.BOOLEAN;
+    } else {
+      return false;
+    }
+  }, [dataset.colorEncoding, dataset.selectedObs?.type]);
+  useEffect(() => {
+    dispatch({
+      type: "set.controls.valueRange",
+      valueRange: [valueMin, valueMax]
+    });
+  }, [dispatch, valueMax, valueMin]);
+  const {
+    min,
+    max
+  } = {
+    min: dataset.controls.range[0] * (valueMax - valueMin) + valueMin,
+    max: dataset.controls.range[1] * (valueMax - valueMin) + valueMin
+  };
+  const getFillColor = useCallback((_d, _ref2) => {
+    let {
+      index
+    } = _ref2;
+    const grayOut = obsIndices && !obsIndices.has(index);
+    return getColor({
+      value: (data.values[index] - min) / (max - min),
+      categorical: isCategorical,
+      grayOut: grayOut
+    }) || [0, 0, 0, 100];
+  }, [data.values, obsIndices, getColor, isCategorical, max, min]);
+
+  // @TODO: add support for pseudospatial hover to reflect in radius
+  const getRadius = useCallback((_d, _ref3) => {
+    let {
+      index
+    } = _ref3;
+    const grayOut = obsIndices && !obsIndices.has(index);
+    return grayOut ? 1 : 3;
+  }, [obsIndices]);
+  const memoizedLayers = useMemo(() => {
+    return [new ScatterplotLayer({
+      id: "cherita-layer-scatterplot",
+      pickable: true,
+      data: data.positions,
+      radiusScale: radius,
+      radiusMinPixels: 1,
+      getPosition: d => d,
+      getFillColor: getFillColor,
+      getRadius: getRadius,
+      updateTriggers: {
+        getFillColor: getFillColor,
+        getRadius: getRadius
+      }
+    }), new EditableGeoJsonLayer({
+      id: "cherita-layer-draw",
+      data: features,
+      mode: mode,
+      selectedFeatureIndexes,
+      onEdit: _ref4 => {
+        let {
+          updatedData,
+          editType,
+          editContext
+        } = _ref4;
+        setFeatures(updatedData);
+        let updatedSelectedFeatureIndexes = selectedFeatureIndexes;
+        if (editType === "addFeature") {
+          const {
+            featureIndexes
+          } = editContext;
+          updatedSelectedFeatureIndexes = [...selectedFeatureIndexes, ...featureIndexes];
+        }
+        setSelectedFeatureIndexes(updatedSelectedFeatureIndexes);
+      },
+      // getFillColor: POLYGON_FILLCOLOR,
+      _subLayerProps: {
+        geojson: {
+          getFillColor: feature => {
+            if (selectedFeatureIndexes.some(i => features.features[i] === feature)) {
+              return SELECTED_POLYGON_FILLCOLOR;
+            } else {
+              return UNSELECTED_POLYGON_FILLCOLOR;
+            }
+          }
+        }
+      }
+    })];
+  }, [data.positions, features, getFillColor, getRadius, mode, radius, selectedFeatureIndexes]);
+  const layers = useDeferredValue(mode === ViewMode ? memoizedLayers.reverse() : memoizedLayers); // draw scatterplot on top of polygons when in ViewMode
+
+  useEffect(() => {
+    if (!features?.features?.length) {
+      dispatch({
+        type: "disable.slice.polygons"
+      });
+    }
+  }, [dispatch, features?.features?.length]);
+  useEffect(() => {
+    dispatch({
+      type: "set.polygons",
+      obsm: dataset.selectedObsm,
+      polygons: features?.features || []
+    });
+  }, [dataset.selectedObsm, dispatch, features.features]);
+  function onLayerClick(info) {
+    if (mode !== ViewMode) {
+      // don't change selection while editing
+      return;
+    }
+    setSelectedFeatureIndexes(f => info.object ? info.layer.id === "cherita-layer-draw" ? [info.index] : f : []);
+  }
+  const getLabel = function (o, v) {
+    let isVar = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (isVar || o.type === OBS_TYPES.CONTINUOUS) {
+      return `${o.name}: ${formatNumerical(parseFloat(v))}`;
+    } else {
+      return `${o.name}: ${o.codesMap[v]}`;
+    }
+  };
+  const getTooltip = _ref5 => {
+    let {
+      object,
+      index
+    } = _ref5;
+    if (!object || object?.type === "Feature") return;
+    const text = [];
+    if (dataset.colorEncoding === COLOR_ENCODINGS.OBS && dataset.selectedObs && !_.some(dataset.labelObs, {
+      name: dataset.selectedObs.name
+    })) {
+      text.push(getLabel(dataset.selectedObs, obsData.data?.[index]));
+    }
+    if (dataset.colorEncoding === COLOR_ENCODINGS.VAR && dataset.selectedVar) {
+      text.push(getLabel(dataset.selectedVar, xData.data?.[index], true));
+    }
+    if (dataset.labelObs.length) {
+      text.push(..._.map(labelObsData.data, (v, k) => {
+        const labelObs = _.find(dataset.labelObs, o => o.name === k);
+        return getLabel(labelObs, v[index]);
+      }));
+    }
+    if (!text.length) return;
+    const grayOut = obsIndices && !obsIndices.has(index);
+    return {
+      text: text.length ? _.compact(text).join("\n") : null,
+      className: grayOut ? "tooltip-grayout" : "deck-tooltip",
+      style: !grayOut ? {
+        "border-left": `3px solid ${rgbToHex(getFillColor(null, {
+          index
+        }))}`
+      } : {
+        "border-left": "none"
+      }
+    };
+  };
+  const isPending = (isRendering || xData.isPending || obsmData.isPending) && !obsmData.isPending;
+  const error = dataset.selectedObsm && obsmData.serverError?.length || dataset.colorEncoding === COLOR_ENCODINGS.VAR && xData.serverError?.length || dataset.colorEncoding === COLOR_ENCODINGS.OBS && obsData.serverError?.length || dataset.labelObs.lengh && labelObsData.serverError?.length;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cherita-container-scatterplot"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cherita-scatterplot"
+  }, obsmData.isPending && /*#__PURE__*/React.createElement(LoadingSpinner, {
+    disableShrink: true
+  }), isPending && /*#__PURE__*/React.createElement(LoadingLinear, null), /*#__PURE__*/React.createElement(DeckGL, {
+    viewState: viewState,
+    onViewStateChange: e => setViewState(e.viewState),
+    controller: {
+      doubleClickZoom: mode === ViewMode
+    },
+    layers: layers,
+    onClick: onLayerClick,
+    getTooltip: getTooltip,
+    onAfterRender: () => {
+      setIsRendering(false);
+    },
+    useDevicePixels: false,
+    getCursor: _ref6 => {
+      let {
+        isDragging
+      } = _ref6;
+      return mode !== ViewMode ? "crosshair" : isDragging ? "grabbing" : "grab";
+    },
+    ref: deckRef
+  }), /*#__PURE__*/React.createElement(SpatialControls, {
+    mode: mode,
+    setMode: setMode,
+    features: features,
+    setFeatures: setFeatures,
+    selectedFeatureIndexes: selectedFeatureIndexes,
+    resetBounds: () => setViewState(getBounds()),
+    increaseZoom: () => setViewState(v => ({
+      ...v,
+      zoom: v.zoom + 1
+    })),
+    decreaseZoom: () => setViewState(v => ({
+      ...v,
+      zoom: v.zoom - 1
+    }))
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-spatial-footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cherita-toolbox-footer"
+  }, error && !isPending && /*#__PURE__*/React.createElement(Alert, {
+    variant: "danger"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTriangleExclamation
+  }), "\xA0Error loading data"), /*#__PURE__*/React.createElement(Toolbox, {
+    mode: dataset.colorEncoding === COLOR_ENCODINGS.VAR ? dataset.selectedVar.name : dataset.colorEncoding === COLOR_ENCODINGS.OBS ? dataset.selectedObs.name : null,
+    obsLength: parseInt(obsmData.data?.length),
+    slicedLength: parseInt(slicedLength)
+  })), /*#__PURE__*/React.createElement(Legend, {
+    isCategorical: isCategorical,
+    min: min,
+    max: max
+  }))));
+}

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

@@ -0,0 +1,71 @@
+import React, { useEffect } from "react";
+import { Box, Slider, Typography } from "@mui/material";
+import _ from "lodash";
+import { Dropdown } from "react-bootstrap";
+import { COLORSCALES } from "../../constants/colorscales";
+import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+export const ScatterplotControls = () => {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [sliderValue, setSliderValue] = React.useState(dataset.controls.range || [0, 1]);
+  const isCategorical = dataset.colorEncoding === COLOR_ENCODINGS.OBS ? dataset.selectedObs?.type === OBS_TYPES.CATEGORICAL : false;
+  const colormapList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    }
+  }, key));
+  const valueLabelFormat = value => {
+    return (value * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]).toFixed(2);
+  };
+  const marks = [{
+    value: 0,
+    label: valueLabelFormat(0)
+  }, {
+    value: 1,
+    label: valueLabelFormat(1)
+  }];
+  const updateSlider = (_e, value) => {
+    setSliderValue(value);
+  };
+  const updateRange = (_e, value) => {
+    setSliderValue(value);
+    dispatch({
+      type: "set.controls.range",
+      range: sliderValue
+    });
+  };
+  useEffect(() => {
+    setSliderValue(dataset.controls.range);
+  }, [dataset.controls.range]);
+  const rangeSlider = /*#__PURE__*/React.createElement(Box, {
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    id: "colorscale-range",
+    gutterBottom: true
+  }, "Colorscale range"), /*#__PURE__*/React.createElement(Slider, {
+    "aria-labelledby": "colorscale-range",
+    min: 0,
+    max: 1,
+    step: 0.001,
+    value: sliderValue,
+    onChange: updateSlider,
+    onChangeCommitted: updateRange,
+    valueLabelDisplay: "auto",
+    getAriaValueText: valueLabelFormat,
+    valueLabelFormat: valueLabelFormat,
+    marks: marks,
+    disabled: isCategorical
+  }));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colormapList)), /*#__PURE__*/React.createElement("div", {
+    className: "m-4"
+  }, rangeSlider));
+};