Skip to content

Commit f5df096

Browse files
kerthcetkerthcet
authored
uptimize the dataset page (#200)
Signed-off-by: kerthcet <kerthcet@gmail.com>
1 parent aca5591 commit f5df096

5 files changed

Lines changed: 85 additions & 85 deletions

File tree

‎dashboard/src/pages/datasets/index.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -146,22 +146,22 @@ export function DatasetsPage() {
146146
<div className="flex items-center justify-between">
147147
<div>
148148
<h1 className="text-xl font-semibold tracking-tight text-foreground">Datasets</h1>
149-
<p className="mt-0.5 text-xs text-muted-foreground">
149+
<p className="mt-1 text-sm text-muted-foreground">
150150
Browse and manage datasets
151151
</p>
152152
</div>
153153

154154
{/* Search Bar */}
155155
<div className="relative w-80">
156-
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
156+
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
157157
<Input
158158
placeholder="Search datasets..."
159159
value={searchQuery}
160160
onChange={(e) => {
161161
setSearchQuery(e.target.value);
162162
setCurrentPage(0);
163163
}}
164-
className="pl-8 h-9 text-[13px] font-medium focus:bg-blue-50 focus:border-blue-300 focus-visible:ring-0"
164+
className="pl-8 h-9 text-sm focus:bg-blue-50 focus:border-blue-300 focus-visible:ring-0"
165165
/>
166166
</div>
167167
</div>
@@ -180,17 +180,17 @@ export function DatasetsPage() {
180180
</div>
181181
) : !datasets || datasets.length === 0 ? (
182182
<div className="flex flex-col items-center justify-center py-12">
183-
<Database className="h-8 w-8 text-muted-foreground/30 mb-2" />
184-
<p className="text-xs font-medium">No datasets found</p>
185-
<p className="text-[10px] text-muted-foreground mt-0.5">
183+
<Database className="h-10 w-10 text-muted-foreground/30 mb-3" />
184+
<p className="text-sm font-medium">No datasets found</p>
185+
<p className="text-xs text-muted-foreground mt-1">
186186
Create your first dataset to get started
187187
</p>
188188
</div>
189189
) : filteredDatasets.length === 0 ? (
190190
<div className="flex flex-col items-center justify-center py-12">
191-
<Search className="h-8 w-8 text-muted-foreground/30 mb-2" />
192-
<p className="text-xs font-medium">No matching datasets</p>
193-
<p className="text-[10px] text-muted-foreground mt-0.5">
191+
<Search className="h-10 w-10 text-muted-foreground/30 mb-3" />
192+
<p className="text-sm font-medium">No matching datasets</p>
193+
<p className="text-xs text-muted-foreground mt-1">
194194
Try adjusting your search query
195195
</p>
196196
</div>
@@ -213,10 +213,10 @@ export function DatasetsPage() {
213213
>
214214
<TableCell className="py-2">
215215
<div className="flex items-center gap-2">
216-
<Database className="h-3.5 w-3.5 text-blue-500 flex-shrink-0" />
216+
<Database className="h-4 w-4 text-blue-500 flex-shrink-0" />
217217
<div className="min-w-0">
218-
<p className="text-[13px] font-medium truncate">{dataset.name}</p>
219-
<p className="text-[10px] text-muted-foreground">
218+
<p className="text-sm font-medium truncate">{dataset.name}</p>
219+
<p className="text-xs text-muted-foreground">
220220
{formatDistanceToNow(new Date(dataset.createdAt), {
221221
addSuffix: true,
222222
})}
@@ -225,38 +225,38 @@ export function DatasetsPage() {
225225
</div>
226226
</TableCell>
227227
<TableCell className="py-2">
228-
<p className="text-[13px] text-muted-foreground line-clamp-1">
228+
<p className="text-sm text-muted-foreground line-clamp-1">
229229
{dataset.description || '-'}
230230
</p>
231231
</TableCell>
232232
<TableCell className="py-2">
233233
{dataset.experimentId ? (
234234
<Link
235235
to={`/experiments/${dataset.experimentId}`}
236-
className="inline-flex items-center gap-1 text-[13px] text-blue-600 hover:text-blue-700 hover:underline"
236+
className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 hover:underline"
237237
>
238238
<span className="font-mono truncate max-w-[100px]">
239239
{dataset.experimentId.slice(0, 8)}
240240
</span>
241-
<ExternalLink className="h-3 w-3 flex-shrink-0" />
241+
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
242242
</Link>
243243
) : (
244-
<span className="text-[13px] text-muted-foreground">-</span>
244+
<span className="text-sm text-muted-foreground">-</span>
245245
)}
246246
</TableCell>
247247
<TableCell className="py-2">
248248
{dataset.runId ? (
249249
<Link
250250
to={`/runs/${dataset.runId}`}
251-
className="inline-flex items-center gap-1 text-[13px] text-green-600 hover:text-green-700 hover:underline"
251+
className="inline-flex items-center gap-1 text-sm text-green-600 hover:text-green-700 hover:underline"
252252
>
253253
<span className="font-mono truncate max-w-[100px]">
254254
{dataset.runId.slice(0, 8)}
255255
</span>
256-
<ExternalLink className="h-3 w-3 flex-shrink-0" />
256+
<ExternalLink className="h-3.5 w-3.5 flex-shrink-0" />
257257
</Link>
258258
) : (
259-
<span className="text-[13px] text-muted-foreground">-</span>
259+
<span className="text-sm text-muted-foreground">-</span>
260260
)}
261261
</TableCell>
262262
<TableCell className="py-2 text-right">
@@ -295,13 +295,13 @@ export function DatasetsPage() {
295295
<div className="col-span-4">
296296
<Card className="h-full flex flex-col">
297297
{/* Dataset Header */}
298-
<div className="p-2 border-b bg-muted/30">
298+
<div className="p-3 border-b bg-muted/30">
299299
<div className="flex items-center justify-between gap-2">
300300
<div className="flex items-center gap-2 min-w-0 flex-1">
301-
<Database className="h-3.5 w-3.5 text-blue-500 flex-shrink-0" />
301+
<Database className="h-4 w-4 text-blue-500 flex-shrink-0" />
302302
<div className="min-w-0 flex-1">
303-
<p className="text-xs font-semibold truncate">{selectedDataset.name}</p>
304-
<p className="text-[10px] text-muted-foreground">
303+
<p className="text-sm font-semibold truncate">{selectedDataset.name}</p>
304+
<p className="text-xs text-muted-foreground">
305305
{files?.length || 0} {files?.length === 1 ? 'file' : 'files'}
306306
</p>
307307
</div>
@@ -313,9 +313,9 @@ export function DatasetsPage() {
313313
setSelectedDataset(null);
314314
setSelectedFile('');
315315
}}
316-
className="h-6 w-6 p-0"
316+
className="h-7 w-7 p-0"
317317
>
318-
<X className="h-3 w-3" />
318+
<X className="h-3.5 w-3.5" />
319319
</Button>
320320
</div>
321321
</div>
@@ -325,14 +325,14 @@ export function DatasetsPage() {
325325
{filesLoading ? (
326326
<div className="p-2 space-y-1">
327327
{[...Array(10)].map((_, i) => (
328-
<Skeleton key={i} className="h-9 w-full" />
328+
<Skeleton key={i} className="h-10 w-full" />
329329
))}
330330
</div>
331331
) : !files || files.length === 0 ? (
332332
<div className="flex flex-col items-center justify-center py-12 text-center">
333-
<FileText className="h-8 w-8 text-muted-foreground/30 mb-2" />
334-
<p className="text-xs font-medium">No files found</p>
335-
<p className="text-[10px] text-muted-foreground mt-0.5">
333+
<FileText className="h-10 w-10 text-muted-foreground/30 mb-3" />
334+
<p className="text-sm font-medium">No files found</p>
335+
<p className="text-xs text-muted-foreground mt-1">
336336
This dataset is empty
337337
</p>
338338
</div>
@@ -342,16 +342,16 @@ export function DatasetsPage() {
342342
<button
343343
key={file.filename}
344344
onClick={() => handleSelectFile(file.filename)}
345-
className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-accent transition-colors group text-left"
345+
className="w-full flex items-center gap-2 px-3 py-2 hover:bg-accent transition-colors group text-left"
346346
>
347-
<FileText className="h-3.5 w-3.5 text-blue-500 flex-shrink-0 group-hover:text-blue-600" />
347+
<FileText className="h-4 w-4 text-blue-500 flex-shrink-0 group-hover:text-blue-600" />
348348
<div className="flex-1 min-w-0">
349-
<p className="text-xs font-medium truncate">{file.filename}</p>
350-
<p className="text-[10px] text-muted-foreground">
349+
<p className="text-sm font-medium truncate">{file.filename}</p>
350+
<p className="text-xs text-muted-foreground">
351351
{formatFileSize(file.size)} • {file.contentType}
352352
</p>
353353
</div>
354-
<Eye className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
354+
<Eye className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
355355
</button>
356356
))}
357357
</div>

0 commit comments

Comments
 (0)