power consumption display values, interaction fix when selecting scaling option + changing hardware

Author: MarcBaeuerle

frontend/src/partials/BenchmarkSettings.tsx

@@ -107,7 +107,16 @@ function BenchmarkSettings() {
       const scaledUtilization = clamp( currentServer.utilization as number * ratio, 0, 100);
       updateServer(newServer, { utilization: scaledUtilization });
     }
-  }, [scaling])
+
+    if (scaling === "Emissions") {
+      updateServer(newServer, { utilization: currentServer.utilization });
+    }
+
+    if (scaling === "None") {
+      updateServer(newServer, { utilization: currentServer.utilization });
+    }
+
+  }, [scaling, currentServer, newServer])
 
 return (
   <div className="flex z-30 flex-col text-medium font-medium flex-wrap px-4 py-2 gap-4">

frontend/src/partials/Compare.tsx

@@ -248,14 +248,16 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
         <table className="text-base grow border-collapse">
           <tbody>
             {Object.entries(DISPLAY).map(([key, prop]) => {
-              let selectedValue = specs_selected[prop] || 0;
+              const selectedValue = specs_selected[prop] || 0;
               const compareValue = (specs_compareTo?.[prop] ?? selectedValue) || 0;
-              if (key == 'TDP') selectedValue = selectedValue + ' W';
+
+              const selectedFormatted = selectedValue + (key == 'TDP' ? ' W' : '');
+
               return (
                 <tr key={key}>
                   <td className="w-0 pr-4 align-top text-left">{key}:</td>
                   <td className="flex items-center gap-1">
-                    <p>{selectedValue}</p>
+                    <p>{selectedFormatted}</p>
                     {selectedValue > compareValue && !singleComparison && (
                       <img src={UP_ARROW} className="h-full" alt="up" />
                     )}

frontend/src/partials/DetailedBreakdown.tsx

@@ -105,7 +105,7 @@ const BreakdownCard: React.FC<BreakdownCardProp> = ({ title, breakdown, borderCo
 };
 
 function DetailedBreakdown() {
-  const { currentServer, newServer, comparison, intersect, workload, singleComparison, oldPerformanceIndicator, newPerformanceIndicator, capexBreakdown, opexBreakdown, oldPowerConsumption, newPowerConsumption } = useBenchmarkContext();
+  const { currentServer, newServer, comparison, intersect, workload, singleComparison, oldPerformanceIndicator, newPerformanceIndicator, scaling, capexBreakdown, opexBreakdown, oldPowerConsumption, newPowerConsumption } = useBenchmarkContext();
 
   const year = intersect ? yearToYearAndMonth(Number(intersect.x.toFixed(1)), false, true) : "No Break-Even";
   const total = intersect ? addCommaToNumber(Number(intersect.y.toFixed(1))) + " kgCO₂" : "No Break-even";
@@ -116,15 +116,21 @@ function DetailedBreakdown() {
   const titleText = singleComparison ? 'Current' : 'New'
 
   let perfRatio :any = (newPerformanceIndicator / oldPerformanceIndicator)
-  let consumptionRatio :any = (newPowerConsumption / oldPowerConsumption)
+  let normalizedOldPowerConsumption = oldPowerConsumption;
+
+  if (scaling === 'Emissions') {
+     normalizedOldPowerConsumption = oldPowerConsumption * perfRatio;
+  }
+
+  let consumptionRatio :any = (newPowerConsumption / normalizedOldPowerConsumption)
 
   const ratioDecimalPlaces = withinXPercent(perfRatio, consumptionRatio, 0.1) ? 3 : 1;
   perfRatio = perfRatio.toFixed(ratioDecimalPlaces).replace(/\.000$/, '');
   consumptionRatio = consumptionRatio.toFixed(ratioDecimalPlaces).replace(/\.000$/, '');
 
   let oldPerfFormatted = oldPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
   let newPerfFormatted = newPerformanceIndicator.toFixed(1).replace(/\.0$/, '');
-  let oldConsumptionFormatted = oldPowerConsumption.toFixed(3).replace(/\.0$/, '');
+  let oldConsumptionFormatted = normalizedOldPowerConsumption.toFixed(3).replace(/\.0$/, '');
   let newConsumptionFormatted = newPowerConsumption.toFixed(3).replace(/\.0$/, '');
 
   newPerfFormatted = addCommaToNumber(Number(newPerfFormatted));