From b21b74cd70ccf4de165a27d31e0e22ef3011fb04 Mon Sep 17 00:00:00 2001 From: archmoj Date: Thu, 12 Mar 2020 13:54:45 -0400 Subject: [PATCH 1/5] expose parcoords context line color --- src/traces/parcoords/attributes.js | 15 +++++++++++++++ src/traces/parcoords/constants.js | 1 - src/traces/parcoords/defaults.js | 1 + src/traces/parcoords/parcoords.js | 2 +- 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index d89456a07ab..e514d1ccc6e 100644 --- a/src/traces/parcoords/attributes.js +++ b/src/traces/parcoords/attributes.js @@ -141,6 +141,21 @@ module.exports = { description: 'The dimensions (variables) of the parallel coordinates chart. 2..60 dimensions are supported.' }), + bgline: { + color: { + valType: 'color', + dflt: '#777', + role: 'style', + editType: 'plot', + description: [ + 'Sets the color of lines in the background', + 'i.e. unselected lines.' + ].join(' ') + }, + + editType: 'calc' + }, + line: extendFlat({editType: 'calc'}, colorScaleAttrs('line', { // the default autocolorscale isn't quite usable for parcoords due to context ambiguity around 0 (grey, off-white) diff --git a/src/traces/parcoords/constants.js b/src/traces/parcoords/constants.js index 3467ac057ec..bda7fbccb09 100644 --- a/src/traces/parcoords/constants.js +++ b/src/traces/parcoords/constants.js @@ -19,7 +19,6 @@ module.exports = { layers: ['contextLineLayer', 'focusLineLayer', 'pickLineLayer'], axisTitleOffset: 28, axisExtentOffset: 10, - deselectedLineColor: '#777', bar: { width: 4, // Visible width of the filter bar captureWidth: 10, // Mouse-sensitive width for interaction (Fitts law) diff --git a/src/traces/parcoords/defaults.js b/src/traces/parcoords/defaults.js index 33e769d2a86..64cb94bdabd 100644 --- a/src/traces/parcoords/defaults.js +++ b/src/traces/parcoords/defaults.js @@ -115,4 +115,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout coerce('labelangle'); coerce('labelside'); + coerce('bgline.color'); }; diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index d314f9ad4c8..9724b6f5c73 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -154,7 +154,7 @@ function model(layout, d, i) { var trace = cd0.trace; var lineColor = helpers.convertTypedArray(cd0.lineColor); var line = trace.line; - var deselectedLines = {color: rgba(c.deselectedLineColor)}; + var deselectedLines = {color: rgba(trace.bgline.color)}; var cOpts = Colorscale.extractOpts(line); var cscale = cOpts.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale; var domain = trace.domain; From 9b4711b74cd5c30dfccdce3ef27b875c2856f65a Mon Sep 17 00:00:00 2001 From: archmoj Date: Fri, 13 Mar 2020 17:42:33 -0400 Subject: [PATCH 2/5] rename new attribute to unselected.line.color --- src/traces/parcoords/attributes.js | 24 +++++++++++++----------- src/traces/parcoords/defaults.js | 2 +- src/traces/parcoords/parcoords.js | 2 +- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index e514d1ccc6e..52e7731f8ff 100644 --- a/src/traces/parcoords/attributes.js +++ b/src/traces/parcoords/attributes.js @@ -141,18 +141,20 @@ module.exports = { description: 'The dimensions (variables) of the parallel coordinates chart. 2..60 dimensions are supported.' }), - bgline: { - color: { - valType: 'color', - dflt: '#777', - role: 'style', - editType: 'plot', - description: [ - 'Sets the color of lines in the background', - 'i.e. unselected lines.' - ].join(' ') + unselected: { + line: { + color: { + valType: 'color', + dflt: '#777', + role: 'style', + editType: 'plot', + description: [ + 'Sets the color of lines in the background', + 'i.e. unselected lines.' + ].join(' ') + }, + editType: 'calc' }, - editType: 'calc' }, diff --git a/src/traces/parcoords/defaults.js b/src/traces/parcoords/defaults.js index 64cb94bdabd..5f63661ff30 100644 --- a/src/traces/parcoords/defaults.js +++ b/src/traces/parcoords/defaults.js @@ -115,5 +115,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout coerce('labelangle'); coerce('labelside'); - coerce('bgline.color'); + coerce('unselected.line.color'); }; diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index 9724b6f5c73..407f47b39f4 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -154,7 +154,7 @@ function model(layout, d, i) { var trace = cd0.trace; var lineColor = helpers.convertTypedArray(cd0.lineColor); var line = trace.line; - var deselectedLines = {color: rgba(trace.bgline.color)}; + var deselectedLines = {color: rgba(trace.unselected.line.color)}; var cOpts = Colorscale.extractOpts(line); var cscale = cOpts.reversescale ? Colorscale.flipScale(cd0.cscale) : cd0.cscale; var domain = trace.domain; From 73fc07946e885ebd48386b434c42ec9db5bb3095 Mon Sep 17 00:00:00 2001 From: archmoj Date: Fri, 13 Mar 2020 18:13:36 -0400 Subject: [PATCH 3/5] add test for parcoords unselected.line.color and increase margins in similar tests --- test/jasmine/tests/parcoords_test.js | 68 ++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/test/jasmine/tests/parcoords_test.js b/test/jasmine/tests/parcoords_test.js index 7718ba64f2c..d1a78bbe580 100644 --- a/test/jasmine/tests/parcoords_test.js +++ b/test/jasmine/tests/parcoords_test.js @@ -856,6 +856,12 @@ describe('parcoords Lifecycle methods', function() { }], line: {color: 'blue'} }], { + margin: { + t: 0, + b: 0, + l: 0, + r: 0 + }, width: 300, height: 200 }) @@ -888,6 +894,12 @@ describe('parcoords Lifecycle methods', function() { }], line: {color: 'blue'} }], { + margin: { + t: 0, + b: 0, + l: 0, + r: 0 + }, width: 300, height: 200 }) @@ -910,6 +922,62 @@ describe('parcoords Lifecycle methods', function() { .catch(failTest) .then(done); }); + + it('@gl unselected.line.color `Plotly.restyle` should change context layer line.color', function(done) { + var testLayer = '.gl-canvas-context'; + + var list1 = []; + var list2 = []; + for(var i = 0; i <= 100; i++) { + list1[i] = i; + list2[i] = 100 - i; + } + + Plotly.plot(gd, [{ + type: 'parcoords', + dimensions: [{ + constraintrange: [1, 10], + values: list1 + }, { + values: list2 + }], + line: {color: '#0F0'}, + unselected: {line: {color: '#F00'}} + }], { + margin: { + t: 0, + b: 0, + l: 0, + r: 0 + }, + width: 300, + height: 200 + }) + .then(function() { + var rgb = getAvgPixelByChannel(testLayer); + expect(rgb[0]).not.toBe(0, 'red'); + expect(rgb[1]).toBe(0, 'no green'); + expect(rgb[2]).toBe(0, 'no blue'); + + return Plotly.restyle(gd, 'unselected.line.color', '#00F'); + }) + .then(function() { + var rgb = getAvgPixelByChannel(testLayer); + expect(rgb[0]).toBe(0, 'no red'); + expect(rgb[1]).toBe(0, 'no green'); + expect(rgb[2]).not.toBe(0, 'blue'); + + return Plotly.restyle(gd, 'unselected.line.color', 'rgba(0,0,0,0)'); + }) + .then(function() { + var rgb = getAvgPixelByChannel(testLayer); + expect(rgb[0]).toBe(0, 'no red'); + expect(rgb[1]).toBe(0, 'no green'); + expect(rgb[2]).toBe(0, 'no blue'); + }) + .catch(failTest) + .then(done); + }); }); describe('parcoords basic use', function() { From 1af1c90bf445b37d2ddab8e1942358fb5ab2d3c2 Mon Sep 17 00:00:00 2001 From: archmoj Date: Fri, 13 Mar 2020 21:39:11 -0400 Subject: [PATCH 4/5] add react tests for line.color and unselected.line.color --- test/jasmine/tests/parcoords_test.js | 68 ++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/test/jasmine/tests/parcoords_test.js b/test/jasmine/tests/parcoords_test.js index d1a78bbe580..072eb8f5868 100644 --- a/test/jasmine/tests/parcoords_test.js +++ b/test/jasmine/tests/parcoords_test.js @@ -978,6 +978,74 @@ describe('parcoords Lifecycle methods', function() { .catch(failTest) .then(done); }); + + it('@gl unselected.line.color `Plotly.react` should change line.color and unselected.line.color', function(done) { + var unselectedLayer = '.gl-canvas-context'; + var selectedLayer = '.gl-canvas-focus'; + + var list1 = []; + var list2 = []; + for(var i = 0; i <= 100; i++) { + list1[i] = i; + list2[i] = 100 - i; + } + + var fig = { + data: [{ + type: 'parcoords', + dimensions: [{ + constraintrange: [1, 10], + values: list1 + }, { + values: list2 + }], + line: {color: '#0F0'}, + unselected: {line: {color: '#F00'}} + }], + layout: { + margin: { + t: 0, + b: 0, + l: 0, + r: 0 + }, + width: 300, + height: 200 + } + }; + + var rgb; + + Plotly.newPlot(gd, fig) + .then(function() { + rgb = getAvgPixelByChannel(unselectedLayer); + expect(rgb[0]).not.toBe(0, 'red'); + expect(rgb[1]).toBe(0, 'no green'); + expect(rgb[2]).toBe(0, 'no blue'); + + rgb = getAvgPixelByChannel(selectedLayer); + expect(rgb[0]).toBe(0, 'no red'); + expect(rgb[1]).not.toBe(0, 'green'); + expect(rgb[2]).toBe(0, 'no blue'); + + fig.data[0].line.color = '#FF0'; + fig.data[0].unselected.line.color = '#00F'; + return Plotly.react(gd, fig); + }) + .then(function() { + rgb = getAvgPixelByChannel(selectedLayer); + expect(rgb[0]).not.toBe(0, 'red'); + expect(rgb[1]).not.toBe(0, 'green'); + expect(rgb[2]).toBe(0, 'no blue'); + + rgb = getAvgPixelByChannel(unselectedLayer); + expect(rgb[0]).toBe(0, 'no red'); + expect(rgb[1]).toBe(0, 'no green'); + expect(rgb[2]).not.toBe(0, 'blue'); + }) + .catch(failTest) + .then(done); + }); }); describe('parcoords basic use', function() { From b4dabb224c37724951f638462dcb1421ab85011e Mon Sep 17 00:00:00 2001 From: archmoj Date: Fri, 13 Mar 2020 21:47:05 -0400 Subject: [PATCH 5/5] use editType plot for unselected and unselected.line containers --- src/traces/parcoords/attributes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/traces/parcoords/attributes.js b/src/traces/parcoords/attributes.js index 52e7731f8ff..00bdb452f51 100644 --- a/src/traces/parcoords/attributes.js +++ b/src/traces/parcoords/attributes.js @@ -153,9 +153,9 @@ module.exports = { 'i.e. unselected lines.' ].join(' ') }, - editType: 'calc' + editType: 'plot' }, - editType: 'calc' + editType: 'plot' }, line: extendFlat({editType: 'calc'},