add feature of auto filter when clicking on property

[nidhi-wa]

This PR implements the Auto Filter feature, enabling users to apply filters automatically when clicking on cells in the Trace , Span and Session Tab.

#192

---

Important

Add auto-filter feature to sessions-table.tsx, spans-table.tsx, and traces-table.tsx enabling filter application by clicking on table cells.

• Behavior:
  • Auto-filter feature added to sessions-table.tsx, spans-table.tsx, and traces-table.tsx allowing users to apply filters by clicking on table cells.
  • Filters are applied to columns like id, span_type, name, top_span_type, and top_span_name.
• Functions:
  • handleAddFilter and handleUpdateFilters functions added to manage filter state in sessions-table.tsx, spans-table.tsx, and traces-table.tsx.
• UI Components:
  • DataTableFilter in datatable-filter.tsx updated to handle active filters and apply them to URL search parameters.
  • handleApplyFilters function in datatable-filter.tsx updates URL with new filters and resets pagination.

^{This description was created by for 9f6142c. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 9f6142c in 1 minute and 53 seconds

More details

• Looked at 392 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. frontend/components/ui/datatable-filter.tsx:71

• Draft comment:
  Calling handleApplyFilters inside useEffect can cause an infinite loop if it updates activeFilters. Consider refactoring to avoid this.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. frontend/components/traces/sessions-table.tsx:126

• Draft comment:
  The handleAddFilter function is repeated across multiple files. Consider refactoring it into a shared utility function to adhere to the DRY principle.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  While code duplication is a valid concern, I cannot verify if this function is actually duplicated since I don't have access to other files. The comment makes an assumption about code in other files that I cannot validate. Following the rules, I should not keep comments that require more context to verify.
  The function does look like a generic utility that could be reused, so the suggestion isn't completely unreasonable. Maybe there is duplication that would benefit from refactoring.
  Without being able to verify the duplication claim, keeping this comment would be speculative. The rules clearly state we need strong evidence to keep a comment.
  Delete the comment since we cannot verify the claim about code duplication across files without access to those files.

3. frontend/components/traces/spans-table.tsx:165

• Draft comment:
  The handleAddFilter function is repeated across multiple files. Consider refactoring it into a shared utility function to adhere to the DRY principle.
• Reason this comment was not posted:
  Marked as duplicate.

4. frontend/components/traces/traces-table.tsx:176

• Draft comment:
  The handleAddFilter function is repeated across multiple files. Consider refactoring it into a shared utility function to adhere to the DRY principle.
• Reason this comment was not posted:
  Marked as duplicate.

5. frontend/components/traces/sessions-table.tsx:126

• Draft comment:
  This filter management logic could be extracted to a shared utility function.

• function handleAddFilter (spans-table.tsx)

• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_G3YnjwSVotPxwKeb

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[dinmukhamedm]

Hey @nidhi-wa can you record a video of the new functionality? I couldn't get this to work. Perhaps, you may need things like preventDefault or stopPropagation?

[dinmukhamedm]

Also, we'd probably need some kind of visual indication that a cell is clickable, not sure exactly, but AWS for example uses dotted underline text

[nidhi-wa]

Based on your suggestions I've made changes. Included a recording of functionality showcasing how it works in action . Let me know your thoughts.

20.01.2025_16.52.39_REC.mp4

[dinmukhamedm]

Looks good overall. Please resolve the conflicts. I think, I've removed the swr fetcher bit from the traces table. Also @skull8888888 what do you think of the visuals? I need your input

[skull8888888]

@nidhi-wa Thank you for the PR! Looks good, although I would remove primary color and underline.

[nidhi-wa]

@skull8888888 @dinmukhamedm Thank you for the feedback! Just to clarify, are you suggesting removing the primary color and underline entirely, or do you have an alternative styling recommendation in mind? Let me know so I can make adjustments accordingly!

[nidhi-wa]

How about we remove the primary color and instead show the underline only when the user hovers over the cell? I think this approach could keep the design cleaner while still providing a clear visual for interactivity. Let me know your thoughts!

[dinmukhamedm]

@nidhi-wa yes, let's do underline on hover, but without primary color.

[nidhi-wa]

@dinmukhamedm Done

[dinmukhamedm]

LGTM