Skip to content

Commit ffe2bec

Browse files
kerthcetkerthcet
committed
optimize the whole page
Signed-off-by: kerthcet <kerthcet@gmail.com>
1 parent 665299c commit ffe2bec

8 files changed

Lines changed: 757 additions & 706 deletions

File tree

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

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState, useMemo } from 'react';
2-
import { Link } from 'react-router-dom';
1+
import { useState, useMemo, useEffect } from 'react';
2+
import { Link, useSearchParams } from 'react-router-dom';
33
import { Database, Search, Eye, ExternalLink, FileText, X } from 'lucide-react';
44
import { useTeamContext } from '../../context/team-context';
55
import { useDatasets } from '../../hooks/use-datasets';
@@ -25,16 +25,29 @@ import { ArtifactViewer } from '../../components/artifact-viewer';
2525
import { formatDistanceToNow } from 'date-fns';
2626
import type { Dataset } from '../../types';
2727

28-
const PAGE_SIZE = 20;
28+
const PAGE_SIZE = 10;
2929

3030
export function DatasetsPage() {
3131
const { selectedTeamId } = useTeamContext();
32+
const [searchParams] = useSearchParams();
3233
const [currentPage, setCurrentPage] = useState(0);
3334
const [searchQuery, setSearchQuery] = useState('');
3435
const [selectedDataset, setSelectedDataset] = useState<Dataset | null>(null);
3536
const [selectedFile, setSelectedFile] = useState<string>('');
3637
const [contentDialogOpen, setContentDialogOpen] = useState(false);
3738

39+
// Handle URL search parameters
40+
useEffect(() => {
41+
const experimentId = searchParams.get('experimentId');
42+
const runId = searchParams.get('runId');
43+
44+
if (experimentId) {
45+
setSearchQuery(experimentId);
46+
} else if (runId) {
47+
setSearchQuery(runId);
48+
}
49+
}, [searchParams]);
50+
3851
const { data: datasets, isLoading } = useDatasets(
3952
selectedTeamId || '',
4053
{ page: currentPage, pageSize: PAGE_SIZE, enabled: !!selectedTeamId }
@@ -99,8 +112,13 @@ export function DatasetsPage() {
99112
});
100113
}, [datasets, searchQuery]);
101114

102-
// Calculate total pages
115+
// Calculate total pages and items
103116
const totalPages = datasets && datasets.length === PAGE_SIZE ? currentPage + 2 : currentPage + 1;
117+
const totalItems = datasets
118+
? (datasets.length < PAGE_SIZE
119+
? currentPage * PAGE_SIZE + datasets.length
120+
: (currentPage + 1) * PAGE_SIZE)
121+
: 0;
104122

