Profile selector: add sortable columns and total weight display

[jlfwong]

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

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

[coveralls]

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

[jlfwong]

@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]

@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!