@haniffalab/cherita-react 1.4.1-dev.2025-10-20.528e0f75 → 1.4.1-dev.2025-10-22.61540191

package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js

@@ -4,16 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
+var _material = require("@mui/material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CategoricalMode() {
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Item, {
     key: key,
     active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
@@ -26,9 +28,9 @@ function CategoricalMode() {
   const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
     value: settings.pseudospatial.categoricalMode
   });
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+  return /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
-  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
+  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
 }
 function MaskSet() {
   var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
@@ -37,7 +39,7 @@ function MaskSet() {
   const {
     pseudospatial: maskSets
   } = settings.data;
-  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Item, {
     key: key,
     active: settings.pseudospatial.maskSet === key,
     onClick: () => {
@@ -73,9 +75,9 @@ function MaskSet() {
       });
     }
   };
-  const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
+  const masksList = _lodash.default.map(maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati5 = settings.pseudospatial) === null || _settings$pseudospati5 === void 0 ? void 0 : _settings$pseudospati5.maskSet], mask => /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.ItemText, {
     key: mask
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+  }, /*#__PURE__*/React.createElement(_reactBootstrap.Form.Check, {
     type: "checkbox",
     label: mask,
     checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
@@ -83,26 +85,72 @@ function MaskSet() {
   })));
   const nMasks = settings.pseudospatial.maskValues ? (_settings$pseudospati6 = settings.pseudospatial.maskValues) === null || _settings$pseudospati6 === void 0 ? void 0 : _settings$pseudospati6.length : (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps2 = maskSets[(_settings$pseudospati7 = settings.pseudospatial) === null || _settings$pseudospati7 === void 0 ? void 0 : _settings$pseudospati7.maskSet]) === null || _maskSets$settings$ps2 === void 0 ? void 0 : _maskSets$settings$ps2.length) || "No";
   const toggleAllChecked = !settings.pseudospatial.maskValues || ((_settings$pseudospati8 = settings.pseudospatial.maskValues) === null || _settings$pseudospati8 === void 0 ? void 0 : _settings$pseudospati8.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps3 = maskSets[(_settings$pseudospati9 = settings.pseudospatial) === null || _settings$pseudospati9 === void 0 ? void 0 : _settings$pseudospati9.maskSet]) === null || _maskSets$settings$ps3 === void 0 ? void 0 : _maskSets$settings$ps3.length);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
-  }, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+  }, _lodash.default.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Toggle, {
     variant: "light"
-  }, nMasks, " masks selected"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.ItemText, {
+  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Menu, null, /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(_reactBootstrap.Dropdown.ItemText, {
     key: "toggle-all"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
+  }, /*#__PURE__*/React.createElement(_reactBootstrap.Form.Check, {
     type: "checkbox",
     label: "Toggle all",
     checked: toggleAllChecked,
     onChange: toggleMasks
   })), masksList)));
 }
