fixed utilization scaling, and resource scaling interactions + minor ux

Author: MarcBaeuerle

frontend/src/charts/lineChart.tsx

@@ -71,7 +71,7 @@ export function lineIntersect(
 
 const LineChart: React.FC<{}> = memo(function LineChart() {
 
-  const { workload, country, utilization, comparison, intersect, oldSystemOpex, newSystemOpex, breakEven, singleComparison } = useBenchmarkContext();
+  const { workload, country, currentServer, newServer, comparison, intersect, oldSystemOpex, newSystemOpex, breakEven, singleComparison } = useBenchmarkContext();
 
   // @ts-ignore
   const [chart, setChart] = useState<Chart | null>(null);
@@ -106,6 +106,9 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
     })
   }
 
+  const currentUtilization = currentServer.utilization.toFixed(0);
+  const newUtilization = newServer.utilization.toFixed(0);
+
   const L = oldSystemOpex.length - 1;
   const isOneDecimalPlace = oldSystemOpex[L] > 1000 && newSystemOpex[L] > 1000;
 
@@ -325,7 +328,12 @@ const LineChart: React.FC<{}> = memo(function LineChart() {
         <canvas ref={canvas} width={400} height={500}></canvas>
       </figure>
       <p className="text-center text-sm w-full mx-auto font-serif text-slate-700">
-        Projected CO2 accumulated emissions of current (blue) and new (orange) hardware for a {workload} workload, {utilization}% utilization with energy sourced from <span className="capitalize">{country}</span>.
+        {singleComparison ? 
+        `Projected CO2 accumulated emissions of current (blue) hardware for a ${workload} workload, operated at ${currentUtilization}% utilization, with electricity from ${country}.`
+          :
+        `Projected CO2 accumulated emissions of current (blue) and new (orange) hardware for a ${workload} workload, operated at ${currentUtilization}% and ${newUtilization}% utilization respectively, with electricity from ${country}.`
+
+        }
       </p>
     </div>
   );

frontend/src/partials/BenchmarkSettings.tsx

@@ -103,7 +103,7 @@ function BenchmarkSettings() {
 
   useEffect(() => {
     if (scaling === "Utilization") {
-      const ratio = newPerformanceIndicator / oldPerformanceIndicator;
+      const ratio = oldPerformanceIndicator / newPerformanceIndicator;
       const scaledUtilization = clamp( currentServer.utilization as number * ratio, 0, 100);
       updateServer(newServer, { utilization: scaledUtilization });
     }
@@ -165,7 +165,7 @@ return (
         />
       </div>
     </div>
-    <div className={`${advancedSettings ? 'h-96' : 'h-96'} duration-300 ease-in-out overflow-hidden relative`}>
+    <div className={`duration-300 ease-in-out overflow-hidden relative`}>
       <GeoMap country={country} setCountry={setCountry} />
     </div>
   </div>

frontend/src/partials/Compare.tsx

@@ -52,7 +52,6 @@ const applyScaledUpdates = (
 
   const ratio = thisPerformanceIndicator / otherPerformanceIndicator;
 
-
   const scaleKeys: (keyof Pick<ServerType, 'ssd' | 'ram' | 'hdd'>)[] = ['ssd', 'ram', 'hdd'];
   const scaledUpdates: Partial<ServerType> = {};
 
@@ -84,7 +83,7 @@ interface DropdownProps {
 
 const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, showAdvanced, advancedOptions}) => {
 
-  const { singleComparison, updateServer, setSingleComparison, setAdvancedOptions, getPerformanceIndicator} = useBenchmarkContext();
+  const { singleComparison, workload, updateServer, setSingleComparison, setAdvancedOptions, setAdvancedSettings, getPerformanceIndicator} = useBenchmarkContext();
 
   const specs_selected :CPUEntry = CPU_DATA[thisServer.cpu];
   const specs_compareTo :CPUEntry = CPU_DATA[otherServer.cpu];
@@ -121,9 +120,9 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
     if (onlyCPU) {
       updates = {
         cpu: updates.cpu,
-        ram: thisServer.ram,
-        ssd: thisServer.ssd,
-        hdd: thisServer.hdd,
+        ram: otherServer.ram,
+        ssd: otherServer.ssd,
+        hdd: otherServer.hdd,
       }
     }
 
@@ -141,8 +140,8 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
     if (advancedOptions === 'Scale' && onlyCPU) {
       const scaledUpdates = applyScaledUpdates(
         updates,
-        getPerformanceIndicator(otherServer.cpu),
         getPerformanceIndicator(updates.cpu || thisServer.cpu),
+        getPerformanceIndicator(otherServer.cpu),
       );
       updateServer(thisServer, scaledUpdates);
       return;
@@ -152,8 +151,8 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
     if (advancedOptions === 'Scale' && !onlyCPU) {
       const scaledUpdates = applyScaledUpdates(
         updates,
-        getPerformanceIndicator(updates.cpu || thisServer.cpu),
         getPerformanceIndicator(otherServer.cpu),
+        getPerformanceIndicator(updates.cpu || thisServer.cpu),
       );
       updateServer(otherServer, scaledUpdates);
       return;
@@ -181,7 +180,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
       return;
     }
 
-  }, [advancedOptions])
+  }, [advancedOptions, workload])
 
   return (
     <div className="col-span-1 flex flex-col gap-2 font-light relative">
@@ -202,7 +201,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
             className="h-5" />
         </button>
       </div>
-      <ServerPresetsComponent {...{ presetValue, updateComponent, setAdvancedOptions }} />
+      <ServerPresetsComponent {...{ presetValue, updateComponent, setAdvancedOptions, setAdvancedSettings }} />
       <div className={`${showDropdown ? 'opacity-100' : 'opacity-0 pointer-events-none'} relative duration-150`}>
         <select
           className="block appearance-none text-base w-full bg-gray-100 border-2 border-gray-400 py-1 px-2 pr-8 rounded focus:outline-none focus:bg-white focus:border-gray-500"
@@ -249,11 +248,12 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
         <table className="text-base grow border-collapse">
           <tbody>
             {Object.entries(DISPLAY).map(([key, prop]) => {
-              const selectedValue = specs_selected[prop] || 0;
+              let selectedValue = specs_selected[prop] || 0;
               const compareValue = (specs_compareTo?.[prop] ?? selectedValue) || 0;
+              if (key == 'TDP') selectedValue = selectedValue + ' W';
               return (
                 <tr key={key}>
-                  <td className="w-0 pr-4 align-top text-right">{key}:</td>
+                  <td className="w-0 pr-4 align-top text-left">{key}:</td>
                   <td className="flex items-center gap-1">
                     <p>{selectedValue}</p>
                     {selectedValue > compareValue && !singleComparison && (

frontend/src/partials/GeoMap.tsx

@@ -131,7 +131,7 @@ const GeoMap: React.FC<GeomapProps> = ({ country, setCountry }) => {
 
   return (
     <>
-      <div className="w-full relative h-full flex flex-col overflow-hidden rounded-lg border border-slate-500">
+      <div className="w-full relative h-96 flex flex-col overflow-hidden rounded-lg border border-slate-500">
         <MapContainer
           center={[30, 0]}
           zoom={2}
@@ -171,13 +171,13 @@ const GeoMap: React.FC<GeomapProps> = ({ country, setCountry }) => {
           </div>
         </div>
       </div>
-      <p className="text-sm font-light text-right -mt-2">
+      <p className="text-base font-light text-right">
         Source:{BLANK_SPACE}
         <a
           className="text-cyan-700 hover:underline duration-300"
           href="https://www.electricitymaps.com/"
         >
-          Electricity Maps
+          Electricity Maps - Yearly 2024
         </a>
       </p>
     </>

frontend/src/partials/ServerPresets.tsx

@@ -7,9 +7,10 @@ type ServerPresetsComponentProps = {
   updateComponent: (update: Partial<ServerType>, preset: string) => void;
   presetValue: keyof ServerPresets | typeof CUSTOM;
   setAdvancedOptions: (value: null | 'Mirror' | 'Scale') => void;
+  setAdvancedSettings: (value: boolean) => void;
 };
 
-const ServerPresetsComponent = ({ presetValue, updateComponent, setAdvancedOptions }: ServerPresetsComponentProps) => {
+const ServerPresetsComponent = ({ presetValue, updateComponent, setAdvancedOptions, setAdvancedSettings }: ServerPresetsComponentProps) => {
   const [showPresetMenu, setShowPresetMenu] = useState(false);
   const popupRef = useRef<HTMLDivElement>(null);
 
@@ -35,6 +36,7 @@ const ServerPresetsComponent = ({ presetValue, updateComponent, setAdvancedOptio
 
   const handleSelectPreset = (key: keyof ServerPresets) => {
     setAdvancedOptions(null);
+    setAdvancedSettings(true);
     const preset = SERVER_PRESETS[key];
 
     const config: Partial<ServerType> = {

frontend/src/utility/BenchmarkContext.tsx

@@ -145,8 +145,6 @@ export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }
     CPU_DATA[newCPU].TDP// cpuTdp in Watts
   );
 
-  console.log(currentServer.utilization, newServer.utilization);
-
   const comparison :ComparisonType = generateSystemsComparison(
     (singleComparison ? oldSystem : newSystem), // new system object
     oldSystem, // old system object
@@ -187,6 +185,7 @@ export const BenchmarkProvider: React.FC<BenchmarkProviderProps> = ({ children }
     return intersect;
   }
 
+  console.log(comparison)
   const intersect = calculateIntersect(singleComparison, comparison.oldSystemOpex, comparison.newSystemOpex)
   const breakEven = Math.ceil(intersect ? intersect.x + 1 : 3);
 

frontend/src/utility/lifecycle_analysis/comparison.ts

@@ -37,6 +37,9 @@ export function generateSystemsComparison(
   );
   let newSystemOpex = newSystemEmissions.projected
 
+  console.log(newSystemEmissions);
+
+
   const newSystemCapexBreakdown = newSystem.calculateCapexEmissions();
   const newSystemCapex = newSystemCapexBreakdown.TOTAL;
 
@@ -60,8 +63,9 @@ export function generateSystemsComparison(
     // Adjust old system OPEX based on performance factor
     oldSystemOpex = oldSystemOpex.map((opex) => opex / performanceFactor);
   } else {
+    // utilization scaling
     // Adjust new system OPEX based on performance factor
-    newSystemOpex = newSystemOpex.map((opex) => opex * performanceFactor);
+    // newSystemOpex = newSystemOpex.map((opex) => opex * performanceFactor);
   }
 
   // Add CAPEX to OPEX for the new system at each time step

frontend/src/utility/lifecycle_analysis/system.ts

@@ -136,11 +136,12 @@ export class System {
     const hddEnergyConsumption =
       (this.hddCapacity > 0 ? 7 : 0) / 1000; // kW
 
-    const totalWatts =
+    let totalWatts =
       cpuEnergyConsumption +
       dramEnergyConsumption +
       ssdEnergyConsumption +
       hddEnergyConsumption;
+
     const totalWattsPerYear = 24 * 7 * 52 * totalWatts; // kWh
     const GCI = (GRID_INTENSITY[country] || 0) / 1000;
 
@@ -150,7 +151,7 @@ export class System {
       SSD: ssdEnergyConsumption,
       HDD: hddEnergyConsumption,
       TOTAL: totalWatts,
-      opexPerYear: totalWattsPerYear * GCI
+      opexPerYear: (totalWattsPerYear * GCI)
     }
 }
 }