quantumlib · balopat · Aug 11, 2021 · May 11, 2021 · May 11, 2021 · May 12, 2021
diff --git a/cirq-web/example.ipynb → cirq-web/bloch_sphere_example.ipynb b/cirq-web/example.ipynb → cirq-web/bloch_sphere_example.ipynb
@@ -33,28 +33,7 @@
    "id": "fbf7b67d",
    "metadata": {},
    "source": [
-    "### Cirq-web visualization"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "e4bf9c7d",
-   "metadata": {},
-   "source": [
-    "<table class=\"tfo-notebook-buttons\" align=\"left\">\n",
-    "  <td>\n",
-    "    <a target=\"_blank\" href=\"https://quantumai.google/cirq/circuits\"><img src=\"https://quantumai.google/site-assets/images/buttons/quantumai_logo_1x.png\" />View on QuantumAI</a>\n",
-    "  </td>\n",
-    "  <td>\n",
-    "    <a target=\"_blank\" href=\"https://colab.research.google.com/github/quantumlib/Cirq/blob/master/docs/circuits.ipynb\"><img src=\"https://quantumai.google/site-assets/images/buttons/colab_logo_1x.png\" />Run in Google Colab</a>\n",
-    "  </td>\n",
-    "  <td>\n",
-    "    <a target=\"_blank\" href=\"https://github.com/quantumlib/Cirq/blob/master/docs/circuits.ipynb\"><img src=\"https://quantumai.google/site-assets/images/buttons/github_logo_1x.png\" />View source on GitHub</a>\n",
-    "  </td>\n",
-    "  <td>\n",
-    "    <a href=\"https://storage.googleapis.com/tensorflow_docs/Cirq/docs/circuits.ipynb\"><img src=\"https://quantumai.google/site-assets/images/buttons/download_icon_1x.png\" />Download notebook</a>\n",
-    "  </td>\n",
-    "</table>"
+    "### Cirq-web Bloch sphere visualization"
    ]
   },
   {

diff --git a/cirq-web/circuit_example.ipynb b/cirq-web/circuit_example.ipynb
diff --git a/cirq-web/cirq_ts/README.md b/cirq-web/cirq_ts/README.md
@@ -105,6 +105,6 @@ We take the following steps for visualization testing in our development environ
   3. We take a screenshot of the HTML output in the "browser" (Using Puppeteer)
   4. We compare the result of the screenshot with a pre-generated PNG file.
 
-  The screenshot of the HTML browser output must live in a temporary directory; we use the [temp](https://github.com/bruce/node-temp) package to handle that for us. Reference the test at `e2e/bloch_sphere/test_bloch_sphere.ts` to see how to easily generate the screenshot in a temporary directory.
+  The screenshot of the HTML browser output must live in a temporary directory; we use the [temp](https://github.com/bruce/node-temp) package to handle that for us. Reference the test at `e2e/bloch_sphere/bloch_sphere_e2e_test.ts` to see how to easily generate the screenshot in a temporary directory.
 
   The pre-generated PNG file is a screenshot of the developer's choice that represents what the visualization should look like. Each visualization is required to have at least one expected PNG screenshot. For more complex visualizations, multiple screenshots may be needed.
diff --git a/cirq-web/cirq_ts/dist/circuit.bundle.js b/cirq-web/cirq_ts/dist/circuit.bundle.js
diff --git a/cirq-web/cirq_ts/dist/circuit.bundle.js.LICENSE.txt b/cirq-web/cirq_ts/dist/circuit.bundle.js.LICENSE.txt
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2010-2021 Three.js Authors
+ * SPDX-License-Identifier: MIT
+ */
diff --git a/cirq-web/cirq_ts/dist/html/bloch_sphere.html b/cirq-web/cirq_ts/dist/html/bloch_sphere.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>Cirq Web Development page</title>
+</head>
+<body>
+  <div id="container"></div>
+  <script src="/bloch_sphere.bundle.js"></script>
+  <script>
+    renderBlochSphere('container', 5)
+      .addVector(1, 0, 0);
+  </script>
+</body>
+</html>
diff --git a/cirq-web/cirq_ts/dist/html/circuit.html b/cirq-web/cirq_ts/dist/html/circuit.html
@@ -0,0 +1,39 @@
+<html lang="en">
+<head>
+  <title>Cirq Web Development Page -- 3D circuits</title>
+</head>
+<body>
+  <button id="camera-reset">Reset Camera</button>
+  <button id="camera-toggle">Toggle Camera Type</button>
+  <div id="mycircuitdiv"></div>
+  <script src="/circuit.bundle.js"></script>
+  <script>
+    const circuit = createGridCircuit(
+      [
+        {row: 0, col: 0}, 
+        {row: 0, col: 1}, 
+        {row: 1, col: 0},
+        {row: 2, col: 3},
+        {row: 3, col: 2},
+        {row: 3, col: 0},
+      ], 5, 'mycircuitdiv');
+    circuit.circuit.addSymbolsFromList(
+      [
+      {'wire_symbols': ['Z'], 'location_info': [{'row': 2, 'col': 3}], 'color_info': ['cyan'], 'moment': 0},
+      {'wire_symbols': ['X'], 'location_info': [{'row': 2, 'col': 3}], 'color_info': ['black'], 'moment': 1},
+      {'wire_symbols': ['@', 'X'], 'location_info': [{'row': 3, 'col': 0}, {'row': 0, 'col': 0}], 'color_info': ['black', 'black'], 'moment': 0},
+      ]
+      );
+
+    // Event listener for reset press
+    document.getElementById("camera-reset").addEventListener('click', ()  => {
+      circuit.scene.setCameraAndControls(circuit.circuit);
+    });
+
+    // Event listener for camera change
+    document.getElementById("camera-toggle").addEventListener('click', ()  => {
+      circuit.scene.toggleCamera(circuit.circuit);
+    });
+  </script>
+</body>
+</html>
diff --git a/cirq-web/cirq_ts/dist/index.html b/cirq-web/cirq_ts/dist/index.html
@@ -4,11 +4,11 @@
   <title>Cirq Web Development page</title>
 </head>
 <body>
-  <div id="container"></div>
-  <script src="/bloch_sphere.bundle.js"></script>
-  <script>
-    renderBlochSphere('container', 5)
-      .addVector(1, 0, 0);
-  </script>
+  <div id="bloch-sphere">
+  <a href="/html/bloch_sphere.html">Bloch sphere dev environment</a>
+  </div>
+  <div id="circuit">
+  <a href="/html/circuit.html">Circuit dev environment</a>
+  </div>
 </body>
 </html>
diff --git a/cirq-web/cirq_ts/e2e/circuit/circuit_e2e_test.ts b/cirq-web/cirq_ts/e2e/circuit/circuit_e2e_test.ts
@@ -0,0 +1,119 @@
+// Copyright 2021 The Cirq Developers
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import puppeteer from 'puppeteer';
+import {expect} from 'chai';
+import {readFileSync} from 'fs';
+import pixelmatch from 'pixelmatch';
+import * as PNG from 'pngjs';
+import * as temp from 'temp';
+import * as path from 'path';
+
+/**
+ * Generates an HTML script with the current repository bundle
+ * that we will use to compare.
+ */
+
+// Due to the path, reading the file will only work by running this file in the same directory
+// as the package.json file.
+const bundleString = readFileSync('dist/circuit.bundle.js');
+function htmlContent(clientCode: string) {
+  return `
+    <!doctype html>
+    <meta charset="UTF-8">
+    <html lang="en">
+      <head>
+      <title>Cirq Web Development page</title>
+      </head>
+      <body>
+      <div id="mycircuitdiv"></div>
+      <script>${bundleString}</script>
+      <script>${clientCode}</script>
+      </body>
+    </html>
+    `;
+}
+
+// Automatically track and cleanup files on exit
+temp.track();
+
+describe('Circuit', () => {
+  temp.mkdir('tmp', (err, dirPath) => {
+    const outputPath = path.join(dirPath, 'circuit.png');
+
+    before(async () => {
+      const browser = await puppeteer.launch({args: ['--app']});
+      const page = await browser.newPage();
+
+      // Take a screenshot of the first image
+      await page.setContent(
+        htmlContent(`
+      const circuit = createGridCircuit(
+        [
+          {row: 0, col: 0}, 
+          {row: 0, col: 1}, 
+          {row: 1, col: 0},
+          {row: 2, col: 3},
+          {row: 3, col: 2},
+          {row: 3, col: 0},
+        ], 5, 'mycircuitdiv');
+      circuit.circuit.addSymbolsFromList(
+        [
+            {
+                'wire_symbols': ['Z'], 
+                'location_info': [{'row': 2, 'col': 3}], 
+                'color_info': ['cyan'], 
+                'moment': 0
+            },
+            {   
+                'wire_symbols': ['X'], 
+                'location_info': [{'row': 2, 'col': 3}], 
+                'color_info': ['black'], 
+                'moment': 1
+            },
+            {   
+                'wire_symbols': ['@', 'X'], 
+                'location_info': [{'row': 3, 'col': 0}, {'row': 0, 'col': 0}], 
+                'color_info': ['black', 'black'], 
+                'moment': 0
+            },
+        ]
+        );
+      `)
+      );
+      await page.screenshot({path: outputPath});
+      await browser.close();
+    });
+
+    it('with limited gates matches the gold copy', () => {
+      const expected = PNG.PNG.sync.read(
+        readFileSync('e2e/circuit/circuit_expected.png')
+      );
+      const actual = PNG.PNG.sync.read(readFileSync(outputPath));
+      const {width, height} = expected;
+      const diff = new PNG.PNG({width, height});
+
+      const pixels = pixelmatch(
+        expected.data,
+        actual.data,
+        diff.data,
+        width,
+        height,
+        {threshold: 0.1}
+      );
+
+      expect(pixels).to.equal(0);
+    });
+  });
+});
diff --git a/cirq-web/cirq_ts/e2e/circuit/circuit_expected.png b/cirq-web/cirq_ts/e2e/circuit/circuit_expected.png
diff --git a/cirq-web/cirq_ts/src/circuit/components/grid_qubit.ts b/cirq-web/cirq_ts/src/circuit/components/grid_qubit.ts
@@ -0,0 +1,74 @@
+// Copyright 2021 The Cirq Developers
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Group, Vector3} from 'three';
+import {QubitLine, QubitLabel} from './meshes';
+import {Symbol3D} from './types';
+
+/**
+ * Class that represents a GridQubit.
+ * A GridQubit consists of a three.js line, a sprite
+ * with location information, and three.js mesh objects
+ * representing the gates, if applicable.
+ */
+export class GridQubit extends Group {
+  readonly row: number;
+  readonly col: number;
+
+  /**
+   * Class constructor.
+   * @param row The row of the GridQubit
+   * @param col The column of the GridQubit
+   * @param moments The number of moments of the entire circuit. This
+   * determines the length of the three.js line representing the GridQubit
+   */
+  constructor(row: number, col: number, moments: number, padding_factor = 1) {
+    super();
+
+    this.row = row;
+    this.col = col;
+    this.add(this.createLine(moments, padding_factor));
+    this.add(this.addLocationLabel(padding_factor));
+  }
+
+  /**
+   * Adds a designated symbol to the qubit. Location information,
+   * including the moment at which it occurs, is included in the
+   * symbol itself.
+   * @param symbol A Symbol3D object to add to the qubit.
+   */
+  addSymbol(symbol: Symbol3D) {
+    this.add(symbol);
+  }
+
+  private createLine(moments: number, padding_factor: number): QubitLine {
+    const coords = [
+      new Vector3(this.row * padding_factor, 0, this.col * padding_factor),
+      new Vector3(
+        this.row * padding_factor,
+        moments,
+        this.col * padding_factor
+      ),
+    ];
+    return new QubitLine(coords[0], coords[1]);
+  }
+
+  private addLocationLabel(padding_factor: number): QubitLabel {
+    const sprite = new QubitLabel(`(${this.row}, ${this.col})`);
+    sprite.position.copy(
+      new Vector3(this.row * padding_factor, -0.6, this.col * padding_factor)
+    );
+    return sprite;
+  }
+}
diff --git a/cirq-web/cirq_ts/src/circuit/components/grid_qubit_test.ts b/cirq-web/cirq_ts/src/circuit/components/grid_qubit_test.ts
@@ -0,0 +1,60 @@
+// Copyright 2021 The Cirq Developers
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {expect} from 'chai';
+import {Line} from 'three';
+import {GridQubit} from './grid_qubit';
+import {QubitLabel} from './meshes';
+import {Symbol3D, SymbolInformation} from './types';
+
+describe('GridQubit', () => {
+  const DEFAULT_ROW = 0;
+  const DEFAULT_COL = 0;
+  const DEFAULT_MOMENTS = 5;
+  const gridQubit = new GridQubit(DEFAULT_ROW, DEFAULT_COL, DEFAULT_MOMENTS);
+  const children = gridQubit.children;
+
+  it('is a three.js line object with length 5', () => {
+    const line = children.find(child => child.type === 'Line') as Line;
+    line.computeLineDistances();
+    const distancePoints = line.geometry.attributes.lineDistance.array;
+
+    expect(distancePoints[0]).to.equal(0);
+    expect(distancePoints[1]).to.equal(DEFAULT_MOMENTS);
+  });
+
+  it('has a three.js sprite label', () => {
+    const sprite = children.find(
+      child => child.type === 'Sprite'
+    ) as QubitLabel;
+    expect(sprite.text).to.equal(`(${DEFAULT_ROW}, ${DEFAULT_COL})`);
+  });
+
+  it('handles adding a basic Symbol3D object', () => {
+    const symbolInfo: SymbolInformation = {
+      wire_symbols: ['X'],
+      location_info: [{row: 0, col: 0}],
+      color_info: ['black'],
+      moment: 1,
+    };
+
+    const symbol = new Symbol3D(symbolInfo);
+    gridQubit.addSymbol(symbol);
+
+    const symbol3D = children.find(
+      child => child.constructor.name === 'Symbol3D'
+    )!;
+    expect(symbol3D.children[0].constructor.name).to.equal('X3DSymbol');
+  });
+});