Kedro-Viz VS Extension Spike

[rashidakanchwala]

Description

Do a technical feasibility spike to determine how Kedro-viz can be embedded into VSCode as an extension.

Tasks to Investigate:

1. Embedding: Determine whether to embed Kedro-viz as a React component or run it as a Live Preview using the Live Server extension or following this guy's example here

2. Communication Mechanism: Explore how to enable communication between the code and Kedro-viz. For example:

   • Clicking on a dataset in catalog.yml should highlight the dataset in the Kedro-viz flowchart.
   • Clicking on a node in Kedro-viz should navigate to the corresponding node function in the code.

3. Run Button: Add a 'run' button in Kedro-viz next to the 'Run Command'. This button should copy/paste the 'run command' to the terminal and execute it.

Context

Why is this change important to you? How would you use it? How can it benefit other users?

Possible Implementation

(Optional) Suggest an idea for implementing the addition or change.

Possible Alternatives

(Optional) Describe any alternative solutions or features you've considered.

Checklist

• [ ] Include labels so that we can categorise your feature request

[jitu5]

@astrojuanlu @rashidakanchwala

After reviewing the Live Server extension and this Loom video, it seems these tools are primarily helpful for displaying web pages with URLs inside VSCode using its internal simple browser or the Live Server extension. However, they do not provide the required functionality for communication between the VSCode extension(Kedro) and the web app(Kedro-Viz).

To achieve the desired communication mechanism, VSCode offers the WebView API, which appears to be a promising solution. Here are some relevant resources:

• WebViews
• WebView API

I will continue to explore how the VSCode WebView API can be utilized to meet our use case effectively.

[astrojuanlu]

Good find. That's what https://github.com/iterative/vscode-dvc seems to be using too

[noklam]

@jitu5 did an impressive demo today to show the possibility to trigger "Go to definition" from the webview using the Webview API and kedro viz as a component. We discussed a few things as next steps:

• How to sync data (right now it's a hardcoded json)
  • backend server (kedro viz Python) that send data to a specific endpoint. This may requires decouple existing kedro viz logic a little bit.
  • pro: The logic is implemented mostly already, we just need to extract the bit we need.
• communication of the extension, the key is figure out how to send request to LSP server just like the VScode client did.
  • Originally I think it's best to separate this as a separate extension, but there are benefit of keeping it in one place. The flow works roughly as follow:
    1. User click on the webview
    2. webview API trigger some function and send a request to LSP server (probably need to use the native vscode api)
    3. LSP server would send a response to VScode client, the go-to definition action should be triggered automatically (not tested)

[jitu5]

Hi,

This is the branch under the vscode-kedro repo, vizwebview, which has my latest changes.

If you wanted to play around this please follow below steps.

1. Please follow development guideline from https://github.com/kedro-org/vscode-kedro/blob/vizwebview/DEVELOPMENT.md

2. npm run install:webview

3. npm run build:webview

4. You can start debug with F5, this should lauch an "Extension Development Host".

5. In Extension Development Host, Open shift + Cmd + P and enter 'Kedro: Run Kedro Viz' and hit enter.

6. This will open Kedro Viz inside VSCode.

7. To demo Extension to webview/UI communication, Open shift + Cmd + P and enter 'Kedro: Update Theme' and hit enter.

8. To demo webview/UI to Extension communication, Click on "Goto: 'prm_spine_table'" button, this will send hardcoded text "prm_spine_table" to Extension and Extension will open file containing "prm_spine_table" text.

[noklam]

I have two ideas when I am exploring how the Webview API can communicate with LSP

1. First idea - using the language client directly.
2. Create a VSCode command (i.e. Go to definition command for example)

The command itself can be used separately, i.e. taking an argument for Go to Definition. (almost like a quick search feature but specifcially for Kedro). The other way of using this command is through the React component.

1. Click on React component.
2. Onclick -> Trigger a callback -> Call the VSCode command with argument (the react component should have the name of dataset etc)

I have tested it's possible to invoke LSP function from a VSCode command, I haven't test if it can successfully make the editor respond to it, will need a proper ticket to work on this in sprint.

[noklam]

Opened an isuse here https://github.com/kedro-org/vscode-kedro/issues/56

[noklam]

Closing as the spike was finished, we have proper plan of tasks/release here: https://github.com/kedro-org/vscode-kedro/issues/58