Extremely slow/choppy rendering with columns outside viewport #2107

nupul-promenade · 2021-09-22T23:29:12Z

Short description
Sluggish side scroll performance when number of columns exceed viewport width

What is current behavior
A quick side scroll can cause the column rendering to simply "fail" i.e., be rendered as a wide band without content.

What is desired behavior
Sidescroll performance should equal that of vertical scroll without lag or "mis-renderings", when there are more columns than the viewport width.

Steps to reproduce or sample
recordHeight: 50
Num Columns: 15
Per Column Width: 400px
Total records: 2000

Additional performance degradation: Although a previous blog post mentioned that 250K records take less than 1s to be sorted, this isn't true with the above situation. I have a measly 1200 records and the performance of sort takes more than a few seconds for anything over 1000 records. Beyond 2000 the system is unresponsive.

Browser
Latest version of Chrome as of Sept 2021: Version 94.0.4606.54 (Official Build) (x86_64)

vitmalina · 2021-09-23T00:52:03Z

Do you have a lot of column renderers? Can you create a sample jsFiddle with the issue?

nupul-promenade · 2021-09-23T18:16:47Z

I should be able to create one...and post one shortly. However, the below url doesn't work with fiddles - they keep throwing an error. Is there a URL that works?

http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js

Here is an example from the site that doesn't render: http://jsfiddle.net/api/post/jquery/2.1/

nupul-promenade · 2021-09-23T20:41:40Z

@vitmalina - here's a sample fiddle: https://jsfiddle.net/oLa2u16v/2/

Unfortunately it doesn't render at all. However, it is a copy of the entire code pasted below:

<!DOCTYPE html>
<html>
<head>
    <title>Report</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .w2ui-grid .w2ui-grid-body table td.w2ui-grid-data > div {
            word-break: normal;
            overflow-y: scroll;
            max-height:50px /*Corresponds to the w2ui.myGrid.recordHeight property. They both must be same*/
        }

        .w2ui-grid .w2ui-grid-body table td {
            border-right: 1px solid #111111;
            border-bottom: 1px solid #111111;
        }
    </style>
</head>

<body>
<!--<div id="myGrid" style="width:3000px; height: 100vh"></div>--> <!--This with disableCVS flag smoothens side scroll-->
<div id="myGrid" style="width:100%; height: 100vh"></div>
</body>

<script>
$('#myGrid').w2grid({
    name   : 'myGrid',
    //disableCVS: true, //uncomment and increase myGrid width to prevent choppy side scroll
    recordHeight: 50,
    show: {
        lineNumbers: true,
        toolbar: true,
        footer: true,
    },
    toolbar: {
        items: [
            { type: 'break' },
            { type: 'button', id: 'refreshData', text: 'Refresh Data', icon: 'fa fa-refresh' },
            { type: 'break' },
            { type: 'button', id: 'showAllOk', text: 'Show All-OK Records', icon:'fa fa-plus', hidden:false},
            { type: 'button', id: 'hideAllOk', text: 'Hide All-OK Records', icon:'fa fa-minus', hidden:true},
            { type: 'break' },
            { type: 'button', id: 'reportErrors', text: 'View Report Errors', icon:'fa fa-exclamation-circle red-alert', disabled:true},
        ],
    },

    fixedBody: false,
    multiSearch: true,
    recid:'someRandomIdCol',
    method:'GET',
    columns: [
        { field:'date', text: 'Date', size:'80px', sortable:true, style:'text-align:center'},
        { field:'someRandomIdCol', text:'Some Random Id', size:'200px', sortable:true },
        { field:'randomName', text:'Random Name', size:'200px', sortable:true },
        { field:'randomString', text:'Random String', size:'200px', sortable:true },
        { field:'additionalRandomArray', text:'Additional Lists of Strings', size:'200px', sortable:true },
        { field:'randomPlaceBusinessName', text:'ABC Name', size:'200px', sortable:true },
        { field:'googlePlacesAddress', text:'ABC Address', size:'200px', sortable:true },
        { field:'someWebsiteLink', text:'ABC Link', size:'200px', sortable:true },
        { field:'someBoolean', text:'someBoolean', size:'90px', sortable:true, style:'text-align:center' },
        { field:'somePercentageScoreValue', text:'somePercentageScoreValue', size:'150px', sortable:true, render:'percent', style:'text-align:center'},
        { field:'somePercentageScoreValue2', text:'somePercentageScoreValue2', size:'150px', sortable:true, render:'percent', style:'text-align:center' },
        { field:'randomNotes', text:'Some random note(s)', size:'300px', sortable:false,
            render:function(record) {
                return `<div style="word-break:break-all; white-space:normal;">${record.randomNotes.join('</br>')}</div>`
            }
        },
        { field:'changeLog', text:'Change Log', size:'400px', sortable:false,
            render:function(record) {
                return `<div style="word-break:break-all; white-space:normal;">${record.changeLog.join('</br>')}</div>`
            }
        },
        { field: 'editableNotesField', text: 'randomNotes', size: '400px', sortable: false, editable: {type:'text'}},

    ],
    searches: [
        { field:'someRandomIdCol', label:'Some Random Id', type: 'text' },
        { field:'randomName', label:'Random Name', type: 'text' },
        { field:'randomString', label:'Random String', type: 'text' },
        { field:'additionalRandomArray', label:'Additional Lists of Strings', type: 'text' },
        { field:'randomPlaceBusinessName', label:'ABC Name', type: 'text' },
        { field:'randomPlaceAddress', label:'ABC Address', type: 'text' },
        { field:'someWebsiteLink', label:'ABC Link', type: 'text' },
        { field:'someBoolean', label:'someBoolean', type: 'text' },
        { field:'somePercentageScoreValue', label:'somePercentageScoreValue', type: 'percent' },
        { field:'somePercentageScoreValue2', label:'somePercentageScoreValue2', type: 'percent' },
        { field:'randomNotes', label:'Action Item(s)', type: 'text' },
        { field:'changeLog', label:'Change Log', type: 'text' },
        { field:'editableNotesField', label:'randomNotes', type: 'text' },
    ],
});

