@haniffalab/cherita-react 1.3.0-dev.2025-05-29.ee7e9b72 → 1.3.0-dev.2025-06-04.d986a94b

package/dist/esm/components/heatmap/Heatmap.js

@@ -5,15 +5,25 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert } from "react-bootstrap";
+import { Alert, Button } from "react-bootstrap";
 import Plot from "react-plotly.js";
+import { PLOTLY_MODEBAR_BUTTONS } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
-export function Heatmap() {
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+export function Heatmap(_ref) {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
+  let {
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
   const ENDPOINT = "heatmap";
   const dataset = useDataset();
   const settings = useSettings();
@@ -90,17 +100,29 @@ export function Heatmap() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-heatmap position-relative"
+        className: "cherita-plot cherita-heatmap position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -108,7 +130,15 @@ export function Heatmap() {
       className: "cherita-heatmap"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/components/matrixplot/Matrixplot.js

@@ -5,15 +5,25 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import { Alert } from "react-bootstrap";
+import { Alert, Button } from "react-bootstrap";
 import Plot from "react-plotly.js";
+import { PLOTLY_MODEBAR_BUTTONS } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
-export function Matrixplot() {
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+export function Matrixplot(_ref) {
   var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
+  let {
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
   const ENDPOINT = "matrixplot";
   const dataset = useDataset();
   const settings = useSettings();
@@ -92,17 +102,29 @@ export function Matrixplot() {
     colorscale.current = settings.controls.colorScale;
     updateColorscale(colorscale.current);
   }, [settings.controls.colorScale, updateColorscale]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-matrixplot position-relative"
+        className: "cherita-plot cherita-matrixplot position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }));
     }
@@ -110,7 +132,15 @@ export function Matrixplot() {
       className: "cherita-matrixplot"
     }, /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features and a category"));
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features", " ", "and a", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "category") : "category"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

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

@@ -48,7 +48,8 @@ export function ObsColsList(_ref2) {
   var _settings$selectedObs;
   let {
     showColor = true,
-    enableObsGroups = true
+    enableObsGroups = true,
+    showSelectedAsActive = false
   } = _ref2;
   const ENDPOINT = "obs/cols";
   const dataset = useDataset();
@@ -215,7 +216,7 @@ export function ObsColsList(_ref2) {
     }
     const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
     const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
-    const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
+    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
     return /*#__PURE__*/React.createElement("div", {
       className: "accordion-item",
       key: item.name
@@ -242,7 +243,7 @@ export function ObsColsList(_ref2) {
         event.stopPropagation();
         toggleColor(item);
       },
-      title: "Is color encoding"
+      title: showSelectedAsActive ? "Is selected" : "Is color encoding"
     }, /*#__PURE__*/React.createElement(WaterDropIcon, null)))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
       eventKey: item.name
     }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/components/scatterplot/SpatialControls.js

@@ -8,9 +8,9 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
-import { useDataset } from "../../context/DatasetContext";
 import { OffcanvasControls } from "../offcanvas";
 import { ScatterplotControls } from "./ScatterplotControls";
+import { BREAKPOINTS } from "../../constants/constants";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 export function SpatialControls(_ref) {
   var _features$features;
@@ -32,8 +32,8 @@ export function SpatialControls(_ref) {
   const [showControls, setShowControls] = useState(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
-  const LgBreakpoint = useMediaQuery("(max-width: 991.98px)");
-  const XlBreakpoint = useMediaQuery("(max-width: 1199.98px)");
+  const LgBreakpoint = useMediaQuery(BREAKPOINTS.LG);
+  const XlBreakpoint = useMediaQuery(BREAKPOINTS.XL);
   const showObsBtn = isFullscreen ? LgBreakpoint : true;
   const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {

package/dist/esm/components/toolbar/Toolbar.js

@@ -0,0 +1,91 @@
+import React from "react";
+import { faList, faSearch, faSliders } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Container, Nav, Navbar } from "react-bootstrap";
+export const Toolbar = _ref => {
+  let {
+    showObsBtn = true,
+    showVarsBtn = true,
+    showCtrlsBtn = true,
+    setShowObs,
+    setShowVars,
+    setShowControls
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Navbar, {
+    expand: "md",
+    bg: "primary",
+    variant: "dark",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement(Container, {
+    fluid: true
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    navbarScroll: true
+  }, showObsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faList,
+    className: "me-2"
+  }), "Explore Categories")), showVarsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSearch,
+    className: "me-2"
+  }), "Search Genes")), showCtrlsBtn && /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "me-2"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSliders,
+    className: "me-2"
+  }), "Controls"))))));
+};
+export const ObsPlotlyToolbar = _ref2 => {
+  let {
+    onClick
+  } = _ref2;
+  return {
+    name: "Categories",
+    icon: {
+      width: 512,
+      height: 512,
+      path: faList.icon[4]
+    },
+    click: onClick
+  };
+};
+export const VarPlotlyToolbar = _ref3 => {
+  let {
+    onClick
+  } = _ref3;
+  return {
+    name: "Features",
+    icon: {
+      width: 512,
+      height: 512,
+      path: faSearch.icon[4]
+    },
+    click: onClick
+  };
+};
+export const ControlsPlotlyToolbar = _ref4 => {
+  let {
+    onClick
+  } = _ref4;
+  return {
+    name: "Controls",
+    icon: {
+      width: 512,
+      height: 512,
+      path: faSliders.icon[4]
+    },
+    click: onClick
+  };
+};

