[trace view] Different color for spans from different instances of the same service

[sfriberg]

Requirement - what kind of business use case are you trying to solve?

Easy interpretation of larger applications with multiple internal spans from different components.

Problem

Spans from the same service all have the same color, making it hard to easily and visually separate which component inside the service the span is related to.

Proposal

Extend the existing color generator to also allow different coloring of spans with different values in the component tag.

Perhaps a two color scheme would make sense where the line (edge of the rectangle) would have the service color, and then you would have a component color as the fill.

    /**
     * COMPONENT is a low-cardinality identifier of the module, library, or package that is instrumented.
     */
    public static final StringTag COMPONENT = new StringTag("component");

Any open questions to address

[rneha725]

Hi, I want to work on this.

[tiffon]

@rneha725 Fantastic! Please do. Contributions are definitely welcomed!

We've been thinking it would be great to refine this aspect of the UI.

To that end, I was brainstorming a bit this weekend about how the Span & Operation name column, in the trace timeline, could be made a bit easier to read.

Here is the exploration:

I'm not sure if this is the right approach, it was just a bit of cleanup I wanted to try out.

Client spans are marked with the arrow to the right. Server spans and process boundaries are emphasized in blue. Sub-spans that are the same process as their closest ancestor have the service name deemphasized.

Also, I don't think the screenshot actually addresses the OP, the screenshot is just somewhat-related.

[rneha725]

hi @tiffon thanks for responding, this task can be broken down. For better clarity to the reader of the spans, service color can be added , yes!. For the changes you are suggesting I am not clear. Please explain a little bit more. .I will be needing more suggestions on this topic.

[sfriberg]

Played a bit with CSS to see what would be possible and so far what seems to be the clearest way to visualize it is using a horizontal gradient.

      <div
        aria-label={label}
        className="SpanBar--bar"
        style={{
          background: `linear-gradient(
            to bottom,
            ${color},
            ${color} 70%,
            ${colorGenerator.getColorByKey(component)} 70%,
            ${colorGenerator.getColorByKey(component)} 100%
          )`,
          left: toPercent(viewStart),
          width: toPercent(viewEnd - viewStart),
        }}
      >

Regular

Folded

[ignatandrei]

Any progress on this ?