feat(roi): refactor ROI editing functions and update UI labels for clarity

Author: PierreRaybaut

src/App.tsx

@@ -2546,29 +2546,24 @@ export default function App() {
     [runtime, currentId],
   );
 
-  const handleEditRoi = useCallback(async () => {
-    if (!runtime || !currentId) return;
-    const segs = await runtime.getSignalRoi(currentId);
-    // "Edit numerically" now opens the docked ROI panel (no modal) with
-    // the coordinate form, selecting the first ROI.  Drawing stays
-    // disarmed so the plot keeps pan/zoom until the user picks a tool.
+  const handleToggleRoiEditMode = useCallback(async () => {
+    if (roiEditMode) {
+      // Leaving the editor: disarm drawing and clear the active selection.
+      setRoiEditMode(false);
+      setRoiDrawGeometry(null);
+      setSelectedRoiIndex(null);
+      return;
+    }
+    // Entering the unified ROI editor: load the current ROI, arm the
+    // range-draw tool so a first ROI can be traced immediately, and
+    // pre-select the first ROI (if any) so its coordinate form opens at once.
+    const segs =
+      runtime && currentId ? await runtime.getSignalRoi(currentId) : [];
     setRoi(segs);
-    setRoiDrawGeometry(null);
+    setRoiDrawGeometry("segment");
     setSelectedRoiIndex(segs.length > 0 ? 0 : null);
     setRoiEditMode(true);
-  }, [runtime, currentId]);
-
-  const handleToggleRoiEditMode = useCallback(() => {
-    setRoiEditMode((m) => {
-      const next = !m;
-      // Entering edit mode arms the range-draw tool so the user can trace
-      // a first ROI immediately (even when none exists yet); leaving it
-      // disarms drawing and clears the active selection.
-      setRoiDrawGeometry(next ? "segment" : null);
-      if (!next) setSelectedRoiIndex(null);
-      return next;
-    });
-  }, []);
+  }, [roiEditMode, runtime, currentId]);
 
   // Live-edit callback fed by the plot when the user drags a ROI handle or
   // draws a brand-new rectangle in edit mode.  The backend is updated with
