From a103029f58f1321e12c96e6e92fe72885e2cb2f3 Mon Sep 17 00:00:00 2001
From: Tom O'Dwyer <tom.odwyer@thedatalab.org>
Date: Fri, 3 Nov 2023 14:02:37 +0000
Subject: [PATCH] Fixes for cell annotation

---
 assets/src/scripts/_file-elements.js | 24 ++++++++++++++++--------
 assets/src/scripts/_output-click.js  | 15 ++++++++-------
 assets/src/scripts/_table-builder.js | 22 ++++++++++++----------
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/assets/src/scripts/_file-elements.js b/assets/src/scripts/_file-elements.js
index 6be72f8..12a30dd 100644
--- a/assets/src/scripts/_file-elements.js
+++ b/assets/src/scripts/_file-elements.js
@@ -6,19 +6,27 @@ import "highlight.js/styles/github.css";
 import { highlightJsName } from "./_utils";
 
 /**
- * @param {HTMLElement} el
- * @param {string} ext
- * @param {string} url
- * @param {object} outcome
+ * @param {Object} params
+ * @param {HTMLElement} params.element
+ * @param {string} params.fileExtension
+ * @param {string} params.fileUrl
+ * @param {object} params.outcome
+ * @param {string} params.fileIndex
  */
-export async function createTableElement(el, ext, url, outcome, index) {
-  const data = await fileLoader(ext, url);
+export async function createTableElement({
+  element,
+  fileExtension,
+  fileUrl,
+  outcome,
+  fileIndex,
+}) {
+  const data = await fileLoader(fileExtension, fileUrl);
 
   tableBuilder({
     csvString: data,
-    el,
+    el: element,
     outcome,
-    index,
+    fileIndex,
   });
 }
 
diff --git a/assets/src/scripts/_output-click.js b/assets/src/scripts/_output-click.js
index 3cbdce1..1c843b6 100644
--- a/assets/src/scripts/_output-click.js
+++ b/assets/src/scripts/_output-click.js
@@ -43,6 +43,7 @@ export default async function outputClick({ outputName, metadata }) {
   const filePreviewContainer = document.getElementById("filePreviewContainer");
   filePreviewContainer.innerHTML = "";
 
+  /** @type {HTMLTemplateElement|null} */
   const filePreviewTemplate = document.querySelector(
     `[data-sacro-el="file-preview-template"]`
   );
@@ -75,13 +76,13 @@ export default async function outputClick({ outputName, metadata }) {
     filePreviewLink.setAttribute("href", url);
 
     if (isCsv(ext)) {
-      createTableElement(
-        filePreviewContent,
-        ext,
-        url,
-        openOutput.value.metadata.files?.[i].cell_index,
-        i
-      );
+      createTableElement({
+        element: filePreviewContent,
+        fileExtension: ext,
+        fileUrl: url,
+        outcome: filedata.cell_index,
+        fileIndex: i,
+      });
     } else if (isImg(ext)) {
       createImageElement(filePreviewContent, url);
     } else if (isTxt(ext)) {
diff --git a/assets/src/scripts/_table-builder.js b/assets/src/scripts/_table-builder.js
index 26b922e..7dede24 100644
--- a/assets/src/scripts/_table-builder.js
+++ b/assets/src/scripts/_table-builder.js
@@ -2,10 +2,11 @@ import Papa from "papaparse";
 import { html } from "./_utils";
 
 /**
- * @param {{[x: string]: string[];}} cellIndex
- * @param {string} tableId
+ * @param {Object} params
+ * @param {{[x: string]: string[];}} params.cellIndex
+ * @param {string} params.tableId
  */
-function highlightFailingCells(cellIndex, tableId) {
+function highlightFailingCells({ cellIndex, tableId }) {
   /** @type {HTMLElement|null} */
   const tableBody = document.getElementById(tableId);
   if (!tableBody) return;
@@ -40,15 +41,13 @@ function highlightFailingCells(cellIndex, tableId) {
     const tooltipEl = tooltipTemplateEl?.content?.firstElementChild;
     if (!tooltipEl) return;
 
-    /** @type {HTMLSpanElement} */
+    /** @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);
-
-    return tableCell;
   });
 }
 
@@ -58,9 +57,9 @@ function highlightFailingCells(cellIndex, tableId) {
  * @param {Object.<string, string[]>} params.outcome
  * @param {HTMLElement} params.el
  * @param {string} params.csvString
- * @param {string} params.index
+ * @param {string} params.fileIndex
  */
-function tableBuilder({ csvString, el, outcome, index }) {
+function tableBuilder({ csvString, el, outcome, fileIndex }) {
   const csvToJson = Papa.parse(csvString).data;
 
   const bodyCell = (row) =>
@@ -75,7 +74,7 @@ function tableBuilder({ csvString, el, outcome, index }) {
 
   const table = html`
     <table
-      id=${`csvTable${index}`}
+      id=${`csvTable${fileIndex}`}
       class="min-w-full divide-y divide-gray-300 text-left text-sm text-gray-900"
     >
       <thead class="font-semibold bg-gray-200">
@@ -91,7 +90,10 @@ function tableBuilder({ csvString, el, outcome, index }) {
 
   el.innerHTML = table; // eslint-disable-line no-param-reassign
 
-  highlightFailingCells(outcome, `csvTable${index}`);
+  highlightFailingCells({
+    cellIndex: outcome,
+    tableId: `csvTable${fileIndex}`,
+  });
 }
 
 export default tableBuilder;