Qooxdoo table tooltips performance

I am using qooxdoo 5.0.1 and I have a performance problem with the table header tooltips.

For now the Table has only 49 Columns an I got a tooltip for 44 Columns.

Only the creating of the table an formatting the columns inside takes something about 40 seconds.

Without table header tooltips it´s about 2 seconds.

Here is a part of my creating Method.

createTable  : function (pAryTableHeaderData) {
			this.debug("createTable");

			this._tableModel = new qx.ui.table.model.Simple();
			this._tableModel.setColumns(this.__tableHeaders, this.__tableIDs);

			this._table = new qx.ui.table.Table(this._tableModel);

			// Setzen der Spalteneigenschaften
			for (var i = 0; i < pAryTableHeaderData["length"]; i++) {

				var tableColumnModel = this._table.getTableColumnModel();

				// Setzen Tooltips für die Spaltenüberschriften
				if (pAryTableHeaderData[i][6]) {
					var cellHeader = new qx.ui.table.headerrenderer.Default();
					cellHeader.setToolTip(pAryTableHeaderData[i][6]);
					tableColumnModel.setHeaderCellRenderer(
						i,
						cellHeader
					);
				}
			}

			return this._table;
		},

I also separate this part of code. Alone it´s about 35 seconds.

Can anyone tell me the problem? Or am I doing something wrong?

Answers:

Answer

And another answer, offering an optimization which leads to tremendous performance gain.

The pane header (qx.ui.table.pane.Header) is far away from being optimized regarding header updates. Every time you add a new header cell renderer, the complete table gets recalculated and redrawn, where every time all columns get removed and added again.

I've suffered from the same problem and created a solution which blocks header updates until the addition of columns has ended.

The solution needs you to derive your own subclasses from qx.ui.table.pane.Header and qx.ui.table.Table. The crucial method is _updateContent in qx.ui.table.pane.Header, which causes in the end the table to be reconstructed on every column added.

To circumvent this behavior, I've added a property blockHeaderUpdate which, when set to true, inhibits the permanent reconstruction and updates the table when set to false again.

Please see the playground example at

https://gist.github.com/level420/1ca8f4d5b40c9c11c4088965eae57375

and paste it's content to

http://www.qooxdoo.org/devel/playground/

The table shows up nearly instantly.

Answer

Here's a working example that you can run in the playground (http://www.qooxdoo.org/current/playground) which adds 50 columns, each with a tooltip - it completes in under 1.5 seconds on Chrome 56 on Mac and just over 1.5 seconds on Chrome 54 on Windows. It's based on your code, but as your sample was incomplete I've had to add sample data for headers etc.

this.debug("createTable");

var tableHeaders = [];
var tableIDs = [];
for (var i = 0; i < 50; i++) {
  tableHeaders.push("Header #" + i);
  tableIDs.push("id" + i);
}

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(tableHeaders, tableIDs);

var table = new qx.ui.table.Table(tableModel);
var tableColumnModel = table.getTableColumnModel();


// Setzen der Spalteneigenschaften
for (var i = 0; i < 50; i++) {
    var cellHeader = new qx.ui.table.headerrenderer.Default();
    cellHeader.setToolTip("Tooltip #" + i);
    tableColumnModel.setHeaderCellRenderer(
        i,
        cellHeader
    );
}

var doc = this.getRoot();
doc.add(table,
{
  left : 10,
  top  : 10
});

The difference in speed may be caused by the different in the data you're using - please try creating a reproducible example of your problem using the playground and say what browser you are using - can you post it here or chat about it on Gitter (https://gitter.im/qooxdoo/qooxdoo)

Answer

Thanks for you answer @johnspackman. I have created now a runable playground example with my data:

var tableHeaders = [
  "R-Nr",  "Rech-Dat",  "Sammelr",  "Kunden-Nr",  "R-Empf",  "Art",  "Auf-Nr",  "Auf-Dat",  "Anz-Pos.",  "Wert Brutto",
  "Wert netto",  "Zu/Ab",  "R-Zuschl.",  "Nebenkosten",  "Skonto",  "Storniert",  "Ihre Zeichen",  "Unsere Zeichen",
  "Zahlart",  "Sofort",  "Stat-Upd",  "Bonus",  "MwSt-frei",  "MwSt-Betrag",  "Brutto-Pr",  "Rabatt-Dr",  "Rech-Addr-Nr",
  "Rechnungsadresse",  "Zahlungsfreigabe",  "Ertrag",  "IBAN",  "BIC",  "Lief-Bed",  "Lief-Text",  "Lief-Termin",
  "Lief-Addr-Nr",  "Lieferadresse",  "Zahl-Bed",  "Zahl-Text",  "Filiale",  "Filiale Name",  "Rech-KZ",  "Rech-Bez",
  "Sachb-Nr",  "Sachb-Kurzz",  "Sachb-Name",  "Vertr-Weg",  "Vertr-Bez",  "Form-Nr",  "Form-Bez"
  ];

