Support filtering of pipelines on Kedro-Viz flowchart in VSCode

[jitu5]

Description

In the current Kedro VSCode extension, users are unable to filter pipelines within the Kedro-Viz flowchart panel. This limitation makes it challenging to manage and navigate large projects with numerous nodes, leading to a cluttered and less efficient workflow.

Designs can be found here - https://www.figma.com/design/3kSpvIO1veLKfy9qHxuXwF/Kedro-WIP?node-id=2936-125807&t=Km8oiXjUlRyVBUMk-4

Context

For the large Kedro projects, the absence of a filtering mechanism in the Kedro-Viz flowchart panel makes the Kedro-Viz integration nearly unusable. Implementing a filtering feature would allow users to focus on specific pipelines or subsets of nodes, thereby enhancing usability and productivity.

Possible Implementation

• Integrate the existing filtering component from the Kedro-Viz web application into the VSCode extension.
• Add filter icon on utility bar, by clicking on it, VSCode command palette will open with pre-populated list of pipelines.

Acceptance Criteria

• Users can access a filtering interface within the VSCode extension to select specific pipelines.
• Flowchart updates in real-time based on the selected filters, displaying only the relevant nodes.
• The filtering functionality is intuitive and does not require extensive configuration or setup.
• Create a appropriate props to only show filter icon on VSCode and not on other instances.

Checklist

• Include labels so that we can categorise your feature request

[rashidakanchwala]

Next steps for this ticket are :-

• test if the kedro filter command in the Command Palette and show that it will open with pre-populated list of pipelines
• Cross-check and confirm the behavior is okay with design @stephkaiser (or @noklam/ @jitu5 )
• After this, we can build the filter icon which upon clicking opens the VS Command Palette