1- import React , { useState } from "react" ;
1+ import React , { useState , useEffect } from "react" ;
22import intel_xeon_logo from "../assets/intel_xeon_logo.png" ;
33import CPU_DATA from "../assets/data.ts" ;
44import { AMD , CPUEntry , CPUMake } from "./BenchmarkSettings.tsx" ;
@@ -34,6 +34,31 @@ const getClosestLogo = (launchYear: number | null, make: CPUMake): string => {
3434 return closestYear ? YEAR_LOGOS [ closestYear ] : intel_xeon_logo ;
3535} ;
3636
37+ const applyScaledUpdates = (
38+ updates : Partial < ServerType > ,
39+ label : string ,
40+ NEW_LABEL : string ,
41+ oldPerformanceIndicator : number ,
42+ newPerformanceIndicator : number
43+ ) : Partial < ServerType > => {
44+ const isNew = label === NEW_LABEL ;
45+ const base = isNew ? oldPerformanceIndicator : newPerformanceIndicator ;
46+ const target = isNew ? newPerformanceIndicator : oldPerformanceIndicator ;
47+ const ratio = base / target ;
48+
49+ const scaleKeys : ( keyof Pick < ServerType , 'ssd' | 'ram' | 'hdd' > ) [ ] = [ 'ssd' , 'ram' , 'hdd' ] ;
50+ const scaledUpdates : Partial < ServerType > = { } ;
51+
52+ scaleKeys . forEach ( ( key ) => {
53+ const value = updates [ key ] ;
54+ if ( value == undefined ) return ;
55+ scaledUpdates [ key ] = Math . floor ( value * ratio ) ;
56+ } ) ;
57+
58+ return scaledUpdates ;
59+ } ;
60+
61+
3762const DISPLAY : Record < string , keyof CPUEntry > = {
3863 Cores : "CORE_COUNT" ,
3964 Threads : "THREAD_COUNT" ,
@@ -78,31 +103,48 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
78103 updateServer ( thisServer , updates ) ;
79104
80105 if ( advancedOptions === 'Mirror' ) {
81- updateServer ( otherServer , updates ) ;
106+ const { cpu, ...updatesWithoutCPU } = updates ;
107+ updateServer ( otherServer , updatesWithoutCPU ) ;
82108 return ;
83109 }
84110
85111 if ( advancedOptions === 'Scale' ) {
86- const isNew = label === NEW_LABEL ;
87- const base = isNew ? oldPerformanceIndicator : newPerformanceIndicator ;
88- const target = isNew ? newPerformanceIndicator : oldPerformanceIndicator ;
89- const ratio = base / target ;
112+ const scaledUpdates = applyScaledUpdates (
113+ updates ,
114+ label ,
115+ NEW_LABEL ,
116+ oldPerformanceIndicator ,
117+ newPerformanceIndicator
118+ ) ;
119+ updateServer ( otherServer , scaledUpdates ) ;
120+ return ;
121+ }
122+ } ;
90123
91- const scaleKeys : ( keyof Pick < ServerType , 'ssd' | 'ram' | 'hdd' > ) [ ] = [ 'ssd' , 'ram' , 'hdd' ] ;
124+ const cpuLogo = getClosestLogo ( specs_selected . LAUNCH_YEAR , specs_selected . MAKE ) ;
92125
93- const scaledUpdates : Partial < ServerType > = { } ;
126+ useEffect ( ( ) => {
127+ if ( label !== NEW_LABEL ) return ; // only update new cpu
94128
95- scaleKeys . forEach ( ( key ) => {
96- const value = updates [ key ] ;
97- if ( value == undefined ) return ;
98- scaledUpdates [ key ] = Math . floor ( value * ratio ) ;
99- } ) ;
129+ if ( advancedOptions === 'Scale' ) {
130+ const scaledUpdates = applyScaledUpdates (
131+ otherServer ,
132+ label ,
133+ OLD_LABEL , //swap otherwise the scaling goes in the opposite direction
134+ oldPerformanceIndicator ,
135+ newPerformanceIndicator
136+ ) ;
137+ updateServer ( thisServer , scaledUpdates ) ;
138+ return ;
139+ }
100140
101- updateServer ( otherServer , scaledUpdates ) ;
141+ if ( advancedOptions === 'Mirror' ) {
142+ const { cpu, ...updatesWithoutCPU } = otherServer ;
143+ updateServer ( thisServer , updatesWithoutCPU ) ;
144+ return ;
102145 }
103- } ;
104146
105- const cpuLogo = getClosestLogo ( specs_selected . LAUNCH_YEAR , specs_selected . MAKE ) ;
147+ } , [ advancedOptions ] )
106148
107149 return (
108150 < div className = "col-span-1 z-10 flex flex-col gap-2 font-light relative" >
@@ -227,7 +269,15 @@ function Compare() {
227269 < input
228270 type = "radio"
229271 name = "scalingOption"
230- value = "mirror"
272+ checked = { advancedOptions === null }
273+ onChange = { ( ) => setAdvancedOptions ( null ) }
274+ />
275+ < span > None</ span >
276+ </ label >
277+ < label className = "flex items-center gap-2 cursor-pointer" >
278+ < input
279+ type = "radio"
280+ name = "scalingOption"
231281 checked = { advancedOptions === 'Mirror' }
232282 onChange = { ( ) => setAdvancedOptions ( 'Mirror' ) }
233283 />
@@ -237,21 +287,11 @@ function Compare() {
237287 < input
238288 type = "radio"
239289 name = "scalingOption"
240- value = "scale"
241290 checked = { advancedOptions === 'Scale' }
242291 onChange = { ( ) => setAdvancedOptions ( 'Scale' ) }
243292 />
244293 < span > Scale Resources</ span >
245294 </ label >
246- < label className = "flex items-center gap-2 cursor-pointer text-gray-400 italic" >
247- < input
248- type = "radio"
249- name = "scalingOption"
250- value = "other"
251- disabled
252- />
253- < span > Something else</ span >
254- </ label >
255295 </ form >
256296 ) }
257297 </ div >
0 commit comments