blob: e0e97cce2acf79d22b4694e20f4dfc806bf95ff4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, { useState } from "react";
import { LatestRun } from "../../lib/types";
import tw from "tailwind-styled-components";
const RecursiveDropdown: React.FC<{ data: any; skipKeys: string[] }> = ({
data,
skipKeys,
}) => {
if (typeof data !== "object" || data === null) {
return null;
}
return (
<>
{Object.entries(data).map(([key, value]) => {
if (skipKeys.includes(key)) {
return null;
}
// Special case for 'category' key
if (key === "category" && Array.isArray(value)) {
return (
<Section key={key}>
<Label>{key}:</Label>
<Data>{value.join(", ")}</Data>
</Section>
);
}
if (typeof value === "object" && value !== null) {
return (
<Dropdown key={key}>
<DropdownSummary>{key}</DropdownSummary>
<DropdownContent>
<RecursiveDropdown data={value} skipKeys={skipKeys} />
</DropdownContent>
</Dropdown>
);
} else {
return (
<Section key={key}>
<Label>{key}:</Label>
<Data>
{typeof value === "string" ? value : JSON.stringify(value)}
</Data>
</Section>
);
}
})}
</>
);
};
const RunData: React.FC<{ latestRun: LatestRun }> = ({ latestRun }) => {
const date = new Date(latestRun.benchmark_start_time);
return (
<Card>
<Section>
<Label>Command:</Label>
<Data>{latestRun.command}</Data>
</Section>
<Section>
<Label>Start time:</Label>
<Data>{date.toLocaleString()}</Data>
</Section>
<Section>
<Label>Run time:</Label>
<Data>{latestRun.metrics.run_time}</Data>
</Section>
<Section>
<Label>Highest difficulty:</Label>
<Data>
{latestRun.metrics.highest_difficulty.split(":")[1]?.slice(-1)}
</Data>
</Section>
{Object.keys(latestRun.tests).map((testKey) => (
<Dropdown key={testKey}>
<DropdownSummary>{testKey}</DropdownSummary>
<DropdownContent>
{latestRun.tests[testKey] && (
<RecursiveDropdown
data={latestRun.tests[testKey]}
skipKeys={["cost", "data_path"]}
/>
)}
</DropdownContent>
</Dropdown>
))}
</Card>
);
};
export default RunData;
const Card = tw.div`
bg-white
p-4
rounded
shadow-lg
w-full
mt-4
`;
const Section = tw.div`
mt-2
`;
const Label = tw.span`
font-medium
`;
const Data = tw.span`
ml-1
`;
const Dropdown = tw.details`
mt-4
`;
const DropdownSummary = tw.summary`
cursor-pointer
text-blue-500
`;
const DropdownContent = tw.div`
pl-4
mt-2
`;
|
