PBI-Measure-CallGraph/static/js/app.js
2025-03-16 01:32:50 +08:00

130 lines
3.7 KiB
JavaScript

/**
* Main application JavaScript for the Power BI Measure Call Graph
*/
// DOM elements
const serverInput = document.getElementById('server');
const databaseInput = document.getElementById('database');
const connectBtn = document.getElementById('connect-btn');
const connectionStatus = document.getElementById('connection-status');
const resetBtn = document.getElementById('reset-btn');
const resetDetailBtn = document.getElementById('reset-detail-btn');
const searchInput = document.getElementById('search-input');
const measureName = document.getElementById('measure-name');
const measureExpression = document.getElementById('measure-expression');
// Graph instance
let graph = null;
// Event listeners
document.addEventListener('DOMContentLoaded', () => {
// Initialize the graph
graph = new Graph('#graph-container');
// Connect button
connectBtn.addEventListener('click', connectToModel);
// Reset button for main graph
resetBtn.addEventListener('click', () => {
if (graph) {
graph.resetView();
}
});
// Reset button for detail graph
resetDetailBtn.addEventListener('click', () => {
if (graph) {
graph.resetDetailView();
}
});
// Search input
searchInput.addEventListener('input', (e) => {
if (graph) {
graph.searchNodes(e.target.value);
}
});
});
/**
* Connect to the Analysis Services model
*/
async function connectToModel() {
const server = serverInput.value.trim() || 'localhost';
const database = databaseInput.value.trim();
if (!database) {
showConnectionStatus('Please enter a database name', 'error');
return;
}
try {
showConnectionStatus('Connecting...', '');
// Connect to the model
const connectResponse = await fetch('/connect', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ server, database })
});
const connectData = await connectResponse.json();
if (!connectData.success) {
showConnectionStatus(`Connection failed: ${connectData.message}`, 'error');
return;
}
showConnectionStatus('Connected successfully. Loading measures...', 'success');
// Get the call graph data
const graphResponse = await fetch('/get_call_graph');
const graphData = await graphResponse.json();
if (!graphData.success) {
showConnectionStatus(`Failed to load graph: ${graphData.message}`, 'error');
return;
}
// Initialize the graph with the data
graph.setData(graphData.graph);
graph.render();
showConnectionStatus('Graph loaded successfully', 'success');
} catch (error) {
showConnectionStatus(`Error: ${error.message}`, 'error');
}
}
/**
* Show connection status message
* @param {string} message - The message to display
* @param {string} type - The message type (success, error, or empty for neutral)
*/
function showConnectionStatus(message, type) {
connectionStatus.textContent = message;
connectionStatus.className = type;
}
/**
* Display measure details
* @param {Object} measure - The measure object
*/
function showMeasureDetails(measure) {
if (!measure) {
measureName.textContent = '';
measureExpression.textContent = '';
return;
}
measureName.textContent = measure.id;
measureExpression.textContent = measure.expression || 'No expression available';
}
// Export functions for use in graph.js
window.appFunctions = {
showMeasureDetails
};