function display(data) { function showInfo({ file, fileInfo, chunks }) { return html`

${file.path.split("/").at(-1)} (download)

${filesize(fileInfo.size)}. ${chunks.length.toLocaleString( "en-US" )} chunks.

`; } const wrapper = html`

`; for (const { useDataPageIndex, data: dpiData } of data) { const dpiCharts = html`

`; for (const { useCDC, data: cdcData } of dpiData) { const cdcCharts = html`

`; for (const { compression, data: compressionData } of cdcData) { const chart = diffView === "Additions" ? squareAdditionsDiff(compressionData) : diffView === "Additions/Removals" ? squareDiff(compressionData) : diffView === "Two rows" ? twoRowsDiff(compressionData) : html`not implemented`; const section = html`

${ compression === "none" ? "No compression" : "Snappy compression" }

`; section.append(chart); section.append( html`

${showInfo(compressionData.a)} ${showInfo(compressionData.b)} ` ); cdcCharts.append(section); } const cdcSection = html`

${ useCDC === "yes" ? "CDC Parquet" : "Vanilla Parquet" }

`; cdcSection.append(cdcCharts); dpiCharts.append(cdcSection); } const dpiSection = html`

${ useDataPageIndex === "yes" ? "Parquet with data page index" : "Parquet without data page index" }

`; dpiSection.append(dpiCharts); wrapper.append(dpiSection); } return wrapper; }