Question about adding pagination for report visualization

Nikolay a year ago

Hello,

I didn't have to do reports until recently, but since today I noticed that the export works fine, but the preview is pretty bad.
This happens when there are many records and the browser tries to render them all. The application gets stuck and cannot be used. Also even after rendering everything it becomes impossible to apply filters to the columns.

My question is whether the backend can handle pagination and whether for the frontend it would be appropriate to use
https://mui.com/material-ui/react-pagination/

Regards

Anton Tananaeva year ago

We don't support pagination currently.

Nikolay a year ago

In source I found limitation for 4000 items in route report preview. In some cases this amount of data cover 2 days, maybe less for single device.

And for sure this data is too much for rendering at once in browser.

If backend is not supporting pagination it would be a good approach to make pagination in frontend if it is possible.

I'll do research to find a way to handle this "issue" for my self.

But if you have some advice I'll be really grateful (why item.slice(0, 4000))

Anton Tananaeva year ago

That's an arbitrary number to limit the amount of data. Because the web app can't handle more.

Pagination would definitely be good to have.

Nikolay a year ago
Anton Tananaeva year ago

Does this include API pagination?

Nikolay a year ago

Nope, just frontend. It's MUI table pagination component.

Anton Tananaeva year ago

What about the map?

Nikolay a year ago

Not sure about what map expected behavior should be. But the points are rendering on click well. Unit stays on first point when chose another position.

Application keeps working with 100 000 points.

Nikolay a year ago

Correction unit is moving on position select.

Nikolay a year ago

@Anton Tananaev

What do you think, will you give this approach a chance?

Only Combined Report is a little tricky

Anton Tananaeva year ago

Not sure. Maybe we can enable pagination when there's too much data.

Nikolay a year ago

I don't know what this solution should look like in code.

Condition to check the length of the Array and render different components?

Or set visibility to none on bottom pagination component when not need it.

Anton Tananaeva year ago

Depends on what the cleanest solution is and how much code there is. If not a lot, probably just use an if condition.

Nikolay a year ago

Maybe PR and continue the discussion in the repo?