@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.09fbcbf5

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

@@ -16,6 +16,7 @@ var _FilterContext = require("../../context/FilterContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _Toolbar = require("../toolbar/Toolbar");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -26,7 +27,13 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function Violin(_ref) {
   var _settings$selectedVar, _settings$selectedVar2, _settings$selectedVar3, _settings$selectedVar4, _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
   let {
-    mode = _constants.VIOLIN_MODES.MULTIKEY
+    mode = _constants.VIOLIN_MODES.MULTIKEY,
+    showObsBtn = false,
+    showVarsBtn = false,
+    showCtrlsBtn = false,
+    setShowObs,
+    setShowVars,
+    setShowControls
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -125,17 +132,29 @@ function Violin(_ref) {
       setLayout(fetchedData.layout);
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
+  const customModeBarButtons = _lodash.default.compact([showObsBtn && (0, _Toolbar.ObsPlotlyToolbar)({
+    onClick: setShowObs
+  }), showVarsBtn && (0, _Toolbar.VarPlotlyToolbar)({
+    onClick: setShowVars
+  }), showCtrlsBtn && (0, _Toolbar.ControlsPlotlyToolbar)({
+    onClick: setShowControls
+  })]);
+  const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cherita-violin position-relative"
+        className: "cherita-plot cherita-violin position-relative"
       }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
         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.default.createElement(_reactBootstrap.Alert, {
         variant: "warning"
@@ -150,9 +169,21 @@ function Violin(_ref) {
       className: "cherita-violin"
     }, mode === _constants.VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "light"
-    }, "Select features"), mode === _constants.VIOLIN_MODES.GROUPBY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+    }, "Select", " ", showVarsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "features") : "features"), mode === _constants.VIOLIN_MODES.GROUPBY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "light"
-    }, "Select categories and a feature"));
+    }, "Select", " ", showObsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowObs
+    }, "categories") : "categories", " ", "and a", " ", showVarsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+      variant: "link",
+      className: "border-0 p-0 align-baseline",
+      onClick: setShowVars
+    }, "feature") : "feature"));
   } else {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
       variant: "danger"

package/dist/cjs/constants/constants.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.COLOR_ENCODINGS = void 0;
+exports.VIOLIN_MODES = exports.VIOLINPLOT_SCALES = exports.VAR_SORT_ORDER = exports.VAR_SORT = exports.UNSELECTED_POLYGON_FILLCOLOR = exports.SELECTION_MODES = exports.SELECTED_POLYGON_FILLCOLOR = exports.PSEUDOSPATIAL_PLOT_TYPES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PLOT_TYPES = exports.PLOTLY_MODEBAR_BUTTONS = exports.OBS_TYPES = exports.MATRIXPLOT_SCALES = exports.LOCAL_STORAGE_KEY = exports.DOTPLOT_SCALES = exports.DEFAULT_OBS_GROUP = exports.COLOR_ENCODINGS = exports.BREAKPOINTS = void 0;
 const LOCAL_STORAGE_KEY = exports.LOCAL_STORAGE_KEY = "CHERITA";
+const PLOT_TYPES = exports.PLOT_TYPES = {
+  SCATTERPLOT: "scatterplot",
+  DOTPLOT: "dotplot",
+  HEATMAP: "heatmap",
+  MATRIXPLOT: "matrixplot",
+  VIOLINPLOT: "violinplot"
+};
 const COLOR_ENCODINGS = exports.COLOR_ENCODINGS = {
   VAR: "var",
   OBS: "obs"
@@ -91,4 +98,9 @@ const PSEUDOSPATIAL_CATEGORICAL_MODES = exports.PSEUDOSPATIAL_CATEGORICAL_MODES
 
 // `default` cols to be shown out of accordion, at top of obslist
 // default values from cellxgene schema
-const DEFAULT_OBS_GROUP = exports.DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];
+const DEFAULT_OBS_GROUP = exports.DEFAULT_OBS_GROUP = ["assay", "cell_type", "development_stage", "disease", "donor_id", "organism", "self_reported_ethnicity", "sex", "suspension_type", "tissue", "tissue_type"];
+const PLOTLY_MODEBAR_BUTTONS = exports.PLOTLY_MODEBAR_BUTTONS = ["toImage", "zoom2d", "pan2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d"];
+const BREAKPOINTS = exports.BREAKPOINTS = {
+  LG: "(max-width: 991.98px)",
+  XL: "(max-width: 1199.98px)"
+};

package/dist/cjs/context/DatasetContext.js

@@ -69,7 +69,8 @@ const initialDataset = {
   obsGroups: null,
   imageUrl: null,
   defaultSettings: {},
-  canOverrideSettings: true
+  canOverrideSettings: true,
+  useUnsColors: false
 };
 function DatasetProvider(_ref2) {
   let {

package/dist/cjs/context/SettingsContext.js

@@ -19,6 +19,11 @@ 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); }
 const SettingsContext = exports.SettingsContext = /*#__PURE__*/(0, _react.createContext)(null);
 const SettingsDispatchContext = exports.SettingsDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+// @TODO: consider splitting constant values and dataset-resolved values
+// e.g. store only obs name in selectedObs, and resolved obs data (counts, values, etc.) elsewhere
+// e.g. store only var name in selectedVar, and resolved var data (index, matrix_index) elsewhere
+// would simplify passing and validating defaultSettings and localSettings
 const initialSettings = {
   selectedObs: null,
   selectedVar: null,
@@ -67,13 +72,51 @@ const initialSettings = {
     categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
   }
 };
+
+// validate on initialization and reducer
+const validateSettings = settings => {
+  // make sure selectedVar is in vars
+  if (settings.selectedVar) {
+    const inVars = _lodash.default.some(settings.vars, v => v.name === settings.selectedVar.name);
+    if (!inVars) {
+      settings.vars = [...settings.vars, settings.selectedVar];
+    }
+  }
+
+  // make sure selectedMultiVar are in vars
+  if (settings.selectedMultiVar) {
+    const notInVars = _lodash.default.differenceBy(settings.selectedMultiVar, settings.vars, "name");
+    if (notInVars.length) {
+      settings.vars = [...settings.vars, ...notInVars];
+    }
+  }
+
+  // make sure there's a selectedVar if colorEncoding is VAR
+  if (settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR) {
+    if (!settings.selectedVar) {
+      settings.colorEncoding = null;
+    } else if (settings.selectedVar.isSet && !settings.selectedVar.vars.length) {
+      settings.selectedVar = null;
+      settings.colorEncoding = null;
+    }
+  }
+
+  // make sure there's a selectedObs if colorEncoding is OBS
+  if (settings.colorEncoding === _constants.COLOR_ENCODINGS.OBS) {
+    if (!settings.selectedObs) {
+      settings.colorEncoding = null;
+    }
+  }
+  return settings;
+};
 const initializer = _ref => {
   let {
     canOverrideSettings,
     defaultSettings,
     localSettings
   } = _ref;
-  return canOverrideSettings ? _lodash.default.assign({}, initialSettings, defaultSettings, localSettings) : _lodash.default.assign({}, initialSettings, defaultSettings);
+  const mergedSettings = canOverrideSettings ? _lodash.default.assign({}, initialSettings, defaultSettings, localSettings) : _lodash.default.assign({}, initialSettings, defaultSettings);
+  return validateSettings(mergedSettings);
 };
 function SettingsProvider(_ref2) {
   let {
@@ -140,77 +183,65 @@ function settingsReducer(settings, action) {
       }
     case "select.var":
       {
-        if (settings.vars.find(v => _lodash.default.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var
-          });
-        } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedVar: action.var,
-            vars: [...settings.vars, action.var]
-          });
-        }
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: action.var
+        }));
       }
     case "select.multivar":
       {
-        const vars = settings.vars.find(v => _lodash.default.isEqual(v, action.var)) ? settings.vars : [...settings.vars, action.var];
-        if (settings.selectedMultiVar.find(v => _lodash.default.isEqual(v, action.var))) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            vars: vars
-          });
+        const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
+        if (inMultiVar) {
+          return validateSettings(_objectSpread({}, settings));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
-            selectedMultiVar: [...settings.selectedMultiVar, action.var],
-            vars: vars
-          });
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+            selectedMultiVar: [...settings.selectedMultiVar, action.var]
+          }));
         }
       }
     case "deselect.multivar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           selectedMultiVar: settings.selectedMultiVar.filter(v => v !== action.var.name)
