fix url, fix mermaid zoom perfs, fix model perfs hover

app/public/hf-space-parent-listener.js

@@ -0,0 +1,70 @@
+/**
+ * Script pour la fenêtre parente des Spaces Hugging Face
+ * Ce script écoute les messages de l'iframe et met à jour l'URL de la fenêtre parente
+ * 
+ * Instructions d'utilisation :
+ * 1. Ajoutez ce script à votre Space Hugging Face dans le fichier app.py ou dans un composant Gradio
+ * 2. Ou utilisez-le dans une page HTML qui contient votre iframe
+ */
+
+(function () {
+    'use strict';
+
+    console.log('HF Space Parent Listener initialized');
+
+    // Écouter les messages de l'iframe
+    window.addEventListener('message', function (event) {
+        console.log('Received message from iframe:', event.data);
+
+        // Vérifier le type de message
+        if (event.data && event.data.type) {
+            switch (event.data.type) {
+                case 'urlChange':
+                case 'anchorChange':
+                case 'HF_SPACE_URL_UPDATE':
+                    handleUrlChange(event.data);
+                    break;
+                default:
+                    console.log('Unknown message type:', event.data.type);
+            }
+        }
+    });
+
+    function handleUrlChange(data) {
+        try {
+            const hash = data.hash || data.anchorId;
+            const url = data.url;
+
+            if (hash) {
+                // Mettre à jour l'URL avec la nouvelle ancre
+                const newUrl = new URL(window.location);
+                newUrl.hash = hash;
+
+                // Utiliser replaceState pour éviter d'ajouter une entrée dans l'historique
+                window.history.replaceState(null, '', newUrl.toString());
+
+                console.log('Updated parent URL to:', newUrl.toString());
+
+                // Optionnel : faire défiler vers l'élément correspondant dans la page parente
+                const targetElement = document.querySelector(hash);
+                if (targetElement) {
+                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            }
+        } catch (error) {
+            console.error('Error updating parent URL:', error);
+        }
+    }
+
+    // Fonction utilitaire pour tester la communication
+    window.testIframeCommunication = function () {
+        console.log('Testing iframe communication...');
+        const iframe = document.querySelector('iframe');
+        if (iframe) {
+            iframe.contentWindow.postMessage({ type: 'test' }, '*');
+        } else {
+            console.log('No iframe found');
+        }
+    };
+
+})();

app/src/components/TableOfContents.astro

@@ -513,20 +513,67 @@ const { tableOfContentAutoCollapse = false } = Astro.props as Props;
       if (window.location.href !== newUrl) {
         history.pushState(null, null, newUrl);
 
-        // Communiquer avec l'iframe parent (pour les Spaces HF)
+        // Essayer différentes méthodes pour communiquer avec la fenêtre parente
         if (window.parent !== window) {
           try {
-            window.parent.postMessage(
+            // Méthode 1: Essayer de modifier directement l'URL du parent (si autorisé)
+            try {
+              window.parent.location.hash = headingId;
+              console.debug("Successfully updated parent URL directly");
+              return;
+            } catch (e) {
+              console.debug("Direct parent URL update blocked:", e.message);
+            }
+
+            // Méthode 2: Utiliser postMessage avec différents formats
+            const messages = [
               {
                 type: "urlChange",
                 url: newUrl,
                 hash: headingId,
               },
-              "*",
-            );
+              {
+                type: "anchorChange",
+                anchorId: headingId,
+                url: newUrl,
+              },
+              {
+                type: "HF_SPACE_URL_UPDATE",
+                hash: headingId,
+                url: newUrl,
+              },
+            ];
+
+            messages.forEach((msg) => {
+              try {
+                window.parent.postMessage(msg, "*");
+              } catch (e) {
+                console.debug("PostMessage failed:", e.message);
+              }
+            });
+
+            // Méthode 3: Essayer avec l'origine spécifique si on peut la détecter
+            try {
+              const parentOrigin = window.parent.location.origin;
+              window.parent.postMessage(
+                {
+                  type: "urlChange",
+                  url: newUrl,
+                  hash: headingId,
+                },
+                parentOrigin,
+              );
+            } catch (e) {
+              console.debug(
+                "PostMessage with specific origin failed:",
+                e.message,
+              );
+            }
           } catch (e) {
-            // Ignorer les erreurs de communication avec le parent
-            console.debug("Could not communicate with parent window:", e);
+            console.debug(
+              "All parent communication methods failed:",
+              e.message,
+            );
           }
         }
       }

app/src/content/embeds/base-model-performance.html

@@ -455,7 +455,7 @@
                     tooltip.innerHTML = `
             <div class="tooltip-title">${model.name}</div>
             <div class="tooltip-row">
-              <span class="tooltip-label">Taille:</span>
+              <span class="tooltip-label">Size:</span>
               <span class="tooltip-value">${model.size.toFixed(1)}B params</span>
             </div>
             <div class="tooltip-row">
@@ -463,7 +463,7 @@
               <span class="tooltip-value">${model.winRate.toFixed(1)}%</span>
             </div>
             <div class="tooltip-row">
-              <span class="tooltip-label">Efficacité:</span>
+              <span class="tooltip-label">Efficiency:</span>
               <span class="tooltip-value">${(model.winRate / model.size).toFixed(2)} pts/B</span>
             </div>
           `;

app/src/scripts/mermaid-zoom-optimized.js

@@ -0,0 +1,294 @@
+/**
+ * Mermaid Zoom Integration - Version Optimisée
+ * Système léger pour beaucoup de diagrammes Mermaid
+ */
+
+console.log("🚀 Mermaid Zoom Script v16.0 loaded - OPTIMIZED for many diagrams");
+
+// Cache pour les images générées
+const imageCache = new Map();
+
+// Fonction pour appliquer les styles Mermaid au SVG selon le thème
+function applyMermaidStylesToSvg(svgElement) {
+    try {
+        const isDark = document.documentElement.getAttribute("data-theme") === "dark";
+
+        // Couleurs selon le thème
+        const colors = isDark ? {
+            nodeFill: '#1a1a1a',
+            nodeStroke: '#ffffff',
+            clusterFill: '#2a2a2a',
+            clusterStroke: '#ffffff',
+            pathStroke: '#ffffff',
+            textColor: '#ffffff'
+        } : {
+            nodeFill: '#ffffff',
+            nodeStroke: '#333333',
+            clusterFill: '#f9f9f9',
+            clusterStroke: '#333333',
+            pathStroke: '#333333',
+            textColor: '#333333'
+        };
+
+        // Appliquer border-radius et couleurs
+        const rects = svgElement.querySelectorAll('rect:not(.flowchart-link), .node rect, .nodeLabel rect');
+        rects.forEach(rect => {
+            rect.setAttribute('rx', '8');
+            rect.setAttribute('ry', '8');
+            rect.setAttribute('fill', colors.nodeFill);
+            rect.setAttribute('stroke', colors.nodeStroke);
+        });
+
+        const clusterRects = svgElement.querySelectorAll('.cluster rect');
+        clusterRects.forEach(rect => {
+            rect.setAttribute('rx', '8');
+            rect.setAttribute('ry', '8');
+            rect.setAttribute('fill', colors.clusterFill);
+            rect.setAttribute('stroke', colors.clusterStroke);
+        });
+
+        const paths = svgElement.querySelectorAll('.edgePath');
+        paths.forEach(path => {
+            path.setAttribute('stroke', colors.pathStroke);
+        });
+
+        const textElements = svgElement.querySelectorAll('text, .nodeLabel text, .edgeLabel text');
+        textElements.forEach(text => {
+            text.setAttribute('fill', colors.textColor);
+        });
+
+    } catch (error) {
+        console.error('❌ Error applying styles to SVG:', error);
+    }
+}
+
+// Fonction pour générer une clé de cache unique
+function getCacheKey(svgElement, theme) {
+    const svgContent = svgElement.outerHTML;
+    const hash = svgContent.length + svgContent.slice(0, 100);
+    return `${hash}-${theme}`;
+}
+
+// Fonction pour convertir SVG en image (avec cache)
+function convertSvgToImageCached(svgElement, wrapper, theme) {
+    const cacheKey = getCacheKey(svgElement, theme);
+
+    // Vérifier le cache
+    if (imageCache.has(cacheKey)) {
+        console.log(`📦 Using cached image for theme: ${theme}`);
+        return imageCache.get(cacheKey);
+    }
+
+    try {
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const wrapperWidth = Math.round(wrapperRect.width);
+        const wrapperHeight = Math.round(wrapperRect.height);
+
+        // Cloner le SVG
+        const clonedSvg = svgElement.cloneNode(true);
+        applyMermaidStylesToSvg(clonedSvg);
+
+        // Créer une image 2x plus grande pour le zoom
+        const zoomFactor = 2;
+        const imageWidth = wrapperWidth * zoomFactor;
+        const imageHeight = wrapperHeight * zoomFactor;
+
+        clonedSvg.setAttribute('width', imageWidth);
+        clonedSvg.setAttribute('height', imageHeight);
+
+        // Créer l'URL de l'image
+        const svgData = new XMLSerializer().serializeToString(clonedSvg);
+        const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        const svgUrl = URL.createObjectURL(svgBlob);
+
+        // Créer l'élément image
+        const imgElement = document.createElement('img');
+        imgElement.src = svgUrl;
+        imgElement.style.width = `${wrapperWidth}px`;
+        imgElement.style.height = `${wrapperHeight}px`;
+        imgElement.style.display = 'block';
+        imgElement.setAttribute('data-zoomable', '1');
+        imgElement.classList.add('mermaid-zoom-image');
+
+        const result = {
+            imgElement,
+            svgUrl,
+            dimensions: { wrapperWidth, wrapperHeight, imageWidth, imageHeight }
+        };
+
+        // Mettre en cache
+        imageCache.set(cacheKey, result);
+        console.log(`💾 Cached image for theme: ${theme}`);
+
+        return result;
+
+    } catch (error) {
+        console.error("❌ Error converting SVG to image:", error);
+        return null;
+    }
+}
+
+// Fonction pour initialiser le zoom sur un diagramme Mermaid
+function initMermaidZoom(mermaidEl, index) {
+    // Vérifier si déjà wrappé
+    if (mermaidEl.parentElement?.classList.contains("mermaid-zoom-wrapper")) {
+        return;
+    }
+
+    console.log(`📦 Setting up zoom for Mermaid ${index}`);
+
+    // Créer le wrapper
+    const wrapper = document.createElement("div");
+    wrapper.className = "mermaid-zoom-wrapper";
+    wrapper.setAttribute("data-zoomable", "1");
+    wrapper.style.display = "block";
+    wrapper.style.width = "100%";
+    wrapper.style.maxWidth = "100%";
+
+    // Insérer le wrapper avant l'élément Mermaid
+    mermaidEl.parentNode.insertBefore(wrapper, mermaidEl);
+    wrapper.appendChild(mermaidEl);
+
+    // Ajouter l'événement de clic (conversion à la demande)
+    wrapper.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const svgElement = mermaidEl.querySelector("svg");
+        if (!svgElement) return;
+
+        const currentTheme = document.documentElement.getAttribute("data-theme");
+        console.log(`🖱️ Mermaid ${index} clicked, converting for zoom`);
+
+        // Convertir l'image (avec cache)
+        const result = convertSvgToImageCached(svgElement, wrapper, currentTheme);
+        if (!result) return;
+
+        // Remplacer le contenu par l'image
+        wrapper.innerHTML = '';
+        wrapper.appendChild(result.imgElement);
+
+        // Initialiser medium-zoom
+        const isDark = currentTheme === "dark";
+        const background = isDark ? "rgba(0,0,0,.9)" : "rgba(0,0,0,.85)";
+
+        const zoomInstance = window.mediumZoom(result.imgElement, {
+            background,
+            margin: 24,
+            scrollOffset: 0,
+        });
+
+        console.log(`🎉 Zoom initialized for Mermaid ${index}`);
+
+        // Forcer les z-index élevés
+        const forceZIndex = () => {
+            const overlay = document.querySelector('.medium-zoom-overlay');
+            const zoomedImage = document.querySelector('.medium-zoom-image--opened');
+
+            if (overlay) {
+                overlay.style.zIndex = '9999999';
+                overlay.style.setProperty('z-index', '9999999', 'important');
+            }
+
+            if (zoomedImage) {
+                zoomedImage.style.zIndex = '10000000';
+                zoomedImage.style.setProperty('z-index', '10000000', 'important');
+                zoomedImage.style.filter = 'none';
+                zoomedImage.style.setProperty('filter', 'none', 'important');
+            }
+        };
+
+        // Écouter les événements de zoom
+        result.imgElement.addEventListener('zoom:open', forceZIndex);
+        result.imgElement.addEventListener('zoom:opened', forceZIndex);
+
+        // Observer pour forcer les styles
+        const observer = new MutationObserver(forceZIndex);
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        // Nettoyer l'observer après 5 secondes
+        setTimeout(() => observer.disconnect(), 5000);
+    });
+}
+
+// Fonction principale optimisée
+function setupMermaidZoomOptimized() {
+    const mermaidElements = document.querySelectorAll(".mermaid");
+    console.log(`🔍 Found ${mermaidElements.length} Mermaid elements`);
+
+    mermaidElements.forEach((mermaidEl, index) => {
+        initMermaidZoom(mermaidEl, index);
+    });
+}
+
+// Observer global optimisé (un seul observer pour tout)
+function setupGlobalObserver() {
+    const observer = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+                // Vérifier si de nouveaux diagrammes Mermaid ont été ajoutés
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === 1) { // Element node
+                        if (node.classList?.contains('mermaid') ||
+                            node.querySelector?.('.mermaid')) {
+                            shouldUpdate = true;
+                        }
+                    }
+                });
+            }
+        });
+
+        if (shouldUpdate) {
+            console.log(`🔄 New Mermaid diagrams detected, updating...`);
+            setTimeout(setupMermaidZoomOptimized, 100);
+        }
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+
+    console.log(`👁️ Global observer started`);
+}
+
+// Initialisation optimisée
+function initMermaidZoomOptimized() {
+    console.log("🎯 Initializing optimized Mermaid zoom");
+
+    // Attendre que mediumZoom soit disponible
+    const checkMediumZoom = () => {
+        if (window.mediumZoom) {
+            console.log("✅ mediumZoom found, initializing optimized Mermaid zoom");
+            setupMermaidZoomOptimized();
+            setupGlobalObserver();
+        } else {
+            console.log("⏳ Waiting for mediumZoom...");
+            setTimeout(checkMediumZoom, 100);
+        }
+    };
+
+    checkMediumZoom();
+}
+
+// Auto-initialisation
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initMermaidZoomOptimized);
+} else {
+    initMermaidZoomOptimized();
+}
+
+// Aussi après le chargement complet
+window.addEventListener("load", () => {
+    setTimeout(initMermaidZoomOptimized, 1000);
+});
+
+// Nettoyer le cache périodiquement (éviter les fuites mémoire)
+setInterval(() => {
+    if (imageCache.size > 20) {
+        console.log(`🧹 Cleaning image cache (${imageCache.size} items)`);
+        imageCache.clear();
+    }
+}, 60000); // Toutes les minutes

