97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
// Performance monitor UI component
|
|
|
|
import { debug } from '../utils/debug.js';
|
|
import { createTabbedInterface } from './tabs.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);
|
|
|
|
// Add empty text node (like other buttons)
|
|
button.appendChild(document.createTextNode(''));
|
|
|
|
container.appendChild(button);
|
|
|
|
// Create detailed stats popup with proper positioning
|
|
const popup = document.createElement('div');
|
|
popup.className = 'comfyui-popup profilerx-stats-popup left';
|
|
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: 300px;
|
|
font-size: 12px;
|
|
`;
|
|
container.appendChild(popup);
|
|
|
|
// Toggle popup on click
|
|
button.addEventListener('click', (e) => {
|
|
debug("Button clicked!");
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const isVisible = popup.style.display !== 'none';
|
|
debug("Current popup visibility:", popup.style.display, "isVisible:", isVisible);
|
|
|
|
if (!isVisible) {
|
|
// Position the popup relative to the button
|
|
const rect = button.getBoundingClientRect();
|
|
popup.style.setProperty('--left', `${rect.left}px`);
|
|
popup.style.setProperty('--top', `${rect.bottom}px`);
|
|
popup.style.setProperty('--limit', `${rect.bottom}px`);
|
|
popup.classList.add('open');
|
|
popup.style.display = 'block';
|
|
updateMenuStats(popup);
|
|
} else {
|
|
popup.classList.remove('open');
|
|
popup.style.display = 'none';
|
|
}
|
|
|
|
debug("New popup display:", popup.style.display);
|
|
button.classList.toggle('popup-opened', !isVisible);
|
|
button.classList.toggle('popup-closed', isVisible);
|
|
debug("Button classes after toggle:", button.className);
|
|
});
|
|
|
|
// Close popup when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
debug("Document clicked, checking if outside container");
|
|
if (!container.contains(e.target as Node)) {
|
|
debug("Click was outside container, closing popup");
|
|
popup.style.display = 'none';
|
|
popup.classList.remove('open');
|
|
button.classList.remove('popup-opened');
|
|
button.classList.add('popup-closed');
|
|
} else {
|
|
debug("Click was inside container");
|
|
}
|
|
});
|
|
|
|
return {
|
|
container,
|
|
elements: {
|
|
button,
|
|
popup
|
|
}
|
|
};
|
|
}
|