(WIP) copy over quantum-viz.js source code

.prettierignore

@@ -9,6 +9,8 @@ __pycache__/
 .vscode-test-web/
 .venv/
 /allocator/
+/circuit_vis/lib/
+/circuit_vis/dist/
 /compiler/
 /jupyterlab/lib/
 /jupyterlab/qsharp-jupyterlab/labextension/

build.py

@@ -117,6 +117,7 @@
 wasm_bld = os.path.join(root_dir, "target", "wasm32", build_type)
 samples_src = os.path.join(root_dir, "samples")
 npm_src = os.path.join(root_dir, "npm", "qsharp")
+circuit_vis_src = os.path.join(root_dir, "circuit_vis")
 play_src = os.path.join(root_dir, "playground")
 pip_src = os.path.join(root_dir, "pip")
 widgets_src = os.path.join(root_dir, "widgets")
@@ -357,23 +358,6 @@ def run_ci_historic_benchmark():
         step_end()
 
 
-if build_widgets:
-    step_start("Building the Python widgets")
-
-    widgets_build_args = [
-        sys.executable,
-        "-m",
-        "pip",
-        "wheel",
-        "--no-deps",
-        "--wheel-dir",
-        wheels_dir,
-        widgets_src,
-    ]
-    subprocess.run(widgets_build_args, check=True, text=True, cwd=widgets_src)
-
-    step_end()
-
 if build_wasm:
     step_start("Building the wasm crate")
     # wasm-pack can't build for web and node in the same build, so need to run twice.
@@ -394,6 +378,21 @@ def run_ci_historic_benchmark():
     )
     step_end()
 
+if build_npm:
+    step_start("Building the circuit_vis package")
+
+    npm_args = [npm_cmd, "install"]
+    subprocess.run(npm_args, check=True, text=True, cwd=circuit_vis_src)
+
+    npm_args = [npm_cmd, "run", "build:prod"]
+    subprocess.run(npm_args, check=True, text=True, cwd=circuit_vis_src)
+    step_end()
+
+    if run_tests:
+        step_start("Running the circuit_vis tests")
+        subprocess.run([npm_cmd, "test"], check=True, text=True, cwd=circuit_vis_src)
+        step_end()
+
 if build_npm:
     step_start("Building the npm package")
     # Copy the wasm build files over for web and node targets
@@ -422,6 +421,23 @@ def run_ci_historic_benchmark():
         subprocess.run(npm_test_args, check=True, text=True, cwd=npm_src)
     step_end()
 
+if build_widgets:
+    step_start("Building the Python widgets")
+
+    widgets_build_args = [
+        sys.executable,
+        "-m",
+        "pip",
+        "wheel",
+        "--no-deps",
+        "--wheel-dir",
+        wheels_dir,
+        widgets_src,
+    ]
+    subprocess.run(widgets_build_args, check=True, text=True, cwd=widgets_src)
+
+    step_end()
+
 if build_play:
     step_start("Building the playground")
     play_args = [npm_cmd, "run", "build"]

circuit_vis/.gitignore

