diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx index 096c8e27798..cbc035e39d7 100755 --- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx +++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx @@ -37,14 +37,25 @@ export const StateTimelinePanel: React.FC = ({ 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 ( = ({ 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!);