Dashboard Core — Circuit Builder Component

Graphical (drag-and-drop) circuit builder — the fourth pillar of IBM Quantum Composer's layout (graphical editor + code editor + statevector view + results) reproduced natively for this project's own dashboard.

This is a real Streamlit component (st.components.v2.component) — it only means something rendered inside a running Streamlit app (streamlit run app.py), unlike every other dashboard_core module, which is a plain importable function you can call from a script or a REPL. There is nothing to execute standalone here; the snippet below is the exact call tools/dashboard/app.py makes, reproduced as a minimal streamlit run-able app:

import streamlit as st
import dashboard_core as dc

n_qubits = st.number_input("Qubits", min_value=1, max_value=8, value=3, step=1)
ops = dc.mount_circuit_builder(int(n_qubits), n_columns=12, key=f"circuit_builder_{int(n_qubits)}")

if ops:
    st.write(ops)  # [{'gate': 'h', 'qubits': [0]}, ...] as gates are dropped onto the grid
    tuples = dc.ops_to_native_tuples(int(n_qubits), ops)
    st.code(dc.gate_tuples_to_qasm(tuples, int(n_qubits)))

key must change whenever n_qubits changes (include it in the key, as above), or Streamlit reuses a stale grid sized for a different qubit count.

circuit_builder_component

Graphical (drag-and-drop) circuit builder -- the fourth pillar of IBM Quantum Composer's layout (graphical editor + code editor + Statevector + Probabilities), the one missing piece the rest of dashboard_core didn't have yet.

Built on Streamlit's own native bidirectional component API (st.components.v2.component -- real HTML/CSS/JS running in the browser, not a hand-waved "coming soon" panel). Gates are dragged from a palette onto a qubit x time-step grid using plain HTML5 drag-and-drop; every drop re-serializes the grid into an ops list and pushes it back to Python via setStateValue, so Streamlit always has the real current state of what's on the canvas.

The ops list this emits is consumed by dashboard_core.graphical_builder. ops_to_native_tuples, which builds dense_evolution's own gate tuples (no Qiskit) executed by the exact same dense_evolution engine as typed OpenQASM -- no separate/fake execution path for graphically-built circuits.

mount_circuit_builder

mount_circuit_builder(
    n_qubits: int,
    n_columns: int = 12,
    key: str = "circuit_builder",
)

Mount the drag-and-drop circuit builder and return its current ops list (list[dict] with 'gate'/'qubits'), or [] if nothing is placed yet.

key should change whenever n_qubits changes (e.g. include it in the caller's key) so Streamlit mounts a fresh grid instead of reusing a stale one sized for a different qubit count.

Streamlit is imported here, not at module level: this component only means anything inside a Streamlit app (app_dashboard.py) -- the Composer kernel (local_site/app/server.py) imports dashboard_core too but never calls this function, and shouldn't need streamlit installed just to start.

Source code in tools/dashboard/core/circuit_builder_component.py

def mount_circuit_builder(n_qubits: int, n_columns: int = 12, key: str = "circuit_builder"):
    """Mount the drag-and-drop circuit builder and return its current ops
    list (list[dict] with 'gate'/'qubits'), or [] if nothing is placed yet.

    `key` should change whenever `n_qubits` changes (e.g. include it in the
    caller's key) so Streamlit mounts a fresh grid instead of reusing a
    stale one sized for a different qubit count.

    Streamlit is imported here, not at module level: this component only
    means anything inside a Streamlit app (app_dashboard.py) -- the
    Composer kernel (local_site/app/server.py) imports dashboard_core too
    but never calls this function, and shouldn't need streamlit installed
    just to start.
    """
    import streamlit as st
    builder = st.components.v2.component(_COMPONENT_NAME, html=_HTML, css=_CSS, js=_JS)
    result = builder(
        key=key,
        data={"n_qubits": n_qubits, "n_columns": n_columns, "palette": GATE_PALETTE},
        default={"circuit": []},
        on_circuit_change=lambda: None,
    )
    return result.circuit if result.circuit is not None else []

---

See also: dashboard_core.graphical_builder, which converts this component's output into runnable gate tuples.