Generic Profiling story to wrap any component

packages/twenty-front/.storybook/test-runner-jest.config.js

@@ -9,5 +9,5 @@ export default {
   /** Add your own overrides below
    * @see https://jestjs.io/docs/configuration
    */
-  testTimeout: process.env.STORYBOOK_SCOPE === 'pages' ? 60000 : 15000,
+  testTimeout: process.env.STORYBOOK_SCOPE === 'pages' ? 60000 : 30000,
 };

packages/twenty-front/src/modules/ui/field/display/components/__stories__/EllipsisDisplay.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
+
+const meta: Meta = {
+  title: 'UI/Input/EllipsisDisplay/EllipsisDisplay',
+  component: EllipsisDisplay,
+  decorators: [ComponentDecorator],
+  args: {
+    maxWidth: 100,
+    children: 'This is a long text that should be truncated',
+  },
+  tags: ['performance'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EllipsisDisplay>;
+
+export const Default: Story = {};
+
+export const Performance = getProfilingStory('EllipsisDisplay', 0.25, 20, 100);

packages/twenty-front/src/testing/decorators/ProfilerDecorator.tsx

@@ -0,0 +1,59 @@
+import { Decorator } from '@storybook/react';
+import { useRecoilState } from 'recoil';
+
+import { ProfilerWrapper } from '~/testing/profiling/components/ProfilerWrapper';
+import {
+  getTestArray,
+  ProfilingQueueEffect,
+} from '~/testing/profiling/components/ProfilingQueueEffect';
+import { ProfilingReporter } from '~/testing/profiling/components/ProfilingReporter';
+import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunState';
+import { profilingSessionRunsState } from '~/testing/profiling/states/profilingSessionRunsState';
+import { profilingSessionStatusState } from '~/testing/profiling/states/profilingSessionStatusState';
+
+export const ProfilerDecorator: Decorator = (Story, { id, parameters }) => {
+  const numberOfTests = parameters.numberOfTests ?? 100;
+  const numberOfRuns = parameters.numberOfRuns ?? 10;
+
+  const [currentProfilingRunIndex] = useRecoilState(
+    currentProfilingRunIndexState,
+  );
+
+  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
+  const [profilingSessionRuns] = useRecoilState(profilingSessionRunsState);
+
+  const currentRunName = profilingSessionRuns[currentProfilingRunIndex];
+
+  const testArray = getTestArray(id, numberOfTests, currentRunName);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <ProfilingQueueEffect
+        numberOfRuns={numberOfRuns}
+        numberOfTestsPerRun={numberOfTests}
+        profilingId={id}
+      />
+      <div>
+        Profiling {numberOfTests} times the component {parameters.componentName}{' '}
+        :
+      </div>
+      <ProfilingReporter />
+      <div style={{ visibility: 'hidden', width: 0, height: 0 }}>
+        {testArray.map((_, index) => (
+          <ProfilerWrapper
+            key={id + index}
+            componentName={parameters.componentName}
+            runName={currentRunName}
+            testIndex={index}
+            profilingId={id}
+          >
+            <Story />
+          </ProfilerWrapper>
+        ))}
+      </div>
+      {profilingSessionStatus === 'finished' && (
+        <div data-testid="profiling-session-finished" />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import { Profiler, ProfilerOnRenderCallback } from 'react';
+import { useRecoilCallback } from 'recoil';
+
+import { getQueueIdentifier } from '~/testing/profiling/components/ProfilingQueueEffect';
+import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
+import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
+import { profilingSessionState } from '~/testing/profiling/states/profilingSessionState';
+import { ProfilingDataPoint } from '~/testing/profiling/types/ProfilingDataPoint';
+import { isDefined } from '~/utils/isDefined';
+
+export const ProfilerWrapper = ({
+  profilingId,
+  testIndex,
+  componentName,
+  runName,
+  children,
+}: {
+  profilingId: string;
+  testIndex: number;
+  componentName: string;
+  runName: string;
+  children: React.ReactNode;
+}) => {
+  const handleRender: ProfilerOnRenderCallback = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (id, phase, actualDurationInMs) => {
+        const dataPointId = getQueueIdentifier(profilingId, testIndex, runName);
+
+        const newDataPoint: ProfilingDataPoint = {
+          componentName,
+          runName,
+          id: dataPointId,
+          phase,
+          durationInMs: actualDurationInMs,
+        };
+
+        set(
+          profilingSessionDataPointsState,
+          (currentProfilingSessionDataPoints) => [
+            ...currentProfilingSessionDataPoints,
+            newDataPoint,
+          ],
+        );
+
+        set(profilingSessionState, (currentProfilingSession) => ({
+          ...currentProfilingSession,
+          [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
+        }));
+
+        const queueIdentifier = dataPointId;
+
+        const currentProfilingQueue = snapshot
+          .getLoadable(profilingQueueState)
+          .getValue();
+
+        const currentQueue = currentProfilingQueue[runName];
+
+        if (!isDefined(currentQueue)) {
+          return;
+        }
+
+        const newQueue = currentQueue.filter((id) => id !== queueIdentifier);
+
+        set(profilingQueueState, (currentProfilingQueue) => ({
+          ...currentProfilingQueue,
+          [runName]: newQueue,
+        }));
+      },
+    [profilingId, testIndex, componentName, runName],
+  );
+
+  return (
+    <Profiler id={profilingId} onRender={handleRender}>
+      {children}
+    </Profiler>
+  );
+};

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

@@ -0,0 +1,133 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunState';
+import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
+import { profilingSessionRunsState } from '~/testing/profiling/states/profilingSessionRunsState';
+import { profilingSessionStatusState } from '~/testing/profiling/states/profilingSessionStatusState';
+
+const TIME_BETWEEN_TEST_RUNS_IN_MS = 500;
+
+export const getQueueIdentifier = (
+  profilingId: string,
+  testIndex: number,
+  runName: string,
+) => `${profilingId}-run[${runName}]-test[${testIndex}]`;
+
+export const getTestArray = (
+  profilingId: string,
+  numberOfTestsPerRun: number,
+  runName: string,
+) => {
+  const testArray = Array.from({ length: numberOfTestsPerRun }, (_, i) =>
+    getQueueIdentifier(profilingId, i, runName),
+  );
+
+  return testArray;
+};
+
+export const ProfilingQueueEffect = ({
+  profilingId,
+  numberOfTestsPerRun,
+  numberOfRuns,
+}: {
+  profilingId: string;
+  numberOfTestsPerRun: number;
+  numberOfRuns: number;
+}) => {
+  const [currentProfilingRunIndex, setCurrentProfilingRunIndex] =
+    useRecoilState(currentProfilingRunIndexState);
+
+  const [profilingSessionStatus, setProfilingSessionStatus] = useRecoilState(
+    profilingSessionStatusState,
+  );
+
+  const [profilingSessionRuns, setProfilingSessionRuns] = useRecoilState(
+    profilingSessionRunsState,
+  );
+
+  const [profilingQueue, setProfilingQueue] =
+    useRecoilState(profilingQueueState);
+
+  useEffect(() => {
+    (async () => {
+      if (profilingSessionStatus === 'not_started') {
+        setProfilingSessionStatus('running');
+        setCurrentProfilingRunIndex(0);
+
+        const newTestRuns = [
+          'warm-up-1',
+          'warm-up-2',
+          'warm-up-3',
+          ...[
+            ...Array.from({ length: numberOfRuns }, (_, i) => `real-run-${i}`),
+          ],
+          'finishing-run-1',
+          'finishing-run-2',
+          'finishing-run-3',
+        ];
+
+        setProfilingSessionRuns(newTestRuns);
+
+        const testArray = getTestArray(
+          profilingId,
+          numberOfTestsPerRun,
+          newTestRuns[0],
+        );
+
+        setProfilingQueue((currentProfilingQueue) => ({
+          ...currentProfilingQueue,
+          [newTestRuns[0]]: testArray,
+        }));
+      } else if (profilingSessionStatus === 'running') {
+        const testsStillToRun =
+          profilingQueue[profilingSessionRuns[currentProfilingRunIndex]];
+
+        const allTestsAreRun = testsStillToRun.length > 0;
+
+        const isFinalRun =
+          currentProfilingRunIndex === profilingSessionRuns.length - 1;
+
+        if (allTestsAreRun) {
+          if (isFinalRun) {
+            setProfilingSessionStatus('finished');
+            return;
+          }
+
+          await new Promise((resolve) =>
+            setTimeout(resolve, TIME_BETWEEN_TEST_RUNS_IN_MS),
+          );
+
+          const nextIndex = currentProfilingRunIndex + 1;
+
+          setCurrentProfilingRunIndex(nextIndex);
+
+          const testArray = getTestArray(
+            profilingId,
+            numberOfTestsPerRun,
+            profilingSessionRuns[nextIndex],
+          );
+
+          setProfilingQueue((currentProfilingQueue) => ({
+            ...currentProfilingQueue,
+            [profilingSessionRuns[nextIndex]]: testArray,
+          }));
+        }
+      }
+    })();
+  }, [
+    profilingQueue,
+    numberOfTestsPerRun,
+    profilingId,
+    currentProfilingRunIndex,
+    setProfilingQueue,
+    setCurrentProfilingRunIndex,
+    profilingSessionStatus,
+    setProfilingSessionStatus,
+    profilingSessionRuns,
+    setProfilingSessionRuns,
+    numberOfRuns,
+  ]);
+
+  return <></>;
+};

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

@@ -0,0 +1,80 @@
+import { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId';
+import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
+import { computeProfilingReport } from '~/testing/profiling/utils/computeProfilingReport';
+
+const StyledTable = styled.table`
+  border: 1px solid black;
+
+  th,
+  td {
+    border: 1px solid black;
+  }
+
+  td {
+    padding: 5px;
+  }
+`;
+
+export const ProfilingReporter = () => {
+  const [profilingSessionDataPoints] = useRecoilState(
+    profilingSessionDataPointsState,
+  );
+
+  const profilingReport = useMemo(
+    () => computeProfilingReport(profilingSessionDataPoints),
+    [profilingSessionDataPoints],
+  );
+
+  return (
+    <div
+      data-profiling-report={JSON.stringify(profilingReport)}
+      id={PROFILING_REPORTER_DIV_ID}
+    >
+      <StyledTable>
+        <thead>
+          <tr>
+            <th>Run name</th>
+            <th>Min</th>
+            <th>Average</th>
+            <th>P50</th>
+            <th>P80</th>
+            <th>P90</th>
+            <th>P95</th>
+            <th>P99</th>
+            <th>Max</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style={{ fontWeight: 'bold' }}>
+            <td>Total</td>
+            <td>{Math.round(profilingReport.total.min * 1000) / 1000}ms</td>
+            <td>{Math.round(profilingReport.total.average * 1000) / 1000}ms</td>
+            <td>{Math.round(profilingReport.total.p50 * 1000) / 1000}ms</td>
+            <td>{Math.round(profilingReport.total.p80 * 1000) / 1000}ms</td>
+            <td>{Math.round(profilingReport.total.p90 * 1000) / 1000}ms</td>
+            <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>
+          </tr>
+          {Object.entries(profilingReport.runs).map(([runName, report]) => (
+            <tr>
+              <td>{runName}</td>
+              <td>{Math.round(report.min * 1000) / 1000}ms</td>
+              <td>{Math.round(report.average * 1000) / 1000}ms</td>
+              <td>{Math.round(report.p50 * 1000) / 1000}ms</td>
+              <td>{Math.round(report.p80 * 1000) / 1000}ms</td>
+              <td>{Math.round(report.p90 * 1000) / 1000}ms</td>
+              <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>
+            </tr>
+          ))}
+        </tbody>
+      </StyledTable>
+    </div>
+  );
+};

packages/twenty-front/src/testing/profiling/constants/ProfilingReporterDivId.ts

@@ -0,0 +1 @@
+export const PROFILING_REPORTER_DIV_ID = 'profiling-report';

packages/twenty-front/src/testing/profiling/states/currentProfilingRunState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const currentProfilingRunIndexState = atom<number>({
+  key: 'currentProfilingRunIndexState',
+  default: 0,
+});