From 86797144115f92811bcdbbdefc82d799e7b354ca Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 29 Aug 2026 21:01:21 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20=EC=B5=9C=EC=A0=81=ED=99=94?=
 =?UTF-8?q?:=20NetworkGraph=EC=9D=98=20O(N)=20=EB=B0=B0=EC=97=B4=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: `NetworkGraph.tsx`의 `relationshipOptions`, `nodeOptions`, `nodeLabels` `useMemo` 블록에서 `Array.from(map.values()).slice().map()` 패턴을 조기 종료(early break)를 포함한 `for...of` 루프로 교체했습니다.
🎯 Why: 기존 코드는 소수의 항목(5~8개)만 필요함에도 불구하고 수천 개의 노드나 관계를 가질 수 있는 맵 전체를 메모리에 배열로 변환하는 O(N) 연산을 수행하여 메인 스레드를 블로킹할 위험이 있었습니다.
📊 Impact: 그래프 렌더링 시 불필요한 전체 맵 순회와 거대한 중간 배열 생성을 방지하여, 대용량 그래프 환경에서 메모리 사용량을 줄이고 컴포넌트 렌더링 지연을 방지합니다(O(N) -> O(1) 바운드).
🔬 Measurement: `frontend` 폴더 내에서 `pnpm test` 및 `pnpm lint`를 실행하여 렌더링 로직의 무결성을 검증할 수 있습니다.
---
 frontend/.Jules/bolt.md                  |  3 ++
 frontend/src/components/NetworkGraph.tsx | 49 +++++++++++++++++-------
 2 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 frontend/.Jules/bolt.md

diff --git a/frontend/.Jules/bolt.md b/frontend/.Jules/bolt.md
new file mode 100644
index 000000000..6b77a6b25
--- /dev/null
+++ b/frontend/.Jules/bolt.md
@@ -0,0 +1,3 @@
+## 2025-05-24 - NetworkGraph O(N) array creation bounds
+**Learning:** Using `Array.from(map.values()).slice(0, N)` creates an array of the entire map in memory (O(N) operations) before truncating it. This can block the main thread and consume significant memory for large datasets in React components when we only need a few items.
+**Action:** Replace `Array.from(iterable).slice(0, N)` with a bounded `for...of` loop that breaks early when the desired number of items is reached, keeping the complexity O(1).
diff --git a/frontend/src/components/NetworkGraph.tsx b/frontend/src/components/NetworkGraph.tsx
index f9eb61c71..20baf3ab7 100644
--- a/frontend/src/components/NetworkGraph.tsx
+++ b/frontend/src/components/NetworkGraph.tsx
@@ -277,28 +277,49 @@ export default function NetworkGraph() {
     }
   }, [nodes, edges, nodeMap, edgeMap]);
 
+  // ⚡ Bolt: Replace O(N) array mapping and filtering with O(1) bounded iteration
+  // 🎯 Why: Mapping and filtering the entire node array blocks the main thread for large graphs when we only need 5 labels
   const nodeLabels = useMemo(() => {
-    return nodes
-      .map((node) => String(node.label ?? node.id))
-      .filter(Boolean)
-      .slice(0, 5);
+    const labels = [];
+    for (const node of nodes) {
+      if (labels.length >= 5) break;
+      const label = String(node.label ?? node.id);
+      if (label) labels.push(label);
+    }
+    return labels;
   }, [nodes]);
 
   const firstEdge = edges[0] ?? null;
+  // ⚡ Bolt: Replace O(N) Array.from().slice() with O(1) bounded iteration
+  // 🎯 Why: Converting the entire map to an array blocks the main thread for large graphs when we only need 5 items
   const relationshipOptions = useMemo(() => {
-    return Array.from(edgeMap.values()).slice(0, 5).map((edge, index) => ({
-      edge,
-      id: String(edge.id),
-      label: `관계 ${index + 1}: ${describeEdge(edge, nodeMap)}`,
-    }));
+    const options = [];
+    let index = 0;
+    for (const edge of edgeMap.values()) {
+      if (options.length >= 5) break;
+      options.push({
+        edge,
+        id: String(edge.id),
+        label: `관계 ${index + 1}: ${describeEdge(edge, nodeMap)}`,
+      });
+      index++;
+    }
+    return options;
   }, [edgeMap, nodeMap]);
 
+  // ⚡ Bolt: Replace O(N) Array.from().slice() with O(1) bounded iteration
+  // 🎯 Why: Converting the entire map to an array blocks the main thread for large graphs when we only need 8 items
   const nodeOptions = useMemo(() => {
-    return Array.from(nodeInstanceMap.values()).slice(0, 8).map((node) => ({
-      id: String(node.id),
-      label: `노드: ${String(node.label ?? node.id)}`,
-      node,
-    }));
+    const options = [];
+    for (const node of nodeInstanceMap.values()) {
+      if (options.length >= 8) break;
+      options.push({
+        id: String(node.id),
+        label: `노드: ${String(node.label ?? node.id)}`,
+        node,
+      });
+    }
+    return options;
   }, [nodeInstanceMap]);
 
   const selectRelationship = (edge: Edge, status: string) => {