fix(mapa): resolvido memory leak e erro infinite loop nas renders

src/pages/MapaInterativo.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
@@ -18,81 +18,6 @@ import { useUserRole } from '@/hooks/useUserRole';
 import { UserResourcePermissions } from '@/components/mapa-interativo/UserResourcePermissions';
 import { cn } from '@/lib/utils';
 
-export default function MapaInterativo() {
-  const { nodes, connections } = useSystemMapAutoDiscovery();
-  const { isAdmin } = useUserRole();
-  const [activeFilter, setActiveFilter] = useState<string>('all');
-  const [selectedNode, setSelectedNode] = useState<SystemMapNode | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [draggedNode, setDraggedNode] = useState<string | null>(null);
-  const [highlightedPath, setHighlightedPath] = useState<string[]>([]);
-  const [isEditing, setIsEditing] = useState(false);
-  const [editData, setEditData] = useState<{ title: string; description: string; group: string }>({ title: '', description: '', group: '' });
-  const mapContainerRef = useRef<HTMLDivElement>(null);
-
-  const filters = [
-    { id: 'all', label: 'Ver Tudo', icon: Eye },
-    { id: 'main-flow', label: 'Fluxo Principal', icon: Workflow },
-    { id: 'permissions', label: 'Meus Acessos', icon: Shield }
-  ];
-
-  const filteredNodes = nodes.filter(node => {
-    switch (activeFilter) {
-      case 'main-flow': return node.isMainFlow;
-      case 'permissions': return node.hasAccess;
-      default: return true;
-    }
-  });
-
-  const filteredConnections = connections.filter(conn => {
-    const sourceExists = filteredNodes.some(n => n.id === conn.from);
-    const targetExists = filteredNodes.some(n => n.id === conn.to);
-    return sourceExists && targetExists;
-  });
-
-  const getMapDimensions = () => {
-    if (filteredNodes.length === 0) return { width: 1200, height: 800 };
-    
-    const cardWidth = 240;
-    const cardHeight = 140;
-    const padding = 100; // Padding extra para garantir espaço
-    
-    let maxX = 0;
-    let maxY = 0;
-    
-    filteredNodes.forEach(node => {
-      const nodeEl = mapContainerRef.current?.querySelector(`[data-node="${node.id}"]`) as HTMLElement;
-      if (nodeEl) {
-        const rect = nodeEl.getBoundingClientRect();
-        const containerRect = mapContainerRef.current!.getBoundingClientRect();
-        maxX = Math.max(maxX, rect.left - containerRect.left + cardWidth);
-        maxY = Math.max(maxY, rect.top - containerRect.top + cardHeight);
-      } else {
-        // Usar posições iniciais se o elemento ainda não foi renderizado
-        maxX = Math.max(maxX, node.left + cardWidth);
-        maxY = Math.max(maxY, node.top + cardHeight);
-      }
-    });
-    
-    return {
-      width: Math.max(1200, maxX + padding),
-      height: Math.max(800, maxY + padding)
-    };
-  };
-
-  const [mapDimensions, setMapDimensions] = useState(getMapDimensions());
-
-  useEffect(() => {
-    const updateDimensions = () => {
-      setMapDimensions(getMapDimensions());
-    };
-    
-    updateDimensions();
-    const interval = setInterval(updateDimensions, 1000); // Atualizar periodicamente
-    
-    return () => clearInterval(interval);
-  }, [filteredNodes]);
-
 const createCurvedPath = (fromX: number, fromY: number, toX: number, toY: number) => {
   const midX = (fromX + toX) / 2;
   const midY = (fromY + toY) / 2;
@@ -142,7 +67,94 @@ export default function MapaInterativo() {
   return arrows;
 };
 
-  const updateConnections = () => {
+export default function MapaInterativo() {
+  const { nodes, connections } = useSystemMapAutoDiscovery();
+  const { isAdmin } = useUserRole();
+  const [activeFilter, setActiveFilter] = useState<string>('all');
+  const [selectedNode, setSelectedNode] = useState<SystemMapNode | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggedNode, setDraggedNode] = useState<string | null>(null);
+  const [highlightedPath, setHighlightedPath] = useState<string[]>([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editData, setEditData] = useState<{ title: string; description: string; group: string }>({ title: '', description: '', group: '' });
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+
+  const filters = [
+    { id: 'all', label: 'Ver Tudo', icon: Eye },
+    { id: 'main-flow', label: 'Fluxo Principal', icon: Workflow },
+    { id: 'permissions', label: 'Meus Acessos', icon: Shield }
+  ];
+
+  const filteredNodes = useMemo(() => {
+    return nodes.filter(node => {
+      switch (activeFilter) {
+        case 'main-flow': return node.isMainFlow;
+        case 'permissions': return node.hasAccess;
+        default: return true;
+      }
+    });
+  }, [nodes, activeFilter]);
+
+  const filteredConnections = useMemo(() => {
+    return connections.filter(conn => {
+      const sourceExists = filteredNodes.some(n => n.id === conn.from);
+      const targetExists = filteredNodes.some(n => n.id === conn.to);
+      return sourceExists && targetExists;
+    });
+  }, [connections, filteredNodes]);
+
+  const getMapDimensions = useCallback(() => {
+    if (filteredNodes.length === 0) return { width: 1200, height: 800 };
+    
+    const cardWidth = 240;
+    const cardHeight = 140;
+    const padding = 100; // Padding extra para garantir espaço
+    
+    let maxX = 0;
+    let maxY = 0;
+    
+    filteredNodes.forEach(node => {
+      const nodeEl = mapContainerRef.current?.querySelector(`[data-node="${node.id}"]`) as HTMLElement;
+      if (nodeEl) {
+        const rect = nodeEl.getBoundingClientRect();
+        const containerRect = mapContainerRef.current!.getBoundingClientRect();
+        maxX = Math.max(maxX, rect.left - containerRect.left + cardWidth);
+        maxY = Math.max(maxY, rect.top - containerRect.top + cardHeight);
+      } else {
+        // Usar posições iniciais se o elemento ainda não foi renderizado
+        maxX = Math.max(maxX, node.left + cardWidth);
+        maxY = Math.max(maxY, node.top + cardHeight);
+      }
+    });
+    
+    return {
+      width: Math.max(1200, maxX + padding),
+      height: Math.max(800, maxY + padding)
+    };
+  }, [filteredNodes]);
+
+  const [mapDimensions, setMapDimensions] = useState({ width: 1200, height: 800 });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setMapDimensions(prev => {
+        const next = getMapDimensions();
+        if (prev.width === next.width && prev.height === next.height) {
+          return prev;
+        }
+        return next;
+      });
+    };
+    
+    updateDimensions();
+    const interval = setInterval(updateDimensions, 1000); // Atualizar periodicamente
+    
+    return () => clearInterval(interval);
+  }, [getMapDimensions]);
+
+
+
+  const updateConnections = useCallback(() => {
     if (!mapContainerRef.current) return;
     
     const container = mapContainerRef.current;
@@ -179,14 +191,14 @@ export default function MapaInterativo() {
         }
       }
     });
-  };
+  }, [filteredConnections]);
 
   useEffect(() => {
     updateConnections();
     const handleResize = () => updateConnections();
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, [filteredNodes, filteredConnections]);
+  }, [updateConnections]);
 
   const handleNodeMouseOver = (nodeId: string) => {
     const relatedNodes = new Set<string>();