search

heavyai / heavyai-charting

Dimensional charting built to work natively with crossfilter rendered using d3.js
https://heavyai.github.io/heavyai-charting/
Other
399 stars 73 forks source link

[FE-17481] Preven table sorting option from being hidden #669

Closed cmatzenbach closed 5 months ago

cmatzenbach commented 6 months ago

:speech_balloon: Description

Fixes issue where if table chart was resized to a small size, the column alignment buttons would float over the column name and sort button. Now the alignment buttons will move as close as they can to the column title before getting cut off. Moved these buttons to their own wrapper, with a flexbox layout and less padding so the buttons can get closer to the column title before being cut off.

:page_facing_up: Jira Issue

Closes FE-17481

:mag: Verification Steps

  1. Follow repro steps in corresponding jira ticket
  2. Ensure the alignment buttons no longer overlay over the sort button and you can still sort a column when the table is resized to be very small.

:camera_flash: Screenshot

https://github.com/heavyai/heavyai-charting/assets/15268289/c68b0b1a-dd83-4507-a45d-a056fb8cebee

mapd-bot-os commented 6 months ago

build succeeded

mapd-bot-os commented 6 months ago

build succeeded

johallar commented 6 months ago

I noticed the text alignment controls can overflow and be hidden, we should probably make sure the min column width accommodates the sorting and the alignment controls:

Screen Shot 2024-05-20 at 8 48 35 AM
mapd-bot-os commented 6 months ago

build succeeded

cmatzenbach commented 6 months ago

I noticed the text alignment controls can overflow and be hidden, we should probably make sure the min column width accommodates the sorting and the alignment controls:

Screen Shot 2024-05-20 at 8 48 35 AM

@johallar Ok, after spending hours playing around with this, unfortunately we can't do it with CSS. D3 is manually setting the size of the header and table cells on the elements when you re-size, and it has a set min-width it will only go to. By setting a min-width on the header, the header becomes mis-aligned with the table columns. We also can't decide on a standard min-width since the column names for the header vary in size. I tried to make it respect the elements present in that container (i.e. the sort buttons, column names, and alignment buttons) but the only way I could get it close was a lot of hacky manual resizing with d3 code, nothing worked with css. I'll open an UI improvement ticket that can be worked on later, as this at least solves the bug and offers an improvement over current UX.