redraw circuit when data-json is changed (#207)

qniapp · Apr 13, 2022 · 3f1f1fd · 3f1f1fd
1 parent 9f5feb6
commit 3f1f1fd
Show file tree

Hide file tree

Showing 6 changed files with 560 additions and 506 deletions.
diff --git a/apps/tutorial/application.js b/apps/tutorial/application.js
diff --git a/apps/tutorial/application.js.map b/apps/tutorial/application.js.map
diff --git a/docs/application.js b/docs/application.js
diff --git a/docs/application.js.map b/docs/application.js.map
diff --git a/packages/elements/src/quantum-circuit-element.ts b/packages/elements/src/quantum-circuit-element.ts
@@ -144,7 +144,7 @@ export class QuantumCircuitElement extends HTMLElement {
     return index
   }
 
-  private get steps(): CircuitStepElement[] {
+  get steps(): CircuitStepElement[] {
     return Array.from<CircuitStepElement>(this.querySelectorAll('circuit-step'))
   }
 
@@ -269,7 +269,11 @@ export class QuantumCircuitElement extends HTMLElement {
     this.attachShadow({mode: 'open'})
     this.update()
 
-    this.loadFromJson()
+    if (this.hasAttribute('data-update-url')) {
+      const json = this.urlJson
+      this.loadFromJson(json)
+    }
+
     this.appendMinimumSteps()
     this.appendMinimumWires()
     this.updateAllWires()
@@ -298,7 +302,7 @@ export class QuantumCircuitElement extends HTMLElement {
     }
 
     if (name === 'data-json' && newValue !== '') {
-      this.loadFromJson()
+      this.loadFromJson(newValue)
     }
   }
 
@@ -899,17 +903,12 @@ export class QuantumCircuitElement extends HTMLElement {
     }
   }
 
-  private loadFromJson(): void {
-    let json
-    let circuitBlock = null
+  private loadFromJson(json: string): void {
+    this.innerHTML = ''
 
-    if (this.hasAttribute('data-update-url')) {
-      json = this.urlJson
-    } else {
-      json = this.json
-    }
+    let circuitBlock = null
 
-    if (json === '' || json === 'new') {
+    if (json === '') {
       if (this.hasAttribute('data-update-url')) {
         this.resize()
       }

diff --git a/packages/elements/test/quantum-circuit-element.js b/packages/elements/test/quantum-circuit-element.js
@@ -8,18 +8,63 @@ describe('quantum-circuit element', function () {
   })
 
   describe('quantum-circuit data-json attribute', function () {
+    let circuit
+
+    // -|0>-H-•-M-
+    //        |
+    // -|0>---X-M-
+    const entanglementCircuitJson = '{"cols":[["{entangle"],["|0>","|0>"],["H"],["•","X"],["}"],["Measure","Measure"]]}'
+
+    // -H-
+    // -H-
+    // -H-
+    const superpositionCircuitJson = '{"cols":[["H", "H", "H"]]}'
+
+    beforeEach(function () {
+      circuit = new window.QuantumCircuitElement()
+      document.body.append(circuit)
+    })
+
     afterEach(function () {
       document.body.textContent = ''
     })
 
     it('renders a quantum circuit', function () {
-      const circuit = new window.QuantumCircuitElement()
-      document.body.append(circuit)
+      circuit.json = entanglementCircuitJson
+
+      assert.equal(circuit.steps.length, 4)
+
+      assert.equal(circuit.stepAt(0).dropzoneAt(0).operationName, 'write-gate')
+      assert.equal(circuit.stepAt(0).dropzoneAt(0).operation.value, '0')
+      assert.equal(circuit.stepAt(0).dropzoneAt(1).operationName, 'write-gate')
+      assert.equal(circuit.stepAt(0).dropzoneAt(1).operation.value, '0')
+
+      assert.equal(circuit.stepAt(1).dropzoneAt(0).operationName, 'h-gate')
+      assert.equal(circuit.stepAt(1).dropzoneAt(1).operation, null)
+
+      assert.equal(circuit.stepAt(2).dropzoneAt(0).operationName, 'control-gate')
+      assert.equal(circuit.stepAt(2).dropzoneAt(1).operationName, 'x-gate')
+
+      assert.equal(circuit.stepAt(3).dropzoneAt(0).operationName, 'measurement-gate')
+      assert.equal(circuit.stepAt(3).dropzoneAt(1).operationName, 'measurement-gate')
+    })
+
+    it('redraws the circuit when given a different json', function () {
+      circuit.json = entanglementCircuitJson
+      circuit.json = superpositionCircuitJson
+
+      assert.equal(circuit.steps.length, 1)
+
+      assert.equal(circuit.stepAt(0).dropzoneAt(0).operationName, 'h-gate')
+      assert.equal(circuit.stepAt(0).dropzoneAt(1).operationName, 'h-gate')
+      assert.equal(circuit.stepAt(0).dropzoneAt(2).operationName, 'h-gate')
+    })
+
+    it('does not change the circuit when given the same json', function () {
+      circuit.json = entanglementCircuitJson
+      circuit.json = entanglementCircuitJson
 
-      // -|0>-H-•-M-
-      //        |
-      // -|0>---X-M-
-      circuit.json = '{"cols":[["{entangle"],["|0>","|0>"],["H"],["•","X"],["}"],["Measure","Measure"]]}'
+      assert.equal(circuit.steps.length, 4)
 
       assert.equal(circuit.stepAt(0).dropzoneAt(0).operationName, 'write-gate')
       assert.equal(circuit.stepAt(0).dropzoneAt(0).operation.value, '0')