Can't change number of points displayed in a scattergl plot

[slishak]

If I run the app below and change the number of points plotted from the default value, any reduction from the initial value of 10 results in an empty trace being drawn (but with invisible points that can be hovered over), and any increase results in the first 10 points being plotted and the rest being plotted invisibly. 10 is used as a default example, I can change init_n_points to any number and it still shows the same behaviour relative to that number.

With init_n_points=10, when first opening page:

Changing the number of points to 9 and then clicking the button (hovering over an invisible point):

Changing to 200 (hovering over an invisible point):

The issue disappears if I remove the marker symbol (making me think it's related to #203) or if you change the type to Scatter instead of Scattergl.

As an aside, I initially thought that this was caused by #181 as I was seeing that error in conjunction with this effect (I see I forgot to mention that when I reported it). But when I look in the console for this app (which is a much simplier example based on the more complicated app that was showing the RangeErrors) I don't see that error, although when reducing the number of points from the initial value I see [.Offscreen-For-WebGL-00000000063E4360]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
from plotly import graph_objs
import random

app = dash.Dash()

init_n_points = 10

app.layout = html.Div(children=[
    dcc.Input(id='input-number', inputmode='numeric', value=init_n_points),
    html.Button(children='click', id='button'),
    dcc.Graph(
        id='example-graph',
    )
])


@app.callback(
    Output('example-graph', 'figure'),
    [Input('button', 'n_clicks')],
    [State('input-number', 'value')]
)
def f(n_clicks, n_points):
    n_points = int(n_points)
    tr = graph_objs.Scattergl(
        x=[random.random() for _ in range(n_points)],
        y=[random.random() for _ in range(n_points)],
        mode='markers',
        marker={'symbol': 'x'},
    )

    fig = {'data': [tr], 'layout': {}}

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

[chriddyp]

@charleyferrari or @bcdunbar - Could you triage this one and if you can reproduce, create a codepen and a plotly.js issue?

[bcdunbar]

@chriddyp I'll take a look.

[bcdunbar]

I ran the above example without hassle.

dash 0.21.1
dash-core-components 0.23.0
dash-html-components 0.11.0
plotly 2.7.0

That said, there seems to be an issue with scattergl symbols in Micosoft Edge.

@slishak Per chance, are you using (a) an older version, or (b) Edge browser?

[slishak]

Sorry, should have written the versions in the issue. This appears to have been fixed by dash-core-components 0.23.0. The issue above occurs (in Chrome) with:

dash==0.21.1
dash-core-components==0.22.2
dash-html-components==0.11.0
dash-renderer==0.13.0
plotly==2.7.0

[bcdunbar]

@slishak thanks for clarifying

[MichalZG]

Hi everyone,
There is still a problem if you will try changing a number of points to > 10k and back to few points.
@chriddyp I know this is Scattergl issue, any chance to fix this?