Colorbar Orientation Change Causes Render Issue

[dritchie-nsitech]

Hello,

I was adding a control to one of my graphs in order to change the colorbar orientation from 'v' to 'h' and back again (user discretion) and noticed that it was having some strange behaviors.

Basically, it renders very strangely on change -- leaving the labels from the previous orientation and skewing things.

I did find that if I turn off the colorbar after changing orientation and turn it back on that it renders correctly.

So, I have created a workaround that onchange of orientation I hide the colorbar, do a plotly.react, then trigger a show of the colorbar and a second plotly.react.

I have demonstrated this in the following codepen: https://codepen.io/dritchie/pen/NWmOrZL

I commented out the 'fix', so both the weird behaviors and the correction can be shown.

Thanks!

[nwiswell]

I can reproduce this on plotly.js 3.5.1, 4.1.1, and main at 8983c11.

const z = [[1, 2], [3, 4]];
const layout = { width: 500, height: 400 };

// 1. The tick labels of the horizontal colorbar stay after the change to vertical.
await Plotly.newPlot(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'h' } }], layout);
await Plotly.react(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'v' } }], layout);

// 2. The title of the vertical colorbar stays after the change to horizontal.
await Plotly.newPlot(gd, [{ type: 'heatmap', z, colorbar: { title: { text: 'Vertical title' } } }], layout);
await Plotly.react(gd, [{ type: 'heatmap', z, colorbar: { orientation: 'h', len: 0.2 } }], layout);

Version	Case 1	Case 2
4.1.1 and main	Two sets of tick labels. The plot width drops to 64 px. A fresh newPlot gives 331 px.	Stale tick labels and "Vertical title". The plot height drops to 64 px. A fresh newPlot gives 205 px.
3.5.1	Same as 4.1.1	Plotly.react throws "Something went wrong with axis scaling".

Plotly.restyle(gd, {'colorbar.orientation': 'v'}) gives the same stale tick labels as case 1.

The colorbar axis id starts with the orientation letter: x for a horizontal colorbar and y for a vertical colorbar (mockColorBarAxis in src/components/colorbar/draw.js). The tick label groups and the title elements use this id in their class. The cleanup before a redraw selects only the classes for the current letter. Thus the elements of the previous orientation stay in the colorbar group. positionCB measures the stale elements with Drawing.bBox, and the colorbar pushes a margin that is too large.

A horizontal colorbar has the title side right by default. For this side, drawAxis measures the stale title as the title width. On 3.x, this width can invert the axis domain, and setScale throws. #7908 clamps the domain since 4.0.0, so the throw stops, but the stale elements stay.

Workaround: give the trace a new uid when colorbar.orientation changes. The colorbar then gets a new group.

I have a fix with a jasmine test, and I can open a pull request.

[camdecoster]

I'll review your proposed solution and follow up.