Type graph: hide library types and show where a type comes from

[Timothee Guerin (timotheeguerin)]

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

• Library and compiler types are hidden by default. The navigation pane gets a compact toolbar with a single toggle to bring them back (or the new defaultOnlyProjectCode prop for hosts that want everything). Navigating to a hidden type — a link, ⌘⇧F, or a shared type-graph:path — still shows it, with a slim notice that the tree is not listing it, rather than a dead end.
• Every type says where it was declared: 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 (new onRevealSource prop on TypeGraph, wired by the playground to Monaco).

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@typespec/html-program-viewer@11810

npm i https://pkg.pr.new/@typespec/playground@11810

commit: 70cf8df

[github-actions]

All changed packages have been documented.

• ✅ @typespec/html-program-viewer
• ✅ @typespec/playground

Show changes

@typespec/playground - feature ✏️

Clicking the source location of a type in the type graph now selects its declaration in the editor.

@typespec/html-program-viewer - feature ✏️

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 - feature ✏️

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.

[azure-sdk-automation]

You can try these changes here

🛝 Playground	🌐 Website	🛝 VSCode Extension