Skip to content

feat: web explorer web three way nav#1706

Open
megha-narayanan wants to merge 5 commits into
aws:feat/cdk-explorerfrom
megha-narayanan:feat/explorer-web-three-way-nav-clean
Open

feat: web explorer web three way nav#1706
megha-narayanan wants to merge 5 commits into
aws:feat/cdk-explorerfrom
megha-narayanan:feat/explorer-web-three-way-nav-clean

Conversation

@megha-narayanan

@megha-narayanan megha-narayanan commented Jul 6, 2026

Copy link
Copy Markdown

A full cdk explore UI over the synthesized assembly. Builds on #1624.

Features

  • Three panes: construct tree, source, template, with syntax highlighting for all CDK source languages (TypeScript, JavaScript, Python, Java, C#, Go)
  • Template pane: JSON/YAML toggle
  • Linked navigation by double-click: tree → source + template, template → source, and source → template
  • Violations panel grouped by rule (click an occurrence to jump to its construct), inline diagnostic squiggles in the source pane, and severity coloring in the tree (inherited up to ancestors)
  • Resizable split panes and an "Open" file picker for either pane

Design decisions

  • Custom line renderer over PrismJS tokens, not Prism's HTML. syntax.ts calls Prism.tokenize and flattens the token tree into per-line token arrays (Prism tokens can straddle newlines). CodeViewer then renders each line itself, which is what lets one component compose four things per line: syntax colors, the nav-highlight band, scroll-to-line, and column-accurate diagnostic squiggles. Prism's string output can't be sliced per line or overlaid with diagnostics.
  • PrismJS grammars, not a full editor/highlighter. This bundles into the shipped CLI via esbuild, so Monaco-scale dependencies are probably too big. Prism core plus JSON, YAML, and the CDK source languages keeps it small, and one CodeViewer serves both panes.
  • Navigate by logical ID, not line numbers. JSON and YAML render at different lines, so navigation carries only the logical ID and the template viewer resolves the highlight line in whichever format is on screen.
  • Source → template is nearest-preceding, ties to the top-most construct. Synthesized children share their parent's single creation line (every subnet/NAT under a new ec2.Vpc(...)), so a click there resolves to the authored parent, not a child.
Screenshot 2026-07-06 at 12 08 28 PM

Checklist

  • This change contains a major version upgrade for a dependency and I confirm all breaking changes are addressed
    • Release notes for the new version:

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license

… tree, source, and template

Double-click a construct or violation occurrence to view its source file
(left pane) and synthesized template block (right pane) side-by-side.
Navigation highlights the target lines with a fading color overlay and
scrolls both panes to top. A file picker in each pane header allows
opening arbitrary project files.

- Add resolveAllResourceRanges to cloud-assembly-api (single-parse batch)
- Add GET /api/template endpoint returning content + per-resource line
  ranges, property ranges, and source locations
- Add CodeViewer component with line numbers, highlight, and scroll
- Wire double-click on ConstructTree and ViolationsPanel to navigate
- Cache assembly reads with 2s TTL to avoid redundant disk I/O
- Remove FilePane (replaced by navigation-driven CodeViewer)
…nostics, and app path

- Add PrismJS-based syntax highlighting for TypeScript, JSON, and YAML
  in the code viewer (~12KB bundle cost)
- Add squiggly underlines for policy violations in the source pane,
  colored by severity (error/warning/info)
- Create TemplateViewer component that displays templates as YAML by
  default with a JSON/YAML toggle
- Add collapsible resource sections in the template view with
  Collapse All / Expand All controls
- Show the CDK app directory path in the page header via GET /api/info
- Add js-yaml and prismjs as devDependencies
…e double-click

- Add source→template navigation: double-click a line in the source pane
  to jump to the resource it produces in the template pane
- Fix template highlight coordinates: TemplateViewer now resolves highlights
  from logicalId using its own display-format resources (JSON or YAML),
  eliminating the JSON-line-in-YAML-view mismatch
- Replace js-yaml + regex-based YAML remapping with the `yaml` package's
  AST parser (parseDocument + LineCounter) for robust resource range resolution
- Remove per-property line ranges from the API (block-level highlight only)
- Add source-nav.ts: builds a per-file anchor index from the construct tree
  for efficient source-line-to-construct lookups
@github-actions github-actions Bot added the p2 label Jul 6, 2026
@aws-cdk-automation aws-cdk-automation requested a review from a team July 6, 2026 18:28
@megha-narayanan megha-narayanan marked this pull request as ready for review July 6, 2026 18:49
…view

The gutter fold markers were computed but never wired into CodeViewer, so collapsing never worked. Removes the collapse state, Collapse/Expand All buttons, collapseContent, and the line-adjustment helpers; the YAML/JSON toggle stays.
Adds Java, C#, and Go grammars alongside TypeScript, JavaScript, Python, JSON, and YAML, and extracts a shared Language type. detectLanguage maps each source extension.
@megha-narayanan megha-narayanan force-pushed the feat/explorer-web-three-way-nav-clean branch from 03968c6 to a27c8e5 Compare July 6, 2026 19:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant