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.} 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` @@ -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;