@haniffalab/cherita-react 1.3.0 → 1.3.1

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

@@ -3,23 +3,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Tooltip } from "@mui/material";
-import { Gauge, SparkLineChart } from "@mui/x-charts";
-import _ from "lodash";
-import { Badge, Form, ListGroup } from "react-bootstrap";
-import { ObsToolbar } from "./ObsToolbar";
-import { COLOR_ENCODINGS, OBS_TYPES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings } from "../../context/SettingsContext";
-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";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Tooltip } from '@mui/material';
+import { Gauge, SparkLineChart } from '@mui/x-charts';
+import _ from 'lodash';
+import { Badge, Form, ListGroup } from 'react-bootstrap';
+import { ObsToolbar } from './ObsToolbar';
+import { COLOR_ENCODINGS, OBS_TYPES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings } from '../../context/SettingsContext';
+import { useColor } from '../../helpers/color-helper';
+import { Histogram } from '../../utils/Histogram';
+import { LoadingLinear } from '../../utils/LoadingIndicators';
+import { useFetch } from '../../utils/requests';
+import { useSelectedVar } from '../../utils/Resolver';
+import { formatNumerical, FORMATS } from '../../utils/string';
+import { VirtualizedList } from '../../utils/VirtualizedList';
+import { useObsData } from '../../utils/zarrData';
 
 // const N_BINS = 5;
 
