perf(network): bound NetworkGraph option materialization

.jules/bolt.md

@@ -26,3 +26,7 @@
 ## 2024-05-24 - [React Component Memoization]
 **Learning:** In React components like `WorkspaceHome`, when layout state or polling changes trigger parent re-renders, expensive child components like `EmailDetail` will also re-render unnecessarily if not memoized.
 **Action:** Always consider `React.memo` for heavy child components that rely on stable props (like IDs) when the parent component has frequent unrelated state updates.
+
+## 2023-10-27 - O(N) Array Mapping Blocked Main Thread in NetworkGraph
+**Learning:** When using `Array.from(map.values()).slice(0, N)` inside `useMemo` hooks, it creates a full intermediate O(N) array allocation before truncating to N items. In components with large Maps like `NetworkGraph`, this degrades performance during each render pass.
+**Action:** Replace `Array.from(map).slice(0, N)` with a bounded `for...of` loop over `map.values()` and an early `break` when the limit is reached, maintaining O(1) performance and avoiding intermediate array allocations.

CHANGELOG.md

@@ -2760,3 +2760,6 @@
 ### 문서 (Documentation)
 
 - `yaml.load()`와 관련해 발생한 Bandit B506 항목에 대해 규칙 한정적 오탐지(false-positive) 판정 및 처분 근거(disposition)를 담은 `docs/doctoring/bandit-b506-false-positive-disposition.md` 문서를 추가했습니다. 이는 제품의 실제 취약점 패치가 아니며, PyYAML의 `SafeLoader`를 명시적으로 사용하는 사용자 정의 로더에 대해 오탐지를 억제하는 조건과 롤백 기준을 테스트 증거와 함께 기록한 문서입니다.
+
+### 변경 사항
+- **성능 (Performance)**: `NetworkGraph` 컴포넌트에서 `useMemo` 내부의 `Array.from(map).slice()` 패턴을 크기 제한이 있는 `for...of` 루프로 변경하여 대규모 데이터 처리 시 발생하는 불필요한 중간 배열 할당을 제거하고 O(1) 성능을 달성하도록 최적화했습니다.

frontend/src/components/NetworkGraph.tsx

@@ -286,19 +286,35 @@ export default function NetworkGraph() {
 
   const firstEdge = edges[0] ?? null;
   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)}`,
-    }));
+    // ⚡ Bolt Optimization: Replace O(N) Array.from(map).slice() with bounded for...of loop
+    // to avoid intermediate array allocations and achieve O(1) performance for large maps.
+    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]);
 
   const nodeOptions = useMemo(() => {
-    return Array.from(nodeInstanceMap.values()).slice(0, 8).map((node) => ({
-      id: String(node.id),
-      label: `노드: ${String(node.label ?? node.id)}`,
-      node,
-    }));
+    // ⚡ Bolt Optimization: Replace O(N) Array.from(map).slice() with bounded for...of loop
+    // to avoid full Map iteration and intermediate allocations on every render pass.
+    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) => {