lucasacchi/llm-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix model details modal interactions and scrolling

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-25 14:05:11 +02:00
parent 87ebd35ad5
commit eea6e2a80e
2 changed files with 51 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/static/js/app.js
+28 -2
View File
@@ -7,6 +7,7 @@ class LLMMonitorApp {
constructor() {
this.worker = null;
this.selectedModelName = null;
this.isModalOpen = false;
this.hoverOpenDelayMs = 180;
this.hoverOpenTimer = null;
this.lastData = {
@@ -175,15 +176,20 @@ class LLMMonitorApp {
bindModelCardInteractions() {
const cards = document.querySelectorAll("#models-container [data-model-key]");
cards.forEach((card) => {
if (card.dataset.modalBound === "true") {
return;
}
const modelKey = card.getAttribute("data-model-key");
if (!modelKey) {
return;
}
const modelName = decodeURIComponent(modelKey);
card.dataset.modalBound = "true";
card.addEventListener("click", () => {
this.showModelDetails(modelName);
this.toggleModelDetails(modelName);
});
card.addEventListener("mouseenter", () => {
@@ -205,6 +211,15 @@ class LLMMonitorApp {
});
}
toggleModelDetails(modelName) {
if (this.isModalOpen && this.selectedModelName === modelName) {
this.hideModelDetails();
return;
}
this.showModelDetails(modelName);
}
// Renderizzare singola card modello
renderModelCard(model) {
const formattedDate = this.formatDate(model.modified_at);
@@ -237,20 +252,25 @@ class LLMMonitorApp {
showModelDetails(modelName) {
const detailsModal = document.getElementById("model-details-modal");
const detailsDialog = document.getElementById("model-details-dialog");
const detailsName = document.getElementById("model-details-name");
const detailsContent = document.getElementById("model-details-content");
if (!detailsModal || !detailsName || !detailsContent || !this.lastData.models) {
if (!detailsModal || !detailsDialog || !detailsName || !detailsContent || !this.lastData.models) {
return;
}
const showByModel = this.lastData.models.showByModel || {};
const showData = showByModel[modelName];
this.selectedModelName = modelName;
this.isModalOpen = true;
detailsModal.classList.remove("hidden");
detailsModal.classList.add("flex");
detailsDialog.classList.add("flex");
document.body.classList.add("overflow-hidden");
detailsName.textContent = modelName;
detailsModal.setAttribute("aria-hidden", "false");
if (!showData) {
detailsContent.textContent = "Dettagli show non disponibili per questo modello.";
@@ -262,12 +282,18 @@ class LLMMonitorApp {
hideModelDetails() {
const detailsModal = document.getElementById("model-details-modal");
const detailsDialog = document.getElementById("model-details-dialog");
if (!detailsModal || detailsModal.classList.contains("hidden")) {
return;
}
detailsModal.classList.add("hidden");
detailsModal.classList.remove("flex");
detailsDialog?.classList.remove("flex");
document.body.classList.remove("overflow-hidden");
detailsModal.setAttribute("aria-hidden", "true");
this.isModalOpen = false;
this.selectedModelName = null;
}
// Formattare bytes