Upgraded tests and fixes in the topology editing feature

Author: umer901

.clinerules

@@ -260,31 +260,55 @@ Native NiceGUI implementation for visualizing experiment configuration topologie
 
 ## Testing
 
-### New Topology Tests
+### Topology Test Suite
 
 1. `tests/unit/test_webapp/test_topology_service.py`
-   - Verifies YAML -> graph transformation behavior:
+   - Verifies YAML -> graph transformation behavior and topology metadata:
      - server-only node creation
      - server+client node + directed edge extraction
+     - multiple clients targeting one server
      - no edge when `target` does not exist
+     - empty config behavior (`tests: []`)
      - aggregated deduplication (`test_count`, edge `count`, merged network and execution environments)
      - per-test graph isolation and stable test indexes
+     - shadow network metadata extraction (`latency`, `jitter`, `packet_loss`, `stop_time`)
+     - node sizing rules and hard cap
+     - scaling thresholds (4 / 8 / 12 / 13+ nodes)
+     - default fallbacks for missing optional fields
+     - category normalization (`iut`/`testers` -> `IUT`/`TESTERS`)
 
 2. `tests/unit/test_webapp/test_topology_renderer_navigation.py`
-   - Verifies node-click navigation logic:
+   - Verifies renderer behavior and node-click navigation logic:
      - aggregated click stores first matching test index
      - per-test click uses explicit test index override
      - unknown aggregated service defaults to test index `0`
+     - navigation query parameters are URL-encoded correctly
+     - aggregated display labels are sanitized before navigation state is stored
+     - dict-style event payload compatibility
+     - ECharts option generation and scaling behavior
+     - edge label suppression on dense graphs
      - validates required `topology_nav` fields:
        `config_path`, `test_index`, `service_id`, `service_name`, `source`
 
-### How To Run
+### Commands (Topology Only)
 
-1. Fast topology unit checks:
+1. Run the topology test suite:
    ```bash
    .venv/bin/pytest tests/unit/test_webapp/test_topology_service.py tests/unit/test_webapp/test_topology_renderer_navigation.py -q -c pyproject.toml -n0 --no-cov
    ```
 
+2. Show collected topology tests:
+   ```bash
+   .venv/bin/pytest tests/unit/test_webapp/test_topology_service.py tests/unit/test_webapp/test_topology_renderer_navigation.py --collect-only -q -c pyproject.toml -n0 --no-cov
+   ```
+
+### Avoiding Common Errors
+
+- Use `.venv/bin/pytest` so the same virtual environment is used as the project.
+- Keep topology validation scoped to the two files above to avoid unrelated webapp failures.
+- Use `--no-cov` for quick, stable local checks when you only need pass/fail status.
+- Browser/Selenium integration tests are intentionally excluded from the topology suite because they require additional host dependencies (Chrome/ChromeDriver/system libraries) and often fail in restricted environments.
+
 ---
 
 ## Future Enhancements

panther/webapp/Topology.md

