@react-perfscope/ui 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -105,6 +105,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",
@@ -195,6 +198,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",
@@ -1887,6 +1893,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
 var import_jsx_runtime5 = require("preact/jsx-runtime");
 var RENDER_REASON_COLOR = {
@@ -2652,6 +2697,7 @@ function Panel(props) {
   const [expandedKey, setExpandedKey] = (0, import_hooks3.useState)(null);
   const [groupMode, setGroupMode] = (0, import_hooks3.useState)({});
   const [sortMode, setSortMode] = (0, import_hooks3.useState)({});
+  const [filterText, setFilterText] = (0, import_hooks3.useState)({});
   const activeOverlayCount = (0, import_hooks3.useRef)(0);
   (0, import_hooks3.useEffect)(() => () => hideAllOverlays(), []);
   function handleHover(signal) {
@@ -2858,7 +2904,21 @@ function Panel(props) {
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Timeline,
@@ -2879,9 +2939,7 @@ function Panel(props) {
       activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         RenderInsights,
         {
-          signals: grouped.render.flatMap(
-            (s) => s.kind === "render" ? s.members ?? [s] : []
-          ),
+          signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
           onSelect: () => {
             setGroupMode({ ...groupMode, render: "component" });
             setExpandedKey(null);
@@ -2904,7 +2962,10 @@ function Panel(props) {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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";
@@ -2962,7 +3023,8 @@ function Panel(props) {
           },
           key
         );
-      }) })
+      }) }),
+      activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
     ] })
   ] });
 }