Skip to content

Commit 59a0d9e

Browse files
ghifarhaidarghifarhaidar
committed
fix some styles
1 parent c02f88d commit 59a0d9e

File tree

5 files changed

+84
-77
lines changed

5 files changed

+84
-77
lines changed

‎frontend/src/App.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,7 @@ p {
279279
border-radius: var(--radius-lg);
280280
box-shadow: var(--shadow-md);
281281
padding: var(--spacing-md);
282+
padding-bottom: var(--spacing-xs);
282283
margin: var(--spacing-md) 0;
283284
border: 1px solid var(--border-gray);
284285
height: auto;

‎frontend/src/components/AlgorithmCard.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import '../styles/cards.css';
22

33
export default function AlgorithmCard({ algorithm }) {
44
return (
5-
<div className="card">
6-
<div className="card-body">
7-
<h4 className="card-title">{algorithm.name.replaceAll("_", " ")}</h4>
5+
<div className="algorithm-card mb-0 ">
6+
<div className="card-body mb-0">
7+
<h4 className="card-title mb-0">{algorithm.name.replaceAll("_", " ")}</h4>
88
<p className="card-text mb-0">{algorithm.description}</p>
99
</div>
1010
</div>

‎frontend/src/pages/ResultsPage.jsx‎

Lines changed: 63 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export default function ResultsPage() {
157157
console.log("multiLCAConfigs:", multiLCAConfigs);
158158
console.log("singleLCAConfigs:", singleLCAConfigs);
159159
var someParetoSols = [];
160-
var paretoFront =[];
160+
var paretoFront = [];
161161
if (multiLCAConfigs.length > 0) {
162162
// Flatten all LCA runs
163163
const allLcaRuns = multiLCAConfigs.flatMap(([_, runs]) => runs);
@@ -201,7 +201,7 @@ export default function ResultsPage() {
201201
const makespanData = [];
202202
const runTimeData = [];
203203
console.log("nonLCARuns", nonLCARuns);
204-
204+
205205
[...nonLCARuns, ...singleLCAConfigs, ...someParetoSols].forEach((run, runIdx) => {
206206
const label = run.id ? `${run.id}` : `Run ${runIdx + 1}`;
207207
labels.push(label);
@@ -321,67 +321,71 @@ export default function ResultsPage() {
321321

322322

323323
return (
324-
<div className="gridsearch-results">
325-
<h3>Grid Search Results (LCA)</h3>
326-
327-
{/* Pareto Scatter Plot */}
328-
<div style={{ height: 400, marginBottom: "2rem" }}>
324+
<div className="card">
325+
<div className="card-title mb-0">
329326
<h4>Pareto Front: Makespan vs Total Cost</h4>
330-
<Scatter
331-
data={{
332-
datasets: [
333-
{
334-
label: "All Runs",
335-
data: paretoData.map(p => ({ x: p.makespan, y: p.cost })),
336-
backgroundColor: "#93c5fd",
337-
pointRadius: 4,
338-
},
339-
{
340-
label: "Pareto Front",
341-
data: paretoFront.map(p => ({ x: p.makespan, y: p.cost })),
342-
backgroundColor: "#ef4444",
343-
pointRadius: 6,
344-
},
345-
],
346-
}}
347-
options={{
348-
responsive: true,
349-
plugins: {
350-
tooltip: {
351-
callbacks: {
352-
label: (ctx) => {
353-
const point = paretoData.find(p =>
354-
p.makespan === ctx.parsed.x && p.cost === ctx.parsed.y
355-
);
356-
return [
357-
`Run: ${point?.id ?? "?"}`,
358-
`Makespan: ${ctx.parsed.x.toFixed(2)}`,
359-
`Cost: ${ctx.parsed.y.toFixed(2)}`,
360-
...(point?.fitness !== undefined ? [`Fitness: ${point.fitness.toFixed(4)}`] : []),
361-
];
327+
</div>
328+
329+
<div className="card-body ">
330+
<div className="gridsearch-results grid-full">
331+
<h3>Grid Search Results (MO-LCA)</h3>
332+
333+
{/* Pareto Scatter Plot */}
334+
<div style={{ height: 400, }}>
335+
<Scatter
336+
data={{
337+
datasets: [
338+
{
339+
label: "All Runs",
340+
data: paretoData.map(p => ({ x: p.makespan, y: p.cost })),
341+
backgroundColor: "#93c5fd",
342+
pointRadius: 4,
343+
},
344+
{
345+
label: "Pareto Front",
346+
data: paretoFront.map(p => ({ x: p.makespan, y: p.cost })),
347+
backgroundColor: "#ef4444",
348+
pointRadius: 6,
349+
},
350+
],
351+
}}
352+
options={{
353+
responsive: true,
354+
plugins: {
355+
tooltip: {
356+
callbacks: {
357+
label: (ctx) => {
358+
const point = paretoData.find(p =>
359+
p.makespan === ctx.parsed.x && p.cost === ctx.parsed.y
360+
);
361+
return [
362+
`Run: ${point?.id ?? "?"}`,
363+
`Makespan: ${ctx.parsed.x.toFixed(2)}`,
364+
`Cost: ${ctx.parsed.y.toFixed(2)}`,
365+
...(point?.fitness !== undefined ? [`Fitness: ${point.fitness.toFixed(4)}`] : []),
366+
];
367+
}
368+
}
369+
},
370+
legend: { position: "top" },
371+
title: {
372+
display: true,
373+
text: "Pareto Front: Makespan vs Total Cost",
374+
}
375+
},
376+
scales: {
377+
x: {
378+
title: { display: true, text: "Makespan" },
379+
},
380+
y: {
381+
title: { display: true, text: "Total Cost" },
362382
}
363383
}
364-
},
365-
legend: { position: "top" },
366-
title: {
367-
display: true,
368-
text: "Pareto Front: Makespan vs Total Cost",
369-
}
370-
},
371-
scales: {
372-
x: {
373-
title: { display: true, text: "Makespan" },
374-
},
375-
y: {
376-
title: { display: true, text: "Total Cost" },
377-
}
378-
}
379-
}}
380-
/>
381-
384+
}}
385+
/>
386+
</div>
387+
</div>
382388
</div>
383-
384-
385389
</div>
386390
);
387391
})()}

‎frontend/src/styles/cards.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
border-radius: var(--radius-lg);
66
box-shadow: var(--shadow-md);
77
padding: var(--spacing-xl);
8-
margin-bottom: var(--spacing-lg);
8+
margin-bottom: var(--spacing-md);
99
border: 1px solid var(--border-gray);
1010
}
1111

@@ -21,7 +21,7 @@
2121
grid-template-columns: repeat(2, 1fr);
2222
gap: var(--spacing-lg);
2323
align-items: start;
24-
padding: var(--spacing-md);
24+
padding: var(--spacing-sm);
2525
}
2626

2727

@@ -42,6 +42,18 @@
4242
margin-bottom: var(--spacing-md);
4343
}
4444

45+
46+
.algorithm-card {
47+
height: 100%;
48+
background: var(--white);
49+
border-radius: var(--radius-lg);
50+
box-shadow: var(--shadow-md);
51+
padding: var(--spacing-md);
52+
margin-bottom: var(--spacing-md);
53+
border: 1px solid var(--border-gray);
54+
}
55+
56+
4557
/* Selectable card styles */
4658
.selectable-card {
4759
position: relative;

‎frontend/src/styles/resultsPage.css‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -178,22 +178,12 @@
178178
.radio-group label {
179179
display: flex;
180180
align-items: center;
181-
gap: 0.4rem;
181+
gap: var(--spacing-sm);
182182
font-size: 14px;
183183
}
184184

185185
.gridsearch-results {
186-
margin-top: 2rem;
187-
padding: 1rem;
186+
padding:var(--spacing-md);
188187
background: #f9fafb;
189-
border-radius: 0.5rem;
190-
}
191-
192-
.gridsearch-group {
193-
margin-bottom: 2rem;
188+
border-radius: var(--radius-lg);
194189
}
195-
196-
.gridsearch-group h4 {
197-
margin-bottom: 0.5rem;
198-
color: #374151;
199-
}

0 commit comments

Comments
 (0)