NodeGraph: Show gradient fields in legend (#34078)

* Add gradient fields to legend

* Fix test

* Remove unnecessary mapping

* Add tests

public/app/plugins/datasource/jaeger/graphTransform.ts

@@ -26,7 +26,11 @@ export function createGraphFrames(data: TraceResponse): DataFrame[] {
       { name: Fields.subTitle, type: FieldType.string },
       { name: Fields.mainStat, type: FieldType.string, config: { displayName: 'Total time (% of trace)' } },
       { name: Fields.secondaryStat, type: FieldType.string, config: { displayName: 'Self time (% of total)' } },
-      { name: Fields.color, type: FieldType.number, config: { color: { mode: 'continuous-GrYlRd' } } },
+      {
+        name: Fields.color,
+        type: FieldType.number,
+        config: { color: { mode: 'continuous-GrYlRd' }, displayName: 'Self time / Trace duration' },
+      },
     ],
     meta: {
       preferredVisualisationType: 'nodeGraph',

public/app/plugins/datasource/tempo/graphTransform.ts

@@ -44,7 +44,11 @@ export function createGraphFrames(data: DataFrame): DataFrame[] {
       { name: Fields.subTitle, type: FieldType.string },
       { name: Fields.mainStat, type: FieldType.string, config: { displayName: 'Total time (% of trace)' } },
       { name: Fields.secondaryStat, type: FieldType.string, config: { displayName: 'Self time (% of total)' } },
-      { name: Fields.color, type: FieldType.number, config: { color: { mode: 'continuous-GrYlRd' } } },
+      {
+        name: Fields.color,
+        type: FieldType.number,
+        config: { color: { mode: 'continuous-GrYlRd' }, displayName: 'Self time / Trace duration' },
+      },
     ],
     meta: {
       preferredVisualisationType: 'nodeGraph',

public/app/plugins/panel/nodeGraph/Legend.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FieldColorModeId } from '@grafana/data';
+import { Legend } from './Legend';
+import { NodeDatum } from './types';
+
+describe('Legend', () => {
+  it('renders ok without nodes', () => {
+    render(<Legend nodes={[]} onSort={(sort) => {}} sortable={false} />);
+  });
+
+  it('renders ok with color fields', () => {
+    const nodes: NodeDatum[] = [
+      {
+        id: 'nodeId',
+        mainStat: { config: { displayName: 'stat1' } } as any,
+        secondaryStat: { config: { displayName: 'stat2' } } as any,
+        arcSections: [
+          { config: { displayName: 'error', color: { mode: FieldColorModeId.Fixed, fixedColor: 'red' } } } as any,
+        ],
+      } as any,
+    ];
+    render(<Legend nodes={nodes} onSort={(sort) => {}} sortable={false} />);
+    const items = screen.getAllByLabelText(/VizLegend series/);
+    expect(items.length).toBe(3);
+
+    const item = screen.getByLabelText(/VizLegend series error/);
+    expect((item.firstChild as HTMLDivElement).style.getPropertyValue('background')).toBe('rgb(242, 73, 92)');
+  });
+});

public/app/plugins/panel/nodeGraph/Legend.tsx

@@ -62,6 +62,9 @@ interface ItemData {
 }
 
 function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<VizLegendItem<ItemData>> {
+  if (!nodes.length) {
+    return [];
+  }
   const fields = [nodes[0].mainStat, nodes[0].secondaryStat].filter(identity) as Field[];
 
   const node = nodes.find((n) => n.arcSections.length > 0);
@@ -71,18 +74,30 @@ function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<Viz
 
       // Lets collect and deduplicate as there isn't a requirement for 0 size arc section to be defined
       fields.push(...new Set(nodes.map((n) => n.arcSections).flat()));
-    } else {
-      // TODO: probably some sort of gradient which we will have to deal with later
-      return [];
     }
   }
 
+  if (nodes[0].color) {
+    fields.push(nodes[0].color);
+  }
+
   return fields.map((f) => {
-    return {
+    const item: VizLegendItem = {
       label: f.config.displayName || f.name,
-      color: getColorForTheme(f.config.color?.fixedColor || '', theme),
       yAxis: 0,
       data: { field: f },
     };
+    if (f.config.color?.mode === FieldColorModeId.Fixed && f.config.color?.fixedColor) {
+      item.color = getColorForTheme(f.config.color?.fixedColor || '', theme);
+    } else if (f.config.color?.mode) {
+      item.gradient = f.config.color?.mode;
+    }
+
+    if (!(item.color || item.gradient)) {
+      // Defaults to gray color
+      item.color = getColorForTheme('', theme);
+    }
+
+    return item;
   });
 }

public/app/plugins/panel/nodeGraph/Node.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, memo } from 'react';
 import cx from 'classnames';
-import { getColorForTheme, GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, useTheme } from '@grafana/ui';
+import { Field, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, useTheme2 } from '@grafana/ui';
 import { NodeDatum } from './types';
 import { css } from 'emotion';
 import tinycolor from 'tinycolor2';
