@haniffalab/cherita-react 0.2.0-dev.2024-12-16.f6e39628 → 0.2.0-dev.2024-12-16.f02cfae4

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

@@ -4,12 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullPage = FullPage;
+exports.FullPagePseudospatial = FullPagePseudospatial;
+exports.FullPageScatterplot = FullPageScatterplot;
 var _react = _interopRequireWildcard(require("react"));
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _ObsList = require("../obs-list/ObsList");
 var _offcanvas = require("../offcanvas");
+var _Pseudospatial = require("../pseudospatial/Pseudospatial");
 var _Scatterplot = require("../scatterplot/Scatterplot");
 var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
 var _SearchBar = require("../search-bar/SearchBar");
@@ -17,7 +20,11 @@ var _VarList = require("../var-list/VarList");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function FullPage(props) {
+function FullPage(_ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
   const targetRef = (0, _react.useRef)();
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
@@ -94,17 +101,15 @@ function FullPage(props) {
                 })]
               })
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "cherita-container-scatterplot",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
-          })]
+          }), children]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "cherita-app-var",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card, {
             className: "cherita-app-features",
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Body, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
-                searchDiseases: true
+                searchDiseases: true,
+                searchVar: true
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
                 mode: _constants.SELECTION_MODES.SINGLE
               })]
@@ -130,4 +135,43 @@ function FullPage(props) {
       })
     })
   });
+}
+function FullPageScatterplot(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
+  });
+}
+function FullPagePseudospatial(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "container-fluid h-100",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "row",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "col-12 col-lg-7",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "col-12 col-lg-5",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "container-fluid h-100 d-flex align-itemms-center justify-content-center",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "row w-100 py-3",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "col-12",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "p-2",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.Pseudospatial, {})
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "col-12",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.PseudospatialImage, {})
+              })]
+            })
+          })
+        })]
+      })
+    })
+  });
 }

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

@@ -128,9 +128,15 @@ function CategoricalItem(_ref) {
               y: "0",
               width: "10",
               height: "10",
-              fill: `rgb(${getColor((code - min) / (max - min), true, isOmitted, {
-                alpha: 1
-              }, "obs")})`
+              fill: `rgb(${getColor({
+                value: (code - min) / (max - min),
+                categorical: true,
+                grayOut: isOmitted,
+                grayParams: {
+                  alpha: 1
+                },
+                colorEncoding: "obs"
+              })})`
             })
           })
         })]
