Everybody loves a good web UI.
Kythe indexers produce a rich set of data about analyzed source files. They
also produce a lot of data, which means that sometimes it can be hard to
understand exactly where the edges and nodes are connected or even what nodes
exist. One way to help visualize the data better is to provide a web UI for
browsing the set of files indexed. The Kythe team has provided a sample
implementation of one such UI as an example.
[Chromium’s Code Search browser is another example of a UI using similar data from Google’s internal version of Kythe.]
We currently host our sample web UI at https://xrefs-dot-kythe-repo.appspot.com/ based on Kythe’s own Java and C++ source code and would like to invite everyone to explore it. We trust that this UI example will help show the depth of analysis that Kythe can provide and how its language-agnostic schema is a useful abstraction for building tools for programming languages (including web UIs).
Current Features of the Sample Web UI:
All surfaced data is based on the contents of a GraphStore
Filetree pane to browse all files by path, separated by their corpus roots
Source code decorated with links for each known anchor node
Clicking a file decoration opens a pane to view the edges of the anchor’s target node
Clicking an anchor’s node kind in the edges pane will jump to that anchor’s source location, possibly in another file
This simple list of features allows for some surprisingly deep introspection of source code. For instance, one can jump to a node’s definition or any location where it is referenced to provide an experience similar to the Linux Cross Reference service. Likewise, there are also Kythe edges to describe type relationships, parent-child relationships, inheritance trees, macro expansion, and more.
Kythe indexers emit many useful edges. By clicking on the
JsonUtil class name
36 of kythe/java/com/google/devtools/kythe/util/JsonUtil.java, one can see even
JsonUtil Java class has the following edges:
definition anchor location for
%edge kind prefix means that the edge is a mirror of an edge without the kind prefix. That is,
/kythe/edge/childofedges lead to a node’s parents and their mirrors,
%/kythe/edge/childofedges, lead to a node’s children.]
anchor locations of
JsonUtil(i.e. methods, fields, inner classes, etc.)
associated name of the
semantic nodes that have
JsonUtilas a parameter (in this case, where
JsonUtilis used a part of a function tapp type)
By clicking on
61 of kythe/cxx/common/CommandLineUtils.h, one can see some other simple
examples of edges from C++'s perspective:
These examples are just a taste of the data exposed in our sample web UI. With other specialized interfaces such as the Kythe command-line, Kythe’s data can lead to some very useful tools for viewing, editing, and grokking source code across multiple languages.