feature: Adds display column selection to variable

This makes variables more dynamic by increasing the customization of variable values vs variable display values

Author: NeedleInAJayStack

src/components/VariableQueryEditor.tsx

@@ -33,7 +33,11 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     if (query.column !== undefined && query.column !== '') {
       column = `'${query.column}'`;
     }
-    let displayString = `${type}: '${queryCmd}', Column: ${column}`
+    let displayColumn = "none";
+    if (query.displayColumn !== undefined && query.displayColumn !== '') {
+      displayColumn = `'${query.displayColumn}'`;
+    }
+    let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
     onChange(query, displayString);
   };
 
@@ -57,6 +61,10 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
     setState({...query, column: event.currentTarget.value,});
   };
 
+  const onDisplayColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setState({...query, displayColumn: event.currentTarget.value,});
+  };
+
   return (
     <div onBlur={saveQuery}>
       <HaystackQueryTypeSelector
@@ -75,6 +83,12 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
           value={query.column}
         />
       </InlineField>
+      <InlineField label="Display Column">
+        <Input
+          onChange={onDisplayColumnChange}
+          value={query.displayColumn}
+        />
+      </InlineField>
     </div>
   );
 };

src/datasource.ts

@@ -100,39 +100,55 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
 
     return response.data.reduce((acc: MetricFindValue[], frame: DataFrame) => {
       // Default to the first field
-      let field = frame.fields[0];
+      let column = frame.fields[0];
       if (variableQuery.column !== undefined && variableQuery.column !== '') {
         // If a column was input, match the column name
-        field = frame.fields.find((field: Field) => field.name === variableQuery.column) ?? field;
+        column = frame.fields.find((field: Field) => field.name === variableQuery.column) ?? column;
       } else if (frame.fields.some((field: Field) => field.name === 'id')) {
         // If there is an id column, use that
-        field = frame.fields.find((field: Field) => field.name === 'id') ?? field;
+        column = frame.fields.find((field: Field) => field.name === 'id') ?? column;
       }
 
-      let fieldVals = field.values.map((value) => {
-        switch (field.type) {
+      // Default to the selected column
+      let displayColumn = column;
+      if (variableQuery.displayColumn !== undefined && variableQuery.displayColumn !== '') {
+        // If a column was input, match the column name
+        displayColumn =
+          frame.fields.find((field: Field) => field.name === variableQuery.displayColumn) ?? displayColumn;
+      }
+
+      let variableValues = column.values.map((value, index) => {
+        let variableValue = value;
+        switch (column.type) {
           case FieldType.string:
             if (value.startsWith('@')) {
               // Detect ref using @ prefix, and adjust value to just the Ref
               const spaceIndex = value.indexOf(' ');
               if (spaceIndex > -1) {
                 // Display name exists
-                const id = value.substring(0, spaceIndex);
-                const dis = value.substring(spaceIndex + 2, value.length - 1);
-                return { text: dis, value: id };
-              } else {
-                // Otherwise, just use id
-                return { text: value, value: value };
+                variableValue = value.substring(0, spaceIndex);
               }
-            } else {
-              // Otherwise, just use the value directly
-              return { text: value, value: value };
             }
-          default:
-            return { text: value, value: value };
         }
+
+        let displayValue = displayColumn.values[index];
+        let variableText = displayValue;
+        switch (displayColumn.type) {
+          case FieldType.string:
+            if (displayValue.startsWith('@')) {
+              // Detect ref using @ prefix, and adjust value to just the Ref
+              const spaceIndex = displayValue.indexOf(' ');
+              if (spaceIndex > -1) {
+                // Display name exists
+                variableText = displayValue.substring(spaceIndex + 2, displayValue.length - 1);
+              }
+            }
+        }
+
+        return { text: variableText, value: variableValue };
       });
-      return acc.concat(fieldVals);
+
+      return acc.concat(variableValues);
     }, []);
   }
 

src/types.ts

@@ -30,6 +30,7 @@ export interface QueryType extends SelectableValue<string> {
 
 export interface HaystackVariableQuery extends HaystackQuery {
   column: string;
+  displayColumn: string;
   refId: string;
 }