Remove unnecessary scrollbars in skeleton tab

[dieknolle3333]

URL of deployed dev instance (used for testing):

• https://removeunnecessaryskeletonscrollbars.webknossos.xyz/

Steps to test:

• Go to skeleton tab, make sure to have plenty of trees and tree groups
• (almost) no matter how much you resize the tab (vertically and horizontally), there should not be an accessive amount of scroll bars
  • the list should have a scroll bar
  • when very narrow, the key value pairs will have an additional scroll bar
  • the buttons in the first row (starting with the search) should break into more lines when the tab is narrower than the button row
• in general the user experience should be nice for reasonable resizing of the tab. of course when very narrow, the tab is not really usable
• very long tree names and tree group names should be displayed fully again, by adding line breaks. this removes the need for a horizontal scroll bar

TODOs:

• [x] fix case where tab is narrower than "more" button
• [x] maybe add horizontal scroll bar to whole tab, see https://scm.slack.com/archives/C5AKLAV0B/p1730132849023669

Issues:

• fixes #8058

---

(Please delete unneeded items, merge only when none are left open)

• [x] Updated changelog
• [ ] Updated migration guide if applicable
• [ ] Updated documentation if applicable
• [ ] Adapted wk-libs python client if relevant API parts change
• [ ] Removed dev-only changes like prints and application.conf edits
• [ ] Considered common edge cases
• [ ] Needs datastore update after deployment

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a ScrollableVirtualizedTree component for improved tree view performance with drag-and-drop capabilities.
  • Enhanced context menus with new actions for managing segments and trees, including color changes and deletions.
  • Added toast notifications for user feedback during mesh loading operations.

• Improvements

  • Updated styles for buttons and components for better visual organization.
  • Enhanced user interactions with improved handling of tree node selections and dragging.

• Bug Fixes

  • Resolved issues with dataset uploads and annotation saves, ensuring smoother user experience.

[coderabbitai[bot]]

Walkthrough

The changes in this pull request primarily involve modifications to the SegmentListItem component and related functionality within the segments and trees tab of the frontend application. Enhancements include updates to the user interface elements, such as the ColoredDotIcon, as well as the addition of new context menu items for segment management. The introduction of the ScrollableVirtualizedTree component improves tree rendering performance. Additionally, several import paths have been adjusted to reflect a new directory structure, and CSS styles have been added to enhance button layouts.

Changes

File	Change Summary
frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx	Updated ColoredDotIcon styles, modified context menu functions to include toast notifications and checks, expanded context menu options, and updated _MeshInfoItem rendering logic.
frontend/stylesheets/trace_view/_right_menu.less	Added new CSS class .compact-buttons with styles for buttons.
CHANGELOG.unreleased.md	Updated with new features, changes, and fixes related to segments, trees, and UI enhancements.
frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.tsx	Updated import path for SkeletonTabView.
frontend/javascripts/oxalis/view/layouting/tracing_layout_view.tsx	Updated import path for importTracingFiles.
frontend/javascripts/oxalis/view/right-border-tabs/scrollable_virtualized_tree.tsx	Introduced ScrollableVirtualizedTree component for improved tree view performance with drag-and-drop.
frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx	Replaced Tree component with ScrollableVirtualizedTree for enhanced rendering performance.
frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view_helper.tsx	Updated SegmentHierarchyGroup and SegmentHierarchyLeaf types to extend from BasicDataNode.
frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx	Updated import paths and adjusted rendering logic for better organization.
frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx	Updated import paths, modified rendering functions, and refined context menu functionalities.
frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view.tsx	Adjusted import paths, replaced AntdTree with ScrollableVirtualizedTree, and refined interaction functions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SegmentListItem
    participant ContextMenu
    participant MeshInfoItem
    participant ScrollableVirtualizedTree

    User->>SegmentListItem: Click on segment
    SegmentListItem->>ContextMenu: Show context menu
    ContextMenu->>User: Display options (load, edit, delete)
    User->>ContextMenu: Select load option
    ContextMenu->>MeshInfoItem: Check mesh status
    MeshInfoItem-->>ContextMenu: Return mesh info
    ContextMenu->>User: Show toast notification
    User->>ScrollableVirtualizedTree: View updated tree

Assessment against linked issues

Objective	Addressed	Explanation
There should only be one vertical scrollbar (8058)	✅
Improve layouting to avoid multiple scrollbars (8058)	✅

Possibly related PRs

• #8123: Introduces a button to select all trees and segments that match a search, enhancing user interactions.
• #8162: Wraps the Ant Design tree to enable scrolling while dragging, improving user experience in managing tree structures.
• #8164: Allows the deletion of bounding boxes even if there is no visible segmentation layer, connecting to improvements in user feedback.

Suggested labels

bug

Poem

🐰 In the forest where the segments play,
A virtual tree now leads the way.
With buttons compact and colors bright,
The context menus bring delight!
So hop along, let’s manage with glee,
For every change, there’s joy, you see! 🌼

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.