@haniffalab/cherita-react 1.3.0 → 1.3.1

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CategoricalObs = CategoricalObs;
 exports.ContinuousObs = ContinuousObs;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _material = require("@mui/material");
 var _xCharts = require("@mui/x-charts");
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -19,18 +19,17 @@ var _colorHelper = require("../../helpers/color-helper");
 var _Histogram = require("../../utils/Histogram");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Resolver = require("../../utils/Resolver");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
 var _zarrData = require("../../utils/zarrData");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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); }
-// const N_BINS = 5;
-
+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); } // const N_BINS = 5;
 // function binContinuous(data, nBins) {
 //   const binSize = (data.max - data.min) * (1 / nBins);
 //   const thresholds = _.range(nBins + 1).map((b) => {
@@ -48,44 +47,45 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 //   };
 //   return { ...data, bins: bins };
 // }
-
 function getContinuousLabel(code, binEdges) {
-  return "[ ".concat((0, _string.formatNumerical)(binEdges[code][0]), ", ").concat((0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)).concat(code === binEdges.length - 1 ? " ]" : " )");
+  return "[ ".concat((0, _string.formatNumerical)(binEdges[code][0]), ", ").concat((0, _string.formatNumerical)(binEdges[code][1], _string.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 = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const {
     obsIndices,
     isSliced
   } = (0, _FilterContext.useFilteredData)();
+  const selectedVar = (0, _Resolver.useSelectedVar)();
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url,
-    obsCol: _lodash.default.omit(obs, "omit"),
+    obsCol: _lodash.default.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
   });
   (0, _react.useEffect)(() => {
     setParams(p => {
-      var _settings$selectedVar5, _settings$selectedVar6, _settings$selectedVar7, _settings$selectedVar8;
       return _objectSpread(_objectSpread({}, p), {}, {
-        obsCol: _lodash.default.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: _lodash.default.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 (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: !!settings.selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
+    enabled: enabled && !!selectedVar && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
     refetchOnMount: false
   });
 };
@@ -132,7 +132,7 @@ const useFilteredObsData = obs => {
     pct: pct
   };
 };
-function CategoricalItem(_ref) {
+function CategoricalItem(_ref2) {
   let {
     value,
     label,
@@ -155,110 +155,136 @@ function CategoricalItem(_ref) {
       pct: null
     },
     isSliced,
+    colors = null,
     showColor = true
-  } = _ref;
+  } = _ref2;
+  const {
+    useUnsColors
+  } = (0, _DatasetContext.useDataset)();
   const {
     getColor
   } = (0, _colorHelper.useColor)();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "virtualized-list-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    key: value,
-    className: "obs-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-grow-1"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    className: "obs-value-list-check",
-    type: "switch",
-    label: label,
-    checked: !isOmitted,
-    onChange: () => onChange(value)
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pl-1 m-0 flex-grow-1"
-  }, /*#__PURE__*/_react.default.createElement(_Histogram.Histogram, {
-    data: histogramData.data,
-    isPending: histogramData.isPending,
-    altColor: histogramData.altColor
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pl-1 m-0"
-  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Filtered:", " ", (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/_react.default.createElement("br", null), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%") : "".concat((0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"),
-    placement: "left",
-    arrow: true
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Badge, {
-    className: "value-count-badge"
-  }, " ", isSliced && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), " ", "out of", " "), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "value-pct-gauge-container"
-  }, isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_xCharts.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.default.createElement(_xCharts.Gauge, {
-    className: "pct-gauge",
-    value: stats.pct,
-    text: null,
-    innerRadius: "75%",
-    margin: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }
-  })) : /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
-    value: stats.pct,
-    text: null,
-    innerRadius: "50%",
-    margin: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    }
-  }))))), showColor ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "pl-1"
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "currentColor",
-    viewBox: "0 0 10 10"
-  }, /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)("div", {
+    className: "virtualized-list-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      className: "obs-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex align-items-center flex-wrap",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "flex-grow-1 me-auto mw-100",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+            className: "obs-value-list-check",
+            type: "switch",
+            title: label,
+            label: label,
+            checked: !isOmitted,
+            onChange: () => onChange(value)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex align-items-center ms-auto",
+          children: [(!!histogramData.data || histogramData.isPending) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "pl-1 m-0",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Histogram.Histogram, {
+              data: histogramData.data,
+              isPending: histogramData.isPending,
+              altColor: histogramData.altColor
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "pl-1 m-0",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: isSliced ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: ["Filtered:", ' ', (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"]
+              }) : "".concat((0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%"),
+              placement: "left",
+              arrow: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "d-flex align-items-center",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Badge, {
+                  className: "value-count-badge",
+                  children: [' ', isSliced && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [(0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), ' ', "out of", ' ']
+                  }), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "value-pct-gauge-container",
+                  children: isSliced ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.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__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
+                      className: "pct-gauge",
+                      value: stats.pct,
+                      text: null,
+                      innerRadius: '75%',
+                      margin: {
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0
+                      }
+                    })]
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
+                    value: stats.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(_objectSpread({
+                  value: (code - min) / (max - min),
+                  categorical: true,
+                  grayOut: isOmitted,
+                  grayParams: {
+                    alpha: 1
+                  },
+                  colorEncoding: 'obs'
+                }, useUnsColors ? {
+                  colorscale: colors
+                } : {})), ")")
+              })
+            })
+          }) : null]
+        })]
+      })
+    }, value)
+  });
 }
