Upload index.html with huggingface_hub

index.html

@@ -940,6 +940,8 @@
         this.id = id;
         this.el = {};
         this.collapsed = false;
+        this._zoomXRange = null;
+        this._zoomYRange = null;
         this.build();
       }
 
@@ -1681,12 +1683,15 @@
           hoverlabel: { namelength: -1 },
           xaxis: {
             title: { text: 'Tokens Trained', font: { size: 12 } },
-            tickfont: { size: 10 }, tickvals: tickVals, ticktext: formatTokensArray(tickVals),
+            tickfont: { size: 10 }, tickvals: this._zoomXRange ? niceTicks(this._zoomXRange[0], this._zoomXRange[1], maxXTicks) : tickVals,
+            ticktext: formatTokensArray(this._zoomXRange ? niceTicks(this._zoomXRange[0], this._zoomXRange[1], maxXTicks) : tickVals),
             gridcolor: '#e9ecef', zeroline: false,
+            ...(this._zoomXRange ? { range: [...this._zoomXRange], autorange: false } : {}),
           },
           yaxis: {
             title: { text: 'Score', font: { size: 12 } },
-            tickfont: { size: 10 }, gridcolor: '#e9ecef', zeroline: false, autorange: true,
+            tickfont: { size: 10 }, gridcolor: '#e9ecef', zeroline: false,
+            ...(this._zoomYRange ? { range: [...this._zoomYRange], autorange: false } : { autorange: true }),
           },
           legend: { orientation: 'h', yanchor: 'top', y: -0.15, x: 0, font: { size: 11 } },
           margin: { t: 50, r: 20, b: 100, l: 50 },
@@ -1704,8 +1709,16 @@
           const r0 = evt['xaxis.range[0]'];
           const r1 = evt['xaxis.range[1]'];
           if (r0 != null && r1 != null) {
+            // User zoomed/panned — save the range
+            this._zoomXRange = [r0, r1];
+            const yr0 = evt['yaxis.range[0]'];
+            const yr1 = evt['yaxis.range[1]'];
+            if (yr0 != null && yr1 != null) this._zoomYRange = [yr0, yr1];
             tv = niceTicks(r0, r1, maxXTicks);
           } else if (evt['xaxis.autorange']) {
+            // User double-clicked to reset — clear saved zoom
+            this._zoomXRange = null;
+            this._zoomYRange = null;
             tv = niceTicks(xMin, xMax, maxXTicks);
           }
           if (tv) {
@@ -1780,6 +1793,7 @@
           xaxis: {
             title: { text: 'Score', font: { size: 12 } },
             tickfont: { size: 10 }, gridcolor: '#e9ecef', zeroline: false,
+            ...(this._zoomXRange ? { range: [...this._zoomXRange], autorange: false } : {}),
           },
           yaxis: {
             tickfont: { size: 11 }, automargin: true,