fixed single comparison calculation, fixed selecting workload crashes on amd cpus

Author: MarcBaeuerle

frontend/src/assets/data.ts

@@ -1,9 +1,12 @@
-import { CPUEntry, INTEL, AMD } from "../partials/BenchmarkSettings";
+import { CPUEntry } from "../partials/BenchmarkSettings";
 
 export interface CPUs {
   [key: string]: CPUEntry;
 }
 
+export const INTEL = "Intel";
+export const AMD = "AMD";
+
 export interface CPUMetric {
   label: Exclude<keyof CPUEntry, "MAKE">;
   unit: string | null;

frontend/src/partials/BenchmarkSettings.tsx

@@ -1,3 +1,4 @@
+import CPU_DATA from "../assets/data";
 import { useBenchmarkContext } from "../utility/BenchmarkContext";
 import ToggleSelection from "../utility/ToggleSelection";
 import { addCommaToNumber } from "../utility/UtilityFunctions";
@@ -51,12 +52,26 @@ export const WORKLOAD_MAPPING: WorkloadMappingType = {
 
 function BenchmarkSettings() {
 
-  const { workload, utilization, country, oldPerformanceIndicator, newPerformanceIndicator, singleComparison, setWorkload, setUtilization, setCountry } = useBenchmarkContext();
+  const { currentCPU, newCPU, workload, utilization, country, oldPerformanceIndicator, newPerformanceIndicator, singleComparison, setWorkload, setUtilization, setCountry } = useBenchmarkContext();
 
   const ratio = (newPerformanceIndicator / oldPerformanceIndicator).toFixed(3).replace(/\.000$/, '')
   let oldFormatted = oldPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
   let newFormatted = newPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
 
+  let disabledWorkload: WorkloadType[] = [];
+
+  WORKLOAD_TYPES.forEach(workload => {
+    let push = false
+    if (CPU_DATA[currentCPU][WORKLOAD_MAPPING[workload]] === null) push = true;
+    if (CPU_DATA[newCPU][WORKLOAD_MAPPING[workload]] === null) push = true;
+
+    // push only if it is not alreal in disableWorkload
+    if (push && !disabledWorkload.includes(workload)) disabledWorkload.push(workload)
+  })
+
+  // need to reset workload if restriced cpu is selected after workload is set
+  if (disabledWorkload.includes(workload)) setWorkload(WORKLOAD_TYPES[0])
+
   oldFormatted = addCommaToNumber(Number(oldFormatted));
   newFormatted = addCommaToNumber(Number(newFormatted));
 
@@ -68,6 +83,7 @@ function BenchmarkSettings() {
           options={WORKLOAD_TYPES}
           currentState={workload}
           setState={setWorkload}
+          disabled={disabledWorkload}
         />
         <div className="flex gap-4 items-center">
           <label><p>Utilization %:</p></label>

frontend/src/partials/Compare.tsx

@@ -62,6 +62,9 @@ interface DropdownProps {
 }
 
 const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) => {
+
+  const { singleComparison, setSingleComparison} = useBenchmarkContext();
+
   const specs_selected :CPUEntry = CPU_DATA[thisConfig.cpu];
   const specs_compareTo :CPUEntry = CPU_DATA[otherConfig.cpu];
   const canToggle = label == NEW_LABEL;
@@ -70,11 +73,14 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) =
 
   // This is when new hardware is hidden, we set it equal to current hardware
   if (canToggle && !showDropdown) {
-    thisConfig.setCPU(otherConfig.cpu)
+    // thisConfig.setCPU(otherConfig.cpu)
+    // thisConfig.setRAM(otherConfig.ram)
+    // thisConfig.setHDD(otherConfig.hdd)
   }
 
   const toggleShow = () => {
     if (!canToggle) return;
+    setSingleComparison(!singleComparison);
     setShowDropdown(!showDropdown);
   }
 
@@ -119,25 +125,28 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisConfig, otherConfig }) =
       </div>
       <div className="flex flex-col gap-4 pb-4 px-2">
         <ToggleSelection<number>
-          label="DRAM (GB):"
+          label="RAM (GB):"
           options={RAM_CAPACITIES}
           currentState={thisConfig.ram}
           setState={thisConfig.setRAM}
           extraInput={true}
+          flexJustify="justify-between"
         />
         <ToggleSelection<number>
           label="SSD (GB):"
           options={SSD_CAPACITIES}
           currentState={thisConfig.ssd}
           setState={thisConfig.setSSD}
           extraInput={true}
+          flexJustify="justify-between"
         />
         <ToggleSelection<number>
           label="HDD (GB):"
           options={HDD_CAPACITIES}
           currentState={thisConfig.hdd}
           setState={thisConfig.setHDD}
           extraInput={true}
+          flexJustify="justify-between"
         />
       </div>
       <div className="flex gap-4">

frontend/src/utility/BenchmarkContext.tsx

@@ -48,6 +48,7 @@ interface BenchmarkContextType {
   setWorkload: (value: WorkloadType) => void;
   setUtilization: (value: number) => void;
   setCountry: (value: Country) => void;
+  setSingleComparison: (value: boolean) => void;
 }
 
 const BenchmarkContext = createContext<BenchmarkContextType | undefined>(undefined);
@@ -57,6 +58,8 @@ interface BenchmarkProviderProps {
 }
 
 export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }) => {
+  // need to add a usestate for single comparison cant
+
   // Compare section
   const [currentCPU, setCurrentCPU] = useState<string>(CPU_LIST[0]);
   const [currentRAM, setCurrentRAM] = useState<number>(RAM_CAPACITIES[0]);
@@ -72,11 +75,12 @@ export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }
   const [utilization, setUtilization] = useState<number>(40);
   const [country, setCountry] = useState<Country>(COUNTRIES[0]);
 
