Blank Charts while loading dashboard

[hk-the-analyst]

Bug description

When we are loading dashboards with multiple charts blank charts are shown at first which will show values only when forced refresh or on right-clicking the chart.

How to reproduce the bug

Create a dashboard with multiple charts under multiple tabs
Open the dashboard
Many charts will be blank the first time we are loading the chart

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Hey @hk-the-analyst! 👋 I'm here to help you with this bug. I'm a bot that can assist you with solving bugs, answering questions, and becoming a contributor.

To address the issue where dashboards with multiple charts initially display blank charts that only show values after a forced refresh or right-clicking on the chart, you can follow these steps:

1. Ensure Proper Resizing and Rendering:
   • Call the resize method when the Chart component is first mounted and when it becomes visible.

Here is an example of how you can update the Chart component:

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: props.width,
      height: props.height,
      descriptionHeight: 0,
    };

    this.resize = debounce(this.resize.bind(this), RESIZE_TIMEOUT);
  }

  componentDidMount() {
    if (this.props.isExpanded) {
      const descriptionHeight = this.getDescriptionHeight();
      this.setState({ descriptionHeight });
    }
    this.resize(); // Ensure resize is called when the component is first mounted
  }

  componentDidUpdate(prevProps) {
    if (this.props.isExpanded !== prevProps.isExpanded) {
      const descriptionHeight = this.getDescriptionHeight();
      this.setState({ descriptionHeight });
    }
    if (this.props.isComponentVisible && !prevProps.isComponentVisible) {
      this.resize(); // Ensure resize is called when the component becomes visible
    }
  }

  // ... rest of the code remains unchanged
}

2. Refresh Charts Properly:
   • Use the refreshCharts function from the dashboardState.js file to ensure that charts are refreshed properly.

Here is an example of how to use the refreshCharts function:

const refreshCharts = (chartList, force, interval, dashboardId, dispatch) =>
  new Promise(resolve => {
    dispatch(fetchCharts(chartList, force, interval, dashboardId));
    resolve();
  });

export const ON_REFRESH = 'ON_REFRESH';
export function onRefresh(
  chartList = [],
  force = false,
  interval = 0,
  dashboardId,
) {
  return dispatch => {
    dispatch({ type: ON_REFRESH });
    refreshCharts(chartList, force, interval, dashboardId, dispatch).then(
      () => {
        dispatch(onRefreshSuccess());
        dispatch(onFiltersRefresh());
      },
    );
  };
}

3. Ensure Proper Chart Status Handling:
   • Make sure the chartReducer handles various chart actions correctly, including updates and rendering.

Here is an example of how the chartReducer handles chart actions:

export default function chartReducer(
  charts: Record<string, ChartState> = {},
  action: AnyChartAction,
) {
  const actionHandlers: Record<string, ChartActionHandler> = {
    [actions.ADD_CHART]() {
      return {
        ...chart,
        ...action.chart,
      };
    },
    [actions.CHART_UPDATE_SUCCEEDED](state) {
      return {
        ...state,
        chartStatus: 'success',
        chartAlert: null,
        queriesResponse: action.queriesResponse,
        chartUpdateEndTime: now(),
      };
    },
    // ... other action handlers
  };

  if (action.type in actionHandlers) {
    return {
      ...charts,
      [action.key]: actionHandlers[action.type](charts[action.key]),
    };
  }

  return charts;
}

By implementing these changes, you can ensure that charts are properly rendered and refreshed, addressing the issue of initially blank charts ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[MalavikaN1]

We are not maintaining code, rather using the docker image for version 3.1.1.
Is there any possible fix for this?