Add name filter to can-i-use dashboard

packages/spec-dashboard/src/components/dashboard-table.tsx

@@ -15,12 +15,15 @@ import type { ManifestTreeNode, TreeTableRow } from "./tree-table/types.js";
 export interface DashboardTableProps {
   coverageSummary: CoverageSummary;
   emitterDisplayNames?: Record<string, string>;
+  /** When true, all tree rows are expanded regardless of user toggles. */
+  expandAll?: boolean;
 }
 
 function buildTreeRows(
   node: ManifestTreeNode,
   expandedRows: Record<string, boolean>,
   toggleExpand: (key: string) => void,
+  expandAll = false,
   depth = 0,
 ): TreeTableRow[] {
   const rows: TreeTableRow[] = [];
@@ -31,7 +34,7 @@ function buildTreeRows(
     const hasChildren = Boolean(child.children && Object.keys(child.children).length > 0);
     const key = child.fullName;
 
-    const expanded = expandedRows[key] ?? false;
+    const expanded = expandAll || (expandedRows[key] ?? false);
     rows.push({
       key,
       item: child,
@@ -42,7 +45,7 @@ function buildTreeRows(
       toggleExpand: () => toggleExpand(key),
     });
     if (hasChildren && expanded) {
-      for (const row of buildTreeRows(child, expandedRows, toggleExpand, depth + 1)) {
+      for (const row of buildTreeRows(child, expandedRows, toggleExpand, expandAll, depth + 1)) {
         rows.push(row);
       }
     }
@@ -57,6 +60,7 @@ function buildTreeRows(
 export const DashboardTable: FunctionComponent<DashboardTableProps> = ({
   coverageSummary,
   emitterDisplayNames,
+  expandAll,
 }) => {
   const languages: string[] = Object.keys(coverageSummary.generatorReports) as any;
   const tree = useMemo(() => createTree(coverageSummary.manifest), [coverageSummary.manifest]);
@@ -71,8 +75,8 @@ export const DashboardTable: FunctionComponent<DashboardTableProps> = ({
     [setExpandedRows],
   );
   const treeRows = useMemo(() => {
-    return buildTreeRows(tree, expandedRows, toggleExpand);
-  }, [tree, expandedRows, toggleExpand]);
+    return buildTreeRows(tree, expandedRows, toggleExpand, expandAll);
+  }, [tree, expandedRows, toggleExpand, expandAll]);
 
   const rows = treeRows.map((x) => {
     return (

packages/spec-dashboard/src/components/dashboard.module.css

@@ -22,3 +22,17 @@
 .tier-filter {
   margin-bottom: 20px;
 }
+
+.name-filter {
+  margin-bottom: 20px;
+}
+
+.name-filter-input {
+  width: 320px;
+  max-width: 100%;
+}
+
+.no-results {
+  display: block;
+  margin: 10px 5px;
+}

packages/spec-dashboard/src/components/dashboard.tsx

@@ -1,6 +1,6 @@
-import { Card, CardHeader, Text } from "@fluentui/react-components";
+import { Card, CardHeader, SearchBox, Text } from "@fluentui/react-components";
 import type { FunctionComponent } from "react";
-import { useState } from "react";
+import { useDeferredValue, useMemo, useState } from "react";
 import type { CoverageSummary } from "../apis.js";
 import { useTierFiltering } from "../hooks/use-tier-filtering.js";
 import type { TierConfig } from "../utils/tier-filtering-utils.js";
@@ -26,20 +26,44 @@ export const Dashboard: FunctionComponent<DashboardProps> = ({
   emitterDisplayNames,
 }) => {
   const [selectedTier, setSelectedTier] = useState<string | undefined>(undefined);
+  const [nameFilter, setNameFilter] = useState<string>("");
+
+  // Defer the filter value so typing stays responsive: the SearchBox updates
+  // instantly while the expensive filtering + tree expansion render happens on
+  // a lower-priority, non-blocking update.
+  const deferredNameFilter = useDeferredValue(nameFilter);
 
   const { filteredSummaries, allTiers } = useTierFiltering(
     coverageSummaries,
     scenarioTierConfig,
     selectedTier,
   );
 
-  const summaryTables = filteredSummaries
-    .filter((s) => !selectedTier || s.manifest.scenarios.length > 0)
+  const normalizedNameFilter = deferredNameFilter.trim().toLowerCase();
+
+  const searchedSummaries = useMemo(() => {
+    if (!normalizedNameFilter) {
+      return filteredSummaries;
+    }
+    return filteredSummaries.map((summary) => ({
+      ...summary,
+      manifest: {
+        ...summary.manifest,
+        scenarios: summary.manifest.scenarios.filter((s) =>
+          s.name.toLowerCase().includes(normalizedNameFilter),
+        ),
+      },
+    }));
+  }, [filteredSummaries, normalizedNameFilter]);
+
+  const summaryTables = searchedSummaries
+    .filter((s) => (!selectedTier && !normalizedNameFilter) || s.manifest.scenarios.length > 0)
     .map((coverageSummary, i) => (
       <div key={i} className={style["summary-table"]}>
         <DashboardTable
           coverageSummary={coverageSummary}
           emitterDisplayNames={emitterDisplayNames}
+          expandAll={Boolean(normalizedNameFilter)}
         />
       </div>
     ));
@@ -65,7 +89,21 @@ export const Dashboard: FunctionComponent<DashboardProps> = ({
       )}
       <div className={style["specs-row"]}>{specsCardTable}</div>
       <div className={style["spacer"]}></div>
-      {summaryTables}
+      <div className={style["name-filter"]}>
+        <SearchBox
+          className={style["name-filter-input"]}
+          placeholder="Filter scenarios by name..."
+          value={nameFilter}
+          onChange={(_, data) => setNameFilter(data.value)}
+        />
+      </div>
+      {normalizedNameFilter && summaryTables.length === 0 ? (
+        <Text className={style["no-results"]}>
+          No scenarios match "{deferredNameFilter.trim()}".
+        </Text>
+      ) : (
+        summaryTables
+      )}
     </div>
   );
 };