Implementation of arrayOk textposition for scatter3d traces #3200

archmoj · 2018-10-31T22:13:28Z

This PR resolves #2872 so that the arrays could be used for different alignments of texts in scatter3d.
@etpinard
@alexcjohnson

etpinard

Nice PR @archmoj - thanks!

The changes in gl-vis/gl-scatter3d#11 also look good. I made two small comments here.

As this is a new feature, we'll hold off on merging it for at least one week - in case we need to make another patch under 1.42.x

etpinard · 2018-11-01T13:40:45Z

src/traces/scatter3d/attributes.js

@@ -160,7 +160,7 @@ var attrs = module.exports = overrideAll({
        colorAttributes('marker')
    ),

-    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center', arrayOk: false}),
+    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center', arrayOk: true}),


Making this line

textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center'}),

would suffice as textposition in the scatter attributes is already arrayOk:

plotly.js/src/traces/scatter/attributes.js

Lines 520 to 535 in fe2d8d7

textposition: {

valType: 'enumerated',

values: [

'top left', 'top center', 'top right',

'middle left', 'middle center', 'middle right',

'bottom left', 'bottom center', 'bottom right'

],

dflt: 'middle center',

arrayOk: true,

role: 'style',

editType: 'calc',

description: [

'Sets the positions of the `text` elements',

'with respects to the (x,y) coordinates.'

].join(' ')

},

etpinard · 2018-11-01T13:46:35Z

src/traces/scatter3d/convert.js

@@ -133,14 +133,49 @@ function calculateErrorParams(errors) {
    return {capSize: capSize, color: color, lineWidth: lineWidth};
 }

+function parseAlignmentX(a) {
+    if(a === null || a === undefined) return 0;
+    else if(typeof(a) === 'number') return a;


Why would textposition[i] ever be a number here?

Well, I thought we could somehow make use of other numbers (instead than only -1|0|1) to scale the distances. But yeah I may remove those condition checks (also for null & undefined) since I noticed the inputs seem to be parsed and validated before getting to there?

etpinard · 2018-11-01T13:47:33Z

test/image/mocks/gl3d_scatter3d-different-align-texts.json

+            "type": "scatter3d",
+            "mode":"lines+markers+text",
+            "text": ["middle center", "bottom", "right", "bottom right", "bottom left", "left", "top right", "top", "top left"],
+            "textposition":      ["", "bottom", "right", "bottom right", "bottom left", "left", "top right", "top", "top left"]


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

src/traces/scatter3d/convert.js

@@ -233,7 +266,7 @@ function convertPlotlyOptions(scene, data) {
    }

    if('textposition' in data) {
-        params.textOffset = calculateTextOffset(data.textposition);  // arrayOk === false
+        params.textOffset = calculateTextOffset(data.textposition, data.dflt);


Hmm. What's data.dflt here?

etpinard · 2018-11-06T15:28:47Z

@archmoj I'm trying to plot

Plotly.newPlot(gd, [{
  type: 'scatter3d',
  mode: 'markers+text',
  x: [1, 2],
  y: [1, 2],
  z: [1, 2],
  text: ['a', 'b'],
  textposition: [null, undefined]
}])

off this branch, but I'm getting:

which points to:

plotly.js/src/plot_api/helpers.js

Lines 265 to 274 in f84af74

    
           if(!Registry.traceIs(trace, 'pie') && !Registry.traceIs(trace, 'bar')) { 
        
               if(Array.isArray(trace.textposition)) { 
        
                   for(i = 0; i < trace.textposition.length; i++) { 
        
                       trace.textposition[i] = cleanTextPosition(trace.textposition[i]); 
        
                   } 
        
               } 
        
               else if(trace.textposition) { 
        
                   trace.textposition = cleanTextPosition(trace.textposition); 
        
               } 
        
           }

so we might have to patch that cleanTextPosition helper.

etpinard · 2018-11-07T16:01:53Z

src/plot_api/helpers.js


-    if(textposition.indexOf('left') !== -1) posX = 'left';
-    else if(textposition.indexOf('right') !== -1) posX = 'right';
+    if(textposition !== undefined && textposition !== null) {


I think we have to be even more strict at this stage here. Anything that's not a string shouldn't fall into this block. The items inside textposition can really be anything.

Have you tried something like:

Plotly.newPlot(gd, [{ type: 'scatter3d', mode: 'markers+text', x: [1, 2], y: [1, 2], z: [1, 2], text: ['a', 'b'], textposition: [null, undefined, true, false, [], {}, NaN, Infinity] }])

... and would you mind adding a jasmine test for this ⤴️

Somewhere at the end of this describe block would be 👌

etpinard · 2018-11-09T14:55:21Z

This PR is ✅

You can go ahead and merge gl-vis/gl-scatter3d#11 , release gl-scatter3d patch. Looks like you'll also need to merge a conflict in gl3d_plot_interact. Once that's done 💃

archmoj added 2 commits October 31, 2018 17:21

support for different text alignments using scattergl

e6d7532

correct baseline image based on new feature

cdb0bac

archmoj added feature something new status: reviewable labels Oct 31, 2018

archmoj mentioned this pull request Oct 31, 2018

support different alignments on a trace gl-vis/gl-scatter3d#11

Merged

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

etpinard reviewed Nov 1, 2018

View reviewed changes

archmoj added 2 commits November 1, 2018 12:30

revised cases and using defaults in the function

37c592e

correct syntax

f804dae

etpinard reviewed Nov 6, 2018

View reviewed changes

archmoj added 2 commits November 6, 2018 11:22

fix undefined and null textposition inputs for scatter plot

73cd576

removed unused default variable

d4addd0

etpinard reviewed Nov 7, 2018

View reviewed changes

archmoj added 2 commits November 7, 2018 18:35

revised the condition check and added a jasmine test for textpositions

bb7adb6

revised the condition check and added a jasmine test for textpositions

bc0c5df

archmoj and others added 2 commits November 9, 2018 10:22

using gl-scatter3d v.1.0.16

ee8db8d

Merge branch 'master' into issue-2872

555a541

archmoj merged commit 427fd14 into master Nov 9, 2018

archmoj deleted the issue-2872 branch November 9, 2018 16:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation of arrayOk textposition for scatter3d traces #3200

Implementation of arrayOk textposition for scatter3d traces #3200

archmoj commented Oct 31, 2018

etpinard left a comment

etpinard Nov 1, 2018

etpinard Nov 1, 2018

archmoj Nov 1, 2018

etpinard Nov 1, 2018

etpinard Nov 6, 2018

etpinard commented Nov 6, 2018

etpinard Nov 7, 2018

etpinard Nov 7, 2018

etpinard commented Nov 9, 2018

	textposition: {
	valType: 'enumerated',
	values: [
	'top left', 'top center', 'top right',
	'middle left', 'middle center', 'middle right',
	'bottom left', 'bottom center', 'bottom right'
	],
	dflt: 'middle center',
	arrayOk: true,
	role: 'style',
	editType: 'calc',
	description: [
	'Sets the positions of the `text` elements',
	'with respects to the (x,y) coordinates.'
	].join(' ')
	},

Implementation of arrayOk textposition for scatter3d traces #3200

Implementation of arrayOk textposition for scatter3d traces #3200

Conversation

archmoj commented Oct 31, 2018

etpinard left a comment

Choose a reason for hiding this comment

etpinard Nov 1, 2018

Choose a reason for hiding this comment

etpinard Nov 1, 2018

Choose a reason for hiding this comment

archmoj Nov 1, 2018

Choose a reason for hiding this comment

etpinard Nov 1, 2018

Choose a reason for hiding this comment

etpinard Nov 6, 2018

Choose a reason for hiding this comment

etpinard commented Nov 6, 2018

etpinard Nov 7, 2018

Choose a reason for hiding this comment

etpinard Nov 7, 2018

Choose a reason for hiding this comment

etpinard commented Nov 9, 2018