@@ -197,7 +197,9 @@ def _refresh(self):
                     ui.button(
                         icon="edit",
                         on_click=lambda _, k=key: self._open_edit_dialog(k),
-                    ).props("flat dense round size=sm")
+                    ).props("flat dense round size=sm").classes(
+                        "panther-entry-edit-button"
+                    )
                     ui.button(
                         icon="close",
                         on_click=lambda _, k=key: self._remove_entry(k),

panther/webapp/components/forms/dict_list_widgets.py

@@ -47,6 +47,7 @@ def __init__(self) -> None:
         self._test_data: list[dict[str, Any]] = []
         self._forms: list[Any] = []  # PydanticForm instances
         self._expansions: list[Any] = []
+        self._preferred_open_index: int | None = None
         with ui.column().classes("w-full"):
             self._container = ui.column().classes("w-full gap-2 panther-test-list")
             ui.button(
@@ -68,12 +69,25 @@ def update_form_field(self, test_idx: int, field_name: str, value: Any) -> None:
         if test_idx < len(self._forms):
             self._forms[test_idx].set_field_value(field_name, value)
 
-    def set_value(self, tests: list[dict[str, Any]]) -> None:
+    def set_value(
+        self, tests: list[dict[str, Any]], open_index: int | None = None
+    ) -> None:
         """Load a list of test dicts (e.g. from YAML import/load)."""
+        self.set_open_test_index(open_index)
         self._test_data = list(tests) if tests else []
         self._forms = []
         self._rebuild()
 
+    def set_open_test_index(self, test_idx: int | None) -> None:
+        """Set which test panel should open after the next rebuild."""
+        if test_idx is None:
+            self._preferred_open_index = None
+            return
+        try:
+            self._preferred_open_index = max(0, int(test_idx))
+        except (TypeError, ValueError):
+            self._preferred_open_index = None
+
     def open_test(self, test_idx: int) -> bool:
         """Open the expansion panel for a specific test index."""
         if not 0 <= test_idx < len(self._expansions):
@@ -87,6 +101,7 @@ def open_test(self, test_idx: int) -> bool:
         expansion = self._expansions[test_idx]
         if hasattr(expansion, "open"):
             expansion.open()
+            self.set_open_test_index(test_idx)
             return True
         return False
 
@@ -113,6 +128,10 @@ def _rebuild(self) -> None:
                 )
                 return
 
+            open_index = self._preferred_open_index
+            if open_index is None or not 0 <= open_index < len(self._test_data):
+                open_index = 0
+
             for idx, test_data in enumerate(self._test_data):
                 label = self._get_label(idx, test_data)
                 exp = ui.expansion(
@@ -149,17 +168,16 @@ def _rebuild(self) -> None:
                         form.set_value(test_data)
                     self._forms.append(form)
 
-                # Auto-open the first (or only) panel
-                if idx == 0:
+                # Auto-open the requested panel, falling back to the first test.
+                if idx == open_index:
                     exp.open()
 
     def _add_test(self) -> None:
         """Append an empty test and rebuild."""
         self._snapshot()
         self._test_data.append({})
+        self.set_open_test_index(len(self._test_data) - 1)
         self._rebuild()
-        # Open the newly added panel (last one)
-        self._open_last()
 
     def _duplicate_test(self, idx: int) -> None:
         """Deep-copy test at *idx*, append, and rebuild."""
@@ -171,25 +189,20 @@ def _duplicate_test(self, idx: int) -> None:
             if name:
                 cloned["name"] = f"{name} (copy)"
             self._test_data.append(cloned)
+            self.set_open_test_index(len(self._test_data) - 1)
             self._rebuild()
-            self._open_last()
 
     def _remove_test(self, idx: int) -> None:
         """Remove test at *idx* and rebuild."""
         self._snapshot()
         if idx < len(self._test_data):
             self._test_data.pop(idx)
+            if self._test_data:
+                self.set_open_test_index(min(idx, len(self._test_data) - 1))
+            else:
+                self.set_open_test_index(None)
             self._rebuild()
 
-    def _open_last(self) -> None:
-        """Open the last expansion panel (newly added test)."""
-        # The container's children are the expansion panels
-        children = list(self._container)
-        if children:
-            last = children[-1]
-            if hasattr(last, "open"):
-                last.open()
-
     @staticmethod
     def _get_label(idx: int, data: dict[str, Any]) -> str:
         """Generate a display label for the expansion header."""

panther/webapp/components/forms/test_list_editor.py

@@ -71,7 +71,9 @@ def _dom_token(value: Any) -> str:
     return token.lower() or "unnamed"
 
 
-def _populate_forms_from_dict(panels: dict[str, Any], config_dict: dict) -> None:
+def _populate_forms_from_dict(
+    panels: dict[str, Any], config_dict: dict, open_test_index: int | None = None
+) -> None:
     """Populate all form panels from a parsed config dict.
 
     Walks the three panel groups (``global``, ``tests``, ``metadata``)
@@ -85,6 +87,8 @@ def _populate_forms_from_dict(panels: dict[str, Any], config_dict: dict) -> None
         config_dict: A parsed experiment configuration dictionary,
             typically the output of ``yaml.safe_load()`` or
             ``ConfigService.yaml_to_dict()``.
+        open_test_index: Optional test panel to open while rebuilding
+            the test editor.
     """
     # Global sections
     for field_name, panel in panels.get("global", {}).items():
@@ -96,7 +100,9 @@ def _populate_forms_from_dict(panels: dict[str, Any], config_dict: dict) -> None
     tests = config_dict.get("tests")
     test_editor = panels.get("tests")
     if tests and isinstance(tests, list) and test_editor:
-        test_editor.set_value([t for t in tests if isinstance(t, dict)])
+        test_editor.set_value(
+            [t for t in tests if isinstance(t, dict)], open_index=open_test_index
+        )
 
     # Metadata
     meta = config_dict.get("metadata")
@@ -717,7 +723,7 @@ def _auto_navigate_from_topology(
         # Populate forms from loaded data, then open the target test panel
         panels = _yaml_editor_ref.get("panels")
         if panels:
-            _populate_forms_from_dict(panels, data)
+            _populate_forms_from_dict(panels, data, open_test_index=test_index)
             test_editor = panels.get("tests")
             if test_editor and hasattr(test_editor, "open_test"):
                 test_editor.open_test(test_index)
@@ -772,43 +778,86 @@ def _auto_navigate_from_topology(
                         }}
                     }});
 
