[CHAIN] feat(ui): add graph interactions and filtered view

[pfe-nazaries]

🔗 Part of Chained PRs

Field	Value
Feature Branch	PROWLER-1273/react-flow-migration
Main PR	#10686
Sub-task	PROWLER-1375
Chain Position	3 of 5
Depends on	#10705 (PR1 — React Flow core rendering)

Chain Overview

         ┌──────────────────────────┐
         │ PR0: Normalize data      │ ← #10701 🟢
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR1: React Flow core     │ ← #10705 🟡
         │   rendering              │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ 📍 PR2: Interactions     │ ← THIS PR (#10756)
         │   🎯 MVP                 │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR3: Export + Minimap    │ ← #10800 🟡
         │   ✅ Phase 1 complete    │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ PR4: Test coverage       │ ← #10970 🟡
         │   🛡️ Hardening complete  │
         └────────────┬─────────────┘
                      │
         ┌────────────▼─────────────┐
         │ #10686 Main PR           │
         │   → master               │
         └──────────────────────────┘

---

Context

Part of chained PRs for the React Flow migration. This is the MVP milestone — it adds all user interactions to the graph: node selection, filtered view, and path highlighting.

---

Description

Implements graph interactions on top of the React Flow rendering from PR #10705.

Changes:

• Tier 1 click: Clicking a resource node toggles visibility of connected finding nodes and their edges
• Tier 2 click: Clicking a finding node (or any node in filtered view) enters a filtered subgraph view centered on that node, with re-computed Dagre layout
• Path highlight on hover: Hovering a node highlights upstream/downstream edges with glow effect; clears on mouse leave
• Node selection: Orange glow indicator on selected node, synced with detail panel
• State resilience: Graph state resets properly on scan change and new query execution
• DRY refactor: Extract shared NodeDetailPanel component for fullscreen and main detail panels
• Type cleanup: Replace duplicated GraphCanvasProps with Omit<AttackPathGraphProps, "className">

---

Steps to review

1. Navigate to Attack Paths, select a scan, execute a query
2. Click a resource node → verify finding hexagons toggle on/off
3. Click a finding node → verify filtered subgraph view with "Back to Full View" button
4. Hover nodes → verify path edges highlight and clear cleanly
5. Switch scans while in filtered view → verify state resets completely
6. Open fullscreen dialog → verify detail panel shows NodeDetailContent

---

Checklist

Community Checklist

• This feature/issue is listed in here or roadmap.prowler.com
• Is it assigned to me, if not, request it via the issue/feature in here or Prowler Community Slack

• Review if the code is being covered by tests.
• Review if code is being documented following this specification https://github.com/google/styleguide/blob/gh-pages/pyguide.md#38-comments-and-docstrings
• Review if backport is needed.
• Review if is needed to change the Readme.md
• Ensure new entries are added to CHANGELOG.md, if applicable.

UI

• All issue/task requirements work as expected on the UI
• Screenshots/Video of the functionality flow (if applicable) - Mobile (X < 640px)
• Screenshots/Video of the functionality flow (if applicable) - Table (640px > X < 1024px)
• Screenshots/Video of the functionality flow (if applicable) - Desktop (X > 1024px)
• Ensure new entries are added to CHANGELOG.md, if applicable.

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[Alan-TheGentleman]

The local interaction state does not reset when the graph data changes. expandedResources and hoveredNodeId live inside GraphCanvas, but nothing clears them after a new query or scan switch, so this can leak stale expansion/highlight state into the next graph and it also makes the "state resets properly" claim false. Please reset both when data changes, or remount the graph with a stable key derived from the active scan/query.

[Alan-TheGentleman]

Question: was it intentional to stop passing onViewFinding / viewFindingLoading through the extracted NodeDetailPanel in fullscreen mode? As written, this looks like it regresses the in-app finding drawer flow and can also leave the related finding buttons visible and enabled in the compact fullscreen panel even though clicking them becomes a no-op.

[Alan-TheGentleman]

Following up on the reuse question from the previous PR and the comment here: #10705 (comment). Do you think it is worth extracting the repeated node primitives for all three node components here instead of keeping every detail duplicated inside each one? I would still keep FindingNode, ResourceNode, and InternetNode as separate components because their shapes and labels differ, but hidden handles, label truncation, and the visual-state logic look shared enough to reduce repetition without forcing a generic node renderer.

[pfe-nazaries]

@Alan-TheGentleman comment addressed and branch updated with previous chained PR

[Alan-TheGentleman]

f878f121 resets expandedResources and hoveredNodeId on data change and wires onViewFinding / viewFindingLoading through NodeDetailPanel in fullscreen. Approving.

[Alan-TheGentleman]

f878f121 resets expandedResources and hoveredNodeId on data change and wires onViewFinding / viewFindingLoading through NodeDetailPanel in fullscreen. Approving.