@@ -117,14 +117,14 @@ export const Node = memo(function Node(props: {
 function ColorCircle(props: { node: NodeDatum }) {
   const { node } = props;
   const fullStat = node.arcSections.find((s) => s.values.get(node.dataFrameRowIndex) === 1);
-  const theme = useTheme();
+  const theme = useTheme2();
 
   if (fullStat) {
     // Doing arc with path does not work well so it's better to just do a circle in that case
     return (
       <circle
         fill="none"
-        stroke={getColorForTheme(fullStat.config.color?.fixedColor || '', theme)}
+        stroke={theme.visualization.getColorByName(fullStat.config.color?.fixedColor || '')}
         strokeWidth={2}
         r={nodeR}
         cx={node.x}
@@ -136,7 +136,16 @@ function ColorCircle(props: { node: NodeDatum }) {
   const nonZero = node.arcSections.filter((s) => s.values.get(node.dataFrameRowIndex) !== 0);
   if (nonZero.length === 0) {
     // Fallback if no arc is defined
-    return <circle fill="none" stroke={node.color} strokeWidth={2} r={nodeR} cx={node.x} cy={node.y} />;
+    return (
+      <circle
+        fill="none"
+        stroke={node.color ? getColor(node.color, node.dataFrameRowIndex, theme) : 'gray'}
+        strokeWidth={2}
+        r={nodeR}
+        cx={node.x}
+        cy={node.y}
+      />
+    );
   }
 
   const { elements } = nonZero.reduce(
@@ -151,7 +160,7 @@ function ColorCircle(props: { node: NodeDatum }) {
           y={node.y!}
           startPercent={acc.percent}
           percent={value}
-          color={getColorForTheme(color, theme)}
+          color={theme.visualization.getColorByName(color)}
           strokeWidth={2}
         />
       );
@@ -197,3 +206,11 @@ function ArcSection({
     />
   );
 }
+
+function getColor(field: Field, index: number, theme: GrafanaTheme2): string {
+  if (!field.config.color) {
+    return field.values.get(index);
+  }
+
+  return getFieldColorModeForField(field).getCalculator(field, theme)(0, field.values.get(index));
+}

public/app/plugins/panel/nodeGraph/types.ts

@@ -12,7 +12,7 @@ export type NodeDatum = SimulationNodeDatum & {
   mainStat?: Field;
   secondaryStat?: Field;
   arcSections: Field[];
-  color: string;
+  color?: Field;
 };
 
 // This is the data we have before the graph is laid out with source and target being string IDs.

public/app/plugins/panel/nodeGraph/utils.test.ts

@@ -19,6 +19,18 @@ describe('processNodes', () => {
       theme
     );
 
+    const colorField = {
+      config: {
+        color: {
+          mode: 'continuous-GrYlRd',
+        },
+      },
+      index: 7,
+      name: 'color',
+      type: 'number',
+      values: new ArrayVector([0.5, 0.5, 0.5]),
+    };
+
     expect(nodes).toEqual([
       {
         arcSections: [
@@ -43,7 +55,7 @@ describe('processNodes', () => {
             values: new ArrayVector([0.5, 0.5, 0.5]),
           },
         ],
-        color: 'rgb(226, 192, 61)',
+        color: colorField,
         dataFrameRowIndex: 0,
         id: '0',
         incoming: 0,
@@ -87,7 +99,7 @@ describe('processNodes', () => {
             values: new ArrayVector([0.5, 0.5, 0.5]),
           },
         ],
-        color: 'rgb(226, 192, 61)',
+        color: colorField,
         dataFrameRowIndex: 1,
         id: '1',
         incoming: 1,
@@ -131,7 +143,7 @@ describe('processNodes', () => {
             values: new ArrayVector([0.5, 0.5, 0.5]),
           },
         ],
-        color: 'rgb(226, 192, 61)',
+        color: colorField,
         dataFrameRowIndex: 2,
         id: '2',
         incoming: 2,

public/app/plugins/panel/nodeGraph/utils.ts

@@ -4,7 +4,6 @@ import {
   Field,
   FieldCache,
   FieldType,
-  getFieldColorModeForField,
   GrafanaTheme2,
   MutableDataFrame,
   NodeGraphDataFrameFieldNames,
@@ -100,7 +99,7 @@ export function processNodes(
         mainStat: nodeFields.mainStat,
         secondaryStat: nodeFields.secondaryStat,
         arcSections: nodeFields.arc,
-        color: nodeFields.color ? getColor(nodeFields.color, index, theme) : '',
+        color: nodeFields.color,
       };
       return acc;
     }, {}) || {};
@@ -271,14 +270,6 @@ function edgesFrame() {
   });
 }
 
-function getColor(field: Field, index: number, theme: GrafanaTheme2): string {
-  if (!field.config.color) {
-    return field.values.get(index);
-  }
-
-  return getFieldColorModeForField(field).getCalculator(field, theme)(0, field.values.get(index));
-}
-
 export interface Bounds {
   top: number;
   right: number;