Add ability to save the Resource Estimator space-time diagram as a file (png/jpg/svg)

[ivanbasov]

This would not work in VS Code but we can consider Jupyter notebook and other scenarios

[minestarks]

CONTRIBUTORS PLEASE READ

Welcome! Here are some details to get you started.

Detailed issue description

This feature can be implemented either in the VS Code Resource Estimation panel, or in the qsharp-widgets Python widget.

VS Code

1. Go to https://vscode.dev/quantum/playground/
2. Open Dynamics (Resource Estimation).qs from the samples.
3. Click the "Estimate" code lens or run the "Q#: Calculate Resource Estimates" command.
4. Accept the default values in the next few dialogs that come up.
5. The Space-time diagram should show up in the panel on the right hand side.

Jupyter notebooks

The estimation-factoring.ipynb sample notebook in the repo contains an example of a space-time diagram from qsharp-widgets.

The requested feature is a button, a right-click menu item, or some other mechanism that allows you to save or download this image as a file. PNG would be ideal, JPG or SVG could work too.

Getting started

Please take a look through our README to orient yourself in the repo and find instructions on how to build.

For this issue, you'll want to have a working knowledge of JavaScript and HTML. The fix will likely be entirely implemented in TypeScript.

The Resource Estimator space-time diagram is implemented in the below React component: qsharp/npm/qsharp/ux/estimatesOverview.tsx at main · microsoft/qsharp (github.com)

We're happy to accept a fix to either the VS Code version of this panel or the Python widget version.

To build and launch the VS Code extension locally see qsharp/vscode/BUILDING.md

To build the Python widgets, see the qsharp/widgets/readme.md .

Testing

Test your fix manually by building & running the VS Code extension and/or Python widgets as described.

Before you submit a pull request please run python ./build.py to ensure the project builds cleanly. See README for details.

Reviews

Please ensure your code is tested, clean and well refactored before opening a pull request. If you're not sure, feel free to open a draft PR for preliminary feedback.

It would really help if you include a GIF of your feature working in your PR description.

Once you have published your PR, the codeowners will automatically get tagged and we'll review shortly.

If you need clarification on an issue please tag @minestarks with your questions.

[minestarks]

@nirajvenkat I want to assign this issue to you (for unitaryhack). Could you please comment on this issue so GitHub will let me assign to you?

[nirajvenkat]

Sure!

[KallieFerguson]

@nirajvenkat it doesn't look like you registered for the event. Send me an email at kallie@unitary.fund if you want the bounty!