package/dist/esm/components/violin/Violin.js

@@ -7,18 +7,25 @@ import React, { useEffect, useState } from "react";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Alert, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Alert, Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import Plot from "react-plotly.js";
-import { VIOLIN_MODES } from "../../constants/constants";
+import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
 import { useFilteredData } from "../../context/FilterContext";
 import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Violin(_ref) {
   var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
-    mode = VIOLIN_MODES.MULTIKEY
+    mode = VIOLIN_MODES.MULTIKEY,
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = useDataset();
@@ -117,17 +124,29 @@ export function Violin(_ref) {
       setLayout(fetchedData.layout);
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
+  const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
+    onClick: setShowObs
+  }), showVarsBtn && VarPlotlyToolbar({
+    onClick: setShowVars
+  }), showCtrlsBtn && ControlsPlotlyToolbar({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, PLOTLY_MODEBAR_BUTTONS] : [PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/React.createElement("div", {
-        className: "cherita-violin position-relative"
+        className: "cherita-plot cherita-violin position-relative"
       }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
         data: data,
         layout: layout,
         useResizeHandler: true,
         style: {
-          maxWidth: "100%",
-          maxHeight: "100%"
+          width: "100%",
+          height: "100%"
+        },
+        config: {
+          displaylogo: false,
+          modeBarButtons: modeBarButtons
         }
       }), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement(Alert, {
         variant: "warning"
@@ -142,9 +161,21 @@ export function Violin(_ref) {
       className: "cherita-violin"
     }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features"), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement(Alert, {
       variant: "light"
-    }, "Select categories and a feature"));
+    }, "Select", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "categories") : "categories", " ", "and a", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "feature") : "feature"));
   } else {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
       variant: "danger"

package/dist/esm/constants/constants.js

@@ -1,4 +1,11 @@
 export const LOCAL_STORAGE_KEY = "CHERITA";
+export const PLOT_TYPES = {
+  SCATTERPLOT: "scatterplot",
+  DOTPLOT: "dotplot",
+  HEATMAP: "heatmap",
+  MATRIXPLOT: "matrixplot",
+  VIOLINPLOT: "violinplot"
+};
 export const COLOR_ENCODINGS = {
   VAR: "var",
   OBS: "obs"
@@ -85,4 +92,9 @@ export const PSEUDOSPATIAL_CATEGORICAL_MODES = {
 
 // `default` cols to be shown out of accordion, at top of obslist
 // default values from cellxgene schema
-export const DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];
+export const DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];
+export const PLOTLY_MODEBAR_BUTTONS = ["toImage", "zoom2d", "pan2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d"];
+export const BREAKPOINTS = {
+  LG: "(max-width: 991.98px)",
+  XL: "(max-width: 1199.98px)"
+};

package/dist/esm/index.js

@@ -1,22 +1,22 @@
 export { Dotplot } from "./components/dotplot/Dotplot";
 export { DotplotControls } from "./components/dotplot/DotplotControls";
+export { FullPage } from "./components/full-page/FullPage";
 export { Heatmap } from "./components/heatmap/Heatmap";
 export { HeatmapControls } from "./components/heatmap/HeatmapControls";
 export { Matrixplot } from "./components/matrixplot/Matrixplot";
 export { MatrixplotControls } from "./components/matrixplot/MatrixplotControls";
 export { ObsColsList } from "./components/obs-list/ObsList";
 export { ObsmKeysList } from "./components/obsm-list/ObsmList";
+export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
 export { Pseudospatial } from "./components/pseudospatial/Pseudospatial";
 export { Scatterplot } from "./components/scatterplot/Scatterplot";
 export { ScatterplotControls } from "./components/scatterplot/ScatterplotControls";
 export { SearchBar } from "./components/search-bar/SearchBar";
+export { Toolbar } from "./components/toolbar/Toolbar";
 export { VarNamesList } from "./components/var-list/VarList";
 export { Violin } from "./components/violin/Violin";
 export { ViolinControls } from "./components/violin/ViolinControls";
-export { FullPage, FullPagePlots, FullPageScatterplot } from "./components/full-page/FullPage";
-export { FullPagePseudospatial } from "./components/full-page/FullPagePseudospatial";
-export { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "./components/offcanvas";
 export { COLORSCALES } from "./constants/colorscales";
-export { SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
+export { PLOT_TYPES, SELECTION_MODES, VIOLIN_MODES } from "./constants/constants";
 export { DatasetProvider } from "./context/DatasetContext";
 export { FilterProvider } from "./context/FilterContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.3.0-dev.2025-05-29.ee7e9b72",
+  "version": "1.3.0-dev.2025-06-04.d986a94b",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -126,5 +126,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "ee7e9b72ff17d43a4febc5169837417e48926f4a"
+  "prereleaseSha": "d986a94bdc972b9311bb9b027e3d08030fc30d79"
 }

package/scss/cherita.scss

@@ -58,7 +58,6 @@ $prefix: "bs-" !default;
 /* End scrollbar styling */
 
 .cherita-container-plot {
-  margin-top: 76px;
   padding: 20px;
   position: relative;
   min-height: 400px;

package/scss/components/layouts.scss

@@ -1,5 +1,6 @@
 .cherita-app {
   position: relative;
+  width: 100%;
 }
 
 .cherita-app {
@@ -50,6 +51,21 @@
     overflow-y: hidden;
   }
 
+  .sidebar-plotselector {
+    padding: 6px;
+    border-bottom: 1px solid #dee2e6;
+
+    .plotselector-icon {
+      padding-bottom: 2px;
+      cursor: pointer;
+
+      .active {
+        opacity: 1;
+        border-bottom: 2px solid #007bff;
+      }
+    }
+  }
+
   .sidebar-pseudospatial {
     padding: 10px;
     border-bottom: 1px solid #dee2e6;
@@ -108,6 +124,58 @@
   border-left: 1px solid #dee2e6;
 }
 
+.cherita-app-canvas {
+  .cherita-plot {
+    height: 100%;
+    min-height: 400px;
+  }
+}
+
+.cherita-app-container {
+  @extend .p-0;
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+
+  .cherita-app-obs {
+    flex: 0 0 auto;
+    min-width: 350px;
+    max-width: 20%;
+    overflow-y: auto;
+  }
+
+  .cherita-app-canvas {
+    @extend .p-1;
+    flex: 1 1 auto;
+    min-width: 400px;
+    position: relative;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .cherita-navbar {
+      @extend .m-0;
+      @extend .d-block;
+      position: relative;
+    }
+  }
+
+  .cherita-app-sidebar {
+    flex: 0 0 auto;
+    min-width: 350px;
+    max-width: 20%;
+    position: relative;
+  }
+
+  @media (max-width: 1400px) {
+    .cherita-app-obs,
+    .cherita-app-sidebar {
+      max-width: 25%;
+    }
+  }
+}
+
 .ps-xs-1 {
   padding-left: 0.15rem !important;
-}
+}

package/scss/components/plotly.scss

@@ -1,30 +1,35 @@
 .js-plotly-plot .plotly .modebar {
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 0 4px !important;
 
   .modebar-group {
-    margin: 0 !important;
-    padding: 0 !important;
-    background-color: transparent !important;
+    @extend .bg-primary;
+    @extend .mx-1;
+    border-radius: 5px;
+    padding: 4px !important;
 
     .modebar-btn {
-      fill: white !important; /* Ensures white icons */
-      color: white !important; /* Ensures text/icons are visible */
+      display: inline-flex;
+      justify-content: center;
       position: relative;
-      font-size: 16px;
-      padding: 4px;
+      font-size: 1.25rem;
+      padding: 0.25rem;
       height: auto;
       cursor: pointer;
       line-height: normal;
 
       svg {
         position: relative;
-        top: auto;
-        bottom: auto;
-        left: auto;
-        right: auto;
+        top: 1px;
+
+        path {
+          fill: white !important;
+          color: white !important;
+        }
       }
     }
   }
 }
+
+.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
+  opacity: 0.5;
+  transition: opacity 0.3s;
+}