initial implementation of `layout.colorscale` #3274

antoinerg · 2018-11-20T20:44:02Z

Attempt at closing #2925. As far as I can tell it works well but test coverage is pretty minimal at the moment.

In the process of making this PR, I uncovered issue #3273 .

etpinard · 2018-11-21T15:26:50Z

src/plots/plots.js

-    coerce('colorscale.sequential');
-    coerce('colorscale.sequentialminus');
-    coerce('colorscale.diverging');
+    if(layoutIn.colorscale) {


Why do we need this?

Coercing valType: colorScale will always give it a default colorscale. I initially wanted it to be falsey if not set by the user. There are other ways to do that.

etpinard · 2018-11-21T15:39:55Z

src/plots/layout_attributes.js

        editType: 'calc',
        description: 'Sets the default trace colors.'
    },
+    colorscale: {


Let's put these new attributes and default logic in the Colorscale component module.

Create two new files:

src/components/colorscale/layout_attributes.js

src/components/colorscale/layout_defaults.js

and link their exports in src/components/colorscale/index.js as layoutAttributes and supplyLayoutDefaults. The latter will get automatically picked up in Plotly.supplyLayoutModuleDefaults here:

plotly.js/src/plots/plots.js

Lines 1512 to 1518 in 695f311

for(component in componentsRegistry) {

_module = componentsRegistry[component];

if(_module.supplyLayoutDefaults) {

_module.supplyLayoutDefaults(layoutIn, layoutOut, fullData);

}

}

etpinard · 2018-11-21T15:41:31Z

src/plots/layout_attributes.js

+    colorscale: {
+        sequential: {
+            valType: 'colorscale',
+            dflt: false,


What would happen if we set dflt: scales.RdBu ?

That's another way of doing it and I think it's much better than the current approach. We'd have the defaults clearly defined in the attributes where they should be 🎉

etpinard · 2018-11-21T15:45:58Z

src/components/colorscale/defaults.js

+    containerOut.sequentialminus = layoutColorscale.sequentialminus;
+    var dfltScl = containerOut.diverging;
+    var sclOut;
+    if(dfltScl) sclOut = coerce(prefix + 'colorscale', dfltScl);


Ha I see. We wouldn't need this extra if-else block if you made the layout.colorscale.*.dflt undefined (or removed them entirely) instead of false. The relevant line in coerce.js is:

plotly.js/src/lib/coerce.js

Line 384 in 695f311

if(dflt === undefined) dflt = opts.dflt;

... But looking at this again, do we really need logic in colorscale/defaults.js and in colorscale/calc.js?

Ideally,

I would leave colorscale/defaults.js untouched

make the layout.colorscale.*.dflt match scales.RdBu, scales.Reds and scales.Blues, making those container.diverging || scales.RdBu; in colorscale/calc.js unnecessary.

handle the autocolorscale logic in colorscale/calc.js

Now, I'm just thinking out-loud. @antoinerg let me know if my proposal has any flaws.

I think this makes a lot of sense. Let me rework this PR!

antoinerg · 2018-11-21T22:59:34Z

Commit 93ce241 refactors colorscale_test.js.

I still need to improve test coverage to make sure layout.colorscale.(sequential|sequentialminus|diverging) are used appropriately when autorange: true and no colorscale is provided by the user. It should already work but it should be 🔒 down!

antoinerg · 2018-11-22T18:46:33Z

Commit ee222d5 improves the test coverage!

etpinard · 2018-11-22T21:44:15Z

src/traces/bar/calc.js

    // auto-z and autocolorscale if applicable
    if(hasColorscale(trace, 'marker')) {
-        colorscaleCalc(trace, trace.marker.color, 'marker', 'c');
+        colorscaleCalc(gd, trace, {


Looking nice 💎

etpinard · 2018-11-22T21:46:03Z

src/components/colorscale/calc.js

-        if(min * max < 0) scl = scales.RdBu;
-        else if(min >= 0) scl = scales.Reds;
-        else scl = scales.Blues;
+        if(min * max < 0) scl = gd._fullLayout.colorscale.diverging;


minor 🐄 , usually when a method uses fullLayout from gd we put a

var fullLayout = gd._fullLayout;

just below the function (

Done in commit 75e8910

etpinard · 2018-11-22T21:47:14Z

Nicely done @antoinerg

Since this PR will mostly help out template users, we should add a JSON mock that uses one of the new attribute in a template.

etpinard · 2018-11-23T14:42:55Z

test/image/mocks/colorscale_template.json

+    "template": {
+      "layout": {
+        "title": "heatmap template",
+        "colorscale": {


What if we put autocolorscale: true in the template container, does it still work?

Good call! I modified the mock in dca4350

etpinard · 2018-11-23T17:17:44Z

Nicely done 💃

initial implementation of layout.colorscale

6b1b940

antoinerg added feature something new status: in progress labels Nov 20, 2018

antoinerg added 3 commits November 20, 2018 16:23

fix editType

0e98c5b

fix parcoords, fix default colorscale

6e61f3b

do not coerce layout.colorscale if not specified

f5bcb71

antoinerg added status: reviewable and removed status: in progress labels Nov 20, 2018

etpinard added this to the v1.43.0 milestone Nov 21, 2018

etpinard reviewed Nov 21, 2018

View reviewed changes

antoinerg added 5 commits November 21, 2018 12:52

move layout colorscale attributes into its own file

a299ce0

update description for layout.colorscale attributes

2a20414

fix lint

2460fc3

change colorscaleCalc's signature, cleanup code

0c13592

update colorscale tests to provide a layout object to calcColorscale

93ce241

antoinerg added 3 commits November 21, 2018 18:05

fix lint

d263a7f

revert parcoords_tests.js to master

84f0ea8

test layout.colorscale inheritance

ee222d5

etpinard reviewed Nov 22, 2018

View reviewed changes

antoinerg added 2 commits November 22, 2018 16:48

improve code readability

75e8910

add a mock using template and layout.colorscale

e50a6aa

etpinard reviewed Nov 23, 2018

View reviewed changes

set autocolorscale: true in template to properly test mock

dca4350

antoinerg merged commit 922bad6 into master Nov 23, 2018

antoinerg deleted the 2925-default-colorbars branch November 23, 2018 17:24

antoinerg mentioned this pull request Nov 23, 2018

Sequential/Diverging defaults #2925

Closed

jonmmease mentioned this pull request Dec 13, 2018

Update themes to use new layout-level colorscale defaults for Plotly.js 1.43.0 plotly/plotly.py#1303

Closed

	for(component in componentsRegistry) {
	_module = componentsRegistry[component];

	if(_module.supplyLayoutDefaults) {
	_module.supplyLayoutDefaults(layoutIn, layoutOut, fullData);
	}
	}

Uh oh!

initial implementation of layout.colorscale #3274

initial implementation of layout.colorscale #3274

Uh oh!

Conversation

antoinerg commented Nov 20, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antoinerg Nov 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etpinard Nov 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antoinerg Nov 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

antoinerg commented Nov 21, 2018

Uh oh!

antoinerg commented Nov 22, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etpinard commented Nov 22, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

etpinard commented Nov 23, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

initial implementation of `layout.colorscale` #3274

initial implementation of `layout.colorscale` #3274

antoinerg Nov 21, 2018 •

edited

Loading

etpinard Nov 21, 2018 •

edited

Loading

antoinerg Nov 21, 2018 •

edited

Loading