Explore: Pass the dataframes along with the time range of the data (#90594)

* Explore: Pass the dataframes along with the time range of the data (#90259)

* Use data time range for rendering instead of selected range from the picker

* Update CustomContainer to use data time range

* Update test

(cherry picked from commit 58285e37a2)

* Memoize visible range passed to LogsVolumePanel

* Ensure onHiddenSeriesChanged is called only when hidden frames change

public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx

@@ -24,10 +24,6 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => {
   const isTimeSeriesData = isTimeSeriesFrames(data.series);
   const statusMessage = getStatusMessage(data);
   const thresholdsStyle = thresholdsType ? { mode: thresholdsType } : undefined;
-  const timeRange = {
-    from: data.timeRange.from.valueOf(),
-    to: data.timeRange.to.valueOf(),
-  };
 
   return (
     <div className={styles.wrapper}>
@@ -41,7 +37,7 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => {
                 eventBus={appEvents}
                 height={300}
                 width={width}
-                absoluteRange={timeRange}
+                timeRange={data.timeRange}
                 timeZone="browser"
                 onChangeTime={() => {}}
                 splitOpenFn={() => {}}

public/app/features/explore/CustomContainer.tsx

@@ -1,6 +1,4 @@
-import { useMemo } from 'react';
-
-import { AbsoluteTimeRange, DataFrame, dateTime, EventBus, LoadingState, SplitOpen } from '@grafana/data';
+import { DataFrame, EventBus, LoadingState, SplitOpen, TimeRange } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
 import { PanelChrome, PanelContext, PanelContextProvider } from '@grafana/ui';
 
@@ -14,7 +12,7 @@ export interface Props {
   timeZone: string;
   pluginId: string;
   frames: DataFrame[];
-  absoluteRange: AbsoluteTimeRange;
+  timeRange: TimeRange;
   state: LoadingState;
   splitOpenFn: SplitOpen;
   eventBus: EventBus;
@@ -27,22 +25,10 @@ export function CustomContainer({
   state,
   pluginId,
   frames,
-  absoluteRange,
+  timeRange,
   splitOpenFn,
   eventBus,
 }: Props) {
-  const timeRange = useMemo(
-    () => ({
-      from: dateTime(absoluteRange.from),
-      to: dateTime(absoluteRange.to),
-      raw: {
-        from: dateTime(absoluteRange.from),
-        to: dateTime(absoluteRange.to),
-      },
-    }),
-    [absoluteRange.from, absoluteRange.to]
-  );
-
   const plugin = getPanelPluginMeta(pluginId);
 
   const dataLinkPostProcessor = useExploreDataLinkPostProcessor(splitOpenFn, timeRange);

public/app/features/explore/Explore.test.tsx

@@ -83,10 +83,6 @@ const dummyProps: Props = {
   syncedTimes: false,
   updateTimeRange: jest.fn(),
   graphResult: [],
-  absoluteRange: {
-    from: 0,
-    to: 0,
-  },
   timeZone: 'UTC',
   queryResponse: makeEmptyQueryResponse(LoadingState.NotStarted),
   addQueryRow: jest.fn(),

public/app/features/explore/Explore.tsx

@@ -336,7 +336,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
   }
 
   renderCustom(width: number) {
-    const { timeZone, queryResponse, absoluteRange, eventBus } = this.props;
+    const { timeZone, queryResponse, eventBus } = this.props;
 
     const groupedByPlugin = groupBy(queryResponse?.customFrames, 'meta.preferredVisualisationPluginId');
 
@@ -349,7 +349,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
             pluginId={pluginId}
             frames={frames}
             state={queryResponse.state}
-            absoluteRange={absoluteRange}
+            timeRange={queryResponse.timeRange}
             height={400}
             width={width}
             splitOpenFn={this.onSplitOpen(pluginId)}
@@ -361,7 +361,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
   }
 
   renderGraphPanel(width: number) {
-    const { graphResult, absoluteRange, timeZone, queryResponse, showFlameGraph } = this.props;
+    const { graphResult, timeZone, queryResponse, showFlameGraph } = this.props;
 
     return (
       <ContentOutlineItem panelId="Graph" title="Graph" icon="graph-bar">
@@ -369,7 +369,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
           data={graphResult!}
           height={showFlameGraph ? 180 : 400}
           width={width}
-          absoluteRange={absoluteRange}
+          timeRange={queryResponse.timeRange}
           timeZone={timeZone}
           onChangeTime={this.onUpdateTimeRange}
           annotations={queryResponse.annotations}
@@ -676,7 +676,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     showTable,
     showTrace,
     showCustom,
-    absoluteRange,
     queryResponse,
     showNodeGraph,
     showFlameGraph,
@@ -697,7 +696,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     isLive,
     graphResult,
     logsResult: logsResult ?? undefined,
-    absoluteRange,
     queryResponse,
     syncedTimes,
     timeZone,

public/app/features/explore/Graph/ExploreGraph.tsx

@@ -1,7 +1,6 @@
-import { identity } from 'lodash';
+import { identity, isEqual, sortBy } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
-import { usePrevious } from 'react-use';
 
 import {
   AbsoluteTimeRange,
@@ -9,7 +8,6 @@ import {
   createFieldConfigRegistry,
   DashboardCursorSync,
   DataFrame,
-  dateTime,
   EventBus,
   FieldColorModeId,
   FieldConfigSource,
@@ -17,6 +15,7 @@ import {
   LoadingState,
   SplitOpen,
   ThresholdsConfig,
+  TimeRange,
 } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
 import {
@@ -44,7 +43,7 @@ interface Props {
   data: DataFrame[];
   height: number;
   width: number;
-  absoluteRange: AbsoluteTimeRange;
+  timeRange: TimeRange;
   timeZone: TimeZone;
   loadingState: LoadingState;
   annotations?: DataFrame[];
@@ -67,7 +66,7 @@ export function ExploreGraph({
   height,
   width,
   timeZone,
-  absoluteRange,
+  timeRange,
   onChangeTime,
   loadingState,
   annotations,
@@ -84,19 +83,6 @@ export function ExploreGraph({
   toggleLegendRef,
 }: Props) {
   const theme = useTheme2();
-  const previousTimeRange = usePrevious(absoluteRange);
-  const baseTimeRange = loadingState === LoadingState.Loading && previousTimeRange ? previousTimeRange : absoluteRange;
-  const timeRange = useMemo(
-    () => ({
-      from: dateTime(baseTimeRange.from),
-      to: dateTime(baseTimeRange.to),
-      raw: {
-        from: dateTime(baseTimeRange.from),
-        to: dateTime(baseTimeRange.to),
-      },
-    }),
-    [baseTimeRange.from, baseTimeRange.to]
-  );
 
   const fieldConfigRegistry = useMemo(
     () => createFieldConfigRegistry(getGraphFieldConfig(defaultGraphConfig), 'Explore'),
@@ -156,6 +142,7 @@ export function ExploreGraph({
   const structureRev = useStructureRev(dataWithConfig);
 
   const onHiddenSeriesChangedRef = useRef(onHiddenSeriesChanged);
+  const previousHiddenFrames = useRef<string[] | undefined>(undefined);
 
   useEffect(() => {
     if (onHiddenSeriesChangedRef.current) {
@@ -166,7 +153,13 @@ export function ExploreGraph({
           hiddenFrames.push(getFrameDisplayName(frame));
         }
       });
-      onHiddenSeriesChangedRef.current(hiddenFrames);
+      if (
+        previousHiddenFrames.current === undefined ||
+        !isEqual(sortBy(hiddenFrames), sortBy(previousHiddenFrames.current))
+      ) {
+        previousHiddenFrames.current = hiddenFrames;
+        onHiddenSeriesChangedRef.current(hiddenFrames);
+      }
     }
   }, [dataWithConfig]);
 

public/app/features/explore/Graph/GraphContainer.tsx

@@ -11,6 +11,7 @@ import {
   LoadingState,
   ThresholdsConfig,
   GrafanaTheme2,
+  TimeRange,
 } from '@grafana/data';
 import {
   GraphThresholdsStyleConfig,
@@ -38,7 +39,7 @@ interface Props extends Pick<PanelChromeProps, 'statusMessage'> {
   data: DataFrame[];
   annotations?: DataFrame[];
   eventBus: EventBus;
-  absoluteRange: AbsoluteTimeRange;
+  timeRange: TimeRange;
   timeZone: TimeZone;
   onChangeTime: (absoluteRange: AbsoluteTimeRange) => void;
   splitOpenFn: SplitOpen;
@@ -52,7 +53,7 @@ export const GraphContainer = ({
   eventBus,
   height,
   width,
-  absoluteRange,
+  timeRange,
   timeZone,
   annotations,
   onChangeTime,
@@ -112,7 +113,7 @@ export const GraphContainer = ({
           data={slicedData}
           height={innerHeight}
           width={innerWidth}
-          absoluteRange={absoluteRange}
+          timeRange={timeRange}
           onChangeTime={onChangeTime}
           timeZone={timeZone}
           annotations={annotations}

public/app/features/explore/Logs/LogsVolumePanel.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 
-import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data';
+import { DataQueryResponse, LoadingState, EventBusSrv, dateTime } from '@grafana/data';
 
 import { LogsVolumePanel } from './LogsVolumePanel';
 
@@ -14,7 +14,7 @@ jest.mock('../Graph/ExploreGraph', () => {
 function renderPanel(logsVolumeData: DataQueryResponse) {
   render(
     <LogsVolumePanel
-      absoluteRange={{ from: 0, to: 1 }}
+      timeRange={{ from: dateTime(0), to: dateTime(1), raw: { from: dateTime(0), to: dateTime(1) } }}
       timeZone="timeZone"
       splitOpen={() => {}}
       width={100}

public/app/features/explore/Logs/LogsVolumePanel.tsx

@@ -10,6 +10,7 @@ import {
   EventBus,
   GrafanaTheme2,
   DataFrame,
+  TimeRange,
 } from '@grafana/data';
 import { TimeZone } from '@grafana/schema';
 import { Icon, SeriesVisibilityChangeMode, Tooltip, TooltipDisplayMode, useStyles2, useTheme2 } from '@grafana/ui';
@@ -20,7 +21,7 @@ import { ExploreGraph } from '../Graph/ExploreGraph';
 type Props = {
   logsVolumeData: DataQueryResponse;
   allLogsVolumeMaximum: number;
-  absoluteRange: AbsoluteTimeRange;
+  timeRange: TimeRange;
   timeZone: TimeZone;
   splitOpen: SplitOpen;
   width: number;
@@ -86,7 +87,7 @@ export function LogsVolumePanel(props: Props) {
         data={logsVolumeData.data}
         height={height}
         width={width - spacing * 2}
-        absoluteRange={props.absoluteRange}
+        timeRange={props.timeRange}
         onChangeTime={onUpdateTimeRange}
         timeZone={timeZone}
         splitOpenFn={splitOpen}

public/app/features/explore/Logs/LogsVolumePanelList.tsx

@@ -8,10 +8,12 @@ import {
   DataFrame,
   DataQueryResponse,
   DataTopic,
+  dateTime,
   EventBus,
   GrafanaTheme2,
   LoadingState,
   SplitOpen,
+  TimeRange,
   TimeZone,
 } from '@grafana/data';
 import { Button, InlineField, Alert, useStyles2, SeriesVisibilityChangeMode } from '@grafana/ui';
@@ -86,10 +88,9 @@ export const LogsVolumePanelList = ({
 
   const timeoutError = isTimeoutErrorResponse(logsVolumeData);
 
-  const visibleRange = {
-    from: Math.max(absoluteRange.from, allLogsVolumeMaximumRange.from),
-    to: Math.min(absoluteRange.to, allLogsVolumeMaximumRange.to),
-  };
+  const from = dateTime(Math.max(absoluteRange.from, allLogsVolumeMaximumRange.from));
+  const to = dateTime(Math.min(absoluteRange.to, allLogsVolumeMaximumRange.to));
+  const visibleRange: TimeRange = { from, to, raw: { from, to } };
 
   if (logsVolumeData?.state === LoadingState.Loading) {
     return <span>Loading...</span>;
@@ -126,7 +127,7 @@ export const LogsVolumePanelList = ({
           <LogsVolumePanel
             toggleLegendRef={toggleLegendRef}
             key={index}
-            absoluteRange={visibleRange}
+            timeRange={visibleRange}
             allLogsVolumeMaximum={allLogsVolumeMaximumValue}
             width={width}
             logsVolumeData={logsVolumeData}