Skip to content

Commit 3aadad6

Browse files
platypiiplatypii
committed
Modern style
1 parent e726c69 commit 3aadad6

File tree

3 files changed

+129
-35
lines changed

3 files changed

+129
-35
lines changed

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "parquet-viewer",
2+
"name": "hyperparam-space",
33
"private": true,
44
"version": "0.1.0",
55
"license": "MIT",
@@ -13,25 +13,25 @@
1313
"test": "vitest run"
1414
},
1515
"dependencies": {
16-
"@huggingface/hub": "1.0.0",
17-
"@hyparam/components": "0.1.13",
18-
"hightable": "0.9.0",
16+
"@huggingface/hub": "1.0.1",
17+
"@hyparam/components": "0.1.18",
18+
"hightable": "0.10.0",
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": "2.1.8",
27-
"eslint": "9.17.0",
28-
"eslint-plugin-react": "7.37.2",
26+
"@vitest/coverage-v8": "3.0.7",
27+
"eslint": "9.21.0",
28+
"eslint-plugin-react": "7.37.4",
2929
"eslint-plugin-react-hooks": "5.1.0",
30-
"eslint-plugin-react-refresh": "0.4.16",
31-
"globals": "15.14.0",
32-
"typescript": "5.7.2",
33-
"typescript-eslint": "8.18.1",
34-
"vite": "5.4.11",
35-
"vitest": "2.1.8"
30+
"eslint-plugin-react-refresh": "0.4.19",
31+
"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"
3636
}
3737
}

‎src/components/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
5959
<form onSubmit={onUrlSubmit} style={{ display: 'flex', gap: '1rem' }}>
6060
<label htmlFor="url">URL</label>
6161
<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-
<button style={{ fontSize: '1rem', padding: '0 0.5rem' }} type="submit">Open</button>
62+
<button type="submit">Open</button>
6363
</form>
6464
</section>
6565
</div>

‎src/styles/index.css‎

Lines changed: 115 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
* {
22
box-sizing: border-box;
3+
font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
34
margin: 0;
45
padding: 0;
56
}
67

78
#app {
89
display: flex;
9-
font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
1010
flex-direction: column;
1111
height: 100vh;
1212
}
1313

