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

package/dist/esm/components/pseudospatial/Pseudospatial.js

@@ -3,9 +3,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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, useMemo, useRef, useState } from "react";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSliders } from "@fortawesome/free-solid-svg-icons";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { faEye, faSliders } from "@fortawesome/free-solid-svg-icons";
 import _ from "lodash";
 import { Alert } from "react-bootstrap";
 import Plot from "react-plotly.js";
@@ -19,7 +18,6 @@ import { Legend } from "../../utils/Legend";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
 import { useSelectedObs, useSelectedVar } from "../../utils/Resolver";
-library.add(faSliders);
 function usePseudospatialData(plotType) {
   const ENDPOINT = "pseudospatial";
   const dataset = useDataset();
@@ -73,7 +71,7 @@ function usePseudospatialData(plotType) {
   });
 }
 export function Pseudospatial(_ref) {
-  var _layout$coloraxis3, _layout$coloraxis4;
+  var _layout$coloraxis3, _layout$coloraxis4, _settings$pseudospati2;
   let {
     showLegend = true,
     sharedScaleRange = false,
@@ -82,6 +80,9 @@ export function Pseudospatial(_ref) {
     plotType,
     setPlotType
   } = _ref;
+  const {
+    imageUrl
+  } = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
   const [data, setData] = useState([]);
@@ -188,7 +189,48 @@ export function Pseudospatial(_ref) {
     }
   }, [settings.controls.range, settings.controls.valueMax, settings.controls.valueMin, getColor, sharedScaleRange, valueMax, valueMin]);
   const hasSelections = !!plotType && !!settings.pseudospatial.maskSet;
-  const faSlidersPath = faSliders.icon[4];
+  const images = useMemo(() => {
+    if (imageUrl) {
+      return [_objectSpread({
+        source: imageUrl,
+        xref: "paper",
+        yref: "paper",
+        x: 0.5,
+        y: 0.5,
+        sizex: 1,
+        sizey: 1,
+        sizing: "contain",
+        layer: "above",
+        xanchor: "center",
+        yanchor: "middle",
+        name: "Reference Image"
+      }, settings.pseudospatial.refImg)];
+    }
+    return [];
+  }, [imageUrl, settings.pseudospatial.refImg]);
+  const modeBarButtons = useMemo(() => {
+    var _settings$pseudospati;
+    const isRefImgVisible = (_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 || (_settings$pseudospati = _settings$pseudospati.refImg) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.visible;
+    return [{
+      name: "Open plot controls",
+      icon: {
+        width: 512,
+        height: 512,
+        path: faSliders.icon[4]
+      },
+      click: () => setShowControls(prev => !prev)
+    }, ...(imageUrl ? [{
+      name: isRefImgVisible ? "Hide reference image" : "Show reference image",
+      icon: {
+        width: 600,
+        height: 512,
+        path: faEye.icon[4]
+      },
+      click: () => dispatch({
+        type: "toggle.pseudospatial.refImg.visible"
+      })
+    }] : [])];
+  }, [dispatch, imageUrl, setShowControls, (_settings$pseudospati2 = settings.pseudospatial) === null || _settings$pseudospati2 === void 0 || (_settings$pseudospati2 = _settings$pseudospati2.refImg) === null || _settings$pseudospati2 === void 0 ? void 0 : _settings$pseudospati2.visible]);
   if (!_.keys(settings.data.pseudospatial).length) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
       variant: "warning"
@@ -201,24 +243,22 @@ export function Pseudospatial(_ref) {
       data: data,
       layout: _objectSpread(_objectSpread({}, layout), {}, {
         autosize: true,
-        height: height
+        height: height,
+        margin: {
+          l: 0,
+          r: 0,
+          t: 0,
+          b: 0,
+          pad: 0
+        },
+        images: images
       }),
       useResizeHandler: true,
       className: "cherita-pseudospatial-plot",
       config: {
         displaylogo: false,
         displayModeBar: true,
-        modeBarButtonsToAdd: [{
-          name: "Open plot controls",
-          icon: {
-            width: 512,
-            height: 512,
-            path: faSlidersPath,
-            ascent: 512,
-            descent: 0
-          },
-          click: () => setShowControls(prev => !prev)
-        }]
+        modeBarButtonsToAdd: modeBarButtons
       }
     }), hasSelections && showLegend && /*#__PURE__*/React.createElement(Legend, {
       min: layout === null || layout === void 0 || (_layout$coloraxis5 = layout.coloraxis) === null || _layout$coloraxis5 === void 0 ? void 0 : _layout$coloraxis5.cmin,

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

@@ -1,7 +1,9 @@
-import React from "react";
+import { useState } from "react";
+import { Box, Slider, Typography } from "@mui/material";
 import _ from "lodash";
 import { ButtonGroup, Dropdown, Form } from "react-bootstrap";
 import { PSEUDOSPATIAL_CATEGORICAL_MODES as MODES, PSEUDOSPATIAL_PLOT_TYPES as PLOT_TYPES } from "../../constants/constants";
+import { useDataset } from "../../context/DatasetContext";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
 function CategoricalMode() {
   const settings = useSettings();
@@ -89,13 +91,59 @@ function MaskSet() {
     onChange: toggleMasks
   })), masksList)));
 }
