Explore: Cancel previous queries when a new query is run (#76674)

* Cancel streaming queries before running new queries

* Cancel previous queries when a new query is run

* Remove redundant dependency

---------

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>

public/app/features/explore/state/query.test.ts

@@ -242,6 +242,16 @@ describe('running queries', () => {
       cleanSupplementaryQueryAction({ exploreId, type: SupplementaryQueryType.LogsSample }),
     ]);
   });
+  it('should cancel running query when a new query is issued', async () => {
+    const initialState = {
+      ...makeExplorePaneState(),
+    };
+    const dispatchedActions = await thunkTester(initialState)
+      .givenThunk(runQueries)
+      .whenThunkIsDispatched({ exploreId });
+
+    expect(dispatchedActions).toContainEqual(cancelQueriesAction({ exploreId }));
+  });
 });
 
 describe('changeQueries', () => {

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

@@ -497,6 +497,8 @@ interface RunQueriesOptions {
 export const runQueries = createAsyncThunk<void, RunQueriesOptions>(
   'explore/runQueries',
   async ({ exploreId, preserveCache }, { dispatch, getState }) => {
+    dispatch(cancelQueries(exploreId));
+
     dispatch(updateTime({ exploreId }));
 
     const correlations$ = getCorrelations(exploreId);
@@ -954,10 +956,15 @@ export const queryReducer = (state: ExploreItemState, action: AnyAction): Explor
 
     return {
       ...state,
-      queryResponse: {
-        ...state.queryResponse,
-        state: LoadingState.Done,
-      },
+      // mark existing request as done (may be incomplete)
+      ...(state.queryResponse
+        ? {
+            queryResponse: {
+              ...state.queryResponse,
+              state: LoadingState.Done,
+            },
+          }
+        : {}),
     };
   }