From 61f4cce8f0536f864c09c80310b04f5f325f3c89 Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Tue, 30 Jan 2024 00:18:52 +0900
Subject: [PATCH] fix: fix report-item script issue caused by webpack optimizer
 [PT-186921649]

---
 .../components/report-item/report-item.tsx    | 67 ++++++++++---------
 1 file changed, 34 insertions(+), 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
index 806b1e11..c54b58db 100644
--- a/packages/tecrock-table/src/components/report-item/report-item.tsx
+++ b/packages/tecrock-table/src/components/report-item/report-item.tsx
@@ -15,39 +15,40 @@ import classMap from "../table.scss";
 // A method to execute any JavaScript code in the report-item iframe. This is necessary to set up table scaling for
 // narrow views and to enable snapshot clicking. This approach is quite limited, but it suffices for our needs in
 // this specific case.
-const reportItemScript =
-  "<script>" + (function runInReportItem() {
-    // 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>";
+function runInReportItem() {
+  // 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");
+    });
+  }
+}
+// runInReportItem.name is necessary (rather than just using runInReportItem()) because the webpack optimizer might
+// change function name or even inline the function, which would break the code.
+const reportItemScript = "<script>" + runInReportItem.toString() + `\n ${runInReportItem.name}(); </script>`;
 
 export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInteractiveState, IAuthoredState> = request => {
   const {platformUserId, version, itemsType} = request;