Fix: Recalculate intervals in Explore on run queries (#16510)

Fixes: #16485

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

@@ -209,6 +209,10 @@ export interface LoadExploreDataSourcesPayload {
   exploreDatasources: DataSourceSelectItem[];
 }
 
+export interface RunQueriesPayload {
+  exploreId: ExploreId;
+}
+
 /**
  * Adds a query row after the row with the given index.
  */
@@ -324,7 +328,8 @@ export const queryTransactionSuccessAction = actionCreatorFactory<QueryTransacti
  * Remove query row of the given index, as well as associated query results.
  */
 export const removeQueryRowAction = actionCreatorFactory<RemoveQueryRowPayload>('explore/REMOVE_QUERY_ROW').create();
-export const runQueriesAction = noPayloadActionCreatorFactory('explore/RUN_QUERIES').create();
+
+export const runQueriesAction = actionCreatorFactory<RunQueriesPayload>('explore/RUN_QUERIES').create();
 
 /**
  * Start a scan for more results using the given scanner.

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

@@ -553,7 +553,7 @@ export function runQueries(exploreId: ExploreId, ignoreUIState = false): ThunkRe
     // but we're using the datasource interval limit for now
     const interval = datasourceInstance.interval;
 
-    dispatch(runQueriesAction());
+    dispatch(runQueriesAction({ exploreId }));
     // Keep table queries first since they need to return quickly
     if ((ignoreUIState || showingTable) && supportsTable) {
       dispatch(

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

@@ -20,6 +20,7 @@ import {
   splitCloseAction,
   SplitCloseActionPayload,
   loadExploreDatasources,
+  runQueriesAction,
 } from './actionTypes';
 import { reducerFactory } from 'app/core/redux';
 import {
@@ -165,14 +166,8 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
   .addMapper({
     filter: changeSizeAction,
     mapper: (state, action): ExploreItemState => {
-      const { range, datasourceInstance } = state;
-      let interval = '1s';
-      if (datasourceInstance && datasourceInstance.interval) {
-        interval = datasourceInstance.interval;
-      }
       const containerWidth = action.payload.width;
-      const queryIntervals = getIntervals(range, interval, containerWidth);
+      return { ...state, containerWidth };
-      return { ...state, containerWidth, queryIntervals };
     },
   })
   .addMapper({
@@ -266,13 +261,9 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
   .addMapper({
     filter: loadDatasourceReadyAction,
     mapper: (state, action): ExploreItemState => {
-      const { containerWidth, range, datasourceInstance } = state;
       const { history } = action.payload;
-      const queryIntervals = getIntervals(range, datasourceInstance.interval, containerWidth);
-
       return {
         ...state,
-        queryIntervals,
         history,
         datasourceLoading: false,
         datasourceMissing: false,
@@ -559,6 +550,21 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
       };
     },
   })
+  .addMapper({
+    filter: runQueriesAction,
+    mapper: (state): ExploreItemState => {
+      const { range, datasourceInstance, containerWidth } = state;
+      let interval = '1s';
+      if (datasourceInstance && datasourceInstance.interval) {
+        interval = datasourceInstance.interval;
+      }
+      const queryIntervals = getIntervals(range, interval, containerWidth);
+      return {
+        ...state,
+        queryIntervals,
+      };
+    },
+  })
   .create();
 
 export const updateChildRefreshState = (