Add pipeline filters bar with advanced search and sorting by Mbeaulne · Pull Request #1871 · TangleML/tangle-ui

Mbeaulne · 2026-02-27T16:54:38Z

Description

Added a comprehensive filtering system for the pipeline section with advanced search capabilities. The new PipelineFiltersBar component provides search by name/description/author/notes, date range filtering for last modified dates, sorting by name or date, and component-based filtering to find pipelines using specific components. The filters display active filter badges with individual removal options and a collapsible advanced section for component queries.

Related Issue and Pull requests

Type of Change

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

pipeline_filter_basic.mov (uploaded via Graphite)

Test Instructions

Navigate to the pipeline section
Test basic search functionality by typing in the search field
Use the date range picker to filter pipelines by modification date
Toggle between name and date sorting with ascending/descending order
Open the advanced section and test component filtering
Verify that active filter badges appear and can be individually removed
Test the "Clear all" functionality to reset all filters
Confirm pagination resets when filters change

Additional Comments

The filtering logic includes matching against pipeline names, descriptions, author annotations, and notes. Component filtering searches through task component references including URLs, names, and spec names. The UI maintains state for showing/hiding filter badges when there are many active filters.

github-actions · 2026-02-27T16:54:47Z

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=02-27-pipeline_filters/caa1934`

Mbeaulne · 2026-02-27T16:54:52Z

Pipeline title length fix #1883
Add search result highlighting to pipeline rows #1878
Add pipeline filters bar with advanced search and sorting #1871 👈 (View in Graphite)
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

morgan-wowk · 2026-03-04T20:59:43Z

question: Is our pipeline search completely unindexed today?

I imagine in the future, if not already, we will have users or groups (project) that have hundreds of pipelines. One thing I believe is worth keeping in mind is how it will scale in such an event. The search and filtering may become slow to process, causing freezes in the UI, when the user has a hundred, or several hundred pipelines.

A project I will likely take up in the next month is creating a remote data store for pipelines, and that might be an opportunity to leverage indexing. It would be difficult to optimize though if we have search or filtering elements that involves traversing the graphs. What do you think of splitting out any graph-traversal capabilities, now (like you have), and going forward, so that we have that clear separation of easily-indexable fields from slower operations?

maxy-shpfy · 2026-03-05T05:03:44Z

"Example pipelines" Button is now feel like part of the "Search" - I would advise to move it so it is separated.

maxy-shpfy · 2026-03-05T06:08:26Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+  query: string,
+): boolean {
+  const impl = fileEntry.componentRef.spec.implementation;
+  if (!("graph" in impl)) return false;


Use isGraphImplementation type guard

maxy-shpfy · 2026-03-05T06:09:14Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+): boolean {
+  const impl = fileEntry.componentRef.spec.implementation;
+  if (!("graph" in impl)) return false;
+  const q = query.toLowerCase();


I dont like one-letter variables if it's not something conventional (e.g. x y coordinates). Maybe normalizesQuery?

maxy-shpfy · 2026-03-05T06:16:27Z

src/components/Home/PipelineSection/PipelineFiltersBar.tsx

+  searchQuery,
+  setSearchQuery,
+  dateRange,
+  setDateRange,
+  sortField,
+  setSortField,
+  sortDirection,
+  setSortDirection,
+  componentQuery,
+  setComponentQuery,
+  hasActiveFilters,
+  activeFilterCount,
+  clearFilters,
+  totalCount,
+  filteredCount,
+  actions,


That's smells . Do we really need to propagate all these setters/values?

maxy-shpfy · 2026-03-05T06:33:37Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+      if (componentQuery && !matchesComponentQuery(fileEntry, componentQuery))
+        return false;
+      return true;


NIT: apply de-morgan's law to simplify return.

return !componentQuery || matchesComponentQuery(fileEntry, componentQuery);

maxy-shpfy · 2026-03-05T06:35:31Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+  // Stable string that changes only when filter inputs change — safe for useEffect deps
+  const filterKey = `${searchQuery}|${dateRange?.from?.getTime() ?? ""}|${dateRange?.to?.getTime() ?? ""}|${componentQuery}|${sortField}|${sortDirection}`;
+
+  const filterBarProps: FilterBarProps = {


I dont know what React Compiler will do with this. Would it create new object each time?

maxy-shpfy · 2026-03-05T06:36:36Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+    });
+
+  // Stable string that changes only when filter inputs change — safe for useEffect deps
+  const filterKey = `${searchQuery}|${dateRange?.from?.getTime() ?? ""}|${dateRange?.to?.getTime() ?? ""}|${componentQuery}|${sortField}|${sortDirection}`;


NIT: to improve readability

const filterKey = [ searchQuery, dateRange?.from?.getTime(), dateRange?.to?.getTime(), componentQuery, sortField, sortDirection, ].join("|");

maxy-shpfy · 2026-03-05T06:46:46Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+  };
+
+  const filteredPipelines: PipelineEntry[] = Array.from(pipelines.entries())
+    .filter(([name, fileEntry]) => {


I feel this filter with some slight modifications to helper functions can be optimized for reading, e.g.

const filteredPipelines: PipelineEntry[] = Array.from(pipelines.entries()) .filter( ([name, fileEntry]) => matchesSearch(name, fileEntry, searchQuery) && matchesDateRange(fileEntry, dateRange) && matchesComponentQuery(fileEntry, componentQuery), ) .sort((a, b) => sortByNameAndModificationTime(a, b, sortField, sortDirection), ) .map(([name, fileEntry]) => buildPipelineEntry(name, fileEntry, searchQuery, componentQuery), );

maxy-shpfy · 2026-03-05T06:52:12Z

src/components/Home/PipelineSection/usePipelineFilters.ts

+  if (dateRange?.from) {
+    if (new Date(fileEntry.modificationTime) < dateRange.from) return false;
+  }
+  if (dateRange?.to) {
+    const to = new Date(dateRange.to);
+    to.setDate(to.getDate() + 1);
+    if (new Date(fileEntry.modificationTime) > to) return false;
+  }
+  return true;


NIT: for better readability use early returns, less if-nesting and variable naming

if (!dateRange) return true; const modificationTime = new Date(fileEntry.modificationTime); if (dateRange.from && modificationTime < dateRange.from) return false; if (dateRange.to) { // Include the entire "to" day by comparing against the start of the next day const endOfRange = new Date(dateRange.to); endOfRange.setDate(endOfRange.getDate() + 1); if (modificationTime > endOfRange) return false; } return true;

Or if introduce a helper normalizeEndOfRange

const endOfRange = normalizeEndOfRange(dateRange.to); if (endOfRange && modificationTime > endOfRange) return false;

maxy-shpfy · 2026-03-05T07:07:36Z

src/components/Home/PipelineSection/PipelineFiltersBar.tsx

+                {allBadges.map((badge) => (
+                  <Badge key={badge.key} variant="outline">


Thinking outloud: this remind me a TagList component from another PR https://app.graphite.com/github/pr/TangleML/tangle-ui/1848?ref=gt-pasteable-stack

I can come back to this once that PR is in.

maxy-shpfy

Tophatted -works well! I would love to improve readability in usePipelineFilters

Mbeaulne changed the title ~~Pipeline filters~~ Add pipeline filters bar with advanced search and sorting Feb 27, 2026

Mbeaulne force-pushed the 02-27-pipeline_filters branch 5 times, most recently from c5d3881 to fd1b3c9 Compare March 2, 2026 15:06

Mbeaulne mentioned this pull request Mar 2, 2026

Add search result highlighting to pipeline rows #1878

Open

8 tasks

Mbeaulne marked this pull request as ready for review March 2, 2026 15:35

Mbeaulne requested a review from a team as a code owner March 2, 2026 15:35

Mbeaulne force-pushed the 02-27-pipeline_filters branch from fd1b3c9 to caa1934 Compare March 3, 2026 16:17

Mbeaulne mentioned this pull request Mar 3, 2026

Pipeline title length fix #1883

Open

8 tasks

maxy-shpfy reviewed Mar 5, 2026

View reviewed changes

maxy-shpfy approved these changes Mar 5, 2026

View reviewed changes

Mbeaulne force-pushed the 02-27-pipeline_filters branch from caa1934 to 0d83f2e Compare March 5, 2026 17:12

Pipeline filters

11e5ca9

Mbeaulne force-pushed the 02-27-pipeline_filters branch from 0d83f2e to 11e5ca9 Compare March 5, 2026 17:13

		{allBadges.map((badge) => (
		<Badge key={badge.key} variant="outline">

Conversation

Mbeaulne commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

github-actions bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 To tophat this PR:

Uh oh!

Mbeaulne commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

morgan-wowk commented Mar 4, 2026

Uh oh!

maxy-shpfy commented Mar 5, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Mbeaulne commented Feb 27, 2026 •

edited

Loading

github-actions bot commented Feb 27, 2026 •

edited

Loading

Mbeaulne commented Feb 27, 2026 •

edited

Loading

maxy-shpfy Mar 5, 2026 •

edited

Loading