QueryName -> QueryIndex

Gladorme · Gladorme · commit eb2f80fb99df · 2026-06-26T18:35:01.000+02:00
Signed-off-by: Guillaume LADORME &lt;Gladorme@users.noreply.github.com&gt;
diff --git a/timeserieschart/schemas/migrate/migrate.cue b/timeserieschart/schemas/migrate/migrate.cue
@@ -192,7 +192,7 @@ spec: {
 	// migrate fixedColor overrides to querySettings when applicable
 	#querySettings: [
 		for i, target in (*#panel.targets | []) {
-			queryName: "Query #\(i+1)"
+			queryIndex: "Query #\(i+1)"
 			for override in (*#panel.fieldConfig.overrides | [])
 			if (override.matcher.id == "byName" || override.matcher.id == "byRegexp" || override.matcher.id == "byFrameRefID") && override.matcher.options != _|_
 			for property in override.properties
diff --git a/timeserieschart/schemas/migrate/tests/color-based-on-legend-text/expected.json b/timeserieschart/schemas/migrate/tests/color-based-on-legend-text/expected.json
@@ -7,28 +7,28 @@
     },
     "querySettings": [
       {
-        "queryName": "Query #1",
+        "queryIndex": "Query #1",
         "colorMode": "fixed",
         "colorValue": "#EAB839"
       },
       {
-        "queryName": "Query #2",
+        "queryIndex": "Query #2",
         "colorMode": "fixed",
         "colorValue": "#0A437C"
       },
       {
-        "queryName": "Query #3",
+        "queryIndex": "Query #3",
         "colorMode": "fixed",
         "colorValue": "#890F02",
         "areaOpacity": 1
       },
       {
-        "queryName": "Query #5",
+        "queryIndex": "Query #5",
         "colorMode": "fixed",
         "colorValue": "#6D1F62"
       },
       {
-        "queryName": "Query #6",
+        "queryIndex": "Query #6",
         "colorMode": "fixed",
         "colorValue": "#052B51"
       }
diff --git a/timeserieschart/schemas/migrate/tests/multiple-overrides/expected.json b/timeserieschart/schemas/migrate/tests/multiple-overrides/expected.json
@@ -21,25 +21,25 @@
     },
     "querySettings": [
       {
-        "queryName": "Query #2",
+        "queryIndex": "Query #2",
         "colorMode": "fixed",
         "colorValue": "#5794F2",
         "lineStyle": "dashed",
         "areaOpacity": 0
       },
       {
-        "queryName": "Query #3",
+        "queryIndex": "Query #3",
         "colorMode": "fixed",
         "colorValue": "#F2495C",
         "areaOpacity": 0
       },
       {
-        "queryName": "Query #4",
+        "queryIndex": "Query #4",
         "colorMode": "fixed",
         "colorValue": "#3274D9"
       },
       {
-        "queryName": "Query #5",
+        "queryIndex": "Query #5",
         "colorMode": "fixed",
         "colorValue": "#fade2a",
         "lineStyle": "dashed",
diff --git a/timeserieschart/schemas/time-series.cue b/timeserieschart/schemas/time-series.cue
@@ -62,7 +62,7 @@ spec: close({
 }
 
 #querySettings: [...{
-	queryName:    strings.MinRunes(1)
+	queryIndex:   strings.MinRunes(1)
 	colorMode?:   "fixed" | "fixed-single"       // NB: "palette" could be added later
 	colorValue?:  =~"^#(?:[0-9a-fA-F]{3}){1,2}$" // hexadecimal color code
 	lineStyle?:   #lineStyle
diff --git a/timeserieschart/sdk/go/time-series.go b/timeserieschart/sdk/go/time-series.go
@@ -121,7 +121,7 @@ const (
 )
 
 type QuerySettingsItem struct {
-	QueryName   string         `json:"queryName" yaml:"queryName"`
+	QueryIndex  string         `json:"queryIndex" yaml:"queryIndex"`
 	ColorMode   ColorMode      `json:"colorMode,omitempty" yaml:"colorMode,omitempty"`
 	ColorValue  string         `json:"colorValue,omitempty" yaml:"colorValue,omitempty"`
 	LineStyle   string         `json:"lineStyle,omitempty" yaml:"lineStyle,omitempty"`
diff --git a/timeserieschart/src/QuerySettingsEditor.tsx b/timeserieschart/src/QuerySettingsEditor.tsx
@@ -64,13 +64,13 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
     focusRef.current = false;
   }, [querySettingsList?.length]);
 
-  const handleQueryNameChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {
+  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {
     if (querySettingsList !== undefined) {
       handleQuerySettingsChange(
         produce(querySettingsList, (draft) => {
           const querySettings = draft?.[i];
           if (querySettings) {
-            querySettings.queryName = e.target.value;
+            querySettings.queryIndex = e.target.value;
           }
         })
       );
@@ -225,22 +225,22 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
 
   const { queryDefinitions } = useDataQueriesContext();
 
-  const queryNames: string[] = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);
+  const queryIndexes: string[] = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);
 
   // Compute the list of query indexes for which query settings are not already defined.
   // This is to avoid already-booked indexes to still be selectable in the dropdown(s)
-  const availableQueryNames = useMemo(() => {
-    return queryNames.filter((name) => {
-      return !querySettingsList?.some((qs) => qs.queryName === name);
+  const availableQueryIndexes = useMemo(() => {
+    return queryIndexes.filter((name) => {
+      return !querySettingsList?.some((qs) => qs.queryIndex === name);
     });
-  }, [queryNames, querySettingsList]);
+  }, [queryIndexes, querySettingsList]);
 
-  const firstAvailableQueryName = useMemo(() => {
-    return availableQueryNames[0] ?? NO_INDEX_AVAILABLE;
-  }, [availableQueryNames]);
+  const firstAvailableQueryIndex = useMemo(() => {
+    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;
+  }, [availableQueryIndexes]);
 
   const defaultQuerySettings: QuerySettingsOptions = {
-    queryName: firstAvailableQueryName,
+    queryIndex: firstAvailableQueryIndex,
   };
 
   const addQuerySettingsInput = (): void => {
@@ -268,9 +268,9 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
             inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}
             key={i}
             querySettings={querySettings}
-            availableQueryNames={availableQueryNames}
-            onQueryNameChange={(e) => {
-              handleQueryNameChange(e, i);
+            availableQueryIndexes={availableQueryIndexes}
+            onQueryIndexChange={(e) => {
+              handleQueryIndexChange(e, i);
             }}
             onColorModeChange={(e) => handleColorModeChange(e, i)}
             onColorValueChange={(color) => handleColorValueChange(color, i)}
@@ -291,7 +291,7 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
           />
         ))
       )}
-      {queryDefinitions.length > 0 && firstAvailableQueryName !== NO_INDEX_AVAILABLE && (
+      {queryDefinitions.length > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (
         <Button variant="contained" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>
           Add Query Settings
         </Button>
@@ -302,8 +302,8 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
 
 interface QuerySettingsInputProps {
   querySettings: QuerySettingsOptions;
-  availableQueryNames: string[];
-  onQueryNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  availableQueryIndexes: string[];
+  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onColorValueChange: (colorValue: string) => void;
   onLineStyleChange: (lineStyle: string) => void;
@@ -323,9 +323,9 @@ interface QuerySettingsInputProps {
 }
 
 function QuerySettingsInput({
-  querySettings: { queryName, colorMode, colorValue, lineStyle, areaOpacity, format },
-  availableQueryNames,
-  onQueryNameChange,
+  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },
+  availableQueryIndexes,
+  onQueryIndexChange,
   onColorModeChange,
   onColorValueChange,
   onLineStyleChange,
@@ -343,7 +343,7 @@ function QuerySettingsInput({
   onFormatChange,
 }: QuerySettingsInputProps): ReactElement {
   // current query index should also be selectable
-  const selectableQueryName = availableQueryNames.sort((a, b) => a.localeCompare(b));
+  const selectableQueryIndex = availableQueryIndexes.sort((a, b) => a.localeCompare(b));
 
   // State for dropdown menu
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -394,13 +394,13 @@ function QuerySettingsInput({
         <TextField
           select
           inputRef={inputRef}
-          value={queryName}
+          value={queryIndex}
           label="Query"
-          onChange={onQueryNameChange}
+          onChange={onQueryIndexChange}
           sx={{ minWidth: '75px' }}
         >
-          <MenuItem value={queryName}>{queryName}</MenuItem>
-          {selectableQueryName.map((qi) => (
+          <MenuItem value={queryIndex}>{queryIndex}</MenuItem>
+          {selectableQueryIndex.map((qi) => (
             <MenuItem key={`query-${qi}`} value={qi}>
               {qi}
             </MenuItem>
@@ -415,7 +415,7 @@ function QuerySettingsInput({
               <MenuItem value="fixed">Fixed</MenuItem>
             </TextField>
             <OptionsColorPicker
-              label={queryName}
+              label={queryIndex}
               color={colorValue || DEFAULT_COLOR_VALUE}
               onColorChange={onColorValueChange}
             />
@@ -507,7 +507,7 @@ function QuerySettingsInput({
       </Stack>
       {/* Delete Button for this query settings */}
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <IconButton aria-label={`delete settings for query '${queryName}'`} onClick={onDelete}>
+        <IconButton aria-label={`delete settings for query '${queryIndex}'`} onClick={onDelete}>
           <DeleteIcon />
         </IconButton>
       </Box>
diff --git a/timeserieschart/src/TimeSeriesChartPanel.tsx b/timeserieschart/src/TimeSeriesChartPanel.tsx
@@ -212,7 +212,7 @@ export function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement
       // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
       let querySettings: QuerySettingsOptions | undefined;
       for (const item of querySettingsList ?? []) {
-        if (item.queryName === result.definition.spec.name || item.queryName === defaultQueryName(queryIndex)) {
+        if (item.queryIndex === result.definition.spec.name || item.queryIndex === defaultQueryName(queryIndex)) {
           querySettings = item;
           // We don't break the loop here just in case there are multiple querySettings defined for the
           // same queryIndex, because in that case we want the last one to take precedence.
diff --git a/timeserieschart/src/time-series-chart-model.ts b/timeserieschart/src/time-series-chart-model.ts
@@ -40,7 +40,7 @@ export interface TimeSeriesChartOptions {
 }
 
 export interface QuerySettingsOptions {
-  queryName: string;
+  queryIndex: string;
   colorMode?: 'fixed' | 'fixed-single';
   colorValue?: string;
   lineStyle?: LineStyleType;
diff --git a/timeserieschart/src/utils/palette-gen.test.ts b/timeserieschart/src/utils/palette-gen.test.ts
@@ -120,7 +120,7 @@ describe('getSeriesColor', () => {
       seriesName: testSeriesName,
       seriesIndex: 0,
       querySettings: {
-        queryName: defaultQueryName(0),
+        queryIndex: defaultQueryName(0),
         colorMode: 'fixed',
         colorValue: '#000',
       },
@@ -143,7 +143,7 @@ describe('getSeriesColor', () => {
       seriesName: testSeriesName,
       seriesIndex: 0,
       querySettings: {
-        queryName: defaultQueryName(0),
+        queryIndex: defaultQueryName(0),
         colorMode: 'fixed',
         colorValue: '#000',
       },
@@ -166,7 +166,7 @@ describe('getSeriesColor', () => {
       seriesName: testSeriesName,
       seriesIndex: 0,
       querySettings: {
-        queryName: defaultQueryName(0),
+        queryIndex: defaultQueryName(0),
         colorMode: 'fixed-single',
         colorValue: '#000',
       },
@@ -189,7 +189,7 @@ describe('getSeriesColor', () => {
       seriesName: testSeriesName,
       seriesIndex: 0,
       querySettings: {
-        queryName: defaultQueryName(0),
+        queryIndex: defaultQueryName(0),
         colorMode: 'fixed-single',
         colorValue: '#000',
       },

Original file line number	Diff line number	Diff line change
`@@ -7,28 +7,28 @@`
`7`	`7`	`},`
`8`	`8`	`"querySettings": [`
`9`	`9`	`{`
`10`		`- "queryName": "Query #1",`
	`10`	`+ "queryIndex": "Query #1",`
`11`	`11`	`"colorMode": "fixed",`
`12`	`12`	`"colorValue": "#EAB839"`
`13`	`13`	`},`
`14`	`14`	`{`
`15`		`- "queryName": "Query #2",`
	`15`	`+ "queryIndex": "Query #2",`
`16`	`16`	`"colorMode": "fixed",`
`17`	`17`	`"colorValue": "#0A437C"`
`18`	`18`	`},`
`19`	`19`	`{`
`20`		`- "queryName": "Query #3",`
	`20`	`+ "queryIndex": "Query #3",`
`21`	`21`	`"colorMode": "fixed",`
`22`	`22`	`"colorValue": "#890F02",`
`23`	`23`	`"areaOpacity": 1`
`24`	`24`	`},`
`25`	`25`	`{`
`26`		`- "queryName": "Query #5",`
	`26`	`+ "queryIndex": "Query #5",`
`27`	`27`	`"colorMode": "fixed",`
`28`	`28`	`"colorValue": "#6D1F62"`
`29`	`29`	`},`
`30`	`30`	`{`
`31`		`- "queryName": "Query #6",`
	`31`	`+ "queryIndex": "Query #6",`
`32`	`32`	`"colorMode": "fixed",`
`33`	`33`	`"colorValue": "#052B51"`
`34`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ spec: close({`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`#querySettings: [...{`
`65`		`- queryName: strings.MinRunes(1)`
	`65`	`+ queryIndex: strings.MinRunes(1)`
`66`	`66`	`colorMode?: "fixed" \| "fixed-single" // NB: "palette" could be added later`
`67`	`67`	`colorValue?: =~"^#(?:[0-9a-fA-F]{3}){1,2}$" // hexadecimal color code`
`68`	`68`	`lineStyle?: #lineStyle`
Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ const (`
`121`	`121`	`)`
`122`	`122`
`123`	`123`	`type QuerySettingsItem struct {`
`124`		- QueryName string `json:"queryName" yaml:"queryName"`
	`124`	+ QueryIndex string `json:"queryIndex" yaml:"queryIndex"`
`125`	`125`	ColorMode ColorMode `json:"colorMode,omitempty" yaml:"colorMode,omitempty"`
`126`	`126`	ColorValue string `json:"colorValue,omitempty" yaml:"colorValue,omitempty"`
`127`	`127`	LineStyle string `json:"lineStyle,omitempty" yaml:"lineStyle,omitempty"`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export interface TimeSeriesChartOptions {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`export interface QuerySettingsOptions {`
`43`		`- queryName: string;`
	`43`	`+ queryIndex: string;`
`44`	`44`	`colorMode?: 'fixed' \| 'fixed-single';`
`45`	`45`	`colorValue?: string;`
`46`	`46`	`lineStyle?: LineStyleType;`