Skip to content

Commit 36cb6d2

Browse files
severosevero
authored
upgrade hightable and hyperparam (+ other dependencies) (#16)
1 parent 4aa6258 commit 36cb6d2

File tree

9 files changed

+150
-752
lines changed

9 files changed

+150
-752
lines changed

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@
1313
"test": "vitest run"
1414
},
1515
"dependencies": {
16-
"@huggingface/hub": "1.0.1",
17-
"@hyparam/components": "0.1.19",
18-
"hightable": "0.11.0",
16+
"@huggingface/hub": "1.1.2",
17+
"hyperparam": "0.2.29",
18+
"hightable": "0.13.2",
1919
"react": "18.3.1",
2020
"react-dom": "18.3.1"
2121
},
2222
"devDependencies": {
2323
"@types/react": "18.3.18",
2424
"@types/react-dom": "18.3.1",
2525
"@vitejs/plugin-react": "4.3.4",
26-
"@vitest/coverage-v8": "3.0.7",
27-
"eslint": "9.21.0",
26+
"@vitest/coverage-v8": "3.0.9",
27+
"eslint": "9.23.0",
2828
"eslint-plugin-react": "7.37.4",
29-
"eslint-plugin-react-hooks": "5.1.0",
29+
"eslint-plugin-react-hooks": "5.2.0",
3030
"eslint-plugin-react-refresh": "0.4.19",
3131
"globals": "16.0.0",
32-
"typescript": "5.7.3",
33-
"typescript-eslint": "8.25.0",
34-
"vite": "6.2.0",
35-
"vitest": "3.0.7"
32+
"typescript": "5.8.2",
33+
"typescript-eslint": "8.28.0",
34+
"vite": "6.2.3",
35+
"vitest": "3.0.9"
3636
}
3737
}

