Render affected artifacts as dependency graph roots

[nicksan222]

What this fixes

Dependency vulnerability graphs currently begin at the synthetic “Your application” node. That hides which artifacts actually contain the vulnerable dependency path, especially when the same path belongs to several artifacts.

This change renders every affected artifact as an entry point into the graph and connects each one to the shared dependency path.

Design

• Build one graph path per unique artifact from the vulnerability’s existing artifacts relation. The paths are sorted for deterministic layout and merged through the existing tree conversion, so shared dependency nodes are not duplicated.
• Keep the synthetic root in the view model, where it is still useful for traversal and risk propagation, but omit it from layout when all of its children are artifact nodes. Graphs without artifact metadata retain their current root behavior and highlighting.
• Allow the graph to highlight multiple paths. Highlight adjacency is calculated once when the paths change, making each edge lookup constant time even with many artifacts.
• Keep VEX rules component-based by removing synthetic root and artifact entries from edge selections. Structural nodes themselves cannot create node rules, preventing rules that have no effect.
• Strip the internal artifact: identifier prefix only when formatting labels. Empty artifact names use the existing “Default” terminology.

Tests

• Added coverage for several artifacts sharing one dependency path.
• Added coverage proving artifact nodes replace the synthetic rendered root.
• Added artifact label formatting coverage, including the default artifact.
• Added VEX path-pattern coverage for artifact-rooted paths and structural node selections.
• bun test src/hooks/useCreateVexRule.test.ts src/utils/dependencyGraphHelpers.test.ts src/utils/common.test.ts
• npm run build

Fixes l3montree-dev/devguard#2416

[nicksan222]

[Copilot]

Pull request overview

Updates the dependency vulnerability graph rendering so that affected build artifacts appear as the entry points (roots) into the graph instead of always starting from the synthetic “Your application” root node, improving clarity when multiple artifacts share the same vulnerable dependency path.

Changes:

• Render artifact nodes as layout roots when the dependency tree’s direct children are artifacts, while still keeping the synthetic root in the view model for traversal/risk propagation.
• Extend graph highlighting to support multiple highlighted paths (one per artifact) instead of a single path.
• Improve artifact label formatting by stripping the internal artifact: prefix and mapping empty artifact names to “Default”, with added tests.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/utils/dependencyGraphHelpers.ts	Renders artifact children as layout roots and reuses a shared visited set for deterministic merged layout.
src/utils/dependencyGraphHelpers.test.ts	Adds coverage for shared dependency paths across multiple artifact roots and root rendering behavior.
src/utils/common.ts	Formats artifact: identifiers for display (strip prefix; empty becomes “Default”).
src/utils/common.test.ts	Adds tests for artifact label formatting behavior in beautifyPurl.
src/components/DependencyGraph.tsx	Changes highlight handling from a single path to multiple paths and updates edge highlighting logic.
src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/assets/[assetSlug]/refs/[assetVersionSlug]/dependency-risks/[vulnId]/page.tsx	Builds per-artifact graph paths and wires them into the graph + highlighting props.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.