@react-perfscope/ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -72,6 +72,9 @@ var en = {
   sort: "Sort",
   sortChronological: "chronological",
   sortSeverity: "severity (worst first)",
+  filterPlaceholder: "Filter\u2026",
+  filterAria: "Filter signals",
+  filterNoMatches: "No signals match the filter.",
   groupBy: "Group by",
   groupChronological: "chronological",
   groupComponent: "component",
@@ -99,6 +102,8 @@ var en = {
   blocking: "blocking",
   sourceCount: (n) => `${n} source(s)`,
   moreItems: (n) => `+ ${n} more`,
+  coalescedReads: (n) => `${n} reads`,
+  cascadeComponents: (n) => `${n} components`,
   startRecording: "Start recording",
   stopRecording: "Stop recording",
   rec: "rec",
@@ -160,6 +165,9 @@ var ko = {
   sort: "\uC815\uB82C",
   sortChronological: "\uC2DC\uAC04\uC21C",
   sortSeverity: "\uC2EC\uAC01\uB3C4\uC21C (\uB192\uC740 \uAC83\uBD80\uD130)",
+  filterPlaceholder: "\uD544\uD130\u2026",
+  filterAria: "\uC2DC\uADF8\uB110 \uD544\uD130",
+  filterNoMatches: "\uD544\uD130\uC640 \uC77C\uCE58\uD558\uB294 \uC2DC\uADF8\uB110\uC774 \uC5C6\uC5B4\uC694.",
   groupBy: "\uADF8\uB8F9\uD654",
   groupChronological: "\uC2DC\uAC04\uC21C",
   groupComponent: "\uCEF4\uD3EC\uB10C\uD2B8",
@@ -187,6 +195,8 @@ var ko = {
   blocking: "\uCC28\uB2E8",
   sourceCount: (n) => `\uC18C\uC2A4 ${n}\uAC1C`,
   moreItems: (n) => `\uC678 ${n}\uAC1C \uB354`,
+  coalescedReads: (n) => `\uC77D\uAE30 ${n}\uD68C`,
+  cascadeComponents: (n) => `\uCEF4\uD3EC\uB10C\uD2B8 ${n}\uAC1C`,
   startRecording: "\uB179\uD654 \uC2DC\uC791",
   stopRecording: "\uB179\uD654 \uC885\uB8CC",
   rec: "\uB179\uD654",
@@ -795,8 +805,10 @@ function renderBreakdown(members) {
   const counts = /* @__PURE__ */ new Map();
   for (const s of members) {
     if (s.kind !== "render") continue;
-    if (!counts.has(s.component)) order.push(s.component);
-    counts.set(s.component, (counts.get(s.component) ?? 0) + 1);
+    for (const m of s.members ?? [s]) {
+      if (!counts.has(m.component)) order.push(m.component);
+      counts.set(m.component, (counts.get(m.component) ?? 0) + 1);
+    }
   }
   return order.map((c) => ({ component: c, count: counts.get(c) }));
 }
@@ -1698,6 +1710,7 @@ function TooltipContent({ s, startedAt }) {
           s.duration.toFixed(2),
           "ms"
         ] }),
+        (s.count ?? 1) > 1 ? ` \xD7${s.count}` : "",
         " ",
         at
       ] });
@@ -1847,6 +1860,45 @@ function RenderInsights({ signals, onSelect }) {
   );
 }
 
+// src/filter.ts
+function signalSearchText(signal) {
+  switch (signal.kind) {
+    case "render": {
+      const parts = [signal.component];
+      if (signal.changedProps) parts.push(...signal.changedProps);
+      if (signal.members) for (const m of signal.members) parts.push(m.component);
+      return parts.join(" ").toLowerCase();
+    }
+    case "network":
+      return signal.url.toLowerCase();
+    case "web-vital":
+      return signal.name.toLowerCase();
+    case "interaction":
+      return [signal.eventType, signal.target ?? ""].join(" ").toLowerCase();
+    case "forced-reflow": {
+      const f = signal.stack[0];
+      return f ? [f.fnName ?? "", f.file].join(" ").toLowerCase() : "";
+    }
+    case "long-task": {
+      const parts = [];
+      if (signal.scripts)
+        for (const s of signal.scripts) parts.push(s.sourceFunctionName, s.invoker, s.sourceURL);
+      if (signal.attribution)
+        for (const a of signal.attribution) parts.push(a.frame.fnName ?? "", a.frame.file);
+      return parts.join(" ").toLowerCase();
+    }
+    case "layout-shift":
+      return "layout-shift";
+    default:
+      return "";
+  }
+}
+function signalMatchesFilter(signal, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return signalSearchText(signal).includes(q);
+}
+
 // src/panel.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
 var RENDER_REASON_COLOR = {
@@ -1975,7 +2027,7 @@ function summary(s) {
     case "web-vital":
       return `${s.name}: ${s.value.toFixed(2)}`;
     case "render":
-      return `${s.component} \u2022 ${s.reason} \u2022 ${s.duration.toFixed(2)}ms`;
+      return `${s.component} \u2022 ${s.reason} \u2022 ${s.duration.toFixed(2)}ms${s.count && s.count > 1 ? ` \u2022 ${s.count} components` : ""}`;
   }
 }
 var detailLabelStyle = { color: "#888", marginRight: "6px" };
