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

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

@@ -3,7 +3,7 @@ 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 { useCallback, useEffect, useMemo, useState } from "react";
 import { Tooltip } from "@mui/material";
 import { Gauge, SparkLineChart } from "@mui/x-charts";
 import _ from "lodash";
@@ -41,7 +41,7 @@ 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 ? " ]" : " )");
 }
@@ -159,100 +159,118 @@ function CategoricalItem(_ref2) {
   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 flex-wrap"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1 me-auto mw-100"
-  }, /*#__PURE__*/React.createElement(Form.Check, {
-    className: "obs-value-list-check",
-    type: "switch",
-    title: label,
-    label: label,
-    checked: !isOmitted,
-    onChange: () => onChange(value)
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center ms-auto"
-  }, (!!histogramData.data || histogramData.isPending) && /*#__PURE__*/React.createElement("div", {
-    className: "pl-1 m-0"
-  }, /*#__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 && parseInt(filteredStats.value_counts) !== parseInt(stats.value_counts) && /*#__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(_objectSpread({
-      value: (code - min) / (max - min),
-      categorical: true,
-      grayOut: isOmitted,
-      grayParams: {
-        alpha: 1
-      },
-      colorEncoding: "obs"
-    }, useUnsColors ? {
-      colorscale: colors
-    } : {})), ")")
-  }))) : 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(_ref3) {
   let {
@@ -302,29 +320,31 @@ export 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 === 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: 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__*/_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(_ref4) {
   let {
@@ -343,49 +363,76 @@ function ObsContinuousStats(_ref4) {
   } = 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
@@ -437,29 +484,33 @@ export 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.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,
-    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.createElement(ObsContinuousStats, {
-    obs: obs
-  }));
+  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
+    })]
+  });
 }