Trace - Indent guides in span-name column to indicate span ancestry

[tiffon]

It may be helpful to test some of these designs with applications that have many internal spans. The hot rod application doesn't have too many levels of indentation and uses several different "application tracers" resulting in spans that are more visually legible. Here is a short segment from a trace in our infra::

Since everything is in the same service and there are several levels of indentation, it is very hard to see what elements are children of the others.

A couple suggestions:

1. Add guidelines down each indentation level like code editors do for whitespace
   

2. When a parent is hovered, every element that is a child of that element should have some sort of hover state. At the very least, the first and last child should have some marker. I would suggest just extending that hover state down to cover its children (mockup based on posted screenshots):
   

Aside from that, the screenshots posted here look great.

The approach that initially comes to mind is to have low-contrast, persistent indent guides visible at all times and to highlight the relevant indent guides on hover (e.g. ancestors of the span the mouse is over). In the screenshot below, the all of the indent guides of the return statement and subsequent lines would still be visible, but they would be the low-contrast variation instead of emphasized with orange.

[black-adder]

+1 for guidelines

[tiffon]

Fixed in #297.