Why is heatmap rendering 5x faster with zsmooth=best than with zsmooth=false?

[josephernest]

Rendering a heatmap with zsmooth=best (demo here) is rendering at ~ 5fps for me.

This is 5 times faster than with zsmooth=false (only 1 fps for me, demo here), which seems unlogical.

Doing an interpolation should make it slower, not faster. Is there a bug that makes it slower when doing no interpolation?

This shows that zsmooth=false heatmap rendering could probably be improved a lot.

Plotly.newPlot('myDiv',  [{z: z, colorscale: 'Jet', type: 'heatmap', zsmooth: 'false'}], {sliders: [{steps: steps}]});

Any idea about this?

[josephernest]

Out of curiosity, does one of the main developers have an idea about this? @archmoj @hannahker @alexcjohnson

If you have some guidance about where to look, I can also have a deeper look.

Thanks in advance!

[lvlte]

You can look over here, there should be a way to make this loop way faster, or at least as fast as the zmooth loops.

[josephernest]

Thanks @lvlte. Two little questions:

1. Is there a non-minified debug version of Plotly.js that I can just tweak and modify by modifying just the main .js file, for debugging purposes ? I don't have all the necessary tooling to "build" Plotly (I guess it requires webpack, or npm or things like that). For example here I could just modify the lines you showed.

2. After futher analysis:

• zsmooth=false : very slow (less than 1 fps on my demo)
• zsmooth=best : fast (~ 5 fps on my computer)
• zsmooth=fast : fast (~ 5 fps on my computer)

What kind of smoothing is there in the zsmooth=fast case? See https://github.com/plotly/plotly.js/blob/master/src/traces/heatmap/plot.js#L276
I don't see any smoothing.

Also it seems zsmooth=fast is sometimes broken: see demo: https://jsfiddle.net/cpqhnjry/
The heatmap should be 1000 x 500 pixels, and here it gives this:

[lvlte]

Hi @josephernest,

1. Yes you could download for example https://cdn.plot.ly/plotly-2.20.0.js and modify it locally, then reference the local source in your project.
2. The "fast" smoothing is actually done directly by the browser !

In fact I'm just getting back into the code and I think I've found a fix, though I need to do some more testing before proposing a PR to be sure I'm not introducing another bug.. In the meantime, I will provide a workaround on SO so that you can still solve the performance issue until a PR is merged.

I also came across the "truncated heatmap" bug with zsmooth=fast, it occurs when the resolution is high (above a certain threshold relative to the layout width/height) and seems to be related to offscreen pixels (optimization).

[josephernest]

Thanks @lvlte!
Good to know about the non-minified version https://cdn.plot.ly/plotly-2.20.0.js, I'll use it to do some quick testing!

In fact I'm just getting back into the code and I think I've found a fix, though I need to do some more testing before proposing a PR to be sure I'm not introducing another bug..

Waw this is great!

In the meantime, I will provide a workaround on SO so that you can still solve the performance issue until a PR is merged.

Thanks again this will be super helpful!

[josephernest]

@lvlte Out of curiosity, would you have any news about this?
I can also help in writing some code if you have the global directions to improve the heatmap rendering.

[lvlte]

Yeah so I have procrastinated long enough !

Here is the PR that deals with the zsmooth="fast" rendering bug. It is mandatory to have this fixed before optimizing the rendering of heatmaps with no smoothing (because it will use the same trick as for the zsmooth="fast"), I'm not sure it's clear but anyway I will let you know.

[josephernest]

Thanks @lvlte! I have tested with https://output.circle-artifacts.com/output/job/0fcb57ef-9b72-4d3c-9f71-ec5b4c157645/artifacts/0/dist/plotly.min.js and it seems to work great for zsmooth=fast!

Are there things to test (I can have a look if you need another pair of eyes :)) ?

[lvlte]

In fact I just realized the test-baselines failed, but I'm not sure to understand what should be done, so if you get to know why it fails and what I missed don't hesitate !

[josephernest]

Congrats for the solution and the merge @lvlte :-) This is now in release 2.21.0 :)

Now I think we can emulate zsmooth=false (which is slow) by using zsmooth=fast and .subplot.xy .heatmaplayer image { image-rendering: pixelated; }, do you confirm?

[lvlte]

Exactly, you can now use the workaround w/o the bug :)

I'm gonna submit a 2nd PR soon, it will make the code handle this under the hood whenever possible (there are cases where it's not possible though).

[josephernest]

Wonderful @lvlte!