Add Favorite Button to Traces #173

[patricksolka]

• Created new component - Favorite.tsx
• Added star icon from lucide-react, which can be toggled on click
• Favorite component is displayed in the header of the dataTable.tsx as a new column.
• Favorite component is displayed within each row, allowing users to toggle the favorite status for individual items.
• Added placeholder functions for adding and removing favorites (to be implemented)

Remaining Issue:

• the current implementation of the favorite button interferes with row selection because both the favorite and checkbox toggle share the same row.toggleSelected function from RowSelection.ts. As I am not yet familiar with TanStack, I'm unsure how to separate the toggleSelected for the favorite button, or if it's better to manage it with a simple useState-hook instead.

---

Important

Add Favorite component to DataTable for toggling favorite status, with placeholder functions and shared logic issue.

• Behavior:
  • Adds Favorite component to datatable.tsx as a new column, allowing users to toggle favorite status per row.
  • Star icon from lucide-react used in Favorite.tsx, toggles on click.
  • Placeholder functions addFavorite and removeFavorite in datatable.tsx.
• Issues:
  • Favorite button shares row.toggleSelected logic with row selection, causing interference.
• Components:
  • New Favorite component in favorite.tsx with isSelected and onToggle props.

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

[CLAassistant]

All committers have signed the CLA.

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to e5dbcc4 in 1 minute and 26 seconds

More details

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

1. frontend/components/ui/datatable.tsx:105

• Draft comment:
  The addFavorite and removeFavorite functions are placeholders. Ensure these are implemented in future updates to handle favorite status changes properly.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The placeholder functions for adding and removing favorites are not implemented. This is acceptable for now, but should be addressed in future updates.

2. frontend/components/ui/datatable.tsx:160

• Draft comment:
  The Favorite component is using row.toggleSelected() which is meant for row selection. Consider using a separate state or function to manage the favorite status independently from row selection.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_qEEV1bvzgILS7Ukg

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[skull8888888]

@patricksolka apologies didn't have time to look through the pr yet, was flooded with other tasks, but should have time this weekends. In the meantime can you please change target branch to dev branch. All development is happening on the dev branch, and all prs to main trigger rebuilds of docker containers.