Skip to content

Commit 36421bb

Browse files
authored
Documentation: Autoreload & toggle theme for Kedro-Viz (#5156)
* Documentation: Autoreload & toggle theme for Kedro-Viz * Lint fixes * Content update and gif added * Style fix * Style fixes
1 parent 5298486 commit 36421bb

File tree

3 files changed

+22
-2
lines changed

3 files changed

+22
-2
lines changed

docs/ide/set_up_vscode.md

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,14 +207,34 @@ This will launch Kedro-Viz and display your pipeline visually within the extensi
207207
!!! note
208208
To update the Kedro-Viz flowchart after making any changes to your Kedro project, please hit `Cmd` + `Shift` + `P` to open the VSCode command and look for `kedro: restart server`.
209209

210-
Navigate to Node Functions:
210+
- **Navigate to Node Functions**:
211211
Click on a node in the Kedro-Viz flowchart, and it will automatically navigate to the corresponding node function in your code.
212+
212213
![navigation to node function](../meta/images/viz-vsc-nav-function-node.gif)
213214

214-
Navigate to DataCatalog:
215+
- **Navigate to DataCatalog**:
215216
Clicking on a data node in the flowchart will open the corresponding dataset in the Data Catalog.
217+
216218
![navigation to dataset](../meta/images/viz-vsc-nav-data-node.gif)
217219

220+
- **Auto reload**: The extension can automatically refresh Kedro-Viz when you make changes to configuration files, pipeline files, or catalog files. To enable:
221+
222+
1. Open Settings: `Cmd` + `,` (macOS) or `Ctrl` + `,` (Windows/Linux)
223+
2. Search for "Kedro Auto Reload"
224+
3. Check the box for `Kedro: Auto Reload Kedro Viz`
225+
226+
![Autoreload kedro viz](../meta/images/vscode_autoreload_viz.gif)
227+
228+
!!! note
229+
Since auto reload restarts the LSP server, the current state in Kedro-Viz (like expanded pipelines or zoom level) will be reset.
230+
231+
- **Theme toggle**: Switch between light and dark themes for Kedro-Viz. To toggle:
232+
233+
1. Open Command Palette: `Cmd` + `Shift` + `P` (macOS) or `Ctrl` + `Shift` + `P` (Windows/Linux)
234+
2. Type `Kedro: Toggle Kedro Viz Theme` and select it
235+
236+
![Toggle kedro-viz theme](../meta/images/vscode_toggle_viz_theme.gif)
237+
218238
## Debugging
219239

220240
To debug, you _may_ need to create an `.env` file in your project root. Add the full path to the `./src/` folder to the *PYTHONPATH* environment variable in the `.env` file:
546 KB
Loading
401 KB
Loading

0 commit comments

Comments
 (0)