| """ | |
| 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. | |
| """ | |
| from .graphical_builder import GATE_PALETTE | |
| __all__ = ['mount_circuit_builder'] | |
| _CSS = """ | |
| .cb-root { display: flex; flex-direction: column; gap: 10px; font-family: monospace; } | |
| .cb-palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--st-border-color, #444); border-radius: 6px; } | |
| .cb-chip { | |
| padding: 4px 10px; border-radius: 4px; cursor: grab; user-select: none; | |
| background: var(--st-secondary-background-color, #262730); | |
| color: var(--st-text-color, #fafafa); | |
| border: 1px solid var(--st-border-color, #444); | |
| font-size: 14px; | |
| } | |
| .cb-chip:active { cursor: grabbing; } | |
| .cb-chip[data-kind="control"] { background: #3a5; color: #fff; } | |
| .cb-chip[data-kind="target"] { background: #35a; color: #fff; } | |
| .cb-chip[data-kind="swap"] { background: #a53; color: #fff; } | |
| .cb-toolbar { display: flex; gap: 8px; align-items: center; } | |
| .cb-toolbar button { | |
| padding: 4px 10px; border-radius: 4px; cursor: pointer; | |
| background: var(--st-secondary-background-color, #262730); | |
| color: var(--st-text-color, #fafafa); | |
| border: 1px solid var(--st-border-color, #444); | |
| } | |
| .cb-grid { display: grid; gap: 2px; align-items: center; position: relative; } | |
| .cb-qlabel { font-size: 12px; opacity: 0.75; text-align: right; padding-right: 6px; } | |
| .cb-cell { | |
| width: 40px; height: 32px; border: 1px solid var(--st-border-color, #444); | |
| border-radius: 4px; display: flex; align-items: center; justify-content: center; | |
| font-size: 13px; cursor: pointer; | |
| background: var(--st-background-color, #0e1117); | |
| color: var(--st-text-color, #fafafa); | |
| } | |
| .cb-cell.cb-filled { background: var(--st-secondary-background-color, #262730); font-weight: bold; } | |
| .cb-cell.cb-over { outline: 2px dashed #4af; } | |
| .cb-count { font-size: 12px; opacity: 0.75; } | |
| """ | |
| _HTML = """ | |
| <div class="cb-toolbar"> | |
| <span class="cb-count" data-role="count">0 porte piazzate</span> | |
| <button data-role="clear">Pulisci griglia</button> | |
| </div> | |
| """ | |
| _JS = r""" | |
| export default function(component) { | |
| const { data, setStateValue, parentElement } = component; | |
| const nQubits = Math.max(1, data.n_qubits || 1); | |
| const nCols = Math.max(1, data.n_columns || 12); | |
| const palette = data.palette || []; | |
| const grid = Array.from({ length: nQubits }, () => Array(nCols).fill(null)); | |
| const cellEls = Array.from({ length: nQubits }, () => Array(nCols).fill(null)); | |
| const root = document.createElement('div'); | |
| root.className = 'cb-root'; | |
| const paletteEl = document.createElement('div'); | |
| paletteEl.className = 'cb-palette'; | |
| palette.forEach((g) => { | |
| const chip = document.createElement('div'); | |
| chip.className = 'cb-chip'; | |
| chip.draggable = true; | |
| chip.textContent = g.label; | |
| chip.dataset.kind = g.kind; | |
| chip.title = g.kind === 'single' ? `Porta a 1 qubit: ${g.label}` | |
| : g.kind === 'control' ? 'Controllo -- trascina un target nella stessa colonna' | |
| : g.kind === 'target' ? `Target -- forma C${g.gate.toUpperCase()} con un controllo nella stessa colonna` | |
| : 'SWAP -- trascina due marcatori nella stessa colonna'; | |
| chip.addEventListener('dragstart', (e) => { | |
| e.dataTransfer.setData('text/plain', g.id); | |
| e.dataTransfer.effectAllowed = 'copy'; | |
| }); | |
| paletteEl.appendChild(chip); | |
| }); | |
| root.appendChild(paletteEl); | |
| const gridEl = document.createElement('div'); | |
| gridEl.className = 'cb-grid'; | |
| gridEl.style.gridTemplateColumns = `36px repeat(${nCols}, 40px)`; | |
| for (let r = 0; r < nQubits; r++) { | |
| const label = document.createElement('div'); | |
| label.className = 'cb-qlabel'; | |
| label.textContent = `q${r}`; | |
| gridEl.appendChild(label); | |
| for (let c = 0; c < nCols; c++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'cb-cell'; | |
| cell.addEventListener('dragover', (e) => { e.preventDefault(); cell.classList.add('cb-over'); }); | |
| cell.addEventListener('dragleave', () => cell.classList.remove('cb-over')); | |
| cell.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| cell.classList.remove('cb-over'); | |
| const gateId = e.dataTransfer.getData('text/plain'); | |
| const g = palette.find((x) => x.id === gateId); | |
| if (!g) return; | |
| grid[r][c] = { kind: g.kind, gate: g.gate }; | |
| renderCell(r, c); | |
| emit(); | |
| }); | |
| cell.addEventListener('click', () => { | |
| if (grid[r][c]) { | |
| grid[r][c] = null; | |
| renderCell(r, c); | |
| emit(); | |
| } | |
| }); | |
| gridEl.appendChild(cell); | |
| cellEls[r][c] = cell; | |
| } | |
| } | |
| root.appendChild(gridEl); | |
| parentElement.appendChild(root); | |
| const countEl = root.querySelector('[data-role="count"]'); | |
| root.querySelector('[data-role="clear"]').addEventListener('click', () => { | |
| for (let r = 0; r < nQubits; r++) { | |
| for (let c = 0; c < nCols; c++) { | |
| grid[r][c] = null; | |
| renderCell(r, c); | |
| } | |
| } | |
| emit(); | |
| }); | |
| const SYMS = { control: '●', swap: '×' }; | |
| function renderCell(r, c) { | |
| const cell = cellEls[r][c]; | |
| const v = grid[r][c]; | |
| if (!v) { | |
| cell.textContent = ''; | |
| cell.classList.remove('cb-filled'); | |
| return; | |
| } | |
| cell.classList.add('cb-filled'); | |
| if (v.kind === 'single') cell.textContent = v.gate.toUpperCase(); | |
| else if (v.kind === 'target') cell.textContent = v.gate === 'x' ? '⊕' : v.gate.toUpperCase(); | |
| else cell.textContent = SYMS[v.kind] || '?'; | |
| } | |
| function buildOps() { | |
| const ops = []; | |
| for (let c = 0; c < nCols; c++) { | |
| let single = null; | |
| const controls = []; | |
| const targets = []; | |
| const swaps = []; | |
| for (let r = 0; r < nQubits; r++) { | |
| const v = grid[r][c]; | |
| if (!v) continue; | |
| if (v.kind === 'single') single = { row: r, gate: v.gate }; | |
| else if (v.kind === 'control') controls.push(r); | |
| else if (v.kind === 'target') targets.push({ row: r, gate: v.gate }); | |
| else if (v.kind === 'swap') swaps.push(r); | |
| } | |
| const isEmpty = !single && controls.length === 0 && targets.length === 0 && swaps.length === 0; | |
| if (isEmpty) continue; | |
| if (single && controls.length === 0 && targets.length === 0 && swaps.length === 0) { | |
| ops.push({ gate: single.gate, qubits: [single.row] }); | |
| } else if (!single && controls.length === 1 && targets.length === 1 && swaps.length === 0) { | |
| ops.push({ gate: 'c' + targets[0].gate, qubits: [controls[0], targets[0].row] }); | |
| } else if (!single && controls.length === 0 && targets.length === 0 && swaps.length === 2) { | |
| ops.push({ gate: 'swap', qubits: swaps }); | |
| } | |
| // Any other combination in a column (e.g. a lone control with no | |
| // target yet) is an incomplete gate -- shown on the grid but not | |
| // emitted as an op until it's completed. | |
| } | |
| return ops; | |
| } | |
| function emit() { | |
| const ops = buildOps(); | |
| countEl.textContent = `${ops.length} porte piazzate`; | |
| setStateValue('circuit', ops); | |
| } | |
| emit(); | |
| } | |
| """ | |
| _COMPONENT_NAME = "dense_evolution_circuit_builder" | |
| 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 [] | |