Atom visualizer

The Atom movement visualizer is available as a Jupyter Widget or as a web component from the npm package. The below Python code shows an example of using the widget in a Jupyter notebook.

To use in a web context, import the Atoms class from the qsharp-lang/ux npm package and provide the same data structures (but with the parent element to host it in as the first argument).

from qdk.widgets import Atoms

# 'cols' is the total number of columns, which are indexed from 0 to cols-1
# 'skipCols' is a list of column indices that should be skipped (not used for qubit placement)
#  - Note that if using 1-indexed columns, skipCols should contain at least [0] and cols should be incremented by 1
# The value in 'cols' minus the number of skipped columns should be even to ensure pairs of qubits in the interation zones
# 'zones' is a list of zone definitions, each with a title, rowStart, rowEnd, and kind
zone_layout = {
    "cols": 16,
    "skipCols": [0, 7, 8, 15],
    "zones": [
      { "title": "RegisterZone 1", "rowStart": 1, "rowEnd": 8, "kind": "register" },
      { "title": "InteractionZone", "rowStart": 20, "rowEnd": 23, "kind": "interaction" },
      { "title": "MeasurementZone", "rowStart": 60, "rowEnd": 61, "kind": "measurement" },
    ],
}

trace_data = {
    # 'qubits' is a list of qubit starting positions, each defined by [row, col]
    # The qubit ids are 0-indexed based on their order in this list
    # If the `qubits` key is omitted, qubits will be placed automatically to fill the register zones
    "qubits": [[1,1], [1,2], [1,3], [1,4], [1,5], [1,6]],
    "steps": [
      {
        "id": 1,
        "ops": [
          # The move operation syntax is "move(target_row, target_col) qubit_id"
          "move(20, 1) 0",
          "move(20, 2) 1"
        ]
      },
      {
        "id": 2,
        "ops": [
          "rz(1.57079637) 0, 1"
        ]
      },
      {
        "id": 3,
        "ops": [
          "sx 0, 1"
        ]
      },
      {
        "id": 4,
        "ops": [
          "rz(1.57079637) 0, 1"
        ]
      },
      {
        "id": 5,
        "ops": [
          # A 'cz' with no arguments applies a CZ gate between pairs of qubits in the first interaction zone
          # This is an alias for 'zone_cz <zone_index>'
          "cz"
        ]
      },
      {
        "id": 6,
        "ops": [
          "rz(1.57079637) 1"
        ]
      },
      {
        "id": 7,
        "ops": [
          "sx 1"
        ]
      },
      {
        "id": 8,
        "ops": [
          "rz(1.57079637) 1"
        ]
      },
      {
        "id": 9,
        "ops": [
          "move(20, 5) 1",
          "move(20, 1) 0",
          "move(20, 2) 2",
          "move(20, 6) 3"
        ]
      },
      {
        "id": 10,
        "ops": [
          "cz"
        ]
      },
      {
        "id": 11,
        "ops": [
          "move(60, 5) 1",
          "move(60, 1) 0",
          "move(60, 2) 2",
          "move(60, 6) 3"
        ]
      },
      {
        "id": 12,
        "ops": [
          # An 'mresetz' with no arguments applies a MResetZ gate between pairs of qubits in the first measurement zone
          # This is an alias for 'zone_mresetz <zone_index>'
          "mresetz"
        ]
      },
    ],
}

Atoms(zone_layout, trace_data)