kcg-ai-monitoring/frontend
htlee 17215be29c feat: System Flow 뷰어 — 포커스 모드 + 엣지 겹침 완화
## 포커스 모드
- 노드 선택 시 해당 노드 + 1-hop 연결된 노드만 활성
- 나머지 노드는 opacity 0.18 + grayscale, 엣지는 0.08로 dim 처리
- 상단 중앙 배지로 포커스 상태 표시 + "전체 보기 ✕" 해제 버튼
- 캔버스 빈 공간(pane) 클릭 시 포커스 해제
- 선택 노드는 스케일 1.02 + glow 효과로 강조

## 엣지 겹침 완화
- COL_WIDTH 360 → 440, ROW_HEIGHT 130 → 170 (간격 확대)
- smoothstep pathOptions.offset을 source별로 20→34→48... 분산
- 같은 노드에서 나가는 N번째 엣지는 서로 다른 경로로 라우팅
- 선택/포커스된 엣지는 zIndex 1000으로 최상단 표시

## 시각 보강
- 포커스된 엣지는 stroke #f8fafc + strokeWidth 2.8 + animated
- 비활성 엣지 라벨은 opacity 0.3, 텍스트 #475569로 어둡게
- 선택 노드 body: box-shadow + glow + scale 1.02

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-08 05:47:51 +09:00
..
src feat: System Flow 뷰어 — 포커스 모드 + 엣지 겹침 완화 2026-04-08 05:47:51 +09:00
.node-version refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
.npmrc refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
.prettierignore refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
.prettierrc refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
eslint.config.js refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
index.html refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
package-lock.json feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
package.json feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
postcss.config.mjs refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
system-flow.html feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00
tsconfig.json refactor: 모노레포 구조로 전환 (frontend/ + backend/ + database/) 2026-04-07 08:47:24 +09:00
vite.config.ts feat: System Flow 뷰어 추가 (system-flow.html) — 102 노드, 133 엣지 2026-04-07 17:10:22 +09:00