Feature/slicing pipeline run command

[Huongg]

Description

Fixes #1975
User story: As a Kedro user, I want to view my sliced pipeline and its corresponding run command so that I can run this slice in the CLI for my Kedro project. I also want to be able to reset my sliced pipeline view so that I can go back to viewing the full Kedro pipeline

Development:

run-command-pr.mov

QA notes:

When testing on your machine locally, or through gitpod, please note that this PR only covers the functionalities below:

• Filtered Nodes View: A new view should display all the filtered nodes.
• Updated Node List: The node list should reflect all the newly filtered nodes.
• CLI Command Display: A command line at the bottom should show how to run the filtered nodes in the CLI.
• Close the sliced view: Click the exit button should take the user back to viewing the full kedro pipeline

Figma: https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=1469-56945&t=gAB4IcCLRWoEGtZQ-0

[jitu5]

I also commented on Sajid's PR for action bar position calculation. Also its width.
Based on the other component's visibility and available width we need to adjust its position as well as inner command box's width.

[Huongg]

good spot, I'm meant to add the minimum value for transformX so it never gets hidden behind the nodelist bar. Updated the code now

[jitu5]

@Huongg on demo-slicing-pipeline-final branch I tested locally I still see action bar overlap with metadata panel.

[Huongg]

hey @jitu5 yeah it's supposed to be like that. The metadata panel can be displayed on the top of the run command. The only condition is the number of selected and run command should always be visible, and not being covered by the node list on the left

[jitu5]

@Huongg I am fine with it. It would have been nice to fit action bar within available space, keeping command box as variable width container, may be we can keep this as future work after MVP.

[Huongg]

yeah interesting idea, i think it would require further design thinking as in order to fix the whole action bar in the available space, we will need to reduce the width, in that case what the transition/animation would look like, etc

Agree that can be something to be considered in the future MVP

[ravi-kumar-pilla]

Hi @Huongg , Overall the PR looks great. However, I observed few issues -

1. The SliceActionBar animates from left to right is not smooth. (It might depend on the system as well)
2. On bigger screens, the SliceActionBar is not centered. Can we try to justify the action bar to center irrespective of screen size ?
3. After clicking of Reset slice, sometimes I observed the transition is not smooth.

The functionality looks great, but there are some bumpy transitions on my machine. Thank you

[Huongg]

Hi @Huongg , Overall the PR looks great. However, I observed few issues -

1. The SliceActionBar animates from left to right is not smooth. (It might depend on the system as well)
2. On bigger screens, the SliceActionBar is not centered. Can we try to justify the action bar to center irrespective of screen size ?
3. After clicking of Reset slice, sometimes I observed the transition is not smooth.

The functionality looks great, but there are some bumpy transitions on my machine. Thank you

hey can you attach the screen recording from your side please?

Also i realised the action bar should slice from right to left, not left to right. So updated it now. Also i see what you mean on the big screen. Will need to add break point in there but generally it does calculate based on the screen size, but we need to handle it differently when its at the breakpoint

[stephkaiser]

Thanks Huong! so excited for this, great work so far!

some design QA comments from me:

1. the paddings for the floating slice component doesnt seem to match design, let me know if you need my help in documenting the different paddings its a bit complicated
2. the hover states are missing for the copy button and the slice button. The reset slice button on hover should have a slightly darker red colour and keeps the white text
3. I forgot to add the gradient for long run commands on the left side as well when user scrolls to the right, could we add this as well? right now when user scrolls to the end on the right, there is still a gradient so its not clear if user has reached the end of the text.

4. the "Copied!" tooltip position needs to be a bit higher - should be 4px above the entire component itself
5. the slice button and reset slice button have different heights, both should be 40px

Thank you!!

[ravi-kumar-pilla]

hey can you attach the screen recording from your side please?

Sure - The screen size here is 2560 * 1080 .

Some [Nit] design comments from what I observed -

1. Though I like the sliding from right to left of the run command, I feel there are too many moving parts when slicing.
2. The metadata panel opens and closes, when selecting the slice
3. The flowchart itself adjusts sometimes, making the screen move
4. Then the slice slides from right to left. Can we try something subtle like a pop up appearing in the bottom center, something like a snackbar coming from bottom without much movement (just a thought)

In the above gif, if you see there is some movement in the run-command which is not smooth (may be it appears that way because the metadata panel closes at the same time). I feel the snackbar design would reduce the amount of movement the run-command takes.

Also, in the gif if you see the run-command appears with 1 node selected (I think it should only appear when 2 are selected).

Thank you

[Huongg]

hey @ravi-kumar-pilla as discussed one friday, I've now improved the transition of the action bar, and also fix the bug that you found when the first selected node is not highlighted. Let me know if you can see these changes from your side?

[Huongg]

Thanks Huong! so excited for this, great work so far!

some design QA comments from me:

1. the paddings for the floating slice component doesnt seem to match design, let me know if you need my help in documenting the different paddings its a bit complicated
2. the hover states are missing for the copy button and the slice button. The reset slice button on hover should have a slightly darker red colour and keeps the white text
3. I forgot to add the gradient for long run commands on the left side as well when user scrolls to the right, could we add this as well? right now when user scrolls to the end on the right, there is still a gradient so its not clear if user has reached the end of the text.

4. the "Copied!" tooltip position needs to be a bit higher - should be 4px above the entire component itself 5. the slice button and reset slice button have different heights, both should be 40px

Thank you!!

hey @stephkaiser I think I've addressed all of your comments apart from point 3, let's discuss which approach we should go with for this one 😄

[ravi-kumar-pilla]

Great work @Huongg !! 💯