+function OpacitySlider(_ref) {
+  let {
+    opacity,
+    setOpacity
+  } = _ref;
+  const [sliderValue, setSliderValue] = useState(opacity);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    id: "opacity-range",
+    gutterBottom: true
+  }, "Reference image opacity"), /*#__PURE__*/React.createElement("div", {
+    className: "px-4"
+  }, /*#__PURE__*/React.createElement(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
-export function PseudospatialToolbar(_ref) {
+export function PseudospatialToolbar(_ref2) {
   let {
     plotType
-  } = _ref;
+  } = _ref2;
+  const {
+    imageUrl
+  } = useDataset();
+  const settings = useSettings();
+  const dispatch = useSettingsDispatch();
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-pseudospatial-toolbar"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(ButtonGroup, null, plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/React.createElement(CategoricalMode, null)));
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(MaskSet, null)), /*#__PURE__*/React.createElement(ButtonGroup, null, plotType === 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/esm/components/violin/Violin.js

@@ -3,11 +3,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import _ from "lodash";
-import { Alert, Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Badge, Button } from "react-bootstrap";
 import Plot from "react-plotly.js";
 import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
 import { useDataset } from "../../context/DatasetContext";
@@ -16,6 +16,8 @@ import { useSettings } from "../../context/SettingsContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useDebouncedFetch } from "../../utils/requests";
 import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from "../../utils/Resolver";
+import { StyledTooltip } from "../../utils/StyledTooltip";
+import { PlotAlert } from "../full-page/PlotAlert";
 import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
 export function Violin(_ref) {
   let {
@@ -25,7 +27,9 @@ export function Violin(_ref) {
     showCtrlsBtn = false,
     setShowObs,
     setShowVars,
-    setShowControls
+    setShowControls,
+    plotType,
+    setPlotType
   } = _ref;
   const ENDPOINT = "violin";
   const dataset = useDataset();
@@ -152,39 +156,47 @@ export function Violin(_ref) {
           modeBarButtons: modeBarButtons
         }
       })), (fetchedData === null || fetchedData === void 0 ? void 0 : fetchedData.resampled) && /*#__PURE__*/React.createElement("div", {
-        className: "flex-shrink-0"
-      }, /*#__PURE__*/React.createElement(Alert, {
-        variant: "warning",
-        className: "mb-1"
-      }, /*#__PURE__*/React.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.createElement(OverlayTrigger, {
-        placement: "top",
-        overlay: /*#__PURE__*/React.createElement(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.")
+        className: "resampled-tooltip-container"
+      }, /*#__PURE__*/React.createElement(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(Badge, {
+        bg: "info"
       }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        className: "fs-6",
         icon: faCircleInfo
-      }))))));
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "d-none d-lg-inline ms-2 fs-6 text-uppercase"
+      }, "Resampled"))))));
     }
-    return /*#__PURE__*/React.createElement("div", {
-      className: "cherita-violin"
-    }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement(Alert, {
-      variant: "light"
-    }, "Select", " ", showVarsBtn ? /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(PlotAlert, {
+      variant: "info",
+      heading: "Violin plot",
+      plotType: plotType,
+      setPlotType: setPlotType
+    }, mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/React.createElement("p", {
+      className: "p-0 m-0"
+    }, "To begin, select one or more", " ", 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", " ", showObsBtn ? /*#__PURE__*/React.createElement(Button, {
+    }, "features") : "features", " ", "to display their expression distributions across all observations."), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/React.createElement("p", {
+      className: "p-0 m-0"
+    }, "To begin, select a", " ", 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, {
+    }, "category") : "category", " ", "to group observations, and choose a", " ", showVarsBtn ? /*#__PURE__*/React.createElement(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.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
-      variant: "danger"
-    }, serverError.message));
+    return /*#__PURE__*/React.createElement(PlotAlert, {
+      variant: "danger",
+      heading: "Violin plot",
+      plotType: plotType,
+      setPlotType: setPlotType
+    }, serverError.message || "An unexpected error occurred while generating the plot.");
   }
 }

