@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.1ea62883

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

@@ -0,0 +1,394 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CategoricalObs = CategoricalObs;
+exports.ContinuousObs = ContinuousObs;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _xCharts = require("@mui/x-charts");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _ObsToolbar = require("./ObsToolbar");
+var _DatasetContext = require("../../context/DatasetContext");
+var _colorHelper = require("../../helpers/color-helper");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _requests = require("../../utils/requests");
+var _string = require("../../utils/string");
+var _VirtualizedList = require("../../utils/VirtualizedList");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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; }
+const N_BINS = 5;
+function binContinuous(data) {
+  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
+  const binSize = (data.max - data.min) * (1 / nBins);
+  const thresholds = _lodash.default.range(nBins + 1).map(b => {
+    return data.min + binSize * b;
+  });
+  const binEdges = _lodash.default.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 binDiscrete(data) {
+  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
+  const binSize = _lodash.default.round(data.n_values * (1 / nBins));
+  const bins = {
+    nBins: nBins,
+    binSize: binSize
+  };
+  return {
+    ...data,
+    bins: bins
+  };
+}
+function getContinuousLabel(code, binEdges) {
+  return "[ ".concat((0, _string.prettyNumerical)(binEdges[code][0]), ", ").concat((0, _string.prettyNumerical)(binEdges[code][1])).concat(code === binEdges.length - 1 ? " ]" : " )");
+}
+function CategoricalItem(_ref) {
+  let {
+    value,
+    label,
+    code,
+    value_counts,
+    pct,
+    isOmitted,
+    min,
+    max,
+    onChange,
+    showColor = true
+  } = _ref;
+  const {
+    getColor
+  } = (0, _colorHelper.useColor)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "d-flex align-items-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+          className: "obs-value-list-check",
+          type: "switch",
+          label: label,
+          checked: !isOmitted,
+          onChange: () => onChange(value)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex align-items-center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "pl-1 m-0",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: "".concat((0, _string.prettyNumerical)(pct), "%"),
+            placement: "left",
+            arrow: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "d-flex align-items-center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Badge, {
+                className: "value-count-badge",
+                style: {
+                  fontWeight: "lighter"
+                },
+                children: (0, _string.prettyNumerical)(parseInt(value_counts))
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "value-pct-gauge-container",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
+                  value: pct,
+                  text: null,
+                  innerRadius: "50%",
+                  margin: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                  }
+                })
+              })]
+            })
+          })
+        }), showColor && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "pl-1",
+          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(getColor((code - min) / (max - min), true, isOmitted, {
+                alpha: 1
+              }, "obs"), ")")
+            })
+          })
+        })]
+      })]
+    })
+  }, value);
+}
+function CategoricalObs(_ref2) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor,
+    showColor = true
+  } = _ref2;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const totalCounts = _lodash.default.sum(_lodash.default.values(obs.value_counts));
+  const min = _lodash.default.min(_lodash.default.values(obs.codes));
+  const max = _lodash.default.max(_lodash.default.values(obs.codes));
+  (0, _react.useEffect)(() => {
+    var _dataset$selectedObs;
+    if (((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name) === obs.name) {
+      const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
+      const obsData = _lodash.default.omit(obs, ["omit"]);
+      if (!_lodash.default.isEqual(selectedObsData, obsData)) {
+        // outdated selectedObs
+        dispatch({
+          type: "select.obs",
+          obs: obs
+        });
+      } else if (!_lodash.default.isEqual(dataset.selectedObs.omit, obs.omit)) {
+        updateObs({
+          ...obs,
+          omit: dataset.selectedObs.omit
+        });
+      }
+    }
+  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs]);
+  const getDataAtIndex = index => {
+    return {
+      value: obs.values[index],
+      code: obs.codes[obs.values[index]],
+      value_counts: obs.value_counts[obs.values[index]],
+      pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
+      isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
+      label: (0, _string.prettyNumerical)(obs.values[index])
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
+        item: obs,
+        onToggleAllObs: toggleAll,
+        onToggleLabel: toggleLabel,
+        onToggleSlice: toggleSlice,
+        onToggleColor: toggleColor
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.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 = (0, _DatasetContext.useDataset)();
+  const params = {
+    url: dataset.url,
+    obs_colname: obs.name
+  };
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params);
+
+  // @TODO: fix width issue when min/max/etc values are too large
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "d-flex justify-content-between mt-3 align-items-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+        size: "sm",
+        className: "obs-continuous-stats",
+        striped: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Min"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              className: "text-end",
+              children: (0, _string.prettyNumerical)(obs.min)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Max"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              className: "text-end",
+              children: (0, _string.prettyNumerical)(obs.max)
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+        size: "sm",
+        className: "obs-continuous-stats",
+        striped: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Mean"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              className: "text-end",
+              children: (0, _string.prettyNumerical)(obs.mean)
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Median"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              className: "text-end",
+              children: (0, _string.prettyNumerical)(obs.median)
+            })]
+          })]
+        })
+      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), !isPending && !serverError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "obs-distribution",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.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 => "".concat((0, _string.prettyNumerical)(v))
+          },
+          valueFormatter: v => "".concat((0, _string.prettyNumerical)(v)),
+          slotProps: {
+            popper: {
+              className: "feature-histogram-tooltip"
+            }
+          }
+        })
+      })]
+    })
+  });
+}
+function ContinuousObs(_ref4) {
+  let {
+    obs,
+    updateObs,
+    toggleAll,
+    toggleObs,
+    toggleLabel,
+    toggleSlice,
+    toggleColor
+  } = _ref4;
+  const ENDPOINT = "obs/bins";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const binnedObs = binContinuous(obs);
+  const params = {
+    url: dataset.url,
+    obs_col: binnedObs.name,
+    thresholds: binnedObs.bins.thresholds,
+    nBins: binnedObs.bins.nBins
+  };
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  const updatedObs = fetchedData && _lodash.default.isMatch(obs, fetchedData);
+  (0, _react.useEffect)(() => {
+    // Update ObsList obsCols with bin data
+    // after update -> re-render -> obs will already be updated
+    if (!isPending && !serverError && !_lodash.default.isMatch(obs, fetchedData)) {
+      updateObs({
+        ...binnedObs,
+        ...fetchedData,
+        codesMap: _lodash.default.invert(fetchedData.codes)
+      });
+    }
+  }, [binnedObs, fetchedData, isPending, obs, serverError, updateObs]);
+  (0, _react.useEffect)(() => {
+    var _dataset$selectedObs2;
+    if (updatedObs && ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) === obs.name) {
+      const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
+      const obsData = _lodash.default.omit(obs, ["omit"]);
+      if (!_lodash.default.isEqual(selectedObsData, obsData)) {
+        // outdated selectedObs
+        dispatch({
+          type: "select.obs",
+          obs: obs
+        });
+      } else if (!_lodash.default.isEqual(dataset.selectedObs.omit, obs.omit)) {
+        updateObs({
+          ...obs,
+          omit: dataset.selectedObs.omit
+        });
+      }
+    }
+  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs, updatedObs]);
+  const totalCounts = _lodash.default.sum(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.value_counts));
+  const min = _lodash.default.min(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.codes));
+  const max = _lodash.default.max(_lodash.default.values(obs === null || obs === void 0 ? void 0 : obs.codes));
+  const getDataAtIndex = index => {
+    return {
+      value: obs.values[index],
+      code: obs.codes[obs.values[index]],
+      value_counts: obs.value_counts[obs.values[index]],
+      pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
+      isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
+      label: getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), !serverError && updatedObs && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
+            item: obs,
+            onToggleAllObs: toggleAll,
+            onToggleLabel: toggleLabel,
+            onToggleSlice: toggleSlice,
+            onToggleColor: toggleColor
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
+          getDataAtIndex: getDataAtIndex,
+          count: obs.values.length,
+          ItemComponent: CategoricalItem,
+          totalCounts: totalCounts,
+          min: min,
+          max: max,
+          onChange: toggleObs,
+          showColor: false
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ObsContinuousStats, {
+        obs: obs
+      })]
+    })]
+  });
+}