Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable text for scattergl trace #2737

Merged
merged 50 commits into from Jul 5, 2018

Conversation

Projects
None yet
3 participants
@dy
Copy link
Contributor

commented Jun 14, 2018

Implements #2501

  • Text rendering via gl-text
    • antialiasing
    • kerning
    • 1e6 characters (test)
    • horiz/vert alignment
  • gl_text_chart_* mocks
@etpinard

This comment has been minimized.

Copy link
Member

commented Jun 15, 2018

Nice @dy 🎉

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

dy added some commits Jun 15, 2018

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 18, 2018

Member

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

This comment has been minimized.

Copy link
Member

commented Jun 18, 2018

@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

dy added some commits Jun 18, 2018

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

Does this work? And what about selected.textfont?

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 29, 2018

Member

mostly done in 1a64005

@@ -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;

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

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

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

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

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(' ')

This comment has been minimized.

Copy link
@etpinard
@@ -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) {

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

Can you 🔪 this out?

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


This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

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

This comment has been minimized.

Copy link
@dy

dy Jun 21, 2018

Author Contributor

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

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

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

Is this for windows compat?

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

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

never mind. Thanks for the fix!

@etpinard

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

TODO:

  • npm run build is failing at the plot-schema step. Some gltext dependency does not like jsdom it seems. Now fixed.
@@ -0,0 +1,144 @@
{
"data": [

This comment has been minimized.

Copy link
@etpinard

etpinard Jun 21, 2018

Member

gl2d mocks use the gl2d_ prefix

@dy would you mind renaming these new mocks?

This comment has been minimized.

Copy link
@dy

dy Jun 21, 2018

Author Contributor

Fixed

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

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:

image

in Safari 11.1:

image

but something is still off in FF 61:

image

@dy

This comment has been minimized.

Copy link
Contributor Author

commented Jul 4, 2018

@etpinard hmm, I am getting
image
in FF 61 in OSX 10.10.5

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

still getting:

image

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

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

trace stack in ubuntu:

image

dy added some commits Jul 4, 2018

@dy

This comment has been minimized.

Copy link
Contributor Author

commented Jul 4, 2018

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

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

@dy for gl2d_text_chart_arrays, no errors but incorrect rendering:

image

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

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

image

@dy

This comment has been minimized.

Copy link
Contributor Author

commented Jul 4, 2018

@etpinard is that persistent behavior?

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

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

This comment has been minimized.

Copy link
Member

commented Jul 4, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Jul 5, 2018

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:
chrome svg
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:
chrome gl
FF the first render in a given tab is missing some items:
ff gl first
But the second gets them all:
ff gl second
And Safari on first render has the wrong font for "Text G":
safari gl
but it's fixed on second render:
safari gl second

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 5, 2018

Followup issue for @dy -> #2780

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 5, 2018

Merging as "beta".

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

@etpinard etpinard merged commit 66f7fda into master Jul 5, 2018

6 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: test-image Your tests passed on CircleCI!
Details
ci/circleci: test-image2 Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine2 Your tests passed on CircleCI!
Details
ci/circleci: test-syntax Your tests passed on CircleCI!
Details

@etpinard etpinard deleted the textgl branch Jul 5, 2018

@etpinard

This comment has been minimized.

Copy link
Member

commented Jul 5, 2018

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.

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

@etpinard etpinard referenced this pull request Aug 29, 2018

Closed

gl2d known limitations #130

20 of 21 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.