Add filtering of pipelines on Kedro-Viz flowchart in VSCode #2269

jitu5 · 2025-02-07T19:12:16Z

Description

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.
pipeline_name as optional argument added in get_kedro_project_json_data in responses/pipelines.py.
Created toolbar-filter-button component folder and toolbar-filter-button.js component which is used in sidebar.js

QA notes

Make code changes like this kedro-org/vscode-kedro@2387775 with 1.21.0-rc7 version on Add filtering of pipelines on Kedro-Viz flowchart in VSCode vscode-kedro#167
Run make build on Add filtering of pipelines on Kedro-Viz flowchart in VSCode vscode-kedro#167
Install the corresponding kedro.vsix and restart extension host
pip install -e ./package of this PR in test Kedro project env
>kedro: Run Viz command on VS Code

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

Signed-off-by: Jitendra Gundaniya <38945204+jitu5@users.noreply.github.com>

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

astrojuanlu · 2025-02-20T07:37:28Z

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

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

I still see the old UI for some reason.

jitu5 · 2025-02-20T10:38:56Z

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:
kedro-vi122@1.21.0-rc3

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 · 2025-02-20T11:11:47Z

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

src/components/primary-toolbar/primary-toolbar.js

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

github-actions · 2025-02-25T12:55:22Z

README.npm.md

