use marker.colors with colorscale in treemap and sunburst plots by archmoj · Pull Request #4242 · plotly/plotly.js

archmoj · 2019-10-01T21:53:32Z

This PR adds ways to use marker.colors numbers with colorscale.
Also to mention the marker.colorscale would be defaulted if marker.colors is not empty.

Other changes within this PR also include:

implement marker.depthfade and drop marker.opacitybase and marker.opacitystep.
default pathbar.opacity to 1.

@etpinard
cc: @nicolaskruchten

- default marker.colorscale when having marker.colors

src/traces/sunburst/calc.js

test/jasmine/tests/sunburst_test.js

…rs numbers without defined colorscale

- also update the treemap baseline which now fails both locally and on the CI

- drop opacitybase - drop opacitystep - combine colors with the background color according with their depth from the top

src/traces/treemap/style.js

src/traces/treemap/attributes.js

src/traces/treemap/draw_descendants.js

src/traces/treemap/plot.js

etpinard · 2019-10-04T20:47:19Z

Awesome job @archmoj !!

As for the failing tests:

plotly.js/test/jasmine/tests/treemap_test.js

Lines 119 to 129 in 429324d

    
           it('should not coerce *marker.opacitybase* and *pathbar.opacity* when having *colorscale*', function() { 
        
               _supply([ 
        
                   {labels: [1], parents: ['']}, 
        
                   {labels: [1], parents: [''], marker: {colorscale: 'Blues'}} 
        
               ]); 
        
               expect(fullData[0].marker.opacitybase).toBe(0.5); 
        
               expect(fullData[0].pathbar.opacity).toBe(0.5); 
        
               expect(fullData[1].marker.opacitybase).toBe(undefined, 'not coerced'); 
        
               expect(fullData[1].pathbar.opacity).toBe(undefined, 'not coerced'); 
        
           });

This one should not test the marker.depthfade isn't coerced when a marker colorscale is present.
We should also add one default test checking that marker.depthfade defaults to false when marker.colors is set

plotly.js/test/jasmine/tests/treemap_test.js

Lines 1193 to 1235 in 429324d

    
           it('should be able to restyle *marker.opacitybase*', function(done) { 
        
               var mock = { 
        
                   data: [{ 
        
                       type: 'treemap', pathbar: { visible: false }, 
        
                       labels: ['Root', 'A', 'B', 'b', 'b2', 'b3'], 
        
                       parents: ['', 'Root', 'Root', 'B', 'b', 'b2'] 
        
                   }] 
        
               }; 
        
               function _assert(msg, exp) { 
        
                   return function() { 
        
                       var layer = d3.select(gd).select('.treemaplayer'); 
        
                       var opacities = []; 
        
                       layer.selectAll('path.surface').each(function() { 
        
                           opacities.push(this.style.opacity); 
        
                       }); 
        
                       expect(opacities).toEqual(exp, msg); 
        
                       // editType:style 
        
                       if(msg !== 'base') { 
        
                           expect(Plots.doCalcdata).toHaveBeenCalledTimes(0); 
        
                           expect(gd._fullData[0]._module.plot).toHaveBeenCalledTimes(0); 
        
                       } 
        
                   }; 
        
               } 
        
               Plotly.plot(gd, mock) 
        
               .then(_assert('base', ['1', '1', '0.5', '0.5', '1', '1'])) 
        
               .then(function() { 
        
                   spyOn(Plots, 'doCalcdata').and.callThrough(); 
        
                   spyOn(gd._fullData[0]._module, 'plot').and.callThrough(); 
        
               }) 
        
               .then(_restyle({'marker.opacitybase': 0.2})) 
        
               .then(_assert('lower marker.opacitybase', ['1', '1', '0.2', '0.5', '1', '1'])) 
        
               .then(_restyle({'marker.opacitybase': 0.8})) 
        
               .then(_assert('raise marker.opacitybase', ['1', '1', '0.8', '0.1', '0.2', '1'])) 
        
               .then(_restyle({'marker.opacitybase': null})) 
        
               .then(_assert('back to dflt', ['1', '1', '0.5', '0.1', '0.2', '1'])) 
        
               .catch(failTest) 
        
               .then(done); 
        
           });

