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

    • No cheating by browsing the Kythe git repository directly or calling out to other tools

    • Data is transformed into protobuf lookup tables to provide efficient access

  • 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 on line 36 of kythe/java/com/google/devtools/kythe/util/JsonUtil.java, one can see even the simple JsonUtil Java class has the following edges:

%/kythe/edge/defines

definition anchor location for JsonUtil
[The % edge kind prefix means that the edge is a mirror of an edge without the kind prefix. That is, /kythe/edge/childof edges lead to a node’s parents and their mirrors, %/kythe/edge/childof edges, lead to a node’s children.]

%/kythe/edge/ref

anchor locations of JsonUtil references

/kythe/edge/childof

parents of JsonUtil (i.e. the file and package to which the JsonUtil class belongs)

%/kythe/edge/childof

children of JsonUtil (i.e. methods, fields, inner classes, etc.)

/kythe/edge/named

associated name of the JsonUtil class

%/kythe/edge/param

semantic nodes that have JsonUtil as a parameter (in this case, where JsonUtil is used a part of a function tapp type)

By clicking on GCCArgsToClangArgs on line 61 of kythe/cxx/common/CommandLineUtils.h, one can see some other simple examples of edges from C++'s perspective:

%/kythe/edge/completes

anchor location of definitions for the GCCArgsToClangArgs function

/kythe/edge/typed

associated nodes for the type structure of GCCArgsToClangArgs

/kythe/edge/param

declared parameters of GCCArgsToClangArgs

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.