Add SVG Visualizations for Custom Gates (class `Matrixgate`)

[freyam]

This PR aims to add SVG visualizations for the custom gates as requested by @mpharrigan over at https://github.com/quantumlib/Cirq/issues/2313.

• [ ] [DESIGN] Come up with a way to visualize custom gates (MatrixGate).

This is part of the https://github.com/quantumlib/Cirq/issues/4499 which plans on solving some bugs in the SVGCircuit class and finally paving the way to integrate the SVGCircuit into cirq.AbstractCircuit as _repr_svg_.

Demo

Relevant Notebook: cirq-core/cirq/contrib/svg/example.ipynb

SVGCircuit(cirq.Circuit(
    cirq.CNOT(cirq.GridQubit(0,0), cirq.GridQubit(0,1)),
    cirq.MatrixGate(np.array([ [0, 1], [1, 0] ])).on(cirq.GridQubit(0,0)),
    cirq.CNOT(cirq.GridQubit(0,1), cirq.GridQubit(1,1)),
))

Before

After

to be discussed

cc @tanujkhattar

[review-notebook-app[bot]]

Check out this pull request on 

See visual diffs & provide feedback on Jupyter Notebooks.

---

Powered by ReviewNB

[tanujkhattar]

Thanks for working on this @freyam. My suggestion for Visualizing MatrixGate would be to follow a similar logic to what's already been done in the ascii diagram based visualization (i.e. in the _circuit_diagram_info_ method on the class).

• If the _name attribute is not None, use it as a symbol for visualization.
• If it's none, show the entire matrix in a block.

[freyam]

I am currently trying to figure out the dynamic spacing (_fit_vertical and _fit_horizontal) that will be needed for different types of matrices.

May I know how large can the matrices be on average? Can I assume 2x2 for now?

[mpharrigan]

I don't think you can assume 2x2. The size is 2^n by 2^n where n is the number of qubits the gate acts on. There's no reason why people wouldn't be doing 3+ qubit matrix gates