feat: FIT-835: Improve customize columns button when Quick View is open #8719
Conversation
✅ Deploy Preview for label-studio-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for label-studio-docs-new-theme canceled.
|
✅ Deploy Preview for label-studio-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for heartex-docs canceled.
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #8719 +/- ##
===========================================
- Coverage 67.03% 59.92% -7.11%
===========================================
Files 790 551 -239
Lines 60682 39003 -21679
Branches 10313 10316 +3
===========================================
- Hits 40677 23373 -17304
+ Misses 20002 15627 -4375
Partials 3 3
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
|
||
| // Regular mode: Index 0 is header (sticky), Index 1+ are data rows | ||
| const row = data[index - 1]; | ||
| const isEven = index % 2 === 0; |
There was a problem hiding this comment.
There is inconsistensy between isEven logic here and in new code. And sematically your code is correct, because the first row (virutally it has index 0 which is even) in your code will have it true (2 is even, that's correct), but in old code first row will have false (1 is odd). You can even see this on screenshots: in Quick View first row is grey while in DM it's white.
I'd suggest to fix the old code.
|
/git merge
|
This pull request introduces a significant refactor and UX improvement to the table component, especially for "QuickView" (labeling) mode. The main changes include a unified, sticky toolbar and header for the table in QuickView, a new density toggle for row height, and several code and style cleanups. The toolbar is now always visible and integrated into the scrolling/virtualization logic, while density (row height) can be switched and is persisted. The changes also remove legacy column selector code and update styles for a more consistent look.
https://www.loom.com/share/fe304a4efbe546f2bdd840e4f7b8362a
Screenshots
Before
After
Table/QuickView UX and Virtualization Improvements:
Refactored the table to support a sticky, always-visible toolbar and header in QuickView mode, integrating them into the virtualization logic and ensuring correct scroll/offset handling. This includes new logic for rendering, positioning, and sizing of toolbar/header rows, and handling scroll events to keep the header in view. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]
Removed old column selector button logic and markup from the QuickView table, consolidating customization controls into the new toolbar. [1] [2]
Density Toggle Feature:
DensityTogglecomponent that allows users to switch between "comfortable" and "compact" row heights. The choice is persisted in localStorage and triggers a global event on change. Integrated the toggle into both the table toolbar and the DataManager toolbar instruments. [1] [2] [3] [4] [5]Styling and Theming Updates:
App.scssto use a new CSS variable. [1] [2] [3]Minor Layout Tweaks: