@haniffalab/cherita-react 0.2.0-dev.2024-12-16.ab9c5057 → 0.2.0-dev.2024-12-16.67617f27

package/dist/components/dotplot/Dotplot.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Dotplot() {
   const ENDPOINT = "dotplot";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
@@ -31,6 +34,7 @@ function Dotplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
     expressionCutoff: dataset.controls.expressionCutoff,
@@ -54,13 +58,14 @@ function Dotplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         standardScale: dataset.controls.standardScale,
         meanOnlyExpressed: dataset.controls.meanOnlyExpressed,
         expressionCutoff: dataset.controls.expressionCutoff,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol]);
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, dataset.controls.standardScale, dataset.controls.meanOnlyExpressed, dataset.controls.expressionCutoff, dataset.varNamesCol, isSliced, filteredData.obsIndices]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/full-page/FullPage.js

@@ -4,20 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPage = FullPage;
+exports.FullPagePlots = FullPagePlots;
+exports.FullPagePseudospatial = FullPagePseudospatial;
+exports.FullPageScatterplot = FullPageScatterplot;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _Dotplot = require("../dotplot/Dotplot");
+var _Heatmap = require("../heatmap/Heatmap");
+var _Matrixplot = require("../matrixplot/Matrixplot");
 var _ObsList = require("../obs-list/ObsList");
 var _offcanvas = require("../offcanvas");
+var _Pseudospatial = require("../pseudospatial/Pseudospatial");
 var _Scatterplot = require("../scatterplot/Scatterplot");
 var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
+var _Violin = require("../violin/Violin");
 var _jsxRuntime = require("react/jsx-runtime");
 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 FullPage(props) {
+function FullPage(_ref) {
+  let {
+    children,
+    varMode = _constants.SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
   const targetRef = (0, _react.useRef)();
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
@@ -94,19 +107,17 @@ function FullPage(props) {
                 })]
               })
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "cherita-container-scatterplot",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
-          })]
+          }), children]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "cherita-app-var",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card, {
             className: "cherita-app-features",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Body, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
-                searchDiseases: true
+                searchDiseases: true,
+                searchVar: true
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
-                mode: _constants.SELECTION_MODES.SINGLE
+                mode: varMode
               })]
             })
           })
@@ -130,4 +141,67 @@ function FullPage(props) {
       })
     })
   });
+}
+function FullPageScatterplot(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
+  });
+}
+function FullPagePseudospatial(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "container-fluid h-100",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "row",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "col-12 col-lg-7",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "col-12 col-lg-5",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-fluid h-100 d-flex align-itemms-center justify-content-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "row w-100 py-3",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "col-12",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "p-2",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.Pseudospatial, {})
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "col-12",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.PseudospatialImage, {})
+              })]
+            })
+          })
+        })]
+      })
+    })
+  });
+}
+function FullPagePlots(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    varMode: _constants.SELECTION_MODES.MULTIPLE,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heatmap.Heatmap, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Matrixplot.Matrixplot, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dotplot.Dotplot, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "row flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Violin.Violin, {
+          mode: _constants.VIOLIN_MODES.GROUPBY
+        })
+      })]
+    })
+  });
 }

package/dist/components/heatmap/Heatmap.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Heatmap() {
   const ENDPOINT = "heatmap";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -30,6 +33,7 @@ function Heatmap() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     varNamesCol: dataset.varNamesCol
   });
   (0, _react.useEffect)(() => {
@@ -48,10 +52,11 @@ function Heatmap() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
+  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

package/dist/components/matrixplot/Matrixplot.js

@@ -9,6 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,6 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function Matrixplot() {
   const ENDPOINT = "matrixplot";
   const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
   const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
   const [data, setData] = (0, _react.useState)([]);
   const [layout, setLayout] = (0, _react.useState)({});
@@ -30,6 +33,7 @@ function Matrixplot() {
       name: i.name,
       indices: i.vars.map(v => v.index)
     } : i.index),
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
     standardScale: dataset.controls.standardScale,
     varNamesCol: dataset.varNamesCol
   });
