Diagram performance degrades over time when moving elements

[pcdavid]

Steps to reproduce:

1. Create and open a relatively large diagram (it's easier to see), for example a Papaya Diagram.
2. Select one of its containers and move it to a different (available position).
3. Move it back to its original position.
4. Repeat steps 2 & 3 a few times.

Initialy the effect of the move is relatively quick (though not immediate), but the more you move the element back and forth the slower it gets. You can quickly get a 2 or 3s second delay where the diagram is inactive after the element has been moved to its new place.

[pcdavid]

The delay occurs purely on the front, between the moment the user finished the move (or resize) and the moment the frontend sends the "layoutDiagram" mutation.

Capture.video.du.2024-01-18.16-56-44.webm

[pcdavid]

As strange as it seems (and I need to confirm), a lot of time seems to be spent in... IconOverlay, with some renders taking up to 10ms:

In this screenshot almost all the small purple block in the middle are invocations of IconOverlay:

Also note the 3 "Récupération mineure" blocks (minor GC collections).

IconOverlay uses parameterized styles:

const useStyles = makeStyles<Theme, IconOverlayStyleProps>((_theme) => ({
  iconContainer: {
    position: 'relative',
    width: ({ iconWidth }) => `${iconWidth}px`,
    height: ({ iconHeight }) => `${iconHeight}px`,
  },
  icon: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
}));

My guess is that this creates a lot of garbage objects on large diagrams (with hundreds/thousands of labels), which end up triggering GC several times.

Hard-coding the styles to:

const useStyles = makeStyles<Theme>((_theme) => ({
  iconContainer: {
    position: 'relative',
    width: `16px`,
    height: `16px`,
  },
  icon: {
    position: 'absolute',
    top: 0,
    left: 0,
  },
}));

seem to reduce the performance issue. It's still not immediate to move an element on a large papaya diagram, but the performance does not seem to degrade anymore.