Type graph: hide library types and show where a type comes from - #11810
Open
Timothee Guerin (timotheeguerin) wants to merge 2 commits into
Open
Type graph: hide library types and show where a type comes from#11810Timothee Guerin (timotheeguerin) wants to merge 2 commits into
Timothee Guerin (timotheeguerin) wants to merge 2 commits into
Conversation
commit: |
Contributor
|
All changed packages have been documented.
Show changes
|
|
You can try these changes here
|
Hide the compiler and library types behind a toolbar toggle, and show where a type is declared and let the host reveal it in its editor. Fixes Azure/typespec-azure#1904
Timothee Guerin (timotheeguerin)
force-pushed
the
type-graph-viewer-upgrades
branch
from
September 2, 2026 14:31
111b7a5 to
70cf8df
Compare
Timothee Guerin (timotheeguerin)
changed the title
Timothee Guerin (timotheeguerin)
marked this pull request as ready for review
September 3, 2026 17:27
Timothee Guerin (timotheeguerin)
requested review from
catalinaperalta,
iscai-msft,
Laurent Mazuel (lmazuel) and
Mark Cowlishaw (markcowl)
as code owners
September 3, 2026 17:27
Copilot started reviewing on behalf of
Timothee Guerin (timotheeguerin)
September 3, 2026 17:28
View session
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
There are a few small but user-facing typos in new changelog/doc comments that should be corrected before merging.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR improves the type graph experience in @typespec/html-program-viewer and wires it up in the @typespec/playground so users can focus on their own API types and quickly see (and optionally navigate to) where a type was declared.
Changes:
- Hide compiler/library namespaces in the type graph navigation tree by default, with a toolbar toggle and “hidden by filter” notice for deep-linked library types.
- Add a “type origin” badge to type view showing whether a type comes from user code, standard library, or a library (including file + line when available).
- Add an
onRevealSourcecallback path from the playground host through output-viewers to select/reveal the declaration in Monaco.
File summaries
| File | Description |
|---|---|
| packages/playground/src/react/types.ts | Extends OutputViewerProps with onRevealSource callback type. |
| packages/playground/src/react/playground.tsx | Wires onRevealSource to Monaco selection/reveal behavior. |
| packages/playground/src/react/output-view/type-graph-viewer.tsx | Passes onRevealSource through to the TypeGraph component. |
| packages/playground/src/react/output-view/output-view.tsx | Threads onRevealSource through OutputView component layers. |
| packages/html-program-viewer/src/react/use-tree-navigation.tsx | Implements project-only filtering, toggling state, and “selection hidden” behavior; exports helpers for tests. |
| packages/html-program-viewer/src/react/type-view/type-view.tsx | Adds the new TypeOrigin badge into the type header UI. |
| packages/html-program-viewer/src/react/type-view/type-view.module.css | Header layout tweaks (wrap/gap) to accommodate the new origin badge. |
| packages/html-program-viewer/src/react/type-view/type-origin.tsx | New component to compute and display a type’s origin + optional reveal action. |
| packages/html-program-viewer/src/react/type-view/type-origin.test.tsx | Unit tests covering origin labeling, location display, and reveal behavior. |
| packages/html-program-viewer/src/react/type-view/type-origin.module.css | Styling for origin badge and reveal button hover/focus. |
| packages/html-program-viewer/src/react/type-graph.tsx | Adds defaultOnlyProjectCode/onRevealSource, “hidden by filter” notice, and provides reveal context. |
| packages/html-program-viewer/src/react/type-graph.module.css | Moves scrolling responsibility to the tree container; adds styling for the hidden-by-filter notice. |
| packages/html-program-viewer/src/react/type-filter.ts | New cached predicate for “is project type” determination. |
| packages/html-program-viewer/src/react/tree-navigation.tsx | Adds a compact toolbar with a toggle to show/hide library types. |
| packages/html-program-viewer/src/react/tree-navigation.module.css | Layout/styling for the new tree navigation toolbar and scroll container. |
| packages/html-program-viewer/src/react/tree-filter.test.tsx | Tests for filtered vs full tree behavior, default behavior, toggle, and hidden selection messaging. |
| packages/html-program-viewer/src/react/reveal-source-context.ts | New context for wiring host “reveal source” behavior into the UI. |
| packages/html-program-viewer/src/react/list-type-view/list-type-view.tsx | Improves empty state when project-only filter hides all types; offers “Show everything”. |
| packages/html-program-viewer/src/react/list-type-view/list-type-view.module.css | Adds styling for the new empty-state layout. |
| .chronus/changes/type-graph-type-origin-2026-9-1-12-0-2.md | Changelog entry for type-origin badge + reveal support. |
| .chronus/changes/type-graph-only-my-code-2026-9-1-11-42-0.md | Changelog entry for default project-only tree filter + toggle. |
| .chronus/changes/playground-type-graph-reveal-source-2026-9-1-13-30-0.md | Changelog entry for playground wiring of reveal-to-editor. |
Review details
- Files reviewed: 22/22 changed files
- Comments generated: 5
- Review effort level: Lite
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| - "@typespec/html-program-viewer" | ||
| --- | ||
|
|
||
| Hide the types coming from the compiler standard library and the loaded libraries from the type graph navigation tree. They can be shown again with the new toolbar button of the navigation pane, or by default with the new `defaultOnlyProjectCode` prop. Navigating to one of those types(from a link or a saved path) still shows it, with a notice that the tree does not list it. |
| - "@typespec/html-program-viewer" | ||
| --- | ||
|
|
||
| Show where a type was declared(your code, the standard library or a library) in the type view, with its file and line. When the host provides the new `onRevealSource` callback, clicking the badge of a type declared in your code reveals its declaration. |
Comment on lines
+3
to
+6
| /** | ||
| * Create a predicate telling whether a type was declared in the user project(as opposed to the compiler standard library or a library). | ||
| * Results are cached as the same type is likely to be queried multiple times when building the type graph. | ||
| */ |
Comment on lines
+34
to
+37
| /** | ||
| * Called when the user clicks the source location of a type declared in their code. | ||
| * Provide it when the host can reveal that location(e.g. an editor showing the project files). | ||
| */ |
Comment on lines
+75
to
+79
| const relative = path.slice(index + marker.length); | ||
| const segments = relative.split("/"); | ||
| // Drop the package name(`@scope/name` or `name`) to keep the path relative to the package root. | ||
| return segments.slice(segments[0].startsWith("@") ? 2 : 1).join("/"); | ||
| } |
The breadcrumb bar only set overflow-y, which per spec makes overflow-x compute to auto too, so a long path showed a horizontal scrollbar and the taller search combobox a vertical one. Only scroll horizontally, without a scrollbar, and keep the selected node in view. Also fix the missing spaces before parentheses reported in review.
Copilot started reviewing on behalf of
Timothee Guerin (timotheeguerin)
September 3, 2026 17:56
View session
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
The project-type predicate cache is currently incorrect for false values and one changeset filename includes an invalid timestamp segment (2026-0-...).
Review details
Suppressed comments (2)
Previously missed (2) — in code that hasn't changed since the last review.
packages/html-program-viewer/src/react/type-filter.ts:13
- createIsProjectTypePredicate() cache check treats
falseas a cache miss (cache.get()returnsfalse, which is!== undefined), so non-project types will be recomputed every time. Usecache.has()(or a sentinel) to correctly cache bothtrueandfalse.
.chronus/changes/type-graph-breadcrumb-scroll-2026-0-24-0-0-0.md:1 - The changeset filename
type-graph-breadcrumb-scroll-2026-0-24-0-0-0.mdcontains an invalid timestamp segment (2026-0-...uses month 0). Other changesets in this PR use 1-based months (e.g.2026-9-...), so this looks like a typo and can make changelog history confusing or tooling brittle; please rename/regenerate this changeset with a valid date segment.
- Files reviewed: 25/25 changed files
- Comments generated: 0 new
- Review effort level: Lite
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.
The type graph opens on a wall of
TypeSpec,Reflection,Http,Azure.*… namespaces, and your own service is one line lost in the middle. Once you find a type there is also no way to tell where it came from, or to get back to it in the editor.Fixes Azure/typespec-azure#1904
defaultOnlyProjectCodeprop for hosts that want everything). Navigating to a hidden type — a link,⌘⇧F, or a sharedtype-graph:path— still shows it, with a slim notice that the tree is not listing it, rather than a dead end.Your code main.tsp:5,@typespec/http lib/main.tsp:51,Standard library. In the playground, clicking that badge on your own types selects the declaration in the editor (newonRevealSourceprop onTypeGraph, wired by the playground to Monaco).