<!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>