fix: Remove stale colorbar ticks and titles after an orientation change

draftlogs/8091_fix.md

@@ -0,0 +1 @@
+- Remove tick labels and titles of the previous orientation when a colorbar changes orientation [[#8091](https://github.com/plotly/plotly.js/pull/8091)]

src/components/colorbar/draw.js

@@ -333,14 +333,15 @@ function drawColorBar(g, opts, gd) {
             containerGroup: g.select('.' + cn.cbtitle)
         };
 
-        // this class-to-rotate thing with convertToTspans is
-        // getting hackier and hackier... delete groups with the
-        // wrong class (in case earlier the colorbar was drawn on
-        // a different side, I think?)
-        var otherClass = titleClass.charAt(0) === 'h' ?
-            titleClass.slice(1) :
-            'h' + titleClass;
-        g.selectAll('.' + otherClass + ',.' + otherClass + '-math-group').remove();
+        // The title class changes with the orientation and the title side.
+        for (const letter of ['x', 'y']) {
+            for (const prefix of ['', 'h', 'v']) {
+                const otherClass = `${prefix}${letter}${opts._id}title`;
+                if (otherClass !== titleClass) {
+                    g.selectAll(`.${otherClass},.${otherClass}-math-group`).remove();
+                }
+            }
+        }
 
         Titles.draw(gd, titleClass, extendFlat(dfltTitleOpts, titleOpts || {}));
     }
@@ -574,7 +575,7 @@ function drawColorBar(g, opts, gd) {
         });
 
         // force full redraw of labels and ticks
-        axLayer.selectAll('g.' + ax._id + 'tick,path').remove();
+        axLayer.selectAll(`g.x${opts._id}tick,g.y${opts._id}tick,path`).remove();
 
         var shift = uPx + thickPx +
             (outlinewidth || 0) / 2 - (opts.ticks === 'outside' ? 1 : 0);

test/jasmine/tests/colorbar_test.js

@@ -165,6 +165,40 @@ describe('Test colorbar:', function() {
             .then(done, done.fail);
         });
 
+        // see https://github.com/plotly/plotly.js/issues/6973
+        it('removes tick labels and titles of the previous orientation', async () => {
+            const z = [
+                [1, 2],
+                [3, 4]
+            ];
+            const vertical = [{ type: 'heatmap', z, colorbar: { title: { text: 'Vertical title' } } }];
+            const horizontal = [{ type: 'heatmap', z, colorbar: { orientation: 'h', len: 0.2 } }];
+            const layout = { width: 500, height: 400 };
+
+            const state = () => {
+                const texts = [];
+                d3Select(gd)
+                    .selectAll('.colorbar text')
+                    .each(function () {
+                        texts.push(this.textContent);
+                    });
+                const { w, h } = gd._fullLayout._size;
+                return { texts, w, h };
+            };
+
+            await Plotly.newPlot(gd, vertical, layout);
+            const expectedVertical = state();
+            await Plotly.newPlot(gd, horizontal, layout);
+            const expectedHorizontal = state();
+
+            await Plotly.newPlot(gd, vertical, layout);
+            await Plotly.react(gd, horizontal, layout);
+            expect(state()).toEqual(expectedHorizontal, 'vertical to horizontal');
+
+            await Plotly.react(gd, vertical, layout);
+            expect(state()).toEqual(expectedVertical, 'horizontal to vertical');
+        });
+
         function assertCB(msg, present, opts) {
             var expandedMarginR = opts.expandedMarginR;
             var expandedMarginT = opts.expandedMarginT;