diff --git a/hyparquet/src/App.tsx b/hyparquet/src/App.tsx index e521fae..fce0665 100644 --- a/hyparquet/src/App.tsx +++ b/hyparquet/src/App.tsx @@ -55,7 +55,7 @@ export default function App(): ReactNode { onError={(e) => { setError(e) }} onFileDrop={onFileDrop} onUrlDrop={onUrlDrop}> - {pageProps ? : } + {pageProps ? : } } diff --git a/hyparquet/src/Welcome.tsx b/hyparquet/src/Welcome.tsx index 5a9f23c..2738476 100644 --- a/hyparquet/src/Welcome.tsx +++ b/hyparquet/src/Welcome.tsx @@ -1,9 +1,16 @@ -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(null) + const urlRef = useRef(null) function playAudio() { audio.current?.play().catch(() => { @@ -11,6 +18,13 @@ export default function Welcome(): ReactNode { }) } + const onSubmit = useCallback((e: FormEvent) => { + e.preventDefault() + const value = urlRef.current?.value ?? '' + const url = value === '' ? exampleUrl : value + setUrl(url) + }, [setUrl]) + return

hyparquet

@@ -25,9 +39,13 @@ export default function Welcome(): ReactNode { Online demo of hyparquet: a parser for apache parquet files. Uses hightable for high performance windowed table viewing.

-

- Drag and drop a parquet file (or url) to see your parquet data. 👀 -

+
+ +
+ + +
+

Example files:

diff --git a/hyparquet/src/index.css b/hyparquet/src/index.css index 9f9db58..d5ecef7 100644 --- a/hyparquet/src/index.css +++ b/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; diff --git a/icebird/src/Welcome.tsx b/icebird/src/Welcome.tsx index bbde96f..5414b08 100644 --- a/icebird/src/Welcome.tsx +++ b/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