Skip to content

add an input for the URL in hyparquet demo #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 12, 2025
Merged

add an input for the URL in hyparquet demo #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f687bf
add an input for the URL in hyparquet demo
severo Nov 12, 2025
0c31a2c
move constant outside of component
severo Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion hyparquet/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
28 changes: 23 additions & 5 deletions hyparquet/src/Welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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])
Copy link

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useCallback dependency array is missing exampleUrl and urlRef. While urlRef is a ref and stable, exampleUrl is a local constant that's captured in the closure. Since exampleUrl is defined inside the component function, it should be included in the dependency array, or moved outside the component to avoid this issue. To fix, either add exampleUrl to the dependencies: }, [setUrl, exampleUrl]) or move the exampleUrl constant declaration outside the component function.

Suggested change
}, [setUrl])
}, [setUrl, exampleUrl])

Copilot uses AI. Check for mistakes.
Copy link
Contributor

@platypii platypii Nov 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why a const needs to be in the dependency array. If you move the exampleUrl to the top level then I think it will stop complaining?

Copy link
Contributor Author

@severo severo Nov 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, the comment does not make sense to me. Anyway, moving outside does not harm either


return <div id="welcome">
<div>
<h1>hyparquet</h1>
Expand All @@ -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>
Expand Down
27 changes: 27 additions & 0 deletions hyparquet/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ h2 {
margin-top: 10px;
font-size: 12pt;
}
label {
margin: 15px 0;
display: block;
}
p {
margin: 15px 0;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion icebird/src/Welcome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down