Design app graph by nithyatsu · Pull Request #11681 · radius-project/radius

nithyatsu · 2026-04-17T18:38:41Z

Description

Please explain the changes you've made.

Type of change

This pull request fixes a bug in Radius and has an approved issue (issue link required).
This pull request adds or changes features of Radius and has an approved issue (issue link required).
This pull request is a minor refactor, code cleanup, test improvement, or other maintenance task and doesn't change the functionality of Radius (issue link optional).

Fixes: #issue_number

Contributor checklist

Please verify that the PR meets the following requirements, where applicable:

An overview of proposed schema changes is included in a linked GitHub issue.
- Yes
- Not applicable
A design document PR is created in the design-notes repository, if new APIs are being introduced.
- Yes
- Not applicable
The design document has been reviewed and approved by Radius maintainers/approvers.
- Yes
- Not applicable
A PR for the samples repository is created, if existing samples are affected by the changes in this PR.
- Yes
- Not applicable
A PR for the documentation repository is created, if the changes in this PR affect the documentation or any user facing updates are made.
- Yes
- Not applicable
A PR for the recipes repository is created, if existing recipes are affected by the changes in this PR.
- Yes
- Not applicable

Synthesized from: - github-demo branch implementation (rad graph build, browser extension, CI workflow) - willtsai/radius feature spec (user scenarios, personas, UX flows) - Design template structure (eng/design-notes/templates/design-template.md) Added sections: user experience, architecture diagram, detailed design for all 4 components, error handling, test plan, security, compatibility, monitoring, development plan, open questions, alternatives considered.

- Link orphan branch pattern to GitHub Actions Workspace design - Document gitstate package reuse opportunity - Detail run-time graph persistence via rad shutdown - Expand alternatives table with cache/artifacts options - Update open question on rad shutdown integration

nithyatsu · 2026-04-20T21:01:11Z

+* A **browser extension** that injects interactive graph visualizations into GitHub repository pages and pull requests.
+* A **CI/CD pipeline** that automatically builds graph artifacts on every push and PR.
+* A **diff visualization** that highlights added, removed, and modified resources when reviewing pull requests.
+


Of these, the browser extension will not be committed to main, since it was used for demo only.

nithyatsu · 2026-04-20T21:14:59Z

+#### Scenario 3: Interactive navigation from graph to code
+
+A developer clicks on a node in the graph (e.g., "cache") and sees a popup with links to: (1) the source code file referenced by the `codeReference` property, and (2) the `app.bicep` line where the resource is declared.
+


This corresponds to what we have today in the github-demo branch. Should we enhance this user story to support deep link into application code? If so, we have to capture it in a user story. Also, we have to make sure the implementation is robust for complex app definitions.

nithyatsu · 2026-04-20T21:16:25Z

+A developer clicks on a node in the graph (e.g., "cache") and sees a popup with links to: (1) the source code file referenced by the `codeReference` property, and (2) the `app.bicep` line where the resource is declared.
+
+## User Experience
+


@willtsai to confirm if the UX details look OK.

nithyatsu · 2026-04-20T21:17:21Z

+2. Computes the diff using `computeGraphDiff()`.
+3. Renders a color-coded graph below the PR description with a legend.
+4. Shows a "waiting for CI" message if the head artifact hasn't been built yet.
+


We will not be committing any of the browser extension code to main repo.

nithyatsu · 2026-04-20T21:31:14Z

+```
+
+The diffHash enables the browser extension to classify resources as modified vs unchanged without comparing all properties.
+


We will retain the diffHash to be consumed by the UI which would replace browser extension.

nithyatsu · 2026-04-20T23:32:46Z

+4. **Compute diffHash:** For each resource, extract "authorable" properties (excluding `application`, `environment`, internal IDs), canonicalize as JSON, and hash with BLAKE2b including `dependsOn`.
+5. **Add inbound connections:** For each outbound connection A→B, add a corresponding inbound connection B←A.
+6. **Sort:** Sort resources by ID for deterministic output.
+


Mapping source lines might need a new approach if we are deep linking. Should we merge what we have for now, and add an item to backlog for researching deep-link ability?

nithyatsu · 2026-04-20T23:52:23Z

+No server-side changes are required for the static graph feature. The existing `getGraph` API on `Applications.Core/applications` continues to serve the run-time graph.
+
+Future work may add the `diffHash`, `appDefinitionLine`, and `codeReference` fields to the server-side `ApplicationGraphResponse` TypeSpec definition to enable a unified schema.
+


Should we take care of this now, as part of merge to main efforts and add these properties as optional to graph schema?

nithyatsu · 2026-04-20T23:53:05Z

+  --bicep string           Path to the Bicep application definition file (default "app.bicep")
+  --orphan-branch string   Orphan branch name for storing graph artifacts (default "radius-graph")
+  --source-branch string   Branch name to use as the artifact directory (default: current branch)
+```


Should the --source-branch be optional and default to current branch?

nithyatsu · 2026-04-21T00:30:16Z

+| **Phase 3: Browser extension — repo tab** | "Application graph" tab on repo root, Cytoscape rendering | P0 |
+| **Phase 4: Browser extension — PR diff** | Diff computation, color-coded PR graph, navigation popups | P0 |
+| **Phase 5: Authentication** | GitHub App device flow, PAT support | P0 |
+| **Phase 6: Deployed graph visualization** | Browser extension page showing live deployment state | P1 |


Should we add a task to document Phase 5 / authentication setup?

nithyatsu added 2 commits April 17, 2026 11:16

github-actions Bot mentioned this pull request Apr 18, 2026

Causinator 9000 CI Failure Digest — 2026-04-11 #11633

Closed

nithyatsu commented Apr 20, 2026

View reviewed changes

Comment thread eng/design-notes/resources/2026-04-app-graph.md Resolved

nithyatsu commented Apr 20, 2026

View reviewed changes

nithyatsu commented Apr 21, 2026

View reviewed changes

nithyatsu closed this Apr 21, 2026

Navigation Menu

Repository navigation

Design app graph - #11681

Design app graph#11681
nithyatsu wants to merge 2 commits into
radius-project:mainfrom
nithyatsu:design-update-app-graph

nithyatsu commented Apr 17, 2026

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

Uh oh!

nithyatsu Apr 20, 2026 •

edited

Loading

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

nithyatsu Apr 20, 2026 •

edited

Loading

Uh oh!

nithyatsu Apr 20, 2026

Uh oh!

nithyatsu Apr 21, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		#### Scenario 3: Interactive navigation from graph to code

		A developer clicks on a node in the graph (e.g., "cache") and sees a popup with links to: (1) the source code file referenced by the `codeReference` property, and (2) the `app.bicep` line where the resource is declared.

		A developer clicks on a node in the graph (e.g., "cache") and sees a popup with links to: (1) the source code file referenced by the `codeReference` property, and (2) the `app.bicep` line where the resource is declared.

		## User Experience

		```

		The diffHash enables the browser extension to classify resources as modified vs unchanged without comparing all properties.

		No server-side changes are required for the static graph feature. The existing `getGraph` API on `Applications.Core/applications` continues to serve the run-time graph.

		Future work may add the `diffHash`, `appDefinitionLine`, and `codeReference` fields to the server-side `ApplicationGraphResponse` TypeSpec definition to enable a unified schema.

Conversation

nithyatsu commented Apr 17, 2026

Description

Type of change

Contributor checklist

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nithyatsu Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

nithyatsu Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nithyatsu Apr 20, 2026 •

edited

Loading

nithyatsu Apr 20, 2026 •

edited

Loading