Skip to content

Website: Add benchmark set summary slides and table #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siddharth-krishna merged 22 commits into from
Apr 11, 2025
Merged

Website: Add benchmark set summary slides and table #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
5ed7ff3
feat: update chart
jacek-oet Feb 24, 2025
9d4759b
feat: update column header for sgm mode
jacek-oet Feb 25, 2025
83895b6
feat: use the Runtime (s) value for non-ok statuses
jacek-oet Feb 26, 2025
509c021
115 benchmark details add relative performance plot from matthias
jacek-oet Feb 27, 2025
d815d40
feat: improve performance chart styling and formatting
jacek-oet Feb 28, 2025
b7c22bc
feat: update num solved benchmarks count
jacek-oet Feb 28, 2025
6d7bd90
Merge branch '114-Home-SGM-on-intersection-of-benchmarks-solved-by-al…
jacek-oet Feb 28, 2025
4493d4a
fix: typo
jacek-oet Feb 28, 2025
66b4fba
Website: Improvement in Benchmark Summary Table
jacek-oet Mar 3, 2025
7b3bbfc
feat: add N. of Problems
jacek-oet Mar 7, 2025
ad0e9dd
feat: add maximum runtime line and label to performance bar chart
jacek-oet Mar 18, 2025
1db1276
fix: formatting issues in performance chart display
jacek-oet Mar 20, 2025
56a58f2
fix: correct logic for performance bar chart height calculation
jacek-oet Mar 21, 2025
75d79aa
feat: update BenchmarkSummaryTable to include rowSpan for improved
jacek-oet Mar 21, 2025
3dfd768
Merge branch 'main' of https://github.com/open-energy-transition/solv…
jacek-oet Mar 24, 2025
e376337
fix: merge
jacek-oet Mar 27, 2025
292e7aa
fix: merge
jacek-oet Apr 8, 2025
95d974e
Merge branch 'main' of https://github.com/open-energy-transition/solv…
jacek-oet Apr 10, 2025
0fda15b
refactor: Optimize color mapping logic in RowChart component, clean u…
jacek-oet Apr 10, 2025
20e96b0
refactor: Remove unused DetailSection import from benchmark detail an…
jacek-oet Apr 10, 2025
1a31e21
refactor: Remove redundant heading from BenchmarkSummaryTable component
jacek-oet Apr 11, 2025
2c625fc
Merge branch 'main' into 119-Benchmark-summary-table-from-slides-(or-…
siddharth-krishna Apr 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 189 additions & 22 deletions website-nextjs/src/components/admin/benchmarks/BenchmarkSummaryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ const BenchmarkSummaryTable = () => {
return state.results.metaData;
});

