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

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

@@ -9,14 +9,11 @@ import { Alert } from "react-bootstrap";
 import Accordion from "react-bootstrap/Accordion";
 import { useAccordionButton } from "react-bootstrap/AccordionButton";
 import AccordionContext from "react-bootstrap/AccordionContext";
+import { CategoricalObs, ContinuousObs } from "./ObsItem";
 import { COLOR_ENCODINGS, DEFAULT_OBS_GROUP, OBS_TYPES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
-import { CategoricalObs, ContinuousObs } from "./ObsItem";
-
-// @TODO: integrate ObsAccordionToggle with ObsColsList active, expandedItems, etc. to avoid duplication
-
 const ObsAccordionToggle = _ref => {
   let {
     children,
@@ -26,10 +23,10 @@ const ObsAccordionToggle = _ref => {
   const {
     activeEventKey
   } = useContext(AccordionContext);
+  const isCurrentEventKey = (activeEventKey || []).includes(eventKey);
   const decoratedOnClick = useAccordionButton(eventKey, () => {
-    handleAccordionToggle(eventKey);
+    handleAccordionToggle(eventKey, isCurrentEventKey);
   });
-  const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
   return /*#__PURE__*/React.createElement("div", {
     className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
     onClick: decoratedOnClick
@@ -51,8 +48,7 @@ export function ObsColsList(_ref2) {
   const dispatch = useDatasetDispatch();
   const [enableGroups, setEnableGroups] = useState(enableObsGroups);
   const [obsCols, setObsCols] = useState(null);
-  const [active, setActive] = useState(dataset.selectedObs?.name);
-  const [expandedItems, setExpandedItems] = useState({});
+  const [active, setActive] = useState([...[dataset.selectedObs?.name]]);
   const [params, setParams] = useState({
     url: dataset.url
   });
@@ -105,26 +101,10 @@ export function ObsColsList(_ref2) {
       }), "name"));
     }
   }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
-  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
   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
@@ -132,25 +112,12 @@ export function ObsColsList(_ref2) {
       }
     }
   }, [dataset.selectedObs, dispatch, obsCols]);
-  const updateObs = updatedObs => {
-    setObsCols(o => {
-      return {
-        ...o,
-        [updatedObs.name]: updatedObs
-      };
-    });
-  };
-  const handleAccordionToggle = itemName => {
-    _.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) {
+      _.delay(() => setActive(prev => _.without(prev, itemName)), 250);
+    } else {
+      setActive(prev => [...prev, itemName]);
+    }
   };
   const toggleAll = item => {
     const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
@@ -163,7 +130,7 @@ export function ObsColsList(_ref2) {
         }
       };
     });
-    if (active === item.name) {
+    if (dataset.selectedObs?.name === item.name) {
       dispatch({
         type: "select.obs",
         obs: {
@@ -223,7 +190,7 @@ export function ObsColsList(_ref2) {
         }
       };
     });
-    if (active === item.name) {
+    if (dataset.selectedObs?.name === item.name) {
       dispatch({
         type: "select.obs",
         obs: {
@@ -274,20 +241,18 @@ export function ObsColsList(_ref2) {
       eventKey: item.name
     }, /*#__PURE__*/React.createElement("div", {
       className: "obs-accordion-body"
-    }, expandedItems[item.name] && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/React.createElement(CategoricalObs, {
+    }, active.includes(item.name) && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/React.createElement(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.createElement(ContinuousObs, {
       key: item.name,
       obs: item,
-      updateObs: updateObs,
       toggleAll: () => toggleAll(item),
       toggleObs: value => toggleObs(item, value),
       toggleLabel: () => toggleLabel(item),
@@ -314,11 +279,8 @@ export function ObsColsList(_ref2) {
       }, groupItems));
     }
   });
-  const obsList = enableGroups ? /*#__PURE__*/React.createElement(Accordion, {
-    className: "obs-group-accordion",
-    flush: true,
-    alwaysOpen: true
-  }, groupList) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
+  const obsList = enableGroups ? /*#__PURE__*/React.createElement(React.Fragment, null, groupList) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
+  const defaultActiveGroup = enableGroups ? `group-${_.findKey(obsGroups, g => g.includes(active?.[0]))}` : null;
   if (!serverError) {
     return /*#__PURE__*/React.createElement("div", {
       className: "position-relative h-100"
@@ -326,7 +288,7 @@ export function ObsColsList(_ref2) {
       variant: "danger"
     }, "No observations found.") : /*#__PURE__*/React.createElement(Accordion, {
       flush: true,
-      defaultActiveKey: [active],
+      defaultActiveKey: [...active, ...[defaultActiveGroup]],
       alwaysOpen: true,
       className: "obs-accordion"
     }, obsList));

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

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

package/dist/esm/utils/VirtualizedList.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.1.1",
+  "version": "1.2.0-dev.2025-04-09.382ade7b",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -123,5 +123,6 @@
   "bugs": {
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
-  "homepage": "https://github.com/haniffalab/cherita-react#readme"
-}
+  "homepage": "https://github.com/haniffalab/cherita-react#readme",
+  "prereleaseSha": "382ade7b92504de6a200b2f68f7942912a0271b8"
+}

package/scss/cherita.scss

@@ -249,15 +249,22 @@ $gauge-padding: 0.15rem;
 }
 
 .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(--#{$prefix}body-bg) !important;
 }
 
 .cherita-app-plot {
@@ -316,11 +323,6 @@ $gauge-padding: 0.15rem;
   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;
 }

package/scss/components/accordions.scss

@@ -30,3 +30,8 @@
     color: #0c63e4;
   }
 }
+
+.obs-group-accordion-body {
+  @extend .accordion-flush;
+  padding: 0;
+}

package/scss/components/lists.scss

@@ -1,14 +1,26 @@
-.list-group-flush.cherita-list {
-  .list-group-item.cherita-list-item-unstyled {
+.list-group.cherita-list {
+  .virtualized-list-wrapper {
+    padding: 0 0.25rem 0.25rem 0.25rem;
+  }
+  .list-group-item.unstyled {
     background-color: transparent;
+    padding-left: 1rem;
   }
   .list-group-item {
     border: 0;
     padding: 0.375rem 0.75rem;
-    margin-bottom: 0.215rem;
     line-height: 1.5;
     color: var(--#{$prefix}body-color);
     background-color: var(--#{$prefix}tertiary-bg);
     border-radius: var(--#{$prefix}border-radius);
   }
 }
+.obs-statistics {
+  border: 0;
+  margin: 0 0.25rem 0.25rem 0.25rem;
+  padding: 0.375rem 0.75rem;
+  line-height: 1.5;
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}tertiary-bg);
+  border-radius: var(--#{$prefix}border-radius);
+}