Explore: Graph should reuse old time range while waiting for queries (#79725)

* Do not pass frames forward until data is done loading

* UsePrevious to get last timerange before query is done
This commit is contained in:
Kristina 2024-01-02 07:16:25 -06:00 committed by GitHub
parent 80da35f41d
commit 5e9e6ddaf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,5 +1,6 @@
import { identity } from 'lodash'; import { identity } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { usePrevious } from 'react-use';
import { import {
AbsoluteTimeRange, AbsoluteTimeRange,
@ -77,17 +78,18 @@ export function ExploreGraph({
eventBus, eventBus,
}: Props) { }: Props) {
const theme = useTheme2(); const theme = useTheme2();
const previousTimeRange = usePrevious(absoluteRange);
const baseTimeRange = loadingState === LoadingState.Loading && previousTimeRange ? previousTimeRange : absoluteRange;
const timeRange = useMemo( const timeRange = useMemo(
() => ({ () => ({
from: dateTime(absoluteRange.from), from: dateTime(baseTimeRange.from),
to: dateTime(absoluteRange.to), to: dateTime(baseTimeRange.to),
raw: { raw: {
from: dateTime(absoluteRange.from), from: dateTime(baseTimeRange.from),
to: dateTime(absoluteRange.to), to: dateTime(baseTimeRange.to),
}, },
}), }),
[absoluteRange.from, absoluteRange.to] [baseTimeRange.from, baseTimeRange.to]
); );
const fieldConfigRegistry = useMemo( const fieldConfigRegistry = useMemo(