Enable text for scattergl trace #2737

dy · 2018-06-14T22:24:13Z

Implements #2501

etpinard · 2018-06-15T13:10:20Z

Nice @dy 🎉

Anything in particular you'd like me to help out with?

etpinard · 2018-06-18T14:46:51Z

src/traces/scattergl/convert.js

+                    textOptions.align = 'left';
+                    break;
+                case 'center':
+                case 'centre':


That's not a valid value. We should implement the same textposition values as scatter:

'top left', 'top center', 'top right', 'middle left', 'middle center', 'middle right', 'bottom left', 'bottom center', 'bottom right'

etpinard · 2018-06-18T14:53:41Z

@dy regl-text appears pretty slow at 3000 text entries.

Try:

Plotly.d3.json('https://plot.ly/~jackp/18395.json', (err, fig) => {
  fig.data[1].type = 'scattergl'
  fig.config = {scrollZoom: true}
  console.time('regl-text')
  Plotly.newPlot(gd, fig)
  console.timeEnd('regl-text')
})

I get 5000-6000ms

etpinard · 2018-06-21T17:59:18Z

src/traces/scattergl/attributes.js

    },
    unselected: {
-        marker: scatterAttrs.unselected.marker
+        marker: scatterAttrs.unselected.marker,
+        textfont: scatterAttrs.unselected.textfont


Does this work? And what about selected.textfont?

Confirmed. selected.textfont.color and unselected.textfont.color do not work.

mostly done in 1a64005

etpinard · 2018-06-21T18:00:04Z

src/components/drawing/index.js

@@ -622,8 +624,7 @@ function textPointPosition(s, textPosition, fontSize, markerRadius) {

    var numLines = (svgTextUtils.lineCount(s) - 1) * LINE_SPACING + 1;
    var dx = TEXTOFFSETSIGN[h] * r;
-    var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r +
-            (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;
+    var dy = fontSize * 0.75 + TEXTOFFSETSIGN[v] * r + (TEXTOFFSETSIGN[v] - 1) * numLines * fontSize / 2;


Can you try not committing things like that in the future? Thank you.

etpinard · 2018-06-21T18:02:40Z

src/traces/scattergl/attributes.js

    mode: {
        valType: 'flaglist',
-        flags: ['lines', 'markers'],
+        flags: ['lines', 'markers', 'text'],


Now that scattergl supports on-graph, we can add hovertext like in svg scatter traces:

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

Lines 91 to 104 in 6ac47ec

hovertext: {

valType: 'string',

role: 'info',

dflt: '',

arrayOk: true,

editType: 'style',

description: [

'Sets hover text elements associated with each (x,y) pair.',

'If a single string, the same string appears over',

'all the data points.',

'If an array of string, the items are mapped in order to the',

'this trace\'s (x,y) coordinates.',

'To be seen, trace `hoverinfo` must contain a *text* flag.'

].join(' ')

done in 959a555

etpinard · 2018-06-21T18:04:32Z

src/traces/scattergl/index.js

@@ -213,6 +220,11 @@ function sceneUpdate(gd, subplot) {
            if(scene.line2d) scene.line2d.update(opts);
            if(scene.error2d) scene.error2d.update(opts.concat(opts));
            if(scene.select2d) scene.select2d.update(opts);
+            if(scene.glText) {


Can you 🔪 this out?

etpinard · 2018-06-21T18:04:49Z

src/traces/scattergl/index.js

@@ -161,6 +165,7 @@ function sceneOptions(gd, subplot, trace, positions, x, y) {
    return opts;
 }

+


Again here. Please don't commit lines like this.

Ok, but in this case all functions are separated by 2 new lines and here by just one, so hope you don't mind a bit of perfectionism

etpinard · 2018-06-21T18:07:52Z

tasks/header.js

@@ -87,7 +87,10 @@ function updateHeadersInSrcFiles() {
    });

    function isCorrect(header) {
-        return (header.value === licenseStr);
+        return (
+            header.value.replace(/\s+$/gm, '') ===


Is this for windows compat?

If so, I would prefer a different solution. Trimming spaces here could lead to false positive assertions.

never mind. Thanks for the fix!

etpinard · 2018-06-21T18:11:21Z

TODO:

npm run build is failing at the plot-schema step. Some gltext dependency does not like jsdom it seems. Now fixed.

etpinard · 2018-06-21T18:12:31Z

test/image/mocks/gl_text_chart_arrays.json

@@ -0,0 +1,144 @@
+{
+    "data": [


gl2d mocks use the gl2d_ prefix

@dy would you mind renaming these new mocks?

dy · 2018-07-03T23:46:30Z

Ok, should be fixed!

etpinard · 2018-07-04T13:33:01Z

Thanks @dy !

Things have improved as far as I can tell on High Sierra on browserstack. The gl2d_text_chart_styling mock now looks like

in Chrome 67:

in Safari 11.1:

but something is still off in FF 61:

dy · 2018-07-04T20:49:36Z

@etpinard hmm, I am getting

in FF 61 in OSX 10.10.5

etpinard · 2018-07-04T20:58:24Z

still getting:

in FF61 on High Sierra (on browserstack) and my Ubuntu 16.04 laptop.

etpinard · 2018-07-04T20:59:26Z

trace stack in ubuntu:

dy · 2018-07-04T21:11:04Z

@etpinard can you please try one more time? (blind debugging, but no choice)

etpinard · 2018-07-04T21:14:34Z

@dy for gl2d_text_chart_arrays, no errors but incorrect rendering:

etpinard · 2018-07-04T21:17:17Z

but it's weird, after refreshing (ctrl-r), I get:

dy · 2018-07-04T21:28:41Z

@etpinard is that persistent behavior?

etpinard · 2018-07-04T21:32:03Z

is that permanent behavior?

what do mean by permanent?

First render is a given tabs is incorrect, hitting refresh once or mulitple times give the correct view

etpinard · 2018-07-04T22:41:35Z

Hopefully @alexcjohnson will have time to try this out in the next 15 hours or so. If not, I'm tempted to just merge this thing, flag it as "beta" in the release notes and have users try it out so that we can accumulate reports. Thoughts?

N.B. I'm about to go offline until about 9am tomorrow EDT (no internet at home after moving day).

alexcjohnson · 2018-07-05T09:53:37Z

Definite improvement, though there are still some oddities - I'm seeing similar effects to what @etpinard reported. I'd be OK with merging this as is and considering these issues bugs. Fairly urgent bugs though!

On Mac OS 10.13.5, retina display. For reference here's the SVG text_chart_arrays mock, which AFAICT looks identical on Chrome, FF, and Safari:

But the gl2d version looks bold and blurry (perhaps this is retina-only, related to #2756?), and there are first-load issues in FF (missing some items entirely) and Safari (wrong font).
Here's Chrome:

FF the first render in a given tab is missing some items:

But the second gets them all:

And Safari on first render has the wrong font for "Text G":

but it's fixed on second render:

etpinard · 2018-07-05T13:20:09Z

Followup issue for @dy -> #2780

etpinard · 2018-07-05T13:34:39Z

Merging as "beta".

Please comment on #2780 if you're seeing odd behavior.

etpinard · 2018-07-05T14:16:06Z

Some benchmarks using:

var n = /**/;
var letters = 'abcdefghijklmnopqrstuvwxyz';
var text = [];
var x = [];
var y = [];

for(var i = 0; i < n; i++) {
  x.push(Math.random())
  y.push(Math.random())
  text.push(letters[i % letters.length])
}

console.time('tx')
Plotly.newPlot(gd, [{
  type: 'scattergl', // or 'scatter'
  mode: 'text',
  x: x,
  y: y,
  text: text,
}])
console.timeEnd('tx')

n	scattergl [in ms]	scatter [in ms]
100	150	80
1e3	170	250
1e4	220	2000
1e5	500	---
1e6	1500-2000	---

But note that scattergl does not cluster text nodes, so panning and selection at when n > 1e5 is slow.

- follow-up from #2737

Enable text-related attributes

8ec98b9

etpinard added feature something new status: in progress labels Jun 14, 2018

etpinard added this to the v1.39.0 milestone Jun 14, 2018

Basic font rendering

862905c

dy added 2 commits June 15, 2018 10:54

Make correct render output

d1a06c0

Fix alignment

cbc7f3f

etpinard reviewed Jun 18, 2018

View reviewed changes

use github 'regl-text'

cc2cca1

dy added 11 commits June 18, 2018 14:39

Avoid double update

e5a771c

Fix image width

349b551

Add proper vertical alignment

71c1acb

Add textgl mocks

4fe4e3a

Use published gl-text package

ff1d4fc

Compare license ignoring trailing spaces

95a3d1a

Update deps

ed7e0a0

Fix es5 word

fa96cc7

Bump gl-util

9653fcf

Add mocks

17c1b0b

Fix mocks

0154571

etpinard reviewed Jun 21, 2018

View reviewed changes

etpinard and others added 4 commits July 4, 2018 10:05

fixup package-lock

e462eda

fix and 🔒 selections + array textfont.color

52614d1

fixup selected textfont.color logic + add a few more tests

143a61e

Bump gl-text

fb08f55

dy added 2 commits July 4, 2018 16:59

Update baselines

a5637dd

Round texture shape

6aedaa6

fixup package-lock

235f1ac

etpinard mentioned this pull request Jul 5, 2018

Fix *all* OS / browser-dependent scattergl text oddities #2780

Closed

etpinard merged commit 66f7fda into master Jul 5, 2018

etpinard deleted the textgl branch July 5, 2018 13:34

etpinard mentioned this pull request Jul 5, 2018

mode:text for regl-scatter2d #2501

Closed

etpinard added a commit that referenced this pull request Aug 10, 2018

add on-graph 'text' to scatterpolargl

d3b3615

- follow-up from #2737

etpinard mentioned this pull request Aug 10, 2018

Better polar setConvert + a few misc polar touch ups #2895

Merged

etpinard mentioned this pull request Aug 29, 2018

gl2d known limitations #130

Closed

21 tasks

etpinard mentioned this pull request Sep 10, 2018

Fix scattergl missing lines after non-line trace #2990

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable text for scattergl trace #2737

Enable text for scattergl trace #2737

dy commented Jun 14, 2018 •

edited

Loading

etpinard commented Jun 15, 2018

etpinard Jun 18, 2018

etpinard commented Jun 18, 2018

etpinard Jun 21, 2018

etpinard Jun 21, 2018

etpinard Jun 29, 2018

etpinard Jun 21, 2018

etpinard Jun 21, 2018

etpinard Jun 29, 2018

etpinard Jun 21, 2018

etpinard Jun 21, 2018

dy Jun 21, 2018

etpinard Jun 21, 2018 •

edited

Loading

etpinard Jun 21, 2018

etpinard commented Jun 21, 2018 •

edited

Loading

etpinard Jun 21, 2018 •

edited

Loading

dy Jun 21, 2018

dy commented Jul 3, 2018

etpinard commented Jul 4, 2018 •

edited

Loading

dy commented Jul 4, 2018

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

dy commented Jul 4, 2018

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

dy commented Jul 4, 2018 •

edited

Loading

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

alexcjohnson commented Jul 5, 2018

etpinard commented Jul 5, 2018

etpinard commented Jul 5, 2018

etpinard commented Jul 5, 2018 •

edited

Loading

	hovertext: {
	valType: 'string',
	role: 'info',
	dflt: '',
	arrayOk: true,
	editType: 'style',
	description: [
	'Sets hover text elements associated with each (x,y) pair.',
	'If a single string, the same string appears over',
	'all the data points.',
	'If an array of string, the items are mapped in order to the',
	'this trace\'s (x,y) coordinates.',
	'To be seen, trace `hoverinfo` must contain a text flag.'
	].join(' ')

		@@ -161,6 +165,7 @@ function sceneOptions(gd, subplot, trace, positions, x, y) {
		return opts;
		}

Enable text for scattergl trace #2737

Enable text for scattergl trace #2737

Conversation

dy commented Jun 14, 2018 • edited Loading

etpinard commented Jun 15, 2018

Choose a reason for hiding this comment

etpinard commented Jun 18, 2018

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

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

Choose a reason for hiding this comment

etpinard Jun 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Jun 21, 2018 • edited Loading

etpinard Jun 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dy commented Jul 3, 2018

etpinard commented Jul 4, 2018 • edited Loading

dy commented Jul 4, 2018

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

dy commented Jul 4, 2018

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

dy commented Jul 4, 2018 • edited Loading

etpinard commented Jul 4, 2018

etpinard commented Jul 4, 2018

alexcjohnson commented Jul 5, 2018

etpinard commented Jul 5, 2018

etpinard commented Jul 5, 2018

etpinard commented Jul 5, 2018 • edited Loading

dy commented Jun 14, 2018 •

edited

Loading

etpinard Jun 21, 2018 •

edited

Loading

etpinard commented Jun 21, 2018 •

edited

Loading

etpinard Jun 21, 2018 •

edited

Loading

etpinard commented Jul 4, 2018 •

edited

Loading

dy commented Jul 4, 2018 •

edited

Loading

etpinard commented Jul 5, 2018 •

edited

Loading