POC - Implement the Functionality to Select and Shift-Hold to Select 2 Nodes from the Chart

[Huongg]

Description

The idea is to allow users to slice the pipeline directly in the flowchart. When a user selects one node and then shift-holds and selects a second node, the view should update to reflect the sliced pipeline, showing only the portion from the first selected node to the second selected node. This ticket is part of the larger ticket #1784, "Make Kedro-Viz flowchart filterable."

Context

This feature allows users to focus on specific parts of the pipeline. By enabling this slicing functionality, users can more easily debug, analyze, and understand complex pipelines.

Tasks:

• Investigate on how to implement the multi-node selection with shift-hold in the flowchart view
• As a Kedro user, I want to be able to select multiple nodes within the flowchart so that I can slice the pipeline I am currently viewing. #1973
• As a Kedro user, I want to preview which nodes are included in my selection for slicing so that I can understand what my slice will be before creating a new slice. #1974
• 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. #1975
• As a Kedro user, I want to share my sliced pipeline view with others through a URL. #1976

Checklist

• Include labels so that we can categorise your feature request

[Huongg]

To summarise my SPIKE work

1. Data flow

Below is the diagram to illustrate how data flows through the application for this function. You can find my POC branch here

• When any action is performed on a node click, the system checks if the shift key is used.
• If the shift key is pressed, the application triggers the filterNodes reducer and selector.
• This process identifies the new visible nodes on the chart based on the action performed.

2. Next Step:

Design Requirements: we need input from @stephkaiser to enhance the user interface and user experience. The following elements should be included:

• The appearance and functionality of buttons.
• The color scheme for selected nodes and other interactive elements.
• The general flow and styling