‎src/components/App.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
import { OAuthResult } from '@huggingface/hub'
3-
import { Page, getHttpSource } from '@hyparam/components'
4-
import { useEffect, useState } from 'react'
3+
import { Config, ConfigProvider, Page, getHttpSource } from 'hyperparam'
4+
import { useEffect, useMemo, useState } from 'react'
55
import { fetchOAuth, getLocalOAuth } from '../lib/auth.js'
66
import { getHuggingFaceSource } from '../lib/huggingfaceSource.js'
77
import Home from './Home.js'
@@ -21,6 +21,16 @@ export default function App() {
2121
const [accessToken, setAccessToken] = useState<string | undefined>(localOAuth?.accessToken)
2222
const [requestInit, setRequestInit] = useState<RequestInit | undefined>(getRequestInit(localOAuth?.accessToken))
2323

24+
const config: Config = useMemo(() => ({
25+
customClass: {
26+
highTable: 'hightable',
27+
},
28+
routes: {
29+
getSourceRouteUrl: ({ sourceId }) => `/?url=${sourceId}`,
30+
getCellRouteUrl: ({ sourceId, col, row }) => `/?url=${sourceId}&col=${col}&row=${row}`,
31+
},
32+
}), [])
33+
2434
useEffect(() => {
2535
if (auth) return
2636
// no local auth, try to fetch it
@@ -52,10 +62,8 @@ export default function App() {
5262
const defaultUrl = '/?url=https://huggingface.co/datasets/severo/test-parquet/resolve/main/parquet/csv-train-00000-of-00001.parquet'
5363
return <div>Could not load a data source. You have to pass a valid source in the url, eg: <a href={defaultUrl}>{defaultUrl}</a>.</div>
5464
}
55-
return <Page source={source} navigation={{ row, col }} config={{
56-
routes: {
57-
getSourceRouteUrl: ({ sourceId }) => `/?url=${sourceId}`,
58-
getCellRouteUrl: ({ sourceId, col, row }) => `/?url=${sourceId}&col=${col}&row=${row}`,
59-
},
60-
}} />
65+
66+
return <ConfigProvider value={config}>
67+
<Page source={source} navigation={{ row, col }} />
68+
</ConfigProvider>
6169
}

‎src/components/Home.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { FormEvent } from 'react'
33
import HFLoginIcon from '../assets/sign-in-with-huggingface-lg.svg'
44
import { login, logout } from '../lib/auth.js'
55
import { changeQueryString } from '../lib/huggingfaceSource.js'
6+
import styles from '../styles/Home.module.css'
67
import Search from './Search.js'
78

89
/**
@@ -20,7 +21,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
2021
}
2122

2223
return (
23-
<div id="welcome">
24+
<div className={styles.home}>
2425
<h1>Hyperparam</h1>
2526
<h2>Advanced Dataset Viewer Space</h2>
2627
<p>
@@ -32,7 +33,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
3233
<h3>Select a dataset on Hugging Face</h3>
3334
{auth &&
3435
<p>Logged in as
35-
<img src={avatarUrl} alt={auth.userInfo.name} className='avatar' />
36+
<img src={avatarUrl} alt={auth.userInfo.name} className={styles.avatar} />
3637
{auth.userInfo.name} (<a onClick={logout}>Log out</a>).
3738
You can search your private and gated datasets.
3839
</p>
@@ -41,7 +42,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
4142
<p>Log in to search your private and gated datasets</p>
4243
<p>
4344
<a onClick={() => {
44-
login().catch(() => undefined)
45+
void login()
4546
}}>
4647
<img
4748
src={HFLoginIcon}
@@ -56,9 +57,9 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
5657
<section>
5758
<h3>Parquet URL</h3>
5859
<p>You can also set a url to see your parquet data. 👀</p>
59-
<form onSubmit={onUrlSubmit} style={{ display: 'flex', gap: '1rem' }}>
60+
<form onSubmit={onUrlSubmit} className={styles.urlForm}>
6061
<label htmlFor="url">URL</label>
61-
<input name="url" defaultValue="https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet" style={{ width: '100%' }} type="url" />
62+
<input name="url" defaultValue="https://huggingface.co/datasets/codeparrot/github-code/resolve/main/data/train-00000-of-01126.parquet" type="url" />
6263
<button type="submit">Open</button>
6364
</form>
6465
</section>

‎src/components/Search.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { DatasetEntry, listDatasets } from '@huggingface/hub'
22
import { ChangeEvent, useEffect, useState } from 'react'
33
import { baseUrl } from '../lib/huggingfaceSource.js'
4+
import styles from '../styles/Search.module.css'
45
import Link from './Link.js'
56

67
export default function Search({ accessToken } : { accessToken?: string }) {
@@ -34,9 +35,9 @@ export default function Search({ accessToken } : { accessToken?: string }) {
3435
return (
3536
<>
3637
<input type="search" onChange={onChange} />
37-
<ul className="ref-list">
38+
<ul className={styles.refList}>
3839
{datasets.map((dataset) =>
39-
<li key={dataset.name} style={{ fontSize: '0.9rem' }}>
40+
<li key={dataset.name}>
4041
<Link url={`${baseUrl}/${dataset.name}`}>{dataset.name}</Link>
4142
</li>,
4243
)}

‎src/lib/huggingfaceSource.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { listFiles } from '@huggingface/hub'
2-
import type { DirSource, FileMetadata, FileSource, SourcePart } from '@hyparam/components'
3-
import { getFileName } from '@hyparam/components'
2+
import type { DirSource, FileMetadata, FileSource, SourcePart } from 'hyperparam'
3+
import { getFileName } from 'hyperparam'
44

55
export const baseUrl = 'https://huggingface.co/datasets'
66

‎src/main.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import 'hightable/src/HighTable.css'
2+
import 'hyperparam/global.css'
3+
import 'hyperparam/hyperparam.css'
24
import { StrictMode } from 'react'
35
import { createRoot } from 'react-dom/client'
46
import App from './components/App.js'
5-
import './styles/index.css'
67

78
const app = document.getElementById('app')
89
if (!app) throw new Error('No app element')

‎src/styles/Home.module.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.home {
2+
position: relative;
3+
border: 2px #777;
4+
border-radius: 10px;
5+
color: #444;
6+
padding: 10px 10px 100px 10px;
7+
display: flex;
8+
flex-direction: column;
9+
flex: 1;
10+
font-size: 20px;
11+
justify-content: center;
12+
max-width: 640px;
13+
margin: 0 auto;
14+
15+
h1 {
16+
font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial,
17+
sans-serif;
18+
font-size: calc(30rem / 16);
19+
}
20+
21+
h2 {
22+
margin-top: 10px;
23+
font-size: 1rem;
24+
}
25+
26+
p {
27+
margin: 15px 0;
28+
}
29+
30+
code {
31+
font-family: monospace;
32+
padding: 10px;
33+
white-space: pre-wrap;
34+
word-break: break-all;
35+
}
36+
37+
sub {
38+
align-items: center;
39+
display: flex;
40+
gap: 5px;
41+
}
42+
43+
sub img {
44+
cursor: pointer;
45+
}
46+
47+
input {
48+
width: 100%;
49+
height: 2rem;
50+
padding: 0.5rem;
51+
font-size: 1rem;
52+
border: 2px solid #ddd;
53+
border-radius: 8px;
54+
color: #444;
55+
outline: none;
56+
57+
transition:border .3s &:focus {
58+
border-color: #778;
59+
box-shadow: 0 0 1px #556;
60+
color: #444;
61+
}
62+
}
63+
}
64+
65+
.avatar {
66+
width: 1rem;
67+
height: 1rem;
68+
border-radius: 50%;
69+
margin: 0 0.5rem;
70+
}
71+
72+
.urlForm {
73+
display: flex;
74+
gap: 1rem;
75+
76+
input {
77+
width: 100%;
78+
}
79+
}

‎src/styles/Search.module.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.refList {
2+
flex: 1;
3+
list-style: none;
4+
overflow-y: auto;
5+
/* browsers like to cover the bottom row */
6+
padding: 0 0 24px 0;
7+
8+
li {
9+
margin: 0;
10+
&:first-child a {
11+
border-top: 1px solid #bbb;
12+
}
13+
font-size: 0.9rem;
14+
}
15+
16+
a {
17+
border-bottom: 1px solid #bbb;
18+
color: #444;
19+
display: flex;
20+
padding: 8px 12px;
21+
text-decoration: none;
22+
&:hover {
23+
background-color: #e2e2ee;
24+
}
25+
26+
& > span {
27+
overflow: hidden;
28+
text-overflow: ellipsis;
29+
white-space: nowrap;
30+
}
31+
}
32+
}

0 commit comments

Comments
 (0)