Explore the Call Hierarchy in Theia

Having written a lot of code in Java with Eclipse, one thing that I have really been missing with TypeScript in VSCode was the call hierarchy: Show all callers of a method, then the callers of the callers etc. in a tree. This view is very useful when browsing code to get an understanding of the control flow. It answers questions like “who changed this value?” or “where does this endless recursion come from?” during debugging. It helps to estimate the impact of a refactoring and find code that could be inlined.

Unfortunately, the Language Server Protocol does not provide a service for the call hierarchy. So developers like me end up using find references repeatedly, getting a new context each time and becoming increasingly annoyed by the embedded reference widget.

Looking at the problem more closely, the LSP seems to provide all services needed to compute such a call hierarchy try. Definition brings you from a reference to its definition. Filtering the result of documentSymbols to yields all candidates for callers within a document. References does the actual work.

So with a bit of glue logic, we have implemented a call hierarchy in Theia. Watch it in action:

The call hierarchy currently works with TypeScript and the external Go extension. The implementation is generic and can be easily reused and adapted to all oddities of your language server. It is completely implemented on the client side, but we might propose a language server extension to move it to the server in the future.

Originally published at typefox.io on March 8, 2018.