1414
/* brand logo */
1515
.brand {
16-
color: #fff;
17-
display: flex;
1816
align-items: center;
19-
filter: drop-shadow(0 0 2px #444);
17+
color: #222;
18+
display: flex;
19+
filter: drop-shadow(0 0 2px #bbb);
2020
font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2121
font-size: 1.1em;
2222
font-weight: bold;
23+
letter-spacing: 0.3px;
2324
text-orientation: mixed;
24-
opacity: 0.85;
2525
padding: 10px 12px;
2626
user-select: none;
2727
writing-mode: vertical-rl;
2828
}
2929
.brand:hover {
30-
color: #fff;
31-
filter: drop-shadow(0 0 2px #333);
32-
opacity: 0.9;
30+
color: #222;
31+
filter: drop-shadow(0 0 2px #afa6b9);
3332
text-decoration: none;
3433
}
3534
.brand::before {
@@ -51,7 +50,36 @@ a:hover {
5150
text-decoration: underline;
5251
}
5352
button {
53+
background-color: #111;
54+
color: #eee;
5455
cursor: pointer;
56+
border-radius: 12px;
57+
border: none;
58+
font-size: 14px;
59+
font-weight: 600;
60+
height: 32px;
61+
padding: 0 16px;
62+
text-align: center;
63+
}
64+
button:active,
65+
button:focus,
66+
button:hover {
67+
background-color: #333;
68+
}
69+
70+
input {
71+
border: 2px solid #ddd;
72+
border-radius: 8px;
73+
color: #444;
74+
height: 32px;
75+
outline: none;
76+
padding: 8px 8px 8px 12px;
77+
transition: border 0.3s;
78+
}
79+
input:focus {
80+
border-color: #778;
81+
box-shadow: 0 0 1px #556;
82+
color: #444;
5583
}
5684

5785
/* layout */
@@ -61,15 +89,42 @@ main {
6189
max-width: 100vw;
6290
}
6391

92+
.spinner {
93+
border: 6px solid #e8e8e8;
94+
border-top: 6px solid #68a;
95+
border-radius: 50%;
96+
width: 32px;
97+
height: 32px;
98+
animation: spin 1s linear infinite, fadeIn 3s, ease-in-out forwards;
99+
}
100+
@keyframes spin {
101+
0% { transform: rotate(0deg); }
102+
100% { transform: rotate(360deg); }
103+
}
104+
@keyframes fadeIn {
105+
0% { opacity: 0; }
106+
100% { opacity: 1; }
107+
}
108+
.center {
109+
flex: 1;
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
}
114+
64115
/* sidebar */
65116
.nav {
66117
display: flex;
67118
flex-direction: column;
68119
height: 100vh;
69120
width: 48px;
70-
background-image: linear-gradient(to bottom, #667, #585669);
121+
}
122+
.nav > div {
123+
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
71124
box-shadow: 0 0 4px rgba(10, 10, 10, 0.5);
72125
height: 100vh;
126+
width: 48px;
127+
z-index: 30;
73128
}
74129

75130
/* content area */
@@ -93,19 +148,38 @@ main {
93148
/* top navbar */
94149
.top-header {
95150
align-items: center;
96-
background: linear-gradient(to right, #353540, #24202b);
97-
color: #dde4ea;
98151
display: flex;
152+
font-size: 18px;
99153
height: 32px;
100154
min-height: 32px;
101-
padding-left: 8px;
155+
padding: 0 10px 0 20px;
102156
}
103157
.top-header h1 {
104158
font-size: 18px;
105-
margin: 0;
159+
margin: 4px 0 0 0; /* top */
160+
user-select: none;
161+
}
162+
163+
.top-header-divided {
164+
border-bottom: 1px solid #ddd;
165+
background: #eee;
166+
}
167+
168+
.top-actions {
169+
margin-left: auto;
170+
}
171+
172+
/* search */
173+
.top-header input {
174+
border: 1px solid transparent;
175+
border-radius: 8px;
176+
font-size: 12px;
177+
flex-shrink: 1;
178+
height: 24px;
179+
min-width: 0;
106180
}
107-
.top-header a {
108-
color: #e0e8ee;
181+
.top-header input:focus {
182+
border: 1px solid #778;
109183
}
110184

111185
/* file path */
@@ -133,9 +207,10 @@ main {
133207
opacity: 1;
134208
}
135209
.path a {
136-
color: #f0f8ff;
210+
color: #222622;
137211
font-family: 'Courier New', Courier, monospace;
138212
font-size: 18px;
213+
font-weight: 600;
139214
transform: translateY(1px);
140215
/* ^ the monospace font slightly translates to the top, moving it by 1px better aligns with the icons */
141216
text-overflow: ellipsis;
@@ -243,11 +318,13 @@ main {
243318
max-height: 0;
244319
padding: 0;
245320
background-color: #dd111199;
246-
font-family: monospace;
247321
overflow-y: auto;
248322
transition: max-height 0.3s;
249323
white-space: pre-wrap;
250324
}
325+
.error-bar * {
326+
font-family: monospace;
327+
}
251328
.show-error {
252329
max-height: 30%;
253330
padding: 10px;
@@ -310,7 +387,7 @@ main {
310387
border-top: 1px solid #bbb;
311388
color: #444;
312389
display: flex;
313-
padding: 8px 12px;
390+
padding: 8px 16px 8px 20px;
314391
text-decoration: none;
315392
}
316393
.file-list a:hover {
@@ -359,7 +436,7 @@ main {
359436
}
360437
.view-header {
361438
align-items: center;
362-
background-color: #ccc;
439+
background-color: #f2f2f2;
363440
color: #444;
364441
display: flex;
365442
gap: 16px;
@@ -428,6 +505,21 @@ main {
428505
margin-top: 16px;
429506
}
430507

508+
/* table overrides */
509+
.table-container .table-corner {
510+
background: url('https://hyperparam.app/assets/table/space.svg') #f9f4ff no-repeat center 6px;
511+
}
512+
main .table-container .table th {
513+
background-color: #f1f1f3;
514+
}
515+
main .table td {
516+
cursor: pointer;
517+
}
518+
main .table tbody tr:hover th:first-child {
519+
background-color: #ccd;
520+
border-right: 1px solid #ccc;
521+
}
522+
431523
.slideContainer {
432524
display: flex;
433525
flex: 1;
@@ -472,16 +564,18 @@ main {
472564
.slideClose:hover {
473565
background: none;
474566
border: none;
475-
color: inherit;
567+
color: #888;
568+
font-size: 16px;
476569
height: 24px;
477570
margin-right: auto;
478571
outline: none;
572+
transition: color 0.3s;
479573
}
480574
.slideClose::before {
481575
content: "\27E9\27E9";
482576
}
483577
.slideClose:hover {
484-
font-weight: bold;
578+
color: #000;
485579
}
486580

487581
/* viewers */

0 commit comments

Comments
 (0)