quantum-viz.js icon indicating copy to clipboard operation
quantum-viz.js copied to clipboard

Invisible gate for idles/no-ops

Open snpal opened this issue 3 years ago • 2 comments

Is your feature request related to a problem? Please describe. I would like to draw a circuit that has distinct timesteps at which certain operations are applied. Currently, if there is no operation on a qubit at a certain timestep, the next operation for that qubit is graphed immediately after the last operation.

For example: Here is a circuit I drew using quantum-viz. The intended circuit was:

  • Hadamard(0) at timestep 0
  • Hadamard(1) at timestep 1
  • ControlledX(0, 1) at timestep 2
  • Measurement(0) at timestep 3

The drawn circuit more appropriately describes:

  • Hadamard(0) at timestep 0
  • Hadamard(1) at timestep 0
  • ControlledX(0, 1) at timestep 1
  • Measurement(0) at timestep 2

image

Describe the solution you'd like I would like to be able to use an "invisible gate" (an idle/no-op) that simply leaves a blank line where an operation would go. This would be like the identity operators used below, except that it would not be visible. Of course, the line indicating the qubit would still be there - ideally, it would look exactly like the line for qubit 1 below the measurement in the image above.

Describe alternatives you've considered Here is the same circuit as above with idles (identity operators) where I would like spaces: image

Though this fix is okay for small circuits, it clutters the visual and makes circuits difficult to read. It would be very nice if I could replace these idles with an "invisible" gate.

snpal avatar Jun 02 '22 19:06 snpal

This is aligned with #19, it would be great to be able to provide custom visualizations for individual gates, that would allow to make the "I" gate "invisible" by rendering it with a transparent box.

anpaz avatar Jun 10 '22 05:06 anpaz

One way we can easily accomplish this for now, would be to decorate every gate with the name of the gate itself. For example, right now is rendered with: <g><rect class="gate-unitary" x="80" y="20" width="40" height="40"></rect><text font-size="14" x="100" y="40">H</text></g> we should add a class="gate-H" attribute and then we could easily make all gate-H objects transparent, or change the color.

anpaz avatar Jun 10 '22 05:06 anpaz