fix: [PROD-14470] fix some risks of memory leaks

Author: nborde-CSM

src/views/Simulation/components/Scene/Scene.js

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/styles';
 import { useSimulationViewContext } from '../../SimulationViewContext';
 import { DEFAULT_UPDATE_STATE } from '../../SimulationViewHook';
 import { resetGraphHighlighting } from '../../utils/graphUtils';
-import { createApp, destroyApp, initApp, initMinimap, renderElements } from '../../utils/pixiUtils';
+import { createApp, destroyApp, initApp, initMinimap, renderElements, freeDisplayMemory } from '../../utils/pixiUtils';
 import { ChartTimeline } from '../Charts';
 import { Minimap } from './Minimap';
 
@@ -100,11 +100,7 @@ const Scene = () => {
       requiredUpdateStepsRef.current.layout ||
       requiredUpdateStepsRef.current.render
     ) {
-      if (sceneContainerRef.current) {
-        sceneContainerRef.current.removeChildren().forEach((child) => {
-          child.destroy({ children: true, texture: false, baseTexture: false });
-        });
-      }
+      if (sceneContainerRef.current) freeDisplayMemory(sceneContainerRef.current);
 
       const resetBounds = requiredUpdateStepsRef.current.all || requiredUpdateStepsRef.current.layout;
       renderElements(sceneContainerRef, graphRef, setSelectedElementId, settings, resetBounds);

src/views/Simulation/utils/MinimapContainer.js

@@ -17,8 +17,19 @@ export class MinimapContainer extends Container {
     this.dragTarget = null;
   }
 
+  freeDisplayMemory() {
+    this.children.forEach((child) => {
+      child.destroy({
+        children: true,
+        texture: true,
+        context: true,
+        style: true,
+      });
+    });
+  }
+
   renderElements() {
-    this.removeChildren().forEach((child) => child.destroy({ children: true }));
+    this.freeDisplayMemory();
     this.miniSceneContainer = this.forgeContainer(this.sceneContainerRef.current);
 
     this.addChild(this.miniSceneContainer);
@@ -53,7 +64,8 @@ export class MinimapContainer extends Container {
   createScreenCursor() {
     if (this.screenCursor != null) {
       this.removeChild(this.screenCursor);
-      this.screenCursor.destroy({ children: true });
+      this.screenCursor.destroy({ children: true, texture: true, context: true, style: true });
+      this.screenCursor = null;
     }
 
     this.screenCursor = new Graphics();

src/views/Simulation/utils/pixiUtils.js

@@ -203,14 +203,14 @@ const createProductionResourceContainer = (textures, name, isHighlighted, operat
   return container;
 };
 
-function cubicBezier(p0, p1, p2, p3, t) {
+const cubicBezier = (p0, p1, p2, p3, t) => {
   const c = 3 * (p1 - p0);
   const b = 3 * (p2 - p1) - c;
   const a = p3 - p0 - c - b;
   return a * (t * t * t) + b * (t * t) + c * t + p0;
-}
+};
 
-function drawArrow(stage, x1, y1, x2, y2, cp1x, cp1y, cp2x, cp2y, size = 12, isGrayedOut) {
+const drawArrow = (x1, y1, x2, y2, cp1x, cp1y, cp2x, cp2y, size = 12, isGrayedOut) => {
   const t = 0.5;
   const midX = cubicBezier(x1, cp1x, cp2x, x2, t);
   const midY = cubicBezier(y1, cp1y, cp2y, y2, t);
@@ -220,23 +220,22 @@ function drawArrow(stage, x1, y1, x2, y2, cp1x, cp1y, cp2x, cp2y, size = 12, isG
   const angle = Math.atan2(dy, dx);
 
   const arrowGraphics = new Graphics();
-  arrowGraphics.fill({ color: !isGrayedOut ? 0xffffff : HIDDEN_LINK_COLOR, alpha: 1 });
   arrowGraphics.poly([0, 0, -size, size / 2, -size, -size / 2]);
-  arrowGraphics.endFill();
+  arrowGraphics.fill({ color: !isGrayedOut ? 0xffffff : HIDDEN_LINK_COLOR, alpha: 1 });
   arrowGraphics.x = midX;
   arrowGraphics.y = midY;
   arrowGraphics.rotation = angle;
-  stage.addChild(arrowGraphics);
-}
+  return arrowGraphics;
+};
 
-function cubicBezierDerivative(p0, p1, p2, p3, t) {
+const cubicBezierDerivative = (p0, p1, p2, p3, t) => {
   const c = 3 * (p1 - p0);
   const b = 3 * (p2 - p1) - c;
   const a = p3 - p0 - c - b;
   return 3 * a * t * t + 2 * b * t + c;
-}
+};
 
-function drawDashedBezier(ctx, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, dash = 4, gap = 4) {
+const drawDashedBezier = (ctx, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, dash = 4, gap = 4) => {
   const segments = 80;
   let prev = { x: x1, y: y1 };
   let dist = 0;
@@ -269,14 +268,17 @@ function drawDashedBezier(ctx, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, dash = 4,
       dist += segLength;
     }
   }
-}
+};
 
 const createLinkGraphics = (links, setSelectedElementId, settings) => {
   const isLayoutHorizontal = settings?.orientation === 'horizontal';
   const spacingFactor = settings.spacing / 100.0;
 
   return links.map((link) => {
+    const graphicsContainer = new Container();
     const graphics = new Graphics();
+    graphicsContainer.addChild(graphics);
+
     graphics.eventMode = 'static';
     graphics.cursor = 'pointer';
 
@@ -334,9 +336,7 @@ const createLinkGraphics = (links, setSelectedElementId, settings) => {
       );
 
       graphics.lineTo(target.x - targetOffset.x, target.y - targetOffset.y);
-
-      drawArrow(
-        graphics,
+      const arrow = drawArrow(
         source.x + sourceOffset.x,
         source.y + sourceOffset.y,
         target.x - targetOffset.x,
@@ -348,6 +348,7 @@ const createLinkGraphics = (links, setSelectedElementId, settings) => {
         12,
         link.isGrayedOut
       );
+      graphicsContainer.addChild(arrow);
     }
 
     graphics.stroke({
@@ -360,7 +361,7 @@ const createLinkGraphics = (links, setSelectedElementId, settings) => {
     graphics.filters = link.isSelected && settings.enableGlowEffect ? [SELECTED_LINK_FILTER] : [];
     graphics.elementId = link.data.id;
 
-    return graphics;
+    return graphicsContainer;
   });
 };
 
@@ -411,9 +412,23 @@ const generateTextures = (app) => {
   return textures;
 };
 
+export const freeDisplayMemory = (container) => {
+  container.children.forEach((child) => {
+    freeDisplayMemory(child);
+    child.destroy({
+      children: true,
+      texture: true,
+      context: true,
+      style: true,
+    });
+  });
+};
+
 export const renderElements = (sceneContainerRef, graphRef, setSelectedElementId, settings, resetBounds = true) => {
   if (!graphRef.current || !sceneContainerRef.current?.textures) return;
 
+  freeDisplayMemory(sceneContainerRef.current);
+
   const { nodes, links } = graphRef.current;
   const textures = sceneContainerRef.current.textures;