@@ -211,7 +217,7 @@ function ObsContinuousStats(_ref3) {
   const dataset = (0, _DatasetContext.useDataset)();
   const params = {
     url: dataset.url,
-    obs_colname: obs.name
+    obsColname: obs.name
   };
   const {
     fetchedData,
@@ -309,7 +315,7 @@ function ContinuousObs(_ref4) {
   const binnedObs = binContinuous(obs);
   const params = {
     url: dataset.url,
-    obs_col: binnedObs.name,
+    obsCol: binnedObs.name,
     thresholds: binnedObs.bins.thresholds,
     nBins: binnedObs.bins.nBins
   };

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

@@ -45,7 +45,13 @@ function ObsColsList(_ref) {
   });
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
-      setObsCols(_lodash.default.keyBy(_lodash.default.map(fetchedData, d => {
+      let filteredData = fetchedData;
+      if (dataset.obsCols) {
+        filteredData = _lodash.default.filter(filteredData, d => {
+          return _lodash.default.includes(dataset.obsCols, d.name);
+        });
+      }
+      setObsCols(_lodash.default.keyBy(_lodash.default.map(filteredData, d => {
         return {
           ...d,
           codesMap: _lodash.default.invert(d.codes),
@@ -53,7 +59,7 @@ function ObsColsList(_ref) {
         };
       }), "name"));
     }
-  }, [fetchedData, isPending, serverError]);
+  }, [dataset.obsCols, fetchedData, isPending, serverError]);
 
   // @TODO: fix re-rendering performance issue
   (0, _react.useEffect)(() => {

package/dist/components/pseudospatial/Pseudospatial.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pseudospatial = Pseudospatial;
+exports.PseudospatialImage = PseudospatialImage;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
+var _PseudospatialToolbar = require("./PseudospatialToolbar");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _colorHelper = require("../../helpers/color-helper");
+var _ImageViewer = require("../../utils/ImageViewer");
+var _Legend = require("../../utils/Legend");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _requests = require("../../utils/requests");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function usePseudospatialData(plotType) {
+  const ENDPOINT = "pseudospatial";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const baseParams = (0, _react.useMemo)(() => {
+    return {
+      url: dataset.url,
+      maskSet: dataset.pseudospatial.maskSet,
+      maskValues: dataset.pseudospatial.maskValues,
+      varNamesCol: dataset.varNamesCol,
+      showColorbar: false,
+      format: "json"
+    };
+  }, [dataset.url, dataset.pseudospatial.maskSet, dataset.pseudospatial.maskValues, dataset.varNamesCol]);
+  const getPlotParams = (0, _react.useCallback)(() => {
+    if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE) {
+      return {
+        varKey: dataset.selectedVar?.isSet ? {
+          name: dataset.selectedVar?.name,
+          indices: dataset.selectedVar?.vars.map(v => v.index)
+        } : dataset.selectedVar?.index,
+        ...(dataset.sliceBy.obs ? {
+          obsCol: dataset.selectedObs,
+          obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+        } : {})
+      };
+    } else if (plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL) {
+      return {
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        mode: dataset.pseudospatial.categoricalMode
+      };
+    } else if (plotType === "continuous") {
+      return {
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _lodash.default.difference(_lodash.default.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c])
+      };
+    }
+  }, [dataset.pseudospatial.categoricalMode, dataset.selectedObs, dataset.selectedVar?.index, dataset.selectedVar?.isSet, dataset.selectedVar?.name, dataset.selectedVar?.vars, dataset.sliceBy.obs, plotType]);
+  const params = (0, _react.useMemo)(() => {
+    return {
+      ...baseParams,
+      ...getPlotParams()
+    };
+  }, [baseParams, getPlotParams]);
+  return (0, _requests.useDebouncedFetch)(ENDPOINT + "/" + plotType, params, 500, {
+    enabled: !!plotType && !!dataset.pseudospatial.maskSet
+  });
+}
+function Pseudospatial(_ref) {
+  let {
+    showLegend = true,
+    sharedScaleRange = false
+  } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const [data, setData] = (0, _react.useState)([]);
+  const [layout, setLayout] = (0, _react.useState)({});
+  const {
+    getColor
+  } = (0, _colorHelper.useColor)();
+  const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
+  const plotType = dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR ? _constants.PSEUDOSPATIAL_PLOT_TYPES.GENE : dataset.selectedObs?.type === _constants.OBS_TYPES.CATEGORICAL || dataset.selectedObs?.type === _constants.OBS_TYPES.BOOLEAN ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL : dataset.selectedObs?.type === _constants.OBS_TYPES.CONTINUOUS ? _constants.PSEUDOSPATIAL_PLOT_TYPES.CONTINUOUS : _constants.PSEUDOSPATIAL_PLOT_TYPES.MASKS;
+  const updateColorscale = (0, _react.useCallback)(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+    setData(d => {
+      const min = layout?.coloraxis?.cmin;
+      const max = layout?.coloraxis?.cmax;
+      return _lodash.default.map(d, trace => {
+        const v = trace.meta.value;
+        if (v === null) {
+          return trace;
+        }
+        const color = (0, _colorHelper.rgbToHex)(getColor({
+          value: (v - min) / (max - min)
+        }));
+        return {
+          ...trace,
+          fillcolor: color,
+          line: {
+            ...trace.line,
+            color: color
+          }
+        };
+      });
+    });
+  }, [getColor, layout?.coloraxis?.cmax, layout?.coloraxis?.cmin]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = usePseudospatialData(plotType);
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, isPending, serverError, sharedScaleRange, updateColorscale]);
+  (0, _react.useEffect)(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  (0, _react.useEffect)(() => {
+    if (sharedScaleRange) {
+      const {
+        min,
+        max
+      } = {
+        min: dataset.controls.range[0] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0],
+        max: dataset.controls.range[1] * (dataset.controls.valueRange[1] - dataset.controls.valueRange[0]) + dataset.controls.valueRange[0]
+      };
+      setData(d => {
+        return _lodash.default.map(d, trace => {
+          const v = trace.meta.value;
+          if (v === null) {
+            return trace;
+          }
+          const color = (0, _colorHelper.rgbToHex)(getColor({
+            value: (v - min) / (max - min)
+          }));
+          return {
+            ...trace,
+            fillcolor: color,
+            line: {
+              ...trace.line,
+              color: color
+            }
+          };
+        });
+      });
+      setLayout(l => {
+        return {
+          ...l,
+          coloraxis: {
+            ...l.coloraxis,
+            cmin: min,
+            cmax: max
+          }
+        };
+      });
+    }
+  }, [dataset.controls.range, dataset.controls.valueMax, dataset.controls.valueMin, dataset.controls.valueRange, getColor, sharedScaleRange]);
+  const hasSelections = !!plotType && !!dataset.pseudospatial.maskSet;
+  if (!serverError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "cherita-pseudospatial position-relative",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PseudospatialToolbar.PseudospatialToolbar, {
+        plotType: plotType
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [hasSelections && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), hasSelections && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+          data: data,
+          layout: layout,
+          useResizeHandler: true,
+          className: "cherita-pseudospatial-plot",
+          config: {
+            displaylogo: false
+          }
+        }), hasSelections && showLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.Legend, {
+          min: layout?.coloraxis?.cmin,
+          max: layout?.coloraxis?.cmax
+        })]
+      })]
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
+        variant: "danger",
+        children: serverError.message
+      })
+    });
+  }
+}
+
+// @TODO: explore making it a minimap
+function PseudospatialImage() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  if (dataset.imageUrl) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
+      src: dataset.imageUrl,
+      alt: "Pseudospatial reference image"
+    });
+  } else {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  }
+}

