Skip to content

Commit a6c0117

Browse files
MarcBaeuerleMarcBaeuerle
committed
fixed tailwind variables + label text clipping
1 parent 7d51ff8 commit a6c0117

10 files changed

Lines changed: 138 additions & 81 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import desLogo from './assets/des_logo.png';
33
import './style.css'
44
import Compare from './partials/Compare';
55
import BenchmarkSettings from './partials/BenchmarkSettings';
6-
import BenchmarkEvaluations from './partials/BenchmarkEvaluations';
6+
import BenchmarkResults from './partials/BenchmarkResults';
77

88
type SectionsProps = {
99
title: string;
@@ -16,7 +16,7 @@ const Sections: React.FC<SectionsProps> = ({ title, markup }) => {
1616
<section>
1717
<div className='w-full flex items-center gap-4'>
1818
<h2 className='text-lg'>{title}</h2>
19-
<hr className='border-t-[#AF313A] grow border-t-2 border-r-full' />
19+
<hr className='border-t-hpi-red grow border-t-2 border-r-full' />
2020
</div>
2121
{markup}
2222
</section>
@@ -40,7 +40,7 @@ function App() {
4040
</header>
4141
<main className='w-full px-10 max-w-[2000px] mx-auto relative flex flex-col gap-8'>
4242
<section className='h-32 flex flex-col justify-end'>
43-
<h1 className='text-3xl text-center'>Ecological Efficiency in Database Server Lifecycles</h1>
43+
<h1 className='text-3xl text-center'>True Cost of Ownership and CO2</h1>
4444
<p className='text-cyan-700 underline underline-offset-2 text-lg text-center'>
4545
<a
4646
href='https://hpi.de/rabl/news/2024/paper-on-ecological-efficiency-of-database-servers-accepted-at-cidr-2025.html'
@@ -54,7 +54,7 @@ function App() {
5454
<Sections title='Benchmark Settings' markup={<BenchmarkSettings />} />
5555
</div>
5656
<div className='flex-1'>
57-
<Sections title='Evaluated Benchmarks' markup={<BenchmarkEvaluations />} />
57+
<Sections title='Benchmark Results' markup={<BenchmarkResults />} />
5858
</div>
5959
</section>
6060
</main>

‎frontend/src/assets/data.ts‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ export interface CPUMetric {
1616

1717
export const CPU_METRICS: Record<string, CPUMetric> = {
1818
"Launch Year": { label: "LAUNCH_YEAR", unit: null, tofixed: 0, delimeter: false },
19+
"Core Count": { label: "CORE_COUNT", unit: null, tofixed: 0, delimeter: true },
20+
"Thread Count": { label: "THREAD_COUNT", unit: null, tofixed: 0, delimeter: true },
1921
"TDP": { label: "TDP", unit: "Watts", tofixed: 0, delimeter: true },
2022
"TPC-H runs /hr": { label: "TPCH_RUNS_PER_H", unit: "Runs/hour", tofixed: 2, delimeter: true },
2123
"SPECrate": { label: "SPECINT_RATE", unit: null, tofixed: 2, delimeter: true },
2224
"SPECspeed": { label: "SPECINT", unit: null, tofixed: 2, delimeter: true },
23-
"Core Count": { label: "CORE_COUNT", unit: null, tofixed: 0, delimeter: true },
2425
"Sorted Tuples per second": { label: "SORTED_TUPLES_PER_S", unit: "Tuples/second", tofixed: 0, delimeter: true },
2526
"Sorted Tuples per joule": { label: "SORTED_TUPLES_PER_JOULE", unit: "Tuples/Joule", tofixed: 0, delimeter: true },
2627
"TPCH runs": { label: "TPCH_RUNS_PER_KJOULE", unit: "Runs/KiloJoule", tofixed: 3, delimeter: true },
@@ -32,12 +33,13 @@ const CPU_DATA : CPUs= {
3233
"Intel Xeon E7-4880 v2": {
3334
"MAKE": INTEL,
3435
"LAUNCH_YEAR": 2014,
36+
"CORE_COUNT": 15,
37+
"THREAD_COUNT": 30,
3538
"TDP": 130,
3639
"SORTED_TUPLES_PER_S": 153846.153,
3740
"TPCH_RUNS_PER_H": 40.07,
3841
"SPECINT_RATE": 61.111111111111,
3942
"SPECINT": 6.02222222222222,
40-
"CORE_COUNT": 30,
4143
"SORTED_TUPLES_PER_JOULE": 517082.8,
4244
"TPCH_RUNS_PER_KJOULE": 0.0603893453241102,
4345
"SPECINT_PER_TDP": 1.38974358974359,
@@ -47,12 +49,13 @@ const CPU_DATA : CPUs= {
4749
"Intel Xeon E7-4850 v4": {
4850
"MAKE": INTEL,
4951
"LAUNCH_YEAR": 2016,
52+
"CORE_COUNT": 32,
53+
"THREAD_COUNT": 16,
5054
"TDP": 115,
5155
"SORTED_TUPLES_PER_S": 157455.642777,
5256
"TPCH_RUNS_PER_H": 40.1731641924089,
5357
"SPECINT_RATE": 109.25,
5458
"SPECINT": 6.66666666666667,
55-
"CORE_COUNT": 32,
5659
"SORTED_TUPLES_PER_JOULE": 780063.146,
5760
"TPCH_RUNS_PER_KJOULE": 0.0642346000400901,
5861
"SPECINT_PER_TDP": 1.85507246376811,
@@ -62,12 +65,13 @@ const CPU_DATA : CPUs= {
6265
"Intel Xeon Platinum 8180": {
6366
"MAKE": INTEL,
6467
"LAUNCH_YEAR": 2017,
68+
"CORE_COUNT": 56,
69+
"THREAD_COUNT": 28,
6570
"TDP": 205,
6671
"SORTED_TUPLES_PER_S": 255325.124631,
6772
"TPCH_RUNS_PER_H": 88.63,
6873
"SPECINT_RATE": 141,
6974
"SPECINT": 9.324,
70-
"CORE_COUNT": 56,
7175
"SORTED_TUPLES_PER_JOULE": 447132.456,
7276
"TPCH_RUNS_PER_KJOULE": 0.133619191490173,
7377
"SPECINT_PER_TDP": 2.54704390243902,
@@ -77,12 +81,13 @@ const CPU_DATA : CPUs= {
7781
"Intel Xeon Platinum 8259CL": {
7882
"MAKE": INTEL,
7983
"LAUNCH_YEAR": 2019,
84+
"CORE_COUNT": 48,
85+
"THREAD_COUNT": 24,
8086
"TDP": 165,
8187
"SORTED_TUPLES_PER_S": 328031.52382944,
8288
"TPCH_RUNS_PER_H": 89.4327282049957,
8389
"SPECINT_RATE": 140,
8490
"SPECINT": 10.3,
85-
"CORE_COUNT": 48,
8691
"SORTED_TUPLES_PER_JOULE": 901134.302803654,
8792
"TPCH_RUNS_PER_KJOULE": 0.101716459471903,
8893
"SPECINT_PER_TDP": 2.99636363636364,
@@ -92,12 +97,13 @@ const CPU_DATA : CPUs= {
9297
"Intel Xeon Gold 6240L": {
9398
"MAKE": INTEL,
9499
"LAUNCH_YEAR": 2019,
100+
"CORE_COUNT": 18,
101+
"THREAD_COUNT": 36,
95102
"TDP": 150,
96103
"SORTED_TUPLES_PER_S": 227705.108223,
97104
"TPCH_RUNS_PER_H": 68.7827948245532,
98105
"SPECINT_RATE": 222,
99106
"SPECINT": 10.1,
100-
"CORE_COUNT": 36,
101107
"SORTED_TUPLES_PER_JOULE": null,
102108
"TPCH_RUNS_PER_KJOULE": 0.184657181749119,
103109
"SPECINT_PER_TDP": 2.424,
@@ -107,12 +113,13 @@ const CPU_DATA : CPUs= {
107113
"Intel Xeon Platinum 8352Y": {
108114
"MAKE": INTEL,
109115
"LAUNCH_YEAR": 2021,
116+
"CORE_COUNT": 32,
117+
"THREAD_COUNT": 64,
110118
"TDP": 205,
111119
"SORTED_TUPLES_PER_S": 373634.831734,
112120
"TPCH_RUNS_PER_H": 117.173425457684,
113121
"SPECINT_RATE": 215,
114122
"SPECINT": 11.6777,
115-
"CORE_COUNT": 64,
116123
"SORTED_TUPLES_PER_JOULE": 988856.82,
117124
"TPCH_RUNS_PER_KJOULE": 0.212240584737477,
118125
"SPECINT_PER_TDP": 3.64572097560976,
@@ -122,12 +129,13 @@ const CPU_DATA : CPUs= {
122129
"Intel Xeon Platinum 8480CL": {
123130
"MAKE": INTEL,
124131
"LAUNCH_YEAR": 2023,
132+
"CORE_COUNT": 56,
133+
"THREAD_COUNT": 112,
125134
"TDP": 350,
126135
"SORTED_TUPLES_PER_S": 466539.876,
127136
"TPCH_RUNS_PER_H": 177.949663971718,
128137
"SPECINT_RATE": 443.5,
129138
"SPECINT": 14.725,
130-
"CORE_COUNT": 112,
131139
"SORTED_TUPLES_PER_JOULE": 934343.670288806,
132140
"TPCH_RUNS_PER_KJOULE": 0.671868755779442,
133141
"SPECINT_PER_TDP": 2.0256,
@@ -137,12 +145,13 @@ const CPU_DATA : CPUs= {
137145
"AMD EPYC 7601": {
138146
"MAKE": AMD,
139147
"LAUNCH_YEAR": 2017,
148+
"CORE_COUNT": 32,
149+
"THREAD_COUNT": 64,
140150
"TDP": 180,
141151
"SORTED_TUPLES_PER_S": null,
142152
"TPCH_RUNS_PER_H": null,
143153
"SPECINT_RATE": 151,
144154
"SPECINT": 7.16,
145-
"CORE_COUNT": 64,
146155
"SORTED_TUPLES_PER_JOULE": null,
147156
"TPCH_RUNS_PER_KJOULE": null,
148157
"SPECINT_PER_TDP": 0.03977777777,
@@ -152,12 +161,13 @@ const CPU_DATA : CPUs= {
152161
"AMD EPYC 7402P": {
153162
"MAKE": AMD,
154163
"LAUNCH_YEAR": 2019,
164+
"CORE_COUNT": 24,
165+
"THREAD_COUNT": 48,
155166
"TDP": 180,
156167
"SORTED_TUPLES_PER_S": null,
157168
"TPCH_RUNS_PER_H": null,
158169
"SPECINT_RATE": 170,
159170
"SPECINT": 8.65,
160-
"CORE_COUNT": 48,
161171
"SORTED_TUPLES_PER_JOULE": null,
162172
"TPCH_RUNS_PER_KJOULE": null,
163173
"SPECINT_PER_TDP": 0.04805555555,
@@ -167,12 +177,13 @@ const CPU_DATA : CPUs= {
167177
"AMD EPYC 7302P": {
168178
"MAKE": AMD,
169179
"LAUNCH_YEAR": 2019,
180+
"CORE_COUNT": 16,
181+
"THREAD_COUNT": 32,
170182
"TDP": 155,
171183
"SORTED_TUPLES_PER_S": null,
172184
"TPCH_RUNS_PER_H": null,
173185
"SPECINT_RATE": 118,
174186
"SPECINT": 8.55,
175-
"CORE_COUNT": 32,
176187
"SORTED_TUPLES_PER_JOULE": null,
177188
"TPCH_RUNS_PER_KJOULE": null,
178189
"SPECINT_PER_TDP": 0.05516129032,
@@ -182,12 +193,13 @@ const CPU_DATA : CPUs= {
182193
"AMD EPYC 7513": {
183194
"MAKE": AMD,
184195
"LAUNCH_YEAR": 2021,
196+
"CORE_COUNT": 32,
197+
"THREAD_COUNT": 64,
185198
"TDP": 200,
186199
"SORTED_TUPLES_PER_S": null,
187200
"TPCH_RUNS_PER_H": null,
188201
"SPECINT_RATE": 252,
189202
"SPECINT": 12.3,
190-
"CORE_COUNT": 64,
191203
"SORTED_TUPLES_PER_JOULE": null,
192204
"TPCH_RUNS_PER_KJOULE": null,
193205
"SPECINT_PER_TDP": 0.0615,
@@ -197,12 +209,13 @@ const CPU_DATA : CPUs= {
197209
"AMD EPYC 7773X": {
198210
"MAKE": AMD,
199211
"LAUNCH_YEAR": 2021,
212+
"CORE_COUNT": 64,
213+
"THREAD_COUNT": 128,
200214
"TDP": 280,
201215
"SORTED_TUPLES_PER_S": null,
202216
"TPCH_RUNS_PER_H": null,
203217
"SPECINT_RATE": 406,
204218
"SPECINT": 12.3,
205-
"CORE_COUNT": 128,
206219
"SORTED_TUPLES_PER_JOULE": null,
207220
"TPCH_RUNS_PER_KJOULE": null,
208221
"SPECINT_PER_TDP": 0.04392857142,
@@ -212,12 +225,13 @@ const CPU_DATA : CPUs= {
212225
"AMD EPYC 9554": {
213226
"MAKE": AMD,
214227
"LAUNCH_YEAR": 2022,
228+
"CORE_COUNT": 64,
229+
"THREAD_COUNT": 128,
215230
"TDP": 360,
216231
"SORTED_TUPLES_PER_S": null,
217232
"TPCH_RUNS_PER_H": null,
218233
"SPECINT_RATE": 655,
219234
"SPECINT": 14.9,
220-
"CORE_COUNT": 128,
221235
"SORTED_TUPLES_PER_JOULE": null,
222236
"TPCH_RUNS_PER_KJOULE": null,
223237
"SPECINT_PER_TDP": 0.04138888888,

‎frontend/src/charts/lineChart.tsx‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -109,15 +109,25 @@ const LineChart: React.FC<LineChartProps> = memo(function LineChart() {
109109

110110
const labels = Array.from(Array(breakEven).keys())
111111

112-
let xbreakEvenLabel: LabelPosition = 'end';
112+
let xbreakEvenLabel: LabelPosition = 'start';
113113
let ybreakEvenLabel: LabelPosition = 'end';
114-
const yEmbodied = -15;
114+
let embodiedCarbonLinePosition: LabelPosition = 'end';
115+
let yEmbodied = -15;
115116

116117
const xBreakEven = intersect ? intersect.x : 0;
117118
const yBreakEven = intersect ? intersect.y : 0;
118119

119-
if ((xBreakEven / L) < 0.3) xbreakEvenLabel = 'start';
120-
if ((yBreakEven / oldSystemOpex[L]) > 0.5) ybreakEvenLabel = 'start';
120+
// trying my best to not let labels overlap or go out of bounds
121+
if ((xBreakEven / L) > 0.15) xbreakEvenLabel = 'end';
122+
if ((yBreakEven / oldSystemOpex[L]) > 0.95) ybreakEvenLabel = 'start';
123+
124+
const isBreakEvenUpperRight = xBreakEven / L > 0.6 && yBreakEven / oldSystemOpex[L] > 0.6;
125+
const isEmbodiedUpperRight = embodiedCarbonLineHeight / oldSystemOpex[L] > 0.6;
126+
127+
// overlaps between breakeven and embodied only happen in upper right quadrant
128+
if (isBreakEvenUpperRight && isEmbodiedUpperRight) {
129+
yEmbodied = 15;
130+
}
121131

122132
const data = {
123133
labels: labels,
@@ -201,7 +211,7 @@ const LineChart: React.FC<LineChartProps> = memo(function LineChart() {
201211
color: "red",
202212
yAdjust: yEmbodied,
203213
content: `${singleComparison ? "Current" : "New" } HW's embodied carbon`,
204-
position: 'end'
214+
position: embodiedCarbonLinePosition
205215
},
206216
},
207217
breakEvenCircle: {
@@ -210,25 +220,27 @@ const LineChart: React.FC<LineChartProps> = memo(function LineChart() {
210220
backgroundColor: "red",
211221
pointStyle: "round",
212222
radius: 5,
213-
xValue: intersect ? intersect.x : 0,
214-
yValue: intersect ? intersect.y : 0,
223+
xValue: intersect ? intersect.x : -10,
224+
yValue: intersect ? intersect.y : -10,
215225
},
216226
breakEvenLabel: {
217227
display: !!intersect,
218228
type: "label",
219-
backgroundColor: "transparent",
229+
backgroundColor: 'transparent',
220230
content: intersect ? `${intersect.x.toFixed(1)} years` : "",
221231
color: "red",
222232
font: {
223233
family: "serif",
224234
size: 18,
225235
weight: 400,
226236
},
237+
borderRadius: 100,
238+
borderColor: 'black',
227239
padding: {
228-
top: 6,
229-
left: 6,
230-
right: 6,
231-
bottom: 12,
240+
top: 5,
241+
bottom: 5,
242+
left: 10,
243+
right: 10
232244
},
233245
position: {
234246
x: xbreakEvenLabel,
@@ -246,9 +258,7 @@ const LineChart: React.FC<LineChartProps> = memo(function LineChart() {
246258
family: "serif",
247259
size: 16,
248260
},
249-
boxWidth: 8,
250261
boxHeight: 5,
251-
padding: 0,
252262
},
253263
},
254264
},
@@ -263,8 +273,8 @@ const LineChart: React.FC<LineChartProps> = memo(function LineChart() {
263273
}, [comparison]);
264274

265275
return (
266-
<figure className="h-96">
267-
<canvas ref={canvas} width={400} height={400}></canvas>
276+
<figure className="h-[25rem]">
277+
<canvas ref={canvas} width={400} height={500}></canvas>
268278
</figure>
269279
);
270280
});

0 commit comments

Comments
 (0)