-        });
+        }));
       }
     case "toggle.multivar":
       {
         const inMultiVar = settings.selectedMultiVar.some(v => v.name === action.var.name);
         if (inMultiVar) {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: settings.selectedMultiVar.filter(v => v.name !== action.var.name)
-          });
+          }));
         } else {
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             selectedMultiVar: [...settings.selectedMultiVar, action.var]
-          });
+          }));
         }
       }
     case "set.colorEncoding":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           colorEncoding: action.value
-        });
+        }));
       }
     case "reset.vars":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: [],
           selectedVar: null,
           selectedMultiVar: []
-        });
+        }));
       }
     case "reset.multiVar":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedMultiVar: [],
-          colorEncoding: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedMultiVar: []
+        }));
       }
     case "reset.var":
       {
-        return _objectSpread(_objectSpread({}, settings), {}, {
-          selectedVar: null,
-          colorEncoding: settings.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? null : settings.colorEncoding
-        });
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
+          selectedVar: null
+        }));
       }
     case "add.var":
       {
@@ -227,11 +258,11 @@ function settingsReducer(settings, action) {
         var _settings$selectedVar;
         const selectedVar = ((_settings$selectedVar = settings.selectedVar) === null || _settings$selectedVar === void 0 ? void 0 : _settings$selectedVar.name) === action.var.name ? null : settings.selectedVar;
         const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.var.name);
-        return _objectSpread(_objectSpread({}, settings), {}, {
+        return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
           vars: settings.vars.filter(a => a.name !== action.var.name),
           selectedVar: selectedVar,
           selectedMultiVar: selectedMultiVar
-        });
+        }));
       }
     case "add.varSet.var":
       {
@@ -265,11 +296,11 @@ function settingsReducer(settings, action) {
               return v;
             }
           });
