Improve experimental settings

Author: marcusolsson

src/components/ExperimentalEditor.tsx

@@ -13,39 +13,43 @@ interface Props {
 
 export const ExperimentalEditor = ({ query, onChange, onRunQuery, editorContext }: Props) => {
   // Group by
-  const { groupByField } = query;
+  const { experimentalGroupByField: groupByField } = query;
 
   const onGroupByChange = (field?: string) => {
-    onChange({ ...query, groupByField: field });
+    onChange({ ...query, experimentalGroupByField: field });
     onRunQuery();
   };
 
   // Metric
-  const { metricField } = query;
+  const { experimentalMetricField: metricField } = query;
 
   const onMetricChange = (field?: string) => {
-    onChange({ ...query, metricField: field });
+    onChange({ ...query, experimentalMetricField: field });
     onRunQuery();
   };
 
   // Variable label
-  const { variableTextField } = query;
+  const { experimentalVariableTextField: variableTextField } = query;
 
   const onVariableLabelChange = (field?: string) => {
-    onChange({ ...query, variableTextField: field });
+    onChange({ ...query, experimentalVariableTextField: field });
     onRunQuery();
   };
 
   // Variable value
-  const { variableValueField } = query;
+  const { experimentalVariableValueField: variableValueField } = query;
 
   const onVariableValueChange = (field?: string) => {
-    onChange({ ...query, variableValueField: field });
+    onChange({ ...query, experimentalVariableValueField: field });
     onRunQuery();
   };
 
   const fieldNames = query.fields
     .map((field) => {
+      if (field.name) {
+        return field.name;
+      }
+
       const pathArray = (JSONPath as any).toPathArray(field.jsonPath);
       return pathArray[pathArray.length - 1];
     })

src/datasource.ts

@@ -65,8 +65,9 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       return [];
     }
 
-    const labelField = frame.fields.find((field) => field.name === query.variableTextField) ?? frame.fields[0];
-    const valueField = frame.fields.find((field) => field.name === query.variableValueField) ?? labelField;
+    const labelField =
+      frame.fields.find((field) => field.name === query.experimentalVariableTextField) ?? frame.fields[0];
+    const valueField = frame.fields.find((field) => field.name === query.experimentalVariableValueField) ?? labelField;
 
     return Array.from({ length: frame.length }).map((_, idx) => ({
       text: labelField.values.get(idx),
@@ -159,14 +160,14 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       throw new Error('Fields have different lengths');
     }
 
-    const frames = query.groupByField
+    const frames = query.experimentalGroupByField
       ? groupBy(
           toDataFrame({
             name: query.refId,
             refId: query.refId,
             fields: fields,
           }),
-          query.groupByField
+          query.experimentalGroupByField
         )
       : [
           toDataFrame({
@@ -180,7 +181,7 @@ export class JsonDataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourc
       ...frame,
       fields: fields.map(
         (field: Field): Field =>
-          field.name === query.metricField ? { ...field, config: { displayNameFromDS: frame.name } } : field
+          field.name === query.experimentalMetricField ? { ...field, config: { displayNameFromDS: frame.name } } : field
       ),
     }));
 

src/types.ts

@@ -22,10 +22,10 @@ export interface JsonApiQuery extends DataQuery {
   jsonPath?: string;
 
   // Experimental
-  groupByField?: string;
-  metricField?: string;
-  variableTextField?: string;
-  variableValueField?: string;
+  experimentalGroupByField?: string;
+  experimentalMetricField?: string;
+  experimentalVariableTextField?: string;
+  experimentalVariableValueField?: string;
 }
 
 export const defaultQuery: Partial<JsonApiQuery> = {