feat(ui): replace D3+Dagre attack path graph with React Flow by pfe-nazaries · Pull Request #10686 · prowler-cloud/prowler

pfe-nazaries · 2026-04-14T14:27:56Z

🚀 Feature Complete - Chained PRs

This PR merges the PROWLER-1273/react-flow-migration feature branch.

Included PRs

#	PR	Sub-task	Jira	Status
0	#10701	Normalize data types and remove dead state	PROWLER-1373	🟢 Merged
1	#10705	Replace D3 rendering with React Flow + Dagre layout	PROWLER-1374	🟢 Merged
2	#10756	Implement graph interactions and filtered view (MVP)	PROWLER-1375	🟢 Merged
3	#10800	Restore export, adapt fullscreen, add minimap	PROWLER-1376	🟢 Merged
4	#10970	Add automated test coverage with Vitest Browser & Harness	PROWLER-1405	🟢 Merged
5	#11010	Auto-fit viewport on filter/expand and harden minimap	PROWLER-1273	🟡 Open

Legend: 🟢 Merged | 🟡 Open | 🔴 Changes Requested | 🔵 In Progress | ⚪ Pending

MVP milestone: After PR2, the graph is fully functional except export.
Phase 1 complete: After PR3.
Hardening complete: After PR4 (automated test coverage).
Polish complete: After PR5 (review-driven viewport and minimap fixes).

Dependency Diagram

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

Context

The Attack Path graph is currently a 1,173-line imperative D3 component that bypasses React reconciliation entirely. This feature branch migrates it to React Flow (@xyflow/react v12), the de-facto standard for graph visualization in React.

The migration is Phase 1 of the RFC: drop-in replacement achieving feature parity plus minimap, with PR4 adding automated test coverage as a hardening step and PR5 absorbing review-driven polish on viewport behavior and minimap visibility. Phase 2 (edge labels, node grouping, multi-select) will follow in a separate initiative.

Technical design: openspec/changes/react-flow-migration/ contains the full proposal, design, specs, and task breakdown.

Description

Key Changes:

Rendering

Replace D3 imperative SVG with React Flow declarative components
Three custom node types: FindingNode (hexagon), ResourceNode (pill), InternetNode (globe)
Dagre layout via @dagrejs/dagre (maintained fork)
Built-in minimap with high-contrast viewport indicator on the dark theme (PR5)

Interactions

Node selection, two-tier click, filtered view with re-layout
Path highlight on hover
Ctrl+scroll zoom preserved
initialNodeId support for reusable component
Auto-fit on filter enter/exit and on resource expansion when revealed findings fall off-screen, with asymmetric padding so fitted nodes never land underneath the minimap (PR5)

Export

PNG export via modern-screenshot + React Flow's getViewportForBounds() (replaces broken XMLSerializer approach)
JSON export preserved as-is

Cleanup

Remove deprecated dagre package (keep d3 — used by geo map components)
Remove dead state fields from Zustand store
Normalize GraphEdge.source/target type

Testing (PR4 + PR5)

Vitest Browser mode with Playwright provider (jsdom insufficient for React Flow DOM layout and image export via Canvas API)
Single-file AttackPathPageHarness co-located with AttackPathsPage — tests never import @testing-library directly
MSW handlers for Prowler API mocking; real server actions run through them
Coverage for every spec scenario plus variants, intermediate flows, edge cases, regressions, and the new auto-fit behaviors

Steps to review

Review individual chained PRs first (linked in table above)
Verify visual parity: graph renders with same layout, colors, and shapes
Test all interactions: click, filtered view, hover highlight, zoom/pan
Test export: PNG download with correct bounds
Test fullscreen: render, controls, export, node detail side-by-side
Verify auto-fit: clicking findings, Back to Full View, and expanding resources off-screen all re-fit; collapse and minor expansions do not
Run pnpm test:browser in ui/ — verify the page-level suite passes

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.

Adds the openspec repository as a submodule at openspec/ for shared spec definitions used by SDD tooling across AI coding assistants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-14T14:28:28Z

✅ All necessary CHANGELOG.md files have been updated.

github-actions · 2026-04-14T14:28:29Z

✅ Conflict Markers Resolved

All conflict markers have been successfully resolved in this pull request.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-14T14:40:56Z

🔒 Container Security Scan

Image: prowler:776b7b5
Last scan: 2026-05-05 12:32:31 UTC

📊 Vulnerability Summary

Severity	Count
🔴 Critical	5
Total	5

5 package(s) affected

⚠️ Action Required

Critical severity vulnerabilities detected. These should be addressed before merging:

Review the detailed scan results
Update affected packages to patched versions
Consider using a different base image if updates are unavailable

📋 Resources:

Download full report (see artifacts)
View in Security tab
Scanned with Trivy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…spec updates Bumps the openspec submodule to incorporate the linearized task completion status and spec updates from PR0 (1373), PR1 (1374), and PR2 (1375). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…flow-migration

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…#10701) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-22T14:34:56Z

