patoka-circuit Svelte Themes

Patoka Circuit

A Svelte component for interactive quantum circuits

Patoka-Circuit

A Svelte library for quantum circuit visualization.

Installation

npm install patoka-circuit

Note: it works within a Svelte environment.

Include a circuit

<script lang="ts">
  import { Circuit } from "patoka-circuit";
  let original_circuit = {
    ...
  };
  let match_data = {
    ...
  };
  let transpiled_circuit_0 = {
    ...
  };
  let transpiled_circuit_1 = {
    ...
  };
  let unit_id = "some_string";
</script>
<!-- have a `unit_id` (some string is good) -->
<!-- Why? This is intended for Jupyter Notebook, without this info, your interactions might be corruped. -->
<div id={"circuit-viewer-" + unit_id}>
  ...
  <!-- original -->
  <Circuit
    circuit_data={original_circuit}
    is_original={true}
    match={match_data}
    id={"original"}
    matched_circuit_id={["transpiled-0", "transpiled-1"]}
    onClick={() => { ... }}
    filter_unused_qubits={true}
    {unit_id}
  >
  </Circuit>
  <!-- transpiled/decomposed -->
  <Circuit
    circuit_data={transpiled_circuit_0}
    is_original={true}
    match={match_data}
    id={"transpiled-0"}
    matched_circuit_id={["original"]}
    onClick={() => { ... }}
    filter_unused_qubits={true}
    {unit_id}
  >
  </Circuit>
  <!-- can be mapped to multiple decomposed circuits -->
  <Circuit
    circuit_data={transpiled_circuit_1}
    is_original={true}
    match={match_data}
    id={"transpiled-1"}
    matched_circuit_id={["original"]}
    onClick={() => { ... }}
    filter_unused_qubits={true}
    {unit_id}
  >
  </Circuit>
  ...
</div>

For examples: go to src/routes/+pages.svelte

Types

circuit_data --> InitialCircuitData

  • layers: (required, Array<InitialLayer>) operations in layers (this is not figured out ahead—please use your circuit library)
  • num_qubits: (required, number) the number of qubits (of the machine for transpiled circuits)
  • num_clbits: (required, number) the number of classical bits
  • qubits: (required, Array<InitialQubit>) qubits (of the machine for transpiled circuits)
  • clbits: (required, Array<InitialClibt>) classical bits
  • global_phase: (optional, number or null) the global phase value (if any)

layer --> InitialLayer

  • num_op: (required, number) the number of the operations in a layer
  • operations: (required, Array<InitialGateOperation>) the operations in a layer

operation --> InitialGateOperation

  • gate: (required, string) the name of the gate (see below for the preset gates, but it also support random custom gates)
  • num_qubits: (required, number) the number of the qubits for this operation
  • num_clbits: (required, number) the number of the classical bits for this operation (e.g., for measurement)
  • params: (required, Array<number>) the parameters for this operation (if none, provide an empty array)
  • qubits: (required, Array<RegisteredQubit>) the qubits for this operation
  • clbits: (required, Array<RegisteredClbit>) the classical bits for this operation

qubit and clbit --> RegisteredQubit and RegisteredClbit

They have the same structure:

  • register: (required) the register of qubits/classical bits,
    • name: (required, string) the name of the register
    • size: (required, number) the total number of the qubits/classical bits in the register
  • index: (required, number) the index of this qubit/classical bit

Notes

if you haven't specified num_qubits, num_clbits, num_op, etc., import validateCircuitData function.

import { validateCircuitData } from "patoka-circuit";

let compiled = validateCircuitData(partial);

Saving the circuit visualization as an image file

import { getSVGimageLink } from "patoka-circuit";
import type { Writable } from "svelte/store";

let loader: Writable = writable(); // for reactivity

// for `id` and `unit_id`, see above
getSVGimageLink(unit_id, id, loader).then((loaded) => {
  ...
}); 

The loader object consists of:

  • id (string): the id of the SVG
  • png (string): the URL for the PNG image (Blob)
  • svg (string): the URL for the SVG image (Blob)

Once you get this information, set it to the href of an <A> object.

For developers

Please Fork and Pull Request.

Top categories

Loading Svelte Themes