@@ -49,11 +53,12 @@ function Matrixplot() {
           name: i.name,
           indices: i.vars.map(v => v.index)
         } : i.index),
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null,
         standardScale: dataset.controls.standardScale,
         varNamesCol: dataset.varNamesCol
       };
     });
-  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol]);
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, filteredData.obsIndices, isSliced]);
   const updateColorscale = (0, _react.useCallback)(colorscale => {
     setLayout(l => {
       return {

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

@@ -11,8 +11,11 @@ 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");
 var _colorHelper = require("../../helpers/color-helper");
+var _Histogram = require("../../utils/Histogram");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
@@ -22,8 +25,7 @@ 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; }
 const N_BINS = 5;
-function binContinuous(data) {
-  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
+function binContinuous(data, nBins) {
   const binSize = (data.max - data.min) * (1 / nBins);
   const thresholds = _lodash.default.range(nBins + 1).map(b => {
     return data.min + binSize * b;
@@ -40,21 +42,42 @@ function binContinuous(data) {
     bins: bins
   };
 }
-function binDiscrete(data) {
-  let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
-  const binSize = _lodash.default.round(data.n_values * (1 / nBins));
-  const bins = {
-    nBins: nBins,
-    binSize: binSize
-  };
-  return {
-    ...data,
-    bins: bins
-  };
-}
 function getContinuousLabel(code, binEdges) {
   return `[ ${(0, _string.formatNumerical)(binEdges[code][0])}, ${(0, _string.formatNumerical)(binEdges[code][1], _string.FORMATS.EXPONENTIAL)}${code === binEdges.length - 1 ? " ]" : " )"}`;
 }
+const useObsHistogram = obs => {
+  const ENDPOINT = "obs/histograms";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    obsCol: _lodash.default.omit(obs, "omit"),
+    // avoid re-rendering when toggling unselected obs
+    varKey: dataset.selectedVar?.isSet ? {
+      name: dataset.selectedVar?.name,
+      indices: dataset.selectedVar?.vars.map(v => v.index)
+    } : dataset.selectedVar?.index,
+    obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obsCol: _lodash.default.omit(obs, "omit"),
+        varKey: dataset.selectedVar?.isSet ? {
+          name: dataset.selectedVar?.name,
+          indices: dataset.selectedVar?.vars.map(v => v.index)
+        } : dataset.selectedVar?.index,
+        obsIndices: isSliced ? [...(filteredData.obsIndices || [])] : null
+      };
+    });
+  }, [dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, filteredData.obsIndices, isSliced, obs]);
+  return (0, _requests.useFetch)(ENDPOINT, params, {
+    enabled: !!dataset.selectedVar && dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR,
+    refetchOnMount: false
+  });
+};
 function CategoricalItem(_ref) {
   let {
     value,
@@ -66,12 +89,18 @@ function CategoricalItem(_ref) {
     min,
     max,
     onChange,
+    histogramData = {
+      data: null,
+      isPending: false,
+      altColor: false
+    },
     showColor = true
   } = _ref;
   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", {
@@ -85,7 +114,11 @@ function CategoricalItem(_ref) {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "d-flex align-items-center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        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)}%`,
@@ -115,7 +148,7 @@ function CategoricalItem(_ref) {
               })]
             })
           })
-        }), showColor && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }), showColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "pl-1",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
             xmlns: "http://www.w3.org/2000/svg",
@@ -128,12 +161,18 @@ function CategoricalItem(_ref) {
               y: "0",
               width: "10",
               height: "10",
-              fill: `rgb(${getColor((code - min) / (max - min), true, isOmitted, {
-                alpha: 1
-              }, "obs")})`
+              fill: `rgb(${getColor({
+                value: (code - min) / (max - min),
+                categorical: true,
+                grayOut: isOmitted,
+                grayParams: {
+                  alpha: 1
+                },
+                colorEncoding: "obs"
+              })})`
             })
           })
