Fix: State timeline panel tooltip error when data is not in sync (#39438

) (#39633)

* Fix: State timeline panel tooltip error when data is not in sync

* Move check from tooltip to panel

(cherry picked from commit 24475cf)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx

@@ -36,14 +36,25 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
 
   const renderCustomTooltip = useCallback(
     (alignedData: DataFrame, seriesIdx: number | null, datapointIdx: number | null) => {
+      const data = frames ?? [];
       // Not caring about multi mode in StateTimeline
       if (seriesIdx === null || datapointIdx === null) {
         return null;
       }
 
+      /**
+       * There could be a case when the tooltip shows a data from one of a multiple query and the other query finishes first
+       * from refreshing. This causes data to be out of sync. alignedData - 1 because Time field doesn't count.
+       * Render nothing in this case to prevent error.
+       * See https://github.com/grafana/support-escalations/issues/932
+       */
+      if (alignedData.fields.length - 1 !== data.length || !alignedData.fields[seriesIdx]) {
+        return null;
+      }
+
       return (
         <StateTimelineTooltip
-          data={frames ?? []}
+          data={data}
           alignedData={alignedData}
           seriesIdx={seriesIdx}
           datapointIdx={datapointIdx}

public/app/plugins/panel/state-timeline/StateTimelineTooltip.tsx

@@ -32,6 +32,7 @@ export const StateTimelineTooltip: React.FC<StateTimelineTooltipProps> = ({
   const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, timeZone, theme });
 
   const field = alignedData.fields[seriesIdx!];
+
   const dataFrameFieldIndex = field.state?.origin;
   const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme });
   const value = field.values.get(datapointIdx!);