Hi all,
in the applications I develop in many case I have the need to process data in some way and load them into tables (or charts). I’ve found that the more the data are, the more time it takes for them to be actually displayed after having done the assignment (table.props.data = dataset). It’s not a delay given by the data processing functions, as I thought at the beginning, it’s the actual internal loading of the data inside the component. So in my case the final result is going to be something like:
the user configures some filter and clicks the refresh button;
the table blanks out, the refresh button disables, and some loading indicator appears;
after some seconds the loading indicator disappears, the refresh button reenables, and the table is still blank;
after 10/20 seconds the user annoyes and goes to 1 again;
After some iteration the user exits the refresh loop and enters the call loop
I’m not sure if it’s a lack of knowledge on my side, so I’m asking if there’s a way to know when the data will be available to be displayed?
The fact that the table blanks out seems to me that the binding already is completed
For a table this really never should take to long to render…
but you can try turn on/off the property virtualized.
how much data are we talking about?
Hello and thanks for replying. Yes, I was not much clear, but what I mean is that it takes a bit of time for the data to be rendered, after that the dataset is assigned to the table’s data property. Right now I don’t have huge data to test, anyway I have a table with a thousand rows, 10 columns and some cell style customization, and the data takes a couple of seconds to be shown. But I have seen cases with more data which took more time to render. I tried with the virtualized property, in this case I don’t find any benefit, I’ll try this with more data, thanks for the tip.
Anyway, I had a similar problem in other components where you can load large amount of data, like XY Charts.
There’s no way to know when the component is done, because in the strictest sense it’s not Ignition (Perspective) that’s taking the 10-20 seconds. The property assignment is instantaneous, but after the assignment there are several factors which all add to the amount of time:
The Gateway has to send all of the data to the browser through the websocket. Like a pipe, there’s only so much data which can be sent at one time - the data sort of backs up and comes through in chunks. The browser receives the notification of a data changes first and so removes the existing data, but can’t display anything until it receives all of the data it needs.
The browser then needs to figure out how much of the data to display and how to display it. Is there a limit on how many rows to display? Are there filters applied? How wide should the rows be, and what about the columns? Now let’s apply styling… There are lots of calculations being done before the content is drawn.
Turning off virtualization would speed up your “load” time. Removing unnecessary styling would improve the time to “render”. In general, I advise against writing to component props, and instead binding them - using other components (or a component’s own filtering mechanisms) to manipulate the data in use; this should eliminate the “blank” period as the component isn’t getting an entirely new value.
If you’re on version 8.1.15 or newer, there is also a websocket property modification available which allows for sending larger chunks at one time. This could assist in reducing the “load” time because it makes your pipe bigger, allowing for more data through at one time.
