Step 8. Top-N 필터링과 그래프 레이아웃

graphData (원본)
   ↓ topN 변경 시 재계산
filteredGraphData (필터된 엣지)
   ↓ 필터 결과가 바뀌면 재계산
adjacencyMap (인접 리스트)
   ↓ 인접 리스트가 바뀌면 재계산
degreeMap (각 노드 연결 수)
   ↓ degree가 바뀌면 force 재설정
forceRadial (레이아웃 적용)

// src/app/page.tsx — filteredGraphData (lines 151-184)
 
const filteredGraphData = useMemo(() => {
  if (!graphData) return null;
 
  const nodeMap = new Map(graphData.nodes.map(n => [n.id, n]));
 
  // [Phase 1] 각 노드별 이웃 수집
  const neighbors = new Map<string, string[]>();
  for (const link of graphData.links) {
    const src = typeof link.source === 'object' ? (link.source as KeywordNode).id : link.source;
    const tgt = typeof link.target === 'object' ? (link.target as KeywordNode).id : link.target;
    if (!neighbors.has(src)) neighbors.set(src, []);
    if (!neighbors.has(tgt)) neighbors.set(tgt, []);
    neighbors.get(src)!.push(tgt);
    neighbors.get(tgt)!.push(src);
  }
 
  // [Phase 2] 각 노드별 top N 이웃 선정 (검색량 기준 내림차순)
  const topNeighbors = new Map<string, Set<string>>();
  for (const [nodeId, neighList] of neighbors) {
    const sorted = [...new Set(neighList)]
      .sort((a, b) => (nodeMap.get(b)?.totalVolume ?? 0) - (nodeMap.get(a)?.totalVolume ?? 0))
      .slice(0, topN);
    topNeighbors.set(nodeId, new Set(sorted));
  }
 
  // [Phase 3] 양쪽 중 하나라도 상대를 top N에 포함하면 유지
  const filteredLinks = graphData.links.filter(link => {
    const src = typeof link.source === 'object' ? (link.source as KeywordNode).id : link.source;
    const tgt = typeof link.target === 'object' ? (link.target as KeywordNode).id : link.target;
    return topNeighbors.get(src)?.has(tgt) || topNeighbors.get(tgt)?.has(src);
  });
 
  return { nodes: graphData.nodes, links: filteredLinks };
}, [graphData, topN]);

const neighbors = new Map<string, string[]>();
for (const link of graphData.links) {
  const src = typeof link.source === 'object' ? (link.source as KeywordNode).id : link.source;
  const tgt = typeof link.target === 'object' ? (link.target as KeywordNode).id : link.target;
  if (!neighbors.has(src)) neighbors.set(src, []);
  if (!neighbors.has(tgt)) neighbors.set(tgt, []);
  neighbors.get(src)!.push(tgt);
  neighbors.get(tgt)!.push(src);
}

const topNeighbors = new Map<string, Set<string>>();
for (const [nodeId, neighList] of neighbors) {
  const sorted = [...new Set(neighList)]           // 중복 제거
    .sort((a, b) =>                                // 검색량 내림차순 정렬
      (nodeMap.get(b)?.totalVolume ?? 0) - (nodeMap.get(a)?.totalVolume ?? 0)
    )
    .slice(0, topN);                               // 상위 N개만 선택
  topNeighbors.set(nodeId, new Set(sorted));
}

const filteredLinks = graphData.links.filter(link => {
  const src = typeof link.source === 'object' ? (link.source as KeywordNode).id : link.source;
  const tgt = typeof link.target === 'object' ? (link.target as KeywordNode).id : link.target;
  return topNeighbors.get(src)?.has(tgt) || topNeighbors.get(tgt)?.has(src);
});

// src/app/page.tsx — adjacencyMap (lines 187-201)
 
