Merge pull request #5166 from plotly/surface-colorscale-with-alpha

Handle colorscale with transparent colors in surface traces
plotly · Sep 26, 2020 · 35474a1 · 35474a1
2 parents 98097ea + f1236ef
commit 35474a1
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "gl-select-box": "^1.0.4",
     "gl-spikes2d": "^1.0.2",
     "gl-streamtube3d": "^1.4.1",
-    "gl-surface3d": "^1.5.2",
+    "gl-surface3d": "^1.6.0",
     "gl-text": "^1.1.8",
     "glslify": "^7.1.1",
     "has-hover": "^1.0.1",

diff --git a/src/lib/gl_format_color.js b/src/lib/gl_format_color.js
@@ -76,22 +76,19 @@ function formatColor(containerIn, opacityIn, len) {
     return colorOut;
 }
 
-function parseColorScale(cont, alpha) {
-    if(alpha === undefined) alpha = 1;
-
+function parseColorScale(cont) {
     var cOpts = Colorscale.extractOpts(cont);
 
-    var colorscale = cOpts.reversescale ?
-        Colorscale.flipScale(cOpts.colorscale) :
-        cOpts.colorscale;
+    var colorscale = cOpts.colorscale;
+    if(cOpts.reversescale) colorscale = Colorscale.flipScale(cOpts.colorscale);
 
     return colorscale.map(function(elem) {
         var index = elem[0];
         var color = tinycolor(elem[1]);
         var rgb = color.toRgb();
         return {
             index: index,
-            rgb: [rgb.r, rgb.g, rgb.b, alpha]
+            rgb: [rgb.r, rgb.g, rgb.b, rgb.a]
         };
     });
 }

diff --git a/src/traces/surface/convert.js b/src/traces/surface/convert.js
@@ -433,8 +433,7 @@ proto.update = function(data) {
     var scene = this.scene;
     var sceneLayout = scene.fullSceneLayout;
     var surface = this.surface;
-    var alpha = data.opacity;
-    var colormap = parseColorScale(data, alpha);
+    var colormap = parseColorScale(data);
     var scaleFactor = scene.dataScale;
     var xlen = data.z[0].length;
     var ylen = data._ylength;
@@ -679,10 +678,6 @@ proto.update = function(data) {
     if('lightposition' in data) {
         surface.lightPosition = [data.lightposition.x, data.lightposition.y, data.lightposition.z];
     }
-
-    if(alpha && alpha < 1) {
-        surface.supportsTransparency = true;
-    }
 };
 
 proto.dispose = function() {

diff --git a/test/image/baselines/gl3d_surface-heatmap-treemap_transparent-colorscale.png b/test/image/baselines/gl3d_surface-heatmap-treemap_transparent-colorscale.png
diff --git a/test/image/compare_pixels_test.js b/test/image/compare_pixels_test.js
@@ -102,9 +102,8 @@ if(allMock || argv.filter) {
 
 var FLAKY_LIST = [
     'treemap_coffee',
-    'treemap_textposition',
-    'treemap_sunburst_marker_colors',
     'treemap_with-without_values',
+    'gl3d_directions-streamtube1',
 ];
 
 console.log('');

diff --git a/test/image/mocks/gl3d_surface-heatmap-treemap_transparent-colorscale.json b/test/image/mocks/gl3d_surface-heatmap-treemap_transparent-colorscale.json
@@ -0,0 +1,159 @@
+{
+    "data": [
+        {
+            "type": "treemap",
+            "labels": [
+                "Alpha",
+                "Bravo",
+                "Charlie",
+                "Delta",
+                "Echo",
+                "Foxtrot",
+                "Golf",
+                "Hotel",
+                "India",
+                "Juliet",
+                "Kilo",
+                "Lima",
+                "Mike",
+                "November",
+                "Oscar",
+                "Papa",
+                "Quebec",
+                "Romeo",
+                "Sierra",
+                "Tango",
+                "Uniform",
+                "Victor",
+                "Whiskey",
+                "X ray",
+                "Yankee",
+                "Zulu"
+            ],
+            "parents": [
+                "",
+                "Alpha",
+                "Alpha",
+                "Charlie",
+                "Charlie",
+                "Charlie",
+                "Foxtrot",
+                "Foxtrot",
+                "Foxtrot",
+                "Foxtrot",
+                "Juliet",
+                "Juliet",
+                "Juliet",
+                "Juliet",
+                "Juliet",
+                "Oscar",
+                "Oscar",
+                "Oscar",
+                "Oscar",
+                "Oscar",
+                "Oscar",
+                "Uniform",
+                "Uniform",
+                "Uniform",
+                "Uniform",
+                "Uniform",
+                "Uniform"
+            ],
+            "level": "Juliet",
+            "count": "leaves+branches",
+            "textinfo": "label",
+            "insidetextorientation": "horizontal",
+            "marker": {
+                "line": {
+                    "color": "#777"
+                },
+                "colorscale": [
+                    [0, "rgba(0,0,255,1)"],
+                    [0.5, "rgba(0,255,0,0.0)"],
+                    [1, "rgba(255,0,0,1)"]
+                ],
+                "showscale": false
+            },
+            "domain": {
+                "x": [0, 0.3]
+            }
+        },
+        {
+            "type": "heatmap",
+            "zsmooth": "best",
+            "coloraxis": "coloraxis",
+            "contours": {
+                "z": {
+                    "show": true
+                }
+            },
+            "x": [0, 0.25, 0.5, 0.75, 1],
+            "y": [0, 0.25, 0.5, 0.75, 1],
+            "z": [
+                [0, 0, 0, 0, 0],
+                [0, 0.1, 0.8, 0.7, 0],
+                [0, 0.2, 0, 0.6, 0],
+                [0, 0.3, 0.4, 0.5, 0],
+                [0, 0, 0, 0, 0]
+            ]
+        },
+        {
+            "type": "surface",
+            "coloraxis": "coloraxis",
+            "contours": {
+                "z": {
+                    "show": true
+                }
+            },
+            "x": [0, 0.25, 0.5, 0.75, 1],
+            "y": [0, 0.25, 0.5, 0.75, 1],
+            "z": [
+                [0, 0, 0, 0, 0],
+                [0, 0.1, 0.8, 0.7, 0],
+                [0, 0.2, 0, 0.6, 0],
+                [0, 0.3, 0.4, 0.5, 0],
+                [0, 0, 0, 0, 0]
+            ]
+        }
+    ],
+    "layout": {
+        "width": 1000,
+        "height": 350,
+        "title": {
+            "text": "treemap, heatmap & surface plots with transparent colorscale"
+        },
+        "coloraxis": {
+            "colorscale": [
+                [0, "rgba(0,0,255,1)"],
+                [0.5, "rgba(0,255,0,0.0)"],
+                [1, "rgba(255,0,0,1)"]
+            ]
+        },
+        "margin": {
+            "t": 75,
+            "l": 25,
+            "r": 25,
+            "b": 25
+        },
+        "xaxis": {
+            "domain": [0.35, 0.65]
+        },
+        "scene": {
+            "domain": {
+                "x": [0.7, 1]
+            },
+            "camera": {
+                "eye": {
+                    "x": 0,
+                    "y": 0,
+                    "z": 2
+                },
+                "up": {
+                    "x": 0,
+                    "y": 1,
+                    "z": 0
+                }
+            }
+        }
+    }
+}
diff --git a/test/jasmine/tests/mock_test.js b/test/jasmine/tests/mock_test.js
@@ -562,6 +562,7 @@ var list = [
     'gl3d_surface_transparent-with-contours',
     'gl3d_surface-circular-colorscale',
     'gl3d_surface-circular-opacityscale',
+    'gl3d_surface-heatmap-treemap_transparent-colorscale',
     'gl3d_surface-lighting',
     'gl3d_tetrahedra',
     'gl3d_text-weirdness',
@@ -1614,6 +1615,7 @@ figs['gl3d_surface_opacity_match_mesh3d'] = require('@mocks/gl3d_surface_opacity
 figs['gl3d_surface_transparent-with-contours'] = require('@mocks/gl3d_surface_transparent-with-contours');
 figs['gl3d_surface-circular-colorscale'] = require('@mocks/gl3d_surface-circular-colorscale');
 figs['gl3d_surface-circular-opacityscale'] = require('@mocks/gl3d_surface-circular-opacityscale');
+// figs['gl3d_surface-heatmap-treemap_transparent-colorscale'] = require('@mocks/gl3d_surface-heatmap-treemap_transparent-colorscale');
 // figs['gl3d_surface-lighting'] = require('@mocks/gl3d_surface-lighting');
 figs['gl3d_tetrahedra'] = require('@mocks/gl3d_tetrahedra');
 figs['gl3d_text-weirdness'] = require('@mocks/gl3d_text-weirdness');