State Timeline: Fix crash when hovering over panel (#35692)

* State Timeline: Fix crash when hovering over panel

* Refactor: fixes after PR comments

* Chore: fixes infinite loop

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

@@ -42,7 +42,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
 
       return (
         <StateTimelineTooltip
-          data={data.series}
+          data={frames ?? []}
           alignedData={alignedData}
           seriesIdx={seriesIdx}
           datapointIdx={datapointIdx}
@@ -50,7 +50,7 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
         />
       );
     },
-    [timeZone, data]
+    [timeZone, frames]
   );
 
   if (!frames || warn) {

public/app/plugins/panel/state-timeline/utils.ts

@@ -1,29 +1,29 @@
 import React from 'react';
 import { XYFieldMatchers } from '@grafana/ui/src/components/GraphNG/types';
 import {
+  ArrayVector,
   DataFrame,
+  FALLBACK_COLOR,
+  Field,
+  FieldColorModeId,
   FieldConfig,
+  FieldType,
   formattedValueToString,
   getFieldDisplayName,
-  outerJoinDataFrames,
-  Field,
-  FALLBACK_COLOR,
-  FieldType,
-  ArrayVector,
-  FieldColorModeId,
   getValueFormat,
-  ThresholdsMode,
   GrafanaTheme2,
+  outerJoinDataFrames,
+  ThresholdsMode,
 } from '@grafana/data';
 import {
-  UPlotConfigBuilder,
   FIXED_UNIT,
   SeriesVisibilityChangeMode,
+  UPlotConfigBuilder,
   UPlotConfigPrepFn,
-  VizLegendOptions,
   VizLegendItem,
+  VizLegendOptions,
 } from '@grafana/ui';
-import { TimelineCoreOptions, getConfig } from './timeline';
+import { getConfig, TimelineCoreOptions } from './timeline';
 import { AxisPlacement, ScaleDirection, ScaleOrientation } from '@grafana/ui/src/components/uPlot/config';
 import { TimelineFieldConfig, TimelineOptions } from './types';
 import { PlotTooltipInterpolator } from '@grafana/ui/src/components/uPlot/types';
@@ -401,12 +401,12 @@ export function findNextStateIndex(field: Field, datapointIdx: number) {
   let end;
   let rightPointer = datapointIdx + 1;
 
-  if (rightPointer === field.values.length) {
+  if (rightPointer >= field.values.length) {
     return null;
   }
 
   while (end === undefined) {
-    if (rightPointer === field.values.length) {
+    if (rightPointer >= field.values.length) {
       return null;
     }
     const rightValue = field.values.get(rightPointer);