-                    // Phase 2: After expansion animation completes, find and highlight the service
-                    setTimeout(function() {{
-                        var target = document.querySelector({js_service_selector});
-                        if (!target && {js_service_id}) {{
-                            var allElements = targetExp.querySelectorAll('*:not(script):not(style)');
-                            for (var i = 0; i < allElements.length; i++) {{
-                                var el = allElements[i];
-                                var text = (el.textContent || el.value || '').toLowerCase();
-                                if (text.includes({js_service_id_lower}) || text.includes({js_service_name_lower})) {{
-                                    target = el.closest('.panther-field-services-entry') ||
-                                        el.closest('.q-field') ||
-                                        el.closest('.q-item') ||
-                                        el;
-                                    break;
-                                }}
+                    function expandNestedSections() {{
+                        targetExp.querySelectorAll('.q-expansion__header').forEach(function(header, idx) {{
+                            if (idx === 0) return;
+                            var expanded = header.getAttribute('aria-expanded');
+                            var item = header.closest('.q-expansion-item');
+                            var isExpanded = expanded === 'true' ||
+                                (item && item.classList.contains('q-expansion-item--expanded'));
+                            if (!isExpanded) {{
+                                header.click();
+                            }}
+                        }});
+                    }}
+
+                    function highlightTarget(target) {{
+                        target.scrollIntoView({{behavior: 'smooth', block: 'center'}});
+                        target.style.backgroundColor = '#fff3cd';
+                        target.style.boxShadow = '0 0 0 2px #ffc107';
+                        target.style.borderRadius = '4px';
+                        target.style.transition = 'background-color 2s, box-shadow 2s';
+                        setTimeout(function() {{
+                            target.style.backgroundColor = '';
+                            target.style.boxShadow = '';
+                        }}, 4000);
+                    }}
+
+                    function findFallbackTarget() {{
+                        if (!{js_service_id}) return null;
+                        var allElements = targetExp.querySelectorAll('*:not(script):not(style)');
+                        for (var i = 0; i < allElements.length; i++) {{
+                            var el = allElements[i];
+                            var text = (el.textContent || el.value || '').toLowerCase();
+                            if (text.includes({js_service_id_lower}) || text.includes({js_service_name_lower})) {{
+                                return el.closest('.panther-field-services-entry') ||
+                                    el.closest('.q-field') ||
+                                    el.closest('.q-item') ||
+                                    el;
+                            }}
+                        }}
+                        return null;
+                    }}
+
+                    // Phase 2: wait for nested sections and service rows to render, then exact-match the clicked service.
+                    var attempts = 0;
+                    var maxAttempts = 20;
+                    var servicePoll = setInterval(function() {{
+                        attempts += 1;
+                        expandNestedSections();
+
+                        var exactServiceRow = targetExp.querySelector({js_service_selector});
+                        if (exactServiceRow) {{
+                            clearInterval(servicePoll);
+                            highlightTarget(exactServiceRow);
+                            console.log("Highlighted exact service field:", {js_service_id});
+
+                            var editButton = exactServiceRow.querySelector('.panther-entry-edit-button');
+                            if (editButton) {{
+                                setTimeout(function() {{
+                                    editButton.click();
+                                    console.log("Opened edit dialog for exact service:", {js_service_id});
+                                }}, 150);
+                            }} else {{
+                                console.log("Exact service row found, but no edit button was available:", {js_service_id});
                             }}
+                            return;
                         }}
 
-                        if (target) {{
-                            target.scrollIntoView({{behavior: 'smooth', block: 'center'}});
-                            target.style.backgroundColor = '#fff3cd';
-                            target.style.boxShadow = '0 0 0 2px #ffc107';
-                            target.style.borderRadius = '4px';
-                            target.style.transition = 'background-color 2s, box-shadow 2s';
-                            setTimeout(function() {{
-                                target.style.backgroundColor = '';
-                                target.style.boxShadow = '';
-                            }}, 4000);
-                            console.log("Highlighted service field:", {js_service_id});
-                        }} else {{
-                            // Keep the user at the correct test even if the service row is not rendered.
-                            var rect = targetExp.getBoundingClientRect();
-                            var scrollTarget = window.scrollY + rect.top - 100;
-                            window.scrollTo({{top: scrollTarget, behavior: 'smooth'}});
-                            console.log("Could not find service field for:", {js_service_id_lower});
+                        if (attempts >= maxAttempts) {{
+                            clearInterval(servicePoll);
+                            var fallbackTarget = findFallbackTarget();
+                            if (fallbackTarget) {{
+                                highlightTarget(fallbackTarget);
+                                console.log("Highlighted fallback service field:", {js_service_id});
+                            }} else {{
+                                var rect = targetExp.getBoundingClientRect();
+                                var scrollTarget = window.scrollY + rect.top - 100;
+                                window.scrollTo({{top: scrollTarget, behavior: 'smooth'}});
+                                console.log("Could not find service field for:", {js_service_id_lower});
+                            }}
                         }}
-                    }}, 700);
+                    }}, 250);
                 }} else {{
                     console.warn("Could not find test panel selector:", {js_test_panel_selector});
                     var testsContainer = document.querySelector('.panther-test-list');