demo: add column size to file layout

demo/demo.css

@@ -220,8 +220,11 @@ td:first-child {
 .sidebar a:hover {
   text-decoration: underline;
 }
+
+/* layout */
 .layout,
-.layout div {
+.layout .group,
+.layout .cell {
   background-color: rgba(100, 80, 180, 0.05);
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -230,15 +233,21 @@ td:first-child {
   padding: 4px;
   word-break: break-all;
 }
-.cell {
+.cell,
+.group-header {
   display: flex;
 }
-.cell label {
+.group-header > label,
+.cell > label {
+  display: flex;
   flex: 1;
   font-size: 12px;
   font-weight: normal;
   justify-content: flex-start;
 }
+.group-header > span {
+  font-size: 10px;
+}
 
 nav ul,
 .layout div ul {

demo/layout.js

@@ -36,10 +36,10 @@ export function fileLayout(metadata, asyncBuffer) {
   const indexPages = []
   for (const rowGroupIndex in metadata.row_groups) {
     const rowGroup = metadata.row_groups[rowGroupIndex]
-    html += group(`RowGroup ${rowGroupIndex} (${rowGroup.total_byte_size.toLocaleString()} bytes)`)
+    html += group(`RowGroup ${rowGroupIndex}`, rowGroup.total_byte_size)
     for (const column of rowGroup.columns) {
       const columnName = column.meta_data?.path_in_schema.join('.')
-      html += group(`Column ${columnName}`)
+      html += group(`Column ${columnName}`, column.meta_data?.total_compressed_size)
       if (column.meta_data) {
         const end = getColumnRange(column.meta_data)[1]
         /* eslint-disable no-extra-parens */
@@ -91,10 +91,15 @@ export function fileLayout(metadata, asyncBuffer) {
 
 /**
  * @param {string} name
+ * @param {bigint} [bytes]
  * @returns {string}
  */
-function group(name) {
-  return `<div>${name}`
+function group(name, bytes) {
+  return `<div class="group">
+    <div class="group-header">
+      <label>${name}</label>
+      <span>${bytes === undefined ? '' : `bytes ${bytes.toLocaleString()}`}</span>
+    </div>`
 }
 
 /**

package.json

@@ -31,7 +31,7 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
-    "@types/node": "22.5.3",
+    "@types/node": "22.5.4",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.4.0",