Throttle Render of List on DataStore Update

Webix JS
#1

Hi,

I have a GroupList that has its data property pointing to a TreeCollection. Every .add() and .updateItem() call to this TreeCollection seems to trigger the GroupList’s render. If too many of these updates, and thus renders, occur too quickly, the entire UI halts until all the updates are complete. The rate of updates to the TreeCollection is variable, so there is no consistent rate at which these updates may be coming in; however, at the moment, I am testing adding/updating about 6000 times in less than a second. I know that it is the rendering of the GroupList that is causing this UI halting, as if I remove the GroupList component but continue the updating of the TreeCollection, there is no UI halting.

A few things I have tried in order to slow down the rate at which the GroupList is refreshing:

  1. I have tried using TreeCollection.blockEvent() but that does not seem to block the updating of the GroupList and thus the rendering.
  2. I have tried putting putting the added nodes into a buffer TreeCollection and then on a time interval TreeCollection.data.sync() the buffer and view’s TreeCollection, but this still causes blocking. I even attempted wrapping this .sync() between a blockEvent() and unblockEvent(), but similar to #1 that does not actually block the GroupList from refreshing.
  3. Tried putting some kind of check in the GroupList’s onBeforeRender to skip some render calls, but that did not seem to work well.
  4. I tried adding a datathrottle property to the GroupList, but that seems to only be applicable to dynamic loading over a network, not another inline DataStore.
  5. We have had some success in testing out bundling up all data for the TreeCollection into JSON to be put into the TreeCollection by calling TreeCollection.parse(). This causes no UI halting, but requires everything to be done all at once.

In summary, how can I implement a datathrottle on the GroupList when the GroupList’s data is pointing to a TreeCollection or other DataStore?

#2

Hello @camerenisonfire ,

blockEventis the correct approach to block the rendering, but the point is that data syncing depends on events of DataStore / TreeStore of components.
In general, data widgets (incl. Collections) have two levels of API: for visual appearance/common operations and an inner data storage with extended API for data operations only.

So it is possible to block rendering calls by applying block/unblockEvent for this storage and refresh the collection to trigger the rendering only once. Please, check the following sample:

https://snippet.webix.com/b7hik4hg