Init Manim Notebook walkthrough

[Splines]

Closes #40

Description

We add a new walkthrough to welcome new users to our extension and to accompany them in their first steps.

And as noted in my comment here:

The walkthrough should be self-contained and only feature the highlights, otherwise we just overwhelm users.

I've also created some SVGs in Figma that even feature some clickable areas... Try to find them ;)

Known limitations: Color theme

The Walkthrough best practices link to a Figma plugin called Visual Studio Color Code Mapper. This allows to use vscode internal CSS styles in the SVG such that it adapts to the user theme. I've experimented a lot with it, but the wizard that automatically assigns the correct CSS names doesn't work greatly. I.e. previewing in other color themes reveals that many elements were not mapped correctly and then suddenly a def keyword doesn't have enough contrast in front of the editor background.

So one would have to manually find out all the colors, e.g. color for python functions, parentheses etc. and that is just soo much work to do which I'd rather invest in developing new features or fixing bugs.

[bhoov]

Nice stuff! Some feedback:

1. Check Manim Version button, when clicked, prints the ManimGL version to the terminal and "checks" the checkbox. However, if your terminal is not open, clicking the button does not show you the version. Is there a way to print the version from the terminal in the walkthrough itself?
2. "Start with an example" opens an un-named, un-saved python file. The "preview" command doesn't work right out of the box. I see you have marked the exclamations at the top -- is there no easy way to automate the saving to some tmp directory? No stress if not
3. Let's add some useful shortcuts to the comments in cells. See the example commit for Cmd+' Cmd+e (this may be all we need, the rest can be referenced from a README and as the next step of the walkthrough)

FYI, I'm getting a bug in the 3rd cell "Make it red and fly away". AttributeError: 'dict' object has no attribute 'frame', which could be fixed by instead calling self.frame.animate.set_width(25). I'm guessing this is a breaking change in my manimgl==v1.7.1

Otherwise, this looks awesome! Let's get stuff in that wiki :)

[Splines]

Thanks for your review!

1. However, if your terminal is not open, clicking the button does not show you the version.

For me, even if the terminal is hidden, when clicking on the Check Manim version button it will be opened. Is that not the case for you? In the respective function, I call const terminal = window.createTerminal("Manim Version"); and that opens the terminal for me.

Is there a way to print the version from the terminal in the walkthrough itself?

Not in the walkthrough itself, but we could as an example show a notification with the version. However, I didn't yet implement the version parsing in the background. But apparently, it would be useful to know the Manim version also in other places, so I will implement that in another PR and for now leave the behavior here as is (with terminal opening). Opened #97 for that.

2. "Start with an example" opens an un-named, un-saved python file.

Yes, because I thought it would be a bit weird if Manim would be executed for a file at some temporary location. But this is indeed a good point if users might directly click on the CodeLens without reading the comment beforehand first. I've added a new issue for this #96 and will fix this in another PR.

3. Let's add some useful shortcuts to the comments in cells.

Thanks, good idea!

---

By the way, have you also tested the commands that you can trigger by clicking on respective areas in the SVGs featured in the showcase?

[bhoov]

For me, even if the terminal is hidden, when clicking on the Check Manim version button it will be opened. Is that not the case for you?

Correct, when I click that button the terminal does not open. See the log below -- neither click opened the terminal to show the manim version. See my new commit for fixing that with a simple terminal.show()

Opened #97 for that.
👍

have you also tested the commands that you can trigger by clicking on respective areas in the SVGs featured in the showcase?

Yes it works as expected! Tabs may only be meaningful if there are multiple though 😂

[bhoov]

Interesting thing to note -- I also use Cursor and it looks like Cursor does not support the walkthrough. When running the "Manim Notebook: Open Walkthrough" command I get the error

command 'workbench.action.openWalkthrough' not found

Not important enough to fix, just a note

[bhoov]

Everything works on my end with my VSCode and manimgl versions. I will approve this PR. @Splines when things are working for you, feel free to merge

[Splines]

Everything works on my end with my VSCode and manimgl versions. I will approve this PR

yeah

Yes it works as expected! Tabs may only be meaningful if there are multiple though 😂

😅

Interesting thing to note -- I also use Cursor and it looks like Cursor does not support the walkthrough.

Sorry, but what is Cursor? Is it this editor? If yes, what's its relation to VSCode?

[bhoov]

Sorry, but what is Cursor? Is it this editor? If yes, what's its relation to VSCode?

Cursor is an AI-powered editor that integrates Claude/ChatGPT into your codebase to make it easy for an LLM to help you when writing code. It is a fork of VSCode, and in general gives you the familiar UX of vscode and supports the same extensions as VSCode.

But it seems like they don't support walkthroughs 🤷. NBD, VSCode still has a much larger user base as Cursor is a paid product