@haniffalab/cherita-react 0.2.1 → 1.0.0-dev.2025-03-07.aedc1788

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,15 @@
 [![build](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish.yml)
 [![build-dev](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish-dev.yml/badge.svg)](https://github.com/haniffalab/cherita-react/actions/workflows/npm-publish-dev.yml)
 [![npm](https://img.shields.io/npm/v/@haniffalab/cherita-react)](https://www.npmjs.com/package/@haniffalab/cherita-react)
+[![tests](https://github.com/haniffalab/cherita-react/actions/workflows/tests.yml/badge.svg)](https://github.com/haniffalab/cherita-react/actions/workflows/tests.yml)
 [![codecov](https://codecov.io/gh/haniffalab/cherita-react/graph/badge.svg?token=8RLSQP1FFB)](https://codecov.io/gh/haniffalab/cherita-react)
 
-# Cherita
+# Cherita React
+
+[![demo](https://img.shields.io/badge/Demo-view-blue)](https://default-dot-haniffa-lab.nw.r.appspot.com/)
+[![doi](https://zenodo.org/badge/DOI/10.5281/zenodo.14244809.svg)](https://doi.org/10.5281/zenodo.14244809)
+
+React component library designed for data visualisation and analysis of single-cell and spatial multi-omics data. This library provides a set of reusable and customisable components that can be used to used to build study narratives.
 
 ## Development
 

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FullPage = FullPage;
 exports.FullPagePlots = FullPagePlots;
-exports.FullPagePseudospatial = FullPagePseudospatial;
 exports.FullPageScatterplot = FullPageScatterplot;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
@@ -16,7 +15,6 @@ 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");
@@ -30,46 +28,46 @@ function FullPage({
   varMode = _constants.SELECTION_MODES.SINGLE,
   ...props
 }) {
-  const targetRef = (0, _react.useRef)();
+  const appRef = (0, _react.useRef)();
+  const [appDimensions, setAppDimensions] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
   const [showVars, setShowVars] = (0, _react.useState)(false);
   const [showControls, setShowControls] = (0, _react.useState)(false);
-  const [dimensions, setDimensions] = (0, _react.useState)({
-    width: 0,
-    height: 0
-  });
-  (0, _react.useLayoutEffect)(() => {
-    function updateDimensions() {
-      if (targetRef.current) {
+  (0, _react.useEffect)(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
         // Get the distance from the top of the page to the target element
-        const rect = targetRef.current.getBoundingClientRect();
+        const rect = appRef.current.getBoundingClientRect();
         const distanceFromTop = rect.top + window.scrollY;
 
         // Calculate the available height for the Cherita app
         const availableHeight = window.innerHeight - distanceFromTop;
 
         // Update the dimensions to fit the viewport minus the navbar height
-        setDimensions({
-          width: targetRef.current.offsetWidth,
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
           height: availableHeight
         });
       }
-    }
+    };
     window.addEventListener("resize", updateDimensions);
     updateDimensions(); // Initial update
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: targetRef,
+    ref: appRef,
     className: "cherita-app",
     style: {
-      height: dimensions.height
+      height: appDimensions.height
     }
   }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement("div", {
     className: "row g-0"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "cherita-app-obs"
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-plot"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -126,27 +124,6 @@ function FullPage({
 function FullPageScatterplot(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
 }
-function FullPagePseudospatial(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid h-100"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12 col-lg-7"
-  }, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12 col-lg-5"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid h-100 d-flex align-itemms-center justify-content-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row w-100 py-3"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-2"
-  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, null))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-12"
-  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.PseudospatialImage, null))))))));
-}
 function FullPagePlots(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
     varMode: _constants.SELECTION_MODES.MULTIPLE

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

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullPage = FullPage;
+exports.FullPagePseudospatial = FullPagePseudospatial;
+var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _ObsList = require("../obs-list/ObsList");
+var _offcanvas = require("../offcanvas");
+var _Pseudospatial = require("../pseudospatial/Pseudospatial");
+var _PseudospatialToolbar = require("../pseudospatial/PseudospatialToolbar");
+var _Scatterplot = require("../scatterplot/Scatterplot");
+var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
+var _SearchBar = require("../search-bar/SearchBar");
+var _VarList = require("../var-list/VarList");
+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({
+  children,
+  varMode = _constants.SELECTION_MODES.SINGLE,
+  ...props
+}) {
+  const appRef = (0, _react.useRef)();
+  const [appDimensions, setAppDimensions] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  const [showObs, setShowObs] = (0, _react.useState)(false);
+  const [showObsm, setShowObsm] = (0, _react.useState)(false);
+  const [showVars, setShowVars] = (0, _react.useState)(false);
+  const [showControls, setShowControls] = (0, _react.useState)(false);
+  const [showPseudospatialControls, setShowPseudospatialControls] = (0, _react.useState)(false);
+  const [showModal, setShowModal] = (0, _react.useState)(false);
+  const [pseudospatialPlotType, setpseudospatialPlotType] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
+        // Get the distance from the top of the page to the target element
+        const rect = appRef.current.getBoundingClientRect();
+        const distanceFromTop = rect.top + window.scrollY;
+
+        // Calculate the available height for the Cherita app
+        const availableHeight = window.innerHeight - distanceFromTop;
+
+        // Update the dimensions to fit the viewport minus the navbar height
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
+          height: availableHeight
+        });
+      }
+    };
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: appRef,
+    className: "cherita-app",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Container, {
+    fluid: true,
+    className: "d-flex g-0",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-sidebar p-3"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Header, {
+    className: "d-flex justify-content-evenly align-items-center"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "link",
+    onClick: () => setShowModal(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faArrowUpRightFromSquare
+  }))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
+    className: "d-flex flex-column p-0"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar-pseudospatial"
+  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
+    className: "sidebar-pseudospatial",
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sidebar-features modern-scrollbars"
+  }, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+    searchDiseases: true,
+    searchVar: true
+  }), /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
+    mode: varMode
+  })))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: showModal,
+    onHide: () => setShowModal(false),
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
+    closeButton: true
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, {
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls,
+    height: 500
+  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: _ScatterplotControls.ScatterplotControls
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    show: showPseudospatialControls,
+    handleClose: () => setShowPseudospatialControls(false),
+    Controls: _PseudospatialToolbar.PseudospatialToolbar,
+    plotType: pseudospatialPlotType
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  }))));
+}
+function FullPagePseudospatial(props) {
+  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+}

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

