Diff Viewer & Proposed Change UI

The Diff Viewer and Proposed Change UI provide a visual interface for inspecting data modifications within Infrahub. This system enables users to compare differences between branches or review specific updates bundled in a Proposed Change. It integrates directly with the version control backend to display node-level additions, deletions, and updates.

The UI leverages a dual-pane layout featuring a hierarchical navigation tree and a detailed content view. It processes changes dynamically based on the current branch context or the state of a Proposed Change, such as whether it is open or merged.

Architecture and Core Components

The Diff UI is built using React and TypeScript, following an entity-based architecture where logic is separated into ui, domain, and api layers.

NodeDiff Container

The NodeDiff component serves as the primary controller for the difference visualization. It determines the source of data—either a standalone branch comparison or a specific Proposed Change—and manages the data fetching lifecycle through infinite queries.

The diagram shows how the NodeDiff component determines its data source and branch context before initiating data fetching.
Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx:28-40, frontend/app/AGENTS.md

State and Data Fetching

Data fetching utilizes useDiffTreeInfiniteQuery, which retrieves paginated results from the backend. The UI maintains synchronization with the URL via the nuqs library to track the current filter status.

• Query Parameters: Uses QSP.STATUS to filter by node status (e.g., Added, Modified, Conflict).
• Atom State: Accesses proposedChangedState via jotai to retrieve details like source branch, destination branch, and current merge state.
• Merge Logic: If a Proposed Change is in the MERGE_STATE, the UI hides destructive actions like refresh or rebase.

Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx:24-34, frontend/app/src/entities/diff/ui/node-diff/index.tsx:43-50

Diff Navigation and Visualization

The UI organizes differences into two main sections: a navigation sidebar (DiffTree) and a main content area for detailed node diffs.

Diff Tree Logic

The tree displays the hierarchy of changed nodes. To maintain context, the backend returns parent nodes even if they are unchanged. The frontend deduplicates these nodes, prioritizing entries that contain actual changes over UNCHANGED placeholders.

Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx:93-113, frontend/app/src/entities/diff/ui/node-diff/index.tsx:116-120

Conflict Resolution Handling

When the CONFLICT status is active, the system executes keepConflictNodesWithAncestors. This function ensures that any node marked with contains_conflict remains visible along with its path to the root, preventing the loss of structural context in complex trees.

The diagram illustrates the recursive process of preserving ancestor nodes when filtering for conflicts.
Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx:142-156

Backend Integration and Regeneration

The Diff UI reflects the underlying Git and artifact regeneration logic. Proposed changes trigger backend jobs to compute differences and regenerate affected artifacts.

Artifact Regeneration Gate

Infrahub uses a gate to determine when artifacts require regeneration following Git changes. This prevents unnecessary processing for unrelated repository edits.

• Query Change: Checks if the specific query_id associated with a definition has changed.
• Definition Change: Monitors modifications to the CoreArtifactDefinition node itself.
• Transform Change: Evaluates changes in the transformation logic (Jinja2 or Python transforms) and their user-declared dependencies.

Sources: dev/specs/infp-409-artifact-regen-triggers/plan.md:12-18, dev/specs/infp-409-artifact-regen-triggers/plan.md:37-45

Git Workflow and Branching

The UI status is dependent on the branch strategy. Feature branches target develop, while critical bug fixes target stable. The Diff Viewer correctly identifies these relationships to calculate branch-pair differences.

• Rebase Action: The DiffRebaseButton allows users to align their source branch with the destination branch.
• Refresh Action: The DiffRefreshButton triggers a re-computation of the diff summary from the backend.

Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx:127-133, dev/guidelines/git-workflow.md

Technical Summary

The Diff Viewer & Proposed Change UI acts as the visual frontend for Infrahub's version control capabilities. It utilizes a combination of infinite scrolling, hierarchical deduplication, and context-aware filtering to present large datasets of modifications. By integrating artifact regeneration triggers and Git branching logic, the UI ensures that users only review relevant changes while maintaining full visibility into the structural context of the infrastructure graph.

Sources: frontend/app/src/entities/diff/ui/node-diff/index.tsx, dev/specs/infp-409-artifact-regen-triggers/plan.md, frontend/app/AGENTS.md