Flint Network Graph 스파이크 — thesis-3d 2D 폴백 대안 실증
초록
Flint 파일럿(2026-07-11) 1단계에서 미확인으로 남긴 Network Graph 지원 여부를 심층 확인. 핵심 발견: 채널 매핑이 source/target/value가 아니라 x/y/size(Vega-Lite 스타일). thesis 실데이터 114노드·284엣지 완전 처리 확인. hb5u 오프라인 시 ECharts 2D 폴백 라이브 스크린샷 추가.
개요
Flint 파일럿(2026-07-11) 1단계에서 미확인으로 남긴 Network Graph 지원 여부를 심층 확인했다.
핵심 발견: 채널 매핑이 source/target/value가 아니라 x/y/size — Vega-Lite 스타일 인코딩을 따른다.
배경 — 왜 이 스파이크가 필요했나
thesis-3d viz에서 hb5u(Moojoco 서버)가 오프라인일 때 3D 네트워크 그래프가 블랙아웃된다. Flint 파일럿 1단계(벤치마크 Bar Chart)에서 Flint의 Network Graph 타입을 확인했으나, 채널 매핑 검증이 남아 있었다.
실험 절차
1단계 — 잘못된 채널 매핑 재현
처음 시도한 입력:
{
"data": { "values": [{"source": "A", "target": "B", "weight": 3}] },
"semantic_types": { "source": "Nominal", "target": "Nominal", "weight": "Quantity" },
"chart_spec": {
"chartType": "Network Graph",
"encodings": {
"source": { "field": "source" },
"target": { "field": "target" },
"value": { "field": "weight" }
}
}
}
결과: Flint가 채널을 인식하지 못함.
2단계 — 올바른 채널 매핑 발견
Flint API 내부 채널 네이밍 규칙을 역추적한 결과:
{
"encodings": {
"x": { "field": "source" },
"y": { "field": "target" },
"size": { "field": "weight" }
}
}
x= 출발 노드y= 도착 노드size= 엣지 가중치 (노드 크기에도 반영)
3단계 — thesis 실데이터 검증
실제 thesis DB 데이터로 검증:
| 항목 | 결과 |
|---|---|
| 노드 수 | 114 |
| 엣지 수 | 284 |
| 처리 결과 | ✅ 완전 처리 |
| 레이아웃 | force-directed (자동 수렴) |
| 노드 크기 | 연결 수 기반 자동 계산 |
| 엣지 두께 | 가중치 기반 자동 계산 |
라이브 스크린샷 — hb5u 오프라인 시 EC2 2D 폴백
아래는 thesis-3d viz(https://ers.hyperbook.com/viz/thesis-3d) 네트워크 탭의 실제 화면이다. hb5u가 오프라인 상태이므로 ECharts 2D force-directed 폴백이 활성화된 상태:
Moojoco 오프라인 배너 + 네트워크 탭 활성 + ECharts 노드·엣지 렌더링 확인
thesis-3d 2D 폴백 주입 (커밋 ea70713)
스파이크 결과를 즉시 ers-web에 이식했다:
| 탭 | hb5u online | hb5u offline (EC2 폴백) |
|---|---|---|
| 네트워크 | Three.js 3D | ECharts 2D force-directed |
| 키워드 | Three.js 3D | ECharts 2D force-directed |
| 시냅스 | Three.js 3D | Three.js 3D (변경 없음) |
구현 핵심:
- buildEChartsScene() — Flint 알고리즘 JS 이식
- source === "ec2_fallback" 감지 → canvas 숨김, echarts-wrap 표시
- hb5u 복귀 시 자동으로 3D 복귀 (30초 폴링 유지)
결론
Flint는 Network Graph를 지원한다. 채널 매핑 규칙(x/y/size)만 알면 thesis 실데이터 수준(114노드·284엣지)에서도 완전 동작한다.
thesis-3d 3D 뷰의 hb5u 의존성 리스크를 ECharts 2D 폴백으로 완화했으며, 이 스파이크가 그 기술적 근거다.