Add app-graph skill#11901
Open
nicolejms wants to merge 2 commits into
Open
Conversation
Adds .github/skills/app-graph/ which renders a Radius application graph from app.bicep. Mirrors the renderer in radius-project/github-extension (Cytoscape v3 + cytoscape-dagre, Primer palette, popup with source links) and produces a self-contained HTML file plus an inline mermaid preview. Depends on 'rad graph build' (features/radius-graph branch). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new GitHub Copilot “skill” under .github/skills/app-graph/ to generate a Radius application graph from app.bicep, producing (1) an interactive HTML viewer and (2) an inline Mermaid preview based on the rad graph build artifact.
Changes:
- Introduces the
app-graphskill definition (SKILL.md) including an explicit output contract and internal workflow. - Adds a Cytoscape-based HTML template (
template/app-graph.html.tmpl) that renders nodes/edges and provides a clickable popup with source links. - Documents the expected artifact schema and rendering/mermaid conventions under
references/.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
.github/skills/app-graph/template/app-graph.html.tmpl |
New HTML template that loads Cytoscape/Dagre, embeds the graph artifact, and renders an interactive graph + popup UI. |
.github/skills/app-graph/SKILL.md |
Skill definition and end-to-end workflow for compiling/building/rendering the graph and emitting Mermaid. |
.github/skills/app-graph/references/schema.md |
Documents the JSON schema consumed by the viewer. |
.github/skills/app-graph/references/rendering.md |
Documents the renderer conventions/options and CDN dependencies. |
.github/skills/app-graph/references/mermaid.md |
Specifies rules for generating the inline Mermaid preview. |
.github/skills/app-graph/references/artifact-path.md |
Documents how to invoke rad graph build and where the artifact is written. |
Comment on lines
+148
to
+150
| <script> | ||
| // === Embedded artifact (substituted by the skill) ========================= | ||
| const GRAPH_ARTIFACT = __GRAPH_DATA__; |
Comment on lines
+144
to
+146
| <script src="https://unpkg.com/cytoscape@3/dist/cytoscape.min.js"></script> | ||
| <script src="https://unpkg.com/dagre@0.8.5/dist/dagre.min.js"></script> | ||
| <script src="https://unpkg.com/cytoscape-dagre@2/cytoscape-dagre.js"></script> |
Comment on lines
+144
to
+146
| <script src="https://unpkg.com/cytoscape@3/dist/cytoscape.min.js"></script> | ||
| <script src="https://unpkg.com/dagre@0.8.5/dist/dagre.min.js"></script> | ||
| <script src="https://unpkg.com/cytoscape-dagre@2/cytoscape-dagre.js"></script> |
Comment on lines
+225
to
+238
| for (const r of resources) { | ||
| for (const conn of (r.connections || [])) { | ||
| if (conn.direction === 'Outbound') { | ||
| const targetExists = resources.some(x => x.id === conn.id); | ||
| if (targetExists) { | ||
| elements.push({ | ||
| group: 'edges', | ||
| data: { | ||
| id: `${r.id}-->${conn.id}`, | ||
| source: r.id, | ||
| target: conn.id, | ||
| }, | ||
| }); | ||
| } |
Comment on lines
+339
to
+342
| function fileHref(path, line) { | ||
| if (!path) return null; | ||
| const lineSuffix = line ? `#L${line}` : ''; | ||
| return `${path}${lineSuffix}`; |
Comment on lines
+8
to
+19
| a self-contained HTML viewer (Cytoscape + dagre) that mirrors the | ||
| radius-project/github-extension graph renderer, opens it in the default | ||
| browser, and emits an inline mermaid preview in chat. | ||
| --- | ||
|
|
||
| # Radius Application Graph | ||
|
|
||
| Use this skill to render an interactive application graph from a Radius | ||
| `app.bicep` file. The skill compiles the Bicep, invokes `rad graph build`, | ||
| and produces a single self-contained `app-graph.html` whose renderer is | ||
| ported verbatim from `radius-project/github-extension` | ||
| (`src/content/graph-renderer.ts` + `src/content/graph-navigation.ts`). |
Comment on lines
+61
to
+63
| b. Replace the literal token `__GRAPH_DATA__` with the file | ||
| contents of `app.json` (substitute as a JSON literal — do NOT | ||
| wrap in quotes). |
Comment on lines
+13
to
+20
| append `_2`, `_3`, ... | ||
| 4. Node label = `<name><br/><shortType>` where | ||
| `shortType = resource.type.split('/').pop()`. | ||
| 5. Use rectangle shape: `id["label"]`. | ||
| 6. Edge rule (mirrors the HTML renderer): for every resource, iterate | ||
| `connections` and emit `source --> target` for each connection where | ||
| `direction === 'Outbound'` AND the target `id` is present in | ||
| `application.resources`. Use the same sanitized ids. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #11901 +/- ##
==========================================
+ Coverage 51.38% 51.70% +0.32%
==========================================
Files 698 726 +28
Lines 44037 45605 +1568
==========================================
+ Hits 22627 23582 +955
- Misses 19252 19796 +544
- Partials 2158 2227 +69 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Each node in the rendered graph now carries a Unicode icon and a
per-resource-type Primer color pair (fill + border) so the resource
types in a Radius application are visible at a glance. The legend
is now built from the resource types actually present in the graph
and shows the icon-bearing swatch + a human-readable label. The
diff-mode palette is still in the template — when a future diff mode
lands, the diff status fill/border continue to win over the type
colors so the diff signal stays dominant.
- Add TYPE_STYLES map + styleForType() with explicit entries for
Applications.Core/applications, Radius.Compute/{containers,
containerImages, gateways}, Radius.Data/{mySqlDatabases,
postgreSqlDatabases, mongoDatabases, redisCaches}, and
Radius.Security/secrets, plus provider-prefix fallbacks and a
generic 'other' bucket.
- Prefix the node label and popup title with the type icon, widen
the node to 160x60 to accommodate it.
- Replace the static diff legend in single-graph mode with a
dynamic resource-type legend computed from the rendered nodes.
- Document the palette in references/visual-style.md and link it
from SKILL.md + rendering.md. Update the relevant guardrail so
it allows additive theming while still freezing the renderer
layout, popup, and edge rules.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Radius functional test overviewClick here to see the test run details
Test Status⌛ Building Radius and pushing container images for functional tests... |
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.
Adds .github/skills/app-graph/ which renders a Radius application graph from app.bicep. Mirrors the renderer in radius-project/github-extension (Cytoscape v3 + cytoscape-dagre, Primer palette, popup with source links) and produces a self-contained HTML file plus an inline mermaid preview. Depends on 'rad graph build' (features/radius-graph branch).
Description
Please explain the changes you've made.
Type of change
Fixes: #issue_number
Contributor checklist
Please verify that the PR meets the following requirements, where applicable:
eng/design-notes/in this repository, if new APIs are being introduced.