+  const [singleComparison, setSingleComparison] = useState<boolean>(true);
+
   const oldPerformanceIndicator = CPU_DATA[currentCPU][WORKLOAD_MAPPING[workload]] || 0;
   const newPerformanceIndicator = CPU_DATA[newCPU][WORKLOAD_MAPPING[workload]] || 0;
   const oldDieSize = CPU_DATA[currentCPU].DIE_SIZE;
   const newDieSize = CPU_DATA[newCPU].DIE_SIZE;
-  const singleComparison = currentCPU == newCPU;
 
   // Old System
   const oldSystem = new System(
@@ -101,7 +105,7 @@ export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }
   );
 
   const comparison :ComparisonType = generateSystemsComparison(
-    newSystem, // new system object
+    (singleComparison ? oldSystem : newSystem), // new system object
     oldSystem, // old system object
     timeHorizon, // time horizon
     country, // country string
@@ -141,7 +145,7 @@ export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }
   const newSystemOpex = comparison.newSystemOpex.slice(0, breakEven);
 
   return (
-    <BenchmarkContext.Provider value={{ oldPerformanceIndicator, newPerformanceIndicator, comparison, oldSystemOpex, singleComparison, newSystemOpex, intersect, breakEven, workload, utilization, country, setWorkload, setUtilization, setCountry, currentCPU, setCurrentCPU, newCPU, setNewCPU, currentRAM, currentSSD, newRAM, newSSD, setNewRAM, setNewSSD, setCurrentRAM, setCurrentSSD, currentHDD, setCurrentHDD, newHDD, setNewHDD }}>
+    <BenchmarkContext.Provider value={{ setSingleComparison, oldPerformanceIndicator, newPerformanceIndicator, comparison, oldSystemOpex, singleComparison, newSystemOpex, intersect, breakEven, workload, utilization, country, setWorkload, setUtilization, setCountry, currentCPU, setCurrentCPU, newCPU, setNewCPU, currentRAM, currentSSD, newRAM, newSSD, setNewRAM, setNewSSD, setCurrentRAM, setCurrentSSD, currentHDD, setCurrentHDD, newHDD, setNewHDD }}>
       {children}
     </BenchmarkContext.Provider>
   );

frontend/src/utility/ToggleSelection.tsx

@@ -7,15 +7,26 @@ interface ToggleSelectionProps<T> {
   currentState: T;
   capitalize?: boolean;
   extraInput?: boolean;
+  flexJustify?: string;
+  disabled?: Array<T>;
   setState: (value: T) => void;
 }
 
-const ToggleSelection = <T,>({ label, options, setState, currentState, capitalize = false, extraInput = false }: ToggleSelectionProps<T>) => {
+const ToggleSelection = <T,>({ 
+  label,
+  options,
+  setState,
+  currentState,
+  capitalize = false,
+  extraInput = false,
+  flexJustify = "justify-start",
+  disabled = []
+}: ToggleSelectionProps<T>) => {
 
   const [extra, setExtra] = useState('Other');
 
-  const extraFocus = (value: any) => {
-    setExtra(value);
+  const extraFocus = (value: any, initial: boolean = false) => {
+    setExtra((initial && value == "Other") ? "" : value);
     if (value == Number(value)) setState(value as unknown as T);
   }
 
@@ -33,25 +44,26 @@ const ToggleSelection = <T,>({ label, options, setState, currentState, capitaliz
   };
 
   return (
-    <div className="flex gap-4 items-center flex-wrap">
-      <p className="border-b-4 border-transparent font-medium">{label}</p>
+    <div className={`flex gap-4 items-center flex-wrap w-full ${flexJustify}`}>
+      <p className="border-b-4 border-transparent">{label}</p>
       {options.map((option) => (
         <button
           key={String(option)}
           onFocus={() => setState(option)}
-          className={
-            `px-3 py-0.5 cursor-pointer border-b-4 duration-150
-${currentState === option ? "border-orange-400 font-bold" : "border-b-transparent font-normal hover:border-b-orange-400/30"}
-${capitalize ? 'capitalize' : ''}`
-          }
+          disabled={disabled.includes(option)}
+          className={`px-2 min-w-16 border-b-4 duration-150 
+${currentState === option ? "border-orange-400 font-bold" : "border-b-transparent font-normal hover:border-b-orange-400/30"} 
+${capitalize ? " capitalize" : ""} 
+${disabled.includes(option) ? "cursor-not-allowed text-gray-300 hover:border-b-transparent" : "cursor-pointer"}
+`}
         >
           {String(option)}
         </button>
       ))}
       { extraInput &&
         <div className="flex items-start">
-          <input type="text" className={`${currentState == extra ? 'border-orange-400 font-bold' : 'border-b-transparent hover:border-b-orange-400/30'} cursor-pointer text-center duration-150 border-b-4 border-orange-400 focus:outline-none w-14`}
-            onFocus={(e) => extraFocus(e.target.value)}
+          <input type="text" className={`${currentState == extra ? 'border-orange-400 font-bold' : 'border-b-transparent hover:border-b-orange-400/30'} cursor-pointer text-center duration-150 border-b-4 focus:outline-orange-400/30 w-14`}
+            onFocus={(e) => extraFocus(e.target.value, true)}
             onChange={(e) => extraFocus(e.target.value)}
             onBlur={(e) => extraUnfocus(e.target.value)}
             value={extra} />