Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing highlight width inconsistencies in list panel #2002

Closed
stephkaiser opened this issue Jul 25, 2024 · 0 comments · Fixed by #2004
Closed

Fixing highlight width inconsistencies in list panel #2002

stephkaiser opened this issue Jul 25, 2024 · 0 comments · Fixed by #2004

Comments

@stephkaiser
Copy link

Description

While working on the slicing MVP, we noticed several inconsistencies with the highlighting in the left panel:

  1. When hovering on the list and on a node in the flowchart - highlighting in the list panel is not the same width (one is longer, other is shorter)
  2. When clicking on the list and on a node in the flowchart - highlighting in the list panel stretches to full-width (both are full-width)
  3. When hovering and clicking on pipeline groups -
    On the list - hover and click has different highlight widths (one is longer, other is shorter)
    In the flowchart - hover and click on pipeline groups doesn't highlight in the list panel (this is a BUG)

Summary - highlight widths are inconsistent across different interactions in the list panel. There are currently 3+ different widths in the list panel, and hover and selection states also have inconsistent highlight widths.

Context

These issues should ideally be fixed before we can release the slicing MVP feature.

Suggested Implementation - New Design Updates

New design pattern for highlights in the left panel:

  1. Now we only have 1 width (always full-width) for both hover and selection states.
  2. Hovering on an expanded pipeline group will also highlight all it's children in the same highlight width.
  3. Selected items will have a blue indication line on the right side, and a full-width highlight as well. Pipeline groups cannot be selected, only nodes can be selected. Clicking on a pipeline group will expand/collapse it (this is the same pattern currently and already exists).
  4. When a child node inside a pipeline is selected - if the pipeline group is expanded, the blue line will be shown at the child level. If the pipeline group is collapsed, the blue line will be shown at the parent pipeline level to indicate something is selected within that pipeline group.

More detailed examples of the different states and various options can be found here - https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=1763-75495&t=yYd5EKuBdBCdDf3X-4

Any questions let me know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants