feat(breakdown): reserve green for success, use blue for neutral rate (#814)

* feat(breakdown): reserve green for success, use blue for neutral rate

The breakdown/RED panels colored the neutral 'rate' metric (total span
throughput across all statuses) green. Green connotes success/health, so
applying it to total traffic — which includes errored spans — is
misleading.

Recolor the neutral rate/throughput series to blue and reserve green for
an explicit success signal. Errors stay red, duration stays blue.

Affects the RED panel, mini RED panel, attribute breakdown panels, the
time-seeker series, and the breakdown legend.

* fix(colors): duration panels semi-dark-blue, neutral baseline blue in comparison

Address review feedback:
- Duration breakdown tiles no longer fall back to the palette default (green);
  they now use a fixed semi-dark-blue, keeping duration in the neutral family
  while staying distinguishable from rate (blue)
- Seeker duration color updated to semi-dark-blue to match
- Comparison baseline recolored from semi-dark-green to the shared BaselineColor
  for all metrics, so baseline vs selection coding is consistent across
  rate/errors/duration and green stays reserved for success

* Fix single layout colors

---------

Co-authored-by: Joey <joey.tawadrous@grafana.com>
Co-authored-by: Hugo Häggmark <hugo.haggmark@gmail.com>

Author: 3 people

src/components/Explore/TracesByService/Tabs/Breakdown/AttributesBreakdownScene.tsx

@@ -177,7 +177,7 @@ export class AttributesBreakdownScene extends SceneObjectBase<AttributesBreakdow
               metric === 'duration'
                 ? []
                 : [
-                    { label: t('attributes-breakdown-scene.rate-label', 'Rate'), color: 'green' },
+                    { label: t('attributes-breakdown-scene.rate-label', 'Rate'), color: 'blue' },
                     { label: t('attributes-breakdown-scene.error-label', 'Error'), color: 'red' },
                   ]
             }

src/components/Explore/TracesByService/Tabs/Comparison/AttributesComparisonScene.tsx

