Custom color for columns on Events tab

[MrVitaly]

It would be beneficial to introduce the ability to specify custom color for each specified column on the Events tab.

The current design automatically assigns light colors to specified columns, which may not offer enough contrast or differentiation, leading to reduced readability and usability.

This feature would enable users to improve visual distinction between columns, especially when working with a large number of columns.

[KodrAus]

Thanks for the suggestion @MrVitaly :+1: We do have work to do to improve the contrast of parts of the UI across the board.

You could specify your own colours using an instance theme. Columns have CSS classes like tag-1, tag-2, tag-3, etc.

[nblumhardt]

Just a note, you'll need to either use !important, or very specific classes, like:

body.dark-theme .event .event-columns .property-name.tag-0 {
  background: white;
  color: black;
}

body.light-theme .event .event-columns .property-name.tag-0 {
  background: black;
  color: white;
}

These go into the Settings > Instance page, and apply for all users. HTH!

[MrVitaly]

@KodrAus, @nblumhardt, thank you for the recommendation to use CSS styles, but the main idea of my suggestion is to allow the specification of colors for columns based on property names, rather than relying on the order of the columns.

By assigning colors to specific property names, users will be able to consistently highlight the same columns across all signals, regardless of their order or position within a particular signal. This approach eliminates the need to manage the column sequence manually and via CSS theming which would improve the user experience by making the interface more intuitive and adaptable to individual preferences.

[KodrAus]

Assigning colours per column expression or column value could be something to explore for sure, like we do for service names in traces :+1:

[nblumhardt]

Hi again; just revisiting this in triage - the custom CSS approach can work give the title attribute that's applied to columns:

.event-columns .property-name[title="Origin"] {
  color: red !important;
}

We'd like to be able to improve this in a future design, but for now, the workaround should be usable in many cases. As we're not expecting to revisit this within the next few versions we'll close for now.

Thanks again for the feedback!