NodeGraph: Fix configuring arc colors with mixed case field names (#84609)

* NodeGraphPanel: Fix case comparison for arc field colors

When a field has mixed case in the data frame, the options editor
offers it with mixed case as well, so the options will have the field
with mixed case as well, making the comparison in utils.ts
applyOptiosToFrames fail, leaving the arcs uncolored.

This version of the commit allows mismatched cases between field in
dataframe and options panel in case users were depending on this
behavior in their dashboards.

* Update comment

---------

Co-authored-by: Andrej Ocenas <[email protected]>

Author: timo

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

@@ -170,7 +170,7 @@ describe('processNodes', () => {
           { name: 'mainStat', type: FieldType.string },
           { name: 'secondaryStat', type: FieldType.string },
           { name: 'arc__primary', type: FieldType.string },
-          { name: 'arc__secondary', type: FieldType.string },
+          { name: 'arc__Secondary', type: FieldType.string },
           { name: 'arc__tertiary', type: FieldType.string },
         ],
       }),
@@ -192,7 +192,7 @@ describe('processNodes', () => {
         secondaryStatUnit: 'ms/r',
         arcs: [
           { field: 'arc__primary', color: 'red' },
-          { field: 'arc__secondary', color: 'yellow' },
+          { field: 'arc__Secondary', color: 'yellow' },
           { field: 'arc__tertiary', color: '#dd40ec' },
         ],
       },
@@ -212,7 +212,7 @@ describe('processNodes', () => {
     expect(nodesFrame?.fields.find((f) => f.name === 'arc__primary')?.config).toEqual({
       color: { mode: 'fixed', fixedColor: 'red' },
     });
-    expect(nodesFrame?.fields.find((f) => f.name === 'arc__secondary')?.config).toEqual({
+    expect(nodesFrame?.fields.find((f) => f.name === 'arc__Secondary')?.config).toEqual({
       color: { mode: 'fixed', fixedColor: 'yellow' },
     });
     expect(nodesFrame?.fields.find((f) => f.name === 'arc__tertiary')?.config).toEqual({

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

@@ -599,7 +599,8 @@ export const applyOptionsToFrames = (frames: DataFrame[], options: NodeGraphOpti
       }
       if (options?.nodes?.arcs?.length) {
         for (const arc of options.nodes.arcs) {
-          const field = frame.fields.find((field) => field.name.toLowerCase() === arc.field);
+          // As the arc__ field suffixes can be custom we compare them case insensitively to be safe.
+          const field = frame.fields.find((field) => field.name.toLowerCase() === arc.field?.toLowerCase());
           if (field && arc.color) {
             field.config = { ...field.config, color: { fixedColor: arc.color, mode: FieldColorModeId.Fixed } };
           }