/**
* Metric Modal JavaScript
* Handles modal open/close, tab switching, and metric data loading
*/
// Global state
let currentMetricPath = null;
let currentMetricData = null;
/**
* Open metric modal and load data
* @param {string} metricPath - Path to metric YAML (e.g., 'finance/infra_cost.yml') or catalog FQN (e.g., 'catalog:...')
*/
function openMetricModal(metricPath) {
currentMetricPath = metricPath;
const overlay = document.getElementById('metricModalOverlay');
const body = document.getElementById('metricModalBody');
// Show modal
overlay.classList.add('active');
document.body.style.overflow = 'hidden';
// Show loading state
body.innerHTML = '
Loading metric...
';
// Route based on prefix: catalog:FQN uses /api/catalog/metrics, YAML paths use /api/metrics
let url;
if (metricPath.startsWith('catalog:')) {
const fqn = metricPath.slice(8); // Remove 'catalog:' prefix
url = `/api/catalog/metrics/${encodeURIComponent(fqn)}`; // URL-encode FQN
} else {
url = `/api/metrics/${metricPath}`;
}
// Fetch metric data
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
.then(data => {
currentMetricData = data;
renderMetricModal(data);
})
.catch(error => {
console.error('Error loading metric:', error);
body.innerHTML = `
Failed to load metric: ${error.message}
`;
});
}
/**
* Close metric modal
*/
function closeMetricModal() {
const overlay = document.getElementById('metricModalOverlay');
overlay.classList.remove('active');
document.body.style.overflow = '';
currentMetricPath = null;
currentMetricData = null;
}
/**
* Switch between tabs
* @param {string} tabId - Tab identifier
*/
function switchMetricTab(tabId) {
// Update tab buttons
document.querySelectorAll('.metric-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
// Update tab content
document.querySelectorAll('.metric-tab-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(tabId).classList.add('active');
}
/**
* Render metric modal content
* @param {Object} data - Metric data from API
*/
function renderMetricModal(data) {
const modal = document.getElementById('metricModal');
const titleElement = document.getElementById('metricModalTitle');
const metadataElement = document.getElementById('metricModalMetadata');
const body = document.getElementById('metricModalBody');
// Set category class for tab coloring
const categoryClass = `category-${data.category}`;
modal.setAttribute('data-category', data.category);
// Set title and metadata (with technical name)
titleElement.innerHTML = `