const adjacencyMap = useMemo(() => {
  if (!filteredGraphData) return new Map<string, Set<string>>();
 
  const map = new Map<string, Set<string>>();
  filteredGraphData.links.forEach(link => {
    const sourceId = typeof link.source === 'object' ? (link.source as KeywordNode).id : link.source;
    const targetId = typeof link.target === 'object' ? (link.target as KeywordNode).id : link.target;
 
    if (!map.has(sourceId)) map.set(sourceId, new Set());
    if (!map.has(targetId)) map.set(targetId, new Set());
    map.get(sourceId)!.add(targetId);
    map.get(targetId)!.add(sourceId);
  });
  return map;
}, [filteredGraphData]);

// src/app/page.tsx — degreeMap (lines 204-210)
 
const degreeMap = useMemo(() => {
  const map = new Map<string, number>();
  for (const [id, neighbors] of adjacencyMap) {
    map.set(id, neighbors.size);
  }
  return map;
}, [adjacencyMap]);

// src/app/page.tsx — forceRadial 설정 (lines 213-230)
 
useEffect(() => {
  if (!fgRef.current || !filteredGraphData || degreeMap.size === 0) return;
 
  import('d3-force').then(({ forceRadial }) => {
    const maxDegree = Math.max(...degreeMap.values(), 1);
    fgRef.current.d3Force('radial',
      forceRadial(
        (node: any) => {
          const degree = degreeMap.get(node.id) ?? 0;
          return 300 * (1 - degree / maxDegree);
        },
        0, 0
      ).strength(0.3)
    );
    fgRef.current.d3ReheatSimulation();
  });
}, [filteredGraphData, degreeMap]);

if (!fgRef.current || !filteredGraphData || degreeMap.size === 0) return;

import('d3-force').then(({ forceRadial }) => { ... });

const maxDegree = Math.max(...degreeMap.values(), 1);
// ...
(node: any) => {
  const degree = degreeMap.get(node.id) ?? 0;
  return 300 * (1 - degree / maxDegree);
}

전체 노드 중 최대 degree = 25 (maxDegree = 25)
 
'감자빵' (degree = 25, 허브 노드):
  → 300 * (1 - 25/25) = 300 * 0 = 0px  → 정중앙
 
'강황라떼' (degree = 12, 중간 노드):
  → 300 * (1 - 12/25) = 300 * 0.52 = 156px  → 중간 거리
 
'감자빵맛집추천' (degree = 2, 말단 노드):
  → 300 * (1 - 2/25) = 300 * 0.92 = 276px  → 외곽

.strength(0.3)
// ...
fgRef.current.d3ReheatSimulation();

사용자가 topN 슬라이더 조절 (예: 10 → 5)
        │
        v
┌─────────────────────────────────────────────────┐
│ filteredGraphData = useMemo(                    │
│   graphData.links에서 노드별 top-5 엣지만 필터  │
│   deps: [graphData, topN]  ← topN이 바뀌었으니  │
│   재계산!                                        │
│ )                                               │
└──────────────────────┬──────────────────────────┘
                       │ filteredGraphData 변경
                       v
┌─────────────────────────────────────────────────┐
│ adjacencyMap = useMemo(                         │
│   필터된 엣지 기반 인접 리스트 재구성             │
│   deps: [filteredGraphData]  ← 바뀌었으니 재계산 │
│ )                                               │
└──────────────────────┬──────────────────────────┘
                       │ adjacencyMap 변경
                       v
┌─────────────────────────────────────────────────┐
│ degreeMap = useMemo(                            │
│   각 노드의 연결 수 재계산                       │
│   deps: [adjacencyMap]  ← 바뀌었으니 재계산      │
│ )                                               │
└──────────────────────┬──────────────────────────┘
                       │ degreeMap 변경
                       v
┌─────────────────────────────────────────────────┐
│ useEffect(                                      │
│   forceRadial 재설정 + d3ReheatSimulation()      │
│   deps: [filteredGraphData, degreeMap]           │
│ )                                               │
└─────────────────────────────────────────────────┘