package/dist/components/pseudospatial/PseudospatialControls.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PseudospatialControls = PseudospatialControls;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PseudospatialControls() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+}

package/dist/components/pseudospatial/PseudospatialToolbar.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PseudospatialToolbar = PseudospatialToolbar;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _requests = require("../../utils/requests");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function CategoricalMode() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.pseudospatial.categoricalMode === m,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.categoricalMode",
+        categoricalMode: m.value
+      });
+    },
+    children: _lodash.default.capitalize(m.name)
+  }, key));
+  const mode = _lodash.default.find(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, {
+    value: dataset.pseudospatial.categoricalMode
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+      variant: "light",
+      children: _lodash.default.capitalize(mode.name)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+      children: modeList
+    })]
+  });
+}
+function MaskSet() {
+  const ENDPOINT = "masks";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [maskSets, setMaskSets] = (0, _react.useState)(null);
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url
+      };
+    });
+  }, [dataset.url]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params);
+  (0, _react.useEffect)(() => {
+    if (!isPending && !serverError) {
+      setMaskSets(fetchedData);
+    }
+  }, [fetchedData, isPending, serverError]);
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.pseudospatial.maskSet === key,
+    onClick: () => {
+      dispatch({
+        type: "set.pseudospatial.maskSet",
+        maskSet: key
+      });
+    },
+    children: _lodash.default.capitalize(key)
+  }, key));
+  const handleMaskChange = mask => {
+    let newMasks = dataset.pseudospatial.maskValues || maskSets?.[dataset.pseudospatial?.maskSet];
+    newMasks = newMasks.includes(mask) ? newMasks.filter(m => m !== mask) : [...newMasks, mask];
+    if (!_lodash.default.difference(maskSets?.[dataset.pseudospatial?.maskSet], newMasks).length) {
+      newMasks = null;
+    }
+    dispatch({
+      type: "set.pseudospatial.maskValues",
+      maskValues: newMasks
+    });
+  };
+  const toggleMasks = () => {
+    if (!dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length) {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: []
+      });
+    } else {
+      dispatch({
+        type: "set.pseudospatial.maskValues",
+        maskValues: null
+      });
+    }
+  };
+  const masksList = _lodash.default.map(maskSets?.[dataset.pseudospatial?.maskSet], mask => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+      type: "checkbox",
+      label: mask,
+      checked: !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues.includes(mask),
+      onChange: () => handleMaskChange(mask)
+    })
+  }, mask));
+  const nMasks = dataset.pseudospatial.maskValues ? dataset.pseudospatial.maskValues?.length : maskSets?.[dataset.pseudospatial?.maskSet]?.length || "No";
+  const toggleAllChecked = !dataset.pseudospatial.maskValues || dataset.pseudospatial.maskValues?.length === maskSets?.[dataset.pseudospatial?.maskSet]?.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+        variant: "light",
+        children: _lodash.default.capitalize(dataset.pseudospatial.maskSet || "Select a mask set")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+          children: "Mask set"
+        }), maskSetList]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Toggle, {
+        variant: "light",
+        children: [nMasks, " masks selected"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown.Menu, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Header, {
+          children: "Masks"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+            type: "checkbox",
+            label: "Toggle all",
+            checked: toggleAllChecked,
+            onChange: toggleMasks
+          })
+        }, "toggle-all"), masksList]
+      })]
+    })]
+  });
+}
+
+// @TODO: add colormap, colorbar slider
+function PseudospatialToolbar(_ref) {
+  let {
+    plotType
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-pseudospatial-toolbar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MaskSet, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: plotType === _constants.PSEUDOSPATIAL_PLOT_TYPES.CATEGORICAL && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoricalMode, {})
+    })]
+  });
+}