search

OxfordRSE / gutenberg

https://oxfordrse.github.io/gutenberg
BSD 3-Clause "New" or "Revised" License
5 stars 7 forks source link

Speedup render of eventProblems table #98

Closed alasdairwilson closed 1 year ago

alasdairwilson commented 1 year ago

closes #92 . The current page was in such a bad way, I couldn't even get the profiler to work without crashing, this makes some small changes and it has dramatic effects:

  1. Filter students by event first to reduce the number of users later maps will be iterated over.
  2. presort problems by user into an obj keyed to the user, this changes the order of the render from O(n^2) to O(2n)
  3. Remove the rows for eventgroups with no eventitems (e.g. lectures)
  4. Reduce padding on table, both avatars and problem status, this speeds up the render (possibly by removing the scrolling) and makes the table look better.

Together these reduce the time to load that page from ~45-90s (and then unresponsive at that) to ~2-4s but then the problem is tooltips, I discovered all tooltips were being rendered despite being not visible, I suspected there would be a way to lazyload the tooltips, or to mount them only when they are being used and found this:

https://github.com/mui/material-ui/issues/10909 and https://github.com/mui/material-ui/pull/12085

Seems the material UI people found the same issue with tooltips being effectively unusable at scale, sadly flowbite does not have the same "lazy loading" ability.

So I swapped the tooltips from flowbite to material UI on this page only, this makes the render almost instant:

fast_table_2