feat(report): make RN/Flutter threads stand out nicely

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

@@ -28,7 +28,7 @@ High CPU Usage
 0.5 s
 Impacted threads:
 - 
-mqt_js
+RN JS Thread
  for
  
 0.5
@@ -43,13 +43,13 @@ here for more details
 )
 Frame rate (FPS)
 Total CPU Usage (%)
-CPU Usage per thread (%)
-Threads
+RN JS Thread CPU Usage (%)
+Other threads
 Thread
 Average CPU Usage (%)
 sorted descending
 Current CPU Usage (%)
-mqt_js
+RN JS Thread
 50
 0
 com.example
@@ -70,7 +70,7 @@ OkHttp Dispatch
 mali-cmar-backe
 1
 0
-mqt_native_modu
+RN Bridge Thread
 1
 0
 Signal Catcher
@@ -648,7 +648,7 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
                         <p
                           class="whitespace-pre"
                         >
-                          - mqt_js for 0.5s
+                          - RN JS Thread for 0.5s
                         </p>
                       </div>
                       High CPU usage by a single process can cause app unresponsiveness, even with low overall CPU usage. For instance, an overworked JS thread in a React Native app may lead to unresponsiveness despite maintaining 60 FPS.
@@ -771,7 +771,45 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
           <div
             class="mb-[5px] ml-[10px] text-2xl text-white flex flex-row font-medium"
           >
-            CPU Usage per thread (%)
+            <div
+              class="flex flex-row align-center"
+            >
+              <div
+                class="mr-3 flex items-center"
+              >
+                <svg
+                  height="30"
+                  viewBox="-11.5 -10.23174 23 20.46348"
+                  width="30"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    fill="#61dafb"
+                    r="2.05"
+                  />
+                  <g
+                    fill="none"
+                    stroke="#61dafb"
+                  >
+                    <ellipse
+                      rx="11"
+                      ry="4.2"
+                    />
+                    <ellipse
+                      rx="11"
+                      ry="4.2"
+                      transform="matrix(.5 .8660254 -.8660254 .5 0 0)"
+                    />
+                    <ellipse
+                      rx="11"
+                      ry="4.2"
+                      transform="matrix(-.5 .8660254 -.8660254 -.5 0 0)"
+                    />
+                  </g>
+                </svg>
+              </div>
+              RN JS Thread CPU Usage (%)
+            </div>
           </div>
           <apex-charts
             height="500"
@@ -791,7 +829,7 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
                 <div
                   class="text-neutral-200 text-xl"
                 >
-                  Threads
+                  Other threads
                 </div>
               </div>
               <svg
@@ -965,7 +1003,7 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
                         id="enhanced-table-checkbox-0"
                         scope="row"
                       >
-                        mqt_js
+                        RN JS Thread
                       </th>
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall !text-neutral-300 border-b-neutral-500 css-tqm498-MuiTableCell-root"
@@ -1329,7 +1367,7 @@ exports[`flashlight measure interactive it displays measures: Web app with measu
                         id="enhanced-table-checkbox-7"
                         scope="row"
                       >
-                        mqt_native_modu
+                        RN Bridge Thread
                       </th>
                       <td
                         class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeSmall !text-neutral-300 border-b-neutral-500 css-tqm498-MuiTableCell-root"

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

@@ -100,8 +100,8 @@ describe("flashlight measure interactive", () => {
     await screen.findByText("47");
 
     // expand threads
-    await screen.findByText("Threads");
-    fireEvent.click(screen.getByText("Threads"));
+    await screen.findByText("Other threads");
+    fireEvent.click(screen.getByText("Other threads"));
 
     expectWebAppToMatchSnapshot("Web app with measures and threads opened");
 

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

@@ -14,6 +14,7 @@ import { IterationSelector, useIterationSelector } from "./src/components/Iterat
 import { VideoSection } from "./src/sections/VideoSection";
 import { VideoEnabledContext } from "./videoCurrentTimeContext";
 import { HideSectionIfUndefinedValueFound } from "./src/sections/hideSectionForEmptyValue";
+import { mapThreadNames } from "./src/sections/threads";
 
 const Padding = styled.div`
   height: 10px;
@@ -27,12 +28,13 @@ const theme = createTheme({
 });
 
 const Report = ({
-  results,
+  results: rawResults,
   additionalMenuOptions,
 }: {
   results: TestCaseResult[];
   additionalMenuOptions?: MenuOption[];
 }) => {
+  const results = mapThreadNames(rawResults);
   const reports = useMemo(() => results.map((result) => new ReportModel(result)), [results]);
   const minIterationCount = Math.min(...reports.map((report) => report.getIterationCount()));
   const iterationSelector = useIterationSelector(minIterationCount);

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

@@ -16,7 +16,7 @@ describe("<ReporterView />", () => {
     );
     expect(screen.getAllByLabelText("Score")[0].textContent).toEqual("69");
 
-    fireEvent.click(screen.getByText("Threads"));
+    fireEvent.click(screen.getByText("Other threads"));
 
     expect(getText(baseElement)).toMatchSnapshot();
     expect(asFragment()).toMatchSnapshot();