highly populated grids are slow

[frederic_viollet]

Hi everyone,

I'm encountering some performance problems with the following code.
I seems to be due to:
*the amount of data in the grid object
*and the setVisible calls

To reproduce the problem, please do the following steps:
1-make sure 'folder2' is the active folder (it should be the active folder on reload)
2-click on node1
3-click on node2
4-click on node3 ** at this point the grid is populated with 700 entries **
5-click on node2 --> problem : it takes up to 10 seconds on my computer to switch back to node2

If you try the same operations on the 'folder1' tab, switching back from node3 to node2 takes less than a second (the amount of data is the same)

I profiled these operations through the FireBug profiler. It seems that the functions getBorderTopWidth, getBorderLeftWidth, updateSize and getHeightInDoct take more than 90% of elapsed time.

Thanks for your help.

Fred

<rialto:layout name="mainLayout">
        splitFC = new rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.2,orientation:'h',name:'splitFC',parent:document.body,style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:false});
        treeT = new rialto.widget.Tree({name:'treeReload',top:'5',left:'0',width:'',height:'99%',parent:splitFC.div1,draggableNode:true,targetNode:true});
        var node=new rialto.widget.TreeNode({name:'node1',text:'node1',reload:false,url:"",draggable:true});
        treeT.add(node);
        node=new rialto.widget.TreeNode({name:'node2',text:'node2',reload:false,url:"",draggable:true});
        treeT.add(node);
        node=new rialto.widget.TreeNode({name:'node3',text:'node3',reload:false,url:"",draggable:true});
        treeT.add(node);

        tabFolder = new rialto.widget.TabFolder({name:'tabFolder',top:0,left:0,parent:splitFC.div2,widthItem:120,autoResizeTab:false,isClosable:false,draggableItem:false});
                folder1 = tabFolder.addTabItem('folder1',true);
                        gGrid = new rialto.widget.Grid({top:10,left:5,height:380, parent:folder1,
                                        arrHeader:[{title:"",type:"string",width:200},
                                                {title:"",type:"string",width:200},
                                                {title:"",type:"string",width:200}],
                                        name:'gGrid',
                                        boolPrint:false,switchable:false,autoResizableW:false});
                       
                folder2 = tabFolder.addTabItem('folder2',true);
                        myFrame = new rialto.widget.Frame({name:'myFrame',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
                                gGrid2 = new rialto.widget.Grid({top:50, left:0, height:'500', parent:myFrame,
                                                        arrHeader:[{title:"",type:"string",width:200},
                                                                {title:"",type:"string",width:200},
                                                                {title:"",type:"string",width:200}],
                                                        name:'gGrid2',
                                                        boolPrint:false, switchable:false, autoResizableW:false});
                        myFrame2 = new rialto.widget.Frame({name:'myFrame2',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});

        folder1.InitAttr=function(theNode) {
                gGrid.deleteData();
                switch(theNode.text) {
                        case"node1":
                                for(var i=0;i<10;i++) {
                                        gGrid.addOneLine(["toto1","titi1","tata1"]);
                                }
                                break;
                        case"node2":
                                for(var i=0;i<3;i++) {
                                        gGrid.addOneLine(["toto2","titi2","tata2"]);
                                }
                                break;
                        case"node3":
                                for(var i=0;i<700;i++) {
                                        gGrid.addOneLine(["toto3","titi3","tata3"]);
                                }
                                break;
                }
        }
       
        folder2.InitAttr=function(theNode) {
                myFrame2.setVisible(false);
                myFrame.setVisible(true);
                gGrid2.deleteData();
                switch(theNode.text) {
                        case"node1":
                                for(var i=0;i<10;i++) {
                                        gGrid2.addOneLine(["toto1","titi1","tata1"]);
                                }
                                break;
                        case"node2":
                                for(var i=0;i<3;i++) {
                                        gGrid2.addOneLine(["toto2","titi2","tata2"]);
                                }
                                break;
                        case"node3":
                                for(var i=0;i<700;i++) {
                                        gGrid2.addOneLine(["toto3","titi3","tata3"]);
                                }
                                break;
                }
        }
       
        treeT.onclick=function(thisNode) {
                tabFolder.currentActiveTab.InitAttr(thisNode);
        }
</rialto:layout>

[frederic_viollet]

Hi folks,

nothing new on this one?

Fred

--- In rialto-dev@..., "frederic_viollet" <frederic.viollet@...> wrote:

>
> Hi everyone,
>
> I'm encountering some performance problems with the following code.
> I seems to be due to:
> *the amount of data in the grid object
> *and the setVisible calls
>
> To reproduce the problem, please do the following steps:
> 1-make sure 'folder2' is the active folder (it should be the active folder on reload)
> 2-click on node1
> 3-click on node2
> 4-click on node3 ** at this point the grid is populated with 700 entries **
> 5-click on node2 --> problem : it takes up to 10 seconds on my computer to switch back to node2
>
> If you try the same operations on the 'folder1' tab, switching back from node3 to node2 takes less than a second (the amount of data is the same)
>
> I profiled these operations through the FireBug profiler. It seems that the functions getBorderTopWidth, getBorderLeftWidth, updateSize and getHeightInDoct take more than 90% of elapsed time.
>
> Thanks for your help.
>
> Fred
>
> <rialto:layout name="mainLayout">
> splitFC = new rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.2,orientation:'h',name:'splitFC',parent:document.body,style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:false});
> treeT = new rialto.widget.Tree({name:'treeReload',top:'5',left:'0',width:'',height:'99%',parent:splitFC.div1,draggableNode:true,targetNode:true});
> var node=new rialto.widget.TreeNode({name:'node1',text:'node1',reload:false,url:"",draggable:true});
> treeT.add(node);
> node=new rialto.widget.TreeNode({name:'node2',text:'node2',reload:false,url:"",draggable:true});
> treeT.add(node);
> node=new rialto.widget.TreeNode({name:'node3',text:'node3',reload:false,url:"",draggable:true});
> treeT.add(node);
>
> tabFolder = new rialto.widget.TabFolder({name:'tabFolder',top:0,left:0,parent:splitFC.div2,widthItem:120,autoResizeTab:false,isClosable:false,draggableItem:false});
> folder1 = tabFolder.addTabItem('folder1',true);
> gGrid = new rialto.widget.Grid({top:10,left:5,height:380, parent:folder1,
> arrHeader:[{title:"",type:"string",width:200},
> {title:"",type:"string",width:200},
> {title:"",type:"string",width:200}],
> name:'gGrid',
> boolPrint:false,switchable:false,autoResizableW:false});
>
> folder2 = tabFolder.addTabItem('folder2',true);
> myFrame = new rialto.widget.Frame({name:'myFrame',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
> gGrid2 = new rialto.widget.Grid({top:50, left:0, height:'500', parent:myFrame,
> arrHeader:[{title:"",type:"string",width:200},
> {title:"",type:"string",width:200},
> {title:"",type:"string",width:200}],
> name:'gGrid2',
> boolPrint:false, switchable:false, autoResizableW:false});
> myFrame2 = new rialto.widget.Frame({name:'myFrame2',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
>
> folder1.InitAttr=function(theNode) {
> gGrid.deleteData();
> switch(theNode.text) {
> case"node1":
> for(var i=0;i<10;i++) {
> gGrid.addOneLine(["toto1","titi1","tata1"]);
> }
> break;
> case"node2":
> for(var i=0;i<3;i++) {
> gGrid.addOneLine(["toto2","titi2","tata2"]);
> }
> break;
> case"node3":
> for(var i=0;i<700;i++) {
> gGrid.addOneLine(["toto3","titi3","tata3"]);
> }
> break;
> }
> }
>
> folder2.InitAttr=function(theNode) {
> myFrame2.setVisible(false);
> myFrame.setVisible(true);
> gGrid2.deleteData();
> switch(theNode.text) {
> case"node1":
> for(var i=0;i<10;i++) {
> gGrid2.addOneLine(["toto1","titi1","tata1"]);
> }
> break;
> case"node2":
> for(var i=0;i<3;i++) {
> gGrid2.addOneLine(["toto2","titi2","tata2"]);
> }
> break;
> case"node3":
> for(var i=0;i<700;i++) {
> gGrid2.addOneLine(["toto3","titi3","tata3"]);
> }
> break;
> }
> }
>
> treeT.onclick=function(thisNode) {
> tabFolder.currentActiveTab.InitAttr(thisNode);
> }
> </rialto:layout>
>

[Cyril Balit]

Helo Fred,

I have take a look on it and honestly i have no idea for now. Still searching

Cyril

--- In rialto-dev@..., "frederic_viollet" <frederic.viollet@...> wrote:

>
> Hi folks,
>
> nothing new on this one?
>
> Fred
>
> --- In rialto-dev@..., "frederic_viollet" <frederic.viollet@> wrote:
> >
> > Hi everyone,
> >
> > I'm encountering some performance problems with the following code.
> > I seems to be due to:
> > *the amount of data in the grid object
> > *and the setVisible calls
> >
> > To reproduce the problem, please do the following steps:
> > 1-make sure 'folder2' is the active folder (it should be the active folder on reload)
> > 2-click on node1
> > 3-click on node2
> > 4-click on node3 ** at this point the grid is populated with 700 entries **
> > 5-click on node2 --> problem : it takes up to 10 seconds on my computer to switch back to node2
> >
> > If you try the same operations on the 'folder1' tab, switching back from node3 to node2 takes less than a second (the amount of data is the same)
> >
> > I profiled these operations through the FireBug profiler. It seems that the functions getBorderTopWidth, getBorderLeftWidth, updateSize and getHeightInDoct take more than 90% of elapsed time.
> >
> > Thanks for your help.
> >
> > Fred
> >
> > <rialto:layout name="mainLayout">
> > splitFC = new rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.2,orientation:'h',name:'splitFC',parent:document.body,style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:false});
> > treeT = new rialto.widget.Tree({name:'treeReload',top:'5',left:'0',width:'',height:'99%',parent:splitFC.div1,draggableNode:true,targetNode:true});
> > var node=new rialto.widget.TreeNode({name:'node1',text:'node1',reload:false,url:"",draggable:true});
> > treeT.add(node);
> > node=new rialto.widget.TreeNode({name:'node2',text:'node2',reload:false,url:"",draggable:true});
> > treeT.add(node);
> > node=new rialto.widget.TreeNode({name:'node3',text:'node3',reload:false,url:"",draggable:true});
> > treeT.add(node);
> >
> > tabFolder = new rialto.widget.TabFolder({name:'tabFolder',top:0,left:0,parent:splitFC.div2,widthItem:120,autoResizeTab:false,isClosable:false,draggableItem:false});
> > folder1 = tabFolder.addTabItem('folder1',true);
> > gGrid = new rialto.widget.Grid({top:10,left:5,height:380, parent:folder1,
> > arrHeader:[{title:"",type:"string",width:200},
> > {title:"",type:"string",width:200},
> > {title:"",type:"string",width:200}],
> > name:'gGrid',
> > boolPrint:false,switchable:false,autoResizableW:false});
> >
> > folder2 = tabFolder.addTabItem('folder2',true);
> > myFrame = new rialto.widget.Frame({name:'myFrame',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
> > gGrid2 = new rialto.widget.Grid({top:50, left:0, height:'500', parent:myFrame,
> > arrHeader:[{title:"",type:"string",width:200},
> > {title:"",type:"string",width:200},
> > {title:"",type:"string",width:200}],
> > name:'gGrid2',
> > boolPrint:false, switchable:false, autoResizableW:false});
> > myFrame2 = new rialto.widget.Frame({name:'myFrame2',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
> >
> > folder1.InitAttr=function(theNode) {
> > gGrid.deleteData();
> > switch(theNode.text) {
> > case"node1":
> > for(var i=0;i<10;i++) {
> > gGrid.addOneLine(["toto1","titi1","tata1"]);
> > }
> > break;
> > case"node2":
> > for(var i=0;i<3;i++) {
> > gGrid.addOneLine(["toto2","titi2","tata2"]);
> > }
> > break;
> > case"node3":
> > for(var i=0;i<700;i++) {
> > gGrid.addOneLine(["toto3","titi3","tata3"]);
> > }
> > break;
> > }
> > }
> >
> > folder2.InitAttr=function(theNode) {
> > myFrame2.setVisible(false);
> > myFrame.setVisible(true);
> > gGrid2.deleteData();
> > switch(theNode.text) {
> > case"node1":
> > for(var i=0;i<10;i++) {
> > gGrid2.addOneLine(["toto1","titi1","tata1"]);
> > }
> > break;
> > case"node2":
> > for(var i=0;i<3;i++) {
> > gGrid2.addOneLine(["toto2","titi2","tata2"]);
> > }
> > break;
> > case"node3":
> > for(var i=0;i<700;i++) {
> > gGrid2.addOneLine(["toto3","titi3","tata3"]);
> > }
> > break;
> > }
> > }
> >
> > treeT.onclick=function(thisNode) {
> > tabFolder.currentActiveTab.InitAttr(thisNode);
> > }
> > </rialto:layout>
> >
>

[frederic_viollet]

Ok. I'll keep waiting then :)

--- In rialto-dev@..., "cyril_balit" <cbalit@...> wrote:

>
> Helo Fred,
>
> I have take a look on it and honestly i have no idea for now. Still searching
>
> Cyril
>
> --- In rialto-dev@..., "frederic_viollet" <frederic.viollet@> wrote:
> >
> > Hi folks,
> >
> > nothing new on this one?
> >
> > Fred
> >
> > --- In rialto-dev@..., "frederic_viollet" <frederic.viollet@> wrote:
> > >
> > > Hi everyone,
> > >
> > > I'm encountering some performance problems with the following code.
> > > I seems to be due to:
> > > *the amount of data in the grid object
> > > *and the setVisible calls
> > >
> > > To reproduce the problem, please do the following steps:
> > > 1-make sure 'folder2' is the active folder (it should be the active folder on reload)
> > > 2-click on node1
> > > 3-click on node2
> > > 4-click on node3 ** at this point the grid is populated with 700 entries **
> > > 5-click on node2 --> problem : it takes up to 10 seconds on my computer to switch back to node2
> > >
> > > If you try the same operations on the 'folder1' tab, switching back from node3 to node2 takes less than a second (the amount of data is the same)
> > >
> > > I profiled these operations through the FireBug profiler. It seems that the functions getBorderTopWidth, getBorderLeftWidth, updateSize and getHeightInDoct take more than 90% of elapsed time.
> > >
> > > Thanks for your help.
> > >
> > > Fred
> > >
> > > <rialto:layout name="mainLayout">
> > > splitFC = new rialto.widget.Splitter({top:0,left:0,height:'100%',width:'100%',prop:0.2,orientation:'h',name:'splitFC',parent:document.body,style:'3D',minProp:0,maxProp:1,withImg:true,reverseClose:false});
> > > treeT = new rialto.widget.Tree({name:'treeReload',top:'5',left:'0',width:'',height:'99%',parent:splitFC.div1,draggableNode:true,targetNode:true});
> > > var node=new rialto.widget.TreeNode({name:'node1',text:'node1',reload:false,url:"",draggable:true});
> > > treeT.add(node);
> > > node=new rialto.widget.TreeNode({name:'node2',text:'node2',reload:false,url:"",draggable:true});
> > > treeT.add(node);
> > > node=new rialto.widget.TreeNode({name:'node3',text:'node3',reload:false,url:"",draggable:true});
> > > treeT.add(node);
> > >
> > > tabFolder = new rialto.widget.TabFolder({name:'tabFolder',top:0,left:0,parent:splitFC.div2,widthItem:120,autoResizeTab:false,isClosable:false,draggableItem:false});
> > > folder1 = tabFolder.addTabItem('folder1',true);
> > > gGrid = new rialto.widget.Grid({top:10,left:5,height:380, parent:folder1,
> > > arrHeader:[{title:"",type:"string",width:200},
> > > {title:"",type:"string",width:200},
> > > {title:"",type:"string",width:200}],
> > > name:'gGrid',
> > > boolPrint:false,switchable:false,autoResizableW:false});
> > >
> > > folder2 = tabFolder.addTabItem('folder2',true);
> > > myFrame = new rialto.widget.Frame({name:'myFrame',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
> > > gGrid2 = new rialto.widget.Grid({top:50, left:0, height:'500', parent:myFrame,
> > > arrHeader:[{title:"",type:"string",width:200},
> > > {title:"",type:"string",width:200},
> > > {title:"",type:"string",width:200}],
> > > name:'gGrid2',
> > > boolPrint:false, switchable:false, autoResizableW:false});
> > > myFrame2 = new rialto.widget.Frame({name:'myFrame2',top:'40',left:'5',width:800,height:650,title:"",open:true,dynamic:false,position:'relative',draggable:false,parent:folder2});
> > >
> > > folder1.InitAttr=function(theNode) {
> > > gGrid.deleteData();
> > > switch(theNode.text) {
> > > case"node1":
> > > for(var i=0;i<10;i++) {
> > > gGrid.addOneLine(["toto1","titi1","tata1"]);
> > > }
> > > break;
> > > case"node2":
> > > for(var i=0;i<3;i++) {
> > > gGrid.addOneLine(["toto2","titi2","tata2"]);
> > > }
> > > break;
> > > case"node3":
> > > for(var i=0;i<700;i++) {
> > > gGrid.addOneLine(["toto3","titi3","tata3"]);
> > > }
> > > break;
> > > }
> > > }
> > >
> > > folder2.InitAttr=function(theNode) {
> > > myFrame2.setVisible(false);
> > > myFrame.setVisible(true);
> > > gGrid2.deleteData();
> > > switch(theNode.text) {
> > > case"node1":
> > > for(var i=0;i<10;i++) {
> > > gGrid2.addOneLine(["toto1","titi1","tata1"]);
> > > }
> > > break;
> > > case"node2":
> > > for(var i=0;i<3;i++) {
> > > gGrid2.addOneLine(["toto2","titi2","tata2"]);
> > > }
> > > break;
> > > case"node3":
> > > for(var i=0;i<700;i++) {
> > > gGrid2.addOneLine(["toto3","titi3","tata3"]);
> > > }
> > > break;
> > > }
> > > }
> > >
> > > treeT.onclick=function(thisNode) {
> > > tabFolder.currentActiveTab.InitAttr(thisNode);
> > > }
> > > </rialto:layout>
> > >
> >
>