Fixed sync between record value context selector and record store (#5517)

This PR introduces many improvements over the new profiling story
feature, with new tests and some refactor with main :
- Added use-context-selector for getting value faster in display fields
and created useRecordFieldValue() hook and RecordValueSetterEffect to
synchronize states
- Added performance test command in CI
- Refactored ExpandableList drill-downs with FieldFocusContext
- Refactored field button icon logic into getFieldButtonIcon util
- Added RelationFieldDisplay perf story
- Added RecordTableCell perf story
- First split test of useField.. hook with useRelationFieldDisplay()
- Fixed problem with set cell soft focus
- Isolated logic between display / soft focus and edit mode in the
related components to optimize performances for display mode.
- Added warmupRound config for performance story decorator
- Added variance in test reporting

packages/twenty-front/src/testing/profiling/components/ProfilingQueueEffect.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { TIME_BETWEEN_TEST_RUNS_IN_MS } from '~/testing/profiling/constants/TimeBetweenTestRunsInMs';
-import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunState';
+import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
 import { profilingSessionRunsState } from '~/testing/profiling/states/profilingSessionRunsState';
 import { profilingSessionStatusState } from '~/testing/profiling/states/profilingSessionStatusState';
@@ -12,10 +12,12 @@ export const ProfilingQueueEffect = ({
   profilingId,
   numberOfTestsPerRun,
   numberOfRuns,
+  warmUpRounds,
 }: {
   profilingId: string;
   numberOfTestsPerRun: number;
   numberOfRuns: number;
+  warmUpRounds: number;
 }) => {
   const [currentProfilingRunIndex, setCurrentProfilingRunIndex] =
     useRecoilState(currentProfilingRunIndexState);
@@ -38,9 +40,9 @@ export const ProfilingQueueEffect = ({
         setCurrentProfilingRunIndex(0);
 
         const newTestRuns = [
-          'warm-up-1',
-          'warm-up-2',
-          'warm-up-3',
+          ...[
+            ...Array.from({ length: warmUpRounds }, (_, i) => `warm-up-${i}`),
+          ],
           ...[
             ...Array.from({ length: numberOfRuns }, (_, i) => `real-run-${i}`),
           ],
@@ -76,9 +78,13 @@ export const ProfilingQueueEffect = ({
             return;
           }
 
-          await new Promise((resolve) =>
-            setTimeout(resolve, TIME_BETWEEN_TEST_RUNS_IN_MS),
-          );
+          const timeInMs = profilingSessionRuns[
+            currentProfilingRunIndex
+          ].startsWith('warm-up')
+            ? TIME_BETWEEN_TEST_RUNS_IN_MS * 2
+            : TIME_BETWEEN_TEST_RUNS_IN_MS;
+
+          await new Promise((resolve) => setTimeout(resolve, timeInMs));
 
           const nextIndex = currentProfilingRunIndex + 1;
 
@@ -109,6 +115,7 @@ export const ProfilingQueueEffect = ({
     profilingSessionRuns,
     setProfilingSessionRuns,
     numberOfRuns,
+    warmUpRounds,
   ]);
 
   return <></>;

packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx

@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId';
+import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
+import { profilingSessionStatusState } from '~/testing/profiling/states/profilingSessionStatusState';
 import { computeProfilingReport } from '~/testing/profiling/utils/computeProfilingReport';
 
 const StyledTable = styled.table`
@@ -24,6 +26,12 @@ export const ProfilingReporter = () => {
     profilingSessionDataPointsState,
   );
 
+  const [currentProfilingRunIndex] = useRecoilState(
+    currentProfilingRunIndexState,
+  );
+
+  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
+
   const profilingReport = useMemo(
     () => computeProfilingReport(profilingSessionDataPoints),
     [profilingSessionDataPoints],
@@ -34,6 +42,10 @@ export const ProfilingReporter = () => {
       data-profiling-report={JSON.stringify(profilingReport)}
       id={PROFILING_REPORTER_DIV_ID}
     >
+      <h2>Profiling report</h2>
+      <div>
+        Run #{currentProfilingRunIndex} - Status {profilingSessionStatus}
+      </div>
       <StyledTable>
         <thead>
           <tr>
@@ -46,6 +58,7 @@ export const ProfilingReporter = () => {
             <th>P95</th>
             <th>P99</th>
             <th>Max</th>
+            <th>Variance</th>
           </tr>
         </thead>
         <tbody>
@@ -59,6 +72,9 @@ export const ProfilingReporter = () => {
             <td>{Math.round(profilingReport.total.p95 * 1000) / 1000}ms</td>
             <td>{Math.round(profilingReport.total.p99 * 1000) / 1000}ms</td>
             <td>{Math.round(profilingReport.total.max * 1000) / 1000}ms</td>
+            <td>
+              {Math.round(profilingReport.total.variance * 1000000) / 1000000}
+            </td>
           </tr>
           {Object.entries(profilingReport.runs).map(([runName, report]) => (
             <tr key={runName}>
@@ -71,6 +87,7 @@ export const ProfilingReporter = () => {
               <td>{Math.round(report.p95 * 1000) / 1000}ms</td>
               <td>{Math.round(report.p99 * 1000) / 1000}ms</td>
               <td>{Math.round(report.max * 1000) / 1000}ms</td>
+              <td>{Math.round(report.variance * 1000000) / 1000000}</td>
             </tr>
           ))}
         </tbody>