+function OpacitySlider(_ref) {
+  let {
+    opacity,
+    setOpacity
+  } = _ref;
+  const [sliderValue, setSliderValue] = (0, _react.useState)(opacity);
+  return /*#__PURE__*/React.createElement(_material.Box, {
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(_material.Typography, {
+    id: "opacity-range",
+    gutterBottom: true
+  }, "Reference image opacity"), /*#__PURE__*/React.createElement("div", {
+    className: "px-4"
+  }, /*#__PURE__*/React.createElement(_material.Slider, {
+    "aria-labelledby": "opacity-range",
+    min: 0,
+    max: 1,
+    step: 0.05,
+    value: sliderValue,
+    onChange: (_e, value) => setSliderValue(value),
+    onChangeCommitted: (_e, value) => setOpacity(value),
+    valueLabelDisplay: "auto",
+    getAriaValueText: value => "".concat(value * 100, "%"),
+    valueLabelFormat: value => "".concat((value * 100).toFixed(0), "%"),
+    marks: [{
+      value: 0,
+      label: "0%"
+    }, {
+      value: 1,
+      label: "100%"
+    }]
+  })));
+}
 
 // @TODO: add colormap, colorbar slider
-function PseudospatialToolbar(_ref) {
+function PseudospatialToolbar(_ref2) {
   let {
     plotType
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  } = _ref2;
+  const {
+    imageUrl
+  } = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  return /*#__PURE__*/React.createElement("div", {
     className: "cherita-pseudospatial-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(MaskSet, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_react.default.createElement(CategoricalMode, null)));
+  }, /*#__PURE__*/React.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(_reactBootstrap.ButtonGroup, null, plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)), imageUrl && /*#__PURE__*/React.createElement(OpacitySlider, {
+    opacity: settings.pseudospatial.refImg.opacity,
+    setOpacity: opacity => {
+      dispatch({
+        type: "set.pseudospatial.refImg.opacity",
+        opacity: opacity
+      });
+    }
+  }));
 }

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Violin = Violin;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -17,9 +17,10 @@ var _SettingsContext = require("../../context/SettingsContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
 var _Resolver = require("../../utils/Resolver");
+var _StyledTooltip = require("../../utils/StyledTooltip");
+var _PlotAlert = require("../full-page/PlotAlert");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -33,7 +34,9 @@ function Violin(_ref) {
     showCtrlsBtn = false,
     setShowObs,
     setShowVars,
-    setShowControls
+    setShowControls,
+    plotType,
+    setPlotType
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -138,16 +141,16 @@ function Violin(_ref) {
   const modeBarButtons = customModeBarButtons.length ? [customModeBarButtons, _constants.PLOTLY_MODEBAR_BUTTONS] : [_constants.PLOTLY_MODEBAR_BUTTONS];
   if (!serverError) {
     if (hasSelections) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "cherita-plot cherita-violin"
-      }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("div", {
+      }, isPending && /*#__PURE__*/React.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/React.createElement("div", {
         className: "d-flex flex-column h-100"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex-grow-1 position-relative",
         style: {
           minHeight: "0"
         }
-      }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      }, /*#__PURE__*/React.createElement(_reactPlotly.default, {
         data: data,
         layout: layout,
         useResizeHandler: true,
@@ -159,40 +162,48 @@ function Violin(_ref) {
           displaylogo: false,
           modeBarButtons: modeBarButtons
         }
-      })), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/_react.default.createElement("div", {
-        className: "flex-shrink-0"
-      }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-        variant: "warning",
-        className: "mb-1"
-      }, /*#__PURE__*/_react.default.createElement("b", null, "Warning:"), " For performance reasons this plot was generated with resampled data. It will not be exactly the same as one produced with the entire dataset. \xA0", /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-        placement: "top",
-        overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, "Resampled to 100K values following a Monte Carlo style approach to help ensure resampled data is a good representation of the original dataset's distribution.")
-      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+      })), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement("div", {
+        className: "resampled-tooltip-container"
+      }, /*#__PURE__*/React.createElement(_StyledTooltip.StyledTooltip, {
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Note:"), " This plot uses resampled data to improve performance, so values may differ slightly from the full dataset. The data were resampled to exactly 100,000 values using a Monte Carlo\u2013style approach to provide a representative view of the full distribution while reducing processing time."),
+        placement: "bottom"
+      }, /*#__PURE__*/React.createElement(_reactBootstrap.Badge, {
+        bg: "info"
+      }, /*#__PURE__*/React.createElement(_reactFontawesome.FontAwesomeIcon, {
+        className: "fs-6",
         icon: _freeSolidSvgIcons.faCircleInfo
-      }))))));
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "d-none d-lg-inline ms-2 fs-6 text-uppercase"
+      }, "Resampled"))))));
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-violin"
-    }, mode === _constants.VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-      variant: "light"
-    }, "Select", " ", showVarsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    return /*#__PURE__*/React.createElement(_PlotAlert.PlotAlert, {
+      variant: "info",
+      heading: "Violin plot",
+      plotType: plotType,
+      setPlotType: setPlotType
+    }, mode === _constants.VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement("p", {
+      className: "p-0 m-0"
+    }, "To begin, select one or more", " ", showVarsBtn ? /*#__PURE__*/React.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", " ", showObsBtn ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    }, "features") : "features", " ", "to display their expression distributions across all observations."), mode === _constants.VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement("p", {
+      className: "p-0 m-0"
+    }, "To begin, select a", " ", showObsBtn ? /*#__PURE__*/React.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, {
+    }, "category") : "category", " ", "to group observations, and choose a", " ", showVarsBtn ? /*#__PURE__*/React.createElement(_reactBootstrap.Button, {
       variant: "link",
       className: "border-0 p-0 align-baseline",
       onClick: setShowVars
-    }, "feature") : "feature"));
+    }, "feature") : "feature", " ", "to view its distribution within each group."));
   } else {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
-      variant: "danger"
-    }, serverError.message));
+    return /*#__PURE__*/React.createElement(_PlotAlert.PlotAlert, {
+      variant: "danger",
+      heading: "Violin plot",
+      plotType: plotType,
+      setPlotType: setPlotType
+    }, serverError.message || "An unexpected error occurred while generating the plot.");
   }
 }

