search

infor-design / enterprise-wc

Enterprise-grade web component library for the Infor Design System
Apache License 2.0
27 stars 26 forks source link

IdsDatagrid: Headers are re-rendering upon setting data #2757

Open eaenriquez opened 1 month ago

eaenriquez commented 1 month ago

Describe the bug The current observations with the datagrid are:

  1. That the headers are re-rendering whenever give records to the datagrid.
  2. It doesnt matter how big or small the data is, empty or many, it will re-render
  3. There is a huge performance impact when we set filterable columns/icons. This effect stacks whenever we re-render. Should we also check how we render icons as well?

To Reproduce To replicate the issue, we need an environment where we can toggle the data and the columns. We did that in a replication project with M3 ExD. Please follow the setup and the steps to reproduce.

Setup:

  1. clone ssh://[git@oxfordssh.awsdev.infor.com]:7999/William.Hernebrink/exd-light.git
  2. run npm i -y
  3. run npx nx run m3:serve, then open localhost:4200 in Chrome browser
  4. open chrome's devtools debugging (F12) > Performance tab > open settings > set CPU throttling to 4x to make the results obvious. You can also start recording from here to get results
  5. click "Ids Datagrids" to show a page with a lot of datagrids

Steps to reproduce the behavior:

  1. To toggle the data, we have buttons on each datagrid to set/unset the data
  2. To toggle the columns, with or without icons, we will need to comment/uncomment a line of code in the source. To do this, we can just edit this file libs > shared > ui > components > src > lib > ids-datagrid > ids-datagrid.component.ts. line 22 has no icons, line 23 has icons, just pick one to comment out and the other to render.

Expected behavior We only need to render the headers once after we set the columns setting of the datagrid to be optimized. We might need to check why icons are taking time to load too.

Version

Screenshots In our applications, this is the impact of the re-renders: Without Icons: image

With Icons: image

PS: see bottom parts of the picture to see the total times that the icons are taking

Platform

tmcconechy commented 1 month ago

@eaenriquez why do you need so many data grids on one page?

eaenriquez commented 1 month ago

Hi @tmcconechy it is for us to simulate a real-world usage like how some of our customers will be using a lot of datagrids on a single application (sometimes within tabs, sometimes within a single page)

tmcconechy commented 1 month ago

Ok. We can take a look. I think this one will be very hard. However we can look at not changing headers unless columns change

eaenriquez commented 1 month ago

Yes, I think that would suffice in this case. Should I also make another ticket as to investigate how the icons are being rendered ?

tmcconechy commented 1 month ago

@eaenriquez probably enough here. If we cant fix that under this can make a new issue (have doubts its easy to change)

whernebrink commented 1 month ago

@eaenriquez why do you need so many data grids on one page?

Hi @tmcconechy, just to shed some light on as to why... In M3 Experience Designer, customers can configure their own business applications with our WYSIWYG editor. We have one customer that created an app with 37 (! - not recommended...) datagrids (in different tabs etc). It seems like these filterable columns, creating the icons for the filterable options (~6+ for each column unless one has limited the options) especially (correct me if I'm wrong @eaenriquez) is taking a lot of resources. If we can only have this done once, when the datagrid get it's options/settings and/or when columns options are changed, that would be a great performance gain.

Not sure why the creation of the icons takes a lot of time, but perhaps one could just look to see if that could be sped up first, if you think it would be hard changing how the datagrid is creating/destroying the columns?

tmcconechy commented 1 month ago

yeah it would be hard to completely change how columns are rendered. Maybe there is a speed up available somewhere. And not rendering headers if not needed should be doable. Will check. One idea maybe is to use the icon font instead of svg? I think there was an issue with that however.

Would like to try and make a standalone test page? So 32 grids with 10-20 columns? And 200 rows? Does that sound about right?

Still ranking this as 2-3 weeks of work for one developer.

eaenriquez commented 2 weeks ago

Hello @tmcconechy, I went ahead and created the other ticket that is more specific to the issue of having filters on the column headers. So if in case that it will be handled differently then it would under that ticket.

Otherwise, if the performance of when having filters is solved here too, such as the performances for load time initially and setting records, then feel free to just close that one.

https://github.com/infor-design/enterprise-wc/issues/2823