fix: fix fps safe zone with higher frame rates

packages/commands/measure/src/__tests__/__snapshots__/measure.test.tsx.snap

@@ -24,7 +24,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 High CPU Usage
 0.5 s
 Impacted threads:
@@ -862,7 +862,7 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
                       <code>
                         100% x number of cores
                       </code>
-                      . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                      . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                     </div>
                   </div>
                 </div>
@@ -3825,7 +3825,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 High CPU Usage
 -
 Impacted threads:
@@ -4226,7 +4226,7 @@ exports[`flashlight measure interactive it displays measures: Web app with no me
                       <code>
                         100% x number of cores
                       </code>
-                      . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                      . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                     </div>
                   </div>
                 </div>

packages/commands/test/src/__tests__/measurePerformance.test.ts

@@ -15,6 +15,7 @@ jest.mock("@perf-profiler/profiler", () => {
     mockPerformancePolling.setCallback(onMeasure);
     onStartMeasuring();
   });
+  mockedProfiler.detectDeviceRefreshRate = jest.fn(() => 120);
 
   return {
     ...jest.requireActual("@perf-profiler/profiler"),
@@ -90,6 +91,9 @@ describe("measurePerformance", () => {
         ],
         "name": "TITLE",
         "score": 3,
+        "specs": {
+          "refreshRate": 120,
+        },
         "status": "SUCCESS",
       }
     `);

packages/commands/test/src/__tests__/writeResults.ts

@@ -9,6 +9,7 @@ jest.mock("@perf-profiler/profiler", () => ({
   profiler: {
     ...jest.requireActual("@perf-profiler/profiler").profiler,
     installProfilerOnDevice: jest.fn(),
+    detectDeviceRefreshRate: jest.fn(() => 120),
   },
 }));
 

packages/commands/test/src/writeReport.ts

@@ -1,4 +1,5 @@
 import { Logger } from "@perf-profiler/logger";
