From a84604154822f82a202243c07138fdd4a83d100a Mon Sep 17 00:00:00 2001
From: Kristina Durivage <kristina.durivage@grafana.com>
Date: Sun, 14 Sep 2025 20:37:06 -0500
Subject: [PATCH] Cleanup and get it working messily

---
 .../ConfigFromQueryTransformerEditor.tsx      | 31 ++++---------------
 .../configFromQuery/configFromQuery.ts        | 22 ++++++++++++-
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
index b144209f226..865f9602aec 100644
--- a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
+++ b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx
@@ -1,5 +1,4 @@
 import { css } from '@emotion/css';
-import { isArray } from 'lodash';
 
 import {
   FieldMatcherID,
@@ -16,7 +15,7 @@ import { Checkbox, fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyl
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor';
-import { FieldConfigHandlerKey, FieldToConfigMapHandlerProcessor } from '../fieldToConfigMapping/fieldToConfigMapping';
+import { configMapHandlers } from '../fieldToConfigMapping/fieldToConfigMapping';
 import darkImage from '../images/dark/configFromData.svg';
 import lightImage from '../images/light/configFromData.svg';
 
@@ -64,11 +63,6 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
     .filter((o) => !o.excludeFromPicker)
     .map<SelectableValue<string>>((i) => ({ label: i.name, value: i.id, description: i.description }));
 
-  const mapFn: FieldToConfigMapHandlerProcessor = (value, config, context) => {
-    console.log(value, config, context);
-    return config.mappings;
-  };
-
   return (
     <>
       <InlineFieldRow>
@@ -103,8 +97,8 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
         <InlineField>
           <Checkbox
             label={t('transformers.config-from-query-transformer-editor.label-mapping', 'Map results')}
-            onChange={(evt) => onChange({ ...options, isMapping: evt.currentTarget.checked })}
-            value={options.isMapping}
+            onChange={(evt) => onChange({ ...options, isDisplayNameMapping: evt.currentTarget.checked })}
+            value={options.isDisplayNameMapping}
           />
         </InlineField>
       </InlineFieldRow>
@@ -114,23 +108,10 @@ export function ConfigFromQueryTransformerEditor({ input, onChange, options }: P
             frame={configFrame}
             mappings={options.mappings}
             onChange={(mappings) => onChange({ ...options, mappings })}
-            withReducers={!options.isMapping}
+            withReducers={!options.isDisplayNameMapping}
             configOverride={
-              options.isMapping
-                ? [
-                    {
-                      key: 'mappings.text',
-                      name: 'Value mappings / Display text',
-                      targetProperty: 'mappings',
-                      processor: mapFn,
-                    },
-                    {
-                      key: 'mappings.value',
-                      name: 'Value mappings / Value',
-                      targetProperty: 'mappings',
-                      processor: mapFn,
-                    },
-                  ]
+              options.isDisplayNameMapping
+                ? configMapHandlers.filter((cmh) => cmh.key === 'mappings.value' || cmh.key === 'mappings.text')
                 : undefined
             }
           />
diff --git a/public/app/features/transformers/configFromQuery/configFromQuery.ts b/public/app/features/transformers/configFromQuery/configFromQuery.ts
index 1cdfc766691..cb447701d58 100644
--- a/public/app/features/transformers/configFromQuery/configFromQuery.ts
+++ b/public/app/features/transformers/configFromQuery/configFromQuery.ts
@@ -22,7 +22,7 @@ export interface ConfigFromQueryTransformOptions {
   configRefId?: string;
   mappings: FieldToConfigMapping[];
   applyTo?: MatcherConfig;
-  isMapping?: boolean;
+  isDisplayNameMapping?: boolean;
 }
 
 export function extractConfigFromQuery(options: ConfigFromQueryTransformOptions, data: DataFrame[]) {
@@ -74,6 +74,26 @@ export function extractConfigFromQuery(options: ConfigFromQueryTransformOptions,
     for (const field of frame.fields) {
       if (matcher(field, frame, data)) {
         const dataConfig = getFieldConfigFromFrame(reducedConfigFrame, 0, mappingResult);
+
+        if (options.isDisplayNameMapping) {
+          const nameFrame = data.find((d) => d.refId === options.configRefId);
+          const mappingName = options.mappings.find((mapping) => mapping.handlerKey === 'mappings.value')?.fieldName;
+          if (nameFrame && mappingName !== undefined) {
+            const mapKeyField = nameFrame.fields.find((frameNameField) => frameNameField.name === mappingName);
+            const keyIndex = mapKeyField?.values.indexOf(field.name);
+            if (keyIndex !== undefined) {
+              const mappingTextName = options.mappings.find(
+                (mapping) => mapping.handlerKey === 'mappings.text'
+              )?.fieldName;
+
+              if (mappingTextName !== undefined) {
+                const valField = nameFrame.fields.find((field) => field.name === mappingTextName);
+                dataConfig.displayName = valField?.values[keyIndex!];
+              }
+            }
+          }
+        }
+
         outputFrame.fields.push({
           ...field,
           config: {