Add filtering of pipelines on Kedro-Viz flowchart in VSCode

package.json

@@ -178,6 +178,11 @@
                 "command": "kedro.kedroProjectPath",
                 "title": "Set Project Path", 
                 "category": "kedro"
+            },
+            {
+                "command": "kedro.filterPipelines",
+                "title": "Filter Pipelines",
+                "category": "kedro"
             }
         ]
     },

src/common/activationHelper.ts

@@ -5,6 +5,7 @@ import {
     executeServerCommand,
     executeServerDefinitionCommand,
     setKedroProjectPath,
+    filterPipelines
 } from './commands';
 
 import * as vscode from 'vscode';
@@ -89,6 +90,7 @@ export const registerCommandsAndEvents = (
     const CMD_DEFINITION_REQUEST = `${serverId}.sendDefinitionRequest`;
     const CMD_SHOW_OUTPUT_CHANNEL = `${serverId}.showOutputChannel`;
     const CMD_SET_PROJECT_PATH = `${serverId}.kedroProjectPath`;
+    const CMD_FILTER_PIPELINES = `${serverId}.filterPipelines`;
 
     (async () => {
         // Status Bar
@@ -162,6 +164,10 @@ export const registerCommandsAndEvents = (
             registerCommand(CMD_SET_PROJECT_PATH, () => {
                 setKedroProjectPath();
             }),
+            registerCommand(CMD_FILTER_PIPELINES, async () => {
+                const lsClient = getLSClient();
+                await filterPipelines(lsClient);
+            }),
         );
     })();
 };

src/common/commands.ts

@@ -166,7 +166,7 @@ export async function executeGetProjectDataCommand(lsClient: LanguageClient | un
         return;
     }
     if (!lsClient.initializeResult) {
-        await vscode.window.showErrorMessage('The Language Server fail to initialise.');
+        await vscode.window.showErrorMessage('The Language Server failed to initialize.');
         return;
     }
 
@@ -175,3 +175,43 @@ export async function executeGetProjectDataCommand(lsClient: LanguageClient | un
     const result = await vscode.commands.executeCommand(commandName);
     return result;
 }
+
+export async function filterPipelines(lsClient?: LanguageClient) {
+    try {
+        const projectData: any = await executeGetProjectDataCommand(lsClient);
+        console.log('Full projectData:', projectData);
+        const pipelineArray = projectData?.pipelines;
+        if (!pipelineArray || !Array.isArray(pipelineArray) || !pipelineArray.length) {
+            vscode.window.showInformationMessage('No pipelines found in this Kedro project.');
+            return;
+        }
+
+        const pipelineItems = pipelineArray.map((p: any) => {
+            return {
+                label: p.id,
+                description: p.name,
+            };
+        });
+
+        const picked = await vscode.window.showQuickPick(pipelineItems, {
+            placeHolder: 'Select a pipeline to filter...',
+        });
+        if (!picked) {
+            // user canceled the pick
+            return;
+        }
+
+        // Update the selected_pipeline property
+        projectData.selected_pipeline = picked.label;
+
+        // Send the updated projectData to the webview
+        vscode.commands.executeCommand('kedro.sendMessage', {
+            command: 'updateData',
+            data: projectData,
+        });
+    } catch (err) {
+        vscode.window.showErrorMessage(
+            `Error filtering pipelines: ${err instanceof Error ? err.message : String(err)}`,
+        );
+    }
+}

src/extension.ts

@@ -16,6 +16,8 @@ import {
 } from './common/utilities';
 
 import { runServer, registerCommandsAndEvents } from './common/activationHelper';
+import { filterPipelines } from './common/commands';
+import KedroVizPanel from './webview/vizWebView';
 
 let lsClient: LanguageClient | undefined;
 let isCommandsAndEventsRegistered = false;
@@ -91,6 +93,12 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
         isCommandsAndEventsRegistered = true;
     }
 
+    context.subscriptions.push(
+        vscode.commands.registerCommand('kedro.sendMessage', (message) => {
+            KedroVizPanel.sendMessage(message);
+        }),
+    );
+
     setImmediate(async () => {
         const interpreter = getInterpreterFromSetting(serverId);
         if (interpreter === undefined || interpreter.length === 0) {

src/webview/vizWebView.ts

@@ -37,6 +37,12 @@ export default class KedroVizPanel {
         KedroVizPanel.currentPanel = new KedroVizPanel(panel, extensionUri);
     }
 
+    public static sendMessage(message: any) {
+        if (KedroVizPanel.currentPanel) {
+            KedroVizPanel.currentPanel._panel.webview.postMessage(message);
+        }
+    }
+
     public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
         KedroVizPanel.currentPanel = new KedroVizPanel(panel, extensionUri);
     }
@@ -77,6 +83,9 @@ export default class KedroVizPanel {
                     case 'showOutput':
                         await vscode.commands.executeCommand('kedro.showOutputChannel');
                         return;
+                    case 'showPipelineFilter':
+                        await vscode.commands.executeCommand('kedro.filterPipelines');
+                        return;
                 }
             },
             null,

webview/src/App.jsx

@@ -13,6 +13,7 @@ function App() {
     layerBtn: true,
     expandPipelinesBtn: false,
     exportBtn: false,
+    filterBtn: true,
   };
 
   useEffect(() => {
@@ -38,7 +39,6 @@ function App() {
     return () => {
       window.removeEventListener("message", () => {console.log("removed")});
     };
-
   }, []);
 
   const handleNodeClick = (node) => {
@@ -53,6 +53,12 @@ function App() {
     }
   };
 
+  const handlePipelineFilterClick = () => {
+    vscodeApi.postMessage({
+      command: "showPipelineFilter",
+    });
+  };
+
   const handleOutputClick = () => {
       vscodeApi.postMessage({
         command: "showOutput",
@@ -85,6 +91,9 @@ function App() {
       switch (action.type) {
         case "TOGGLE_NODE_CLICKED":
           handleNodeClick(action.payload);
+          break;          
+        case "SHOW_PIPELINE_FILTER":
+          handlePipelineFilterClick();
           break;
         default:
           break;