superset

superset copied to clipboard

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

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [X] 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.

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.

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

We're no longer supporting 3.x, and this has been silent for a long time. Closing this, but if it's still happening somehow in 4.1.1, please add some updated context, and we can reopen/revisit.