@@ -0,0 +1,156 @@
+## Ignore Node.js temporary files, build results, and
+## files generated by popular Node.js add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env.test
+.*[v]env/
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+
+## Project-specific files ##
+
+# NPM's package-lock.json
+package-lock.json
+
+# VSCode configuration
+.vscode
+
+# IntelliJ
+.idea
+
+# macOS metadata folder
+.DS_Store
+
+# Compiled files
+lib
+.tgz
+
+# Python
+.mypy_cache/
+*/.coverage
+*/.coverage.*
+*/.nox/
+*/.python-version
+*/.pytype/
+/dist/
+*/docs/_build/
+/src/*.egg-info/
+__pycache__/
+*/.cookiecutter.json
+*-checkpoint.ipynb
+*/*.xml
+*.xml

circuit_vis/.prettierrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  semi: true,
+  trailingComma: "all",
+  singleQuote: true,
+  endOfLine: "lf",
+  printWidth: 120,
+  tabWidth: 4,
+  parser: "typescript",
+  overrides: [
+    {
+      files: ["*.md", "*.json", "*.yml", "*.yaml"],
+      options: {
+        tabWidth: 2,
+      },
+    },
+  ],
+};

circuit_vis/README.md

@@ -0,0 +1,107 @@
+# quantum-viz.js
+
+[![Licensed under the MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.txt)
+[![PR's Welcome](https://img.shields.io/badge/PRs%20-welcome-brightgreen.svg)](CONTRIBUTING.md)
+[![Build Status](https://github.com/microsoft/quantum-viz.js/actions/workflows/main.yml/badge.svg)](https://github.com/microsoft/quantum-viz.js/actions)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Fquantum-viz.js.svg)](https://www.npmjs.com/package/@microsoft/quantum-viz.js)
+
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/19257435/120700950-4ce70a80-c480-11eb-9f8b-0d5f2be18b37.png" alt="screenshot of circuit generated by quantum-viz" width="80%"/>
+</p>
+
+**quantum-viz.js** (or **qviz**) is a configurable tool for rendering quantum circuits. With the increasing demand for quantum libraries and educational tools, quantum circuits provide an intuitive way to visualize and understand quantum algorithms. quantum-viz.js is a lightweight library that can be easily integrated into any project. It aims to be easily configurable while allowing complex user interactions, such as toggling between different measurement outcomes.
+
+## Getting Started
+
+### Installation
+
+Include `quantum-viz.js` in your HTML page by using it directly from CDN:
+
+```html
+<script src="https://unpkg.com/@microsoft/quantum-viz.js"></script>
+```
+
+or import it in into your TypeScript package:
+
+```bash
+npm i @microsoft/quantum-viz.js
+```
+
+### Usage
+
+1. Create a `Circuit` JavaScript object (the `Circuit` schema is documented [here](https://github.com/microsoft/quantum-viz.js/wiki/API-schema-reference)):
+
+```js
+const sampleCircuit = {
+  qubits: [
+    // ...
+  ],
+  operations: [
+    // ...
+  ],
+};
+```
+
+2. Draw it in a `div`:
+
+```js
+const sampleDiv = document.getElementById("sample");
+qviz.draw(sampleCircuit, sampleDiv, qviz.STYLES["Default"]);
+```
+
+Refer to the [`example`](./example) folder for an example on how to use quantum-viz.js. Notice that in order to open the contents of this folder in a browser you will need first to install from source (see [below](#running-from-source)).
+
+## Python usage
+
+To use this package with Python, use [quantum-viz](/quantum-viz).
+
+## Running from source
+
+### Installing
+
+To build and install this project from source, run the following commands from the root folder of this repository:
+
+```bash
+# Install dependencies
+> npm install
+# Build
+> npm run build:prod
+```
+
+### Running tests
+
+To run tests for this project, run the following commands:
+
+```bash
+# Installs dependencies (run this step if you haven't)
+> npm install
+# Starts Jest tests
+> npm run test
+```
+
+## Contributing
+
+Check out our [contributing guidelines](CONTRIBUTING.md) to find out how you can contribute to quantum-viz.js!
+
+## Feedback
+
+If you have feedback about this library, please let us know by filing a [new issue](https://github.com/microsoft/quantum-viz.js/issues/new/choose)!
+
+## Reporting Security Issues
+
+Security issues and bugs should be reported privately, via email, to the Microsoft Security
+Response Center (MSRC) at [[email protected]](mailto:[email protected]). You should
+receive a response within 24 hours. If for some reason you do not, please follow up via
+email to ensure we received your original message. Further information, including the
+[MSRC PGP](https://technet.microsoft.com/en-us/security/dn606155) key, can be found in
+the [Security TechCenter](https://technet.microsoft.com/en-us/security/default).
+
+## Trademarks
+
+This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
+
+## Code of Conduct
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [[email protected]](mailto:[email protected]) with any additional questions or comments.