search

AJamesPhillips / DataCurator

DataCurator enables you to map and understand complex systems before helping you plan, communicate and navigate successful interventions in them.
https://DataCurator.org
8 stars 1 forks source link

Remove or find out how to optimise material-ui #214

Closed AJamesPhillips closed 1 month ago

AJamesPhillips commented 2 years ago

Describe the bug

It takes multiple seconds to open the component form for a State or Action node with many value and prediction sets.

To Reproduce

Steps to reproduce the behavior:

  1. Create an action
  2. Set to "In progress" and "Pause" multiple times (10)
  3. Observe that the form takes a long time to load

Expected behavior

Form should load quickly

Additional context

Looking in the console, it's clear that hundreds of Material UI ( MUI ) stylesheets are being created for various components which is very slow and slowing down the page rendering. Before and after the form loads document.getElementsByTagName("style").length shows 751 and then 1412.

AJamesPhillips commented 2 years ago

Unlike this post, none of them are empty.

AJamesPhillips commented 2 years ago

I suspect most are coming from the TextField component which creates multiple style components and is used inside the EditableCustomDateTime, EditableText, EditableTextSingleLine and AutocompleteText components.

AJamesPhillips commented 1 year ago

Removing makeStyles might be a "solution" https://dev.to/gaelferrand/why-you-should-not-use-material-ui-21nn#comment-1cop9

AJamesPhillips commented 9 months ago

On a knowledge view with 169 nodes, when a component was clicked on to select it, or clicked on to deselect it, the page was taking over 2 seconds to render and sometimes much longer.

Screenshot_11_12_2023__14_46

From my interpretation of the performance profiling information, it seemed to show most of it was in preact diff.

document.getElementsByTagName("style").length revealed the page had >1100 style components.

After removing a call to makeStyles 887e95fa44b737b6c8716fe486cb6a893ce1afc9 the performance improved to ~0.5 seconds and document.getElementsByTagName("style").length now returned ~560 style components.

AJamesPhillips commented 1 month ago

This doesn't seem to be a large problem any more. This component with 18 VAP sets in it results in document.getElementsByTagName("style").length returning 628. If a VAP set is opened the count is 692. When the component is closed / deselected the count of style tags is 560.