app/src/scripts/mermaid-zoom.js

@@ -9,27 +9,29 @@ function applyMermaidStylesToSvg(svgElement) {
         const isDark = document.documentElement.getAttribute("data-theme") === "dark";
         console.log(`🎨 Applying Mermaid styles for theme: ${isDark ? 'dark' : 'light'}`);
 
-        // Couleurs selon le thème
+        // Couleurs selon le thème - avec plus de contraste pour le zoom
         const colors = isDark ? {
             nodeFill: '#1a1a1a',
             nodeStroke: '#ffffff',
-            nodeStrokeWidth: '1',
+            nodeStrokeWidth: '2', // Plus épais pour plus de visibilité
             clusterFill: '#2a2a2a',
             clusterStroke: '#ffffff',
-            clusterStrokeWidth: '1',
+            clusterStrokeWidth: '2',
             pathStroke: '#ffffff',
-            pathStrokeWidth: '1',
-            textColor: '#ffffff'
+            pathStrokeWidth: '2', // Plus épais pour les flèches
+            textColor: '#ffffff',
+            linkColor: '#ffffff' // Couleur spécifique pour les liens
         } : {
             nodeFill: '#ffffff',
-            nodeStroke: '#333333',
-            nodeStrokeWidth: '1',
+            nodeStroke: '#000000', // Noir pur pour plus de contraste
+            nodeStrokeWidth: '2',
             clusterFill: '#f9f9f9',
-            clusterStroke: '#333333',
-            clusterStrokeWidth: '1',
-            pathStroke: '#333333',
-            pathStrokeWidth: '1',
-            textColor: '#333333'
+            clusterStroke: '#000000', // Noir pur
+            clusterStrokeWidth: '2',
+            pathStroke: '#000000', // Noir pur pour les flèches
+            pathStrokeWidth: '2',
+            textColor: '#000000', // Noir pur
+            linkColor: '#000000' // Noir pur pour les liens
         };
 
         // Appliquer border-radius aux rectangles
@@ -74,19 +76,33 @@ function applyMermaidStylesToSvg(svgElement) {
             }
         });
 