@@ -228,10 +228,7 @@ export class AttributesComparisonScene extends SceneObjectBase<AttributesCompari
             tags={[
               {
                 label: t('attributes-comparison-scene.baseline-label', 'Baseline'),
-                color:
-                  traceExploration.getMetricFunction() === 'duration'
-                    ? BaselineColor
-                    : getTheme().visualization.getColorByName('semi-dark-green'),
+                color: BaselineColor,
               },
               {
                 label: t('attributes-comparison-scene.selection-label', 'Selection'),

src/components/Explore/layouts/allComparison.ts

@@ -85,7 +85,9 @@ export function getPanelConfig(metric: MetricFunction) {
         .matchFieldsWithName('Baseline')
         .overrideColor({
           mode: 'fixed',
-          fixedColor: metric === 'duration' ? BaselineColor : 'semi-dark-green',
+          // Baseline is a reference population, not a health signal; use the neutral
+          // baseline blue for every metric and reserve green for success.
+          fixedColor: BaselineColor,
         })
         .overrideUnit('percentunit');
       overrides

src/components/Explore/layouts/attributeBreakdown.ts

@@ -71,7 +71,10 @@ export function buildNormalLayout(
         children: [
           new SceneFlexItem({
             minHeight: 300,
-            body: (metric === 'duration' ? linesPanelConfig().setUnit('s') : linesPanelConfig()).build(),
+            body: (metric === 'duration'
+              ? linesPanelConfig('semi-dark-blue').setUnit('s')
+              : linesPanelConfig(metric === 'errors' ? 'semi-dark-red' : 'blue')
+            ).build(),
           }),
         ],
       }),
@@ -145,7 +148,9 @@ export function getLayoutChild(
       },
     ];
 
-    const panel = (metric === 'duration' ? linesPanelConfig().setUnit('s') : barsPanelConfig(metric))
+    // Duration uses semi-dark-blue to stay in the neutral (non-status) family while
+    // remaining distinguishable from the rate panels (blue).
+    const panel = (metric === 'duration' ? linesPanelConfig('semi-dark-blue').setUnit('s') : barsPanelConfig(metric))
       .setTitle(getTitle(frame, variable.getValueText()))
       .setMenu(
         new PanelMenu({

src/components/Explore/panels/barsPanel.ts

@@ -17,7 +17,9 @@ export const barsPanelConfig = (metric: MetricFunction, axisWidth?: number) => {
     .setOverrides((overrides) => {
       overrides.matchFieldsWithNameByRegex('.*').overrideColor({
         mode: 'fixed',
-        fixedColor: isErrorsMetric ? 'semi-dark-red' : 'green',
+        // Rate is neutral throughput (all spans); use a neutral blue and reserve
+        // green for an explicit success signal.
+        fixedColor: isErrorsMetric ? 'semi-dark-red' : 'blue',
       });
     })
     .setOption('tooltip', { mode: TooltipDisplayMode.Multi });

src/components/Explore/panels/linesPanel.ts

@@ -1,10 +1,21 @@
 import { PanelBuilders } from '@grafana/scenes';
 import { TooltipDisplayMode } from '@grafana/ui';
 
-export const linesPanelConfig = () => {
-  return PanelBuilders.timeseries()
+export const linesPanelConfig = (fixedColor?: string) => {
+  const builder = PanelBuilders.timeseries()
     .setOption('annotations', { multiLane: true })
     .setOption('legend', { showLegend: false })
     .setOption('tooltip', { mode: TooltipDisplayMode.Multi })
     .setCustomFieldConfig('fillOpacity', 15);
+
+  if (fixedColor) {
+    builder.setOverrides((overrides) => {
+      overrides.matchFieldsWithNameByRegex('.*').overrideColor({
+        mode: 'fixed',
+        fixedColor,
+      });
+    });
+  }
+
+  return builder;
 };

src/components/Explore/seeker/TimeSeekerContext.test.tsx

@@ -112,20 +112,20 @@ describe('TimeSeekerContext', () => {
       },
     } as any;
 
-    it('returns blue for duration metric', () => {
-      expect(getMetricColor(mockTheme, 'duration')).toBe('color-blue');
+    it('returns semi-dark-blue for duration metric', () => {
+      expect(getMetricColor(mockTheme, 'duration')).toBe('color-semi-dark-blue');
     });
 
     it('returns semi-dark-red for errors metric', () => {
       expect(getMetricColor(mockTheme, 'errors')).toBe('color-semi-dark-red');
     });
 
-    it('returns green for rate metric', () => {
-      expect(getMetricColor(mockTheme, 'rate')).toBe('color-green');
+    it('returns blue for rate metric', () => {
+      expect(getMetricColor(mockTheme, 'rate')).toBe('color-blue');
     });
 
-    it('returns green for undefined metric', () => {
-      expect(getMetricColor(mockTheme, undefined)).toBe('color-green');
+    it('returns blue for undefined metric', () => {
+      expect(getMetricColor(mockTheme, undefined)).toBe('color-blue');
     });
   });
 

src/components/Explore/seeker/getMetricColor.ts

@@ -3,9 +3,12 @@ import { MetricFunction } from 'utils/shared';
 
 export function getMetricColor(theme: GrafanaTheme2, metric?: MetricFunction): string {
   if (metric === 'duration') {
-    return theme.visualization.getColorByName('blue');
+    // Semi-dark-blue keeps duration in the neutral family but visually distinct from rate (blue).
+    return theme.visualization.getColorByName('semi-dark-blue');
   } else if (metric === 'errors') {
     return theme.visualization.getColorByName('semi-dark-red');
   }
-  return theme.visualization.getColorByName('green');
+  // Rate is neutral throughput (all spans, regardless of status), so use a neutral
+  // color. Green is reserved for an explicit success signal.
+  return theme.visualization.getColorByName('blue');
 }