fix(dashboard): refresh tabs as they load when dashboard is refreshed

Author: msyavuz

superset-frontend/src/dashboard/components/gridComponents/Tab/Tab.jsx

@@ -16,14 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Fragment, useCallback, memo } from 'react';
+import { Fragment, useCallback, memo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { styled, t } from '@superset-ui/core';
 
 import { EditableTitle, EmptyState } from '@superset-ui/core/components';
-import { setEditMode } from 'src/dashboard/actions/dashboardState';
+import { setEditMode, onRefresh } from 'src/dashboard/actions/dashboardState';
+import getChartIdsFromComponent from 'src/dashboard/util/getChartIdsFromComponent';
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';
 import AnchorLink from 'src/dashboard/components/AnchorLink';
 import {
@@ -113,6 +114,49 @@ const renderDraggableContent = dropProps =>
 const Tab = props => {
   const dispatch = useDispatch();
   const canEdit = useSelector(state => state.dashboardInfo.dash_edit_perm);
+  const dashboardLayout = useSelector(state => state.dashboardLayout.present);
+  const lastRefreshTime = useSelector(
+    state => state.dashboardState.lastRefreshTime,
+  );
+  const tabActivationTimes = useSelector(
+    state => state.dashboardState.tabActivationTimes || {},
+  );
+  const dashboardInfo = useSelector(state => state.dashboardInfo);
+
+  // Check if tab needs refresh when it becomes visible
+  useEffect(() => {
+    if (props.renderType === RENDER_TAB_CONTENT && props.isComponentVisible) {
+      const tabId = props.id;
+      const tabActivationTime = tabActivationTimes[tabId] || 0;
+
+      // If a refresh occurred while this tab was inactive,
+      // refresh the charts in this tab now that it's visible
+      if (
+        lastRefreshTime &&
+        tabActivationTime &&
+        lastRefreshTime > tabActivationTime
+      ) {
+        const chartIds = getChartIdsFromComponent(tabId, dashboardLayout);
+        if (chartIds.length > 0) {
+          // Small delay to ensure charts are fully mounted
+          setTimeout(() => {
+            // Refresh charts in this tab
+            dispatch(onRefresh(chartIds, true, 0, dashboardInfo.id));
+          }, 100);
+        }
+      }
+    }
+  }, [
+    props.isComponentVisible,
+    props.renderType,
+    props.id,
+    lastRefreshTime,
+    tabActivationTimes,
+    dashboardLayout,
+    dashboardInfo.id,
+    dispatch,
+  ]);
+
   const handleChangeTab = useCallback(
     ({ pathToTabIndex }) => {
       props.setDirectPathToChild(pathToTabIndex);

superset-frontend/src/dashboard/reducers/dashboardState.js

@@ -56,7 +56,17 @@ import { HYDRATE_DASHBOARD } from '../actions/hydrate';
 export default function dashboardStateReducer(state = {}, action) {
   const actionHandlers = {
     [HYDRATE_DASHBOARD]() {
-      return { ...state, ...action.data.dashboardState };
+      const hydratedState = { ...state, ...action.data.dashboardState };
+      // Initialize tab activation times for initially active tabs
+      if (hydratedState.activeTabs && hydratedState.activeTabs.length > 0) {
+        const now = Date.now();
+        hydratedState.tabActivationTimes =
+          hydratedState.tabActivationTimes || {};
+        hydratedState.activeTabs.forEach(tabId => {
+          hydratedState.tabActivationTimes[tabId] = now;
+        });
+      }
+      return hydratedState;
     },
     [ADD_SLICE]() {
       const updatedSliceIds = new Set(state.sliceIds);
@@ -178,6 +188,7 @@ export default function dashboardStateReducer(state = {}, action) {
       return {
         ...state,
         isRefreshing: true,
+        lastRefreshTime: Date.now(),
       };
     },
     [ON_FILTERS_REFRESH]() {
@@ -213,10 +224,17 @@ export default function dashboardStateReducer(state = {}, action) {
         .difference(new Set(action.activeTabs))
         .union(new Set(action.inactiveTabs));
 
+      // Track when each tab was last activated
+      const tabActivationTimes = { ...(state.tabActivationTimes || {}) };
+      action.activeTabs.forEach(tabId => {
+        tabActivationTimes[tabId] = Date.now();
+      });
+
       return {
         ...state,
         inactiveTabs: Array.from(newInactiveTabs),
         activeTabs: Array.from(newActiveTabs.union(new Set(action.activeTabs))),
+        tabActivationTimes,
       };
     },
     [SET_ACTIVE_TABS]() {

superset-frontend/src/dashboard/util/charts/useAllChartIds.ts

@@ -0,0 +1,29 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useSelector } from 'react-redux';
+import { useMemo } from 'react';
+import { RootState } from 'src/dashboard/types';
+import getChartIdsFromLayout from '../getChartIdsFromLayout';
+
+export const useAllChartIds = () => {
+  const layout = useSelector(
+    (state: RootState) => state.dashboardLayout.present,
+  );
+  return useMemo(() => getChartIdsFromLayout(layout), [layout]);
+};

superset-frontend/src/dashboard/util/getChartIdsFromComponent.ts

@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { CHART_TYPE } from './componentTypes';
+import type { DashboardLayout } from '../types';
+
+export default function getChartIdsFromComponent(
+  componentId: string,
+  layout: DashboardLayout,
+): number[] {
+  const chartIds: number[] = [];
+  const component = layout[componentId];
+
+  if (!component) return chartIds;
+
+  // If this component is a chart, add its ID
+  if (component.type === CHART_TYPE && component.meta?.chartId) {
+    chartIds.push(component.meta.chartId);
+  }
+
+  // Recursively check children
+  if (component.children) {
+    component.children.forEach((childId: string) => {
+      chartIds.push(...getChartIdsFromComponent(childId, layout));
+    });
+  }
+
+  return chartIds;
+}