package/dist/esm/context/DatasetContext.js

@@ -50,7 +50,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/esm/context/SettingsContext.js

@@ -62,7 +62,11 @@ const initialSettings = {
   pseudospatial: {
     maskSet: null,
     maskValues: null,
-    categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value
+    categoricalMode: PSEUDOSPATIAL_CATEGORICAL_MODES.ACROSS.value,
+    refImg: {
+      visible: false,
+      opacity: 1
+    }
   },
   // dataset resolved values
   data: {
@@ -158,7 +162,7 @@ export 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 = useRef(initializer({
@@ -183,7 +187,7 @@ export 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()
         }, _.omit(settings, "data"))));
       } catch (err) {
@@ -708,6 +712,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/esm/utils/StyledTooltip.js

@@ -0,0 +1,33 @@
+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; }
+import { styled, Tooltip, tooltipClasses } from "@mui/material";
+export const StyledTooltip = styled(_ref => {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Tooltip, _extends({}, props, {
+    classes: {
+      popper: className
+    }
+  }));
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return {
+    ["& .".concat(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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.4.1-dev.2025-10-20.528e0f75",
+  "version": "1.4.1-dev.2025-10-22.61540191",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -128,5 +128,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "528e0f754fac6fae140c651384c2979c1b1fcbaf"
+  "prereleaseSha": "615401914075590f2159adb28a6db12e0d02b720"
 }

package/scss/cherita.scss

@@ -428,4 +428,22 @@ $gauge-padding: 0.15rem;
 
 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) {
+    top: 16px;
+    left: 16px;
+    bottom: auto;
+  }
+}

package/scss/components/layouts.scss

@@ -97,21 +97,6 @@
   }
 }
 
-.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;
@@ -182,9 +167,9 @@
   }
 
   .cherita-app-canvas {
-    @extend .p-1;
+    @extend .p-0;
     flex: 1 1 auto;
-    min-width: 400px;
+    min-width: 375px;
     position: relative;
     max-height: 100%;
     display: flex;
@@ -211,7 +196,3 @@
     }
   }
 }
-
-.ps-xs-1 {
-  padding-left: 0.15rem !important;
-}

package/scss/components/plotly.scss

@@ -1,35 +1,46 @@
-.js-plotly-plot .plotly .modebar {
+// Plotly modebar customisation
+.js-plotly-plot {
+  .plotly {
+    .modebar {
+      top: 16px;
+      right: 0;
 
-  .modebar-group {
-    @extend .bg-primary;
-    @extend .mx-1;
-    border-radius: 5px;
-    padding: 4px !important;
+      // Each button group in the modebar
+      .modebar-group {
+        @extend .bg-primary;
+        @extend .mx-1;
+        border-radius: 5px;
+        padding: 4px !important;
 
-    .modebar-btn {
-      display: inline-flex;
-      justify-content: center;
-      position: relative;
-      font-size: 1.25rem;
-      padding: 0.25rem;
-      height: auto;
-      cursor: pointer;
-      line-height: normal;
+        // Individual buttons
+        .modebar-btn {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          font-size: 1.25rem;
+          padding: 0.25rem;
+          height: auto;
+          cursor: pointer;
+          line-height: normal;
 
-      svg {
-        position: relative;
-        top: 1px;
+          svg {
+            position: relative;
+            top: 1px;
 
-        path {
-          fill: white !important;
-          color: white !important;
+            path {
+              fill: white !important;
+              color: white !important;
+            }
+          }
         }
       }
+
+      // Hover effect for modebar buttons except watermark
+      &--hover > :not(.watermark) {
+        opacity: 1;
+        transition: opacity 0.3s;
+      }
     }
   }
 }
-
-.js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
-  opacity: 0.5;
-  transition: opacity 0.3s;
-}

package/scss/components/plots.scss

@@ -1,11 +1,24 @@
 .cherita-spatial-controls {
   position: absolute;
-  z-index: 10;
   top: 1rem;
   left: 1rem;
+  z-index: 10;
   width: 3rem;
+
+  // Target buttons inside the controls
   .btn {
     padding-left: 0;
     padding-right: 0;
   }
 }
+
+.plotselector {
+  padding: 0 10px;
+  border-bottom: 1px solid #dee2e6;
+
+  // Individual plot selector icons
+  .plotselector-icon {
+    padding: 6px;
+    cursor: pointer;
+  }
+}