@@ -40,44 +41,46 @@ import { useObsData } from "../../utils/zarrData";
 //   };
 //   return { ...data, bins: bins };
 // }
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function getContinuousLabel(code, binEdges) {
-  return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
+  return "[ ".concat(formatNumerical(binEdges[code][0]), ", ").concat(formatNumerical(binEdges[code][1], FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? ' ]' : ' )');
 }
-const useObsHistogram = obs => {
-  var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedVar9, _settings$selectedVar0, _settings$selectedVar1, _settings$selectedVar10;
-  const ENDPOINT = "obs/histograms";
+const useObsHistogram = (obs, _ref) => {
+  let {
+    enabled = true
+  } = _ref;
+  const ENDPOINT = 'obs/histograms';
   const dataset = useDataset();
   const settings = useSettings();
   const {
     obsIndices,
     isSliced
   } = useFilteredData();
+  const selectedVar = useSelectedVar();
   const [params, setParams] = useState({
     url: dataset.url,
-    obsCol: _.omit(obs, "omit"),
+    obsCol: _.omit(obs, 'omit'),
     // avoid re-rendering when toggling unselected obs
-    varKey: (_settings$selectedVar = settings.selectedVar) !== null && _settings$selectedVar !== void 0 && _settings$selectedVar.isSet ? {
-      name: (_settings$selectedVar2 = settings.selectedVar) === null || _settings$selectedVar2 === void 0 ? void 0 : _settings$selectedVar2.name,
-      indices: (_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.vars.map(v => v.index)
-    } : (_settings$selectedVar4 = settings.selectedVar) === null || _settings$selectedVar4 === void 0 ? void 0 : _settings$selectedVar4.index,
+    varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+      name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+      indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+    } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
     obsIndices: isSliced ? [...(obsIndices || [])] : null
   });
   useEffect(() => {
     setParams(p => {
-      var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
       return _objectSpread(_objectSpread({}, p), {}, {
-        obsCol: _.omit(obs, "omit"),
-        varKey: (_settings$selectedVar5 = settings.selectedVar) !== null && _settings$selectedVar5 !== void 0 && _settings$selectedVar5.isSet ? {
-          name: (_settings$selectedVar6 = settings.selectedVar) === null || _settings$selectedVar6 === void 0 ? void 0 : _settings$selectedVar6.name,
-          indices: (_settings$selectedVar7 = settings.selectedVar) === null || _settings$selectedVar7 === void 0 ? void 0 : _settings$selectedVar7.vars.map(v => v.index)
-        } : (_settings$selectedVar8 = settings.selectedVar) === null || _settings$selectedVar8 === void 0 ? void 0 : _settings$selectedVar8.index,
+        obsCol: _.omit(obs, 'omit'),
+        varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
+          name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
+          indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
+        } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
         obsIndices: isSliced ? [...(obsIndices || [])] : null
       });
     });
-  }, [(_settings$selectedVar9 = settings.selectedVar) === null || _settings$selectedVar9 === void 0 ? void 0 : _settings$selectedVar9.index, (_settings$selectedVar0 = settings.selectedVar) === null || _settings$selectedVar0 === void 0 ? void 0 : _settings$selectedVar0.isSet, (_settings$selectedVar1 = settings.selectedVar) === null || _settings$selectedVar1 === void 0 ? void 0 : _settings$selectedVar1.name, (_settings$selectedVar10 = settings.selectedVar) === null || _settings$selectedVar10 === void 0 ? void 0 : _settings$selectedVar10.vars, obsIndices, isSliced, obs]);
+  }, [selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, obsIndices, isSliced, obs]);
   return useFetch(ENDPOINT, params, {
-    enabled: !!settings.selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
+    enabled: enabled && !!selectedVar && settings.colorEncoding === COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -124,7 +127,7 @@ const useFilteredObsData = obs => {
     pct: pct
   };
 };
-function CategoricalItem(_ref) {
+function CategoricalItem(_ref2) {
   let {
     value,
     label,
@@ -147,110 +150,136 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
-  } = _ref;
+  } = _ref2;
+  const {
+    useUnsColors
+  } = useDataset();
   const {
     getColor
   } = useColor();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "virtualized-list-wrapper"
-  }, /*#__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), "%") : "".concat(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(".concat(getColor({
-      value: (code - min) / (max - min),
-      categorical: true,
-      grayOut: isOmitted,
-      grayParams: {
-        alpha: 1
-      },
-      colorEncoding: "obs"
-    }), ")")
-  }))) : null))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "virtualized-list-wrapper",
+    children: /*#__PURE__*/_jsx(ListGroup.Item, {
+      className: "obs-item",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "d-flex align-items-center flex-wrap",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "flex-grow-1 me-auto mw-100",
+          children: /*#__PURE__*/_jsx(Form.Check, {
+            className: "obs-value-list-check",
+            type: "switch",
+            title: label,
+            label: label,
+            checked: !isOmitted,
+            onChange: () => onChange(value)
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "d-flex align-items-center ms-auto",
+          children: [(!!histogramData.data || histogramData.isPending) && /*#__PURE__*/_jsx("div", {
+            className: "pl-1 m-0",
+            children: /*#__PURE__*/_jsx(Histogram, {
+              data: histogramData.data,
+              isPending: histogramData.isPending,
+              altColor: histogramData.altColor
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            className: "pl-1 m-0",
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: isSliced ? /*#__PURE__*/_jsxs(_Fragment, {
+                children: ["Filtered:", ' ', formatNumerical(filteredStats.pct, FORMATS.EXPONENTIAL), "%", /*#__PURE__*/_jsx("br", {}), "Total: ", formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%"]
+              }) : "".concat(formatNumerical(stats.pct, FORMATS.EXPONENTIAL), "%"),
+              placement: "left",
+              arrow: true,
+              children: /*#__PURE__*/_jsxs("div", {
+                className: "d-flex align-items-center",
+                children: [/*#__PURE__*/_jsxs(Badge, {
+                  className: "value-count-badge",
+                  children: [' ', isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [formatNumerical(parseInt(filteredStats.value_counts)), ' ', "out of", ' ']
+                  }), formatNumerical(parseInt(stats.value_counts), FORMATS.EXPONENTIAL)]
+                }), /*#__PURE__*/_jsx("div", {
+                  className: "value-pct-gauge-container",
+                  children: isSliced ? /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsx(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__*/_jsx(Gauge, {
+                      className: "pct-gauge",
+                      value: stats.pct,
+                      text: null,
+                      innerRadius: '75%',
+                      margin: {
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0
+                      }
+                    })]
+                  }) : /*#__PURE__*/_jsx(Gauge, {
+                    value: stats.pct,
+                    text: null,
+                    innerRadius: '50%',
+                    margin: {
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      left: 0
+                    }
+                  })
+                })]
+              })
+            })
+          }), showColor ? /*#__PURE__*/_jsx("div", {
+            className: "pl-1",
+            children: /*#__PURE__*/_jsx("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: 24,
+              height: 24,
+              fill: "currentColor",
+              viewBox: "0 0 10 10",
+              children: /*#__PURE__*/_jsx("rect", {
+                x: "0",
+                y: "0",
+                width: "10",
+                height: "10",
+                fill: "rgb(".concat(getColor(_objectSpread({
+                  value: (code - min) / (max - min),
+                  categorical: true,
+                  grayOut: isOmitted,
+                  grayParams: {
+                    alpha: 1
+                  },
+                  colorEncoding: 'obs'
+                }, useUnsColors ? {
+                  colorscale: colors
+                } : {})), ")")
+              })
+            })
+          }) : null]
+        })]
+      })
+    }, value)
+  });
 }
