Eliminate Plotly autosize feedback loops with explicit wrapper-sized relayout

linear-regression/gradient-descent.html

@@ -122,6 +122,6 @@
     </main>
 
     <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
-    <script src="gradient.js?v=20260814b"></script>
+    <script src="gradient.js?v=20260814c"></script>
   </body>
 </html>

linear-regression/gradient.js

@@ -48,7 +48,6 @@ const state = {
   landscapeCache: null,
   landscapeCamera: null,
   landscapePlotReady: false,
-  landscapeResizeObserver: null,
   landscapeResizeRaf: null,
   lastLandscapeSize: null,
 };
@@ -132,17 +131,6 @@ function initLandscapeInteractions() {
     constrainLandscapeSizeToContainer();
   });
 
-  if (window.ResizeObserver) {
-    state.landscapeResizeObserver = new ResizeObserver((entries) => {
-      const entry = entries && entries[0];
-      const contentRect = entry ? entry.contentRect : null;
-      debugResizeLog("ResizeObserver", {
-        observed: contentRect ? `${contentRect.width.toFixed(2)}x${contentRect.height.toFixed(2)}` : "n/a",
-      });
-      queueLandscapeResize(false);
-    });
-    state.landscapeResizeObserver.observe(landscapePlotWrap);
-  }
 }
 
 function handleResize() {
@@ -257,8 +245,8 @@ function queueLandscapeResize(force = false) {
 
   state.landscapeResizeRaf = requestAnimationFrame(() => {
     state.landscapeResizeRaf = null;
-    debugResizeLog("Plotly.Plots.resize", { width, height });
-    Plotly.Plots.resize(landscapePlot);
+    debugResizeLog("Plotly.relayout(size)", { width, height });
+    Plotly.relayout(landscapePlot, { width, height });
   });
 }
 
@@ -697,9 +685,13 @@ function renderLandscapePlotly(data) {
   ];
 
   const sceneCamera = state.landscapeCamera || cloneCamera(DEFAULT_CAMERA);
+  const plotWidth = Math.round(landscapePlotWrap.clientWidth);
+  const plotHeight = Math.round(landscapePlotWrap.clientHeight);
 
   const layout = {
-    autosize: true,
+    autosize: false,
+    width: plotWidth,
+    height: plotHeight,
     margin: { l: 0, r: 0, t: 8, b: 0 },
     paper_bgcolor: "#ffffff",
     scene: {

logistic-regression/cost-visualization.html

@@ -130,6 +130,6 @@
     </main>
 
     <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
-    <script src="cost.js?v=20260814b"></script>
+    <script src="cost.js?v=20260814c"></script>
   </body>
 </html>

logistic-regression/cost.js

@@ -97,7 +97,6 @@ const state = {
   gridCache: { case1: null, case2: null },
   plotReady: false,
   camera3d: null,
-  resizeObserver: null,
   resizeRaf: null,
   lastPlotSize: null,
 };
@@ -563,8 +562,8 @@ function queuePlotResize(force = false) {
 
   state.resizeRaf = requestAnimationFrame(() => {
     state.resizeRaf = null;
-    debugResizeLog("Plotly.Plots.resize", { width, height });
-    window.Plotly.Plots.resize(plotEl);
+    debugResizeLog("Plotly.relayout(size)", { width, height });
+    window.Plotly.relayout(plotEl, { width, height });
   });
 }
 
@@ -682,6 +681,8 @@ function renderLandscape(caseKey, grid) {
   const meta = caseMeta[caseKey];
   const view = controls.landscapeView.value;
   const idx = Math.min(state.stepIndex, Math.max(0, state.trajectory.length - 1));
+  const plotWidth = Math.round(plotWrap.clientWidth);
+  const plotHeight = Math.round(plotWrap.clientHeight);
 
   const showSurface = controls.toggleSurface.checked;
   const showContours = controls.toggleContours.checked;
@@ -765,7 +766,9 @@ function renderLandscape(caseKey, grid) {
     }
 
     const layout2d = {
-      autosize: true,
+      autosize: false,
+      width: plotWidth,
+      height: plotHeight,
       margin: { l: 58, r: 16, t: 8, b: 50 },
       xaxis: { title: meta.p1Label },
       yaxis: { title: meta.p2Label },
@@ -881,7 +884,9 @@ function renderLandscape(caseKey, grid) {
   }
 
   const layout3d = {
-    autosize: true,
+    autosize: false,
+    width: plotWidth,
+    height: plotHeight,
     margin: { l: 0, r: 0, t: 8, b: 0 },
     scene: {
       xaxis: { title: meta.p1Label, range: [grid.p1Min, grid.p1Max], showspikes: false },
@@ -1305,19 +1310,6 @@ function bindEvents() {
     drawClassifier(controls.caseSelect.value);
   });
 
-  if (window.ResizeObserver) {
-    state.resizeObserver = new window.ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === plotWrap) {
-          debugResizeLog("ResizeObserver", {
-            observed: `${entry.contentRect.width.toFixed(2)}x${entry.contentRect.height.toFixed(2)}`,
-          });
-          queuePlotResize(false);
-        }
-      }
-    });
-    state.resizeObserver.observe(plotWrap);
-  }
 }
 
 function init() {