Skip to content

Commit 05e80fb

Browse files
gaukhar-ngaukhar-n
committed
Changed table components to HeroUI tables
1 parent 740b697 commit 05e80fb

File tree

7 files changed

+3080
-734
lines changed

7 files changed

+3080
-734
lines changed

‎app/projects/mtbench/components/sortable-table.tsx‎

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

‎app/projects/mtbench/components/sortable-tables.tsx‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
'use client'
2+
import data from "../data/data_leaderboard.json";
3+
import React from "react";
4+
import {
5+
Table,
6+
TableHeader,
7+
TableColumn,
8+
TableBody,
9+
TableRow,
10+
TableCell,
11+
getKeyValue,
12+
Spinner,
13+
} from "@heroui/react";
14+
import { useAsyncList } from "@react-stately/data";
15+
16+
// Define headers for each table
17+
const headers: { key: string; label: string }[] = [
18+
{ key: "model_name", label: "Model" },
19+
{ key: "stock_price_forecast_7_day_mae_ts", label: "Stock price prediction \n for 7 days under TS (MAE)" },
20+
{ key: "stock_price_forecast_7_day_mae_ts_w_text", label: "Stock price prediction for 7 days under TS+Text (MAE)" },
21+
{ key: "stock_price_forecast_7_day_mape_ts", label: "Stock price prediction for 7 days under TS (MAPE)" },
22+
{ key: "stock_price_forecast_7_day_mape_ts_w_text", label: "Stock price prediction for 7 days under TS+Text (MAPE)" },
23+
{ key: "stock_price_forecast_30_day_mae_ts", label: "Stock price prediction for 30 days under TS (MAE)" },
24+
{ key: "stock_price_forecast_30_day_mae_ts_w_text", label: "Stock price prediction for 30 days under TS+Text (MAE)" },
25+
{ key: "stock_price_forecast_30_day_mape_ts", label: "Stock price prediction for 30 days under TS (MAPE)" },
26+
{ key: "stock_price_forecast_30_day_mape_ts_w_text", label: "Stock price prediction for 30 days under TS+Text (MAPE)" },
27+
{ key: "temp_forecast_7_day_mse_ts", label: "Temp. prediction for 7 days under TS (MSE)" },
28+
{ key: "temp_forecast_7_day_mse_ts_w_text", label: "Temp. prediction for 7 days under TS+Text (MSE)" },
29+
{ key: "temp_forecast_7_day_mae_ts", label: "Temp. prediction for 7 days under TS (MAE)" },
30+
{ key: "temp_forecast_7_day_mae_ts_w_text", label: "Temp. prediction for 7 days under TS+Text (MAE)" },
31+
{ key: "temp_forecast_14_day_mse_ts", label: "Temp. prediction for 14 days under TS (MSE)" },
32+
{ key: "temp_forecast_14_day_mse_ts_w_text", label: "Temp. prediction for 14 days under TS+Text (MSE)" },
33+
{ key: "temp_forecast_14_day_mae_ts", label: "Temp. prediction for 14 days under TS (MAE)" },
34+
{ key: "temp_forecast_14_day_mae_ts_w_text", label: "Temp. prediction for 14 days under TS+Text (MAE)" },
35+
{ key: "stock_trend_predict_acc_7_day_3_way_ts", label: "Stock trend prediction for 7 days 3-way under TS (Acc)" },
36+
{ key: "stock_trend_predict_acc_7_day_3_way_ts_w_text", label: "Stock trend prediction for 7 days 3-way under TS+Text (Acc)" },
37+
{ key: "stock_trend_predict_acc_7_day_5_way_ts", label: "Stock trend prediction for 7 days 5-way under TS (Acc)" },
38+
{ key: "stock_trend_predict_acc_7_day_5_way_ts_w_text", label: "Stock trend prediction for 7 days 5-way under TS+Text (Acc)" },
39+
{ key: "stock_trend_predict_acc_30_day_3_way_ts", label: "Stock trend prediction for 30 days 3-way under TS (Acc)" },
40+
{ key: "stock_trend_predict_acc_30_day_3_way_ts_w_text", label: "Stock trend prediction for 30 days 3-way under TS+Text (Acc)" },
41+
{ key: "stock_trend_predict_acc_30_day_5_way_ts", label: "Stock trend prediction for 30 days 5-way under TS (Acc)" },
42+
{ key: "stock_trend_predict_acc_30_day_5_way_ts_w_text", label: "Stock trend prediction for 30 days 5-way under TS+Text (Acc)" },
43+
{ key: "temp_trend_predict_acc_past_ts", label: "Temp. trend prediction past under TS (Acc)" },
44+
{ key: "temp_trend_predict_acc_past_ts_w_text", label: "Temp. trend prediction past under TS+Text (Acc)" },
45+
{ key: "temp_trend_predict_acc_future_ts", label: "Temp. trend prediction future under TS (Acc)" },
46+
{ key: "temp_trend_predict_acc_future_ts_w_text", label: "Temp. trend prediction future under TS+Text (Acc)" },
47+
{ key: "stock_indicator_predict_mse_7_day_macd_ts", label: "MACD prediction for 7 days under TS (MSE)" },
48+
{ key: "stock_indicator_predict_mse_7_day_macd_ts_w_text", label: "MACD prediction for 7 days under TS+Text (MSE)" },
49+
{ key: "stock_indicator_predict_mse_7_day_bb_ts", label: "Bollinger Bands prediction for 7 days under TS (MSE)" },
50+
{ key: "stock_indicator_predict_mse_7_day_bb_ts_w_text", label: "Bollinger Bands prediction for 7 days under TS+Text (MSE)" },
51+
{ key: "stock_indicator_predict_mse_30_day_macd_ts", label: "MACD prediction for 30 days under TS (MSE)" },
52+
{ key: "stock_indicator_predict_mse_30_day_macd_ts_w_text", label: "MACD prediction for 30 days under TS+Text (MSE)" },
53+
{ key: "stock_indicator_predict_mse_30_day_bb_ts", label: "Bollinger Bands prediction for 30 days under TS (MSE)" },
54+
{ key: "stock_indicator_predict_mse_30_day_bb_ts_w_text", label: "Bollinger Bands prediction for 30 days under TS+Text (MSE)" },
55+
{ key: "temp_predict_max_mse_ts", label: "Temp. prediction max under TS (MSE)" },
56+
{ key: "temp_predict_max_mse_ts_w_text", label: "Temp. prediction max under TS+Text (MSE)" },
57+
{ key: "temp_predict_max_mae_ts", label: "Temp. prediction max under TS (MAE)" },
58+
{ key: "temp_predict_max_mae_ts_w_text", label: "Temp. prediction max under TS+Text (MAE)" },
59+
{ key: "temp_predict_min_mse_ts", label: "Temp. prediction min under TS (MSE)" },
60+
{ key: "temp_predict_min_mse_ts_w_text", label: "Temp. prediction min under TS+Text (MSE)" },
61+
{ key: "temp_predict_min_mae_ts", label: "Temp. prediction min under TS (MAE)" },
62+
{ key: "temp_predict_min_mae_ts_w_text", label: "Temp. prediction min under TS+Text (MAE)" },
63+
{ key: "temp_predict_diff_mse_ts", label: "Temp. prediction diff. under TS (MSE)" },
64+
{ key: "temp_predict_diff_mse_ts_w_text", label: "Temp. prediction diff. under TS+Text (MSE)" },
65+
{ key: "temp_predict_diff_mae_ts", label: "Temp. prediction diff. under TS (MAE)" },
66+
{ key: "temp_predict_diff_mae_ts_w_text", label: "Temp. prediction diff. under TS+Text (MAE)" },
67+
{ key: "news_stock_corr_acc_7_day_3_way", label: "News stock corr. for 7 days 3-way (Acc)" },
68+
{ key: "news_stock_corr_acc_7_day_5_way", label: "News stock corr. for 7 days 5-way (Acc)" },
69+
{ key: "news_stock_corr_acc_30_day_3_way", label: "News stock corr. for 30 days 3-way (Acc)" },
70+
{ key: "news_stock_corr_acc_30_day_5_way", label: "News stock corr. for 30 days 5-way (Acc)" },
71+
{ key: "news_driven_mcqa_acc_7_day_fin", label: "News driven MCQA for 7 days for Finance data (Acc)" },
72+
{ key: "news_driven_mcqa_acc_7_day_weather", label: "News driven MCQA for 7 days for Weather data (Acc)" },
73+
{ key: "news_driven_mcqa_acc_30_day_fin", label: "News driven MCQA for 30 days for Finance data (Acc)" },
74+
{ key: "news_driven_mcqa_acc_30_day_weather", label: "News driven MCQA for 30 days for Weather data (Acc)" }
75+
76+
];
77+
78+
const headers1: { key: string; label: string }[] = [
79+
{ key: "model_name", label: "Model" },
80+
{ key: "stock_price_forecast_7_day_mae_ts", label: "Stock price prediction \n for 7 days under TS (MAE)" },
81+
{ key: "stock_price_forecast_7_day_mae_ts_w_text", label: "Stock price prediction for 7 days under TS+Text (MAE)" },
82+
{ key: "stock_price_forecast_7_day_mape_ts", label: "Stock price prediction for 7 days under TS (MAPE)" },
83+
{ key: "stock_price_forecast_7_day_mape_ts_w_text", label: "Stock price prediction for 7 days under TS+Text (MAPE)" },
84+
{ key: "stock_price_forecast_30_day_mae_ts", label: "Stock price prediction for 30 days under TS (MAE)" },
85+
{ key: "stock_price_forecast_30_day_mae_ts_w_text", label: "Stock price prediction for 30 days under TS+Text (MAE)" },
86+
{ key: "stock_price_forecast_30_day_mape_ts", label: "Stock price prediction for 30 days under TS (MAPE)" },
87+
{ key: "stock_price_forecast_30_day_mape_ts_w_text", label: "Stock price prediction for 30 days under TS+Text (MAPE)" },
88+
{ key: "temp_forecast_7_day_mse_ts", label: "Temp. prediction for 7 days under TS (MSE)" },
89+
{ key: "temp_forecast_7_day_mse_ts_w_text", label: "Temp. prediction for 7 days under TS+Text (MSE)" },
90+
{ key: "temp_forecast_7_day_mae_ts", label: "Temp. prediction for 7 days under TS (MAE)" },
91+
{ key: "temp_forecast_7_day_mae_ts_w_text", label: "Temp. prediction for 7 days under TS+Text (MAE)" },
92+
{ key: "temp_forecast_14_day_mse_ts", label: "Temp. prediction for 14 days under TS (MSE)" },
93+
{ key: "temp_forecast_14_day_mse_ts_w_text", label: "Temp. prediction for 14 days under TS+Text (MSE)" },
94+
{ key: "temp_forecast_14_day_mae_ts", label: "Temp. prediction for 14 days under TS (MAE)" },
95+
{ key: "temp_forecast_14_day_mae_ts_w_text", label: "Temp. prediction for 14 days under TS+Text (MAE)" },
96+
];
97+
98+
const headers2: { key: string; label: string }[] = [
99+
{ key: "model_name", label: "Model" },
100+
{ key: "stock_trend_predict_acc_7_day_3_way_ts", label: "Stock trend prediction for 7 days 3-way under TS (Acc)" },
101+
{ key: "stock_trend_predict_acc_7_day_3_way_ts_w_text", label: "Stock trend prediction for 7 days 3-way under TS+Text (Acc)" },
102+
{ key: "stock_trend_predict_acc_7_day_5_way_ts", label: "Stock trend prediction for 7 days 5-way under TS (Acc)" },
103+
{ key: "stock_trend_predict_acc_7_day_5_way_ts_w_text", label: "Stock trend prediction for 7 days 5-way under TS+Text (Acc)" },
104+
{ key: "stock_trend_predict_acc_30_day_3_way_ts", label: "Stock trend prediction for 30 days 3-way under TS (Acc)" },
105+
{ key: "stock_trend_predict_acc_30_day_3_way_ts_w_text", label: "Stock trend prediction for 30 days 3-way under TS+Text (Acc)" },
106+
{ key: "stock_trend_predict_acc_30_day_5_way_ts", label: "Stock trend prediction for 30 days 5-way under TS (Acc)" },
107+
{ key: "stock_trend_predict_acc_30_day_5_way_ts_w_text", label: "Stock trend prediction for 30 days 5-way under TS+Text (Acc)" },
108+
{ key: "temp_trend_predict_acc_past_ts", label: "Temp. trend prediction past under TS (Acc)" },
109+
{ key: "temp_trend_predict_acc_past_ts_w_text", label: "Temp. trend prediction past under TS+Text (Acc)" },
110+
{ key: "temp_trend_predict_acc_future_ts", label: "Temp. trend prediction future under TS (Acc)" },
111+
{ key: "temp_trend_predict_acc_future_ts_w_text", label: "Temp. trend prediction future under TS+Text (Acc)" },
112+
];
113+
114+
const headers3: { key: string; label: string }[] = [
115+
{ key: "model_name", label: "Model" },
116+
{ key: "stock_indicator_predict_mse_7_day_macd_ts", label: "MACD prediction for 7 days under TS (MSE)" },
117+
{ key: "stock_indicator_predict_mse_7_day_macd_ts_w_text", label: "MACD prediction for 7 days under TS+Text (MSE)" },
118+
{ key: "stock_indicator_predict_mse_7_day_bb_ts", label: "Bollinger Bands prediction for 7 days under TS (MSE)" },
119+
{ key: "stock_indicator_predict_mse_7_day_bb_ts_w_text", label: "Bollinger Bands prediction for 7 days under TS+Text (MSE)" },
120+
{ key: "stock_indicator_predict_mse_30_day_macd_ts", label: "MACD prediction for 30 days under TS (MSE)" },
121+
{ key: "stock_indicator_predict_mse_30_day_macd_ts_w_text", label: "MACD prediction for 30 days under TS+Text (MSE)" },
122+
{ key: "stock_indicator_predict_mse_30_day_bb_ts", label: "Bollinger Bands prediction for 30 days under TS (MSE)" },
123+
{ key: "stock_indicator_predict_mse_30_day_bb_ts_w_text", label: "Bollinger Bands prediction for 30 days under TS+Text (MSE)" },
124+
{ key: "temp_predict_max_mse_ts", label: "Temp. prediction max under TS (MSE)" },
125+
{ key: "temp_predict_max_mse_ts_w_text", label: "Temp. prediction max under TS+Text (MSE)" },
126+
{ key: "temp_predict_max_mae_ts", label: "Temp. prediction max under TS (MAE)" },
127+
{ key: "temp_predict_max_mae_ts_w_text", label: "Temp. prediction max under TS+Text (MAE)" },
128+
{ key: "temp_predict_min_mse_ts", label: "Temp. prediction min under TS (MSE)" },
129+
{ key: "temp_predict_min_mse_ts_w_text", label: "Temp. prediction min under TS+Text (MSE)" },
130+
{ key: "temp_predict_min_mae_ts", label: "Temp. prediction min under TS (MAE)" },
131+
{ key: "temp_predict_min_mae_ts_w_text", label: "Temp. prediction min under TS+Text (MAE)" },
132+
{ key: "temp_predict_diff_mse_ts", label: "Temp. prediction diff. under TS (MSE)" },
133+
{ key: "temp_predict_diff_mse_ts_w_text", label: "Temp. prediction diff. under TS+Text (MSE)" },
134+
{ key: "temp_predict_diff_mae_ts", label: "Temp. prediction diff. under TS (MAE)" },
135+
{ key: "temp_predict_diff_mae_ts_w_text", label: "Temp. prediction diff. under TS+Text (MAE)" },
136+
];
137+
138+
const headers4: { key: string; label: string }[] = [
139+
{ key: "model_name", label: "Model" },
140+
{ key: "news_stock_corr_acc_7_day_3_way", label: "News stock corr. for 7 days 3-way (Acc)" },
141+
{ key: "news_stock_corr_acc_7_day_5_way", label: "News stock corr. for 7 days 5-way (Acc)" },
142+
{ key: "news_stock_corr_acc_30_day_3_way", label: "News stock corr. for 30 days 3-way (Acc)" },
143+
{ key: "news_stock_corr_acc_30_day_5_way", label: "News stock corr. for 30 days 5-way (Acc)" },
144+
{ key: "news_driven_mcqa_acc_7_day_fin", label: "News driven MCQA for 7 days for Finance data (Acc)" },
145+
{ key: "news_driven_mcqa_acc_7_day_weather", label: "News driven MCQA for 7 days for Weather data (Acc)" },
146+
{ key: "news_driven_mcqa_acc_30_day_fin", label: "News driven MCQA for 30 days for Finance data (Acc)" },
147+
{ key: "news_driven_mcqa_acc_30_day_weather", label: "News driven MCQA for 30 days for Weather data (Acc)" }
148+
];
149+
150+
function createSortableTable(headers: { key: string; label: string }[]) {
151+
return function SortableTableComponent() {
152+
const [isLoading, setIsLoading] = React.useState(true);
153+
type ModelItem = {
154+
model_name: string;
155+
[key: string]: any;
156+
}
157+
let list = useAsyncList<ModelItem>({
158+
async load({ }) {
159+
setIsLoading(false);
160+
return {
161+
items: data,
162+
};
163+
},
164+
165+
async sort({ items, sortDescriptor }) {
166+
return {
167+
items: items.sort((a, b) => {
168+
let first = a[sortDescriptor.column];
169+
let second = b[sortDescriptor.column];
170+
let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
171+
172+
if (sortDescriptor.direction === "descending") {
173+
cmp *= -1;
174+
}
175+
176+
return cmp;
177+
}),
178+
};
179+
},
180+
});
181+
182+
return (
183+
<Table
184+
aria-label="Dynamic sortable table"
185+
classNames={{
186+
table: "min-h-[400px]",
187+
}}
188+
sortDescriptor={list.sortDescriptor}
189+
onSortChange={list.sort}>
190+
<TableHeader>
191+
{headers.map((h) => (
192+
<TableColumn key={h.key} allowsSorting className="whitespace-normal break-words text-sm max-w-[150px]">
193+
{h.label}
194+
</TableColumn>
195+
))}
196+
</TableHeader>
197+
<TableBody
198+
isLoading={isLoading}
199+
items={list.items}
200+
loadingContent={<Spinner label="Loading..." />}
201+
>
202+
{(item) => (
203+
204+
<TableRow key={item.model_name} className="hover:bg-white/10">
205+
{(columnKey) => (
206+
<TableCell className={
207+
columnKey === "model_name"
208+
? "sticky left-0 z-10 whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px]"
209+
: ""}>
210+
{getKeyValue(item, columnKey)}
211+
</TableCell>
212+
)}
213+
</TableRow>
214+
)}
215+
</TableBody>
216+
</Table>
217+
);
218+
};
219+
}
220+
221+
// Create separate tables
222+
const SortableTable = createSortableTable(headers);
223+
const SortableTableTask1 = createSortableTable(headers1);
224+
const SortableTableTask2 = createSortableTable(headers2);
225+
const SortableTableTask3 = createSortableTable(headers3);
226+
const SortableTableTask4 = createSortableTable(headers4);
227+
228+
// Export all tables
229+
export { SortableTable, SortableTableTask1, SortableTableTask2, SortableTableTask3, SortableTableTask4 };

