Merge pull request #5217 from anaplian/fix5161-fix-colorbar-react

Fix issue where styles weren't reset when re-using SVGs in colorbar

Author: archmoj

src/components/colorbar/draw.js

@@ -397,6 +397,7 @@ function drawColorBar(g, opts, gd) {
 
         var fills = g.select('.' + cn.cbfills)
             .selectAll('rect.' + cn.cbfill)
+            .attr('style', '')
             .data(fillLevels);
         fills.enter().append('rect')
             .classed(cn.cbfill, true)

test/jasmine/tests/colorbar_test.js

@@ -524,5 +524,42 @@ describe('Test colorbar:', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('creates the same colorbars attributes in newPlot and react', function(done) {
+            function getCBFillAttributes() {
+                var attrs = [];
+                var colorbars = d3.select(gd).selectAll('.colorbar');
+                colorbars.selectAll('.cbfill').each(function() {
+                    var attrsForElem = {};
+                    for(var i = 0; i < this.attributes.length; i++) {
+                        var attr = this.attributes.item(i);
+                        attrsForElem[attr.name] = attr.value;
+                    }
+                    attrs.push(attrsForElem);
+                });
+                return attrs;
+            }
+
+            var z = [[1, 10], [100, 1000]];
+
+            var expectedAttrs;
+            var actualAttrs;
+
+            Plotly.newPlot(gd, [{type: 'contour', z: z}])
+            .then(function() {
+                expectedAttrs = getCBFillAttributes();
+
+                return Plotly.newPlot(gd, [{type: 'heatmap', z: z}])
+                .then(function() {
+                    return Plotly.react(gd, [{type: 'contour', z: z}]);
+                });
+            })
+            .then(function() {
+                actualAttrs = getCBFillAttributes();
+                expect(actualAttrs).toEqual(expectedAttrs);
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });