add an input for the URL in hyparquet demo (#46)

* add an input for the URL in hyparquet demo

* move constant outside of component

Author: severo

hyparquet/src/App.tsx

@@ -55,7 +55,7 @@ export default function App(): ReactNode {
       onError={(e) => { setError(e) }}
       onFileDrop={onFileDrop}
       onUrlDrop={onUrlDrop}>
-      {pageProps ? <Page {...pageProps} /> : <Welcome />}
+      {pageProps ? <Page {...pageProps} /> : <Welcome setUrl={onUrlDrop} />}
     </Dropzone>
   </Layout>
 }

hyparquet/src/Welcome.tsx

@@ -1,16 +1,30 @@
-import { ReactNode, useRef } from 'react'
+import { type FormEvent, ReactNode, useCallback, useRef } from 'react'
 import audioSvg from './assets/audio.svg'
 import hyparquetMp3 from './assets/hyparquet.mp3'
 
-export default function Welcome(): ReactNode {
+const exampleUrl = 'https://hyperparam-public.s3.amazonaws.com/wiki-en-00000-of-00041.parquet'
+
+interface Props {
+  setUrl: (url: string) => void
+}
+
+export default function Welcome({ setUrl }: Props): ReactNode {
   const audio = useRef<HTMLAudioElement>(null)
+  const urlRef = useRef<HTMLInputElement>(null)
 
   function playAudio() {
     audio.current?.play().catch(() => {
       console.warn('Failed to play audio')
     })
   }
 
+  const onSubmit = useCallback((e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const value = urlRef.current?.value ?? ''
+    const url = value === '' ? exampleUrl : value
+    setUrl(url)
+  }, [setUrl])
+
   return <div id="welcome">
     <div>
       <h1>hyparquet</h1>
@@ -25,9 +39,13 @@ export default function Welcome(): ReactNode {
         Online demo of <a href="https://github.com/hyparam/hyparquet">hyparquet</a>: a parser for apache parquet files.
         Uses <a href="https://github.com/hyparam/hightable">hightable</a> for high performance windowed table viewing.
       </p>
-      <p>
-        Drag and drop a parquet file (or url) to see your parquet data. 👀
-      </p>
+      <form onSubmit={onSubmit}>
+        <label htmlFor="url">Drag and drop a parquet file (or url) to see your parquet data. 👀</label>
+        <div className="inputGroup">
+          <input id="url" type="url" ref={urlRef} required={false} placeholder={exampleUrl} />
+          <button>Load</button>
+        </div>
+      </form>
       <p>
         Example files:
       </p>

hyparquet/src/index.css

@@ -17,6 +17,10 @@ h2 {
   margin-top: 10px;
   font-size: 12pt;
 }
+label {
+  margin: 15px 0;
+  display: block;
+}
 p {
   margin: 15px 0;
 }
@@ -35,6 +39,22 @@ sub img {
   cursor: pointer;
 }
 
+input {
+  height: 32px;
+}
+input,
+textarea {
+  border: 2px solid #999;
+  border-radius: 8px;
+  padding: 4px 8px;
+  transition: border 0.3s;
+}
+input:focus,
+textarea:focus {
+  outline: none;
+  border: 2px solid #99e;
+}
+
 /* dropzone */
 .dropzone {
   display: flex;
@@ -200,6 +220,13 @@ main {
   margin: auto;
   max-width: 640px;
 }
+.inputGroup {
+  display: flex;
+  gap: 10px;
+}
+.inputGroup > input {
+  flex: 1;
+}
 /* quick link buttons */
 .quick-links {
   display: flex;

icebird/src/Welcome.tsx

@@ -14,7 +14,7 @@ export default function Welcome({ setTableUrl }: Props): ReactNode {
     const url = urlRef.current?.value ?? ''
     const tableUrl = url === '' ? exampleUrl : url
     setTableUrl(tableUrl)
-  }, [setTableUrl, urlRef])
+  }, [setTableUrl])
 
   return <div id="welcome">
     <div>