[Unitary Hack] Save Python qsharp-widgets RE output to PNG

[nirajvenkat]

Submission for Unitary Hack issue: fixes #1063

This change adds the ability to save the resource estimates diagram locally as a PNG. For this I added a new dependency called html2canvas that takes a DOM and renders it to an image. This currently works only on IPython qsharp-widgets, could be extended to the VSCode version.

Additionally we take into account the color theme within VSCode (which is provided in the stylesheet qsharp-ux.css) and this is passed in as the background color for rendering. Tested on (dark/light) Modern VSCode themes.

uh.mp4

Current issues:

• This button is placeholder, nicer version: added copy image command for png cell output vscode-notebook-renderers#118
• Saved imaged is slightly truncated at the bottom

[nirajvenkat]

@microsoft-github-policy-service agree

[billti]

We are very conservative in this project on taking new dependencies. I see you added one called 'html2canvas'. Looking at that project I can see it has over 900 open issues, hasn't had a commit for 2 years, and the README states

"The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made".

Based on the above, I'm hesitant to take a change which adds this dependency.

[nirajvenkat]

Would it be ok to add a different dependency? This one for example, is more active and has less outstanding issues.

Also the way I have been doing development is to first run the watcher using npm run dev, make some changes, after which I switch to a jupyter notebook (also in VSCode) and must reload the kernel to get the newest version built by the watcher, then re-run the cell. Is there any way to attach a debugger or to view print logs?

[billti]

We use SVG a lot, as well as dynamic DOM nodes (via Preact) for our widgets, so issues such as bubkoo/html-to-image#425, bubkoo/html-to-image#463, and bubkoo/html-to-image#392 could come into play (I've been optimizing some SVG sizes via def/use lately, so likely to be even more of an issue going forward).

Sadly again, the project seems unmaintained. The last release was 18 months ago, and all issues since just have an automated response and no follow up (including this one 🤣 bubkoo/html-to-image#455)

[nirajvenkat]

Also the way I have been doing development is to first run the watcher using npm run dev, make some changes, after which I switch to a jupyter notebook (also in VSCode) and must reload the kernel to get the newest version built by the watcher, then re-run the cell. Is there any way to attach a debugger or to view print logs?

@minestarks @ivanbasov Do you have any pointers on a faster way to work on qsharp-widgets?

[minestarks]

@nirajvenkat quickest dev loop I can think of is:

• In the widgets/ directory, run pip install . This will recompile the widgets.
• In the notebook, restart the kernel.
• Rerun the cell.

You can leave the notebook open as you rebuild - you just have to restart the kernel.

As for debugging the JavaScript, I haven't done this myself so I don't know how well it works, but try the "Developer: Open Webview Developer Tools" command in VS Code. It brings up the Chrome developer tools. Then you can use the familiar Chrome Developer Tools (element inspector etc) and the JavaScript debugger on the widget code.

[nirajvenkat]

@minestarks Thanks, I totally forgot about the browser Dev Tools, looks like it has what I was looking for.

@billti I am working on bringing in the same functionality from the above sources, but just the pieces relevant to this task. So we should not require any external dependencies.

[nirajvenkat]

Fixed prior issues, ready for review.

[minestarks]

Thank you!! This works great functionally but I have some style / UI requests.

[nirajvenkat]

@minestarks Not sure if I can finish up in time for UH submission, so to speed thing up I have proposed commit 6ef794f. This would be saving to PNG, and a simpler API for the UI side that takes in the React RefObject and optionally a filename and does the rest.

[minestarks]

We should be good on the hackathon deadline. This is so close, but it doesn't work in VS Code for me. Probably because VS Code webview doesn't support window.open? Feel free to take a stab at implementing proper VS Code extension support (possibly using showSaveDialog ?) but that may be tricky and not required for this PR.

In the meantime please disable it for VS Code (consider taking this commit to pass an allowSaveImage flag ) .

Once VS Code is good to go and the other comments are resolved I'll merge this. We're OK on the deadline.

[nirajvenkat]

@minestarks I was thinking that based on the below setting, it should have been okay for you to commit directly to this branch. Not sure what the convention is.

In any case this merge was possible on my end. Tested it out by building VSIX package. The button does not show up at all, is this expected?

[minestarks]

@minestarks I was thinking that based on the below setting, it should have been okay for you to commit directly to this branch. Not sure what the convention is.

@nirajvenkat sorry, it just didn't occur to me that I could push to your branch. Glad you were able to pull the changes regardless

[minestarks]

Please consider the useRef suggestion if you can make it work - otherwise looks good. Thanks for the contribution!

[nirajvenkat]

I am investigating an issue with this branch where the UI is flickering when trying to interact with the points on the graph. Specifically the tooltip that appears when you hover over points keeps flickering. I have a hunch on what it may be but will continue to investigate tomorrow.