search

kedro-org / kedro-viz

Visualise your Kedro data and machine-learning pipelines and track your experiments.
https://demo.kedro.org
Apache License 2.0
647 stars 106 forks source link

Metadata panel design fixes #1827

Open stephkaiser opened 3 months ago

stephkaiser commented 3 months ago

This list of design fixes was created when I investigated some inconsistencies in dataset previews in the metadata panel (https://github.com/kedro-org/kedro-viz/pull/1800). Designs can be found here, let me know if there are any questions!

  1. all 'Expand preview' labels for the expand button need to be centered.
  2. the left and right padding for the entire metadata panel should both be 48px, top padding is 32px.
  3. the toggle for 'Show code' isn't aligned with the text, looks to be positioned slightly lower. There should also be a 8px padding between the toggle and label. I've also updated the toggle so the label turns blue as well when the toggle is on.
  4. when the 'Show Code' toggle is on and the code block is visible, the minimap is still displayed on top, this should be hidden as the code block should be on top of the minimap, and the minimap is not needed.
  5. It would be nice to include the scrolling functionality (as discussed for JSON preview) as well for table data previews. However, since users will most likely need to do both horizontal and vertical scrolling to view the table, only one direction should be allowed at a time, meaning we should not allow users to scroll diagonally using both horizontal and vertical scroll together at the same time.
  6. the Run command text should have a 24px gap between the copy button and text.
Screenshot 2024-03-26 at 16 25 41
rashidakanchwala commented 1 month ago

This ticket fell under the hood. It's a quick win with minor design changes. It would be great if we can tackle it in the next sprint. I am raising priority for this after brief discussion with @stephkaiser