Align with shared

Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>

Author: Gladorme

timeserieschart/src/QuerySettingsEditor.tsx

@@ -25,7 +25,7 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { FormatControls, FormatOptions, OptionsColorPicker, UnitSelector } from '@perses-dev/components';
+import { FormatControls, FormatOptions, OptionsColorPicker } from '@perses-dev/components';
 import React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import AddIcon from 'mdi-material-ui/Plus';

timeserieschart/src/TimeSeriesChartPanel.tsx

@@ -21,9 +21,9 @@ import {
   useTimeRange,
   validateLegendSpec,
   legendValues,
-  getQueryName,
   getCalculations,
   CalculationType,
+  defaultQueryName,
 } from '@perses-dev/plugin-system';
 import {
   ChartInstance,
@@ -164,10 +164,6 @@ export function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement
     [annotationsWithData]
   );
 
-  const queryDefinitions = useMemo(() => {
-    return queryResults.map((queryResult) => queryResult.definition);
-  }, [queryResults]);
-
   // Populate series data based on query results
   const {
     timeScale,
@@ -216,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 === getQueryName(queryDefinitions, result.definition)) {
+        if (item.queryName === result.definition.spec.name || item.queryName === 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.