Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: Array scrolling optimisation with UR  (Read 7268 times)
Benjamin G.
Posts: 98


« on: August 19, 2022, 02:25:22 pm »

Hello,

We have noticed a performance degradation in the display array and input array with Universal Rendering. When the user scrolls in an array or treeview with the PgDwn or PgUP keys the performance is very good but if he uses the mouse wheel the display becomes very slow because the screen refresh is done line by line. It is the same as if he clicks in the scroll bar of the table. We understand the reason for this behaviour but we wonder if there is a way to better control this so that we don't have this "slow" effect...
With a GDC 3.50 we don't see this phenomenon because obviously AUI tree it is better controlled but in UR this part of the table display processing is not totaly optimized.

Thanks

Reuben B.
Four Js
Posts: 1048


« Reply #1 on: August 22, 2022, 06:53:07 am »

Quote
With a GDC 3.50 we don't see this phenomenon because obviously AUI tree it is better controlled but in UR this part of the table display processing is not totaly optimized.

I don't know if you have raised a support case, but just on the above. 

a) there was no GDC 3.50.  So I don't know what your before and after for comparison is, and if you are using latest versions.  For instance there was an issue https://4js.com/support/issue/?id=GBC-2684 delivered in GBC 1.00.59 and then a little more in 4.00.03 which should give better responses.  You should give versions when raising with support.

b). The AUi Tree and User interface protocol (With reference to http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_DynamicUI_006.html or even better this diagram http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_feconn_protocol.html ) is the same wether you are GDC+Native+SSH, GDC+Native+GAS, GDC+UR+SSH, GDC+UR+GAS . So not sure what you mean by AUI Tree is better controlled.  The AUI Tree is the same.

I understand communication is a tiny bit slower using GAS vs SSH but is generally not noticeable. 

GDC+Native vs GDC+UR.  With GDC+Native, the GDC is an executable with compiled code rendering the AUI Tree.  With GDC+UR and GBC in a browser, you have interpreted Javascript rendering the AUI Tree.  The expectation is that this will be slower but again is not generally noticeable.  One place it can be noticed is with Folder Rendering, see here https://4js.com/ask-reuben/ig-108/ where I discussed this.  Essentially you won't notice when one screens size worth of rendering is calculated but you might if it is 10 folder pages that are being calculated as that is effectively 10 screens worth of rendering.

With Tables and the AUI Tree, the front-end sends to the backend the visible rows and the unhidden columns.  I covered this here https://4js.com/ask-reuben/ig-28/#:~:text=I%20would%20also%20like%20you%20to%20refresh%20your%20memory (perhaps I should have that as a standalone entry).  If there is 20 visible rows and 20 unhidden columns this is 400 values. 

1. If you are on a slow network or slow device you might ask yourself, how can I reduce what is sent to 10 visible rows and 10 unhidden columns, so only 100 values or a 1/4 of the data is sent.  That might involve using WANTFIXEDPAGESIZE to keep the number of rows manageable, or it might involve initially hiding columns to reduce number of columns sent.  Also look for the use of TEXTEDIT within an array as the whole text value is sent.

2. A valid question, particular as you mention scrolling, is to ask how often over the course of this scrolling is the communication taking place between front-end and back-end.  For instance there was an issue with completer where GBC requested an interaction after every keystroke whereas GDC bundled up keystrokes.  See https://4js.com/support/issue/?id=GBC-02671 .  So with GBC there was AUI interaction after every keystroke so ON CHANGE was fired as you typed A, AB, ABC, ABCD etc whereas with GDC, the AUI interaction was after user stopped typing for X milliseconds, so ON CHANGE was fired only after ABCD.  A way to test for something similar with array scrolling would be to capture two GUI logs, one with Native, one with UR.  See http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/c_fgl_feconn_replay.html for how to capture a GUI log.   What we would be looking for if you scrolled from row 1 to row 11, is how many times is the AUI tree updated?  Is it the same, more, or less?

