Revert "Explore: Pass the dataframes along with the time range of the data" (#90551)

Revert "Explore: Pass the dataframes along with the time range of the data (#…"

This reverts commit 58285e37a2.

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

@@ -24,6 +24,10 @@ 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}>
@@ -37,7 +41,7 @@ export const VizWrapper = ({ data, thresholds, thresholdsType }: Props) => {
                 eventBus={appEvents}
                 height={300}
                 width={width}
-                timeRange={data.timeRange}
+                absoluteRange={timeRange}
                 timeZone="browser"
                 onChangeTime={() => {}}
                 splitOpenFn={() => {}}

public/app/features/explore/CustomContainer.tsx

@@ -1,4 +1,6 @@
-import { DataFrame, EventBus, LoadingState, SplitOpen, TimeRange } from '@grafana/data';
+import { useMemo } from 'react';
+
+import { AbsoluteTimeRange, DataFrame, dateTime, EventBus, LoadingState, SplitOpen } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
 import { PanelChrome, PanelContext, PanelContextProvider } from '@grafana/ui';
 
@@ -12,7 +14,7 @@ export interface Props {
   timeZone: string;
   pluginId: string;
   frames: DataFrame[];
-  timeRange: TimeRange;
+  absoluteRange: AbsoluteTimeRange;
   state: LoadingState;
   splitOpenFn: SplitOpen;
   eventBus: EventBus;
@@ -25,10 +27,22 @@ export function CustomContainer({
   state,
   pluginId,
   frames,
-  timeRange,
+  absoluteRange,
   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,6 +83,10 @@ 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, eventBus } = this.props;
+    const { timeZone, queryResponse, absoluteRange, 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}
-            timeRange={queryResponse.timeRange}
+            absoluteRange={absoluteRange}
             height={400}
             width={width}
             splitOpenFn={this.onSplitOpen(pluginId)}
@@ -361,7 +361,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
   }
 
   renderGraphPanel(width: number) {
-    const { graphResult, timeZone, queryResponse, showFlameGraph } = this.props;
+    const { graphResult, absoluteRange, 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}
-          timeRange={queryResponse.timeRange}
+          absoluteRange={absoluteRange}
           timeZone={timeZone}
           onChangeTime={this.onUpdateTimeRange}
           annotations={queryResponse.annotations}
@@ -676,6 +676,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     showTable,
     showTrace,
     showCustom,
+    absoluteRange,
     queryResponse,
     showNodeGraph,
     showFlameGraph,
@@ -696,6 +697,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps) {
     isLive,
     graphResult,
     logsResult: logsResult ?? undefined,
+    absoluteRange,
     queryResponse,
     syncedTimes,
     timeZone,

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

@@ -1,6 +1,7 @@
 import { identity } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
+import { usePrevious } from 'react-use';
 
 import {
   AbsoluteTimeRange,
@@ -8,6 +9,7 @@ import {
   createFieldConfigRegistry,
   DashboardCursorSync,
   DataFrame,
+  dateTime,
   EventBus,
   FieldColorModeId,
   FieldConfigSource,
@@ -15,7 +17,6 @@ import {
   LoadingState,
   SplitOpen,
   ThresholdsConfig,
-  TimeRange,
 } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
 import {
@@ -43,7 +44,7 @@ interface Props {
   data: DataFrame[];
   height: number;
   width: number;
-  timeRange: TimeRange;
+  absoluteRange: AbsoluteTimeRange;
   timeZone: TimeZone;
   loadingState: LoadingState;
   annotations?: DataFrame[];
@@ -66,7 +67,7 @@ export function ExploreGraph({
   height,
   width,
   timeZone,
-  timeRange,
+  absoluteRange,
   onChangeTime,
   loadingState,
   annotations,
@@ -83,6 +84,19 @@ 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'),

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

@@ -11,7 +11,6 @@ import {
   LoadingState,
   ThresholdsConfig,
   GrafanaTheme2,
-  TimeRange,
 } from '@grafana/data';
 import {
   GraphThresholdsStyleConfig,
@@ -39,7 +38,7 @@ interface Props extends Pick<PanelChromeProps, 'statusMessage'> {
   data: DataFrame[];
   annotations?: DataFrame[];
   eventBus: EventBus;
-  timeRange: TimeRange;
+  absoluteRange: AbsoluteTimeRange;
   timeZone: TimeZone;
   onChangeTime: (absoluteRange: AbsoluteTimeRange) => void;
   splitOpenFn: SplitOpen;
@@ -53,7 +52,7 @@ export const GraphContainer = ({
   eventBus,
   height,
   width,
-  timeRange,
+  absoluteRange,
   timeZone,
   annotations,
   onChangeTime,
@@ -113,7 +112,7 @@ export const GraphContainer = ({
           data={slicedData}
           height={innerHeight}
           width={innerWidth}
-          timeRange={timeRange}
+          absoluteRange={absoluteRange}
           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, dateTime } from '@grafana/data';
+import { DataQueryResponse, LoadingState, EventBusSrv } from '@grafana/data';
 
 import { LogsVolumePanel } from './LogsVolumePanel';
 
@@ -14,7 +14,7 @@ jest.mock('../Graph/ExploreGraph', () => {
 function renderPanel(logsVolumeData: DataQueryResponse) {
   render(
     <LogsVolumePanel
-      timeRange={{ from: dateTime(0), to: dateTime(1), raw: { from: dateTime(0), to: dateTime(1) } }}
+      absoluteRange={{ from: 0, to: 1 }}
       timeZone="timeZone"
       splitOpen={() => {}}
       width={100}

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

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

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

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