react data grid test

webapp/package.json

@@ -20,6 +20,7 @@
     "@mui/material": "5.14.11",
     "@mui/x-date-pickers": "6.18.3",
     "@reduxjs/toolkit": "1.9.6",
+    "@silevis/reactgrid": "^4.1.3",
     "axios": "1.5.1",
     "clsx": "2.0.0",
     "d3": "5.16.0",

webapp/src/components/App/index.tsx

@@ -55,6 +55,7 @@ import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
 import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
 import GlideDataGrid from "../common/Glide";
+import ReactDataGrid from "../common/ReactGrid";
 
 function App() {
   return (
@@ -186,7 +187,7 @@ function App() {
                         </Route>
                         <Route path="debug" element={<Debug />} />
                         <Route path="glide" element={<GlideDataGrid />} />
-                        <Route path="react-grid" element={<Debug />} />
+                        <Route path="react-grid" element={<ReactDataGrid />} />
                         <Route path="*" element={<Modelization />}>
                           <Route index element={<Map />} />
                         </Route>

webapp/src/components/common/Glide/index.tsx

@@ -63,15 +63,22 @@ function GlideDataGrid(props: GlideDataGridProps) {
   const { startMeasurement, endMeasurement } =
     usePerformanceMeasure("DataFetchAndRender");
 
-  useEffect(() => {
+  const fetchData = useCallback(async () => {
+    const fetchedData = await generateRandomData(1000);
+
     startMeasurement();
 
-    generateRandomData(1000000).then((fetchedData) => {
-      setData(fetchedData);
-      endMeasurement();
+    setData(fetchedData);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(endMeasurement);
     });
   }, [startMeasurement, endMeasurement]);
 
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
   const [selection, setSelection] = useState<GridSelection>({
     columns: CompactSelection.empty(),
     rows: CompactSelection.empty(),

webapp/src/components/common/Glide/utils.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { Person } from ".";
 
 export const generateRandomData = (
@@ -42,11 +42,9 @@ export const generateRandomData = (
       randomData.push({ name, company, email, phone });
     }
 
-    // to simulate a network request delay increase the timeout
-    setTimeout(() => resolve(randomData), 0);
+    resolve(randomData);
   });
 };
-
 export function usePerformanceMeasure(measureName: string) {
   const startMeasurement = useCallback(() => {
     performance.mark(`${measureName}-start`);

webapp/src/components/common/ReactGrid/index.css

@@ -0,0 +1,3 @@
+.reactgrid {
+  background-color: #f5f5f5;
+}