🔒 Container Security Scan

Image: prowler-ui:a192ea2
Last scan: 2026-05-05 12:42:52 UTC

📊 Vulnerability Summary

Severity	Count
🔴 Critical	2
Total	2

2 package(s) affected

⚠️ Action Required

Critical severity vulnerabilities detected. These should be addressed before merging:

Review the detailed scan results
Update affected packages to patched versions
Consider using a different base image if updates are unavailable

📋 Resources:

Download full report (see artifacts)
View in Security tab
Scanned with Trivy

) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…0800) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…flow-migration # Conflicts: # ui/CHANGELOG.md # ui/dependency-log.json

…10970) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…flow-migration

…n' into PROWLER-1273/react-flow-migration

+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {


Detach the openspec submodule so the directory is managed as a local clone instead. /openspec/ remains in .gitignore so the cloned working tree is never tracked by this repo. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

chore: add prowler-openspec-opensource as git submodule

4d57f3b

Adds the openspec repository as a submodule at openspec/ for shared spec definitions used by SDD tooling across AI coding assistants. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pfe-nazaries requested a review from a team April 14, 2026 14:27

pfe-nazaries added the no-merge Please, DO NOT MERGE this PR. label Apr 14, 2026

chore: update openspec submodule with react-flow-migration proposal

6e77abe

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Pablo F.G and others added 2 commits April 14, 2026 16:43

chore: update openspec with expect-cli validation tasks

9922b15

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

chore: update openspec with restructured expect-cli tests

5c981f5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

This was referenced Apr 15, 2026

[CHAIN] refactor(ui): normalize graph edge types and remove dead code #10701

Merged

[CHAIN] refactor(ui): replace D3 graph rendering with React Flow #10705

Merged

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

Merged

Pablo F.G and others added 3 commits April 17, 2026 14:27

Merge remote-tracking branch 'origin/master' into PROWLER-1273/react-…

10a62a6

…flow-migration

chore(openspec): bump submodule to include PR4 test coverage proposal

a9427c8

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

pfe-nazaries mentioned this pull request Apr 20, 2026

[CHAIN] feat(ui): add graph export, minimap and fullscreen polish #10800

Merged

12 tasks

[CHAIN] refactor(ui): normalize graph edge types and remove dead code (…

ba84b23

…#10701) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pfe-nazaries requested review from a team as code owners April 22, 2026 14:29

github-actions Bot added the component/ui label Apr 22, 2026

pfe-nazaries mentioned this pull request May 4, 2026

[CHAIN] test(ui): add Vitest Browser test coverage for Attack Paths #10970

Merged

12 tasks

pfe-nazaries and others added 5 commits May 5, 2026 08:55

[CHAIN] refactor(ui): replace D3 graph rendering with React Flow (#10705

ff2bf5b

) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

1d54244

Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

[CHAIN] feat(ui): add graph export, minimap and fullscreen polish (#1…

a4fc230

…0800) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge remote-tracking branch 'origin/master' into PROWLER-1273/react-…

3d4f5e6

…flow-migration # Conflicts: # ui/CHANGELOG.md # ui/dependency-log.json

[CHAIN] test(ui): add Vitest Browser test coverage for Attack Paths (#…

8acbddd

…10970) Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pfe-nazaries requested a review from a team as a code owner May 5, 2026 11:38

github-actions Bot added the github_actions Pull requests that update GitHub Actions code label May 5, 2026

Merge remote-tracking branch 'origin/master' into PROWLER-1273/react-…

48882b5

…flow-migration

Merge remote-tracking branch 'origin/PROWLER-1273/react-flow-migratio…

74e5118

…n' into PROWLER-1273/react-flow-migration

github-advanced-security AI found potential problems May 5, 2026

View reviewed changes

Comment thread ui/public/mockServiceWorker.js

event.waitUntil(self.clients.claim())

})

addEventListener('message', async function (event) {

Pablo F.G and others added 2 commits May 5, 2026 14:18

fix: format

c183d5e

pfe-nazaries mentioned this pull request May 5, 2026

[CHAIN] fix(ui): re-fit attack-path viewport on filter and expand, harden minimap #11010

Open

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): replace D3+Dagre attack path graph with React Flow#10686

feat(ui): replace D3+Dagre attack path graph with React Flow#10686
pfe-nazaries wants to merge 17 commits intomasterfrom
PROWLER-1273/react-flow-migration

pfe-nazaries commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

pfe-nazaries commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Feature Complete - Chained PRs

Included PRs

Dependency Diagram

Context

Description

Rendering

Interactions

Export

Cleanup

Testing (PR4 + PR5)

Steps to review

Checklist

UI

License

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔒 Container Security Scan

📊 Vulnerability Summary

⚠️ Action Required

Uh oh!

github-actions Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔒 Container Security Scan

📊 Vulnerability Summary

⚠️ Action Required

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pfe-nazaries commented Apr 14, 2026 •

edited

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading

github-actions Bot commented Apr 22, 2026 •

edited

Loading