From 03606e22cc9cf078da65f879e739f5da3ab3b951 Mon Sep 17 00:00:00 2001
From: Kenny Daniel <platypii@gmail.com>
Date: Sat, 27 Jan 2024 18:50:14 -0800
Subject: [PATCH] Click to open upload dialog

---
 demo.css   |  22 +++++++----
 demo.js    | 107 ++++++++++++++++++++++++++++++-----------------------
 index.html |   3 +-
 3 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/demo.css b/demo.css
index 5aa0e74..15d9996 100644
--- a/demo.css
+++ b/demo.css
@@ -10,8 +10,8 @@ body {
 }
 nav {
   width: 300px;
-  padding: 10px;
   overflow-y: auto;
+  padding: 10px;
 }
 h1 {
   font-size: 20pt;
@@ -22,21 +22,25 @@ h2 {
 p {
   margin: 10px 0;
 }
-label {
-  height: 100%;
-  display: flex;
+#welcome {
   align-items: center;
-  justify-content: center;
+  cursor: pointer;
+  display: flex;
   font-size: 20px;
+  height: 100%;
+  justify-content: center;
 }
 #dropzone {
   border: 2px dashed #08e;
   border-radius: 10px;
+  color: #444;
   flex: 1;
   margin: 10px;
-  padding: 10px;
-  color: #444;
   overflow: auto;
+  padding: 10px;
+}
+input[type="file"] {
+  display: none;
 }
 .over {
   background-color: lightblue;
@@ -60,11 +64,13 @@ label {
   display: flex;
 }
 .cell label {
+  flex: 1;
   font-size: 12px;
   font-weight: normal;
-  flex: 1;
   justify-content: flex-start;
 }
+
+nav ul,
 #layout div ul {
   list-style: none;
 }
diff --git a/demo.js b/demo.js
index 4f8f66f..89fd8ed 100644
--- a/demo.js
+++ b/demo.js
@@ -2,6 +2,7 @@ import { parquetMetadata, toJson } from './src/hyparquet.js'
 
 const dropzone = document.getElementById('dropzone')
 const layout = document.getElementById('layout')
+const fileInput = document.getElementById('file-input')
 
 dropzone.addEventListener('dragover', e => {
   e.preventDefault()
@@ -35,51 +36,65 @@ dropzone.addEventListener('drop', e => {
   const { files } = e.dataTransfer
   if (files.length > 0) {
     const file = files[0]
-    const reader = new FileReader()
-    reader.onload = e => {
-      try {
-        const arrayBuffer = e.target.result
-        const metadata = toJson(parquetMetadata(arrayBuffer))
-
-        console.log('metadata', metadata)
-
-        // render file layout
-        let html = '<h2>File layout</h2>'
-        html += cell('PAR1', 0, 4, 4) // magic number
-        for (const rowGroupIndex in metadata.row_groups) {
-          const rowGroup = metadata.row_groups[rowGroupIndex]
-          html += group(`Row group ${rowGroupIndex} (${rowGroup.total_byte_size} bytes)`)
-          for (const column of rowGroup.columns) {
-            const columnName = column.meta_data.path_in_schema.join('.')
-
-            let columnOffset = column.meta_data.dictionary_page_offset
-            if (!columnOffset || column.meta_data.data_page_offset < columnOffset) {
-              columnOffset = column.meta_data.data_page_offset
-            }
-            columnOffset = Number(columnOffset)
-            const bytes = column.meta_data.total_compressed_size
-            const end = columnOffset + bytes
-            html += cell(`Column ${columnName}`, columnOffset, bytes, end)
-          }
-          html += '</div>'
-        }
-        const metadataStart = arrayBuffer.byteLength - metadata.metadata_length - 4
-        html += cell('Metadata', metadataStart, metadata.metadata_length, arrayBuffer.byteLength - 4)
-        html += cell('PAR1', arrayBuffer.byteLength - 4, 4, arrayBuffer.byteLength) // magic number
-        layout.innerHTML = html
-
-        // display metadata
-        dropzone.innerHTML = `<strong>${file.name}</strong>`
-        dropzone.innerHTML += `<pre>${JSON.stringify(metadata, null, 2)}</pre>`
-      } catch (e) {
-        dropzone.innerHTML = `<strong>${file.name}</strong>`
-        dropzone.innerHTML += `<div class="error">Error parsing file\n${e}</div>`
-      }
-    }
-    reader.onerror = e => {
-      console.error('Error reading file', e)
-      dropzone.innerText = `Error reading file\n${e.target.error}`
-    }
-    reader.readAsArrayBuffer(file)
+    processFile(file)
+  }
+})
+
+function processFile(file) {
+  const reader = new FileReader()
+  reader.onload = e => {
+    try {
+      const arrayBuffer = e.target.result
+      const metadata = toJson(parquetMetadata(arrayBuffer))
+
+      console.log('metadata', metadata)
+
+      // render file layout
+      let html = '<h2>File layout</h2>'
+      html += cell('PAR1', 0, 4, 4) // magic number
+      for (const rowGroupIndex in metadata.row_groups) {
+        const rowGroup = metadata.row_groups[rowGroupIndex]
+        html += group(`Row group ${rowGroupIndex} (${rowGroup.total_byte_size} bytes)`)
+        for (const column of rowGroup.columns) {
+          const columnName = column.meta_data.path_in_schema.join('.')
+
+          let columnOffset = column.meta_data.dictionary_page_offset
+          if (!columnOffset || column.meta_data.data_page_offset < columnOffset) {
+            columnOffset = column.meta_data.data_page_offset
+          }
+          columnOffset = Number(columnOffset)
+          const bytes = column.meta_data.total_compressed_size
+          const end = columnOffset + bytes
+          html += cell(`Column ${columnName}`, columnOffset, bytes, end)
+        }
+        html += '</div>'
+      }
+      const metadataStart = arrayBuffer.byteLength - metadata.metadata_length - 4
+      html += cell('Metadata', metadataStart, metadata.metadata_length, arrayBuffer.byteLength - 4)
+      html += cell('PAR1', arrayBuffer.byteLength - 4, 4, arrayBuffer.byteLength) // magic number
+      layout.innerHTML = html
+
+      // display metadata
+      dropzone.innerHTML = `<strong>${file.name}</strong>`
+      dropzone.innerHTML += `<pre>${JSON.stringify(metadata, null, 2)}</pre>`
+    } catch (e) {
+      dropzone.innerHTML = `<strong>${file.name}</strong>`
+      dropzone.innerHTML += `<div class="error">Error parsing file\n${e}</div>`
+    }
+  }
+  reader.onerror = e => {
+    console.error('Error reading file', e)
+    dropzone.innerText = `Error reading file\n${e.target.error}`
+  }
+  reader.readAsArrayBuffer(file)
+}
+
+dropzone.addEventListener('click', () => {
+  fileInput.click()
+})
+
+fileInput.addEventListener('change', () => {
+  if (fileInput.files.length > 0) {
+    processFile(fileInput.files[0])
   }
 })
diff --git a/index.html b/index.html
index d9bd797..7c55db5 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,9 @@
       <div id="layout"></div>
     </nav>
     <div id="dropzone">
-      <label>Drop .parquet file here</label>
+      <label id="welcome">Drop .parquet file here</label>
     </div>
+    <input id="file-input" type="file">
 
     <script type="module" src="demo.js"></script>
   </body>