Merge pull request #348 from concord-consortium/186921649-report-item…

…-scale-down

Scale down the table in the Question Details view, allow teachers to enlarge snapshots

packages/tecrock-simulation/src/components/keys/rock-types.scss

@@ -127,6 +127,9 @@
         .selectedRockDiagram {
           padding: 5px 0;
           text-align: center;
+          svg + svg {
+            margin-top: 4px;
+          }
         }
         .selectedRockNotes {
           width: 248px;

packages/tecrock-table/src/components/report-item/report-item.tsx

@@ -12,6 +12,44 @@ import inlineCss from "../table.inline.scss";
 // used to replace class names in the `inlineCss` file.
 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.
+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;
 
@@ -22,11 +60,17 @@ export const reportItemHandler: IGetReportItemAnswerHandler<ITectonicExplorerInt
   }
   else if (semver.satisfies(version, "2.x")) {
     const items: IReportItemAnswerItem[] = [];
-    const htmlWithInlineStyles = renderToStringWithCss(
-      <Table interactiveState={request.interactiveState} />,
-      inlineCss,
-      classMap
-    );
+    const htmlWithInlineStyles =
+      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 {

packages/tecrock-table/src/components/table.scss

@@ -11,6 +11,7 @@
     table {
       border-collapse: collapse;
       table-layout: auto;
+      transform-origin: top left;
 
       td, th {
         border: 0.5px solid #979797;

packages/tecrock-table/src/components/table.tsx

@@ -51,14 +51,14 @@ export const Table: React.FC<IProps> = ({ interactiveState, handleExpandSnapshot
           planetViewSnapshot &&
           <div className={css.imgContainer}>
             <img style={{width: "100%"}} src={planetViewSnapshot} alt="Planet view snapshot" onClick={handleExpandSnapshot} />
-            { handleExpandSnapshot && <ZoomIn /> }
+            <ZoomIn />
           </div>
         }
         {
           crossSectionSnapshot &&
           <div className={css.imgContainer}>
             <img style={{width: "100%"}} src={crossSectionSnapshot} alt="Cross-section snapshot" onClick={handleExpandSnapshot} />
-            { handleExpandSnapshot && <ZoomIn /> }
+            <ZoomIn />
           </div>
         }
       </div>