대시보드 안정화 작업중

npc_social_network/templates/dashboard.html

@@ -9,12 +9,12 @@
         /* 기본 스타일 및 변수 */
         :root { --bg-color: #f0f2f5; --panel-bg-color: #ffffff; --border-color: #2c3e50; --border-color: #dee2e6; --shadow: 0 4px 6px rgba(0,0,0,0.05); --primary-color: #007bff; --success-color: #28a745; --info-color: #17a2b8; --secondary-color: #6c757d; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; height: 100vh; margin: 0; background-color: var(--bg-color); }
-        #main-container { display: flex; flex: 1; padding: 15px; gap: 15px; }
-        #network-panel { flex: 3; display: flex; flex-direction: column; background: var(--panel-bg-color); border-radius: 12px; box-shadow: var(--shadow); }
-        #network { width: 100%; flex: 1; border-bottom: 1px solid var(--border-color); }
+        #main-container { display: flex; flex: 1; padding: 15px; gap: 15px; min-height: 0;}
+        #network-panel { flex: 3; display: flex; flex-direction: column; background: var(--panel-bg-color); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; }
+        #network { width: 100%; flex: 1; border-bottom: 1px solid var(--border-color); min-height: 0; }
         
         /* 전체 컨트롤 패널 (가장 바깥쪽) */
-        #controls { padding: 15px; display: flex; flex-direction: column; gap: 15px; background-color: #3e3f41; border-radius: 0 0 12px 12px;}
+        #controls { flex-shrink: 0; padding: 12px; display: flex; flex-direction: column; gap: 15px; background-color: #3e3f41; border-radius: 0 0 12px 12px;}
         
         /* 메인 컨트롤 버튼 */
         #main-controls { display: flex; gap: 10px; justify-content: flex-start;}
@@ -57,6 +57,7 @@
                     <button id="play-pause-btn">Play / Pause</button>
                     <button id="tick-btn">Next Tick</button>
                     <button id="refresh-btn">⟳ 새로고침</button>
+                    <button id="fit-btn">관계도 보기</button>
                 </div>
                 <!-- 개입 기능 선택 -->
                 <div id="intervention-area" style="display: flex; gap: 15px; align-items: flex-start;">
@@ -118,6 +119,7 @@
             const playPauseBtn = document.getElementById('play-pause-btn');
             const tickBtn = document.getElementById('tick-btn');
             const refreshBtn = document.getElementById('refresh-btn');
+            const fitBtn = document.getElementById('fit-btn')
             // 개입 기능 선택
             const tabEvent = document.getElementById('tab-event');
             const tabRelation = document.getElementById('tab-relation');
@@ -146,12 +148,18 @@
             let autoUpdateInterval = null;
 
             const options = {
-                physics: { stabilization: false, solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -80, springLength: 150, springConstant: 0.08 } },
-                nodes: { borderWidth: 2, size: 30, font: { size: 14, color: '#333' } },
-                edges: { font: { align: 'middle', size: 11, strokeWidth: 3, strokeColor: 'white' }, smooth: { type: 'cubicBezier' } },
-                interaction: { hover: true }
+                physics: { stabilization: {iterations: 1000}, solver: 'forceAtlas2Based', forceAtlas2Based: { gravitationalConstant: -80, springLength: 150, springConstant: 0.08 } },
+                nodes: { borderWidth: 2, shape: 'circularImage', size: 30, font: { size: 14, color: '#333' } },
+                edges: { width: 2, font: { align: 'top', size: 11, strokeWidth: 3, strokeColor: 'white' }, smooth: { type: 'cubicBezier' } },
+                interaction: { hover: true, zoomView: true, dragView: true, minZoom: 0.2, maxZoom: 4.0 }
             };
 
+            fitBtn.addEventListener('click', () => {
+                if (network) {
+                    network.fit();
+                }
+            });
+
             // 탭 버튼 클릭 이벤트
             tabEvent.addEventListener('click', () =>{
                 tabEvent.classList.add('active');
@@ -212,7 +220,7 @@
                         // --- [수정된 부분 시작] ---
                         // 물리 시뮬레이션이 안정화되면 물리 효과를 비활성화하여 노드 움직임을 멈춥니다.
                         network.on("stabilizationIterationsDone", function () {
-                            network.setOptions( { physics: false } );
+                            network.setOptions({ physics: false, interaction: { hover: true, zoomView: true, dragView: true, minZoom: 0.5, maxZoom: 2.0 }});
                         });
                     }