feat: add protocol search filter to chain overview

[NFToby]

What

• Add a search input to the Chain Overview protocol rankings table

Why

• Makes it easy to find individual protocols or filter by search

Screenshots

Summary by CodeRabbit

• New Features
  • Added search and filtering functionality to the protocol table with a search input in the header.
  • Implemented debounced search behavior to optimize performance while filtering by protocol name.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds search and filtering functionality to a table component. New imports include getFilteredRowModel and ColumnFiltersState from React Table. Two state variables—columnFilters and searchQuery—were introduced. A useEffect hook enables debounced filtering on the name column. The table configuration now includes getFilteredRowModel() and onColumnFiltersChange callbacks.

Changes

Cohort / File(s)	Summary
Table Filtering Enhancement src/containers/ChainOverview/Table.tsx	Introduced columnFilters and searchQuery state variables; added useEffect hook for debounced name-column filtering; integrated getFilteredRowModel() and onColumnFiltersChange into React Table configuration; exposed search input UI in header for protocol search

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A filter so keen, a search that's divine,
Columns now dancing to your query's design,
Debounced and nimble, the table takes flight,
Finding your protocols—fast, smooth, and right! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a search filter feature to the protocol table in the chain overview component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/containers/ChainOverview/Table.tsx (2)

358-365: Consider moving column lookup inside the timeout for robustness.

The current implementation captures nameColumn before the timeout fires. If the table instance changes during the 200ms delay (e.g., columns reconfigure), the reference could be stale. Moving getColumn inside the callback ensures you always get the current column.

♻️ Suggested improvement

 useEffect(() => {
-  const nameColumn = instance.getColumn('name')
   const id = setTimeout(() => {
+    const nameColumn = instance.getColumn('name')
     nameColumn?.setFilterValue(searchQuery)
   }, 200)

   return () => clearTimeout(id)
 }, [searchQuery, instance])

---

439-455: Good implementation; consider type="search" for better semantics.

The search input is accessible with proper labeling. Consider adding type="search" for semantic HTML, which also enables native browser clear buttons in some browsers.

♻️ Optional enhancement

         <input
+          type="search"
           value={searchQuery}
           onChange={(e) => {
             setSearchQuery(e.target.value)
           }}
           placeholder="Search protocols..."
           className="w-full rounded-md border border-(--form-control-border) bg-white p-1 pl-7 text-black max-sm:py-0.5 dark:bg-black dark:text-white"
         />

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 140421c and 42330fb.

📒 Files selected for processing (1)

• src/containers/ChainOverview/Table.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/containers/ChainOverview/Table.tsx (1)

src/components/Icon.tsx (1)

• Icon (108-114)

🔇 Additional comments (3)

src/containers/ChainOverview/Table.tsx (3)

1-16: LGTM!

The imports are correctly added to support the new filtering functionality. getFilteredRowModel and ColumnFiltersState are the standard TanStack Table APIs for client-side filtering.

---

214-215: LGTM!

Good separation of concerns: searchQuery for immediate UI feedback, columnFilters for debounced table filtering.

---

316-356: LGTM!

The TanStack Table filtering is correctly configured with columnFilters state, onColumnFiltersChange callback, and getFilteredRowModel(). The existing filterFromLeafRows: true ensures child protocols are also searchable.