Skip to content

Commit c16822e

Browse files
MarcBaeuerleMarcBaeuerle
committed
updated CPU numbers + fixed no break even notice + fixed ratio decimal placed
1 parent f4c593a commit c16822e

8 files changed

Lines changed: 111 additions & 66 deletions

File tree

‎frontend/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/src/assets/hpi_logo_small.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>HPI-DES</title>
7+
<title>HPI - TCO₂</title>
88
</head>
99
<body>
1010
<div id="root" class="relative min-h-screen"></div>

‎frontend/src/assets/data.ts‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ const CPU_DATA : CPUs= {
3636
"CORE_COUNT": 15,
3737
"THREAD_COUNT": 30,
3838
"TDP": 130,
39-
"SORTED_TUPLES_PER_S": 153846.153,
40-
"TPCH_RUNS_PER_H": 40.07,
39+
"SORTED_TUPLES_PER_S": 125118509.906611,
40+
"TPCH_RUNS_PER_H": 39.7660,
4141
"SPECINT_RATE": 61.111111111111,
4242
"SPECINT": 6.02222222222222,
43-
"SORTED_TUPLES_PER_JOULE": 517082.8,
44-
"TPCH_RUNS_PER_KJOULE": 0.0603893453241102,
43+
"SORTED_TUPLES_PER_JOULE": 978026.6747,
44+
"TPCH_RUNS_PER_KJOULE": 0.0897,
4545
"SPECINT_PER_TDP": 1.38974358974359,
4646
"SPECINTrate_PER_TDP": 0.470085470085469,
4747
"DIE_SIZE": 541
@@ -52,12 +52,12 @@ const CPU_DATA : CPUs= {
5252
"CORE_COUNT": 32,
5353
"THREAD_COUNT": 16,
5454
"TDP": 115,
55-
"SORTED_TUPLES_PER_S": 157455.642777,
56-
"TPCH_RUNS_PER_H": 40.1731641924089,
55+
"SORTED_TUPLES_PER_S": 140307773.660298,
56+
"TPCH_RUNS_PER_H": 36.3625,
5757
"SPECINT_RATE": 109.25,
5858
"SPECINT": 6.66666666666667,
59-
"SORTED_TUPLES_PER_JOULE": 780063.146,
60-
"TPCH_RUNS_PER_KJOULE": 0.0642346000400901,
59+
"SORTED_TUPLES_PER_JOULE": 1510612.81029875,
60+
"TPCH_RUNS_PER_KJOULE": 0.1037,
6161
"SPECINT_PER_TDP": 1.85507246376811,
6262
"SPECINTrate_PER_TDP": 0.95,
6363
"DIE_SIZE": 456
@@ -68,12 +68,12 @@ const CPU_DATA : CPUs= {
6868
"CORE_COUNT": 56,
6969
"THREAD_COUNT": 28,
7070
"TDP": 205,
71-
"SORTED_TUPLES_PER_S": 255325.124631,
72-
"TPCH_RUNS_PER_H": 88.63,
71+
"SORTED_TUPLES_PER_S": 203679961.220965,
72+
"TPCH_RUNS_PER_H": 81.5934,
7373
"SPECINT_RATE": 141,
7474
"SPECINT": 9.324,
75-
"SORTED_TUPLES_PER_JOULE": 447132.456,
76-
"TPCH_RUNS_PER_KJOULE": 0.133619191490173,
75+
"SORTED_TUPLES_PER_JOULE": 1042027.57725983,
76+
"TPCH_RUNS_PER_KJOULE": 0.1106,
7777
"SPECINT_PER_TDP": 2.54704390243902,
7878
"SPECINTrate_PER_TDP": 0.673170731707317,
7979
"DIE_SIZE": 628
@@ -84,14 +84,14 @@ const CPU_DATA : CPUs= {
8484
"CORE_COUNT": 48,
8585
"THREAD_COUNT": 24,
8686
"TDP": 165,
87-
"SORTED_TUPLES_PER_S": 328031.52382944,
88-
"TPCH_RUNS_PER_H": 89.4327282049957,
89-
"SPECINT_RATE": 140,
87+
"SORTED_TUPLES_PER_S": 191378142.90516,
88+
"TPCH_RUNS_PER_H": 88.0331,
89+
"SPECINT_RATE": 139,
9090
"SPECINT": 10.3,
91-
"SORTED_TUPLES_PER_JOULE": 901134.302803654,
92-
"TPCH_RUNS_PER_KJOULE": 0.101716459471903,
91+
"SORTED_TUPLES_PER_JOULE": 1003698.62944952,
92+
"TPCH_RUNS_PER_KJOULE": 0.1164,
9393
"SPECINT_PER_TDP": 2.99636363636364,
94-
"SPECINTrate_PER_TDP": 0.848484848484848,
94+
"SPECINTrate_PER_TDP": 0.6666666666,
9595
"DIE_SIZE": 754
9696
},
9797
"Intel Xeon Platinum 8352Y": {
@@ -100,12 +100,12 @@ const CPU_DATA : CPUs= {
100100
"CORE_COUNT": 32,
101101
"THREAD_COUNT": 64,
102102
"TDP": 205,
103-
"SORTED_TUPLES_PER_S": 373634.831734,
104-
"TPCH_RUNS_PER_H": 117.173425457684,
103+
"SORTED_TUPLES_PER_S": 303998667.7562,
104+
"TPCH_RUNS_PER_H": 114.5736,
105105
"SPECINT_RATE": 215,
106106
"SPECINT": 11.6777,
107-
"SORTED_TUPLES_PER_JOULE": 988856.82,
108-
"TPCH_RUNS_PER_KJOULE": 0.212240584737477,
107+
"SORTED_TUPLES_PER_JOULE": 1511657.5249,
108+
"TPCH_RUNS_PER_KJOULE": 0.1552,
109109
"SPECINT_PER_TDP": 3.64572097560976,
110110
"SPECINTrate_PER_TDP": 1.04878048780488,
111111
"DIE_SIZE": 660
@@ -116,16 +116,32 @@ const CPU_DATA : CPUs= {
116116
"CORE_COUNT": 56,
117117
"THREAD_COUNT": 112,
118118
"TDP": 350,
119-
"SORTED_TUPLES_PER_S": 466539.876,
120-
"TPCH_RUNS_PER_H": 177.949663971718,
119+
"SORTED_TUPLES_PER_S": 488892652.275884,
120+
"TPCH_RUNS_PER_H": 167.9686,
121121
"SPECINT_RATE": 443.5,
122122
"SPECINT": 14.725,
123-
"SORTED_TUPLES_PER_JOULE": 934343.670288806,
124-
"TPCH_RUNS_PER_KJOULE": 0.671868755779442,
125-
"SPECINT_PER_TDP": 2.0256,
123+
"SORTED_TUPLES_PER_JOULE": 1422304.14694109,
124+
"TPCH_RUNS_PER_KJOULE": 0.1332,
125+
"SPECINT_PER_TDP": 4.7264,
126126
"SPECINTrate_PER_TDP": 1.26714285714286,
127127
"DIE_SIZE": (4*477)
128128
},
129+
"Intel Xeon Platinum 8570": {
130+
"MAKE": INTEL,
131+
"LAUNCH_YEAR": 2023,
132+
"CORE_COUNT": 56,
133+
"THREAD_COUNT": 112,
134+
"TDP": 350,
135+
"SORTED_TUPLES_PER_S": 519150568.953982,
136+
"TPCH_RUNS_PER_H": 179.9952,
137+
"SPECINT_RATE": 482,
138+
"SPECINT": 14.8,
139+
"SORTED_TUPLES_PER_JOULE": 1557475.92336907,
140+
"TPCH_RUNS_PER_KJOULE": 0.1399,
141+
"SPECINT_PER_TDP": 4.736,
142+
"SPECINTrate_PER_TDP": 1.37714285714286,
143+
"DIE_SIZE": (2*763)
144+
},
129145
"AMD EPYC 7601": {
130146
"MAKE": AMD,
131147
"LAUNCH_YEAR": 2017,

‎frontend/src/charts/lineChart.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
143143

144144
// if there is no intersect, we want 'No Break-Even' to be in the center
145145
if (!intersect) {
146-
xbreakEvenLabel = 'end';
146+
xbreakEvenLabel = 'center';
147147
ybreakEvenLabel = 'center';
148148
}
149149

@@ -211,7 +211,7 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
211211
y: {
212212
title: {
213213
display: true,
214-
text: "Accumulated CO₂ [ton]",
214+
text: "Accumulated CO₂ [Tons]",
215215
color: 'black',
216216
font: {
217217
family: "serif",
@@ -266,7 +266,7 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
266266
breakEvenLabel: {
267267
display: true,
268268
type: "label",
269-
backgroundColor: 'transparent',
269+
backgroundColor: intersect ? 'transparent' : 'white',
270270
content: intersect ? yearToYearAndMonth(Number(intersect.x.toFixed(1)), true) : ['No Break-Even', 'Power Consumption Ratio', 'exceeds Performance Ratio'],
271271
color: "red",
272272
z: -1,
@@ -275,8 +275,9 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
275275
size: 18,
276276
weight: 400,
277277
},
278-
borderRadius: 100,
279-
borderColor: 'black',
278+
borderWidth: intersect ? 0 : 1,
279+
borderRadius: intersect ? 100 : 0,
280+
borderColor: intersect ? 'black' : 'red',
280281
padding: {
281282
top: 5,
282283
bottom: 5,

‎frontend/src/partials/BenchmarkSettings.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ import GeoMap from "../partials/GeoMap";
77
export type WorkloadType = 'SPECrate' | 'SPECspeed' | 'Sorting' | 'TPC-H';
88

99
export const WORKLOAD_TYPES: WorkloadType[] = ['SPECrate', 'SPECspeed', 'Sorting', 'TPC-H'];
10+
export const WORKLOAD_EXPLANATIONS: String[] = [
11+
'Measures multi-threaded performance, simulating environments such as databases and web servers',
12+
'Evaluates single-threaded performance for general purpose tasks such as data compression and text processing',
13+
'A common yet computationally challenging task that is difficult to fully parallelize. A vector of four billion random integer values (uint32_t, 16GB) is generated, then the time to sort the entire vector is measured',
14+
'Assesses analytical database performance by running TPC-H workloads with a scale factor of 10 and 25 read-only query streams on the open-source in-memory database system Hyrise'
15+
]
1016

1117
export type PerformanceType = number | null;
1218

@@ -71,35 +77,35 @@ function BenchmarkSettings() {
7177

7278
return (
7379
<div className="flex flex-col text-medium font-medium flex-wrap px-4 py-2 gap-2">
74-
<ToggleSelection<WorkloadType>
75-
label="Workload:"
76-
options={WORKLOAD_TYPES}
77-
currentState={workload}
78-
setState={setWorkload}
79-
disabled={disabledWorkload}
80-
flexGrow={false}
80+
<ToggleSelection<WorkloadType>
81+
label="Workload:"
82+
options={WORKLOAD_TYPES}
83+
currentState={workload}
84+
setState={setWorkload}
85+
disabled={disabledWorkload}
86+
flexGrow={false}
87+
/>
88+
<div className="flex gap-4 items-center">
89+
<label><p>Utilization %:</p></label>
90+
<input
91+
className="w-96 accent-orange-600"
92+
type="range"
93+
value={utilization}
94+
min={0}
95+
max={100}
96+
onChange={(e) => setUtilization(Number(e.target.value))}
8197
/>
82-
<div className="flex gap-4 items-center">
83-
<label><p>Utilization %:</p></label>
98+
<div className="flex">
8499
<input
85-
className="w-96 accent-orange-600"
86-
type="range"
87-
value={utilization}
100+
className="border rounded-md text-center bg-white"
101+
type="number"
88102
min={0}
89103
max={100}
104+
value={utilization}
90105
onChange={(e) => setUtilization(Number(e.target.value))}
91106
/>
92-
<div className="flex">
93-
<input
94-
className="border rounded-md text-center bg-white"
95-
type="number"
96-
min={0}
97-
max={100}
98-
value={utilization}
99-
onChange={(e) => setUtilization(Number(e.target.value))}
100-
/>
101-
<p>%</p>
102-
</div>
107+
<p>%</p>
108+
</div>
103109
</div>
104110
<div className="flex flex-col gap-2">
105111
<p className="font-normal"><strong className="font-medium">Location: </strong> {country}</p>

‎frontend/src/partials/Compare.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,9 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) =
103103
onClick={toggleShow}
104104
className="w-fit px-2 cursor-pointer hover:text-red-600 duration-200 scale-110 hover:scale-125"
105105
>
106-
<img src={close} className="h-5" />
106+
<img
107+
src={close}
108+
className="h-5" />
107109
</button>
108110
</div>
109111
<div className={`${showDropdown ? 'opacity-100' : 'opacity-0 pointer-events-none'} relative duration-150`}>
@@ -123,7 +125,8 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) =
123125
)}
124126
</select>
125127
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
126-
<svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
128+
<svg
129+
className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
127130
</div>
128131
</div>
129132
<div className="flex flex-col gap-2 px-2">
@@ -157,7 +160,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) =
157160
</div>
158161
<div className="flex gap-4 mt-4">
159162
<div className="h-28">
160-
<img className="h-full w-auto max-w-32 mx-auto" src={cpuLogo} />
163+
<img className={`${singleComparison && canToggle ? 'opacity-0' : 'opacity-100'} duration-150 h-full w-auto max-w-32 mx-auto`} src={cpuLogo} />
161164
</div>
162165
<table className="text-base grow border-collapse">
163166
<tbody>

‎frontend/src/partials/DetailedBreakdown.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { useBenchmarkContext } from "../utility/BenchmarkContext";
3-
import { addCommaToNumber, yearToYearAndMonth, BLANK_SPACE } from "../utility/UtilityFunctions";
3+
import { addCommaToNumber, yearToYearAndMonth, BLANK_SPACE, withinXPercent } from "../utility/UtilityFunctions";
44
import CPU_DATA, { CPU_METRICS, CPUMetric } from "../assets/data";
55
import { GRID_INTENSITY } from "../assets/grid_intensities";
66
import { CapexType, OpexType, CPU, RAM, SSD, HDD, Components } from "../utility/lifecycle_analysis/system";
@@ -134,8 +134,13 @@ function DetailedBreakdown() {
134134

135135
const titleText = singleComparison ? 'Current' : 'New'
136136

137-
const perfRatio = (newPerformanceIndicator / oldPerformanceIndicator).toFixed(3).replace(/\.000$/, '');
138-
const consumptionRatio = (newPowerConsumption / oldPowerConsumption).toFixed(3).replace(/\.000$/, '');
137+
let perfRatio :any = (newPerformanceIndicator / oldPerformanceIndicator)
138+
let consumptionRatio :any = (newPowerConsumption / oldPowerConsumption)
139+
140+
const ratioDecimalPlaces = withinXPercent(perfRatio, consumptionRatio, 0.1) ? 3 : 1;
141+
perfRatio = perfRatio.toFixed(ratioDecimalPlaces).replace(/\.000$/, '');
142+
consumptionRatio = consumptionRatio.toFixed(ratioDecimalPlaces).replace(/\.000$/, '');
143+
139144
let oldPerfFormatted = oldPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
140145
let newPerfFormatted = newPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
141146
let oldConsumptionFormatted = oldPowerConsumption.toFixed(3).replace(/\.0$/, '');

‎frontend/src/utility/ToggleSelection.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const EXTRA_DEFAULT = "Custom";
66
interface ToggleSelectionProps<T> {
77
label: string;
88
options: Array<T>;
9+
optionsTooltip?: Array<String>;
910
currentState: T;
1011
capitalize?: boolean;
1112
extraInput?: boolean;
@@ -18,6 +19,7 @@ interface ToggleSelectionProps<T> {
1819
const ToggleSelection = <T,>({
1920
label,
2021
options,
22+
optionsTooltip = [],
2123
setState,
2224
currentState,
2325
capitalize = false,
@@ -29,6 +31,10 @@ const ToggleSelection = <T,>({
2931

3032
const [extra, setExtra] = useState(EXTRA_DEFAULT);
3133

34+
// TODO: implementation:
35+
// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*
36+
const hasTooltip = optionsTooltip.length > 0;
37+
3238
const extraFocus = (value: any, initial: boolean = false) => {
3339
setExtra((initial && value == EXTRA_DEFAULT) ? "" : value);
3440
if (value == Number(value)) setState(value as unknown as T);
@@ -62,19 +68,20 @@ const ToggleSelection = <T,>({
6268
return (
6369
<div className="flex items-center flex-wrap w-full gap-2">
6470
<p className={`${flexGrow ? 'font-mono text-sm ' : ''} border-b-4 border-transparent`}>{label}</p>
65-
{options.map((option) => (
71+
{options.map((option, index) => (
6672
<button
6773
key={String(option)}
6874
onFocus={() => setState(option)}
6975
disabled={disabled.includes(option)}
76+
data-tooltip={hasTooltip ? optionsTooltip[index] : null}
7077
className={`border-b-4 duration-150
7178
${flexGrow ? 'flex-1' : 'px-4'}
72-
${currentState === option ? `${border} font-bold` : `border-b-transparent font-normal hover:font-medium opacity-85 ${borderHover}`}
73-
${capitalize ? " capitalize" : ""}
79+
${currentState === option ? `${border} font-bold` : `border-b-transparent font-normal hover:font-medium opacity-85 ${borderHover}`}
80+
${capitalize ? " capitalize" : ""}
7481
${disabled.includes(option) ? "cursor-not-allowed text-gray-300 hover:border-b-transparent" : "cursor-pointer"}
7582
`}
7683
>
77-
{String(option)}
84+
{String(option)}
7885
</button>
7986
))}
8087
{ extraInput &&

‎frontend/src/utility/UtilityFunctions.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,10 @@ export function yearToYearAndMonth(years: number | null, returnArray?: boolean):
3131
}
3232

3333
}
34+
35+
// x being percent in decimal form
36+
export function withinXPercent(a: number, b:number, x:number) {
37+
const diff = Math.abs(a - b);
38+
const avg = (a + b) / 2;
39+
return (diff / avg) <= x;
40+
}

0 commit comments

Comments
 (0)