@haniffalab/cherita-react 1.4.1 → 1.4.2-dev.2025-10-29.e8bbb191

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

@@ -1,74 +1,53 @@
-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); }
-import React, { useEffect, useState } from "react";
-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";
-import { useFetch } from "../../utils/requests";
+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';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function CategoricalMode() {
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
+  const modeList = _.map(MODES, (m, key) => /*#__PURE__*/_jsx(Dropdown.Item, {
     active: settings.pseudospatial.categoricalMode === m,
     onClick: () => {
       dispatch({
-        type: "set.pseudospatial.categoricalMode",
+        type: 'set.pseudospatial.categoricalMode',
         categoricalMode: m.value
       });
-    }
-  }, _.capitalize(m.name)));
+    },
+    children: _.capitalize(m.name)
+  }, key));
   const mode = _.find(MODES, {
     value: settings.pseudospatial.categoricalMode
   });
-  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, _.capitalize(mode.name)), /*#__PURE__*/React.createElement(Dropdown.Menu, null, modeList));
+  return /*#__PURE__*/_jsxs(Dropdown, {
+    children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+      variant: "light",
+      children: _.capitalize(mode.name)
+    }), /*#__PURE__*/_jsx(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 = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
-  const [maskSets, setMaskSets] = useState(null);
-  const [params, setParams] = useState({
-    url: dataset.url
-  });
-  useEffect(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        url: dataset.url
-      });
-    });
-  }, [dataset.url]);
   const {
-    fetchedData,
-    isPending,
-    serverError
-  } = useFetch(ENDPOINT, params, {
-    refetchOnMount: false
-  });
-  useEffect(() => {
-    if (!isPending && !serverError) {
-      setMaskSets(fetchedData);
-    }
-  }, [fetchedData, isPending, serverError]);
-  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/React.createElement(Dropdown.Item, {
-    key: key,
+    pseudospatial: maskSets
+  } = settings.data;
+  const maskSetList = _.map(maskSets, (ms, key) => /*#__PURE__*/_jsx(Dropdown.Item, {
     active: settings.pseudospatial.maskSet === key,
     onClick: () => {
       dispatch({
-        type: "set.pseudospatial.maskSet",
+        type: 'set.pseudospatial.maskSet',
         maskSet: key
       });
-    }
-  }, _.capitalize(key)));
+    },
+    children: _.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]);
@@ -77,7 +56,7 @@ function MaskSet() {
       newMasks = null;
     }
     dispatch({
-      type: "set.pseudospatial.maskValues",
+      type: 'set.pseudospatial.maskValues',
       maskValues: newMasks
     });
   };
@@ -85,46 +64,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 = _.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(Dropdown.ItemText, {
-    key: mask
-  }, /*#__PURE__*/React.createElement(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 = _.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__*/_jsx(Dropdown.ItemText, {
+    children: /*#__PURE__*/_jsx(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, _.capitalize(settings.pseudospatial.maskSet || "Select a mask set")), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Mask set"), maskSetList)), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    variant: "light"
-  }, nMasks, " masks selected"), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Masks"), /*#__PURE__*/React.createElement(Dropdown.ItemText, {
-    key: "toggle-all"
-  }, /*#__PURE__*/React.createElement(Form.Check, {
-    type: "checkbox",
-    label: "Toggle all",
-    checked: toggleAllChecked,
-    onChange: toggleMasks
-  })), masksList)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Dropdown, {
+      children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+        variant: "light",
+        children: _.capitalize(settings.pseudospatial.maskSet || 'Select a mask set')
+      }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+        children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+          children: "Mask set"
+        }), maskSetList]
+      })]
+    }), /*#__PURE__*/_jsxs(Dropdown, {
+      children: [/*#__PURE__*/_jsxs(Dropdown.Toggle, {
+        variant: "light",
+        children: [nMasks, " masks selected"]
+      }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+        children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+          children: "Masks"
+        }), /*#__PURE__*/_jsx(Dropdown.ItemText, {
+          children: /*#__PURE__*/_jsx(Form.Check, {
+            type: "checkbox",
+            label: "Toggle all",
+            checked: toggleAllChecked,
+            onChange: toggleMasks
+          })
+        }, "toggle-all"), masksList]
+      })]
+    })]
+  });
+}
+function OpacitySlider(_ref) {
+  let {
+    opacity,
+    setOpacity
+  } = _ref;
+  const [sliderValue, setSliderValue] = useState(opacity);
+  return /*#__PURE__*/_jsxs(Box, {
+    className: "w-100",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      id: "opacity-range",
+      gutterBottom: true,
+      children: "Reference image opacity"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "px-4",
+      children: /*#__PURE__*/_jsx(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;
-  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)));
+  } = _ref2;
+  const {
+    imageUrl
+  } = useDataset();
+  const settings = useSettings();
+  const dispatch = useSettingsDispatch();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "cherita-pseudospatial-toolbar",
+    children: [/*#__PURE__*/_jsx(ButtonGroup, {
+      children: /*#__PURE__*/_jsx(MaskSet, {})
+    }), /*#__PURE__*/_jsx(ButtonGroup, {
+      children: plotType === PLOT_TYPES.CATEGORICAL && /*#__PURE__*/_jsx(CategoricalMode, {})
+    }), imageUrl && /*#__PURE__*/_jsx(OpacitySlider, {
+      opacity: settings.pseudospatial.refImg.opacity,
+      setOpacity: opacity => {
+        dispatch({
+          type: 'set.pseudospatial.refImg.opacity',
+          opacity: opacity
+        });
+      }
+    })]
+  });
 }