Skip to content

Commit 56b0ed1

Browse files
alexanderbockalexanderbock
committed
Split into separate components
1 parent 557ddb4 commit 56b0ed1

7 files changed

Lines changed: 266 additions & 251 deletions

File tree

‎backend/frontend/src/components/ImageThumbnail.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Anchor } from '@mantine/core'
2+
3+
export function ImageThumbnail({
4+
type, group, name, hardware, timestamp, stopPropagation = false,
5+
}: {
6+
type: string
7+
group: string
8+
name: string
9+
hardware: string
10+
timestamp?: string
11+
stopPropagation?: boolean
12+
}) {
13+
const timePart = timestamp ? `/${timestamp}` : ''
14+
return (
15+
<Anchor
16+
href={`/api/result/${type}/${group}/${name}/${hardware}${timePart}`}
17+
target="_blank"
18+
onClick={stopPropagation ? (e: React.MouseEvent) => e.stopPropagation() : undefined}
19+
>
20+
<img
21+
src={`/api/result/${type}-thumbnail/${group}/${name}/${hardware}${timePart}`}
22+
style={{ width: 85, height: 47.8125 }}
23+
loading="lazy"
24+
alt={type}
25+
/>
26+
</Anchor>
27+
)
28+
}

‎backend/frontend/src/components/SortableHeader.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Table } from '@mantine/core'
2+
import { SortColumn } from '../types'
3+
4+
export function SortableHeader({
5+
sortKey,
6+
label,
7+
onSort,
8+
}: {
9+
sortKey: SortColumn
10+
label: string
11+
onSort: (col: SortColumn) => void
12+
}) {
13+
return (
14+
<Table.Th style={{ cursor: 'pointer' }} onClick={() => onSort(sortKey)}>
15+
{label}
16+
</Table.Th>
17+
)
18+
}

‎backend/frontend/src/components/TestHistory.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { Anchor, Box, Button, Table, Text } from '@mantine/core'
2+
import { TestRecord, TestData } from '../types'
3+
import { diffDisplay, diffStyle, timingDisplay } from '../utils'
4+
import { ImageThumbnail } from './ImageThumbnail'
5+
6+
export function TestHistory({
7+
record,
8+
onUpdateReference,
9+
}: {
10+
record: TestRecord
11+
onUpdateReference: (record: TestRecord) => void
12+
}) {
13+
const testData = [...record.data].reverse()
14+
15+
function imageRow(type: string) {
16+
return (
17+
<Table.Tr key={type}>
18+
<Table.Td style={{ transform: 'rotate(270deg)', whiteSpace: 'nowrap', width: 20 }}>
19+
{type.charAt(0).toUpperCase() + type.slice(1)}
20+
</Table.Td>
21+
{testData.map((d: TestData) => (
22+
<Table.Td key={d.timeStamp}>
23+
<ImageThumbnail
24+
type={type}
25+
group={record.group}
26+
name={record.name}
27+
hardware={record.hardware}
28+
timestamp={d.timeStamp}
29+
/>
30+
</Table.Td>
31+
))}
32+
</Table.Tr>
33+
)
34+
}
35+
36+
return (
37+
<Box p="md" bg="dark.8">
38+
<Table horizontalSpacing="xs" verticalSpacing={4}>
39+
<Table.Tbody>
40+
<Table.Tr>
41+
<Table.Td />
42+
{testData.map((d: TestData) => (
43+
<Table.Td
44+
key={d.timeStamp}
45+
style={{ ...diffStyle(d.pixelError), width: 20, height: 15, padding: 0 }}
46+
/>
47+
))}
48+
</Table.Tr>
49+
<Table.Tr>
50+
<Table.Td />
51+
{testData.map((d: TestData) => (
52+
<Table.Td key={d.timeStamp}>
53+
<Text size="xs" c="dimmed">{new Date(d.timeStamp).toUTCString()}</Text>
54+
</Table.Td>
55+
))}
56+
</Table.Tr>
57+
<Table.Tr>
58+
<Table.Td />
59+
{testData.map((d: TestData) => (
60+
<Table.Td key={d.timeStamp}>
61+
<Box px={4} style={{ borderRadius: 4, display: 'inline-block', ...diffStyle(d.pixelError) }}>
62+
<Text size="sm">{diffDisplay(d.pixelError)}</Text>
63+
</Box>
64+
</Table.Td>
65+
))}
66+
</Table.Tr>
67+
<Table.Tr>
68+
<Table.Td />
69+
{testData.map((d: TestData) => (
70+
<Table.Td key={d.timeStamp}>
71+
<Anchor
72+
size="xs"
73+
href={`https://github.com/OpenSpace/OpenSpace/commit/${d.commitHash}`}
74+
target="_blank"
75+
>
76+
{d.commitHash.substring(0, 8)}
77+
</Anchor>
78+
</Table.Td>
79+
))}
80+
</Table.Tr>
81+
<Table.Tr>
82+
<Table.Td />
83+
{testData.map((d: TestData) => (
84+
<Table.Td key={d.timeStamp}>
85+
<Text size="sm">{timingDisplay(d.timing)}</Text>
86+
</Table.Td>
87+
))}
88+
</Table.Tr>
89+
<Table.Tr>
90+
<Table.Td />
91+
{testData.map((d: TestData) => (
92+
<Table.Td key={d.timeStamp}>
93+
<Anchor
94+
size="xs"
95+
href={`/api/result/log/${record.group}/${record.name}/${record.hardware}/${d.timeStamp}`}
96+
target="_blank"
97+
>
98+
Log ({d.nErrors} errors)
99+
</Anchor>
100+
</Table.Td>
101+
))}
102+
</Table.Tr>
103+
{imageRow('candidate')}
104+
{imageRow('reference')}
105+
{imageRow('difference')}
106+
<Table.Tr>
107+
<Table.Td />
108+
<Table.Td>
109+
<Button size="xs" variant="default" onClick={() => onUpdateReference(record)}>
110+
Upgrade Candidate to Reference
111+
</Button>
112+
</Table.Td>
113+
{testData.slice(1).map((d: TestData) => (
114+
<Table.Td key={d.timeStamp} />
115+
))}
116+
</Table.Tr>
117+
</Table.Tbody>
118+
</Table>
119+
</Box>
120+
)
121+
}

