@haniffalab/cherita-react 1.4.1-dev.2025-10-22.61540191 → 1.4.1-dev.2025-10-23.3179e534

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"));
@@ -23,15 +23,13 @@ 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) => {
@@ -49,7 +47,6 @@ 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 ? " ]" : " )");
 }
@@ -167,100 +164,118 @@ function CategoricalItem(_ref2) {
   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 flex-wrap"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex-grow-1 me-auto mw-100"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    className: "obs-value-list-check",
-    type: "switch",
-    title: label,
-    label: label,
-    checked: !isOmitted,
-    onChange: () => onChange(value)
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center ms-auto"
-  }, (!!histogramData.data || histogramData.isPending) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "pl-1 m-0"
-  }, /*#__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 && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__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(_objectSpread({
-      value: (code - min) / (max - min),
-      categorical: true,
-      grayOut: isOmitted,
-      grayParams: {
-        alpha: 1
-      },
-      colorEncoding: "obs"
-    }, useUnsColors ? {
-      colorscale: colors
-    } : {})), ")")
-  }))) : 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(_ref3) {
   let {
@@ -310,29 +325,31 @@ function CategoricalObs(_ref3) {
     };
   }, [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: 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
-  }));
+    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(_ref4) {
   let {
@@ -351,49 +368,76 @@ function ObsContinuousStats(_ref4) {
   } = (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
@@ -445,29 +489,33 @@ function ContinuousObs(_ref5) {
       isSliced: isSliced
     };
   }, [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__*/_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,
-    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__*/_react.default.createElement(ObsContinuousStats, {
-    obs: obs
-  }));
+  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
+    })]
+  });
 }