85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
// Performance monitor UI component
|
|
import { debug } from '../utils/debug.js';
|
|
import { updateMenuStats } from '../utils/tabs.js';
|
|
export function createPerformanceMonitor() {
|
|
debug("Creating performance monitor UI");
|
|
const container = document.createElement('div');
|
|
container.className = 'comfyui-button-wrapper';
|
|
container.style.position = 'relative';
|
|
const button = document.createElement('button');
|
|
button.className = 'comfyui-button primary popup-closed';
|
|
button.title = 'Profiling Stats';
|
|
button.setAttribute('aria-label', 'Profiling Stats');
|
|
// Create icon
|
|
const icon = document.createElement('i');
|
|
icon.className = 'mdi mdi-chart-line';
|
|
button.appendChild(icon);
|
|
button.appendChild(document.createTextNode(''));
|
|
container.appendChild(button);
|
|
// Create detailed stats popup
|
|
const popup = document.createElement('div');
|
|
popup.className = 'comfyui-popup profilerx-stats-popup';
|
|
popup.style.cssText = `
|
|
display: none;
|
|
position: fixed;
|
|
background: var(--comfy-input-bg);
|
|
color: var(--descrip-text);
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
z-index: 9999;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
border: 1px solid var(--border-color);
|
|
min-width: 400px;
|
|
max-width: 600px;
|
|
font-size: 12px;
|
|
`;
|
|
container.appendChild(popup);
|
|
|
|
function positionPopup() {
|
|
const rect = button.getBoundingClientRect();
|
|
// Position below button, right-aligned to button's right edge
|
|
const top = rect.bottom + 4;
|
|
let left = rect.right - popup.offsetWidth;
|
|
// Keep within viewport
|
|
if (left < 8) left = 8;
|
|
popup.style.top = top + 'px';
|
|
popup.style.left = left + 'px';
|
|
}
|
|
|
|
// Toggle popup on click
|
|
button.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const isVisible = popup.style.display !== 'none';
|
|
if (!isVisible) {
|
|
popup.style.display = 'block';
|
|
positionPopup();
|
|
popup.classList.add('open');
|
|
updateMenuStats(popup);
|
|
} else {
|
|
popup.classList.remove('open');
|
|
popup.style.display = 'none';
|
|
}
|
|
button.classList.toggle('popup-opened', !isVisible);
|
|
button.classList.toggle('popup-closed', isVisible);
|
|
});
|
|
// Close popup when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!container.contains(e.target)) {
|
|
popup.style.display = 'none';
|
|
popup.classList.remove('open');
|
|
button.classList.remove('popup-opened');
|
|
button.classList.add('popup-closed');
|
|
}
|
|
});
|
|
return {
|
|
container,
|
|
elements: {
|
|
button,
|
|
popup
|
|
}
|
|
};
|
|
}
|