@haniffalab/cherita-react 1.3.0-dev.2025-06-06.f1eddad0 → 1.3.1

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

@@ -4,79 +4,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudospatialToolbar = PseudospatialToolbar;
-var _react = _interopRequireWildcard(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");
-var _requests = require("../../utils/requests");
+var _jsxRuntime = require("react/jsx-runtime");
 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; }
-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); }
 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, {
-    key: key,
+  const modeList = _lodash.default.map(_constants.PSEUDOSPATIAL_CATEGORICAL_MODES, (m, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
     active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
-        type: "set.pseudospatial.categoricalMode",
+        type: 'set.pseudospatial.categoricalMode',
         categoricalMode: m.value
       });
-    }
-  }, _lodash.default.capitalize(m.name)));
+    },
+    children: _lodash.default.capitalize(m.name)
+  }, key));
   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, {
-    variant: "light"
-  }, _lodash.default.capitalize(mode.name)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, modeList));
+  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() {
   var _settings$pseudospati5, _settings$pseudospati6, _maskSets$settings$ps2, _settings$pseudospati7, _settings$pseudospati8, _maskSets$settings$ps3, _settings$pseudospati9;
-  const ENDPOINT = "masks";
-  const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
-  const [maskSets, setMaskSets] = (0, _react.useState)(null);
-  const [params, setParams] = (0, _react.useState)({
-    url: dataset.url
-  });
-  (0, _react.useEffect)(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url
-      });
-    });
-  }, [dataset.url]);
   const {
-    fetchedData,
-    isPending,
-    serverError
-  } = (0, _requests.useFetch)(ENDPOINT, params, {
-    refetchOnMount: false
-  });
-  (0, _react.useEffect)(() => {
-    if (!isPending && !serverError) {
-      setMaskSets(fetchedData);
-    }
-  }, [fetchedData, isPending, serverError]);
-  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
-    key: key,
+    pseudospatial: maskSets
+  } = settings.data;
+  const maskSetList = _lodash.default.map(maskSets, (ms, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
     active: settings.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
-        type: "set.pseudospatial.maskSet",
+        type: 'set.pseudospatial.maskSet',
         maskSet: key
       });
-    }
-  }, _lodash.default.capitalize(key)));
+    },
+    children: _lodash.default.capitalize(key)
+  }, key));
   const handleMaskChange = mask => {
     var _settings$pseudospati, _settings$pseudospati2;
     let newMasks = settings.pseudospatial.maskValues || (maskSets === null || maskSets === void 0 ? void 0 : maskSets[(_settings$pseudospati = settings.pseudospatial) === null || _settings$pseudospati === void 0 ? void 0 : _settings$pseudospati.maskSet]);
@@ -85,7 +63,7 @@ function MaskSet() {
       newMasks = null;
     }
     dispatch({
-      type: "set.pseudospatial.maskValues",
+      type: 'set.pseudospatial.maskValues',
       maskValues: newMasks
     });
   };
@@ -93,46 +71,116 @@ function MaskSet() {
     var _settings$pseudospati3, _maskSets$settings$ps, _settings$pseudospati4;
     if (!settings.pseudospatial.maskValues || ((_settings$pseudospati3 = settings.pseudospatial.maskValues) === null || _settings$pseudospati3 === void 0 ? void 0 : _settings$pseudospati3.length) === (maskSets === null || maskSets === void 0 || (_maskSets$settings$ps = maskSets[(_settings$pseudospati4 = settings.pseudospatial) === null || _settings$pseudospati4 === void 0 ? void 0 : _settings$pseudospati4.maskSet]) === null || _maskSets$settings$ps === void 0 ? void 0 : _maskSets$settings$ps.length)) {
       dispatch({
-        type: "set.pseudospatial.maskValues",
+        type: 'set.pseudospatial.maskValues',
         maskValues: []
       });
     } else {
       dispatch({
-        type: "set.pseudospatial.maskValues",
+        type: 'set.pseudospatial.maskValues',
         maskValues: null
       });
     }
   };
-  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, {
-    key: mask
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    type: "checkbox",
-    label: mask,
-    checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
-    onChange: () => handleMaskChange(mask)
-  })));
-  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 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__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.ItemText, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+      type: "checkbox",
+      label: mask,
+      checked: !settings.pseudospatial.maskValues || settings.pseudospatial.maskValues.includes(mask),
+      onChange: () => handleMaskChange(mask)
+    })
+  }, mask));
+  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, {
-    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, {
-    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, {
-    key: "toggle-all"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
-    type: "checkbox",
-    label: "Toggle all",
-    checked: toggleAllChecked,
-    onChange: toggleMasks
-  })), masksList)));
+  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(settings.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]
+      })]
+    })]
+  });
+}
+function OpacitySlider(_ref) {
+  let {
+    opacity,
+    setOpacity
+  } = _ref;
+  const [sliderValue, setSliderValue] = (0, _react.useState)(opacity);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      id: "opacity-range",
+      gutterBottom: true,
+      children: "Reference image opacity"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "px-4",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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", {
-    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)));
+  } = _ref2;
+  const {
+    imageUrl
+  } = (0, _DatasetContext.useDataset)();
+  const settings = (0, _SettingsContext.useSettings)();
+  const dispatch = (0, _SettingsContext.useSettingsDispatch)();
+  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, {})
+    }), imageUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(OpacitySlider, {
+      opacity: settings.pseudospatial.refImg.opacity,
+      setOpacity: opacity => {
+        dispatch({
+          type: 'set.pseudospatial.refImg.opacity',
+          opacity: opacity
+        });
+      }
+    })]
+  });
 }