@@ -2758,16 +2753,6 @@ export default function App() {
   // Image ROI handlers (Phase 13)
   // ------------------------------------------------------------------
 
-  const handleImageEditRoi = useCallback(async () => {
-    if (!runtime || !currentId) return;
-    const segs = await runtime.getImageRoi(currentId);
-    // Open the docked ROI panel (no modal) with the coordinate form.
-    setImageRoi(segs);
-    setRoiDrawGeometry(null);
-    setSelectedRoiIndex(segs.length > 0 ? 0 : null);
-    setImageRoiEditMode(true);
-  }, [runtime, currentId]);
-
   const handleImageAddRectangle = useCallback(async () => {
     if (!runtime || !currentId || !imageData) return;
     const sx = (imageData.width * imageData.dx) / 4 || 1;
@@ -2813,22 +2798,26 @@ export default function App() {
     await runtime.setImageRoi(currentId, next);
   }, [runtime, currentId, imageRoi, imageData]);
 
-  const handleToggleImageRoiEditMode = useCallback(() => {
-    setImageRoiEditMode((m) => {
-      const next = !m;
-      // Entering edit mode arms the rectangle-draw tool so a first ROI can
-      // be traced right away; leaving it disarms drawing and clears the
-      // active selection.  ROI editing and the erase session are mutually
-      // exclusive, so entering one leaves the other.
-      setRoiDrawGeometry(next ? "rectangle" : null);
-      if (next) {
-        setImageEraseMode(false);
-        setEraseRegions([]);
-      }
-      if (!next) setSelectedRoiIndex(null);
-      return next;
-    });
-  }, []);
+  const handleToggleImageRoiEditMode = useCallback(async () => {
+    if (imageRoiEditMode) {
+      setImageRoiEditMode(false);
+      setRoiDrawGeometry(null);
+      setSelectedRoiIndex(null);
+      return;
+    }
+    // Entering the unified ROI editor: load the current ROI, arm the
+    // rectangle-draw tool, and pre-select the first ROI (if any) so its
+    // coordinate form opens at once.  ROI editing and the erase session are
+    // mutually exclusive, so entering one leaves the other.
+    const segs =
+      runtime && currentId ? await runtime.getImageRoi(currentId) : [];
+    setImageRoi(segs);
+    setImageEraseMode(false);
+    setEraseRegions([]);
+    setRoiDrawGeometry("rectangle");
+    setSelectedRoiIndex(segs.length > 0 ? 0 : null);
+    setImageRoiEditMode(true);
+  }, [imageRoiEditMode, runtime, currentId]);
 
   // Live-edit callback fed by the plot when the user drags a ROI handle
   // or draws a brand-new shape in edit mode.  The backend is updated with
@@ -3903,7 +3892,6 @@ export default function App() {
       ...(treeKind === "signal"
         ? buildRoiActions(roi, roiEditMode, hasRoiClipboard, {
             onToggleEditMode: handleToggleRoiEditMode,
-            onEditNumerically: handleEditRoi,
             onExtractEach: handleRoiExtractEach,
             onExtractMerged: handleRoiExtractMerged,
             onCopy: handleRoiCopy,
@@ -3918,7 +3906,6 @@ export default function App() {
             onAddRectangle: handleImageAddRectangle,
             onAddCircle: handleImageAddCircle,
             onCreateGrid: handleCreateRoiGrid,
-            onEditNumerically: handleImageEditRoi,
             onExtractEach: handleImageRoiExtractEach,
             onExtractMerged: handleImageRoiExtractMerged,
             onCopy: handleImageRoiCopy,
@@ -3955,7 +3942,6 @@ export default function App() {
       handleDeleteAll,
       handleApplyFeature,
       handleEditProperties,
-      handleEditRoi,
       handleToggleRoiEditMode,
       handleRoiExtractEach,
       handleRoiExtractMerged,
@@ -3968,7 +3954,6 @@ export default function App() {
       handleImageAddRectangle,
       handleImageAddCircle,
       handleCreateRoiGrid,
-      handleImageEditRoi,
       handleImageRoiExtractEach,
       handleToggleImageRoiEditMode,
       handleImageRoiExtractMerged,

src/actions/registry.ts

@@ -737,10 +737,8 @@ function buildAnalysisActions(
 
 /** Callbacks for the ``ROI`` top-level menu (mirrors DataLab desktop). */
 export interface RoiActionCallbacks {
-  /** Toggle the interactive (drag/draw) ROI editor on the plot. */
+  /** Toggle the docked ROI editor (draw + coordinate table) on the plot. */
   onToggleEditMode: () => void;
-  /** Open the numerical ROI dialog. */
-  onEditNumerically: () => void;
   /** Extract one new signal per ROI (1-to-n). */
   onExtractEach: () => void;
   /** Extract a single new signal containing the concatenation of all ROIs. */
@@ -776,23 +774,17 @@ export function buildRoiActions(
     ready(s) && (roi.length > 0 || s.selectionHasRoi);
   const out: ActionDescriptor[] = [
     {
-      id: "roi.edit_graphical",
-      label: roiEditMode ? t("Stop graphical edit") : t("Edit graphically"),
+      id: "roi.edit",
+      label: roiEditMode
+        ? t("Stop editing regions of interest")
+        : t("Edit regions of interest"),
       menuPath: roiEditMode
-        ? "ROI/Stop graphical edit"
-        : "ROI/Edit graphically",
+        ? "ROI/Stop editing regions of interest"
+        : "ROI/Edit regions of interest",
       iconUrl: getRoiIconUrl("roi_graphical"),
       enabled: ready,
       run: cb.onToggleEditMode,
     },
-    {
-      id: "roi.edit_numerical",
-      label: t("Edit numerically…"),
-      menuPath: "ROI/Edit numerically…",
-      iconUrl: getRoiIconUrl("roi_coordinate"),
-      enabled: ready,
-      run: cb.onEditNumerically,
-    },
     {
       id: "roi.copy",
       label: t("Copy ROI"),
@@ -884,13 +876,11 @@ export function buildRoiActions(
 
 /** Callbacks for the image ``ROI`` top-level menu. */
 export interface ImageRoiActionCallbacks {
-  /** Toggle the interactive (drag/draw) ROI editor on the plot. */
+  /** Toggle the docked ROI editor (draw + coordinate table) on the plot. */
   onToggleEditMode: () => void;
-  /** Open the numerical ROI dialog (rectangle/circle/polygon editor). */
-  onEditNumerically: () => void;
-  /** Append a new default rectangle ROI then open the numerical dialog. */
+  /** Append a new default rectangle ROI then open the editor panel. */
   onAddRectangle: () => void;
-  /** Append a new default circle ROI then open the numerical dialog. */
+  /** Append a new default circle ROI then open the editor panel. */
   onAddCircle: () => void;
   /** Open the "Create ROI grid" dialog and replace the current image's ROI
    *  with a generated grid of rectangles. */
@@ -930,11 +920,13 @@ export function buildImageRoiActions(
     ready(s) && (roi.length > 0 || s.selectionHasRoi);
   const out: ActionDescriptor[] = [
     {
-      id: "image_roi.edit_graphical",
-      label: roiEditMode ? t("Stop graphical edit") : t("Edit graphically"),
+      id: "image_roi.edit",
+      label: roiEditMode
+        ? t("Stop editing regions of interest")
+        : t("Edit regions of interest"),
       menuPath: roiEditMode
-        ? "ROI/Stop graphical edit"
-        : "ROI/Edit graphically",
+        ? "ROI/Stop editing regions of interest"
+        : "ROI/Edit regions of interest",
       iconUrl: getRoiIconUrl("roi_graphical"),
       enabled: ready,
       run: cb.onToggleEditMode,
@@ -964,15 +956,6 @@ export function buildImageRoiActions(
       enabled: ready,
       run: cb.onCreateGrid,
     },
-    {
-      id: "image_roi.edit_numerical",
-      label: t("Edit numerically…"),
-      menuPath: "ROI/Edit numerically…",
-      iconUrl: getRoiIconUrl("roi_coordinate"),
-      beginGroup: true,
-      enabled: ready,
-      run: cb.onEditNumerically,
-    },
     {
       id: "image_roi.copy",
       label: t("Copy ROI"),

src/locales/fr.json

@@ -329,11 +329,10 @@
   "Edit": "Édition",
   "Edit array": "Éditer le tableau",
   "Edit data…": "Éditer les données…",
-  "Edit graphically": "Éditer graphiquement",
   "Edit metadata": "Modifier les métadonnées",
-  "Edit numerically…": "Éditer numériquement…",
   "Edit parameters of: {label}": "Modifier les paramètres de : {label}",
   "Edit pixel values in a spreadsheet": "Éditer les valeurs des pixels dans un tableur",
+  "Edit regions of interest": "Modifier les régions d'intérêt",
   "Edit X / Y values in a spreadsheet": "Éditer les valeurs X / Y dans un tableur",
   "Edit…": "Éditer…",
   "empty array": "tableau vide",
@@ -343,7 +342,6 @@
   "Endpoint preset": "Préréglage de point de terminaison",
   "Enhance your security on the web": "Améliorer votre sécurité sur le web",
   "Enhanced security mode site preferences": "Préférences de site pour une sécurité renforcée",
-  "Erase": "Effacer",
   "Erase area": "Effacer une zone",
   "Erase area…": "Effacer une zone…",
   "Erosion (disk)": "Erosion (disque)",
@@ -873,7 +871,7 @@
   "Sticks": "Bâtons",
   "Stop": "Arrêter",
   "Stop current macro": "Arrêter la macro courante",
-  "Stop graphical edit": "Arrêter l'édition graphique",
+  "Stop editing regions of interest": "Arrêter la modification des régions d'intérêt",
   "Stop the assistant (Esc)": "Arrêter l'assistant (Échap)",
   "Store data on disk": "Stocker les données sur disque",
   "Subtract constant": "Soustraire une constante",
@@ -985,6 +983,10 @@
   "Zero padding": "Complément de zéros",
   "Zero padding…": "Complément de zéros…",
   "Zoom in / out around the cursor (Plotly default)": "Zoom avant / arrière autour du curseur (par défaut Plotly)",
+  "Edit graphically": "Éditer graphiquement",
+  "Edit numerically…": "Éditer numériquement…",
+  "Erase": "Effacer",
+  "Stop graphical edit": "Arrêter l'édition graphique",
   "Circle center must be a number.": "Le centre du cercle doit être un nombre.",
   "Circle radius must be > 0.": "Le rayon du cercle doit être > 0.",
   "Edit image regions of interest": "Modifier les régions d'intérêt de l'image",
@@ -997,6 +999,5 @@
   "Vertices (space-separated": "Sommets (paires",
   "All bounds must be valid numbers.": "Toutes les bornes doivent être des nombres valides.",
   "Each segment must satisfy xmin < xmax.": "Chaque segment doit respecter xmin < xmax.",
-  "Edit regions of interest": "Modifier les régions d'intérêt",
   "No ROI defined. Click Add to create one.": "Aucune ROI définie. Cliquez sur Ajouter pour en créer une."
 }