fix: fix report-item layout script timing issues [PT-186921649]

concord-consortium · Jan 29, 2024 · 73c54e4 · 73c54e4
1 parent 31c8edb
commit 73c54e4
Showing 1 changed file with 35 additions and 33 deletions.
diff --git a/packages/tecrock-table/src/components/report-item/report-item.tsx b/packages/tecrock-table/src/components/report-item/report-item.tsx
@@ -17,37 +17,35 @@ import classMap from "../table.scss";
 // this specific case.
 const reportItemScript =
   "<script>" + (function runInReportItem() {
-    window.onload = () => {
-      // Setup table scaling
-      const table = document.body.getElementsByTagName("table")[0];
-      if (!table) {
-        return;
-      }
-      const tableParent = table.parentElement;
-      if (!tableParent) {
-        return;
-      }
-      if (table.offsetWidth > tableParent.offsetWidth) {
-        // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
-        const originalWidth = table.offsetWidth;
-        const originalHeight = table.offsetHeight;
-        const scale = tableParent.offsetWidth / (originalWidth + 1);
-        table.style.transform = `scale(${scale})`;
-        table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
-        table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
-        tableParent.style.overflow = "hidden";
-      }
-      // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
-      // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
-      // reimplement it here.
-      const snapshots = document.body.getElementsByTagName("img");
-      for (let i = 0; i < snapshots.length; i++) {
-        const snapshot = snapshots[i];
-        snapshot.addEventListener("click", () => {
-          window.open(snapshot.src, "_blank");
-        });
-      }
-    };
+    // Setup table scaling
+    const table = document.body.getElementsByTagName("table")[0];
+    if (!table) {
+      return;
+    }
+    const tableParent = table.parentElement;
+    if (!tableParent) {
+      return;
+    }
+    if (table.offsetWidth > tableParent.offsetWidth) {
+      // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
+      const originalWidth = table.offsetWidth;
+      const originalHeight = table.offsetHeight;
+      const scale = tableParent.offsetWidth / (originalWidth + 1);
+      table.style.transform = `scale(${scale})`;
+      table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
+      table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
+      tableParent.style.overflow = "hidden";
+    }
+    // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
+    // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
+    // reimplement it here.
+    const snapshots = document.body.getElementsByTagName("img");
+    for (let i = 0; i < snapshots.length; i++) {
+      const snapshot = snapshots[i];
+      snapshot.addEventListener("click", () => {
+        window.open(snapshot.src, "_blank");
+      });
+    }
   }).toString() +
   "\nrunInReportItem(); </script>";
 
@@ -62,12 +60,16 @@ export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInt
   else if (semver.satisfies(version, "2.x")) {
     const items: IReportItemAnswerItem[] = [];
     const htmlWithInlineStyles =
-      reportItemScript + // stringified script tag
       renderToStringWithCss(
         <Table interactiveState={request.interactiveState} />,
         inlineCss,
         classMap
-      );
+      ) +
+      // Add a stringified script tag to the end of the HTML string. It's important to do it after the closing body tag,
+      // because otherwise the script will be executed before the table is rendered. That way we can avoid using
+      // DOM mutation observers to detect when the table is rendered or relying on other callbacks or timing tricks.
+      reportItemScript;
+
     items.push({type: "html", html: htmlWithInlineStyles});
     sendReportItemAnswer({version, platformUserId, items, itemsType});
   } else {