@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.d9293c4c

package/dist/App.scss

@@ -1,6 +1,11 @@
+// Theme CSS
+$accordion-button-active-bg: #e7edf0;
+
 @import "bootstrap/scss/bootstrap";
 
-// Theme CSS
+input[type="checkbox"], .cursor-pointer {
+    cursor: pointer;
+}
 
 .loading-spinner {
     @extend .bg-light;
@@ -78,12 +83,6 @@
     height: 100%;
 }
 
-.cherita-alert {
-    position: absolute;
-    z-index: 10;
-    bottom: 40px;
-    left: 20px;
-}
 .cherita-spatial-controls {
     position: absolute;
     z-index: 10;
@@ -110,6 +109,15 @@
     }
 }
 
+.cherita-toolbox-footer {
+    display: flex;
+    flex-direction: column;
+}
+
+.cherita-toolbox-footer .alert {
+    width: fit-content;
+}
+
 .cherita-toolbox {
     order: 1;
 }
@@ -126,7 +134,7 @@
   }
 
 .cherita-accordion-active .accordion-button {
-    background-color: $accordion-button-active-bg
+    background-color: rgb(204, 227, 237)
 }
 
 .obs-value-list-check {
@@ -187,4 +195,65 @@
 .cm-small {
     height: 15px;
     width: 15px;
+}
+
+.obs-distribution {
+    width: 100%;
+    height: 4rem;
+}
+
+.obs-continuous-stats {
+    font-weight: lighter;
+    margin: 0;
+}
+
+.value-count-badge {
+    color: black !important;
+    background-color: rgb(222, 222, 222) !important;
+}
+
+.value-pct-gauge-container {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0.2rem;
+}
+
+.feature-histogram-container {
+    height: 1.25rem;
+    width: 5rem;
+    display: flex;
+    align-items: center;
+}
+
+.feature-histogram {
+    @extend .feature-histogram-container;
+    background-color: rgb(222, 222, 222);
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-markCell,.MuiChartsTooltip-labelCell {
+    display: none;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell {
+    padding: 0.5rem !important;
+}
+
+.feature-histogram-tooltip .MuiChartsTooltip-valueCell > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-histogram-tooltip td > p {
+    font-size: 0.85rem !important;
+}
+
+.feature-disease-info {
+    font-weight: lighter;
+    border-top: 1px solid var(list-group-border-color);
+    border-right: 0;
+    border-left: 0;
+    border-bottom: 0;
+}
+
+.feature-disease-info table {
+    margin: 0;
 }

package/dist/components/Offcanvas/index.js

@@ -20,7 +20,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function OffcanvasObs(_ref) {
   let {
     show,
-    handleClose
+    handleClose,
+    ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
     show: show,
@@ -33,7 +34,10 @@ function OffcanvasObs(_ref) {
         children: "Categories"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {})
+      className: "p-0",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {
+        ...props
+      })
     })]
   });
 }

package/dist/components/dotplot/Dotplot.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Dotplot = Dotplot;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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; }
 function Dotplot() {
+  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "dotplot";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -25,6 +27,10 @@ function Dotplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
+    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
+      var _dataset$selectedObs4;
+      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
+    }),
     selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
@@ -40,10 +46,15 @@ function Dotplot() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
+        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
+          var _dataset$selectedObs8;
+          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
+        }),
         selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,

package/dist/components/heatmap/Heatmap.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Heatmap = Heatmap;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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; }
 function Heatmap() {
+  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "heatmap";
   const dataset = (0, _DatasetContext.useDataset)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
@@ -24,6 +26,10 @@ function Heatmap() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
+    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
+      var _dataset$selectedObs4;
+      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
+    }),
     selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
     varNamesCol: dataset.varNamesCol
   });
@@ -34,10 +40,15 @@ function Heatmap() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
+        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
+          var _dataset$selectedObs8;
+          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
+        }),
         selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
         varNamesCol: dataset.varNamesCol
       };

package/dist/components/matrixplot/Matrixplot.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Matrixplot = Matrixplot;
 var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
@@ -15,6 +16,7 @@ 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; }
 function Matrixplot() {
+  var _dataset$selectedObs, _dataset$selectedObs2, _dataset$selectedObs3;
   const ENDPOINT = "matrixplot";
   const dataset = (0, _DatasetContext.useDataset)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
@@ -24,6 +26,10 @@ function Matrixplot() {
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
     selectedObs: dataset.selectedObs,
+    obsValues: !((_dataset$selectedObs = dataset.selectedObs) !== null && _dataset$selectedObs !== void 0 && _dataset$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.codes), (_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.omit).map(c => {
+      var _dataset$selectedObs4;
+      return (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.codesMap[c];
+    }),
     selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
@@ -35,10 +41,15 @@ function Matrixplot() {
       setHasSelections(false);
     }
     setParams(p => {
+      var _dataset$selectedObs5, _dataset$selectedObs6, _dataset$selectedObs7;
       return {
         ...p,
         url: dataset.url,
         selectedObs: dataset.selectedObs,
+        obsValues: !((_dataset$selectedObs5 = dataset.selectedObs) !== null && _dataset$selectedObs5 !== void 0 && _dataset$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.codes), (_dataset$selectedObs7 = dataset.selectedObs) === null || _dataset$selectedObs7 === void 0 ? void 0 : _dataset$selectedObs7.omit).map(c => {
+          var _dataset$selectedObs8;
+          return (_dataset$selectedObs8 = dataset.selectedObs) === null || _dataset$selectedObs8 === void 0 ? void 0 : _dataset$selectedObs8.codesMap[c];
+        }),
         selectedMultiVar: dataset.selectedMultiVar.map(i => i.index),
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol

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
+      })]
+    })]
+  });
+}