<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Power BI Measure Call Graph</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!-- D3.js for visualization -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Power BI Measure Call Graph</h1>
        </header>
        
        <div class="connection-panel">
            <h2>Connect to Analysis Services</h2>
            <div class="connection-form">
                <div class="form-group">
                    <label for="server">Server:</label>
                    <input type="text" id="server" placeholder="localhost">
                </div>
                <div class="form-group">
                    <label for="database">Database:</label>
                    <input type="text" id="database" placeholder="AdventureWorks">
                </div>
            </div>
            <button id="connect-btn">Connect</button>
            <div id="connection-status"></div>
        </div>
        
        <div class="main-content">
            <div class="visualization-container">
                <div class="controls">
                    <button id="reset-btn">Reset View</button>
                    <div class="search-box">
                        <input type="text" id="search-input" placeholder="Search measures...">
                    </div>
                </div>
                <div id="graph-container"></div>
                <div id="graph-container-detail">
                    <h3>Selected Measure Details</h3>
                    <button id="reset-detail-btn" class="reset-btn" title="Reset view">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0z"></path>
                            <path d="M17 12H7"></path>
                            <path d="M12 17V7"></path>
                        </svg>
                    </button>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        setTimeout(function() {
                            const resetDetailBtn = document.getElementById('reset-detail-btn');
                            if (resetDetailBtn) {
                                resetDetailBtn.click();
                            }
                        }, 800);
                        
                        // 添加一个MutationObserver来监视图表内容变化
                        const detailContainer = document.getElementById('graph-container-detail');
                        if (detailContainer) {
                            const observer = new MutationObserver(function(mutations) {
                                const hasContentChanges = mutations.some(mutation => 
                                    mutation.type === 'childList' && 
                                    (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)
                                );
                                
                                if (hasContentChanges) {
                                    setTimeout(function() {
                                        const resetDetailBtn = document.getElementById('reset-detail-btn');
                                        if (resetDetailBtn) {
                                            resetDetailBtn.click();
                                        }
                                    }, 500);
                                }
                            });
                            
                            observer.observe(detailContainer, { 
                                childList: true, 
                                subtree: true 
                            });
                        }
                    });
                </script>
            </div>
            
            <div class="measure-details">
                <h2>Measure Details</h2>
                <div id="measure-name"></div>
                <pre id="measure-expression"></pre>
            </div>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='js/graph.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>