-function CategoricalObs(_ref2) {
+function CategoricalObs(_ref3) {
   let {
     obs,
     toggleAll,
     toggleObs,
-    showColor = true
-  } = _ref2;
+    showColor = true,
+    showHistograms = true
+  } = _ref3;
   const settings = (0, _SettingsContext.useSettings)();
   const {
     isSliced
@@ -266,8 +292,11 @@ function CategoricalObs(_ref2) {
   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));
-  const obsHistograms = useObsHistogram(obs);
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
+  const enabledHistograms = (0, _react.useMemo)(() => showHistograms && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
   const getDataAtIndex = (0, _react.useCallback)(index => {
     var _obsHistograms$fetche;
     return {
@@ -277,9 +306,9 @@ function CategoricalObs(_ref2) {
         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]]),
+      isOmitted: _lodash.default.includes(obs.omit, obs.values[index]),
       label: obs.values[index],
-      histogramData: settings.colorEncoding === _constants.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
@@ -291,35 +320,42 @@ 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 === _constants.COLOR_ENCODINGS.OBS;
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
     variant: "flush",
-    className: "cherita-list"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    className: "unstyled"
-  }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
-    item: obs,
-    onToggleAllObs: toggleAll
-  })), /*#__PURE__*/_react.default.createElement(_VirtualizedList.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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      className: "unstyled",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
+        item: obs,
+        onToggleAllObs: toggleAll
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.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 = (0, _DatasetContext.useDataset)();
   const params = {
     url: dataset.url,
@@ -332,67 +368,103 @@ function ObsContinuousStats(_ref3) {
   } = (0, _requests.useFetch)(ENDPOINT, params);
 
   // @TODO: fix width issue when min/max/etc values are too large
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "obs-statistics"
-  }, /*#__PURE__*/_react.default.createElement("h5", {
-    className: "mb-2"
-  }, "Statistics"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-md-7"
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "mb-1 small"
-  }, "Distribution of continuous values"), isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !isPending && !serverError && /*#__PURE__*/_react.default.createElement("div", {
-    className: "obs-distribution"
-  }, /*#__PURE__*/_react.default.createElement(_xCharts.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((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL))
-    },
-    valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)),
-    slotProps: {
-      popper: {
-        className: "feature-histogram-tooltip"
-      }
-    }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-md-5 d-flex flex-column text-end"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Min"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Max"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Mean"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Median"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL))))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "obs-statistics",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+      className: "mb-2",
+      children: "Statistics"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "row",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "col-md-7",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "mb-1 small",
+          children: "Distribution of continuous values"
+        }), 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,
+            margin: {
+              top: 10,
+              right: 20,
+              bottom: 10,
+              left: 20
+            },
+            xAxis: {
+              data: fetchedData.kde_values[0],
+              valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL))
+            },
+            valueFormatter: v => "".concat((0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)),
+            slotProps: {
+              popper: {
+                className: 'feature-histogram-tooltip'
+              }
+            }
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "col-md-5 d-flex flex-column text-end",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "Min"
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "Max"
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "Mean"
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: "Median"
+          }), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL)
+          })]
+        })]
+      })]
+    })]
+  });
 }
 
 // @TODO: add bin controls
-// @TODO: add histogram
-function ContinuousObs(_ref4) {
+function ContinuousObs(_ref5) {
   let {
     obs,
     toggleAll,
-    toggleObs
-  } = _ref4;
+    toggleObs,
+    showHistograms = true
+  } = _ref5;
+  const settings = (0, _SettingsContext.useSettings)();
   const {
     isSliced
   } = (0, _FilterContext.useFilteredData)();
   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));
+  const obsHistograms = useObsHistogram(obs, {
+    enabled: showHistograms
+  });
   const filteredObsData = useFilteredObsData(obs);
-  const getDataAtIndex = index => {
+  const enabledHistograms = (0, _react.useMemo)(() => showHistograms && settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR, [settings.colorEncoding, showHistograms]);
+  const getLabel = (0, _react.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 = (0, _react.useCallback)(index => {
+    var _obsHistograms$fetche2;
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
@@ -400,33 +472,50 @@ function ContinuousObs(_ref4) {
         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: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
+      isOmitted: _lodash.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    className: "unstyled"
-  }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
-    item: obs,
-    onToggleAllObs: toggleAll
-  })), /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
-    getDataAtIndex: getDataAtIndex,
-    count: obs.values.length,
-    ItemComponent: CategoricalItem,
-    totalCounts: totalCounts,
-    min: min,
-    max: max,
-    onChange: toggleObs,
-    showColor: false
-  })), /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
+      variant: "flush",
+      className: "cherita-list",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+        className: "unstyled",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
+          item: obs,
+          onToggleAllObs: toggleAll
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.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__*/(0, _jsxRuntime.jsx)(ObsContinuousStats, {
+      obs: obs
+    })]
+  });
 }