3. If the current row is changing in the user action then BEFORE ROW would also be triggered and you'd also have to look at what that is doing.  There was an interesting case which I don't think has been delivered yet.  BEFORE ROW changed the GROUP title via DOM.  A GROUP Box is sized as minimum of content and title, hence changing the title caused the group size calculation to occur.  Everything the GROUP was a child of, was then recalculated.  In this case GROUP was in a PAGE, so FOLDER size was being recalculated to see if it should be wider now that the GROUP title had changed.  Not noticeable on Native but was on UR.  I mention this just to get you to examine, is your table in a folder?  Is there code being executed  by a BEFORE ROW? 

4. Another question relates to use of .4st.  If you use our default.4st is performance same or similar.?    Frozen columns maybe a factor.  As might how alternate row color shading is implemented (alternateRows http://4js.com/online_documentation/fjs-fgl-manual-html/#fgl-topics/r_fgl_presentation_styles_table_style_attributes.html is much faster than old pseudo selectors) .  Also is setCellAttributes in use.  In general look for anything you are doing that maybe different from standard.  That normally comes out if we see a log or an example.  (also in this area, standard vs customised GBC, is that a factor)

Reuben

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Benjamin G.
Posts: 98


« Reply #2 on: August 22, 2022, 08:32:59 pm »

Hello,

Thank you for the comprehensive comments. Sorry for my typo regarding the gdc but it is the "Genero Desktop Client Version 3.20.16 build-202010011949".

The project is compiled with "fglcomp 4.01.01 rev-f4262d03" the GBC is the standard provided with 4.01.01.

Now I may not have explained our "apparent slow" feeling in an input array. I have extracted an example from our code to make it clearer (Scrolling.zip).

If you run the code and use the pgUp, PgDown keys the display remains smooth and fast. If you use the mouse wheel you may notice some flickering in the refresh of the records at the bottom of the table. This is due to the fact that when using the mouse wheel the client fetches one record at a time and therefore the round trips between the server and the client are more numerous and give this slow feeling.

I can't explain this phenomenon any better but I think it would be interesting to manage the mouse wheel or the click in the scroll bar better so that we don't process one record at a time but by packets of n records (we would have to determine the n ...)

Sincerely


* scrolling.ZIP (123.77 KB - downloaded 862 times.)
Reuben B.
Four Js
Posts: 1048


« Reply #3 on: August 23, 2022, 02:39:43 am »

The GBC version is also important.  You said one supplied as standard with FGL 4.01.01, this is GBC 4.01.00. Since then there have been three maintenance releases of GBC and there is a GBC 4.01.03 available.

You should also make sure you don't have FGLGBCDIR pointing to an old GBC version inadvertently.

The GBC version is available at runtime by clicking on the (i) in the Chrome Bar (GDC needs to be run with -D  (debug mode))

Quote
This is due to the fact that when using the mouse wheel the client fetches one record at a time...
Is that fact?  This is what the log will tell you (or by looking in the GDC Debug Console Window)

You are looking for entries of the form ...

Code
  1. Tue Aug 23 12:16:06 2022:1 : event _om 8{}{{ConfigureEvent 0{{idRef "89"}{offset "12"}}}}
  2.  
  3.  
  4. Tue Aug 23 12:16:06 2022:1 : om 9 {{un 89 {{offset "12"}}} {un 212 {{value "13"}}} {un 288 {{value "14"}}} {un 289 {{value "15"}}} {un 290 {{value "16"}}} {un 291 {{value "17"}}} {un 292 {{value "18"}}} {un 293 {{value "19"}}} {un 294 {{value "20"}}} {un 295 {{value "21"}}} {un 296 {{value "22"}}} {un 297 {{value "23"}}} {un 298 {{value "24"}}} {un 299 {{value "25"}}} {un 300 {{value "26"}}} {un 301 {{value "27"}}} {un 302 {{value "28"}}} {un 303 {{value "29"}}} {un 304 {{value "30"}}} {un 305 {{value "31"}}} {un 306 {{value "32"}}} {un 307 {{value "33"}}} {un 308 {{value "34"}}} {un 214 {{value "AIRELLE 2.5KG SURG."}}} {un 309 {{value "AIRELLE 2.5KG SURG."}}} {un 310 {{value "AIRELLE 2.5KG SURG."}}} {un 311 {{value "AIRELLE 2.5KG SURG."}}} {un 312 {{value "AIRELLE 2.5KG SURG."}}} {un 313 {{value "BRUNOISE DE LEGUMES EN CUBES 2.5 KG SURG."}}} {un 314 {{value "BRUNOISE DE LEGUMES EN CUBES 2.5 KG SURG."}}} {un 315 {{value "BRUNOISE DE LEGUMES EN CUBES 2.5 KG SURG."}}} {un 316 {{value "BRUNOISE DE LEGUMES EN CUBES 2.5 KG SURG."}}} {un 317 {{value "BRUNOISE DE LEGUMES EN CUBES 2.5 KG SURG."}}} {un 318 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 319 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 320 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 321 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 322 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 323 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 324 {{value "PETIT PAIN COMPLET 17CM 90X85GR SURG."}}} {un 325 {{value "GLACE MINIATURE PRALINE 14X100 ML"}}} {un 326 {{value "GLACE MINIATURE VANILLE 14X100 ML"}}} {un 327 {{value "GLACE MINIATURE VANILLE 14X100 ML"}}} {un 328 {{value "GLACE MINIATURE VANILLE 14X100 ML"}}} {un 329 {{value "ROULEAU PRINTEMPS HUNAN POULET 10X150GR SURG."}}} {un 216 {{value "GOLDEN CROWN"}}} {un 330 {{value "GOLDEN CROWN"}}} {un 331 {{value "GOLDEN CROWN"}}} {un 332 {{value "GOLDEN CROWN"}}} {un 333 {{value "GOLDEN CROWN"}}} {un 334 {{value "PASFROST"}}} {un 335 {{value "PASFROST"}}} {un 336 {{value "PASFROST"}}} {un 337 {{value "PASFROST"}}} {un 338 {{value "PASFROST"}}} {un 339 {{value "MENISSEZ"}}} {un 340 {{value "MENISSEZ"}}} {un 341 {{value "MENISSEZ"}}} {un 342 {{value "MENISSEZ"}}} {un 343 {{value "MENISSEZ"}}} {un 344 {{value "MENISSEZ"}}} {un 345 {{value "MENISSEZ"}}} {un 346 {{value "ARTICLE SUPPRIME"}}} {un 347 {{value "ARTICLE SUPPRIME"}}} {un 348 {{value "ARTICLE SUPPRIME"}}} {un 349 {{value "ARTICLE SUPPRIME"}}} {un 350 {{value "DALOON"}}} {un 218 {{value "4"}}} {un 351 {{value "4"}}} {un 352 {{value "4"}}} {un 353 {{value "4"}}} {un 354 {{value "4"}}} {un 360 {{value "1"}}} {un 361 {{value "1"}}} {un 362 {{value "1"}}} {un 363 {{value "1"}}} {un 364 {{value "1"}}} {un 365 {{value "1"}}} {un 366 {{value "1"}}} {un 367 {{value "1"}}} {un 368 {{value "1"}}} {un 369 {{value "1"}}} {un 370 {{value "1"}}} {un 371 {{value "6"}}} {un 220 {{value "15.9022"}}} {un 372 {{value "15.7293"}}} {un 373 {{value "15.7293"}}} {un 374 {{value "1.2460"}}} {un 375 {{value "8.4782"}}} {un 376 {{value "0.6530"}}} {un 377 {{value "26.4516"}}} {un 378 {{value "26.4516"}}} {un 379 {{value "2.8251"}}} {un 380 {{value "2.8251"}}} {un 381 {{value "8.3013"}}} {un 382 {{value "8.3013"}}} {un 383 {{value "2.9360"}}} {un 384 {{value "2.9360"}}} {un 385 {{value "2.9360"}}} {un 386 {{value "2.9360"}}} {un 387 {{value "2.9360"}}} {un 388 {{value "12.7800"}}} {un 389 {{value "13.7978"}}} {un 390 {{value "12.3978"}}} {un 391 {{value "3.3681"}}} {un 392 {{value "7.6730"}}} {un 222 {{value "26.1000"}}} {un 393 {{value "23.0000"}}} {un 394 {{value "23.0000"}}} {un 395 {{value "1.8000"}}} {un 396 {{value "15.6500"}}} {un 397 {{value "1.4200"}}} {un 398 {{value "45.5800"}}} {un 399 {{value "45.5800"}}} {un 400 {{value "4.2600"}}} {un 401 {{value "4.2600"}}} {un 402 {{value "15.5400"}}} {un 403 {{value "15.5400"}}} {un 404 {{value "3.9600"}}} {un 405 {{value "4.0100"}}} {un 406 {{value "4.0100"}}} {un 407 {{value "4.0100"}}} {un 408 {{value "4.0100"}}} {un 409 {{value "17.2500"}}} {un 410 {{value "19.6000"}}} {un 411 {{value "17.7300"}}} {un 412 {{value "6.1000"}}} {un 413 {{value "12.4000"}}} {un 226 {{value "16.5936"}}} {un 435 {{value "16.4015"}}} {un 436 {{value "16.4015"}}} {un 437 {{value "1.3967"}}} {un 438 {{value "8.9081"}}} {un 439 {{value "0.7836"}}} {un 440 {{value "29.6300"}}} {un 441 {{value "29.6300"}}} {un 442 {{value "2.8251"}}} {un 443 {{value "2.8251"}}} {un 444 {{value "9.9595"}}} {un 445 {{value "9.9595"}}} {un 446 {{value "2.9360"}}} {un 447 {{value "2.9360"}}} {un 448 {{value "2.9360"}}} {un 449 {{value "2.9360"}}} {un 450 {{value "2.9360"}}} {un 451 {{value "0.0000"}}} {un 452 {{value "0.0000"}}} {un 453 {{value "12.3978"}}} {un 454 {{value "3.3681"}}} {un 455 {{value "10.4499"}}} {un 519 {{value ""}}} {un 520 {{value ""}}} {un 521 {{value ""}}} {un 522 {{value ""}}} {un 539 {{value "*"}}} {un 236 {{value "Kilo"}}} {un 540 {{value "Kilo"}}} {un 541 {{value "Kilo"}}} {un 542 {{value "Kilo"}}} {un 543 {{value "Kilo"}}} {un 549 {{value "Carton"}}} {un 550 {{value "Carton"}}} {un 551 {{value "Carton"}}} {un 552 {{value "Carton"}}} {un 553 {{value "Carton"}}} {un 554 {{value "Carton"}}} {un 555 {{value "Carton"}}} {un 556 {{value "Carton"}}} {un 557 {{value "Carton"}}} {un 558 {{value "Carton"}}} {un 559 {{value "Carton"}}} {un 560 {{value "Sachet"}}} {un 238 {{value "33.1200"}}} {un 561 {{value "32.7600"}}} {un 562 {{value "32.7600"}}} {un 563 {{value "2.5000"}}} {un 564 {{value "16.0000"}}} {un 565 {{value "1.2800"}}} {un 566 {{value "44.4000"}}} {un 567 {{value "44.4000"}}} {un 568 {{value "4.4000"}}} {un 569 {{value "4.4000"}}} {un 570 {{value "19.0800"}}} {un 571 {{value "19.0800"}}} {un 572 {{value "4.5000"}}} {un 573 {{value "4.5000"}}} {un 574 {{value "4.5000"}}} {un 575 {{value "4.5000"}}} {un 576 {{value "4.5000"}}} {un 577 {{value "19.7400"}}} {un 578 {{value "21.3500"}}} {un 579 {{value "19.0800"}}} {un 580 {{value "7.0000"}}} {un 581 {{value "16.0000"}}} {un 240 {{value "33.1200"}}} {un 582 {{value "32.7600"}}} {un 583 {{value "32.7600"}}} {un 584 {{value "2.7500"}}} {un 585 {{value "16.8000"}}} {un 586 {{value "1.5000"}}} {un 587 {{value "49.8000"}}} {un 588 {{value "49.8000"}}} {un 589 {{value "4.4000"}}} {un 590 {{value "4.4000"}}} {un 591 {{value "22.8600"}}} {un 592 {{value "22.8600"}}} {un 593 {{value "4.5000"}}} {un 594 {{value "4.5000"}}} {un 595 {{value "4.5000"}}} {un 596 {{value "4.5000"}}} {un 597 {{value "4.5000"}}} {un 598 {{value "0.0000"}}} {un 599 {{value "0.0000"}}} {un 600 {{value "19.0800"}}} {un 601 {{value "7.0000"}}} {un 602 {{value "19.1000"}}} {un 244 {{value "16"}}} {un 624 {{value "0"}}} {un 625 {{value "0"}}} {un 626 {{value "740"}}} {un 627 {{value "36"}}} {un 628 {{value "1500"}}} {un 629 {{value "258"}}} {un 630 {{value "258"}}} {un 631 {{value "5"}}} {un 633 {{value "98"}}} {un 634 {{value "98"}}} {un 635 {{value "0"}}} {un 638 {{value "3"}}} {un 639 {{value "3"}}} {un 640 {{value "0"}}} {un 641 {{value "0"}}} {un 642 {{value "0"}}} {un 643 {{value "181"}}} {un 644 {{value "52"}}} {un 246 {{value "208"}}} {un 645 {{value "0"}}} {un 646 {{value "0"}}} {un 647 {{value "733"}}} {un 648 {{value "313"}}} {un 649 {{value "965"}}} {un 650 {{value "5059"}}} {un 651 {{value "5059"}}} {un 654 {{value "854"}}} {un 655 {{value "854"}}} {un 656 {{value "0"}}} {un 659 {{value "0"}}} {un 660 {{value "0"}}} {un 661 {{value "0"}}} {un 662 {{value "0"}}} {un 663 {{value "0"}}} {un 664 {{value "664"}}} {un 665 {{value "644"}}}}

... the key element is the offset and the number next to it.  If you see offset "1", offset "2", offset "3" then yes it would be correct to say updating row by row  However if you see something like ...offset "4", offset "12", offset "26" (like I do) then it is being clever and not going row by row.  What do you see?

Reuben


 

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Benjamin G.
Posts: 98


« Reply #4 on: September 06, 2022, 12:23:22 pm »

Hello,

I was on holiday and so I'm picking up this problem again. The offset seems to be ok but there are still some exchanges between the browser and the VM. I'll try to provide some traces ...
We also noticed a particular problem (not in GDC) it's in an array if the CAPS LOCK is on the up/down keys or others do not react ...
Is this a bug or a problem already detected by you because I did not find anything in the issues tracker?
Attaching the version of our GBC

Thanks in advance



* ScreenShot186.jpg (67.37 KB, 1919x939 - viewed 1718 times.)
Reuben B.
Four Js
Posts: 1048


« Reply #5 on: September 07, 2022, 12:49:49 am »

Quote
We also noticed a particular problem (not in GDC) it's in an array if the CAPS LOCK is on the up/down keys or others do not react ...

there was https://4js.com/support/issue/?id=GBC-3544, I would suggest using the versions or later listed there and see if issue persists.

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines