Add panel feature

[aatng-gh]

Description

Add usePanel extension

Type of change

• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

• Jest
• Visually tested

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[codecov-commenter]

Codecov Report

❗ No coverage uploaded for pull request base (feature/draggable@d559585). Click here to learn what that means.
The diff coverage is n/a.

@@                 Coverage Diff                  @@
##             feature/draggable      #78   +/-   ##
====================================================
  Coverage                     ?   89.05%           
====================================================
  Files                        ?        4           
  Lines                        ?      265           
  Branches                     ?       33           
====================================================
  Hits                         ?      236           
  Misses                       ?       18           
  Partials                     ?       11           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[anjbur]

Looking good! I found some bugs, some of which should be fixed now and some can be triaged as issues for later.

Higher priority:

• I currently can't move measurement gates between wires, but they should have vertical movement enabled
• In Example 1, if I move the CNOT gate to have target q0 and control q1, then if I accidentally click the portion of the gate on q0 that overlaps with the right hand drop zone, the gate is moved to the far right end of the circuit.

Lower priority:

• The EDIT panel stops working if you switch directly from one gate to another without switching back to the ADD panel in between. It should either work for the new gate or automatically revert to the ADD panel. Couldn't reproduce later when meeting, so dropping this to a lower priority for later investigation.
• To exit the EDIT panel and move back into ADD, it only works to click inside the circuit. Ideally, the user could click anywhere on the page to return to the ADD panel. At the least, clicking the Esc key should return the user to the ADD panel.
• In the ADD panel, just clicking on a gate gives you a shadow that you can move around, but you can't actually add it to the circuit. Either you should be able to use this as usual or a single click (as opposed to click and drag) shouldn't create a gate shadow.
• When moving a multi-qubit gate or a single qubit gate with a control bit, it would be nice if there was a way to move it so it stays in its position on the current wire but moves before/after gates on other wires. For example, on Example 1 the only way to swap the H and CNOT gates is to move the CNOT to q0 and then back to q1. It would be nice if this could be done in a single horizontal movement.
• Adding and moving gates doesn't interact properly with the classical logic section of the circuit. On Example 2, placing a gate on the drop zone adjacent to the classically controlled section actually puts it inside that section (if there are gates on that wire. If there are no gates on that wire inside the classical section, then it automatically puts the gate after the classical section. There should be an option to put it before or after in either case).
• When a button to expand/collapse a group overlaps with a drop zone, that button can't be clicked.
• In Example 2, in the portion after the classical section, there's a group of gates: ZZ, ZZ, XX, XX, XX. If I move the second ZZ gate down one wire, it moves it down and swaps it horizontally with the adjacent gate resulting in: ZZ, XX, ZZ, XX, XX. This works in general, so I’m not sure why this particular example shows this behavior.