@@ -20,6 +20,7 @@ var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _string = require("../../utils/string");
 var _VirtualizedList = require("../../utils/VirtualizedList");
+var _zarrData = require("../../utils/zarrData");
 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; }
@@ -79,12 +80,55 @@ const useObsHistogram = obs => {
     refetchOnMount: false
   });
 };
+const getBinIndex = (v, binEdges) => {
+  const EPSILON = 1e-6;
+  const lastEdge = _lodash.default.last(binEdges);
+  const allButLastEdges = _lodash.default.initial(binEdges);
+  const modifiedBinEdges = [...allButLastEdges, [lastEdge[0], lastEdge[1] + EPSILON]];
+  return _lodash.default.findIndex(modifiedBinEdges, range => _lodash.default.inRange(v, ...range));
+};
+const useFilteredObsData = obs => {
+  const {
+    obsIndices
+  } = (0, _FilterContext.useFilteredData)();
+  const obsData = (0, _zarrData.useObsData)(obs);
+  const isCategorical = obs.type === _constants.OBS_TYPES.CATEGORICAL || obs.type === _constants.OBS_TYPES.BOOLEAN;
+  const {
+    valueCounts,
+    pct
+  } = (0, _react.useMemo)(() => {
+    const filteredObsValues = _lodash.default.at(obsData.data, [...(obsIndices || [])]);
+    let valueCounts = {};
+    if (isCategorical) {
+      valueCounts = _lodash.default.countBy(filteredObsValues);
+    } else {
+      valueCounts = _lodash.default.countBy(filteredObsValues, v => {
+        return getBinIndex(v, obs.bins?.binEdges || [[null, null]]);
+      });
+    }
+    valueCounts = _lodash.default.mapKeys(valueCounts, (_v, i) => {
+      return obs.codesMap[i];
+    });
+    const totalCounts = obsIndices?.size;
+    const pct = _lodash.default.mapValues(valueCounts, v => v / totalCounts * 100);
+    return {
+      valueCounts,
+      pct
+    };
+  }, [isCategorical, obs.bins?.binEdges, obs.codesMap, obsData.data, obsIndices]);
+  return {
+    value_counts: valueCounts,
+    pct: pct
+  };
+};
 function CategoricalItem({
   value,
   label,
   code,
-  value_counts,
-  pct,
+  stats = {
+    value_counts: null,
+    pct: null
+  },
   isOmitted,
   min,
   max,
@@ -94,6 +138,11 @@ function CategoricalItem({
     isPending: false,
     altColor: false
   },
+  filteredStats = {
+    value_counts: null,
+    pct: null
+  },
+  isSliced,
   showColor = true
 }) {
   const {
@@ -114,27 +163,49 @@ function CategoricalItem({
     onChange: () => onChange(value)
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pl-1 m-0 flex-grow-1"
   }, /*#__PURE__*/_react.default.createElement(_Histogram.Histogram, {
     data: histogramData.data,
     isPending: histogramData.isPending,
     altColor: histogramData.altColor
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "pl-1 m-0"
   }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    title: `${(0, _string.formatNumerical)(pct, _string.FORMATS.EXPONENTIAL)}%`,
+    title: isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Filtered:", " ", (0, _string.formatNumerical)(filteredStats.pct, _string.FORMATS.EXPONENTIAL), "%", /*#__PURE__*/_react.default.createElement("br", null), "Total: ", (0, _string.formatNumerical)(stats.pct, _string.FORMATS.EXPONENTIAL), "%") : `${(0, _string.formatNumerical)(stats.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-count-badge"
+  }, " ", isSliced && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _string.formatNumerical)(parseInt(filteredStats.value_counts)), " ", "out of", " "), (0, _string.formatNumerical)(parseInt(stats.value_counts), _string.FORMATS.EXPONENTIAL)), /*#__PURE__*/_react.default.createElement("div", {
     className: "value-pct-gauge-container"
-  }, /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
-    value: pct,
+  }, isSliced ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
+    className: "pct-gauge filtered-pct-gauge",
+    value: filteredStats.pct,
+    text: null,
+    innerRadius: "50%",
+    outerRadius: "75%",
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  }), /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
+    className: "pct-gauge",
+    value: stats.pct,
+    text: null,
+    innerRadius: "75%",
+    margin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_xCharts.Gauge, {
+    value: stats.pct,
     text: null,
     innerRadius: "50%",
     margin: {
@@ -186,6 +257,7 @@ function CategoricalObs({
   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"]);
@@ -208,8 +280,10 @@ function CategoricalObs({
     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,
+      stats: {
+        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],
       histogramData: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? {
@@ -219,11 +293,18 @@ function CategoricalObs({
       } : {
         data: null,
         isPending: false
-      }
+      },
+      filteredStats: {
+        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
+        pct: filteredObsData?.pct[obs.values[index]] || 0
+      },
+      isSliced: isSliced
     };
-  }, [dataset.colorEncoding, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
+  }, [dataset.colorEncoding, filteredObsData?.pct, filteredObsData?.value_counts, isSliced, obs.codes, obs.omit, obs.value_counts, obs.values, obsHistograms.fetchedData, obsHistograms.isPending, totalCounts]);
   showColor &= dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS;
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll,
     onToggleLabel: toggleLabel,
@@ -310,6 +391,9 @@ function ContinuousObs({
 }) {
   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 = {
@@ -325,6 +409,7 @@ function ContinuousObs({
   } = (0, _requests.useFetch)(ENDPOINT, params, {
     refetchOnMount: false
   });
+  const filteredObsData = useFilteredObsData(obs);
   const updatedObs = fetchedData && _lodash.default.isMatch(obs, fetchedData);
   (0, _react.useEffect)(() => {
     // Update ObsList obsCols with bin data
@@ -362,13 +447,22 @@ function ContinuousObs({
     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,
+      stats: {
+        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: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges)
+      label: isNaN(obs.values[index]) ? "NaN" : getContinuousLabel(obs.codes[obs.values[index]], obs.bins.binEdges),
+      filteredStats: {
+        value_counts: filteredObsData?.value_counts[obs.values[index]] || 0,
+        pct: filteredObsData?.pct[obs.values[index]] || 0
+      },
+      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, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
+  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, {
+    variant: "flush"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement(_ObsToolbar.ObsToolbar, {
     item: obs,
     onToggleAllObs: toggleAll,
     onToggleLabel: toggleLabel,

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

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObsColsList = ObsColsList;
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
 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");
@@ -173,17 +178,56 @@ function ObsColsList({
       });
     }
   };
-  const obsList = _lodash.default.map(obsCols, item => {
+  function ObsAccordionToggle({
+    children,
+    eventKey
+  }) {
+    const {
+      activeEventKey
+    } = (0, _react.useContext)(_AccordionContext.default);
+    const decoratedOnClick = (0, _AccordionButton.useAccordionButton)(eventKey, () => {
+      handleAccordionToggle(eventKey);
+    });
+    const isCurrentEventKey = Array.isArray(activeEventKey) ? activeEventKey.includes(eventKey) : activeEventKey === eventKey;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `obs-accordion-header ${isCurrentEventKey ? "active" : ""}`,
+      onClick: decoratedOnClick
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "obs-accordion-header-chevron"
+    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: isCurrentEventKey ? _freeSolidSvgIcons.faChevronDown : _freeSolidSvgIcons.faChevronRight
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "obs-accordion-header-title"
+    }, children));
+  }
+  const obsList = _lodash.default.map(obsCols, (item, index) => {
     if (item.type === _constants.OBS_TYPES.DISCRETE) {
       return null;
     }
-    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"
-    }, /*#__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, {
+    const inLabelObs = _lodash.default.some(dataset.labelObs, i => i.name === item.name);
+    const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
+    const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.name
+    }, /*#__PURE__*/_react.default.createElement(ObsAccordionToggle, {
+      eventKey: item.name
+    }, /*#__PURE__*/_react.default.createElement("div", null, item.name), /*#__PURE__*/_react.default.createElement("div", null, inLabelObs && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      className: "mx-1",
+      icon: _freeSolidSvgIcons.faListOl,
+      title: "In tooltip"
+    }), inSliceObs && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      className: "mx-1",
+      icon: _freeSolidSvgIcons.faScissors,
+      title: "Filter applied"
+    }), isColorEncoding && /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      className: "mx-1",
+      icon: _freeSolidSvgIcons.faDroplet,
+      title: "Is color encoding"
+    }))), /*#__PURE__*/_react.default.createElement(_Accordion.default.Collapse, {
+      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, {
       key: item.name,
       obs: item,
       updateObs: updateObs,
@@ -202,18 +246,15 @@ function ObsColsList({
       toggleLabel: () => toggleLabel(item),
       toggleSlice: () => toggleSlice(item),
       toggleColor: () => toggleColor(item)
-    }))));
+    })))));
   });
   if (!serverError) {
-    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, {
+    return /*#__PURE__*/_react.default.createElement("div", null, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_Accordion.default, {
       flush: true,
       defaultActiveKey: [active],
-      alwaysOpen: true
-    }, obsList)));
+      alwaysOpen: true,
+      className: "obs-accordion"
+    }, obsList));
   } else {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"

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

@@ -29,7 +29,7 @@ function ObsToolbar({
   const inSliceObs = dataset.sliceBy.obs && dataset.selectedObs?.name === item.name;
   const isColorEncoding = dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && dataset.selectedObs?.name === item.name;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex"
+    className: "d-flex align-items-center"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-grow-1"
   }, showToggleAllObs && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
@@ -45,14 +45,14 @@ function ObsToolbar({
     onClick: onToggleLabel,
     title: "Add to tooltip"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faFont
+    icon: _freeSolidSvgIcons.faListOl
   })), showSlice && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: inSliceObs ? "primary" : "outline-primary",
     size: "sm",
     onClick: onToggleSlice,
-    title: "Slice to selected"
+    title: "Filter to selected"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faEye
+    icon: _freeSolidSvgIcons.faScissors
   })), showColor && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: isColorEncoding ? "primary" : "outline-primary",
     size: "sm",