const nOfProblems = [
"Total number of benchmark problems",
"Total number of benchmark size instances",
];
const availableModels = useSelector((state: { results: IResultState }) => {
return state.results.availableModels;
});
Expand Down Expand Up @@ -51,13 +55,20 @@ const BenchmarkSummaryTable = () => {
const sectorsMap = new Map<string, number>();
const milpFeaturesMap = new Map<string, number>();
const timeHorizonsMap = new Map<string, number>();
const realSizesMap = new Map<string, number>();
const nOfProblemsMap = new Map<string, number>();

function updateData(data: Map<string, number>, key: string) {
data.set(key, (data.get(key) || 0) + 1);
}

Object.keys(metaData).forEach((key) => {
if (metaData[key].modelName === model) {
// Number of problems
updateData(nOfProblemsMap, "totalNOfDiffProblems");
metaData[key].sizes.forEach(() => {
updateData(nOfProblemsMap, "multipleSizes");
});

availableTechniques.forEach((technique) => {
if (metaData[key].technique === technique) {
updateData(techniquesMap, technique);
Expand All @@ -83,8 +94,17 @@ const BenchmarkSummaryTable = () => {
updateData(timeHorizonsMap, timeHorizon as string);
}
});
if (metaData[key].sizes.some((instance) => instance.size === "R")) {
if (metaData[key].technique === "MILP") {
updateData(realSizesMap, "milp" as string);
}
updateData(realSizesMap, "real" as string);
} else {
updateData(realSizesMap, "other" as string);
}
}
});

if (timeHorizonsMap.size === 0) {
timeHorizonsMap.set("single", -1);
timeHorizonsMap.set("multi", -1);
Expand All @@ -96,13 +116,14 @@ const BenchmarkSummaryTable = () => {
milpFeatures: milpFeaturesMap,
timeHorizons: timeHorizonsMap,
sectors: sectorsMap,
realSizes: realSizesMap,
nOfProblems: nOfProblemsMap,
};
});

return (
<div className="bg-white p-4 rounded-xl mb-6 space-y-8">
<div>
<h2 className="text-lg font-bold mb-4">Model Distribution Matrix</h2>
<div className="overflow-x-auto">
<table className="min-w-full border border-gray-200">
<thead>
Expand All @@ -118,30 +139,86 @@ const BenchmarkSummaryTable = () => {
{model}
</th>
))}
<th className="border p-2 text-center">Total</th>
</tr>
</thead>
<tbody>
{/* N. of problem */}
{nOfProblems.map((nOfProblem, nOfProblemIdx) => (
<tr
key={nOfProblemIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
{nOfProblemIdx === 0 && (
<td
className="border p-2 text-left font-medium"
rowSpan={2}
>
<span>N. of Problems</span>
</td>
)}

<td className="border p-2 text-left font-medium">
{nOfProblem}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-right font-medium"
>
{nOfProblemIdx === 0
? s.nOfProblems.get("totalNOfDiffProblems") || 0
: s.nOfProblems.get("multipleSizes")}
</td>
))}
<td className="border p-2 text-left font-medium">
{nOfProblemIdx === 0
? summary.reduce(
(acc, curr) =>
acc +
(curr.nOfProblems.get("totalNOfDiffProblems") || 0),
0,
)
: summary.reduce(
(acc, curr) =>
acc + (curr.nOfProblems.get("multipleSizes") || 0),
0,
)}
</td>
</tr>
))}
{/* Technique */}
{availableTechniques.map((technique, techniqueIdx) => (
<tr
key={techniqueIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
<td className="border p-2 text-center font-medium">
{techniqueIdx === 0 ? "Technique" : ""}
</td>
<td className="border p-2 text-center font-medium">
{techniqueIdx === 0 && (
<td
className="border p-2 text-left font-medium"
rowSpan={availableTechniques.length}
>
Technique
</td>
)}
<td className="border p-2 text-left font-medium">
{technique}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-center font-medium"
className="border p-2 text-right font-medium"
>
{s.techniques.get(technique) || 0}
</td>
))}
<td className="border p-2 text-left font-medium">
{summary.reduce(
(acc, curr) =>
acc + (curr.techniques.get(technique) || 0),
0,
)}
</td>
</tr>
))}
{/* Kind of Problem */}
Expand All @@ -151,20 +228,32 @@ const BenchmarkSummaryTable = () => {
key={kindOfProblemIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
<td className="border p-2 text-center font-medium">
{kindOfProblemIdx === 0 ? "Kind Of Problem" : ""}
</td>
<td className="border p-2 text-center font-medium">
{kindOfProblemIdx === 0 && (
<td
className="border p-2 text-left font-medium"
rowSpan={availableKindOfProblems.length}
>
Kind Of Problem
</td>
)}
<td className="border p-2 text-left font-medium">
{kindOfProblem}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-center font-medium"
className="border p-2 text-right font-medium"
>
{s.kindOfProblems.get(kindOfProblem) || 0}
</td>
))}
<td className="border p-2 text-left font-medium">
{summary.reduce(
(acc, curr) =>
acc + (curr.kindOfProblems.get(kindOfProblem) || 0),
0,
)}
</td>
</tr>
),
)}
Expand All @@ -174,22 +263,38 @@ const BenchmarkSummaryTable = () => {
key={timeHorizonIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
<td className="border p-2 text-center font-medium">
{timeHorizonIdx === 0 ? "Time Horizon" : ""}
</td>
<td className="border p-2 text-center font-medium">
{timeHorizonIdx === 0 && (
<td
className="border p-2 text-left font-medium"
rowSpan={availabletimeHorizons.length}
>
Time Horizon
</td>
)}
<td className="border p-2 text-left font-medium">
{getTimeHorizonLabel(timeHorizon)}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-center font-medium"
className="border p-2 text-right font-medium"
>
{s.timeHorizons.get(timeHorizon) == -1
? "N/A"
: s.timeHorizons.get(timeHorizon) || 0}
</td>
))}
<td className="border p-2 text-left font-medium">
{summary.reduce((acc, curr) => {
// If the value is -1, then it is N/A
const a = acc == -1 ? 0 : acc || 0;
const b =
curr.timeHorizons.get(timeHorizon) == -1
? 0
: curr.timeHorizons.get(timeHorizon) || 0;
return a + b;
}, 0)}
</td>
</tr>
))}
{/* MILP Features */}
Expand All @@ -198,20 +303,82 @@ const BenchmarkSummaryTable = () => {
key={milpFeatureIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
<td className="border p-2 text-center font-medium">
{milpFeatureIdx === 0 ? "MILP Feature" : ""}
</td>
<td className="border p-2 text-center font-medium">
{milpFeatureIdx === 0 && (
<td
className="border p-2 font-medium text-left"
rowSpan={availableMilpFeatures.length}
>
MILP Features
</td>
)}
<td className="border p-2 font-medium text-left">
{milpFeature || "-"}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-center font-medium"
className="border p-2 font-medium text-right"
>
{s.milpFeatures.get(milpFeature as string) || 0}
</td>
))}
<td className="border p-2 font-medium text-left">
{summary.reduce(
(acc, curr) =>
acc +
(curr.milpFeatures.get(milpFeature as string) || 0),
0,
)}
</td>
</tr>
))}
{/* Size Features */}
{["Real(MILP)", "Other"].map((size, sizeIdx) => (
<tr
key={sizeIdx}
className="border-b odd:bg-[#BFD8C71A] odd:bg-opacity-10"
>
{sizeIdx === 0 && (
<td
className="border p-2 text-left font-medium"
rowSpan={2}
>
Size
</td>
)}
<td className="border p-2 text-left font-medium">
{size || "-"}
</td>
{summary.map((s, sIdx) => (
<td
key={sIdx}
className="border p-2 text-right font-medium"
>
{" "}
{size === "Other"
? s.realSizes.get("other") || 0
: `${s.realSizes.get("real") || 0} (${
s.realSizes.get("milp") || 0
})`}
</td>
))}
<td className="border p-2 text-left font-medium">
{size === "Other"
? summary.reduce(
(acc, curr) =>
acc + (curr.realSizes.get("other") || 0),
0,
)
: `${summary.reduce(
(acc, curr) =>
acc + (curr.realSizes.get("real") || 0),
0,
)} (${summary.reduce(
(acc, curr) =>
acc + (curr.realSizes.get("milp") || 0),
0,
)})`}
</td>
</tr>
))}
</tbody>
Expand Down
Loading
Loading