‎backend/frontend/src/components/TestRow.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Anchor, Box, Table, Text } from '@mantine/core'
2+
import { TestRecord } from '../types'
3+
import { diffDisplay, diffStyle, timingDisplay } from '../utils'
4+
import { ImageThumbnail } from './ImageThumbnail'
5+
6+
export function TestRow({
7+
record,
8+
onOpen,
9+
}: {
10+
record: TestRecord
11+
onOpen: (record: TestRecord) => void
12+
}) {
13+
const latestData = record.data[record.data.length - 1]
14+
if (!latestData) return null
15+
16+
return (
17+
<Table.Tr style={{ cursor: 'pointer' }} onClick={() => onOpen(record)}>
18+
<Table.Td>
19+
<Box
20+
px={6}
21+
py={2}
22+
style={{ borderRadius: 4, textAlign: 'center', fontSize: 13, ...diffStyle(latestData.pixelError) }}
23+
>
24+
{diffDisplay(latestData.pixelError)}
25+
</Box>
26+
</Table.Td>
27+
<Table.Td>{record.group}</Table.Td>
28+
<Table.Td>{record.name}</Table.Td>
29+
<Table.Td>{record.hardware}</Table.Td>
30+
<Table.Td>{timingDisplay(latestData.timing)}</Table.Td>
31+
<Table.Td>
32+
<Anchor
33+
size="sm"
34+
href={`https://github.com/OpenSpace/OpenSpace/commit/${latestData.commitHash}`}
35+
target="_blank"
36+
onClick={(e: React.MouseEvent) => e.stopPropagation()}
37+
>
38+
{latestData.commitHash.substring(0, 8)}
39+
</Anchor>
40+
</Table.Td>
41+
<Table.Td>
42+
<Text size="sm">{new Date(latestData.timeStamp).toISOString()}</Text>
43+
</Table.Td>
44+
<Table.Td>
45+
<ImageThumbnail
46+
type="candidate" group={record.group} name={record.name}
47+
hardware={record.hardware} stopPropagation
48+
/>
49+
</Table.Td>
50+
<Table.Td>
51+
<ImageThumbnail
52+
type="reference" group={record.group} name={record.name}
53+
hardware={record.hardware} stopPropagation
54+
/>
55+
</Table.Td>
56+
<Table.Td>
57+
<ImageThumbnail
58+
type="difference" group={record.group} name={record.name}
59+
hardware={record.hardware} stopPropagation
60+
/>
61+
</Table.Td>
62+
</Table.Tr>
63+
)
64+
}

0 commit comments

Comments
 (0)