That one can be simply 🔪 (you could add a restyle test for marker.depthfade, but that's 100% not required)

plotly.js/test/jasmine/tests/treemap_test.js

Lines 1237 to 1280 in 429324d

    
           it('should be able to restyle *pathbar.opacity*', function(done) { 
        
               var mock = { 
        
                   data: [{ 
        
                       type: 'treemap', 
        
                       labels: ['Root', 'A', 'B', 'b', 'b2', 'b3'], 
        
                       parents: ['', 'Root', 'Root', 'B', 'b', 'b2'], 
        
                       level: 'b' 
        
                   }] 
        
               }; 
        
               function _assert(msg, exp) { 
        
                   return function() { 
        
                       var layer = d3.select(gd).select('.treemaplayer'); 
        
                       var opacities = []; 
        
                       layer.selectAll('path.surface').each(function() { 
        
                           opacities.push(this.style.opacity); 
        
                       }); 
        
                       expect(opacities).toEqual(exp, msg); 
        
                       // editType:style 
        
                       if(msg !== 'base') { 
        
                           expect(Plots.doCalcdata).toHaveBeenCalledTimes(0); 
        
                           expect(gd._fullData[0]._module.plot).toHaveBeenCalledTimes(0); 
        
                       } 
        
                   }; 
        
               } 
        
               Plotly.plot(gd, mock) 
        
               .then(_assert('base', ['0.5', '0.5', '1', '0.5', '0.5'])) 
        
               .then(function() { 
        
                   spyOn(Plots, 'doCalcdata').and.callThrough(); 
        
                   spyOn(gd._fullData[0]._module, 'plot').and.callThrough(); 
        
               }) 
        
               .then(_restyle({'pathbar.opacity': 0.2})) 
        
               .then(_assert('lower pathbar.opacity', ['0.5', '0.5', '1', '0.2', '0.2'])) 
        
               .then(_restyle({'pathbar.opacity': 0.8})) 
        
               .then(_assert('raise pathbar.opacity', ['0.5', '0.5', '1', '0.8', '0.8'])) 
        
               .then(_restyle({'pathbar.opacity': null})) 
        
               .then(_assert('back to dflt', ['0.5', '0.5', '1', '0.5', '0.5'])) 
        
               .catch(failTest) 
        
               .then(done); 
        
           });

I'm not 100% sure what's going here, but I think we simply need to adjust the assertion values

... in `marker.depthfade` implementation.

…riptions

etpinard · 2019-10-04T21:46:52Z

One more thing:

make sure pathbar.opacity is 1 by default

archmoj · 2019-10-04T21:50:40Z

One more thing:

make sure pathbar.opacity is 1 by default

It is 1 when a colorscale is present and 0.5 otherwise.
Is that OK?

etpinard · 2019-10-04T21:58:50Z

It is 1 when a colorscale is present and 0.5 otherwise.
Is that OK?

I don't have a strong opinion about it, but looks like @nicolaskruchten would prefer 1 always.

I reran https://codepen.io/MojtabaSamimi/pen/poozNQx using this build and the brown went away, which is nice, but I'm not sure why the pathbar is so faded?
actually it was faded before, and I only now noticed it... if I set a marker.color to red I would expect the pathbar element to be fully red and not faded, no?

archmoj · 2019-10-04T22:02:29Z

It is 1 when a colorscale is present and 0.5 otherwise.
Is that OK?

I don't have a strong opinion about it, but looks like @nicolaskruchten would prefer 1 always.

I reran https://codepen.io/MojtabaSamimi/pen/poozNQx using this build and the brown went away, which is nice, but I'm not sure why the pathbar is so faded?
actually it was faded before, and I only now noticed it... if I set a marker.color to red I would expect the pathbar element to be fully red and not faded, no?

OK. Let's go with that. Actually it would work better for text transitions.

…ersed option

src/traces/treemap/attributes.js

src/traces/treemap/style.js

etpinard · 2019-10-07T14:00:57Z

@archmoj I'm not sure I understand this mock:

Why do the marker.depthfade: 'reversed' traces show color gradient while the marker.depthfade: true don't?

etpinard · 2019-10-07T14:02:44Z

Moreover, in

why does the root node show up in white now?

archmoj · 2019-10-07T14:08:38Z

@archmoj I'm not sure I understand this mock:

Why do the marker.depthfade: 'reversed' traces show color gradient while the marker.depthfade: true don't?

When depthfade is true the leaves are fully saturated. Since there is no space for headers (pad = 0), there is no gradient displayed on the figures on the right.

archmoj · 2019-10-07T15:29:04Z

Moreover, in

why does the root node show up in white now?

To display coloured root cases the root should be drawn.
This is now fixed by 1dff468.

etpinard · 2019-10-07T16:02:30Z

src/traces/treemap/style.js

-        opacity = trace._hovered.marker.opacity;
    } else {
-        if(helpers.isHierarchyRoot(pt)) {
+        if(isRoot && fillColor === 'rgba(0,0,0,0)') {


This solution correctly handle the default root case that sets cdi.color to rgba(0,0,0,0) here:

plotly.js/src/traces/sunburst/calc.js

Lines 269 to 270 in 1dff468

// root gets no coloring by default

cdi.color = 'rgba(0,0,0,0)';

but, we'll probably need to extend it all other rgba colors with a 0 alpha channel - as the current depthfade algorithm gives a white fillColor.

etpinard · 2019-10-07T16:04:00Z

All right. Time to merge this thing 💃

@archmoj please keep in mind #4242 (review) for future treemap work.

archmoj · 2019-10-07T16:05:26Z

@etpinard Thanks very much for allocating enough time for this PR.

use marker.colors with colorscale in treemap and sunburst plots

1c136f4

- default marker.colorscale when having marker.colors

archmoj added bug something broken status: reviewable labels Oct 1, 2019

etpinard reviewed Oct 2, 2019

View reviewed changes

src/traces/sunburst/calc.js Outdated Show resolved Hide resolved

etpinard reviewed Oct 2, 2019

View reviewed changes

test/jasmine/tests/sunburst_test.js Show resolved Hide resolved

etpinard added this to the v1.50.0 milestone Oct 2, 2019

archmoj added 4 commits October 2, 2019 12:47

no need to hasColorscale twice in calc step of treemap and sunburst

2e17994

add treemap and sunburst tests to cover the case of using marker.colo…

ba492cf

…rs numbers without defined colorscale

display treemap root with opacity 1

1d159e6

- also update the treemap baseline which now fails both locally and on the CI

impelement depthfade

429324d

- drop opacitybase - drop opacitystep - combine colors with the background color according with their depth from the top

archmoj commented Oct 4, 2019

View reviewed changes

src/traces/treemap/style.js Outdated Show resolved Hide resolved

etpinard reviewed Oct 4, 2019

View reviewed changes

src/traces/treemap/attributes.js Outdated Show resolved Hide resolved

etpinard reviewed Oct 4, 2019

View reviewed changes

src/traces/treemap/draw_descendants.js Outdated Show resolved Hide resolved

etpinard reviewed Oct 4, 2019

View reviewed changes

src/traces/treemap/draw_descendants.js Show resolved Hide resolved

etpinard reviewed Oct 4, 2019

View reviewed changes

src/traces/treemap/plot.js Outdated Show resolved Hide resolved

etpinard and others added 3 commits October 4, 2019 16:58

set Color.addOpacity(trace._backgroundColor, 0.75)

f068cb2

... in `marker.depthfade` implementation.

Merge branch 'master' into treemap-sunburst-colors-in-colorscale

7df59a5

treemap remaining items - rework key functions - jasmine tests - desc…

280a0a1

…riptions

archmoj added 3 commits October 4, 2019 18:23

always default pathbar.opacity to 1

aa52dd5

combine colors for pathbar - correct pathbar test - add depthfade rev…

fed26bb

…ersed option

add basic mock for treemap and sunburst - rename a variable name

481f660