From 13a6069a6594a624d14df540c9361a3c19579125 Mon Sep 17 00:00:00 2001
From: Tom O'Dwyer <tom.odwyer@thedatalab.org>
Date: Fri, 3 Nov 2023 14:34:53 +0000
Subject: [PATCH] Fix type checking issues

---
 assets/src/scripts/_output-click.js  |  2 +-
 assets/src/scripts/_table-builder.js | 37 ++++++++++++++++++----------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/assets/src/scripts/_output-click.js b/assets/src/scripts/_output-click.js
index 1c843b6..80f8475 100644
--- a/assets/src/scripts/_output-click.js
+++ b/assets/src/scripts/_output-click.js
@@ -41,7 +41,7 @@ export default async function outputClick({ outputName, metadata }) {
 
   // Clear existing content
   const filePreviewContainer = document.getElementById("filePreviewContainer");
-  filePreviewContainer.innerHTML = "";
+  if (filePreviewContainer) filePreviewContainer.innerHTML = "";
 
   /** @type {HTMLTemplateElement|null} */
   const filePreviewTemplate = document.querySelector(
diff --git a/assets/src/scripts/_table-builder.js b/assets/src/scripts/_table-builder.js
index 7dede24..ae1b26a 100644
--- a/assets/src/scripts/_table-builder.js
+++ b/assets/src/scripts/_table-builder.js
@@ -3,7 +3,7 @@ import { html } from "./_utils";
 
 /**
  * @param {Object} params
- * @param {{[x: string]: string[];}} params.cellIndex
+ * @param {Object.<string, string[]>} params.cellIndex
  * @param {string} params.tableId
  */
 function highlightFailingCells({ cellIndex, tableId }) {
@@ -33,21 +33,30 @@ function highlightFailingCells({ cellIndex, tableId }) {
 
     /** @type {string} */
     const tooltipContent = cellIndex?.[index]
-      .map((i) => html`<span class="block">${i}</span>`)
+      .map(
+        (/** @type {string} */ str) => html`<span class="block">${str}</span>`
+      )
       .join("");
 
-    /** @type {HTMLTemplateElement|null} */
     const tooltipTemplateEl = document.getElementById(`tooltip`);
+    if (!(tooltipTemplateEl instanceof HTMLTemplateElement)) return;
     const tooltipEl = tooltipTemplateEl?.content?.firstElementChild;
     if (!tooltipEl) return;
 
-    /** @type {Node} */
     const cellTooltip = tooltipEl.cloneNode(true);
-
-    cellTooltip.classList.add("flex", "-bottom-2");
-    cellTooltip.querySelector(`[data-sacro-el="tooltip-content"]`).innerHTML =
-      tooltipContent;
     tableCell.appendChild(cellTooltip);
+
+    const tooltip = tableCell.querySelector("span:first-child");
+    if (tooltip) {
+      tooltip.classList.add("flex", "-bottom-2");
+
+      const tooltipContentSpan = tooltip?.querySelector(
+        `[data-sacro-el="tooltip-content"]`
+      );
+      if (tooltipContentSpan) {
+        tooltipContentSpan.innerHTML = tooltipContent;
+      }
+    }
   });
 }
 
@@ -88,12 +97,14 @@ function tableBuilder({ csvString, el, outcome, fileIndex }) {
     </table>
   `;
 
-  el.innerHTML = table; // eslint-disable-line no-param-reassign
+  if (typeof table === "string") {
+    el.innerHTML = table; // eslint-disable-line no-param-reassign
 
-  highlightFailingCells({
-    cellIndex: outcome,
-    tableId: `csvTable${fileIndex}`,
-  });
+    highlightFailingCells({
+      cellIndex: outcome,
+      tableId: `csvTable${fileIndex}`,
+    });
+  }
 }
 
 export default tableBuilder;