Question about adding pagination for report visualization

Nikolay 2 years 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 Tananaev2 years ago

We don't support pagination currently.

Nikolay 2 years 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 Tananaev2 years 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 2 years ago
Anton Tananaev2 years ago

Does this include API pagination?

Nikolay 2 years ago

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

Anton Tananaev2 years ago

What about the map?

Nikolay 2 years 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 2 years ago

Correction unit is moving on position select.

Nikolay 2 years ago

@Anton Tananaev

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

Only Combined Report is a little tricky

Anton Tananaev2 years ago

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

Nikolay 2 years 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 Tananaev2 years 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 2 years ago

Maybe PR and continue the discussion in the repo?