Add filtering of pipelines on Kedro-Viz flowchart in VSCode

[jitu5]

Description

Resolves kedro-org/vscode-kedro#157

The pull request introduces a feature to filter pipelines within the Kedro-Viz flowchart when using Visual Studio Code (VSCode). This enhancement allows users to selectively view and manage specific pipelines directly in the VSCode environment, improving navigation and focus during development.

Development notes

Key changes include:

• Added SHOW_PIPELINE_FILTER action and togglePipelineFilter function in src/actions/index.js to manage the pipeline filter toggle state.
• Updated middleware in src/store/middleware.js to handle the new SHOW_PIPELINE_FILTER action.
• Modified src/components/app/app.js to load pipeline data when the selected pipeline changes.
• Added togglePipelineFilter to src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js and included a new FilterIcon button.
• Created a new FilterIcon component in src/components/icons/filter.js for the filter button.
• Updated PrimaryToolbar in src/components/primary-toolbar/primary-toolbar.js to display the filter button based on the display prop.
• Set the default state of filterBtn to false in src/store/initial-state.js.

QA notes

• To test, we need to pass the selected_pipeline key with a valid pipeline name. Any subsequent changes should update the flowchart with the passed pipeline name.
• From VSCode in KedroViz component pass display.filterBtn as true

GIF

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[astrojuanlu]

I'm not sure how to QA this. Here's what I tried:

1. Ran make build on Add filtering of pipelines on Kedro-Viz flowchart in VSCode vscode-kedro#167
2. Install the corresponding kedro.vsix and restart extension host
3. pip install -e ./package of this PR
4. >kedro: Run Viz command on VS Code

I still see the old UI for some reason.

[jitu5]

3. pip install -e ./package of this PR

@astrojuanlu This step is only needed when there are changes in the Kedro-Viz backend. However, in this PR, we are making changes to the frontend. Therefore, we need an npm-published version of Kedro-Viz that includes our changes to use in the extension.

I have published a test npm package to test these changes in the extension:
[email protected]

Instead of step 3 pip install -e ./package, you need to make the following changes and then run make build:
kedro-org/vscode-kedro@2387775

[astrojuanlu]

Thanks 🙏🏼 Can't get to this today or tomorrow, if it's not merged yet by Monday I'll review it.