How can I make Qooxdoo virtual list scalable?

Question

I need to show list of data , at least 1 million rows (Big data , machine learning). I do not need to show at once , remotetablemodel of qooxdoo table works fine but instead of table i choose list as design choice.

Below is a test i've made.

//create the model data, 1mil items
var rawData = [];
for (var i = 0; i < 1000000; i++) {
 rawData[i] = "Item No " + i;
}
var model = new qx.data.Array(rawData);

//create the list
var list = new qx.ui.list.List(model);
this.getRoot().add(list);

I understand the point that it will take long to generate rawdata and assign it to list. But the problem is after assigning the list , the virtual list itself is almost non-responsive.

Scrolling is very slow , navigating by down arrow freezes a few secs too. Qooxdoo virtual infrastructure is suppose to render only visible items if i understand correctly? But in above test case it is so slow. I expect to work like remote table model .

Tested with qooxdoo latest 4.0.0 and 3.5.1 , on Chrome 35 stable.

Answer 1

I can reproduce you issue only with the source version and not with the build version. I found the reason why the performance is so slow. There is an runtime check in an internal method from the SingleValueBinding which has a huge performance impact on the rendering.

I opened a bug report for that: http://bugzilla.qooxdoo.org/show_bug.cgi?id=8439

But as I sad this issue only occurs with your developer version. So your customers are not effected.

You can disable the check if you want. Just remove the check block: https://github.com/qooxdoo/qooxdoo/blob/master/framework/source/class/qx/data/SingleValueBinding.js#L915

You can also load your model data in parts to improve the model creation. You can maybe load the next part when the user has scrolled to the end of the list. You can use the example you have already seen: Infinite scroll in qooxdoo with virtual list