Skip to content

feat: add interactive Plotly circuit diagram visualization#1284

Open
kawacukennedy wants to merge 1 commit into
amazon-braket:feature/graphical-visualizationfrom
kawacukennedy:feature/graphical-visualization
Open

feat: add interactive Plotly circuit diagram visualization#1284
kawacukennedy wants to merge 1 commit into
amazon-braket:feature/graphical-visualizationfrom
kawacukennedy:feature/graphical-visualization

Conversation

@kawacukennedy

Copy link
Copy Markdown

Summary

Implements PlotlyCircuitDiagram — an interactive circuit diagram renderer that returns a plotly.graph_objects.Figure via the existing circuit.show() interface. Resolves #1250.

Changes

  • New file: src/braket/circuits/graphical_diagram_builders/plotly_circuit_diagram.py — Full Plotly rendering: gate boxes, control/anti-control dots, SWAP markers, connections, barriers, result types, qubit labels, moment labels, footer metadata
  • New file: test/unit_tests/braket/circuits/test_plotly_circuit_diagram.py — 68 tests covering layout, tooltips, verbatim detection, column geometry, and figure output
  • New file: examples/plotly_circuit_visualization.py — Usage examples including parameterized circuits, verbatim boxes, result types, and HTML export
  • Modified: src/braket/circuits/circuit.pyshow() accepts "interactive" argument, imports PlotlyCircuitDiagram on demand
  • Modified: src/braket/circuits/graphical_diagram_builders/__init__.py — Export PlotlyCircuitDiagram
  • Modified: pyproject.toml — Added interactive = ["plotly"] optional dependency group

Key Features

  • Hover tooltips on every gate showing name, target qubits, and parameters
  • Collapsible verbatim boxes via Plotly updatemenus toggle (collapsed by default)
  • Pure Plotly — no Dash, no callbacks, works in Jupyter and standalone scripts
  • Optional dependencypip install amazon-braket-sdk[interactive]
  • No regressions — all 76 existing Matplotlib tests pass unchanged

Testing

# Plotly tests (68)
python -m pytest test/unit_tests/braket/circuits/test_plotly_circuit_diagram.py -v

# Matplotlib tests (76, no regressions)
python -m pytest test/unit_tests/braket/circuits/test_matplotlib_circuit_diagram.py -v

# Lint
pycodestyle --max-line-length=79 src/braket/circuits/graphical_diagram_builders/plotly_circuit_diagram.py
pycodestyle --max-line-length=79 test/unit_tests/braket/circuits/test_plotly_circuit_diagram.py

Disclosure

This contribution includes code co-authored with an AI assistant (big-pickle).

…aket#1250)

Implements PlotlyCircuitDiagram — an interactive circuit diagram
renderer that returns a plotly.graph_objects.Figure via the existing
circuit.show() interface (use show('interactive')).

- Gate boxes, control dots, connections, barriers, SWAP, result types
- Hover tooltips with gate name, target qubits, parameters
- Collapsible verbatim boxes via Plotly updatemenus
- Optional dependency: pip install amazon-braket-sdk[interactive]
- 68 unit tests matching the Matplotlib test pattern
- Example script in examples/plotly_circuit_visualization.py

Co-authored-by: AI (big-pickle)
@kawacukennedy

Copy link
Copy Markdown
Author

👋 Hi team — this PR adds interactive Plotly-based circuit diagram visualization to the SDK (resolves #1250).

Key highlights:

  • 68 unit tests covering layout, tooltips, verbatim detection, column geometry, and figure output
  • Hover tooltips on every gate showing name, target qubits, and parameters
  • Collapsible verbatim boxes via Plotly updatemenus (collapsed by default)
  • Pure Plotly — no Dash, no callbacks, works in both Jupyter and standalone scripts
  • Optional dependencypip install amazon-braket-sdk[interactive]
  • No regressions — all 76 existing Matplotlib tests pass unchanged
  • Example script in examples/plotly_circuit_visualization.py

Would love a review when someone has a chance! @speller26 @krneta

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant