@haniffalab/cherita-react 0.2.0-dev.2024-03-27.ee875ba3 → 0.2.0-dev.2024-04-04.2167aa53

package/dist/App.scss

@@ -1,3 +1,5 @@
+@import "bootstrap/scss/accordion";
+
 // Theme CSS
 .cherita-container {
     margin: 40px auto;
@@ -73,6 +75,11 @@
     left: 20px;
     width: 200px;
 }
+
+.cherita-accordion-active .accordion-button {
+    background-color: $accordion-button-active-bg
+}
+
 .grad-step {
     display: inline-block;
     height: 20px;

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

@@ -48,13 +48,14 @@ function binDiscrete(data) {
   };
 }
 function ObsColsList() {
+  var _dataset$selectedObs;
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [obsColsList, setObsColsList] = (0, _react.useState)([]);
   const [obs, setObs] = (0, _react.useState)([]);
   const [updatedObsColsList, setUpdatedObsColsList] = (0, _react.useState)(false);
-  const [active, setActive] = (0, _react.useState)(null);
+  const [active, setActive] = (0, _react.useState)((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
@@ -122,6 +123,8 @@ function ObsColsList() {
     if (dataset.selectedObs) {
       validateSelection(dataset.selectedObs);
       setActive(dataset.selectedObs.name);
+    } else {
+      setActive(null);
     }
   }, [dataset.selectedObs, validateSelection]);
   (0, _react.useEffect)(() => {
@@ -131,8 +134,10 @@ function ObsColsList() {
     });
   }, [obs, dispatch]);
   function categoricalList(item) {
+    let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
+      className: item.name === active ? "cherita-accordion-active" : "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
@@ -151,8 +156,10 @@ function ObsColsList() {
     }, item.name);
   }
   function continuousList(item) {
+    let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
+      className: item.name === active ? "cherita-accordion-active" : "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Body, {
@@ -171,8 +178,10 @@ function ObsColsList() {
     }, item.name);
   }
   function otherList(item) {
+    let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
+      className: item.name === active ? "cherita-accordion-active" : "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
@@ -182,13 +191,13 @@ function ObsColsList() {
   }
   const obsList = (0, _react.useMemo)(() => obsColsList.map(item => {
     if (item.type === "categorical") {
-      return categoricalList(item);
+      return categoricalList(item, active);
     } else if (item.type === "continuous") {
-      return continuousList(item);
+      return continuousList(item, active);
     } else {
-      return otherList(item);
+      return otherList(item, active);
     }
-  }), [obsColsList]);
+  }), [obsColsList, active]);
   if (!serverError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "position-relative",
@@ -196,7 +205,7 @@ function ObsColsList() {
         className: "list-group overflow-auto",
         children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
           flush: true,
-          activeKey: active,
+          defaultActiveKey: active,
           onSelect: key => {
             if (key != null) {
               dispatch({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.2.0-dev.2024-03-27.ee875ba3",
+  "version": "0.2.0-dev.2024-04-04.2167aa53",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "ee875ba3d53443d2126319225c8950d7083f12f7"
+  "prereleaseSha": "2167aa53fbf527f25f71ab2e3825a3c1fe2033a6"
 }