+import { profiler } from "@perf-profiler/profiler";
 import { averageTestCaseResult } from "@perf-profiler/reporter";
 import {
   AveragedTestCaseResult,
@@ -26,6 +27,9 @@ export const writeReport = (
       measures.length === 0 || measures[measures.length - 1].status === "FAILURE"
         ? "FAILURE"
         : "SUCCESS",
+    specs: {
+      refreshRate: profiler.detectDeviceRefreshRate(),
+    },
   };
 
   /**

packages/core/types/index.ts

@@ -39,7 +39,7 @@ export interface TestCaseResult {
   status: TestCaseResultStatus;
   iterations: TestCaseIterationResult[];
   type?: TestCaseResultType;
-  specs?: DeviceSpecs;
+  specs: DeviceSpecs | undefined;
 }
 
 export interface AveragedTestCaseResult {
@@ -50,7 +50,7 @@ export interface AveragedTestCaseResult {
   average: TestCaseIterationResult;
   averageHighCpuUsage: { [processName: string]: number };
   type?: TestCaseResultType;
-  specs?: DeviceSpecs;
+  specs: DeviceSpecs | undefined;
 }
 
 // Shouldn't really be here but @perf-profiler/types is imported by everyone and doesn't contain any logic

packages/core/web-reporter-ui/ReporterView.tsx

@@ -73,7 +73,7 @@ const Report = ({
               <>
                 <HideSectionIfUndefinedValueFound>
                   <div className="mx-8 p-6 bg-dark-charcoal border border-gray-800 rounded-lg">
-                    <FPSReport results={averagedResults} />
+                    <FPSReport reports={selectedReports} />
                   </div>
                   <div className="h-10" />
                 </HideSectionIfUndefinedValueFound>
@@ -129,6 +129,8 @@ export const ReporterView = ({ measures }: { measures: Measure[] }) => (
                 status: "SUCCESS",
               },
             ],
+            // TODO: set specs properly here
+            specs: undefined,
           },
         ]}
       />

packages/core/web-reporter-ui/__tests__/__snapshots__/ReporterView.test.tsx.snap

@@ -65,7 +65,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 Min Max Range:
 
 41
@@ -242,7 +242,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 Min Max Range:
 
 21
@@ -2221,7 +2221,7 @@ exports[`<ReporterView /> renders the comparison view 2`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                   <div
                     class="h-2"
@@ -2897,7 +2897,7 @@ exports[`<ReporterView /> renders the comparison view 2`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                   <div
                     class="h-2"
@@ -14031,7 +14031,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 High CPU Usage
 3.5 s
 Impacted threads:
@@ -14072,7 +14072,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 High CPU Usage
 1 s
 (-71%)
@@ -15591,7 +15591,7 @@ exports[`<ReporterView /> renders the comparison view 4`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                 </div>
               </div>
@@ -16024,7 +16024,7 @@ exports[`<ReporterView /> renders the comparison view 4`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                 </div>
               </div>
@@ -22040,7 +22040,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 Min Max Range:
 
 70
@@ -22248,7 +22248,7 @@ Average CPU usage
 An app might run at high frame rates, such as 60 FPS or higher, but might be using too much processing power, so it's important to check CPU usage.
  Depending on the device, this value can go up to 
 100% x number of cores
-. For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+. For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
 Min Max Range:
 
 82
@@ -23830,7 +23830,7 @@ exports[`<ReporterView /> renders the comparison view with videos 2`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                   <div
                     class="h-2"
@@ -24549,7 +24549,7 @@ exports[`<ReporterView /> renders the comparison view with videos 2`] = `
                     <code>
                       100% x number of cores
                     </code>
-                    . For instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+                    . For instance, a Samsung A10s has 8 cores, so the max value would be 800%.
                   </div>
                   <div
                     class="h-2"

packages/core/web-reporter-ui/src/sections/FPSReport.tsx

@@ -1,16 +1,22 @@
-import React from "react";
-import { AveragedTestCaseResult } from "@perf-profiler/types";
+import React, { useMemo } from "react";
+import { Report as ReportModel } from "@perf-profiler/reporter";
 import { buildValueGraph } from "./hideSectionForEmptyValue";
 import { ReportChart } from "../components/Charts/ReportChart";
 
-const fpsAnnotationInterval = [{ y: 57, y2: 60, color: "#158000", label: "Safe Zone" }];
-
-export const FPSReport = ({ results }: { results: AveragedTestCaseResult[] }) => {
+export const FPSReport = ({ reports }: { reports: ReportModel[] }) => {
   const fps = buildValueGraph({
-    results,
+    results: reports.map((report) => report.getAveragedResult()),
     stat: "fps",
   });
 
+  const fpsAnnotationInterval = useMemo(() => {
+    const targetFps = reports[0].getRefreshRate();
+
+    return [
+      { y: Math.floor(0.95 * targetFps), y2: targetFps, color: "#158000", label: "Safe Zone" },
+    ];
+  }, [reports]);
+
   return (
     <ReportChart
       title="Frame rate (FPS)"

packages/core/web-reporter-ui/src/sections/ReportSummary/Explanations.tsx

@@ -29,7 +29,7 @@ const AverageCPUUsageExplanation = () => (
     An app might run at high frame rates, such as 60 FPS or higher, but might be using too much
     processing power, so it's important to check CPU usage.
     <br /> Depending on the device, this value can go up to <code>100% x number of cores</code>. For
-    instance, a Samsung A10s has 4 cores, so the max value would be 400%.
+    instance, a Samsung A10s has 8 cores, so the max value would be 800%.
   </>
 );
 

packages/platforms/ios-instruments/src/writeReport.ts

@@ -122,6 +122,9 @@ export const writeReport = (inputFileName: string, outputFileName: string) => {
     status: "SUCCESS",
     iterations,
     type: "IOS_EXPERIMENTAL",
+    specs: {
+      refreshRate: FAKE_FPS,
+    },
   };
 
   fs.writeFileSync(outputFileName, JSON.stringify(results, null, 2));

yarn.lock

@@ -4620,9 +4620,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001663:
-  version "1.0.30001666"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz"
-  integrity sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==
+  version "1.0.30001723"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001723.tgz"
+  integrity sha512-1R/elMjtehrFejxwmexeXAtae5UO9iSyFn6G/I806CYC/BLyyBk1EPhrKBkWhy6wM6Xnm47dSJQec+tLJ39WHw==
 
 [email protected]:
   version "4.1.0"
@@ -5967,6 +5967,7 @@ eslint-module-utils@^2.12.0:
 
 "eslint-plugin-custom-rules@link:./packages/eslint-plugin-flashlight-eslint-rules/dist":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-import@^2.26.0:
   version "2.31.0"