More clear hierarchy in the trace view

[drolando]

Currently it's very difficult to tell whether 2 spans are siblings, parent - child or from 2 different subtrees. It's doable in small traces, but as you start having hundreds of spans it's hard to visually track the hierarchy.

The service name boxes (not sure how to call them) on the left kind of show the hierarchy, but they don't go very deep and it's still hard to tell whether 2 boxes with ~50 spans between them are at the same depth in the tree or not and whether they're actually related.

In my opinion it'd be useful to have even just something like ascii -- and | visually drawing the tree and connecting the spans.

example:

get /homepage
|-- select * from users
|-- get /is_user_authorized
|    |-- get /session_token
|         |-- select token from session_db;
|         |---- memcache set
|----------- update cookies
|----------- render template

Hopefully with CSS and Javascript you can come up with a better solution than my terrible ascii tree.

cc @zeagord

[tacigar]

I think it is difficult to draw a vertical line over multiple <div>.
haystack-ui use <svg> for trace view, so they can draw lines flexibly in the vertical direction...
https://github.com/ExpediaDotCom/haystack-ui/blob/ee08389ba9d269eb19094c6c72d4d6c98baec964/src/components/traces/details/timeline/span.jsx#L203-L221

↓ haystack-ui