package/dist/cjs/context/DatasetContext.js

@@ -60,7 +60,7 @@ const persistOptions = {
       return false;
     }
   },
-  buster: "1.4.1-dev.2025-10-20.528e0f75" || "0.0.0"
+  buster: "1.4.1-dev.2025-10-22.61540191" || "0.0.0"
   // @TODO: add maxAge and api version numbers as buster
 };
 const initialDataset = {

package/dist/cjs/context/SettingsContext.js

@@ -73,7 +73,11 @@ const initialSettings = {
   pseudospatial: {
     maskSet: null,
     maskValues: null,
-    categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
+    categoricalMode: _constants.PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value,
+    refImg: {
+      visible: false,
+      opacity: 1
+    }
   },
   // dataset resolved values
   data: {
@@ -169,7 +173,7 @@ function SettingsProvider(_ref2) {
 
   // If the buster is not set or does not match the current package version,
   // reset localSettings to avoid stale data
-  if (!buster || buster !== "1.4.1-dev.2025-10-20.528e0f75") {
+  if (!buster || buster !== "1.4.1-dev.2025-10-22.61540191") {
     localSettings = {};
   }
   const initSettings = (0, _react.useRef)(initializer({
@@ -194,7 +198,7 @@ function SettingsProvider(_ref2) {
     if (canOverrideSettings && settings) {
       try {
         localStorage.setItem(DATASET_STORAGE_KEY, JSON.stringify(_objectSpread({
-          buster: "1.4.1-dev.2025-10-20.528e0f75" || "0.0.0",
+          buster: "1.4.1-dev.2025-10-22.61540191" || "0.0.0",
           timestamp: Date.now()
         }, _lodash.default.omit(settings, "data"))));
       } catch (err) {
@@ -719,6 +723,26 @@ function settingsReducer(settings, action) {
           })
         });
       }
+    case "toggle.pseudospatial.refImg.visible":
+      {
+        return _objectSpread(_objectSpread({}, settings), {}, {
+          pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
+            refImg: _objectSpread(_objectSpread({}, settings.pseudospatial.refImg), {}, {
+              visible: !settings.pseudospatial.refImg.visible
+            })
+          })
+        });
+      }
+    case "set.pseudospatial.refImg.opacity":
+      {
+        return _objectSpread(_objectSpread({}, settings), {}, {
+          pseudospatial: _objectSpread(_objectSpread({}, settings.pseudospatial), {}, {
+            refImg: _objectSpread(_objectSpread({}, settings.pseudospatial.refImg), {}, {
+              opacity: action.opacity
+            })
+          })
+        });
+      }
     default:
       {
         throw Error("Unknown action: " + action.type);

package/dist/cjs/utils/StyledTooltip.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTooltip = void 0;
+var _material = require("@mui/material");
+const _excluded = ["className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const StyledTooltip = exports.StyledTooltip = (0, _material.styled)(_ref => {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_material.Tooltip, _extends({}, props, {
+    classes: {
+      popper: className
+    }
+  }));
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return {
+    ["& .".concat(_material.tooltipClasses.tooltip)]: {
+      backgroundColor: "#000",
+      color: "#fff",
+      maxWidth: 220,
+      fontSize: 13,
+      borderRadius: 4,
+      padding: theme.spacing(0.5, 1),
+      whiteSpace: "pre-line",
+      textAlign: "center",
+      boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)"
+    }
+  };
+});

package/dist/css/cherita.css

@@ -7988,11 +7988,11 @@ textarea.form-control-lg {
   margin-left: auto !important;
 }
 
-.p-0, .cherita-app-sidebar .card-body, .cherita-app-container {
+.p-0, .cherita-app-sidebar .card-body, .cherita-app-container, .cherita-app-container .cherita-app-canvas {
   padding: 0 !important;
 }
 
-.p-1, .cherita-app-container .cherita-app-canvas {
+.p-1 {
   padding: 0.25rem !important;
 }
 
@@ -12004,19 +12004,6 @@ textarea.form-control-lg {
   transform: var(--geeks-accordion-btn-icon-transform);
 }
 
-.sidebar-plotselector {
-  padding: 6px;
-  border-bottom: 1px solid #dee2e6;
-}
-.sidebar-plotselector .plotselector-icon {
-  padding-bottom: 2px;
-  cursor: pointer;
-}
-.sidebar-plotselector .plotselector-icon .active {
-  opacity: 1;
-  border-bottom: 2px solid #007bff;
-}
-
 .sidebar-pseudospatial {
   padding: 10px;
   border-bottom: 1px solid #dee2e6;
@@ -12070,7 +12057,7 @@ textarea.form-control-lg {
 }
 .cherita-app-container .cherita-app-canvas {
   flex: 1 1 auto;
-  min-width: 400px;
+  min-width: 375px;
   position: relative;
   max-height: 100%;
   display: flex;
@@ -12092,10 +12079,10 @@ textarea.form-control-lg {
   }
 }
 
-.ps-xs-1 {
-  padding-left: 0.15rem !important;
+.js-plotly-plot .plotly .modebar {
+  top: 16px;
+  right: 0;
 }
-
 .js-plotly-plot .plotly .modebar .modebar-group {
   border-radius: 5px;
   padding: 4px !important;
@@ -12103,6 +12090,7 @@ textarea.form-control-lg {
 .js-plotly-plot .plotly .modebar .modebar-group .modebar-btn {
   display: inline-flex;
   justify-content: center;
+  align-items: center;
   position: relative;
   font-size: 1.25rem;
   padding: 0.25rem;
@@ -12118,17 +12106,16 @@ textarea.form-control-lg {
   fill: white !important;
   color: white !important;
 }
-
 .js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
-  opacity: 0.5;
+  opacity: 1;
   transition: opacity 0.3s;
 }
 
 .cherita-spatial-controls {
   position: absolute;
-  z-index: 10;
   top: 1rem;
   left: 1rem;
+  z-index: 10;
   width: 3rem;
 }
 .cherita-spatial-controls .btn {
@@ -12136,6 +12123,15 @@ textarea.form-control-lg {
   padding-right: 0;
 }
 
+.plotselector {
+  padding: 0 10px;
+  border-bottom: 1px solid #dee2e6;
+}
+.plotselector .plotselector-icon {
+  padding: 6px;
+  cursor: pointer;
+}
+
 .modern-scrollbars::-webkit-scrollbar {
   width: 20px;
 }
@@ -12546,4 +12542,23 @@ input[type=checkbox] {
   cursor: pointer;
 }
 
+.ps-xs-1 {
+  padding-left: 0.15rem !important;
+}
+
+.resampled-tooltip-container {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 10;
+  width: max-content;
+}
+@media (min-width: 991px) {
+  .resampled-tooltip-container {
+    top: 16px;
+    left: 16px;
+    bottom: auto;
+  }
+}
+
 /*# sourceMappingURL=cherita.css.map */