Further improvements on component stats table

lahmatiy · Sep 7, 2023 · ff1ec91 · ff1ec91
1 parent 50a9387
commit ff1ec91
Show file tree

Hide file tree

Showing 8 changed files with 294 additions and 87 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -26,6 +26,7 @@
   ],
   "ignorePatterns": ["dist", "scripts"],
   "rules": {
+    "react/prop-types": "off",
     "no-duplicate-case": 2,
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",

diff --git a/src/common/consumer-types.ts b/src/common/consumer-types.ts
@@ -28,16 +28,23 @@ export type FiberTypeDef = {
   contexts: TransferFiberContext[] | null;
   hooks: FiberTypeHook[];
 };
-export type FiberTypeStat = {
-  typeId: number;
-  typeDef: FiberTypeDef;
-  displayName: string;
+interface Stat {
   mounts: number;
   mountTime: number;
   unmounts: number;
   updates: number;
   updateTime: number;
-};
+}
+export interface FiberStat extends Stat {
+  fiberId: number;
+  typeStat: FiberTypeStat;
+}
+export interface FiberTypeStat extends Stat {
+  typeId: number;
+  typeDef: FiberTypeDef;
+  displayName: string;
+  fibers: Map<number, FiberStat>;
+}
 export type FiberChanges = {
   props?: TransferPropChange[] | null;
   context: FiberContextChange[] | null;

diff --git a/src/data/process-events.ts b/src/data/process-events.ts
@@ -7,6 +7,7 @@ import {
 import {
   FiberChanges,
   FiberEvent,
+  FiberStat,
   FiberStateChange,
   FiberTypeDef,
   FiberTypeStat,
@@ -72,34 +73,56 @@ export function processEvents(
   let fiberEventIndex = allEvents.length;
   allEvents.length += newEvents.length;
 
-  const getFiberStat = (
+  const addFiberTypeStat = (
+    fiberId: number,
     typeId: number,
-    typeDef?: FiberTypeDef
-  ): FiberTypeStat => {
+    update: (stat: FiberStat | FiberTypeStat) => void
+  ) => {
     let typeStat = fiberTypeStat.get(typeId);
 
     if (typeStat === undefined) {
-      if (!typeDef) {
-        typeDef = fiberTypeDefById.get(typeId);
-      }
+      const typeDef = fiberTypeDefById.get(typeId);
 
       if (!typeDef) {
-        throw new Error("");
+        throw new Error(`No type definition found for typeId "${typeId}"`);
       }
 
       typeStat = {
         typeId,
         typeDef,
         displayName: typeDef.displayName || "[render root]",
+        fibers: new Map(),
         mounts: 0,
         mountTime: 0,
         unmounts: 0,
         updates: 0,
         updateTime: 0,
       };
+    } else {
+      typeStat = { ...typeStat };
     }
 
-    return typeStat;
+    let fiberStat = typeStat.fibers.get(fiberId);
+
+    if (fiberStat === undefined) {
+      fiberStat = {
+        fiberId,
+        typeStat,
+        mounts: 0,
+        mountTime: 0,
+        unmounts: 0,
+        updates: 0,
+        updateTime: 0,
+      };
+    } else {
+      fiberStat = { ...fiberStat, typeStat };
+    }
+
+    update(typeStat);
+    update(fiberStat);
+
+    fiberTypeStat.set(typeId, typeStat);
+    typeStat.fibers.set(fiberId, fiberStat);
   };
   const linkEvent = <T extends LinkedEvent>(linkedEvent: T): T => {
     const { event } = linkedEvent;
@@ -218,11 +241,9 @@ export function processEvents(
           }
         }
 
-        const typeStat = getFiberStat(fiber.typeId, typeDef);
-        fiberTypeStat.set(fiber.typeId, {
-          ...typeStat,
-          mounts: typeStat.mounts + 1,
-          mountTime: typeStat.mountTime + event.selfTime,
+        addFiberTypeStat(fiber.id, fiber.typeId, typeStat => {
+          typeStat.mounts++;
+          typeStat.mountTime += event.selfTime;
         });
 
         break;
@@ -240,10 +261,8 @@ export function processEvents(
         parentTree.delete(fiber.id);
         ownerTree.delete(fiber.id);
 
-        const typeStat = getFiberStat(fiber.typeId);
-        fiberTypeStat.set(fiber.typeId, {
-          ...typeStat,
-          unmounts: typeStat.unmounts + 1,
+        addFiberTypeStat(fiber.id, fiber.typeId, typeStat => {
+          typeStat.unmounts++;
         });
 
         break;
@@ -262,11 +281,9 @@ export function processEvents(
           warnings: fiber.warnings + (changes?.warnings?.size || 0),
         };
 
-        const typeStat = getFiberStat(fiber.typeId);
-        fiberTypeStat.set(fiber.typeId, {
-          ...typeStat,
-          updates: typeStat.updates + 1,
-          updateTime: typeStat.updateTime + event.selfTime,
+        addFiberTypeStat(fiber.id, fiber.typeId, typeStat => {
+          typeStat.updates++;
+          typeStat.updateTime += event.selfTime;
         });
 
         break;

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -15,22 +15,25 @@ import WaitingForRenderer from "./components/misc/WaitingForRenderer";
 import AppBar from "./components/appbar/AppBar";
 import StateBar from "./components/statebar/StateBar";
 import StatusBar from "./components/statusbar/StatusBar";
-import { AppPage, pages } from "./pages";
+import { pages } from "./pages";
 import { MemoryLeaksContextProvider } from "./utils/memory-leaks";
+import { PageContextProvider, usePageContext } from "./utils/page";
 
 function App() {
   return (
-    <SourceLocationsContextProvider>
-      <OpenFileContextProvider>
-        <MemoryLeaksContextProvider>
-          <ReactRenderersContextProvider>
-            <WaitingForRenderer>
-              <ReactRendererUI />
-            </WaitingForRenderer>
-          </ReactRenderersContextProvider>
-        </MemoryLeaksContextProvider>
-      </OpenFileContextProvider>
-    </SourceLocationsContextProvider>
+    <PageContextProvider>
+      <SourceLocationsContextProvider>
+        <OpenFileContextProvider>
+          <MemoryLeaksContextProvider>
+            <ReactRenderersContextProvider>
+              <WaitingForRenderer>
+                <ReactRendererUI />
+              </WaitingForRenderer>
+            </ReactRenderersContextProvider>
+          </MemoryLeaksContextProvider>
+        </OpenFileContextProvider>
+      </SourceLocationsContextProvider>
+    </PageContextProvider>
   );
 }
 
@@ -63,12 +66,12 @@ function ReactRendererUI() {
 }
 
 function Layout() {
-  const [page, setPage] = React.useState<AppPage>(AppPage.ComponentTree);
-  const PageContent = pages[page].content;
+  const { currentPage, openPage } = usePageContext();
+  const PageContent = pages[currentPage].content;
 
   return (
     <div className="app">
-      <AppBar pages={pages} page={page} setPage={setPage} />
+      <AppBar pages={pages} page={currentPage} setPage={openPage} />
 
       <WaitingForReady>
         <PageContent />

diff --git a/src/ui/components/details/FiberLink.tsx b/src/ui/components/details/FiberLink.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { useSelectionState } from "../../utils/selection";
 import FiberId from "../common/FiberId";
 
-export function FiberLink({ id, name }: { id: number; name: string | null }) {
+export function FiberLink({ id, name }: { id: number; name: React.ReactNode }) {
   const { selected, select } = useSelectionState(id);
 
   return (

diff --git a/src/ui/pages/components/ComponentsTable.css b/src/ui/pages/components/ComponentsTable.css
@@ -25,7 +25,7 @@
   bottom: 0px;
   font-size: 11px;
 }
-.app-page-components-table tfoot th {
+.app-page-components-table tfoot td {
   text-align: right;
   background-color: #eeee;
 }
@@ -59,6 +59,14 @@
   background-color: #ddd;
 }
 
+.app-page-components-table tr.fiber-stat {
+  background-color: #f8f8f8;
+}
+.app-page-components-table tr.type-stat:hover,
+.app-page-components-table tr.fiber-stat:hover {
+  background-color: #eee;
+}
+
 .app-page-components-table td {
   vertical-align: baseline;
   border: 1px solid #eee;
@@ -88,14 +96,32 @@
   min-width: 50px;
 }
 
+.app-page-components-table td .main-cell-content {
+  --padding-left: 12px;
+  display: flex;
+  width: calc(100% - 8px - var(--padding-left));
+  position: absolute;
+  padding-left: var(--padding-left);
+}
+.app-page-components-table .fiber-stat td .main-cell-content {
+  --padding-left: 20px;
+}
 .app-page-components-table td .component-name {
-  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: calc(100% - 8px);
-  position: absolute;
 }
 .app-page-components-table td .component-name .match {
   border-bottom: 2px solid #e0bf08;
 }
+.app-page-components-table td .component-instances {
+  flex: 1;
+  white-space: nowrap;
+  font-size: 11px;
+  color: #888;
+}
+.app-page-components-table td .component-instances::before {
+  content: "×";
+  color: #aaa;
+  padding: 0 0.5ex;
+}