Display issues while using dash with scatter3d, scattergl, and heatmaps/contours

[vivekvs1]

Hi,

I have encountered a few display bugs while using plotly graphs in the dash app that I though I should bring attention to:

1. When switching from scatter3d to Heatmap/Contour and back to scatter3d, a white band artifact shows on the scatter3d where the colorbar previously existed on the Heatmap/Contour.
   

2. Heatmap works as expected when switching to different data in the same plot (Level in this context). However, changing the Heatmap to a Contour plot displays incorrectly when switching the data (shows only a portion of the data).

3. Box selection shows correctly in a Scatter plot (big blue dots). In Scattergl, the box selection does not update the graph(no blue dots). But refreshing the plot shows the previously made selection.

I am not sure if the three issues are connected. I am using dash-core-components 0.22.1 .

Thanks,
Vivek

[etpinard]

Ideally, we would like a reproducible example in JS.

If that's not possible for you, could at least share the "data"/"layout" attributes you use to make those graphs. Thank you.

[etpinard]

... and also could you provide the plotly.js version used in your dash app. You should be able to enter Plotly.version in the browser console to find that out. Thanks!

[vivekvs1]

Thanks @etpinard
The Plotly version used is "1.35.2".
I'll get the data and the layout soon.

[etpinard]

The Plotly version used is "1.35.2".

Ok. Maybe switching to 1.37.1 will solve some of your issues. Not sure if dash exposes a way for users to do that though.

[vivekvs1]

@chriddyp : Would that be possible? If yes, I can test it out and report back. Thanks.

[chriddyp]

Not sure if dash exposes a way for users to do that though.

It does not, the plotly.js version is not configurable. I can upgrade plotly.js in a new release soon.

If that's not possible for you, could at least share the "data"/"layout" attributes you use to make those graphs.

The easiest way to do this is probably to export the figure into plot.ly, I've made instructions on how to do that here: https://community.plot.ly/t/mega-sharing-graphs-with-chart-studio/8869

[etpinard]

Maybe we should add dash-related instructions to https://github.com/plotly/plotly.js/blob/master/.github/ISSUE_TEMPLATE.md ?

[vivekvs1]

I have exported to the chart studio.

https://plot.ly/~vivekvs1/41/
https://plot.ly/~vivekvs1/43/

[etpinard]

@vivekvs1 thanks!

• I think I was able to reproduce the (1) problem in https://codepen.io/etpinard/pen/pVVLow?editors=0010 Looks Plotly.react has issues when updating margins.

• As for (2), could you tell us what you're doing to "change" the data. Are you passing a whole new z 2D array or playing around with zmin and zmax or something else?

• I wasn't able to reproduce (3) even using plotly.js 1.35.2 as in dash.

[vivekvs1]

Thanks @etpinard . Sorry- I was away for the weekend.

For (2), I pass a new 'z' 2d array when I change the data. It works perfectly fine when using Heatmaps. But when I replace the Heatmap with Contour, the irregular behavior appears. Also when I switch to a 3d plot (see gif for switch from 3d to 2d) and back to the 2d plot, it displays correctly again.

The behaviour for (3) appears for Scattergl only. So the temporary workaround I made was to have all plots layers as Scattergl except for the (blue) selection point layer (made it as Scatter). This seems to solve the problem for now. I haven't tested with larger data sets.

[etpinard]

For (2), I pass a new 'z' 2d array when I change the data

Could you please share that "new" 2d array with us. Thanks!

The behaviour for (3) appears for Scattergl only.

https://codepen.io/etpinard/pen/vjaGLW?editors=1111 changes all 'scatter' traces to 'scattergl' and seems to work fine in plotly.js 1.37.1 :

[vivekvs1]

(2) Sorry- I had to regenerate the data and that took a while. I have created a chart with the new z values.
https://plot.ly/~vivekvs1/47/

(3) For this, I realized that I was not clear in my description. My apologies. In your example, you are just making a selecting using the box tool (small blue dots). In mine, I am generating a new layer of blue dots from the selection made and displaying it (large blue dots). I had to do it this way since I have hidden nodes that I want to be as a part of my box selection. I have an invisible layer to represent the hidden nodes in the chart that I use on hover to identify the joints present. Since I cannot select the invisible layer, I get the coordinates of the box selection and use it to make a new layer of all the enclosed hidden joints.

[etpinard]

@vivekvs1 are you saying the view in https://plot.ly/~vivekvs1/47/#/ is wrong? Or that updating https://plot.ly/~vivekvs1/43/#/ to https://plot.ly/~vivekvs1/47/#/ doesn't give the correct result?

[vivekvs1]

Hi @etpinard,

Updating (switching) from one figure to another when using the Contour (not heatmap - which displays fine) like shown in the gif, is incorrect.

In the gif, when switching from Level 0 to 4.6 and back to Level 0, shows leftover traces from Level 4.6, instead of refreshing to show Level 0.

Thanks

[etpinard]

Ok thanks @vivekvs1

This issue is getting a little out-of-focus, so I split it into:

• React margin problems #2651, and
• React contour problems #2652

As for your point (3) in #2624 (comment), I'm afraid this issue might be duplicate of #2298

[vivekvs1]

Thank you very much @etpinard !

[etpinard]

No thank you @vivekvs1 for bringing up these issues.