@haniffalab/cherita-react 0.2.0-dev.2025-01-22.f523ac5e → 0.2.0-dev.2025-01-28.7a60aa67

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

@@ -20,7 +20,6 @@ var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -80,116 +79,104 @@ const useObsHistogram = obs => {
     refetchOnMount: false
   });
 };
-function CategoricalItem(_ref) {
-  let {
-    value,
-    label,
-    code,
-    value_counts,
-    pct,
-    isOmitted,
-    min,
-    max,
-    onChange,
-    histogramData = {
-      data: null,
-      isPending: false,
-      altColor: false
-    },
-    showColor = true
-  } = _ref;
+function CategoricalItem({
+  value,
+  label,
+  code,
+  value_counts,
+  pct,
+  isOmitted,
+  min,
+  max,
+  onChange,
+  histogramData = {
+    data: null,
+    isPending: false,
+    altColor: false
+  },
+  showColor = true
+}) {
   const {
     getColor
   } = (0, _colorHelper.useColor)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-    className: "obs-item",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "d-flex align-items-center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
-          className: "obs-value-list-check",
-          type: "switch",
-          label: label,
-          checked: !isOmitted,
-          onChange: () => onChange(value)
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "d-flex align-items-center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_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: `${(0, _string.formatNumerical)(pct, _string.FORMATS.EXPONENTIAL)}%`,
-            placement: "left",
-            arrow: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "d-flex align-items-center",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Badge, {
-                className: "value-count-badge",
-                style: {
-                  fontWeight: "lighter"
-                },
-                children: (0, _string.formatNumerical)(parseInt(value_counts), _string.FORMATS.EXPONENTIAL)
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "value-pct-gauge-container",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.Gauge, {
-                  value: pct,
-                  text: null,
-                  innerRadius: "50%",
-                  margin: {
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0
-                  }
-                })
-              })]
-            })
-          })
-        }), showColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "pl-1",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: 24,
-            height: 24,
-            fill: "currentColor",
-            viewBox: "0 0 10 10",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-              x: "0",
-              y: "0",
-              width: "10",
-              height: "10",
-              fill: `rgb(${getColor({
-                value: (code - min) / (max - min),
-                categorical: true,
-                grayOut: isOmitted,
-                grayParams: {
-                  alpha: 1
-                },
-                colorEncoding: "obs"
-              })})`
-            })
-          })
-        }) : null]
-      })]
-    })
-  }, value);
+  return /*#__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(_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: `${(0, _string.formatNumerical)(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",
+    style: {
+      fontWeight: "lighter"
+    }
+  }, (0, _string.formatNumerical)(parseInt(value_counts), _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "value-pct-gauge-container"
+  }, /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
+    value: 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(${getColor({
+      value: (code - min) / (max - min),
+      categorical: true,
+      grayOut: isOmitted,
+      grayParams: {
+        alpha: 1
+      },
+      colorEncoding: "obs"
+    })})`
+  }))) : null)));
 }
-function CategoricalObs(_ref2) {
-  let {
-    obs,
-    updateObs,
-    toggleAll,
-    toggleObs,
-    toggleLabel,
-    toggleSlice,
-    toggleColor,
-    showColor = true
-  } = _ref2;
+function CategoricalObs({
+  obs,
+  updateObs,
+  toggleAll,
+  toggleObs,
+  toggleLabel,
+  toggleSlice,
+  toggleColor,
+  showColor = true
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const {
     isSliced
@@ -236,31 +223,26 @@ function CategoricalObs(_ref2) {
     };
   }, [dataset.colorEncoding, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
   showColor &= dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
-        item: obs,
-        onToggleAllObs: toggleAll,
-        onToggleLabel: toggleLabel,
-        onToggleSlice: toggleSlice,
-        onToggleColor: toggleColor
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
-      getDataAtIndex: getDataAtIndex,
-      count: obs.values.length,
-      ItemComponent: CategoricalItem,
-      totalCounts: totalCounts,
-      min: min,
-      max: max,
-      onChange: toggleObs,
-      showColor: showColor
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+    item: obs,
+    onToggleAllObs: toggleAll,
+    onToggleLabel: toggleLabel,
+    onToggleSlice: toggleSlice,
+    onToggleColor: toggleColor
+  })), /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+    getDataAtIndex: getDataAtIndex,
+    count: obs.values.length,
+    ItemComponent: CategoricalItem,
+    totalCounts: totalCounts,
+    min: min,
+    max: max,
+    onChange: toggleObs,
+    showColor: showColor
+  }));
 }
-function ObsContinuousStats(_ref3) {
-  let {
-    obs
-  } = _ref3;
+function ObsContinuousStats({
+  obs
+}) {
   const ENDPOINT = "obs/distribution";
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
@@ -274,89 +256,58 @@ function ObsContinuousStats(_ref3) {
   } = (0, _requests.useFetch)(ENDPOINT, params);
 
   // @TODO: fix width issue when min/max/etc values are too large
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "d-flex justify-content-between mt-3 align-items-center",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
-        size: "sm",
-        className: "obs-continuous-stats",
-        striped: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: "Min"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              className: "text-end",
-              children: (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL)
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: "Max"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              className: "text-end",
-              children: (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL)
-            })]
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
-        size: "sm",
-        className: "obs-continuous-stats",
-        striped: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: "Mean"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              className: "text-end",
-              children: (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL)
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              children: "Median"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-              className: "text-end",
-              children: (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL)
-            })]
-          })]
-        })
-      }), isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), !isPending && !serverError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "obs-distribution",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
-          data: fetchedData.kde_values[1],
-          showHighlight: true,
-          showTooltip: true // throws Maximum update depth exceeded error. Documented here: https://github.com/mui/mui-x/issues/13450
-          ,
-          margin: {
-            top: 10,
-            right: 20,
-            bottom: 10,
-            left: 20
-          },
-          xAxis: {
-            data: fetchedData.kde_values[0],
-            valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`
-          },
-          valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`,
-          slotProps: {
-            popper: {
-              className: "feature-histogram-tooltip"
-            }
-          }
-        })
-      })]
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between mt-3 align-items-center"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
+    size: "sm",
+    className: "obs-continuous-stats",
+    striped: true
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Min"), /*#__PURE__*/_react.default.createElement("td", {
+    className: "text-end"
+  }, (0, _string.formatNumerical)(obs.min, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Max"), /*#__PURE__*/_react.default.createElement("td", {
+    className: "text-end"
+  }, (0, _string.formatNumerical)(obs.max, _string.FORMATS.EXPONENTIAL))))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
+    size: "sm",
+    className: "obs-continuous-stats",
+    striped: true
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Mean"), /*#__PURE__*/_react.default.createElement("td", {
+    className: "text-end"
+  }, (0, _string.formatNumerical)(obs.mean, _string.FORMATS.EXPONENTIAL))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Median"), /*#__PURE__*/_react.default.createElement("td", {
+    className: "text-end"
+  }, (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL))))), 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 // throws Maximum update depth exceeded error. Documented here: https://github.com/mui/mui-x/issues/13450
+    ,
+    margin: {
+      top: 10,
+      right: 20,
+      bottom: 10,
+      left: 20
+    },
+    xAxis: {
+      data: fetchedData.kde_values[0],
+      valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`
+    },
+    valueFormatter: v => `${(0, _string.formatNumerical)(v, _string.FORMATS.EXPONENTIAL)}`,
+    slotProps: {
+      popper: {
+        className: "feature-histogram-tooltip"
+      }
+    }
+  }))));
 }
-function ContinuousObs(_ref4) {
-  let {
-    obs,
-    updateObs,
-    toggleAll,
-    toggleObs,
-    toggleLabel,
-    toggleSlice,
-    toggleColor
-  } = _ref4;
+function ContinuousObs({
+  obs,
+  updateObs,
+  toggleAll,
+  toggleObs,
+  toggleLabel,
+  toggleSlice,
+  toggleColor
+}) {
   const ENDPOINT = "obs/bins";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -417,30 +368,22 @@ function ContinuousObs(_ref4) {
       label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
     };
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}), !serverError && updatedObs && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsToolbar.ObsToolbar, {
-            item: obs,
-            onToggleAllObs: toggleAll,
-            onToggleLabel: toggleLabel,
-            onToggleSlice: toggleSlice,
-            onToggleColor: toggleColor
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
-          getDataAtIndex: getDataAtIndex,
-          count: obs.values.length,
-          ItemComponent: CategoricalItem,
-          totalCounts: totalCounts,
-          min: min,
-          max: max,
-          onChange: toggleObs,
-          showColor: false
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ObsContinuousStats, {
-        obs: obs
-      })]
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingLinear, null), !serverError && updatedObs && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+    item: obs,
+    onToggleAllObs: toggleAll,
+    onToggleLabel: toggleLabel,
+    onToggleSlice: toggleSlice,
+    onToggleColor: toggleColor
+  })), /*#__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
+  })));
 }

package/dist/components/obs-list/ObsList.js

@@ -12,14 +12,12 @@ var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ObsColsList(_ref) {
-  let {
-    showColor = true
-  } = _ref;
+function ObsColsList({
+  showColor = true
+}) {
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -179,53 +177,46 @@ function ObsColsList(_ref) {
     if (item.type === _constants.OBS_TYPES.DISCRETE) {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Item, {
+      key: item.name,
       eventKey: item.name,
-      className: active === item.name && dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && "cherita-accordion-active",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
-        onClick: () => handleAccordionToggle(item.name),
-        children: item.name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
-        children: expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.CategoricalObs, {
-          obs: item,
-          updateObs: updateObs,
-          toggleAll: () => toggleAll(item),
-          toggleObs: value => toggleObs(item, value),
-          toggleLabel: () => toggleLabel(item),
-          toggleSlice: () => toggleSlice(item),
-          toggleColor: () => toggleColor(item),
-          showColor: showColor
-        }, item.name) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.ContinuousObs, {
-          obs: item,
-          updateObs: updateObs,
-          toggleAll: () => toggleAll(item),
-          toggleObs: value => toggleObs(item, value),
-          toggleLabel: () => toggleLabel(item),
-          toggleSlice: () => toggleSlice(item),
-          toggleColor: () => toggleColor(item)
-        }, item.name))
-      })]
-    }, item.name);
+      className: active === item.name && dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && "cherita-accordion-active"
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, {
+      onClick: () => handleAccordionToggle(item.name)
+    }, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/_react.default.createElement(_ObsItem.CategoricalObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item),
+      showColor: showColor
+    }) : /*#__PURE__*/_react.default.createElement(_ObsItem.ContinuousObs, {
+      key: item.name,
+      obs: item,
+      updateObs: updateObs,
+      toggleAll: () => toggleAll(item),
+      toggleObs: value => toggleObs(item, value),
+      toggleLabel: () => toggleLabel(item),
+      toggleSlice: () => toggleSlice(item),
+      toggleColor: () => toggleColor(item)
+    }))));
   });
   if (!serverError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "position-relative h-100",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "list-group overflow-auto h-100",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
-          flush: true,
-          defaultActiveKey: [active],
-          alwaysOpen: true,
-          children: obsList
-        })]
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative h-100"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "list-group overflow-auto h-100"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, {
+      flush: true,
+      defaultActiveKey: [active],
+      alwaysOpen: true
+    }, obsList)));
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: serverError.message
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
   }
 }