-        })]
+        }) : null]
       })]
     })
   }, value);
@@ -154,6 +193,8 @@ function CategoricalObs(_ref2) {
   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 isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const obsHistograms = useObsHistogram(obs);
   (0, _react.useEffect)(() => {
     if (dataset.selectedObs?.name === obs.name) {
       const selectedObsData = _lodash.default.omit(dataset.selectedObs, ["omit"]);
@@ -172,16 +213,25 @@ function CategoricalObs(_ref2) {
       }
     }
   }, [dataset.selectedObs, dispatch, obs, obs.name, updateObs]);
-  const getDataAtIndex = index => {
+  const getDataAtIndex = (0, _react.useCallback)(index => {
     return {
       value: obs.values[index],
       code: obs.codes[obs.values[index]],
       value_counts: obs.value_counts[obs.values[index]],
       pct: obs.value_counts[obs.values[index]] / totalCounts * 100,
       isOmitted: _lodash.default.includes(obs.omit, obs.codes[obs.values[index]]),
-      label: obs.values[index]
+      label: obs.values[index],
+      histogramData: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
+        data: obsHistograms.fetchedData?.[obs.values[index]],
+        isPending: obsHistograms.isPending,
+        altColor: isSliced
+      } : {
+        data: null,
+        isPending: false
+      }
     };
-  };
+  }, [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, {
@@ -306,7 +356,7 @@ function ContinuousObs(_ref4) {
   const ENDPOINT = "obs/bins";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const binnedObs = binContinuous(obs);
+  const binnedObs = binContinuous(obs, _lodash.default.min([N_BINS, obs.n_unique]));
   const params = {
     url: dataset.url,
     obsCol: binnedObs.name,

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

@@ -25,6 +25,9 @@ function ObsColsList(_ref) {
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [obsCols, setObsCols] = (0, _react.useState)(null);
   const [active, setActive] = (0, _react.useState)(dataset.selectedObs?.name);
+  const [expandedItems, setExpandedItems] = (0, _react.useState)(active ? {
+    [active]: true
+  } : {});
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
@@ -45,7 +48,13 @@ function ObsColsList(_ref) {
   });
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
-      setObsCols(_lodash.default.keyBy(_lodash.default.map(fetchedData, d => {
+      let filteredData = fetchedData;
+      if (dataset.obsCols) {
+        filteredData = _lodash.default.filter(filteredData, d => {
+          return _lodash.default.includes(dataset.obsCols, d.name);
+        });
+      }
+      setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
         return {
           ...d,
           codesMap: _lodash.default.invert(d.codes),
@@ -53,7 +62,7 @@ function ObsColsList(_ref) {
         };
       }), "name"));
     }
-  }, [fetchedData, isPending, serverError]);
+  }, [dataset.obsCols, fetchedData, isPending, serverError]);
 
   // @TODO: fix re-rendering performance issue
   (0, _react.useEffect)(() => {
@@ -73,6 +82,18 @@ function ObsColsList(_ref) {
       };
     });
   };
+  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 toggleAll = item => {
     const omit = item.omit.length ? [] : _lodash.default.map(item.values, v => item.codes[v]);
     setObsCols(o => {
@@ -162,9 +183,10 @@ function ObsColsList(_ref) {
       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: item.type === _constants.OBS_TYPES.CATEGORICAL || item.type === _constants.OBS_TYPES.BOOLEAN ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsItem.CategoricalObs, {
+        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),
@@ -181,7 +203,7 @@ function ObsColsList(_ref) {
           toggleLabel: () => toggleLabel(item),
           toggleSlice: () => toggleSlice(item),
           toggleColor: () => toggleColor(item)
-        }, item.name)
+        }, item.name))
       })]
     }, item.name);
   });
@@ -192,7 +214,7 @@ function ObsColsList(_ref) {
         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,
+          defaultActiveKey: [active],
           alwaysOpen: true,
           children: obsList
         })]