-          return _objectSpread(_objectSpread({}, settings), {}, {
+          return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
             vars: vars,
             selectedVar: selectedVar,
             selectedMultiVar: selectedMultiVar
-          });
+          }));
         }
       }
     case "remove.varSet.var":
@@ -296,11 +327,11 @@ function settingsReducer(settings, action) {
             var _settings$selectedVar3;
             const selectedVar = ((_settings$selectedVar3 = settings.selectedVar) === null || _settings$selectedVar3 === void 0 ? void 0 : _settings$selectedVar3.name) === action.varSet.name ? null : settings.selectedVar;
             const selectedMultiVar = settings.selectedMultiVar.filter(v => v.name !== action.varSet.name);
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           } else {
             var _settings$selectedVar4;
             // Update selected if varSet is selected
@@ -316,11 +347,11 @@ function settingsReducer(settings, action) {
                 return v;
               }
             });
-            return _objectSpread(_objectSpread({}, settings), {}, {
+            return validateSettings(_objectSpread(_objectSpread({}, settings), {}, {
               vars: vars,
               selectedVar: selectedVar,
               selectedMultiVar: selectedMultiVar
-            });
+            }));
           }
         }
       }

package/dist/cjs/helpers/map-helper.js

@@ -54,7 +54,8 @@ class MapHelper {
     return {
       longitude,
       latitude,
-      zoom
+      zoom,
+      bounds
     };
   }
 }

