[CHAIN] feat(ui): add attack paths node visual mapper#11013
Merged
Alan-TheGentleman merged 6 commits intoPROWLER-1273/react-flow-migrationfrom May 7, 2026
Merged
Conversation
The Attack Path graph now re-fits its viewport when the user enters
the filtered view (click on a finding) or returns to the full graph
("Back to Full View"), so the focused subgraph and the restored
full graph are always centered instead of leaving the viewport
pointing at the previous coordinates. Resource expansion no longer
re-fits — the initial fit already includes hidden findings, so newly
revealed nodes sit inside the framing the user already has.
The minimap viewport indicator (mask cut-out) is darkened and given
a thicker border to stand out against the dark theme, where it was
previously hard to see.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ings Recover the expand-time auto-fit lost while smoothing the filter fix. Hidden findings are not measured by React Flow on initial render, so `fitViewOptions.includeHiddenNodes` cannot extend the initial viewport to cover them — clicking a resource that has its findings laid out beyond the framed area would leave the user with empty space and no way to discover the newly revealed nodes. The expand-fit only fires for resources that just transitioned from collapsed to expanded, and only when at least one of the connected findings sits entirely past the current viewport (full bounding box beyond the edge). Partially clipped edge nodes are left alone so the framing the user already has is preserved when nothing has actually moved off-screen. Auto-fits now use asymmetric padding (extra room on the right and bottom) to keep the minimap clear after a fit. Without it, fitted nodes could land underneath the bottom-right minimap and become unclickable. The expand-without-re-fit test was a lock-in for the previous behaviour and is replaced with one asserting the new behaviour: expanding resources whose findings sit off-screen re-fits the viewport. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Restore supported graph scroll zoom behavior - Add node action selector for ambiguous resource clicks - Open finding and node details in existing drawers - Cover resource actions with browser tests
- Reuse shared measured-fit scheduling for graph viewport updates - Consolidate node action dialog state - Tighten browser harness dialog detection
- Add typed resolver for graph node visual metadata - Reuse existing service icons for known resource labels - Cover exact, alias, and fallback mappings with tests
12 tasks
pfe-nazaries
reviewed
May 6, 2026
Contributor
There was a problem hiding this comment.
I would add a test like this to cover all icons
describe("known node mappings", () => {
it.each([
["AWSAccount", NODE_CATEGORY.ACCOUNT, "AWS Account", AWSAccountIcon],
["S3Bucket", NODE_CATEGORY.STORAGE, "S3 Bucket", AmazonS3Icon],
["S3", NODE_CATEGORY.STORAGE, "S3", AmazonS3Icon],
["VPC", NODE_CATEGORY.NETWORK, "VPC", AmazonVPCIcon],
["Subnet", NODE_CATEGORY.NETWORK, "Subnet", Network],
["SecurityGroup", NODE_CATEGORY.NETWORK, "Security Group", Network],
["InternetGateway",NODE_CATEGORY.NETWORK, "Internet Gateway", Globe2],
["DefaultGateway", NODE_CATEGORY.NETWORK, "Default Gateway", Globe2],
["EC2Instance", NODE_CATEGORY.COMPUTE, "EC2 Instance", AmazonEC2Icon],
["VirtualMachine", NODE_CATEGORY.COMPUTE, "Virtual Machine", AmazonEC2Icon],
["Compute", NODE_CATEGORY.COMPUTE, "Compute", Server],
["NIC", NODE_CATEGORY.COMPUTE, "NIC", Server],
["IAMUser", NODE_CATEGORY.IDENTITY, "IAM User", AWSIAMIcon],
["IAMRole", NODE_CATEGORY.IDENTITY, "IAM Role", AWSIAMIcon],
["ServiceAccount", NODE_CATEGORY.IDENTITY, "Service Account", UserRound],
["AccessKey", NODE_CATEGORY.SECRET, "Access Key", KeyRound],
["Secret", NODE_CATEGORY.SECRET, "Secret", KeyRound],
] as const)("maps %s to %s with %s", (label, category, description, Icon) => {
const visual = resolveNodeVisual(buildNode([label]));
expect(visual).toMatchObject({ category, description, fallbackUsed: false });
expect(visual.Icon).toBe(Icon);
});
});
`
Contributor
Author
There was a problem hiding this comment.
Added in 6c023affa and propagated through the chained branches up to #11020. I adapted the expected icons to the mappings that exist in each chain slice so the test matches the actual implementation at that point in the stack.
pfe-nazaries
approved these changes
May 6, 2026
12 tasks
Base automatically changed from
PROWLER-1273/fix-graph-viewport-and-minimap
to
PROWLER-1273/react-flow-migration
May 7, 2026 15:19
49aa3c1
into
PROWLER-1273/react-flow-migration
3 checks passed
Alan-TheGentleman
added a commit
that referenced
this pull request
May 8, 2026
Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Part of Chained PRs
PROWLER-1273/react-flow-migrationChain Overview
Context
This continues the Attack Paths React Flow chain by introducing a single semantic resolver for graph node visuals. The goal is to stop scattering label/icon/category decisions across components before rendering richer node icons.
Description
Changes:
resolveNodeVisual()to centralize node category, display name, description, and icon resolution.Steps to review
_lib/node-visuals.tsas the visual contract for graph nodes.pnpm exec vitest run --project unit "app/(prowler)/attack-paths/(workflow)/query-builder/_lib/node-visuals.test.ts"fromui/.Checklist
Community Checklist
UI
License
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.