Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
ivanbasov opened this issue Jan 23, 2024 · 4 comments · Fixed by #1604
Closed

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

ivanbasov opened this issue Jan 23, 2024 · 4 comments · Fixed by #1604
Assignees
@nirajvenkat
Labels
enhancement New feature or request unitary-hack unitaryHACK 2024 bounty issues

Comments

@ivanbasov
Copy link
Member

This would not work in VS Code but we can consider Jupyter notebook and other scenarios
@ivanbasov ivanbasov added enhancement New feature or request needs triage labels Jan 23, 2024
@minestarks minestarks added unitary-hack unitaryHACK 2024 bounty issues and removed needs triage labels May 22, 2024
@minestarks minestarks changed the title Add "Save As" option for the Space-time diagram to save its rendering as PGN/JPG Add ability to save the Resource Estimator space-time diagram as a file (png/jpg/svg) May 23, 2024
@minestarks
Copy link
Member

minestarks commented May 23, 2024 •
edited
Loading

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.

space-time-diagram

Jupyter notebooks

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

Screenshot 2024-05-23 143027

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.

@nirajvenkat nirajvenkat mentioned this issue Jun 1, 2024
Merged
@minestarks
Copy link
Member

@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
Copy link
Contributor

Sure!

@minestarks minestarks added unitary-hack unitaryHACK 2024 bounty issues and removed unitary-hack unitaryHACK 2024 bounty issues labels Jun 14, 2024
github-merge-queue bot pushed a commit that referenced this issue Jun 14, 2024
@nirajvenkat @minestarks
[Unitary Hack] Save Python qsharp-widgets RE output to PNG (#1604)
7985568 
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.



https://github.com/microsoft/qsharp/assets/3744263/898de6d9-fba4-4fea-b729-a3bb698dc51c



~Current issues:~
- ~This button is placeholder, nicer version:
microsoft/vscode-notebook-renderers#118
- ~Saved imaged is slightly truncated at the bottom~

---------

Co-authored-by: Mine Starks <[email protected]>
@KallieFerguson
Copy link

@nirajvenkat it doesn't look like you registered for the event. Send me an email at [email protected] if you want the bounty!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nirajvenkat nirajvenkat

Labels
enhancement New feature or request unitary-hack unitaryHACK 2024 bounty issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Unitary Hack] Save Python qsharp-widgets RE output to PNG nirajvenkat/qsharp
4 participants
@nirajvenkat @ivanbasov @minestarks @KallieFerguson