From 9319e2e8c97db93fdfbdb87c05429e528f932905 Mon Sep 17 00:00:00 2001
From: anaplian <anaplian>
Date: Sat, 17 Oct 2020 23:40:58 +0100
Subject: [PATCH 1/3] Fix issue where styles weren't reset when re-using SVGs
 in colorbar

Fixes #5161
---
 src/components/colorbar/draw.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js
index 1cb4a8e68a4..81de94620f3 100644
--- a/src/components/colorbar/draw.js
+++ b/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)

From 018be007060b5b00bb7f0a6c19cd1df924190785 Mon Sep 17 00:00:00 2001
From: anaplian <anaplian>
Date: Mon, 19 Oct 2020 21:59:05 +0100
Subject: [PATCH 2/3] Add test to check colorbar attrs match on newPlot/react

---
 test/jasmine/tests/colorbar_test.js | 39 +++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/test/jasmine/tests/colorbar_test.js b/test/jasmine/tests/colorbar_test.js
index 0405651fad9..57ef6f1ee83 100644
--- a/test/jasmine/tests/colorbar_test.js
+++ b/test/jasmine/tests/colorbar_test.js
@@ -524,5 +524,44 @@ describe('Test colorbar:', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('creates the same colorbars attributes in newPlot and react', function(done) {
+            var z = [[1, 10], [100, 1000]];
+
+            var expectedAttrs = [];
+            var actualAttrs = [];
+
+            Plotly.newPlot(gd, [{type: 'contour', z: z}])
+            .then(function() {
+                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;
+                    }
+                    expectedAttrs.push(attrsForElem);
+                });
+
+                return Plotly.newPlot(gd, [{type: 'heatmap', z: z}])
+                .then(function() {
+                    return Plotly.react(gd, [{type: 'contour', z: z}]);
+                });
+            })
+            .then(function() {
+                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;
+                    }
+                    actualAttrs.push(attrsForElem);
+                });
+                expect(actualAttrs).toEqual(expectedAttrs);
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });

From f5ad0ccb72e6833e50daaaf94ef6f4b82464678c Mon Sep 17 00:00:00 2001
From: anaplian <anaplian>
Date: Mon, 19 Oct 2020 22:29:41 +0100
Subject: [PATCH 3/3] Factor out getCBFillAttributes into helper function

---
 test/jasmine/tests/colorbar_test.js | 32 ++++++++++++++---------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/test/jasmine/tests/colorbar_test.js b/test/jasmine/tests/colorbar_test.js
index 57ef6f1ee83..fca097ee5fa 100644
--- a/test/jasmine/tests/colorbar_test.js
+++ b/test/jasmine/tests/colorbar_test.js
@@ -526,13 +526,8 @@ describe('Test colorbar:', function() {
         });
 
         it('creates the same colorbars attributes in newPlot and react', function(done) {
-            var z = [[1, 10], [100, 1000]];
-
-            var expectedAttrs = [];
-            var actualAttrs = [];
-
-            Plotly.newPlot(gd, [{type: 'contour', z: z}])
-            .then(function() {
+            function getCBFillAttributes() {
+                var attrs = [];
                 var colorbars = d3.select(gd).selectAll('.colorbar');
                 colorbars.selectAll('.cbfill').each(function() {
                     var attrsForElem = {};
@@ -540,8 +535,19 @@ describe('Test colorbar:', function() {
                         var attr = this.attributes.item(i);
                         attrsForElem[attr.name] = attr.value;
                     }
-                    expectedAttrs.push(attrsForElem);
+                    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() {
@@ -549,15 +555,7 @@ describe('Test colorbar:', function() {
                 });
             })
             .then(function() {
-                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;
-                    }
-                    actualAttrs.push(attrsForElem);
-                });
+                actualAttrs = getCBFillAttributes();
                 expect(actualAttrs).toEqual(expectedAttrs);
             })
             .catch(failTest)