Edit flow properties on double click in WebUI

Double-clicking a flow in the flow table selects it and opens the
properties dialog, as in the customtkinter GUI. Double clicks are ignored
while the form is disabled during a running action. The selection handler
is annotated with the list of rows it actually receives.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: briemla

OTAnalytics/plugin_ui/nicegui_gui/pages/sections_and_flow_form/flow_form.py

@@ -1,4 +1,4 @@
-from typing import Iterable, Self
+from typing import Any, Iterable, Self
 
 from nicegui import ui
 from nicegui.elements.button import Button
@@ -62,7 +62,9 @@ def __init__(
             marker=MARKER_FLOW_TABLE,
             # Let the table auto-select the row on click and forward selection
             auto_select_on_row_click=True,
+            on_row_double_click_method=self._edit_flow,
         )
+        self._disabled = False
         self._button_remove: ui.button | None = None
         self._button_add: ui.button | None = None
         self._button_generate: ui.button | None = None
@@ -73,11 +75,17 @@ def _introduce_to_viewmodel(self) -> None:
         self._viewmodel.set_flows_frame(self)
         self._viewmodel.set_treeview_flows(self)
 
-    def _select_flow(self, e: dict) -> None:
+    def _select_flow(self, e: list[dict[str, Any]]) -> None:
         flow_ids = [event[COLUMN_ID] for event in e]
         self._viewmodel.set_selected_flow_ids(flow_ids)
         self._viewmodel.refresh_items_on_canvas()
 
+    async def _edit_flow(self, row: dict[str, Any]) -> None:
+        if self._disabled:
+            return
+        self._select_flow([row])
+        await self._viewmodel.edit_selected_flow()
+
     def build(self) -> Self:
         self._flow_table.build()
         with ui.row().style(BASIC_WIDTH):
@@ -133,6 +141,7 @@ def update_selected_items(self, item_ids: list[str]) -> None:
         self._flow_table.select(item_ids)
 
     def enable(self) -> None:
+        self._disabled = False
         if (
             self._button_remove
             and self._button_properties
@@ -145,6 +154,7 @@ def enable(self) -> None:
             self._button_properties.enable()
 
     def disable(self) -> None:
+        self._disabled = True
         if (
             self._button_remove
             and self._button_properties

tests/unit/OTAnalytics/plugin_ui/nicegui_gui/pages/sections_and_flow_form/test_flow_form.py

@@ -0,0 +1,106 @@
+"""Tests editing a flow by double-clicking it in the WebUI flow table."""
+
+from typing import Any
+from unittest.mock import MagicMock
+
+import pytest
+from nicegui import ui
+from nicegui.testing import User
+
+from OTAnalytics.adapter_ui.view_model import ViewModel
+from OTAnalytics.application.resources.resource_manager import ResourceManager
+from OTAnalytics.application.state import FlowState
+from OTAnalytics.plugin_ui.nicegui_gui.pages.sections_and_flow_form.flow_form import (
+    MARKER_FLOW_TABLE,
+    FlowForm,
+)
+from tests.utils.nicegui_table import double_click_row, wait_until_awaited
+
+ENDPOINT_NAME = "/test-flow-form-double-click"
+FLOW_ID = "flow-1"
+FLOW_ROW = {"id": FLOW_ID, "name": "Flow 1"}
+
+
+class FakeFlow:
+    def __init__(self, flow_id: str, name: str) -> None:
+        self.id = flow_id
+        self.name = name
+
+    def to_dict(self) -> dict[str, Any]:
+        return {"id": self.id, "name": self.name}
+
+
+def create_viewmodel() -> MagicMock:
+    viewmodel = MagicMock(spec=ViewModel)
+    viewmodel.get_all_flows.return_value = [FakeFlow(FLOW_ID, "Flow 1")]
+    return viewmodel
+
+
+def create_flow_state() -> MagicMock:
+    flow_state = MagicMock(spec=FlowState)
+    flow_state.selected_flows = MagicMock()
+    flow_state.selected_flows.get.return_value = []
+    return flow_state
+
+
+class TestFlowFormDoubleClick:
+
+    @pytest.mark.asyncio
+    async def test_double_click_selects_flow_and_opens_properties(
+        self, user: User, resource_manager: ResourceManager
+    ) -> None:
+        viewmodel = create_viewmodel()
+        target = FlowForm(viewmodel, create_flow_state(), resource_manager)
+
+        @ui.page(ENDPOINT_NAME)
+        def page() -> None:
+            target.build()
+
+        await user.open(ENDPOINT_NAME)
+
+        double_click_row(user, MARKER_FLOW_TABLE, FLOW_ROW)
+        await wait_until_awaited(viewmodel.edit_selected_flow)
+
+        viewmodel.set_selected_flow_ids.assert_called_with([FLOW_ID])
+        viewmodel.edit_selected_flow.assert_awaited_once()
+
+    @pytest.mark.asyncio
+    async def test_double_click_does_nothing_while_disabled(
+        self, user: User, resource_manager: ResourceManager
+    ) -> None:
+        viewmodel = create_viewmodel()
+        target = FlowForm(viewmodel, create_flow_state(), resource_manager)
+
+        @ui.page(ENDPOINT_NAME)
+        def page() -> None:
+            target.build()
+
+        await user.open(ENDPOINT_NAME)
+        target.disable()
+        viewmodel.set_selected_flow_ids.reset_mock()
+
+        double_click_row(user, MARKER_FLOW_TABLE, FLOW_ROW)
+        await wait_until_awaited(viewmodel.edit_selected_flow)
+
+        viewmodel.set_selected_flow_ids.assert_not_called()
+        viewmodel.edit_selected_flow.assert_not_awaited()
+
+    @pytest.mark.asyncio
+    async def test_double_click_works_again_after_enable(
+        self, user: User, resource_manager: ResourceManager
+    ) -> None:
+        viewmodel = create_viewmodel()
+        target = FlowForm(viewmodel, create_flow_state(), resource_manager)
+
+        @ui.page(ENDPOINT_NAME)
+        def page() -> None:
+            target.build()
+
+        await user.open(ENDPOINT_NAME)
+        target.disable()
+        target.enable()
+
+        double_click_row(user, MARKER_FLOW_TABLE, FLOW_ROW)
+        await wait_until_awaited(viewmodel.edit_selected_flow)
+
+        viewmodel.edit_selected_flow.assert_awaited_once()