fix: solve performance issue (#121)

* fix: update the simulation info size to stop blicking
* feat: use loop instead of reduce
* feat(refactor): remove HouseComponentsConfigurator
* feat(refactor): put the logic in useHouseComponents
* feat: improve the performances of SimulationHeatLoss by using for loop
* feat: unmount chart to improve performances
* feat(test): write new tests for useHouseComponents
* fix(test): add some timeout for flacky tests

package.json

@@ -26,8 +26,8 @@
     "@types/react": "18.3.16",
     "@types/react-dom": "18.3.5",
     "@types/recharts": "^1.8.29",
-    "deep-equal": "^2.2.3",
     "i18next": "^23.9.0",
+    "immer": "^10.1.1",
     "lucide-react": "^0.456.0",
     "papaparse": "^5.4.1",
     "react": "18.3.1",
@@ -37,7 +37,8 @@
     "recharts": "^2.15.0",
     "three": "^0.169.0",
     "typescript": "5.7.2",
-    "use-debounce": "^10.0.4"
+    "use-debounce": "^10.0.4",
+    "use-immer": "^0.11.0"
   },
   "scripts": {
     "dev": "yarn vite",
@@ -69,8 +70,10 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.12.0",
     "@playwright/test": "^1.49.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/deep-equal": "^1.0.4",
     "@types/i18n": "0.13.12",
     "@types/papaparse": "^5.3.15",
     "@types/three": "^0",
@@ -95,6 +98,7 @@
     "eslint-plugin-react-hooks": "5.0.0",
     "globals": "^15.11.0",
     "husky": "9.1.7",
+    "jsdom": "^25.0.1",
     "nock": "^13.5.3",
     "nyc": "17.1.0",
     "playwright-test-coverage": "^1.2.12",

src/context/ChartContext.tsx

@@ -0,0 +1,65 @@
+import { ReactNode, createContext, useContext, useMemo, useState } from 'react';
+
+import { undefinedContextErrorFactory } from '@/utils/context';
+
+type Period = {
+  numberOfDays: number;
+  labelKey:
+    | 'ONE_MONTH'
+    | 'THREE_MONTHS'
+    | 'SIX_MONTHS'
+    | 'ONE_YEAR'
+    | 'THREE_YEARS';
+};
+
+export const PERIODS: Period[] = [
+  { numberOfDays: 30, labelKey: 'ONE_MONTH' },
+  { numberOfDays: 90, labelKey: 'THREE_MONTHS' },
+  { numberOfDays: 180, labelKey: 'SIX_MONTHS' },
+  { numberOfDays: 365, labelKey: 'ONE_YEAR' },
+  { numberOfDays: 1_095, labelKey: 'THREE_YEARS' },
+] as const;
+
+type ChartContextType = {
+  period: Period;
+  updatePeriod: (periodValue: number) => void;
+};
+
+const ChartContext = createContext<ChartContextType | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const ChartProvider = ({ children }: Props): ReactNode => {
+  const [period, setPeriod] = useState(PERIODS[0]);
+
+  const updatePeriod = (periodValue: number): void =>
+    setPeriod(
+      PERIODS.find((p) => periodValue === p.numberOfDays) ?? PERIODS[0],
+    );
+
+  const contextValue = useMemo(
+    () => ({
+      period,
+      updatePeriod,
+    }),
+    [period],
+  );
+
+  return (
+    <ChartContext.Provider value={contextValue}>
+      {children}
+    </ChartContext.Provider>
+  );
+};
+
+export const useChart = (): ChartContextType => {
+  const context = useContext(ChartContext);
+
+  if (!context) {
+    throw undefinedContextErrorFactory('Chart');
+  }
+
+  return context;
+};

src/context/SimulationContext.tsx

@@ -18,20 +18,25 @@ import {
   UseHouseComponentsReturnType,
   useHouseComponents,
 } from '@/hooks/useHouseComponents';
-import { HouseComponentsConfigurator } from '@/models/HouseComponentsConfigurator';
 import {
   SimulationDay,
   createDefault,
   simulationHistory,
 } from '@/reducer/simulationHistoryReducer';
 import { FormattedHeatLoss } from '@/types/heatLoss';
-import { HeatLossPerComponent } from '@/types/houseComponent';
+import {
+  HeatLossPerComponent,
+  HeatLossPerComponentEntries,
+} from '@/types/houseComponent';
 import { SimulationStatus } from '@/types/simulation';
 import { TemperatureRow, UserOutdoorTemperature } from '@/types/temperatures';
 import { NonEmptyArray } from '@/types/utils';
 import { WindowScaleSize, WindowSizeType } from '@/types/window';
 import { undefinedContextErrorFactory } from '@/utils/context';
-import { formatHeatLossRate } from '@/utils/heatLoss';
+import {
+  calculateHeatLossConstantFactor,
+  formatHeatLossRate,
+} from '@/utils/heatLoss';
 import {
   getOutdoorTemperature,
   loadTemperaturesFromCSV,
@@ -98,7 +103,6 @@ type SimulationContextType = {
     };
     numberOfFloors: number;
     updateNumberOfFloors: (numberOfFloors: number) => void;
-    componentsConfigurator: HouseComponentsConfigurator;
   };
 };
 
@@ -143,14 +147,35 @@ export const SimulationProvider = ({
   const currentDay = simulationDays[currentDayIdx];
 
   // Hooks
-  const houseComponentsHook = useHouseComponents({
-    onChange: (newHouseConfigurator) => {
+  const houseComponentsHook = useHouseComponents();
+
+  // Transform in array here for performances in the SimulationHeatLoss.
+  // Otherwise, the transformation will be executed on each changes vs once here.
+  const heatLossConstantFactors: HeatLossPerComponentEntries = useMemo(
+    () =>
+      Object.entries(
+        houseComponentsHook.all.reduce<HeatLossPerComponent>(
+          (acc, c) => ({
+            ...acc,
+            [c.houseComponentId]: calculateHeatLossConstantFactor({
+              area: c.actualArea,
+              materials: c.buildingMaterials,
+            }),
+          }),
+          {},
+        ),
+      ),
+    [houseComponentsHook.all],
+  );
+
+  useEffect(
+    () =>
       dispatchHistory({
-        type: 'updateHouseConfigurator',
-        houseConfigurator: newHouseConfigurator,
-      });
-    },
-  });
+        type: 'updateConstantFactors',
+        heatLossConstantFactors,
+      }),
+    [heatLossConstantFactors],
+  );
 
   // Load CSV
   useEffect(() => {
@@ -328,7 +353,6 @@ export const SimulationProvider = ({
       pricekWh,
       windowSize,
       numberOfFloors,
-      houseConfigurator,
     } = simulationSettings;
 
     return {
@@ -388,7 +412,6 @@ export const SimulationProvider = ({
         },
         numberOfFloors,
         updateNumberOfFloors,
-        componentsConfigurator: houseConfigurator,
         ...houseComponentsHook,
       },
     };