Keep scatter plot icons fixed during zoom

app.py

@@ -177,12 +177,166 @@ const tooltipInterval = setInterval(() => {
 </script>
 """
 
-# JavaScript to handle dark mode for Plotly charts and OpenHands logos
+# JavaScript to handle dark mode for Plotly charts and keep zoomed marker icons a fixed size
 dark_mode_script = """
 <script>
+function getAxisLayoutKeyFromRef(ref) {
+    if (!ref || ref === 'paper' || ref.endsWith(' domain')) {
+        return null;
+    }
+
+    const axisName = ref.split(' ')[0];
+    if (!axisName) {
+        return null;
+    }
+
+    return axisName === 'x' || axisName === 'y'
+        ? `${axisName}axis`
+        : `${axisName[0]}axis${axisName.slice(1)}`;
+}
+
+function getAxisSpan(axis) {
+    if (!axis || !Array.isArray(axis.range) || axis.range.length < 2) {
+        return null;
+    }
+
+    const [start, end] = axis.range;
+    if (axis.type === 'date') {
+        const startMs = new Date(start).getTime();
+        const endMs = new Date(end).getTime();
+        return Number.isFinite(startMs) && Number.isFinite(endMs) ? Math.abs(endMs - startMs) : null;
+    }
+
+    const startNum = Number(start);
+    const endNum = Number(end);
+    return Number.isFinite(startNum) && Number.isFinite(endNum) ? Math.abs(endNum - startNum) : null;
+}
+
+function getAxisSpanForImageRef(plot, ref) {
+    const layoutKey = getAxisLayoutKeyFromRef(ref);
+    if (!layoutKey || !plot?._fullLayout) {
+        return null;
+    }
+    return getAxisSpan(plot._fullLayout[layoutKey]);
+}
+
+function isChartMarkerImage(image) {
+    return typeof image?.source === 'string' && image.source.includes('openhands=chart-marker');
+}
+
+function collectChartMarkerSizing(plot) {
+    const images = plot?._fullLayout?.images || [];
+    const signature = images
+        .map((image) => `${image.source || ''}|${image.xref || ''}|${image.yref || ''}`)
+        .join('||');
+
+    const markers = images
+        .map((image, index) => {
+            if (!isChartMarkerImage(image)) {
+                return null;
+            }
+
+            return {
+                index,
+                xref: image.xref,
+                yref: image.yref,
+                sizex: image.sizex,
+                sizey: image.sizey,
+                baseXSpan: getAxisSpanForImageRef(plot, image.xref),
+                baseYSpan: getAxisSpanForImageRef(plot, image.yref),
+            };
+        })
+        .filter(Boolean);
+
+    plot.__openhandsChartMarkerSizing = { signature, markers };
+}
+
+function updateChartMarkerSizes(plot, { forceReinit = false } = {}) {
+    if (!plot?._fullLayout || plot.__openhandsMarkerRelayoutInFlight) {
+        return;
+    }
+
+    const images = plot._fullLayout.images || [];
+    const signature = images
+        .map((image) => `${image.source || ''}|${image.xref || ''}|${image.yref || ''}`)
+        .join('||');
+
+    if (
+        forceReinit ||
+        !plot.__openhandsChartMarkerSizing ||
+        plot.__openhandsChartMarkerSizing.signature !== signature
+    ) {
+        collectChartMarkerSizing(plot);
+    }
+
+    const markerState = plot.__openhandsChartMarkerSizing;
+    if (!markerState?.markers?.length) {
+        return;
+    }
+
+    const updates = {};
+    markerState.markers.forEach((marker) => {
+        const image = images[marker.index];
+        if (!image) {
+            return;
+        }
+
+        const currentXSpan = getAxisSpanForImageRef(plot, marker.xref);
+        if (Number.isFinite(marker.baseXSpan) && marker.baseXSpan > 0 && Number.isFinite(currentXSpan) && currentXSpan > 0) {
+            const nextSizeX = marker.sizex * (currentXSpan / marker.baseXSpan);
+            if (Math.abs((image.sizex || 0) - nextSizeX) > 1e-9) {
+                updates[`images[${marker.index}].sizex`] = nextSizeX;
+            }
+        }
+
+        const currentYSpan = getAxisSpanForImageRef(plot, marker.yref);
+        if (Number.isFinite(marker.baseYSpan) && marker.baseYSpan > 0 && Number.isFinite(currentYSpan) && currentYSpan > 0) {
+            const nextSizeY = marker.sizey * (currentYSpan / marker.baseYSpan);
+            if (Math.abs((image.sizey || 0) - nextSizeY) > 1e-9) {
+                updates[`images[${marker.index}].sizey`] = nextSizeY;
+            }
+        }
+    });
+
+    if (!Object.keys(updates).length) {
+        return;
+    }
+
+    plot.__openhandsMarkerRelayoutInFlight = true;
+    Promise.resolve(Plotly.relayout(plot, updates)).finally(() => {
+        plot.__openhandsMarkerRelayoutInFlight = false;
+    });
+}
+
+function bindChartMarkerScaling(plot) {
+    if (!plot || plot.__openhandsChartMarkerScalingBound || typeof plot.on !== 'function') {
+        return;
+    }
+
+    plot.on('plotly_relayout', () => {
+        if (!plot.__openhandsMarkerRelayoutInFlight) {
+            window.requestAnimationFrame(() => updateChartMarkerSizes(plot));
+        }
+    });
+
+    plot.on('plotly_afterplot', () => {
+        updateChartMarkerSizes(plot, { forceReinit: true });
+    });
+
+    plot.__openhandsChartMarkerScalingBound = true;
+    updateChartMarkerSizes(plot, { forceReinit: true });
+}
+
+function initializeChartMarkerScaling() {
+    const plots = document.querySelectorAll('.js-plotly-plot');
+    plots.forEach(bindChartMarkerScaling);
+}
+
 function updateChartsForDarkMode() {
     const isDark = document.body.classList.contains('dark');
-    
+
+    initializeChartMarkerScaling();
+
     // Update Plotly chart backgrounds
     const plots = document.querySelectorAll('.js-plotly-plot');
     plots.forEach(plot => {
@@ -196,7 +350,7 @@ function updateChartsForDarkMode() {
             });
         }
     });
-    
+
     // Swap OpenHands logos based on theme
     const images = document.querySelectorAll('.js-plotly-plot image');
     images.forEach(img => {
@@ -210,8 +364,11 @@ function updateChartsForDarkMode() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    setTimeout(updateChartsForDarkMode, 500);
-    
+    setTimeout(() => {
+        initializeChartMarkerScaling();
+        updateChartsForDarkMode();
+    }, 500);
+
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.attributeName === 'class') {
@@ -220,8 +377,11 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
     observer.observe(document.body, { attributes: true });
-    
-    setInterval(updateChartsForDarkMode, 1000);
+
+    setInterval(() => {
+        initializeChartMarkerScaling();
+        updateChartsForDarkMode();
+    }, 1000);
 });
 </script>
 """

leaderboard_transformer.py

@@ -515,7 +515,7 @@ def create_scatter_chart(
             try:
                 with open(logo_path, 'rb') as f:
                     encoded_logo = base64.b64encode(f.read()).decode('utf-8')
-                logo_uri = f"data:image/svg+xml;base64,{encoded_logo}"
+                logo_uri = f"data:image/svg+xml;openhands=chart-marker;base64,{encoded_logo}"
                 
                 if x_type == "date":
                     # For date axes, use data coordinates directly
@@ -1209,7 +1209,7 @@ def _plot_scatter_plotly(
             logger.warning(f"Could not load logo {path}: {e}")
             return None
         mime = "svg+xml" if path.lower().endswith(".svg") else "png"
-        uri = f"data:image/{mime};base64,{encoded}"
+        uri = f"data:image/{mime};openhands=chart-marker;base64,{encoded}"
         _logo_cache[path] = uri
         return uri