From 76a0c99b60961c093a8de08dc0038967f5ba6467 Mon Sep 17 00:00:00 2001
From: Kenny Daniel <platypii@gmail.com>
Date: Sun, 12 May 2024 19:36:30 -0700
Subject: [PATCH] Demo move metadata above file layout

---
 demo.css   | 8 ++++----
 demo.js    | 3 ++-
 index.html | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/demo.css b/demo.css
index 07148bd..036b084 100644
--- a/demo.css
+++ b/demo.css
@@ -132,8 +132,11 @@ th, td {
   white-space: pre-wrap;
 }
 
-#layout {
+#filename {
+  font-size: 10pt;
   margin-top: 20px;
+}
+#layout {
   word-break: break-all;
 }
 .layout a {
@@ -143,9 +146,6 @@ th, td {
 .layout a:hover {
   text-decoration: underline;
 }
-.layout > strong {
-  font-size: 10pt;
-}
 .layout div {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid #ccc;
diff --git a/demo.js b/demo.js
index dbccc07..dc6f1c4 100644
--- a/demo.js
+++ b/demo.js
@@ -4,6 +4,7 @@ const dropzone = document.getElementById('dropzone')
 const fileInput = document.getElementById('file-input')
 const content = document.getElementById('content')
 const welcome = document.getElementById('welcome')
+const label = document.getElementById('filename')
 
 const layout = document.getElementById('layout')
 const metadataDiv = document.getElementById('metadata')
@@ -124,7 +125,7 @@ async function render(asyncBuffer, metadata, name) {
 }
 
 function renderSidebar(asyncBuffer, metadata, name) {
-  layout.innerHTML = `<strong>${name}</strong>`
+  label.innerText = name
   // render file layout
   layout.appendChild(fileLayout(metadata, asyncBuffer.byteLength))
   // display metadata
diff --git a/index.html b/index.html
index 084ba95..08c0a97 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,9 @@
           <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" class="layout"></div>
+        <div id="filename"></div>
         <div id="metadata" class="layout"></div>
+        <div id="layout" class="layout"></div>
       </nav>
       <div id="content">
         <div id="welcome">