@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-24.e68f9e22

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

@@ -0,0 +1,477 @@
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import { Tooltip } from "@mui/material";
+import { Gauge, SparkLineChart } from "@mui/x-charts";
+import _ from "lodash";
+import { Badge, Form, ListGroup, Table } from "react-bootstrap";
+import { ObsToolbar } from "./ObsToolbar";
+import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { useColor } from "../../helpers/color-helper";
+import { Histogram } from "../../utils/Histogram";
+import { LoadingLinear } from "../../utils/LoadingIndicators";
+import { useFetch } from "../../utils/requests";
+import { formatNumerical, FORMATS } from "../../utils/string";
+import { VirtualizedList } from "../../utils/VirtualizedList";
+import { useObsData } from "../../utils/zarrData";
+const N_BINS = 5;
+function binContinuous(data, nBins) {
+  const binSize = (data.max - data.min) * (1 / nBins);
+  const thresholds = _.range(nBins + 1).map(b => {
+    return data.min + binSize * b;
+  });
+  const binEdges = _.range(thresholds.length - 1).map(i => [thresholds[i], thresholds[i + 1]]);
+  const bins = {
+    nBins: nBins,
+    binSize: binSize,
+    thresholds: thresholds,
+    binEdges: binEdges
+  };
+  return {
+    ...data,
+    bins: bins
+  };
+}
+function getContinuousLabel(code, binEdges) {
+  return `[ ${formatNumerical(binEdges[code][0])}, ${formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)}${code === binEdges.length - 1 ? " ]" : " )"}`;
+}
+const useObsHistogram = obs => {
+  const ENDPOINT = "obs/histograms";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const [params, setParams] = useState({
+    url: dataset.url,
+    obsCol: _.omit(obs, "omit"),
+    // avoid re-rendering when toggling unselected obs
+    varKey: dataset.selectedVar?.isSet ? {
+      name: dataset.selectedVar?.name,
+      indices: dataset.selectedVar?.vars.map(v => v.index)
+    } : dataset.selectedVar?.index,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obsCol: _.omit(obs, "omit"),
+        varKey: dataset.selectedVar?.isSet ? {
+          name: dataset.selectedVar?.name,
+          indices: dataset.selectedVar?.vars.map(v => v.index)
+        } : dataset.selectedVar?.index,
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
+      };
+    });
+  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, obsIndices, isSliced, obs]);
+  return useFetch(ENDPOINT, params, {
+    enabled: !!dataset.selectedVar && dataset.colorEncoding === COLOR_ENCODINGS.VAR,
+    refetchOnMount: false
+  });
+};
+const getBinIndex = (v, binEdges) => {
+  const EPSILON = 1e-6;
+  const lastEdge = _.last(binEdges);
+  const allButLastEdges = _.initial(binEdges);
+  const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+  return _.findIndex(modifiedBinEdges, range => _.inRange(v, ...range));
+};
+const useFilteredObsData = obs => {
+  const {
+    obsIndices
+  } = useFilteredData();
+  const obsData = useObsData(obs);
+  const isCategorical = obs.type === OBS_TYPES.CATEGORICAL || obs.type === OBS_TYPES.BOOLEAN;
+  const {
+    valueCounts,
+    pct
+  } = useMemo(() => {
+    const filteredObsValues = _.at(obsData.data, [...(obsIndices || [])]);
+    let valueCounts = {};
+    if (isCategorical) {
+      valueCounts = _.countBy(filteredObsValues);
+    } else {
+      valueCounts = _.countBy(filteredObsValues, v => {
+        return getBinIndex(v, obs.bins?.binEdges || [[null, null]]);
+      });
+    }
+    valueCounts = _.mapKeys(valueCounts, (_v, i) => {
+      return obs.codesMap[i];
+    });
+    const totalCounts = obsIndices?.size;
+    const pct = _.mapValues(valueCounts, v => v / totalCounts * 100);
+    return {
+      valueCounts,
+      pct
+    };
+  }, [isCategorical, obs.bins?.binEdges, obs.codesMap, obsData.data, obsIndices]);
+  return {
+    value_counts: valueCounts,
+    pct: pct
+  };
+};
+function CategoricalItem(_ref) {
+  let {
+    value,
+    label,
+    code,
+    stats = {
+      value_counts: null,
+      pct: null
+    },
+    isOmitted,
+    min,
+    max,
+    onChange,
+    histogramData = {
+      data: null,
+      isPending: false,
+      altColor: false
+    },
+    filteredStats = {
+      value_counts: null,
+      pct: null
+    },
+    isSliced,
+    showColor = true
+  } = _ref;
+  const {
+    getColor
+  } = useColor();
+  return /*#__PURE__*/React.createElement(ListGroup.Item, {
+    key: value,
+    className: "obs-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Form.Check, {
+    className: "obs-value-list-check",
+    type: "switch",
+    label: label,
+    checked: !isOmitted,
+    onChange: () => onChange(value)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pl-1 m-0 flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Histogram, {
+    data: histogramData.data,
+    isPending: histogramData.isPending,
+    altColor: histogramData.altColor
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pl-1 m-0"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, "Filtered:", " ", formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/React.createElement("br", null), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%") : `${formatNumerical(stats.pct, FORMATS.EXPONENTIAL)}%`,
+    placement: "left",
+    arrow: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    className: "value-count-badge"
+  }, " ", isSliced && /*#__PURE__*/React.createElement(React.Fragment, null, formatNumerical(parseInt(filteredStats.value_counts)), " ", "out of", " "), formatNumerical(parseInt(stats.value_counts), FORMATS.EXPONENTIAL)), /*#__PURE__*/React.createElement("div", {
+    className: "value-pct-gauge-container"
+  }, isSliced ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Gauge, {
+    className: "pct-gauge filtered-pct-gauge",
+    value: filteredStats.pct,
+    text: null,
+    innerRadius: "50%",
+    outerRadius: "75%",
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  }), /*#__PURE__*/React.createElement(Gauge, {
+    className: "pct-gauge",
+    value: stats.pct,
+    text: null,
+    innerRadius: "75%",
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  })) : /*#__PURE__*/React.createElement(Gauge, {
+    value: stats.pct,
+    text: null,
+    innerRadius: "50%",
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  }))))), showColor ? /*#__PURE__*/React.createElement("div", {
+    className: "pl-1"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "currentColor",
+    viewBox: "0 0 10 10"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "10",
+    height: "10",
+    fill: `rgb(${getColor({
+      value: (code - min) / (max - min),
+      categorical: true,
+      grayOut: isOmitted,
+      grayParams: {
+        alpha: 1
+      },
+      colorEncoding: "obs"
+    })})`
+  }))) : null)));
+}
+export function CategoricalObs(_ref2) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor,
+    showColor = true
+  } = _ref2;
+  const dataset = useDataset();
+  const {
+    isSliced
+  } = useFilteredData();
+  const dispatch = useDatasetDispatch();
+  const totalCounts = _.sum(_.values(obs.value_counts));
+  const min = _.min(_.values(obs.codes));
+  const max = _.max(_.values(obs.codes));
+  const obsHistograms = useObsHistogram(obs);
+  const filteredObsData = useFilteredObsData(obs);
+  useEffect(() => {
+    if (dataset.selectedObs?.name === obs.name) {
+      const selectedObsData = _.omit(dataset.selectedObs, ["omit"]);
+      const obsData = _.omit(obs, ["omit"]);
+      if (!_.isEqual(selectedObsData, obsData)) {
+        // outdated selectedObs
+        dispatch({
+          type: "select.obs",
+          obs: obs
+        });
+      } else if (!_.isEqual(dataset.selectedObs.omit, obs.omit)) {
+        updateObs({
+          ...obs,
+          omit: dataset.selectedObs.omit
+        });
+      }
+    }
+  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs]);
+  const getDataAtIndex = useCallback(index => {
+    return {
+      value: obs.values[index],
+      code: obs.codes[obs.values[index]],
+      stats: {
+        value_counts: obs.value_counts[obs.values[index]],
+        pct: obs.value_counts[obs.values[index]] / totalCounts * 100
+      },
+      isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
+      label: obs.values[index],
+      histogramData: dataset.colorEncoding === COLOR_ENCODINGS.VAR ? {
+        data: obsHistograms.fetchedData?.[obs.values[index]],
+        isPending: obsHistograms.isPending,
+        altColor: isSliced
+      } : {
+        data: null,
+        isPending: false
+      },
+      filteredStats: {
+        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
+        pct: filteredObsData?.pct[obs.values[index]] || 0
+      },
+      isSliced: isSliced
+    };
+  }, [dataset.colorEncoding, filteredObsData?.pct, filteredObsData?.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  showColor &= dataset.colorEncoding === COLOR_ENCODINGS.OBS;
+  return /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, null, /*#__PURE__*/React.createElement(ObsToolbar, {
+    item: obs,
+    onToggleAllObs: toggleAll,
+    onToggleLabel: toggleLabel,
+    onToggleSlice: toggleSlice,
+    onToggleColor: toggleColor
+  })), /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: obs.values.length,
+    ItemComponent: CategoricalItem,
+    totalCounts: totalCounts,
+    min: min,
+    max: max,
+    onChange: toggleObs,
+    showColor: showColor
+  }));
+}
+function ObsContinuousStats(_ref3) {
+  let {
+    obs
+  } = _ref3;
+  const ENDPOINT = "obs/distribution";
+  const dataset = useDataset();
+  const params = {
+    url: dataset.url,
+    obsColname: obs.name
+  };
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params);
+
+  // @TODO: fix width issue when min/max/etc values are too large
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between mt-3 align-items-center"
+  }, /*#__PURE__*/React.createElement(Table, {
+    size: "sm",
+    className: "obs-continuous-stats",
+    striped: true
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Min"), /*#__PURE__*/React.createElement("td", {
+    className: "text-end"
+  }, formatNumerical(obs.min, FORMATS.EXPONENTIAL))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Max"), /*#__PURE__*/React.createElement("td", {
+    className: "text-end"
+  }, formatNumerical(obs.max, FORMATS.EXPONENTIAL))))), /*#__PURE__*/React.createElement(Table, {
+    size: "sm",
+    className: "obs-continuous-stats",
+    striped: true
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Mean"), /*#__PURE__*/React.createElement("td", {
+    className: "text-end"
+  }, formatNumerical(obs.mean, FORMATS.EXPONENTIAL))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Median"), /*#__PURE__*/React.createElement("td", {
+    className: "text-end"
+  }, formatNumerical(obs.median, FORMATS.EXPONENTIAL))))), isPending && /*#__PURE__*/React.createElement(LoadingLinear, null), !isPending && !serverError && /*#__PURE__*/React.createElement("div", {
+    className: "obs-distribution"
+  }, /*#__PURE__*/React.createElement(SparkLineChart, {
+    data: fetchedData.kde_values[1],
+    showHighlight: true,
+    showTooltip: true // throws Maximum update depth exceeded error. Documented here: https://github.com/mui/mui-x/issues/13450
+    ,
+    margin: {
+      top: 10,
+      right: 20,
+      bottom: 10,
+      left: 20
+    },
+    xAxis: {
+      data: fetchedData.kde_values[0],
+      valueFormatter: v => `${formatNumerical(v, FORMATS.EXPONENTIAL)}`
+    },
+    valueFormatter: v => `${formatNumerical(v, FORMATS.EXPONENTIAL)}`,
+    slotProps: {
+      popper: {
+        className: "feature-histogram-tooltip"
+      }
+    }
+  }))));
+}
+export function ContinuousObs(_ref4) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor
+  } = _ref4;
+  const ENDPOINT = "obs/bins";
+  const dataset = useDataset();
+  const {
+    isSliced
+  } = useFilteredData();
+  const dispatch = useDatasetDispatch();
+  const binnedObs = binContinuous(obs, _.min([N_BINS, obs.n_unique]));
+  const params = {
+    url: dataset.url,
+    obsCol: binnedObs.name,
+    thresholds: binnedObs.bins.thresholds,
+    nBins: binnedObs.bins.nBins
+  };
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  const filteredObsData = useFilteredObsData(obs);
+  const updatedObs = fetchedData && _.isMatch(obs, fetchedData);
+  useEffect(() => {
+    // Update ObsList obsCols with bin data
+    // after update -> re-render -> obs will already be updated
+    if (!isPending && !serverError && !_.isMatch(obs, fetchedData)) {
+      updateObs({
+        ...binnedObs,
+        ...fetchedData,
+        codesMap: _.invert(fetchedData.codes)
+      });
+    }
+  }, [binnedObs, fetchedData, isPending, obs, serverError, updateObs]);
+  useEffect(() => {
+    if (updatedObs && dataset.selectedObs?.name === obs.name) {
+      const selectedObsData = _.omit(dataset.selectedObs, ["omit"]);
+      const obsData = _.omit(obs, ["omit"]);
+      if (!_.isEqual(selectedObsData, obsData)) {
+        // outdated selectedObs
+        dispatch({
+          type: "select.obs",
+          obs: obs
+        });
+      } else if (!_.isEqual(dataset.selectedObs.omit, obs.omit)) {
+        updateObs({
+          ...obs,
+          omit: dataset.selectedObs.omit
+        });
+      }
+    }
+  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs, updatedObs]);
+  const totalCounts = _.sum(_.values(obs?.value_counts));
+  const min = _.min(_.values(obs?.codes));
+  const max = _.max(_.values(obs?.codes));
+  const getDataAtIndex = index => {
+    return {
+      value: obs.values[index],
+      code: obs.codes[obs.values[index]],
+      stats: {
+        value_counts: obs.value_counts[obs.values[index]],
+        pct: obs.value_counts[obs.values[index]] / totalCounts * 100
+      },
+      isOmitted: _.includes(obs.omit, obs.codes[obs.values[index]]),
+      label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
+      filteredStats: {
+        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
+        pct: filteredObsData?.pct[obs.values[index]] || 0
+      },
+      isSliced: isSliced
+    };
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isPending && /*#__PURE__*/React.createElement(LoadingLinear, null), !serverError && updatedObs && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, {
+    variant: "flush"
+  }, /*#__PURE__*/React.createElement(ListGroup.Item, null, /*#__PURE__*/React.createElement(ObsToolbar, {
+    item: obs,
+    onToggleAllObs: toggleAll,
+    onToggleLabel: toggleLabel,
+    onToggleSlice: toggleSlice,
+    onToggleColor: toggleColor
+  })), /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: obs.values.length,
+    ItemComponent: CategoricalItem,
+    totalCounts: totalCounts,
+    min: min,
+    max: max,
+    onChange: toggleObs,
+    showColor: false
+  })), /*#__PURE__*/React.createElement(ObsContinuousStats, {
+    obs: obs
+  })));
+}