‎app/projects/mtbench/components/table.tsx‎ renamed to ‎app/projects/mtbench/components/tables.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,45 @@
11
import { useState } from "react";
2-
import {SortableTable, SortableTable1, SortableTable2, SortableTable3, SortableTable4} from "./sortable-table";
3-
import data from "../data/data_leaderboard.json";
4-
import "../styles/table.css";
2+
import { SortableTable, SortableTableTask1, SortableTableTask2, SortableTableTask3, SortableTableTask4 } from "./sortable-tables";
53

64
function Table() {
75
return (
86
<div className="table-wrapper">
9-
<SortableTable data={data} />
7+
<SortableTable />
108
</div>
119
);
1210
}
1311

1412
function Table1() {
1513
return (
1614
<div className="table-wrapper">
17-
<SortableTable1 data={data} />
15+
<SortableTableTask1 />
1816
</div>
1917
);
2018
}
2119

2220
function Table2() {
2321
return (
2422
<div className="table-wrapper">
25-
<SortableTable2 data={data} />
23+
<SortableTableTask2 />
2624
</div>
2725
);
2826
}
2927

3028
function Table3() {
3129
return (
3230
<div className="table-wrapper">
33-
<SortableTable3 data={data} />
31+
<SortableTableTask3 />
3432
</div>
3533
);
3634
}
3735

3836
function Table4() {
3937
return (
4038
<div className="table-wrapper">
41-
<SortableTable4 data={data} />
39+
<SortableTableTask4 />
4240
</div>
4341
);
4442
}
4543

4644
// Exporting all four tables
47-
export { Table, Table1, Table2, Table3, Table4 };
48-
49-
// export default Table;
50-
45+
export { Table, Table1, Table2, Table3, Table4 };

‎app/projects/mtbench/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { Authors, Badges} from '@/components/utils'
3-
import { Table, Table1, Table2, Table3, Table4} from './components/table.tsx'
3+
import { Table, Table1, Table2, Table3, Table4} from './components/tables.tsx'
44

55
# MTBench: A Multimodal Time Series Benchmark for Temporal Reasoning and Question Answering
66

‎app/projects/mtbench/styles/table.css‎

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

0 commit comments

Comments
 (0)