var tableIDs = [
  "j_rnr",  "rk_dat",  "rk_sammel",  "j_kunr",  "rk_rekunr",  "rk_aufart",  "j_aufnr",  "rk_akdat",  "rk_anzpos",
  "rk_wertBrutto",  "rk_wertNetto",  "rk_srabatt",  "rk_klrzu",  "rk_fakost",  "rk_skbetrag",  "rk_storno",
  "rk_izei",  "rk_uzei",  "rk_zart",  "rk_sofort",  "rk_update",  "rk_bonus",  "rk_mwstfrei",  "z_stbetrag",
  "rk_brunet",  "rk_rabdr",  "rk_jrlfdnr",  "rech_name",  "j_gsnr",  "z_angwert",  "j_kto",  "j_blz",
  "j_lbnr",  "lb_text",  "rk_ltermin",  "rk_jllfdnr",  "lief_name",  "j_zab",  "zb_text",  "j_filial",  "fa1_name",
  "j_sammelkz",  "skz_bez",  "j_minr",  "mi_kurz",  "ad_name1",  "j_vwnr",  "vw_bez",  "j_fonr",  "fo_bez"
  ];

var toolTips = [
  "Rechnungsnummer",  "Rechnungsdatum",  "Sammelrechnung",  "Kundennummer",  "Rechnungsempfänger",  "Auftragsart",
  "Auftragsnummer",  "Auftragsdatum",  "Anzahl Positionen",  "Rechnungswert brutto",  "Rechnungswert netto",
  "Zu- und Abschlag in %",  "Rechnungs- bzw. Kleinrechnungszuschlag",  "",  "Skontobetrag",  "Rechnung storniert",
  "",  "",  "",  "Sofortrechnung",  "Statistikupdate",  "Bonusfähig",  "Mehrwertsteuerfrei",  "Mehrwertsteuerbetrag",
  "Bruttopreise",  "Rabattdruck",  "Rechnungsadresse",  "Rechnungsadresse",  "Zahlungsfreigabe",  "",  "",  "",
  "Lieferbedingung Schlüssel",  "Lieferbedingung Text",  "Liefertermin",  "Lieferadresse",  "Lieferadresse",
  "Zahlungsbedingung Schlüssel",  "Zahlungsbedingung Text",  "Filialnummer",  "Filialname",  "Rechnungskennzeichen",
  "Rechnungskennzeichen Bezeichnung",  "Sachbearbeiter Mitarbeiternummer",  "Sachbearbeiter Kurzzeichen",
  "Sachbearbeiter Name 1",  "Vertriebsweg",  "Vertriebsweg Bezeichnung",  "Formularnummer",  "Formularbezeichnung"
  ];

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns(tableHeaders, tableIDs);

var table = new qx.ui.table.Table(tableModel);
var tableColumnModel = table.getTableColumnModel();

// Setzen der Spalteneigenschaften
for (var i = 0; i < toolTips["length"]; i++) {
    var cellHeader = new qx.ui.table.headerrenderer.Default();
    cellHeader.setToolTip(toolTips[i]);
    tableColumnModel.setHeaderCellRenderer(
        i,
        cellHeader
    );
}

var doc = this.getRoot();
doc.add(table,
{
  left : 10,
  top  : 10
});

For developing I´m using Google Chrome 53 on a Terminal-Server. But I note the time of different browsers on the Terminal-Server and my developing virtualized PC.

Win Terminal-Server 2008:
Opera portable 41.0 = 10 Seconds
Chrome 53 = 45 Seconds
Firefox 43 = 7 Seconds

Win 10 PC:
Opera 41.0 = 10 Seconds
Chrome 54 = 12 Seconds
Firefox 50 = 8 Seconds
Edge = SyntaxError: Unterminated string constant

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.