PlotDirector Phase 17A Follow-up - Restore Timeline Metric Shape Chart

PlotLine/wwwroot/js/site.js

@@ -937,9 +937,42 @@
 
   const globalDefaultMetrics = new Set(["Overall Intensity", "Tension", "Emotional Weight", "Action"]);
   const metricCharts = [];
+  const maxMetricCanvasDimension = 30000;
+  const syncMetricCanvasSize = (root) => {
+    const frame = root.querySelector(".metric-chart-frame");
+    if (!frame) {
+      return;
+    }
+
+    let naturalWidth = Number(frame.dataset.metricNaturalWidth || 0);
+    if (!naturalWidth || frame.dataset.metricCanvasConstrained !== "true") {
+      frame.style.width = "";
+      naturalWidth = frame.getBoundingClientRect().width;
+      if (naturalWidth) {
+        frame.dataset.metricNaturalWidth = String(naturalWidth);
+      }
+    }
+
+    if (!naturalWidth) {
+      return;
+    }
+
+    const devicePixelRatio = Math.max(window.devicePixelRatio || 1, 1);
+    const maxCssWidth = Math.floor(maxMetricCanvasDimension / devicePixelRatio);
+    if (naturalWidth > maxCssWidth) {
+      frame.style.width = `${maxCssWidth}px`;
+      frame.dataset.metricCanvasConstrained = "true";
+    } else {
+      frame.style.width = "";
+      frame.dataset.metricCanvasConstrained = "false";
+    }
+  };
   const resizeMetricCharts = () => {
     window.requestAnimationFrame(() => {
-      metricCharts.forEach((chart) => chart.resize());
+      metricCharts.forEach(({ chart, root }) => {
+        syncMetricCanvasSize(root);
+        chart.resize();
+      });
     });
   };
   window.PlotLineMetricCharts = { resizeAll: resizeMetricCharts };
@@ -1053,6 +1086,7 @@
 
     let activeMetricDrag = null;
     let suppressMetricClick = false;
+    syncMetricCanvasSize(root);
 
     const setMetricEditStatus = (message) => {
       if (editStatus) {
@@ -1343,8 +1377,13 @@
       }
     });
 
-    metricCharts.push(chart);
+    metricCharts.push({ chart, root });
-    const resizeObserver = window.ResizeObserver ? new ResizeObserver(() => chart.resize()) : null;
+    const resizeObserver = window.ResizeObserver
+      ? new ResizeObserver(() => {
+          syncMetricCanvasSize(root);
+          chart.resize();
+        })
+      : null;
     if (resizeObserver) {
       resizeObserver.observe(root);
       resizeObserver.observe(root.querySelector(".metric-chart-frame") || root);