@haniffalab/cherita-react 1.1.1 → 1.2.0-dev.2025-04-09.382ade7b

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

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _xCharts = require("@mui/x-charts");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
+var _ObsToolbar = require("./ObsToolbar");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
@@ -20,7 +21,6 @@ var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
 var _zarrData = require("../../utils/zarrData");
-var _ObsToolbar = require("./ObsToolbar");
 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; }
@@ -149,7 +149,9 @@ function CategoricalItem(_ref) {
   const {
     getColor
   } = (0, _colorHelper.useColor)();
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+  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", {
@@ -237,47 +239,24 @@ function CategoricalItem(_ref) {
       },
       colorEncoding: "obs"
     })})`
-  }))) : null)));
+  }))) : null))));
 }
 function CategoricalObs(_ref2) {
   let {
     obs,
-    updateObs,
     toggleAll,
     toggleObs,
-    toggleLabel,
-    toggleSlice,
-    toggleColor,
     showColor = true
   } = _ref2;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
     isSliced
   } = (0, _FilterContext.useFilteredData)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   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 filteredObsData = useFilteredObsData(obs);
-  (0, _react.useEffect)(() => {
-    if (dataset.selectedObs?.name === obs.name) {
-      const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
-      const obsData = _lodash.default.omit(obs, ["omit"]);
-      if (!_lodash.default.isEqual(selectedObsData, obsData)) {
-        // outdated selectedObs
-        dispatch({
-          type: "select.obs",
-          obs: obs
-        });
-      } else if (!_lodash.default.isEqual(dataset.selectedObs.omit, obs.omit)) {
-        updateObs({
-          ...obs,
-          omit: dataset.selectedObs.omit
-        });
-      }
-    }
-  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs]);
   const getDataAtIndex = (0, _react.useCallback)(index => {
     return {
       value: obs.values[index],
@@ -308,7 +287,7 @@ function CategoricalObs(_ref2) {
     variant: "flush",
     className: "cherita-list"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    className: "cherita-list-item-unstyled"
+    className: "unstyled"
   }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll
@@ -320,7 +299,8 @@ function CategoricalObs(_ref2) {
     min: min,
     max: max,
     onChange: toggleObs,
-    showColor: showColor
+    showColor: showColor,
+    estimateSize: 42
   }));
 }
 function ObsContinuousStats(_ref3) {
@@ -340,11 +320,8 @@ 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(_reactBootstrap.ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    className: "obs-item"
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "obs-statistics"
   }, /*#__PURE__*/_react.default.createElement("h5", {
     className: "mb-2"
   }, "Statistics"), /*#__PURE__*/_react.default.createElement("div", {
@@ -385,72 +362,24 @@ function ObsContinuousStats(_ref3) {
     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)))))));
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Median"), " ", /*#__PURE__*/_react.default.createElement("span", null, (0, _string.formatNumerical)(obs.median, _string.FORMATS.EXPONENTIAL))))));
 }
+
+// @TODO: add bin controls
+// @TODO: add histogram
 function ContinuousObs(_ref4) {
   let {
     obs,
-    updateObs,
     toggleAll,
-    toggleObs,
-    toggleLabel,
-    toggleSlice,
-    toggleColor
+    toggleObs
   } = _ref4;
-  const ENDPOINT = "obs/bins";
-  const dataset = (0, _DatasetContext.useDataset)();
   const {
     isSliced
   } = (0, _FilterContext.useFilteredData)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const binnedObs = binContinuous(obs, _lodash.default.min([N_BINS, obs.n_unique]));
-  const params = {
-    url: dataset.url,
-    obsCol: binnedObs.name,
-    thresholds: binnedObs.bins.thresholds,
-    nBins: binnedObs.bins.nBins
-  };
-  const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
-    refetchOnMount: false
-  });
+  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 filteredObsData = useFilteredObsData(obs);
-  const updatedObs = fetchedData && _lodash.default.isMatch(obs, fetchedData);
-  (0, _react.useEffect)(() => {
-    // Update ObsList obsCols with bin data
-    // after update -> re-render -> obs will already be updated
-    if (!isPending && !serverError && !_lodash.default.isMatch(obs, fetchedData)) {
-      updateObs({
-        ...binnedObs,
-        ...fetchedData,
-        codesMap: _lodash.default.invert(fetchedData.codes)
-      });
-    }
-  }, [binnedObs, fetchedData, isPending, obs, serverError, updateObs]);
-  (0, _react.useEffect)(() => {
-    if (updatedObs && dataset.selectedObs?.name === obs.name) {
-      const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
-      const obsData = _lodash.default.omit(obs, ["omit"]);
-      if (!_lodash.default.isEqual(selectedObsData, obsData)) {
-        // outdated selectedObs
-        dispatch({
-          type: "select.obs",
-          obs: obs
-        });
-      } else if (!_lodash.default.isEqual(dataset.selectedObs.omit, obs.omit)) {
-        updateObs({
-          ...obs,
-          omit: dataset.selectedObs.omit
-        });
-      }
-    }
-  }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs, updatedObs]);
-  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 getDataAtIndex = index => {
     return {
       value: obs.values[index],
@@ -468,17 +397,14 @@ function ContinuousObs(_ref4) {
       isSliced: isSliced
     };
   };
-  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, {
+  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: "cherita-list-item-unstyled"
+    className: "unstyled"
   }, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
-    onToggleAllObs: toggleAll,
-    onToggleLabel: toggleLabel,
-    onToggleSlice: toggleSlice,
-    onToggleColor: toggleColor
+    onToggleAllObs: toggleAll
   })), /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: getDataAtIndex,
     count: obs.values.length,
@@ -490,5 +416,5 @@ function ContinuousObs(_ref4) {
     showColor: false
   })), /*#__PURE__*/_react.default.createElement(ObsContinuousStats, {
     obs: obs
-  })));
+  }));
 }

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

@@ -15,16 +15,14 @@ var _reactBootstrap = require("react-bootstrap");
 var _Accordion = _interopRequireDefault(require("react-bootstrap/Accordion"));
 var _AccordionButton = require("react-bootstrap/AccordionButton");
 var _AccordionContext = _interopRequireDefault(require("react-bootstrap/AccordionContext"));
+var _ObsItem = require("./ObsItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _ObsItem = require("./ObsItem");
 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; }
-// @TODO: integrate ObsAccordionToggle with ObsColsList active, expandedItems, etc. to avoid duplication
-
 const ObsAccordionToggle = _ref => {
   let {
     children,
@@ -34,10 +32,10 @@ const ObsAccordionToggle = _ref => {
   const {
     activeEventKey
   } = (0, _react.useContext)(_AccordionContext.default);
+  const isCurrentEventKey = (activeEventKey || []).includes(eventKey);
   const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(eventKey, () => {
-    handleAccordionToggle(eventKey);
+    handleAccordionToggle(eventKey, isCurrentEventKey);
   });
-  const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
     onClick: decoratedOnClick
@@ -59,8 +57,7 @@ function ObsColsList(_ref2) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [enableGroups, setEnableGroups] = (0, _react.useState)(enableObsGroups);
   const [obsCols, setObsCols] = (0, _react.useState)(null);
-  const [active, setActive] = (0, _react.useState)(dataset.selectedObs?.name);
-  const [expandedItems, setExpandedItems] = (0, _react.useState)({});
+  const [active, setActive] = (0, _react.useState)([...[dataset.selectedObs?.name]]);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
@@ -113,26 +110,10 @@ function ObsColsList(_ref2) {
       }), "name"));
     }
   }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
-  (0, _react.useEffect)(() => {
-    if (obsCols && Object.keys(expandedItems).length === 0) {
-      const initialExpanded = Object.keys(obsCols).reduce((acc, key) => {
-        acc[key] = false;
-        return acc;
-      }, {});
-      if (active && obsCols[active]) {
-        initialExpanded[active] = true;
-      }
-      setExpandedItems(initialExpanded);
-    }
-  }, [obsCols, expandedItems, active]);
-
-  // @TODO: fix re-rendering performance issue
   (0, _react.useEffect)(() => {
     if (obsCols) {
-      if (obsCols[dataset.selectedObs?.name]) {
-        setActive(dataset.selectedObs?.name);
-      } else {
-        setActive(null);
+      if (!obsCols[dataset.selectedObs?.name]) {
+        setActive([]);
         dispatch({
           type: "select.obs",
           obs: null
@@ -140,25 +121,12 @@ function ObsColsList(_ref2) {
       }
     }
   }, [dataset.selectedObs, dispatch, obsCols]);
-  const updateObs = updatedObs => {
-    setObsCols(o => {
-      return {
-        ...o,
-        [updatedObs.name]: updatedObs
-      };
-    });
-  };
-  const handleAccordionToggle = itemName => {
-    _lodash.default.delay(
-    // to avoid contents of accordion disappearing while closing
-    () => {
-      setExpandedItems(prev => {
-        return {
-          ...prev,
-          [itemName]: !prev[itemName]
-        };
-      });
-    }, expandedItems[itemName] ? 250 : 0);
+  const handleAccordionToggle = (itemName, isCurrentEventKey) => {
+    if (isCurrentEventKey) {
+      _lodash.default.delay(() => setActive(prev => _lodash.default.without(prev, itemName)), 250);
+    } else {
+      setActive(prev => [...prev, itemName]);
+    }
   };
   const toggleAll = item => {
     const omit = item.omit.length ? [] : _lodash.default.map(item.values, v => item.codes[v]);
@@ -171,7 +139,7 @@ function ObsColsList(_ref2) {
         }
       };
     });
-    if (active === item.name) {
+    if (dataset.selectedObs?.name === item.name) {
       dispatch({
         type: "select.obs",
         obs: {
@@ -231,7 +199,7 @@ function ObsColsList(_ref2) {
         }
       };
     });
-    if (active === item.name) {
+    if (dataset.selectedObs?.name === item.name) {
       dispatch({
         type: "select.obs",
         obs: {
@@ -282,20 +250,18 @@ function ObsColsList(_ref2) {
       eventKey: item.name
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "obs-accordion-body"
-    }, expandedItems[item.name] && (item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/_react.default.createElement(_ObsItem.CategoricalObs, {
+    }, active.includes(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
+      showColor: showColor && isColorEncoding
     }) : /*#__PURE__*/_react.default.createElement(_ObsItem.ContinuousObs, {
       key: item.name,
       obs: item,
-      updateObs: updateObs,
       toggleAll: () => toggleAll(item),
       toggleObs: value => toggleObs(item, value),
       toggleLabel: () => toggleLabel(item),
@@ -322,11 +288,8 @@ function ObsColsList(_ref2) {
       }, groupItems));
     }
   });
-  const obsList = enableGroups ? /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-    className: "obs-group-accordion",
-    flush: true,
-    alwaysOpen: true
-  }, groupList) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
+  const obsList = enableGroups ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, groupList) : _lodash.default.map(_lodash.default.sortBy(obsCols, o => _lodash.default.lowerCase(o.name)), item => obsItem(item));
+  const defaultActiveGroup = enableGroups ? `group-${_lodash.default.findKey(obsGroups, g => g.includes(active?.[0]))}` : null;
   if (!serverError) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "position-relative h-100"
@@ -334,7 +297,7 @@ function ObsColsList(_ref2) {
       variant: "danger"
     }, "No observations found.") : /*#__PURE__*/_react.default.createElement(_Accordion.default, {
       flush: true,
-      defaultActiveKey: [active],
+      defaultActiveKey: [...active, ...[defaultActiveGroup]],
       alwaysOpen: true,
       className: "obs-accordion"
     }, obsList));

package/dist/cjs/components/var-list/VarItem.js

@@ -61,11 +61,11 @@ function VarHistogram(_ref) {
 function VarDiseaseInfoItem(item) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-    key: item.disease_name,
+    key: item.disease_id,
     className: "feature-disease-info"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+  }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: "btn btn-link",
+    className: "btn btn-link disease-link",
     onClick: () => {
       dispatch({
         type: "select.disease",
@@ -73,25 +73,29 @@ function VarDiseaseInfoItem(item) {
         name: item.disease_name
       });
     }
-  }, item.disease_name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
-    striped: true
+  }, item.disease_name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Table, {
+    striped: true,
+    size: "sm",
+    responsive: true
   }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Confidence"), /*#__PURE__*/_react.default.createElement("td", null, item.confidence || "unknown")), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, "Organ", item.organs.length > 1 ? "s" : ""), /*#__PURE__*/_react.default.createElement("td", null, item.organs.map(o => o.name).join(", "))), !_lodash.default.isEmpty(item.metadata) && _lodash.default.map(item.metadata, (value, key) => {
     if (value !== null && value !== undefined) {
-      return /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", null, key), /*#__PURE__*/_react.default.createElement("td", null, value));
+      return /*#__PURE__*/_react.default.createElement("tr", {
+        key: key
+      }, /*#__PURE__*/_react.default.createElement("td", null, _lodash.default.upperFirst(key)), /*#__PURE__*/_react.default.createElement("td", null, value));
     }
-  })))));
+  }))));
 }
 function VarDiseaseInfo(_ref2) {
   let {
     data
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
+  return /*#__PURE__*/_react.default.createElement(_VirtualizedList.VirtualizedList, {
     getDataAtIndex: index => data[index],
     count: data.length,
     estimateSize: 140,
-    maxHeight: "100%",
+    maxHeight: "40vh",
     ItemComponent: VarDiseaseInfoItem
-  })));
+  });
 }
 function SingleSelectionItem(_ref3) {
   let {

package/dist/cjs/utils/VirtualizedList.js

@@ -16,7 +16,7 @@ function VirtualizedList(_ref) {
     ItemComponent,
     estimateSize = 45,
     overscan = 25,
-    maxHeight = "80vh",
+    maxHeight = "65vh",
     ...props
   } = _ref;
   const [parentNode, setParentNode] = (0, _react.useState)(null);

package/dist/css/cherita.css

@@ -4592,21 +4592,21 @@ textarea.form-control-lg {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
 }
 
-.accordion-flush > .accordion-item {
+.accordion-flush > .accordion-item, .obs-group-accordion-body > .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0;
 }
-.accordion-flush > .accordion-item:first-child {
+.accordion-flush > .accordion-item:first-child, .obs-group-accordion-body > .accordion-item:first-child {
   border-top: 0;
 }
-.accordion-flush > .accordion-item:last-child {
+.accordion-flush > .accordion-item:last-child, .obs-group-accordion-body > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+.accordion-flush > .accordion-item > .accordion-header .accordion-button, .obs-group-accordion-body > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
   border-radius: 0;
 }
-.accordion-flush > .accordion-item > .accordion-collapse {
+.accordion-flush > .accordion-item > .accordion-collapse, .obs-group-accordion-body > .accordion-item > .accordion-collapse {
   border-radius: 0;
 }
 
@@ -11874,13 +11874,30 @@ textarea.form-control-lg {
   color: #0c63e4;
 }
 
-.list-group-flush.cherita-list .list-group-item.cherita-list-item-unstyled {
+.obs-group-accordion-body {
+  padding: 0;
+}
+
+.list-group.cherita-list .virtualized-list-wrapper {
+  padding: 0 0.25rem 0.25rem 0.25rem;
+}
+.list-group.cherita-list .list-group-item.unstyled {
   background-color: transparent;
+  padding-left: 1rem;
 }
-.list-group-flush.cherita-list .list-group-item {
+.list-group.cherita-list .list-group-item {
+  border: 0;
+  padding: 0.375rem 0.75rem;
+  line-height: 1.5;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
+  border-radius: var(--bs-border-radius);
+}
+
+.obs-statistics {
   border: 0;
+  margin: 0 0.25rem 0.25rem 0.25rem;
   padding: 0.375rem 0.75rem;
-  margin-bottom: 0.215rem;
   line-height: 1.5;
   color: var(--bs-body-color);
   background-color: var(--bs-tertiary-bg);
@@ -12257,15 +12274,22 @@ textarea.form-control-lg {
 }
 
 .feature-disease-info {
-  font-weight: lighter;
+  font-weight: 300;
+  padding-left: 0 !important;
   border-top: 1px solid var(list-group-border-color);
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
 }
 
-.feature-disease-info table {
-  margin: 0;
+.disease-link {
+  padding: 0;
+  white-space: normal;
+  text-align: left;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background-color: var(--bs-body-bg) !important;
 }
 
 .cherita-app-plot {
@@ -12307,15 +12331,10 @@ textarea.form-control-lg {
 }
 
 /* Add a bottom border to the last item in the Accordion */
-.accordion-flush .accordion-item:last-child {
+.accordion-flush .accordion-item:last-child, .obs-group-accordion-body .accordion-item:last-child {
   border-bottom: 1px solid #dee2e6; /* Adjust the color and width as needed */
 }
 
-.var-disease-info-collapse {
-  max-height: 40vh;
-  overflow-y: auto;
-}
-
 .cherita-scatterplot #deckgl-wrapper {
   z-index: 1 !important;
 }