$(function () {
    console.log('loading data...');
    const data = [];
    for(let i=1; i<=2000; i++) {
        data.push({
            date:'21-09-2012',
            someRandomIdCol:'someRandomId_'+i,
            randomName:'someRandomName_'+i,
            randomString:'someRandomValue_'+i,
            additionalRandomArray:['arrayVal1'+i, 'arrayVal2_'+i],
            randomPlaceBusinessName: 'Some long string that can cross the cell boundary for this row_'+i,
            googlePlacesAddress:'Another long string that can cross the cell boundary for this row_'+i,
            someWebsiteLink: 'may cross cell boundary_'+i,
            someBoolean: 'YES',
            somePercentageScoreValue: 100+i/100,
            somePercentageScoreValue2:100+i/100,
            randomNotes: ['This can be a really long line of text that needs to be wrapped and perhaps needs custom CSS override to allow vertical scrolling_'+i],
            changeLog:['Also: even this can be a really long line of text that needs to be wrapped and perhaps needs custom CSS override to allow vertical scrolling_'+i],
            editableNotesField: i%2 === 0? 'This may or may not exist for a particular row of data_'+i : ""
        });
    }

    w2ui.myGrid.records = data;
    w2ui.myGrid.records.total = data.length;
    w2ui.myGrid.refresh();
});

</script>
</html>

nupul-promenade · 2021-09-23T20:42:54Z

Even though the side scroll is gets better by adding disableCVS:true and increasing the width, the performance of sort is still lacking. You can try sorting by the percentage(s) columns to see the sort performance...

mpf82 · 2021-09-23T21:44:03Z

http://jsfiddle.net/xcg8yn6j/

nupul-promenade · 2021-09-24T18:37:12Z

It doesn't render on the fiddle. But the only difference I can see is the removal of the CSS. Is that it? The reason for the custom CSS is that some rows are color-coded and their overlaps makes it appear as one large row. Hence the addition of the border. There is a cell with a large text and hence the need to override the default CSS. Are these two really the cause of the slow down?

vitmalina · 2021-09-24T21:41:20Z

As part of 2.0 effort, there will be a major refactor from tables to flex-grid. Let's revisit this after refactor. It will probably be within a month, as now I have lots of free time to do it. )) I hope to resolve all this issues.

nupul-promenade · 2021-09-28T21:16:01Z

This doesn't fix the side scroll issue though - try scrolling "really" fast with a left "swipe" and you'll notice the lag and slow rendering...

vitmalina · 2021-09-29T01:41:44Z

Got it. It is true that I did not work on this a particular issue, but it was related to speed improvements for virtual scrolling. I thought it could have been effected here too.

mpf82 added Analyze Issue needs further investigation Reproducer: Missing This PR or issue lacks code, which reproduce the problem described or clearly understandable MCVE labels Sep 23, 2021

vitmalina added a commit that referenced this issue Sep 26, 2021

Performance improvement for virtual scroll (should help with #2107 )

9f252cb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extremely slow/choppy rendering with columns outside viewport #2107

Extremely slow/choppy rendering with columns outside viewport #2107

nupul-promenade commented Sep 22, 2021 •

edited

Loading

vitmalina commented Sep 23, 2021

nupul-promenade commented Sep 23, 2021 •

edited

Loading

nupul-promenade commented Sep 23, 2021

nupul-promenade commented Sep 23, 2021 •

edited

Loading

mpf82 commented Sep 23, 2021

nupul-promenade commented Sep 24, 2021

vitmalina commented Sep 24, 2021

nupul-promenade commented Sep 28, 2021

vitmalina commented Sep 29, 2021

Extremely slow/choppy rendering with columns outside viewport #2107

Extremely slow/choppy rendering with columns outside viewport #2107

Comments

nupul-promenade commented Sep 22, 2021 • edited Loading

vitmalina commented Sep 23, 2021

nupul-promenade commented Sep 23, 2021 • edited Loading

nupul-promenade commented Sep 23, 2021

nupul-promenade commented Sep 23, 2021 • edited Loading

mpf82 commented Sep 23, 2021

nupul-promenade commented Sep 24, 2021

vitmalina commented Sep 24, 2021

nupul-promenade commented Sep 28, 2021

vitmalina commented Sep 29, 2021

nupul-promenade commented Sep 22, 2021 •

edited

Loading

nupul-promenade commented Sep 23, 2021 •

edited

Loading

nupul-promenade commented Sep 23, 2021 •

edited

Loading