-export function CategoricalObs(_ref2) {
+export function CategoricalObs(_ref3) {
   let {
     obs,
     toggleAll,
     toggleObs,
-    showColor = true
-  } = _ref2;
+    showColor = true,
+    showHistograms = true
+  } = _ref3;
   const settings = useSettings();
   const {
     isSliced
@@ -258,8 +287,11 @@ export function CategoricalObs(_ref2) {
   const totalCounts = _.sum(_.values(obs.value_counts));
   const min = _.min(_.values(obs.codes));
   const max = _.max(_.values(obs.codes));
-  const obsHistograms = useObsHistogram(obs);
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = useMemo(() => showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
   const getDataAtIndex = useCallback(index => {
     var _obsHistograms$fetche;
     return {
@@ -269,9 +301,9 @@ export function CategoricalObs(_ref2) {
         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]]),
+      isOmitted: _.includes(obs.omit, obs.values[index]),
       label: obs.values[index],
-      histogramData: settings.colorEncoding === COLOR_ENCODINGS.VAR ? {
+      histogramData: enabledHistograms ? {
         data: (_obsHistograms$fetche = obsHistograms.fetchedData) === null || _obsHistograms$fetche === void 0 ? void 0 : _obsHistograms$fetche[obs.values[index]],
         isPending: obsHistograms.isPending,
         altColor: isSliced
@@ -283,35 +315,42 @@ 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, enabledHistograms, 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, {
+  return /*#__PURE__*/_jsxs(ListGroup, {
     variant: "flush",
-    className: "cherita-list"
-  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
-    className: "unstyled"
-  }, /*#__PURE__*/React.createElement(ObsToolbar, {
-    item: obs,
-    onToggleAllObs: toggleAll
-  })), /*#__PURE__*/React.createElement(VirtualizedList, {
-    getDataAtIndex: getDataAtIndex,
-    count: obs.values.length,
-    ItemComponent: CategoricalItem,
-    totalCounts: totalCounts,
-    min: min,
-    max: max,
-    onChange: toggleObs,
-    showColor: showColor,
-    estimateSize: 42
-  }));
+    className: "cherita-list",
+    children: [/*#__PURE__*/_jsx(ListGroup.Item, {
+      className: "unstyled",
+      children: /*#__PURE__*/_jsx(ObsToolbar, {
+        item: obs,
+        onToggleAllObs: toggleAll
+      })
+    }), /*#__PURE__*/_jsx(VirtualizedList, {
+      getDataAtIndex: getDataAtIndex,
+      count: obs.values.length,
+      ItemComponent: CategoricalItem,
+      totalCounts: totalCounts,
+      min: min,
+      max: max,
+      onChange: toggleObs,
+      showColor: showColor,
+      estimateSize: i =>
+      // rough attempt to determine size based on label length
+      // estimate size of 68 pixels if label is long (>=25 chars if enabledHistograms, >=30 if showColor, >=35 otherwise), else 42
+      // TODO: consider isSliced as count badge will be longer ?
+      obs.values[i].length >= (enabledHistograms ? 25 : showColor ? 30 : 35) ? 68 : 42
+    })]
+  });
 }
-function ObsContinuousStats(_ref3) {
+function ObsContinuousStats(_ref4) {
   let {
     obs
-  } = _ref3;
-  const ENDPOINT = "obs/distribution";
+  } = _ref4;
+  const ENDPOINT = 'obs/distribution';
   const dataset = useDataset();
   const params = {
     url: dataset.url,
@@ -324,67 +363,103 @@ function ObsContinuousStats(_ref3) {
   } = useFetch(ENDPOINT, params);
 
   // @TODO: fix width issue when min/max/etc values are too large
-  return /*#__PURE__*/React.createElement("div", {
-    className: "obs-statistics"
-  }, /*#__PURE__*/React.createElement("h5", {
-    className: "mb-2"
-  }, "Statistics"), /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-md-7"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "mb-1 small"
-  }, "Distribution of continuous values"), 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,
-    margin: {
-      top: 10,
-      right: 20,
-      bottom: 10,
-      left: 20
-    },
-    xAxis: {
-      data: fetchedData.kde_values[0],
-      valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL))
-    },
-    valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL)),
-    slotProps: {
-      popper: {
-        className: "feature-histogram-tooltip"
-      }
-    }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "col-md-5 d-flex flex-column text-end"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("span", null, "Min"), " ", /*#__PURE__*/React.createElement("span", null, formatNumerical(obs.min, FORMATS.EXPONENTIAL))), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("span", null, "Max"), " ", /*#__PURE__*/React.createElement("span", null, formatNumerical(obs.max, FORMATS.EXPONENTIAL))), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("span", null, "Mean"), " ", /*#__PURE__*/React.createElement("span", null, formatNumerical(obs.mean, FORMATS.EXPONENTIAL))), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/React.createElement("span", null, "Median"), " ", /*#__PURE__*/React.createElement("span", null, formatNumerical(obs.median, FORMATS.EXPONENTIAL))))));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "obs-statistics",
+    children: [/*#__PURE__*/_jsx("h5", {
+      className: "mb-2",
+      children: "Statistics"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "row",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "col-md-7",
+        children: [/*#__PURE__*/_jsx("p", {
+          className: "mb-1 small",
+          children: "Distribution of continuous values"
+        }), isPending && /*#__PURE__*/_jsx(LoadingLinear, {}), !isPending && !serverError && /*#__PURE__*/_jsx("div", {
+          className: "obs-distribution",
+          children: /*#__PURE__*/_jsx(SparkLineChart, {
+            data: fetchedData.kde_values[1],
+            showHighlight: true,
+            showTooltip: true,
+            margin: {
+              top: 10,
+              right: 20,
+              bottom: 10,
+              left: 20
+            },
+            xAxis: {
+              data: fetchedData.kde_values[0],
+              valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL))
+            },
+            valueFormatter: v => "".concat(formatNumerical(v, FORMATS.EXPONENTIAL)),
+            slotProps: {
+              popper: {
+                className: 'feature-histogram-tooltip'
+              }
+            }
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "col-md-5 d-flex flex-column text-end",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: "Min"
+          }), ' ', /*#__PURE__*/_jsx("span", {
+            children: formatNumerical(obs.min, FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: "Max"
+          }), ' ', /*#__PURE__*/_jsx("span", {
+            children: formatNumerical(obs.max, FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: "Mean"
+          }), ' ', /*#__PURE__*/_jsx("span", {
+            children: formatNumerical(obs.mean, FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: "Median"
+          }), ' ', /*#__PURE__*/_jsx("span", {
+            children: formatNumerical(obs.median, FORMATS.EXPONENTIAL)
+          })]
+        })]
+      })]
+    })]
+  });
 }
 
 // @TODO: add bin controls