@@ -2060,6 +2112,25 @@ function WebVitalDetail({ s }) {
 }
 function RenderDetail({ s }) {
   const { t } = useI18n();
+  if (s.members && s.members.length > 0) {
+    return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+        /* @__PURE__ */ jsxs5("span", { children: [
+          s.duration.toFixed(3),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.at }),
+        /* @__PURE__ */ jsxs5("span", { children: [
+          s.at.toFixed(2),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx5(CascadeMembers, { members: s.members }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
     /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
       /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.component }),
@@ -2350,6 +2421,7 @@ function SummaryLine({ signal }) {
     ] });
   }
   if (signal.kind === "forced-reflow") {
+    const count = signal.count ?? 1;
     return /* @__PURE__ */ jsxs5("span", { children: [
       "@ ",
       signal.at.toFixed(1),
@@ -2358,6 +2430,10 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
+      ] }),
+      count > 1 && /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+        " \u2022 ",
+        t.coalescedReads(count)
       ] })
     ] });
   }
@@ -2379,7 +2455,8 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
-      ] })
+      ] }),
+      signal.count && signal.count > 1 && /* @__PURE__ */ jsx5("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
     ] });
   }
   if (signal.kind === "network") {
@@ -2399,9 +2476,6 @@ function SummaryLine({ signal }) {
   }
   return /* @__PURE__ */ jsx5("span", { children: summary(signal) });
 }
-function cascadeRootOf(list) {
-  return list.find((s) => s.reason === "state") ?? list.find((s) => s.reason === "mount") ?? [...list].sort((a, b) => a.depth - b.depth)[0];
-}
 function tabSupportsGrouping(kind) {
   return kind === "render" || kind === "forced-reflow";
 }
@@ -2445,22 +2519,17 @@ function groupSignals(signals, mode, kind) {
     const byName = /* @__PURE__ */ new Map();
     for (const s of signals) {
       if (s.kind !== "render") continue;
-      const k = s.component;
-      if (!byName.has(k)) byName.set(k, []);
-      byName.get(k).push(s);
+      for (const m of s.members ?? [s]) {
+        if (!byName.has(m.component)) byName.set(m.component, []);
+        byName.get(m.component).push(m);
+      }
     }
     return Array.from(byName.entries()).sort((a, b) => b[1].length - a[1].length).map(([label, list]) => ({ label, count: list.length, signals: list }));
   }
   if (mode === "commit" && kind === "render") {
-    const byCommit = /* @__PURE__ */ new Map();
-    for (const s of signals) {
-      if (s.kind !== "render") continue;
-      if (!byCommit.has(s.commitId)) byCommit.set(s.commitId, []);
-      byCommit.get(s.commitId).push(s);
-    }
-    return Array.from(byCommit.entries()).sort((a, b) => a[0] - b[0]).map(([id, list]) => {
-      const root = cascadeRootOf(list);
-      return { label: root?.component ?? `commit ${id}`, count: list.length, signals: list };
+    return signals.filter((s) => s.kind === "render").sort((a, b) => a.commitId - b.commitId).map((s) => {
+      const list = s.members ?? [s];
+      return { label: s.component, count: list.length, signals: list };
     });
   }
   if (mode === "source" && kind === "forced-reflow") {
@@ -2595,6 +2664,7 @@ function Panel(props) {
   const [expandedKey, setExpandedKey] = useState3(null);
   const [groupMode, setGroupMode] = useState3({});
   const [sortMode, setSortMode] = useState3({});
+  const [filterText, setFilterText] = useState3({});
   const activeOverlayCount = useRef2(0);
   useEffect(() => () => hideAllOverlays(), []);
   function handleHover(signal) {
@@ -2801,7 +2871,21 @@ function Panel(props) {
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "text",
+            "aria-label": t.filterAria,
+            placeholder: t.filterPlaceholder,
+            value: filterText[activeKind] ?? "",
+            onInput: (e) => {
+              setFilterText({ ...filterText, [activeKind]: e.target.value });
+              setExpandedKey(null);
+            },
+            style: { marginLeft: "auto", background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px", width: "120px" }
+          }
+        )
       ] }),
       activeTab === "timeline" && /* @__PURE__ */ jsx5("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ jsx5(
         Timeline,
@@ -2822,7 +2906,7 @@ function Panel(props) {
       activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
         RenderInsights,
         {
-          signals: grouped.render.filter((s) => s.kind === "render"),
+          signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
           onSelect: () => {
             setGroupMode({ ...groupMode, render: "component" });
             setExpandedKey(null);
@@ -2845,7 +2929,10 @@ function Panel(props) {
         }
       ),
       /* @__PURE__ */ jsx5("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
-        const baseSignals = (sortMode[activeKind] ?? "chronological") === "severity" ? sortSignalsBySeverity(grouped[activeKind]) : grouped[activeKind];
+        const filtered = grouped[activeKind].filter(
+          (s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
+        );
+        const baseSignals = (sortMode[activeKind] ?? "chronological") === "severity" ? sortSignalsBySeverity(filtered) : filtered;
         return groupSignals(baseSignals, groupMode[activeKind] ?? "chronological", activeKind);
       })().map((g, gi) => {
         const currentMode = groupMode[activeKind] ?? "chronological";
@@ -2903,7 +2990,8 @@ function Panel(props) {
           },
           key
         );
-      }) })
+      }) }),
+      activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ jsx5("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
     ] })
   ] });
 }