-        // Appliquer les couleurs aux chemins
-        const paths = svgElement.querySelectorAll('.edgePath');
+        // Appliquer les couleurs aux chemins et flèches
+        const paths = svgElement.querySelectorAll('.edgePath, path, .flowchart-link');
         paths.forEach(path => {
             path.setAttribute('stroke', colors.pathStroke);
             path.setAttribute('stroke-width', colors.pathStrokeWidth);
         });
 
+        // Appliquer les couleurs aux liens spécifiquement
+        const links = svgElement.querySelectorAll('.flowchart-link, .edgeLabel');
+        links.forEach(link => {
+            link.setAttribute('stroke', colors.linkColor);
+            link.setAttribute('fill', colors.linkColor);
+        });
+
         // Appliquer les couleurs au texte
         const textElements = svgElement.querySelectorAll('text, .nodeLabel text, .edgeLabel text');
         textElements.forEach(text => {
             text.setAttribute('fill', colors.textColor);
         });
 
+        // Appliquer les couleurs aux marqueurs de flèches
+        const markers = svgElement.querySelectorAll('marker, marker path');
+        markers.forEach(marker => {
+            marker.setAttribute('fill', colors.pathStroke);
+            marker.setAttribute('stroke', colors.pathStroke);
+        });
+
         console.log(`🎨 Applied Mermaid styles: ${rects.length} rects, ${clusters.length} clusters, ${paths.length} paths, ${textElements.length} text elements`);
 
     } catch (error) {
@@ -199,26 +215,41 @@ function convertSvgToImagePreservingDimensions(svgElement, wrapper, originalMerm
         // Appliquer les styles Mermaid
         applyMermaidStylesToSvg(clonedSvg);
 
-        // Forcer les dimensions exactes du wrapper sur le SVG
-        clonedSvg.setAttribute('width', wrapperWidth);
-        clonedSvg.setAttribute('height', wrapperHeight);
-        clonedSvg.style.width = `${wrapperWidth}px`;
-        clonedSvg.style.height = `${wrapperHeight}px`;
+        // Créer une image PLUS GRANDE pour permettre un vrai zoom (2x la taille)
+        const zoomFactor = 2;
+        const imageWidth = wrapperWidth * zoomFactor;
+        const imageHeight = wrapperHeight * zoomFactor;
+
+        // Forcer les dimensions plus grandes sur le SVG
+        clonedSvg.setAttribute('width', imageWidth);
+        clonedSvg.setAttribute('height', imageHeight);
+        clonedSvg.style.width = `${imageWidth}px`;
+        clonedSvg.style.height = `${imageHeight}px`;
+
+        console.log(`🔍 Creating zoomable image:`, {
+            original: { width: wrapperWidth, height: wrapperHeight },
+            zoomed: { width: imageWidth, height: imageHeight },
+            factor: zoomFactor
+        });
 
         // Créer une URL data pour le SVG
         const svgData = new XMLSerializer().serializeToString(clonedSvg);
         const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
         const svgUrl = URL.createObjectURL(svgBlob);
 
-        // Créer un élément img avec les MÊMES dimensions que le wrapper
+        // Créer un élément img avec les dimensions du wrapper (affichage normal)
         const imgElement = document.createElement('img');
         imgElement.src = svgUrl;
-        imgElement.style.width = `${wrapperWidth}px`;
-        imgElement.style.height = `${wrapperHeight}px`;
+        imgElement.style.width = `${wrapperWidth}px`;  // Affichage normal
+        imgElement.style.height = `${wrapperHeight}px`; // Affichage normal
         imgElement.style.display = 'block';
         imgElement.setAttribute('data-zoomable', '1');
         imgElement.classList.add('mermaid-zoom-image'); // Classe spécifique pour Mermaid
 
+        // Ajouter les attributs pour medium-zoom (dimensions réelles de l'image)
+        imgElement.setAttribute('data-zoom-width', imageWidth);
+        imgElement.setAttribute('data-zoom-height', imageHeight);
+
         console.log(`🖼️ Image created with exact dimensions:`, { width: wrapperWidth, height: wrapperHeight });
 
         // Remplacer le contenu du wrapper par l'image
@@ -691,7 +722,7 @@ function setupMermaidZoom() {
             } else {
                 console.log(`❌ No SVG found in Mermaid element ${index}`);
             }
-        }, 2000);
+        }, 1000); // Réduit de 2000ms à 1000ms pour être plus rapide
     });
 }
 
@@ -778,7 +809,7 @@ window.addEventListener("load", () => {
 
 // Observer simple pour les nouveaux diagrammes Mermaid
 const observer = new MutationObserver(() => {
-    setTimeout(initMermaidZoom, 500);
+    setTimeout(initMermaidZoom, 200); // Réduit de 500ms à 200ms
 });
 
 observer.observe(document.body, {
@@ -786,4 +817,4 @@ observer.observe(document.body, {
     subtree: true,
 });
 
-console.log("🚀 Mermaid Zoom Script v14.0 loaded - REAL medium-zoom with JavaScript z-index fix");
+console.log("🚀 Mermaid Zoom Script v18.0 loaded - Enhanced contrast for arrows and links");