105123
const formatFileSize = (bytes: number) => {
106124
if (bytes < 1024) return `${bytes} B`;
@@ -259,14 +277,15 @@ export function DatasetsPage() {
259277
</CardContent>
260278

261279
{/* Pagination */}
262-
{!searchQuery && datasets && datasets.length === PAGE_SIZE && filteredDatasets.length > 0 && (
263-
<div className="p-4 border-t">
264-
<Pagination
265-
currentPage={currentPage}
266-
totalPages={totalPages}
267-
onPageChange={setCurrentPage}
268-
/>
269-
</div>
280+
{datasets && datasets.length > 0 && totalPages > 1 && (
281+
<Pagination
282+
currentPage={currentPage}
283+
totalPages={totalPages}
284+
pageSize={PAGE_SIZE}
285+
totalItems={totalItems}
286+
onPageChange={setCurrentPage}
287+
itemName="datasets"
288+
/>
270289
)}
271290
</Card>
272291
</div>

‎dashboard/src/pages/experiments/[id].tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useMemo } from 'react';
2-
import { Link, useParams } from 'react-router-dom';
3-
import { Search } from 'lucide-react';
2+
import { Link, useParams, useNavigate } from 'react-router-dom';
3+
import { Search, Database } from 'lucide-react';
44
import { useExperiment } from '../../hooks/use-experiments';
55
import { useRuns } from '../../hooks/use-runs';
66
import { useGroupedMetrics } from '../../hooks/use-metrics';
@@ -21,6 +21,7 @@ import {
2121
TableRow,
2222
} from '../../components/ui/table';
2323
import { Badge } from '../../components/ui/badge';
24+
import { Button } from '../../components/ui/button';
2425
import { Input } from '../../components/ui/input';
2526
import { Skeleton } from '../../components/ui/skeleton';
2627
import { Dropdown } from '../../components/ui/dropdown';
@@ -52,6 +53,7 @@ const PAGE_SIZE = 10;
5253

5354
export function ExperimentDetailPage() {
5455
const { id } = useParams<{ id: string }>();
56+
const navigate = useNavigate();
5557
const [activeTab, setActiveTab] = useState('overview');
5658
const [currentPage, setCurrentPage] = useState(0);
5759
const [searchQuery, setSearchQuery] = useState('');
@@ -155,9 +157,20 @@ export function ExperimentDetailPage() {
155157
{experiment.id}
156158
</p>
157159
</div>
158-
<Badge variant={STATUS_VARIANTS[experiment.status]}>
159-
{experiment.status}
160-
</Badge>
160+
<div className="flex items-center gap-2">
161+
<Button
162+
variant="outline"
163+
size="sm"
164+
onClick={() => navigate(`/datasets?experimentId=${experiment.id}`)}
165+
className="h-8 gap-2"
166+
>
167+
<Database className="h-3.5 w-3.5" />
168+
Datasets
169+
</Button>
170+
<Badge variant={STATUS_VARIANTS[experiment.status]}>
171+
{experiment.status}
172+
</Badge>
173+
</div>
161174
</div>
162175

163176
{/* Tabs */}

‎dashboard/src/pages/runs/[id].tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from 'react';
2-
import { useParams } from 'react-router-dom';
2+
import { useParams, useNavigate } from 'react-router-dom';
3+
import { Database } from 'lucide-react';
34
import { useRun } from '../../hooks/use-runs';
45
import {
56
Card,
@@ -9,6 +10,7 @@ import {
910
CardTitle,
1011
} from '../../components/ui/card';
1112
import { Badge } from '../../components/ui/badge';
13+
import { Button } from '../../components/ui/button';
1214
import { Skeleton } from '../../components/ui/skeleton';
1315
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
1416
import { TraceTimeline } from '../../components/traces/trace-timeline';
@@ -26,6 +28,7 @@ const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'war
2628

2729
export function RunDetailPage() {
2830
const { id } = useParams<{ id: string }>();
31+
const navigate = useNavigate();
2932

3033
const { data: run, isLoading: runLoading, error: runError } = useRun(id!);
3134

@@ -75,9 +78,20 @@ export function RunDetailPage() {
7578
{run.id}
7679
</p>
7780
</div>
78-
<Badge variant={STATUS_VARIANTS[run.status]}>
79-
{run.status}
80-
</Badge>
81+
<div className="flex items-center gap-2">
82+
<Button
83+
variant="outline"
84+
size="sm"
85+
onClick={() => navigate(`/datasets?runId=${run.id}`)}
86+
className="h-8 gap-2"
87+
>
88+
<Database className="h-3.5 w-3.5" />
89+
Datasets
90+
</Button>
91+
<Badge variant={STATUS_VARIANTS[run.status]}>
92+
{run.status}
93+
</Badge>
94+
</div>
8195
</div>
8296

8397
{/* Tabs */}

‎dashboard/static/assets/index-C5QbYXgI.js‎

Lines changed: 686 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dashboard/static/assets/index-BZv47-rS.css renamed to dashboard/static/assets/index-DM17g_ub.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dashboard/static/assets/index-OvcCDNv6.js‎

Lines changed: 0 additions & 681 deletions
This file was deleted.

dashboard/static/assets/react-plotly-Bym6PClm.js renamed to dashboard/static/assets/react-plotly-CuQtK8e-.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dashboard/static/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<link rel="icon" type="image/png" href="/static/assets/logo-D6hHn9pX.png" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>AlphaTrion</title>
9-
<script type="module" crossorigin src="/static/assets/index-OvcCDNv6.js"></script>
10-
<link rel="stylesheet" crossorigin href="/static/assets/index-BZv47-rS.css">
9+
<script type="module" crossorigin src="/static/assets/index-C5QbYXgI.js"></script>
10+
<link rel="stylesheet" crossorigin href="/static/assets/index-DM17g_ub.css">
1111
</head>
1212

1313
<body>

0 commit comments

Comments
 (0)