diff --git a/src/pages/MapaInterativo.tsx b/src/pages/MapaInterativo.tsx index 063c332..9f8cfc3 100644 --- a/src/pages/MapaInterativo.tsx +++ b/src/pages/MapaInterativo.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Input } from '@/components/ui/input'; @@ -36,19 +36,23 @@ export default function MapaInterativo() { { 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 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 = 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 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 = () => { if (filteredNodes.length === 0) return { width: 1200, height: 800 }; @@ -80,11 +84,17 @@ export default function MapaInterativo() { }; }; - const [mapDimensions, setMapDimensions] = useState(getMapDimensions()); + const [mapDimensions, setMapDimensions] = useState({ width: 1200, height: 800 }); useEffect(() => { const updateDimensions = () => { - setMapDimensions(getMapDimensions()); + setMapDimensions(prev => { + const next = getMapDimensions(); + if (prev.width === next.width && prev.height === next.height) { + return prev; + } + return next; + }); }; updateDimensions();