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

@@ -188,6 +188,29 @@ module.exports = {
        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

@@ -42,10 +42,18 @@ module.exports = function calc(gd, trace) {

    // 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 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Sponsors

initial implementation of `layout.colorscale` #3274

initial implementation of `layout.colorscale` #3274

antoinerg commented Nov 20, 2018

etpinard Nov 21, 2018

antoinerg Nov 21, 2018 •

edited

Loading

etpinard Nov 21, 2018 •

edited

Loading

etpinard Nov 21, 2018

antoinerg Nov 21, 2018 •

edited

Loading

etpinard Nov 21, 2018

etpinard Nov 21, 2018

antoinerg Nov 21, 2018

antoinerg commented Nov 21, 2018

antoinerg commented Nov 22, 2018

etpinard Nov 22, 2018

etpinard Nov 22, 2018

antoinerg Nov 22, 2018

etpinard commented Nov 22, 2018

etpinard Nov 23, 2018

antoinerg Nov 23, 2018

etpinard commented Nov 23, 2018

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

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

initial implementation of layout.colorscale #3274

initial implementation of layout.colorscale #3274

Conversation

antoinerg commented Nov 20, 2018

Choose a reason for hiding this comment

antoinerg Nov 21, 2018 • edited Loading

Choose a reason for hiding this comment

etpinard Nov 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

antoinerg Nov 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

antoinerg commented Nov 21, 2018

antoinerg commented Nov 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Nov 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Nov 23, 2018

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