package/dist/cjs/index.js

@@ -39,24 +39,6 @@ Object.defineProperty(exports, "FullPage", {
     return _FullPage.FullPage;
   }
 });
-Object.defineProperty(exports, "FullPagePlots", {
-  enumerable: true,
-  get: function () {
-    return _FullPage.FullPagePlots;
-  }
-});
-Object.defineProperty(exports, "FullPagePseudospatial", {
-  enumerable: true,
-  get: function () {
-    return _FullPagePseudospatial.FullPagePseudospatial;
-  }
-});
-Object.defineProperty(exports, "FullPageScatterplot", {
-  enumerable: true,
-  get: function () {
-    return _FullPage.FullPageScatterplot;
-  }
-});
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
   get: function () {
@@ -117,6 +99,12 @@ Object.defineProperty(exports, "OffcanvasVars", {
     return _offcanvas.OffcanvasVars;
   }
 });
+Object.defineProperty(exports, "PLOT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _constants.PLOT_TYPES;
+  }
+});
 Object.defineProperty(exports, "Pseudospatial", {
   enumerable: true,
   get: function () {
@@ -147,6 +135,12 @@ Object.defineProperty(exports, "SearchBar", {
     return _SearchBar.SearchBar;
   }
 });
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function () {
+    return _Toolbar.Toolbar;
+  }
+});
 Object.defineProperty(exports, "VIOLIN_MODES", {
   enumerable: true,
   get: function () {
@@ -173,22 +167,22 @@ Object.defineProperty(exports, "ViolinControls", {
 });
 var _Dotplot = require("./components/dotplot/Dotplot");
 var _DotplotControls = require("./components/dotplot/DotplotControls");
+var _FullPage = require("./components/full-page/FullPage");
 var _Heatmap = require("./components/heatmap/Heatmap");
 var _HeatmapControls = require("./components/heatmap/HeatmapControls");
 var _Matrixplot = require("./components/matrixplot/Matrixplot");
 var _MatrixplotControls = require("./components/matrixplot/MatrixplotControls");
 var _ObsList = require("./components/obs-list/ObsList");
 var _ObsmList = require("./components/obsm-list/ObsmList");
+var _offcanvas = require("./components/offcanvas");
 var _Pseudospatial = require("./components/pseudospatial/Pseudospatial");
 var _Scatterplot = require("./components/scatterplot/Scatterplot");
 var _ScatterplotControls = require("./components/scatterplot/ScatterplotControls");
 var _SearchBar = require("./components/search-bar/SearchBar");
+var _Toolbar = require("./components/toolbar/Toolbar");
 var _VarList = require("./components/var-list/VarList");
 var _Violin = require("./components/violin/Violin");
 var _ViolinControls = require("./components/violin/ViolinControls");
-var _FullPage = require("./components/full-page/FullPage");
-var _FullPagePseudospatial = require("./components/full-page/FullPagePseudospatial");
-var _offcanvas = require("./components/offcanvas");
 var _colorscales = require("./constants/colorscales");
 var _constants = require("./constants/constants");
 var _DatasetContext = require("./context/DatasetContext");

package/dist/css/cherita.css

@@ -7216,7 +7216,7 @@ textarea.form-control-lg {
   display: inline-block !important;
 }
 
-.d-block, .cherita-app .cherita-navbar {
+.d-block, .cherita-app .cherita-navbar, .cherita-app-container .cherita-app-canvas .cherita-navbar {
   display: block !important;
 }
 
@@ -7778,7 +7778,7 @@ textarea.form-control-lg {
   order: 6 !important;
 }
 
-.m-0 {
+.m-0, .cherita-app-container .cherita-app-canvas .cherita-navbar {
   margin: 0 !important;
 }
 
@@ -7811,7 +7811,7 @@ textarea.form-control-lg {
   margin-left: 0 !important;
 }
 
-.mx-1 {
+.mx-1, .js-plotly-plot .plotly .modebar .modebar-group {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
@@ -7988,11 +7988,11 @@ textarea.form-control-lg {
   margin-left: auto !important;
 }
 
-.p-0 {
+.p-0, .cherita-app-container {
   padding: 0 !important;
 }
 
-.p-1 {
+.p-1, .cherita-app-container .cherita-app-canvas {
   padding: 0.25rem !important;
 }
 
@@ -8666,7 +8666,7 @@ textarea.form-control-lg {
   --bs-link-underline-opacity: 1;
 }
 
-.bg-primary {
+.bg-primary, .js-plotly-plot .plotly .modebar .modebar-group {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
 }
@@ -11927,6 +11927,7 @@ textarea.form-control-lg {
 
 .cherita-app {
   position: relative;
+  width: 100%;
 }
 
 .cherita-app .cherita-navbar {
@@ -11961,6 +11962,18 @@ textarea.form-control-lg {
 .cherita-app-sidebar .card-body {
   overflow-y: hidden;
 }
+.cherita-app-sidebar .sidebar-plotselector {
+  padding: 6px;
+  border-bottom: 1px solid #dee2e6;
+}
+.cherita-app-sidebar .sidebar-plotselector .plotselector-icon {
+  padding-bottom: 2px;
+  cursor: pointer;
+}
+.cherita-app-sidebar .sidebar-plotselector .plotselector-icon .active {
+  opacity: 1;
+  border-bottom: 2px solid #007bff;
+}
 .cherita-app-sidebar .sidebar-pseudospatial {
   padding: 10px;
   border-bottom: 1px solid #dee2e6;
@@ -12011,36 +12024,77 @@ textarea.form-control-lg {
   border-left: 1px solid #dee2e6;
 }
 
+.cherita-app-canvas .cherita-plot {
+  height: 100%;
+  min-height: 400px;
+}
+
+.cherita-app-container {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+}
+.cherita-app-container .cherita-app-obs {
+  flex: 0 0 auto;
+  min-width: 350px;
+  max-width: 20%;
+  overflow-y: auto;
+}
+.cherita-app-container .cherita-app-canvas {
+  flex: 1 1 auto;
+  min-width: 400px;
+  position: relative;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cherita-app-container .cherita-app-canvas .cherita-navbar {
+  position: relative;
+}
+.cherita-app-container .cherita-app-sidebar {
+  flex: 0 0 auto;
+  min-width: 350px;
+  max-width: 20%;
+  position: relative;
+}
+@media (max-width: 1400px) {
+  .cherita-app-container .cherita-app-obs,
+  .cherita-app-container .cherita-app-sidebar {
+    max-width: 25%;
+  }
+}
+
 .ps-xs-1 {
   padding-left: 0.15rem !important;
 }
 
-.js-plotly-plot .plotly .modebar {
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 0 4px !important;
-}
 .js-plotly-plot .plotly .modebar .modebar-group {
-  margin: 0 !important;
-  padding: 0 !important;
-  background-color: transparent !important;
+  border-radius: 5px;
+  padding: 4px !important;
 }
 .js-plotly-plot .plotly .modebar .modebar-group .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;
 }
 .js-plotly-plot .plotly .modebar .modebar-group .modebar-btn svg {
   position: relative;
-  top: auto;
-  bottom: auto;
-  left: auto;
-  right: auto;
+  top: 1px;
+}
+.js-plotly-plot .plotly .modebar .modebar-group .modebar-btn svg path {
+  fill: white !important;
+  color: white !important;
+}
+
+.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
+  opacity: 0.5;
+  transition: opacity 0.3s;
 }
 
 .cherita-spatial-controls {
@@ -12118,7 +12172,6 @@ textarea.form-control-lg {
 
 /* End scrollbar styling */
 .cherita-container-plot {
-  margin-top: 76px;
   padding: 20px;
   position: relative;
   min-height: 400px;