QueryProcessing: Fixes showing last result in initial loading state (#19057)

* PanelQueryRunner: Need to cache preProcessPanelData function between runs so last result can be remembered

* Better fix for remembering lastResult

* Code simplification

* Simplify code a bit

public/app/features/dashboard/state/PanelQueryRunner.ts

@@ -44,6 +44,7 @@ export class PanelQueryRunner {
   private subject?: ReplaySubject<PanelData>;
   private subscription?: Unsubscribable;
   private transformations?: DataTransformerConfig[];
+  private lastResult?: PanelData;
 
   constructor() {
     this.subject = new ReplaySubject(1);
@@ -153,12 +154,10 @@ export class PanelQueryRunner {
       this.subscription.unsubscribe();
     }
 
-    // Makes sure everything is a proper DataFrame
-    const prepare = preProcessPanelData();
-
     this.subscription = observable.subscribe({
       next: (data: PanelData) => {
-        this.subject.next(prepare(data));
+        this.lastResult = preProcessPanelData(data, this.lastResult);
+        this.subject.next(this.lastResult);
       },
     });
   }

public/app/features/dashboard/state/runRequest.ts

@@ -187,25 +187,18 @@ export function getProcessedDataFrames(results?: DataQueryResponseData[]): DataF
   return dataFrames;
 }
 
-export function preProcessPanelData() {
-  let lastResult: PanelData = null;
+export function preProcessPanelData(data: PanelData, lastResult: PanelData) {
+  let { series } = data;
 
-  return function mapper(data: PanelData) {
-    let { series } = data;
-
-    //  for loading states with no data, use last result
-    if (data.state === LoadingState.Loading && series.length === 0) {
-      if (!lastResult) {
-        lastResult = data;
-      }
-
-      return { ...lastResult, state: LoadingState.Loading };
+  //  for loading states with no data, use last result
+  if (data.state === LoadingState.Loading && series.length === 0) {
+    if (!lastResult) {
+      lastResult = data;
     }
 
-    // Makes sure the data is properly formatted
-    series = getProcessedDataFrames(series);
+    return { ...lastResult, state: LoadingState.Loading };
+  }
 
-    lastResult = { ...data, series };
-    return lastResult;
-  };
+  // Makes sure the data is properly formatted
+  return getProcessedDataFrames(series);
 }

public/app/features/explore/state/actions.ts

@@ -439,6 +439,7 @@ export function runQueries(exploreId: ExploreId): ThunkResult<void> {
       queryIntervals,
       range,
       scanning,
+      queryResponse,
       querySubscription,
       history,
       mode,
@@ -479,7 +480,11 @@ export function runQueries(exploreId: ExploreId): ThunkResult<void> {
     let firstResponse = true;
 
     const newQuerySub = runRequest(datasourceInstance, transaction.request)
-      .pipe(map(preProcessPanelData()))
+      .pipe(
+        map((data: PanelData) => {
+          return preProcessPanelData(data, queryResponse);
+        })
+      )
       .subscribe((data: PanelData) => {
         if (!data.error && firstResponse) {
           // Side-effect: Saving history in localstorage

public/app/features/explore/state/reducers.ts

@@ -618,8 +618,8 @@ export const processQueryResponse = (
 
   const latency = request.endTime ? request.endTime - request.startTime : 0;
   const processor = new ResultProcessor(state, series);
-  const graphResult = processor.getGraphResult() || state.graphResult; // don't replace results until we receive new results
-  const tableResult = processor.getTableResult() || state.tableResult || new TableModel(); // don't replace results until we receive new results
+  const graphResult = processor.getGraphResult();
+  const tableResult = processor.getTableResult();
   const logsResult = processor.getLogsResult();
 
   // Send legacy data to Angular editors