Skip to content

Profile selector: add sortable columns and total weight display#515

Merged
jlfwong merged 5 commits intomainfrom
terragon/profile-selector-total-weight-sort
Aug 11, 2025
Merged

Profile selector: add sortable columns and total weight display#515
jlfwong merged 5 commits intomainfrom
terragon/profile-selector-total-weight-sort

Conversation

@jlfwong
Copy link
Owner

@jlfwong jlfwong commented Aug 7, 2025 •
edited
Loading

Summary

  • Enhanced the profile selector UI to display profiles in a table with sortable columns
  • Added sorting by profile name and total non-idle weight with ascending/descending toggle
  • Displayed total weight as a percentage of the sum of all profiles' non-idle weights
  • Improved visual styling and interaction for sorting indicators and profile rows
image

Changes

UI Components

  • Converted profile list from div-based rows to a table layout with headers
  • Added clickable headers for "Profile Name" and "Total Weight" columns to toggle sorting
  • Introduced SortIcon component to visually indicate sorting direction
  • Updated ProfileSelectRow to render table rows with name and weight cells
  • Displayed weight values formatted with percentage of total non-idle weight

Sorting Logic

  • Added SortField and SortDirection enums and SortMethod interface
  • Modified filtering function to accept and apply sorting by name or weight
  • Default sorting set to descending by total non-idle weight
  • Clicking a column header toggles sorting direction or switches sorting field

Styling

  • Added styles for table, headers, cells, and sorting icons
  • Improved hover and selected row styles for better user experience
  • Increased max width of profile selector for better layout

Test plan

  • Verify profiles are displayed in a table with name and weight columns
  • Test sorting by name ascending and descending
  • Test sorting by total weight ascending and descending
  • Confirm weight percentages are calculated and displayed correctly
  • Check UI responsiveness and styling consistency
  • Ensure keyboard and mouse interactions for sorting work as expected

🌿 Generated by Terry

ℹ️ Tag @terragon-labs to ask questions and address PR feedback

📎 Task: https://www.terragonlabs.com/task/74df1090-b029-4226-abad-194cc2be3ac9

Fixes #514

@jlfwong
feat(profile-select): add sortable table view with name and weight co…
d0e58e9 
…lumns

- Replace profile list divs with a table layout for better structure
- Add sorting by profile name and total non-idle weight with ascending/descending toggle
- Display total weight and percentage in the weight column
- Introduce SortIcon component to indicate sort direction
- Update styles for table, headers, rows, and cells
- Maintain selection and hover states with refs on table rows
- Increase max width of profile select container for improved layout

Co-authored-by: terragon-labs[bot] <terragon-labs[bot]@users.noreply.github.com>
@coveralls
Copy link

coveralls commented Aug 7, 2025 •
edited
Loading

Coverage Status

coverage: 43.628% (-0.4%) from 43.984%
when pulling b6eb028 on terragon/profile-selector-total-weight-sort
into aa9bef5 on main.

@jlfwong
Copy link
Owner Author

jlfwong commented Aug 7, 2025

@JLC827 Can you take a look at this and see if this would work for your needs?

See https://github.com/jlfwong/speedscope/blob/main/CONTRIBUTING.md for instructions on getting this running locally

@JLC827
Copy link

JLC827 commented Aug 11, 2025

@jlfwong Fantastic! This solves the problem I was having completely. Thank you so much for implementing this.

For what it's worth, I hit a couple of minor setup hurdles on Windows. I'm sharing them here in case it helps other contributors in the future:

  • The npm run serve command failed at first because the dist directory was missing. I had to run mkdir dist in the project root before the server would start successfully.
  • The command line output showed the server running at http://0.0.0.0:8000, but this address didn't work in my browser. I had to navigate to http://127.0.0.1:8000 instead.

Thanks again!

@jlfwong jlfwong merged commit e98a633 into main Aug 11, 2025
6 checks passed
@jlfwong jlfwong deleted the terragon/profile-selector-total-weight-sort branch August 11, 2025 18:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feature Request] Make the main thread easier to identify

3 participants

@jlfwong @coveralls @JLC827