Move metadata to side bar

demo.css

@@ -51,7 +51,16 @@ input[type="file"] {
 #layout {
   margin-top: 20px;
 }
-#layout div {
+.layout div {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 12px;
+  margin-top: 4px;
+  padding: 4px;
+  word-break: break-all;
+}
+.layout div {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -71,10 +80,10 @@ input[type="file"] {
 }
 
 nav ul,
-#layout div ul {
+.layout div ul {
   list-style: none;
 }
-#layout div li {
+.layout div li {
   font-size: 10px;
   padding: 2px 4px;
   text-align: right;
@@ -84,17 +93,22 @@ nav ul,
   display: none;
 }
 
-#layout h2 {
+.layout h2 {
   cursor: pointer;
   user-select: none;
 }
-#layout h2::before {
+.layout h2::before {
   content: "▼";
   display: inline-block;
   font-size: 10px;
   margin: 0 4px;
   vertical-align: middle;
 }
-#layout .collapsed h2::before {
+.layout .collapsed h2::before {
   content: "▶";
 }
+
+#metadata pre {
+  white-space: pre-wrap;
+  break-word: break-all;
+}

demo.js

@@ -2,6 +2,7 @@ import { parquetMetadata, toJson } from './src/hyparquet.js'
 
 const dropzone = document.getElementById('dropzone')
 const layout = document.getElementById('layout')
+const metadata = document.getElementById('metadata')
 const fileInput = document.getElementById('file-input')
 
 dropzone.addEventListener('dragover', e => {
@@ -30,14 +31,13 @@ function processFile(file) {
   reader.onload = e => {
     try {
       const arrayBuffer = e.target.result
-      const metadata = toJson(parquetMetadata(arrayBuffer))
 
+      layout.innerHTML = `<strong>${file.name}</strong>`
       // render file layout
       layout.appendChild(fileLayout(metadata, arrayBuffer))
-
       // display metadata
-      dropzone.innerHTML = `<strong>${file.name}</strong>`
-      dropzone.innerHTML += `<pre>${JSON.stringify(metadata, null, 2)}</pre>`
+      metadata.innerHTML = ''
+      metadata.appendChild(fileMetadata(toJson(parquetMetadata(arrayBuffer))))
     } catch (e) {
       dropzone.innerHTML = `<strong>${file.name}</strong>`
       dropzone.innerHTML += `<div class="error">Error parsing file\n${e}</div>`
@@ -87,7 +87,7 @@ function fileLayout(metadata, arrayBuffer) {
   const div = document.createElement('div')
   div.innerHTML = html
   div.classList.add('collapsed') // start collapsed
-  div.addEventListener('click', () => {
+  div.children[0].addEventListener('click', () => {
     div.classList.toggle('collapsed')
   })
   return div
@@ -106,3 +106,16 @@ function cell(name, start, bytes, end) {
       </ul>
     </div>`
 }
+
+// Render metadata
+function fileMetadata(metadata) {
+  let html = '<h2>Metadata</h2>'
+  html += `<pre>${JSON.stringify(metadata, null, 2)}</pre>`
+  const div = document.createElement('div')
+  div.innerHTML = html
+  div.classList.add('collapsed') // start collapsed
+  div.children[0].addEventListener('click', () => {
+    div.classList.toggle('collapsed')
+  })
+  return div
+}

index.html

@@ -19,7 +19,8 @@
         <li><a href="https://github.com/hyparam/hyparquet">github</a></li>
         <li><a href="https://www.npmjs.com/package/hyparquet">npm</a></li>
       </ul>
-      <div id="layout"></div>
+      <div id="layout" class="layout"></div>
+      <div id="metadata" class="layout"></div>
     </nav>
     <div id="dropzone">
       <label id="welcome">Drop .parquet file here</label>