-// @TODO: add histogram
-export function ContinuousObs(_ref4) {
+export function ContinuousObs(_ref5) {
   let {
     obs,
     toggleAll,
-    toggleObs
-  } = _ref4;
+    toggleObs,
+    showHistograms = true
+  } = _ref5;
+  const settings = useSettings();
   const {
     isSliced
   } = useFilteredData();
   const totalCounts = _.sum(_.values(obs.value_counts));
   const min = _.min(_.values(obs.codes));
   const max = _.max(_.values(obs.codes));
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
-  const getDataAtIndex = index => {
+  const enabledHistograms = useMemo(() => showHistograms && settings.colorEncoding === COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
+  const getLabel = useCallback(index => {
+    return isNaN(obs.values[index]) ? 'NaN' : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges);
+  }, [obs.bins.binEdges, obs.codes, obs.values]);
+  const getDataAtIndex = useCallback(index => {
+    var _obsHistograms$fetche2;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -392,33 +467,50 @@ export function ContinuousObs(_ref4) {
         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),
+      isOmitted: _.includes(obs.omit, obs.values[index]),
+      label: getLabel(index),
+      histogramData: enabledHistograms ? {
+        data: (_obsHistograms$fetche2 = obsHistograms.fetchedData) === null || _obsHistograms$fetche2 === void 0 ? void 0 : _obsHistograms$fetche2[obs.values[index]],
+        isPending: obsHistograms.isPending,
+        altColor: isSliced
+      } : {
+        data: null,
+        isPending: false
+      },
       filteredStats: {
         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
     };
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, /*#__PURE__*/React.createElement(ListGroup.Item, {
-    className: "unstyled"
-  }, /*#__PURE__*/React.createElement(ObsToolbar, {
-    item: obs,
-    onToggleAllObs: toggleAll
-  })), /*#__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
-  }));
+  }, [enabledHistograms, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.pct, filteredObsData === null || filteredObsData === void 0 ? void 0 : filteredObsData.value_counts, getLabel, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ListGroup, {
+      variant: "flush",
+      className: "cherita-list",
+      children: [/*#__PURE__*/_jsx(ListGroup.Item, {
+        className: "unstyled",
+        children: /*#__PURE__*/_jsx(ObsToolbar, {
+          item: obs,
+          onToggleAllObs: toggleAll
+        })
+      }), /*#__PURE__*/_jsx(VirtualizedList, {
+        getDataAtIndex: getDataAtIndex,
+        count: obs.values.length,
+        ItemComponent: CategoricalItem,
+        totalCounts: totalCounts,
+        min: min,
+        max: max,
+        onChange: toggleObs,
+        showColor: false,
+        estimateSize: i =>
+        // rough attempt to determine size based on label length
+        // estimate size of 68 pixels if label is long (>=20 chars if enabledHistograms, >=30 otherwise), else 42
+        // TODO: consider isSliced as count badge will be longer ?
+        getLabel(i).length >= (enabledHistograms ? 20 : 30) ? 68 : 42
+      })]
+    }), /*#__PURE__*/_jsx(ObsContinuousStats, {
+      obs: obs
+    })]
+  });
 }