@@ -163,6 +163,7 @@ The example below demonstrates how to configure your kedro-viz using different `
 | `miniMap`                  | boolean                                                                            | true                                                     | Show/Hide Mini map and mini map button                                                                                                                        |
 | `sidebar`                  | boolean                                                                            | true                                                     | Show/Hide Sidebar and action toolbar                                                                                                                          |
 | `zoomToolbar`              | boolean                                                                            | true                                                     | Show/Hide zoom-in, zoom-out and zoom reset buttons together                                                                                                   |
+| `filterBtn`              | boolean                                                                            | false                                                     | Show/Hide filter button and sidebar toggle icon                                                                                                   |


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'boolean'?

github-actions · 2025-02-25T12:55:22Z

RELEASE.md

@@ -9,6 +9,8 @@ Please follow the established format:

 ## Major features and improvements

+- Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)
+


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'VSCode'?

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

github-actions · 2025-02-25T15:49:49Z

RELEASE.md

@@ -10,6 +10,8 @@ Please follow the established format:
 ## Major features and improvements
 - Remove experiment tracking. (#2237)

+- Enable Kedro-Viz in VSCode to list pipelines using the filter icon.  (#2269)


⚠️ [vale] _{reported by reviewdog 🐶}
[Kedro-viz.Spellings] Did you really mean 'VSCode'?

ravi-kumar-pilla · 2025-02-27T03:29:10Z

Hi @jitu5 , I have tested this locally and it works well. I want to test it one more time tomorrow as I observed some inconsistency randomly and could not reproduce it again. Great work @jitu5 and @SajidAlamQB . Thank you

# Conflicts: # src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

package/kedro_viz/api/rest/responses/pipelines.py

rashidakanchwala · 2025-02-28T06:09:14Z

hi code-wise both the PRs look great. I am having difficulty getting the setup running at my end. Can we have a chat this morning? :) thanks

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

rashidakanchwala

LGTM!

ravi-kumar-pilla

Works great !! As discussed apart from the design Q about the filter description, everything else looks good. Thank you :)

astrojuanlu

As mentioned internally, the dev setup for this is a bit complicated, so I trust that this is ready to be shipped 👍🏼

SajidAlamQB

Tested manually and all looks great, thank you @jitu5!

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

jitu5 added 3 commits February 6, 2025 13:48

Update app.js

64962f2

Update package.json

38d003c

VSCode filter pipeline

9d85c51

Signed-off-by: Jitendra Gundaniya <38945204+jitu5@users.noreply.github.com>

jitu5 self-assigned this Feb 7, 2025

jitu5 added the Javascript Pull requests that update Javascript code label Feb 7, 2025

jitu5 and others added 9 commits February 18, 2025 12:24

Pipeline filter icon button added

24d34a9

Revert container.js

7991af2

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Merge branch 'kedro-org:main' into main

6099d96

Merge branch 'main' into feature/vscode-filter-pipeline

abdd998

Revert package.json

58822c6

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Merge branch 'main' into feature/vscode-filter-pipeline

03beccb

Payload removed

e8167b8

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Filter button fix

f0f1161

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Release note added

f9a4c5a

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

jitu5 marked this pull request as ready for review February 19, 2025 20:13

jitu5 requested review from rashidakanchwala and astrojuanlu as code owners February 19, 2025 20:13

jitu5 requested a review from ravi-kumar-pilla February 19, 2025 20:14

astrojuanlu removed their request for review February 20, 2025 07:37

rashidakanchwala reviewed Feb 24, 2025

View reviewed changes

src/components/primary-toolbar/primary-toolbar.js Show resolved Hide resolved

Fix for missing function node

e538319

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

github-actions bot reviewed Feb 25, 2025

View reviewed changes

jitu5 added 2 commits February 25, 2025 14:41

Method description updated

78116ae

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

lint fix

b3a11f8

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

jitu5 mentioned this pull request Feb 25, 2025

Add filtering of pipelines on Kedro-Viz flowchart in VSCode kedro-org/vscode-kedro#167

Merged

Merge branch 'main' into feature/vscode-filter-pipeline

f2a4e2f

github-actions bot reviewed Feb 25, 2025

View reviewed changes

Merge branch 'main' into feature/vscode-filter-pipeline

9fc1c65

# Conflicts: # src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

rashidakanchwala reviewed Feb 28, 2025

View reviewed changes

package/kedro_viz/api/rest/responses/pipelines.py Outdated Show resolved Hide resolved

Code review suggestion

3756daf

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

rashidakanchwala self-requested a review February 28, 2025 12:18

rashidakanchwala approved these changes Feb 28, 2025

View reviewed changes

ravi-kumar-pilla approved these changes Feb 28, 2025

View reviewed changes

jitu5 requested review from Huongg, SajidAlamQB, astrojuanlu and stephkaiser March 3, 2025 09:26

astrojuanlu reviewed Mar 3, 2025

View reviewed changes

SajidAlamQB approved these changes Mar 3, 2025

View reviewed changes

rashidakanchwala and others added 4 commits March 3, 2025 11:49

Merge branch 'main' into feature/vscode-filter-pipeline

e403c89

Design review fix

3de37fd

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Copy change

cc26304

Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>

Merge branch 'main' into feature/vscode-filter-pipeline

82267c9

stephkaiser approved these changes Mar 5, 2025

View reviewed changes

jitu5 merged commit c0c2b53 into main Mar 6, 2025
63 checks passed

jitu5 deleted the feature/vscode-filter-pipeline branch March 6, 2025 09:36

Huongg mentioned this pull request Mar 6, 2025

Release/11.0.0 #2294

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add filtering of pipelines on Kedro-Viz flowchart in VSCode #2269

Add filtering of pipelines on Kedro-Viz flowchart in VSCode #2269

jitu5 commented Feb 7, 2025 •

edited

Loading

astrojuanlu commented Feb 20, 2025

jitu5 commented Feb 20, 2025

astrojuanlu commented Feb 20, 2025

github-actions bot Feb 25, 2025

github-actions bot Feb 25, 2025

github-actions bot Feb 25, 2025

ravi-kumar-pilla commented Feb 27, 2025

rashidakanchwala commented Feb 28, 2025

rashidakanchwala left a comment

ravi-kumar-pilla left a comment

astrojuanlu left a comment

SajidAlamQB left a comment

		@@ -9,6 +9,8 @@ Please follow the established format:

		## Major features and improvements

		- Enable Kedro-Viz in VSCode to list pipelines using the filter icon. (#2269)

Add filtering of pipelines on Kedro-Viz flowchart in VSCode #2269

Add filtering of pipelines on Kedro-Viz flowchart in VSCode #2269

Conversation

jitu5 commented Feb 7, 2025 • edited Loading

Description

Development notes

QA notes

GIF

Checklist

astrojuanlu commented Feb 20, 2025

jitu5 commented Feb 20, 2025

astrojuanlu commented Feb 20, 2025

github-actions bot Feb 25, 2025

Choose a reason for hiding this comment

github-actions bot Feb 25, 2025

Choose a reason for hiding this comment

github-actions bot Feb 25, 2025

Choose a reason for hiding this comment

ravi-kumar-pilla commented Feb 27, 2025

rashidakanchwala commented Feb 28, 2025

rashidakanchwala left a comment

Choose a reason for hiding this comment

ravi-kumar-pilla left a comment

Choose a reason for hiding this comment

astrojuanlu left a comment

Choose a reason for hiding this comment

SajidAlamQB left a comment

Choose a reason for hiding this comment

jitu5 commented Feb 7, 2025 •

edited

Loading