Deployment charts can be rendered improperly if redirecting to a different page while charts are initializing

[aptmac]

Occasionally, the deployment charts can be rendered in such a way that the chart lines and graphics don't show, but the data points & tooltips still work.

When on the deployments page, if another page is visited (e.g., codebases, pipelines) while the charts are being initialized (a good indicator of this is when the donut charts are white and haven't been filled in blue yet), then upon re-visiting the deployments page the charts will not render correctly. The following error message is shown in the console:

Example:

Gifs:
Here's what it looked like one time when I encountered it:

And what the charts look/function like after:

[andrewazores]

This looks suspiciously similar to some c3 async loading stuff we've run into before, but I can't remember what the context for that was last time. @jiekang do you remember?

[jiekang]

Yes now that you mention it. I think we've looked at this before. c3js runs some timers async and doesn't clean things up properly, so this behavior is 'expected' for c3js.

[jiekang]

I wonder if I ever filed an issue for it.. Dang.

[aptmac]

Yeah it looks to be an async problem. The function where the null value is showing up is c3.convertDataToTargets() [0], which is being called after loading the new chart data at DeploymentsDonutChartComponent.updateChart() [1]. If I put a breakpoint at [1] (or a console log at [0], I haven't been able to put breakpoints into node_modules), I haven't been able to see a null value because it gets resolved by then, but c3 is seeing null.

fwiw if I replace [1] to regenerate the chart instead of loading like: this.chart = c3.generate(this.config); then I stop seeing the error, but it's not as nice a solution.

[0] https://github.com/c3js/c3/blob/master/c3.js#L5548
[1] https://github.com/fabric8-ui/fabric8-ui/blob/master/src/app/space/create/deployments/deployments-donut/deployments-donut-chart/deployments-donut-chart.component.ts#L147

[jiekang]

Ah found it:
fabric8-ui/fabric8-ui#2359

c3js/c3#1205
bcbcarl/react-c3js#22

See my comments in pull request, and there was a mitigation. I'm not sure if this is the same error as you reported, but I expect it to be similar.

[jiekang]

The mitigation isn't as good when the charts are in the process of loading, unfortunately. I'm not sure how much we can do on our side.

[aptmac]

Ah yes, it seems to be the same error as the c3 issue you've linked above.

[andrewazores]

I suspect part of the solution for this other issue (#3454) might solve or greatly mitigate this one as well.

[andrewazores]

Is this still reproducible?

[aptmac]

Yeah I was able to reproduce it just now - changing the page while the donut chart is transitioning from white to blue will cause the error still.

Edit: I was running a local build with all the latest changes

[andrewazores]

Okay, that's unfortunate.

The c3 bug we had seen was closed, but this recent and still open one looks the same: c3js/c3#2187

[alexeykazakov]

Outdated.

[aptmac]

This can still reproduced, but the bug is in the c3js repo. Even if/when it gets fixed in c3js it may be a headache to update patternfly to the latest version.