Page reload when zooming or updating echart/highchart

[golgitab]

Question

Hello! I have encountered an issue with plots (echart/highchart) while building my application with NiceGUI.

I attempt to plot thousands points on plot and use some tools like zooming, selecting, e.g. provided by echarts framework.
The issue is when i am interacting with plot on client side it works slower then demo from echart website with 1kk points (much more than my case) and at some point page could be reloaded on its own.

Code where i initialize my plot.

from nicegui import ui
from datetime import datetime
from random import randint

ui.echart({
    'xAxis': {'type': 'time'},
    'yAxis': {'type': 'value'},
    'legend': {
        'orient': 'horizontal',
        'bottom': 10
    },
    'series': [
        {'type': 'scatter', 'data': [[datetime(randint(2009, 2050),randint(1,12),randint(1,28)), randint(1, 150000)] for i in range(10000)]} for _ in range(30)
    ],
    'toolbox': {
        'show': True,
        'feature': {
            'saveAsImage': {}
        }
    },
    'dataZoom': [
        {
            'id': 'dataZoomX',
            'type': 'inside',
            'xAxisIndex': [0],
            'filterMode': 'filter'
        }
    ]
}).classes('w-full h-96')

ui.run()

[falkoschindler]

Hi @golgitab,

Can you please share a minimal executable code example? Thanks!
Why is it important to provide a minimal reproducible example?

[golgitab]

Hi @falkoschindler,

Thanks for your comment. I have corrected the code to make it executable.
The problem occurs when playing with zooming and moving in plot

[falkoschindler]

Thanks for the update, @golgitab!
We're struggling to see why zooming should be slower in NiceGUI than in plain JavaScript. Can you, please, share a link to the "demo from echart website with 1kk points" so we can experiment a little more? Thanks!

[golgitab]

@falkoschindler
Hi, demo large scatter.

Isn't it related to the fact that each action on client side invokes the server reaction even if there is no handle functions are provided? I don't know if it makes sense at all, but worth trying to guess :)

[falkoschindler]

Ok, I re-created the large scatter demo in NiceGUI and it runs equally fast:

import numpy as np
from nicegui import ui

def gen_data(count, offset):
    x = np.random.rand(count) * 10
    y = np.sin(x) + offset + 0.1 * np.random.randn(count) * x
    return np.stack([x, y]).T.tolist()

data1 = gen_data(500_000, 0)
data2 = gen_data(500_000, 10)
ui.echart({
    'title': {'text': f'{len(data1) + len(data2)} Points'},
    'tooltip': {},
    'toolbox': {'left': 'center', 'feature': {'dataZoom': {}}},
    'legend': {'orient': 'vertical', 'right': 10},
    'xAxis': [{}],
    'yAxis': [{}],
    'dataZoom': [{'type': 'inside'}, {'type': 'slider'}],
    'animation': False,
    'series': [
        {
            'name': 'A',
            'type': 'scatter',
            'data': data1,
            'dimensions': ['x', 'y'],
            'symbolSize': 3,
            'itemStyle': {'opacity': 0.4},
            'large': True,
        },
        {
            'name': 'B',
            'type': 'scatter',
            'data': data2,
            'dimensions': ['x', 'y'],
            'symbolSize': 3,
            'itemStyle': {'opacity': 0.4},
            'large': True,
        }
    ]
})

ui.run()

Maybe the 'large': True, option is important?

[golgitab]

@falkoschindler
Thank you for your message. It's really true that demo case works as fast as shown.
I decided to play with demo code a bit to repeat my situation not only in terms of total points, but in total amount of series.
It turned out that the series play bigger role than it seemed.

In demo editor (in plain js) i reduced number of points in 1 series to 100-1000 and then added 30-40 copies of that and the browser got stuck as well as slow behavior came up.

To summarize - it's not NiceGUI problem, sorry i spent your time