Allow opening of custom gates.

[georgir]

A custom gate that was created from a circuit shows that circuit in the mouseover tooltip in the toolbox, but that's really insufficient sometimes. Add a way to open it to explore what it actually is doing.

For bonus points, allow edits made to it to be reflected back to the custom gate's definition in the original circuit.

Especially with the edit feature, the UI/UX for this feature could be approached in many different ways, with varying implementation complexity.

• open in a new window with no automatic sync whatsoever, and also add a "redefine custom gate" option that prompts you to paste its json or URL.
• open in a new window, with some window.opener javascript magic to sync with the original window, automatic after each change or on pressing a new "save" button (might get weird and unintuitive if original window is closed, reloaded or navigated in)
• open in the same window with a "back" button to return to the parent circuit (or two back buttons, "save edits" and "discard edits")

Please don't let the complexity of the "edit" functionality stop you from at least adding the option to view custom gates though.

[Strilanc]

I keep pushing off doing custom gate editing because I know it will be a giant pain to get it right. But basically the plan I have is for the editing to happen inline within the circuit. Custom gates in the circuit would have an 'edit' button, which would expand them into a gray box containing their contents. You would add/remove contents by either dragging it into and out of the box or by dragging the edges of the box.

Some of the things that I think make this difficult are:

• The "inline editing box"'s presence is persistent and would be subject to undo/redo, so it is has to be serializable.
• Do I allow multiple inline editing boxes at the same time? Nested inline editing boxes when one custom gate contains another?
• How does the surrounding circuit rearrange as the inline editing box comes and goes? Note that the custom gate being expanded into edit mode may be controlled / parametrized by other gates in the circuit.
• Custom gates have an order that they are loaded in, and earlier custom gates must not reference later custom gates. What do I do if a later custom gate is dragger into an earlier one? Disable the later gate? Delete it? Re-order the gates? What if there's a cycle?
• Is there some nice way to visually hint to the user that they are editing all the custom gates of a particular type, instead of just this one?
• If an interior gate is disabled by a condition imposed by an exterior control, it should disable the whole custom gate. How is that shown?
• Normally it's illegal to have two Input A boxes on the same line, but it is legal to have an Input A inside a custom circuit and also an Input A outside of it. The inline editing box could cause two Input As to be on the same column but have them both be allowed. This has to be accounted for appropriately.
• Custom circuit gates differ from inline gates in some ways, particularly when it comes to stuff like "this gate would be disabled because of the no-recohere rule but I know it's a permutation so it's fine". All of these differences would need to be fixed to make the UX of editing the inline custom circuit behave consistently with editing the exterior circuit.

Just expanding so you can view the gates, but not change them, might be a good intermediate goal.

[grayskripko]

it is impossible to understand the structure of the gate. Low dpi and small picture

[bennettbrowniowa]

I landed on the page for this open issue while trying to learn about Grover's search algorithm. I thought double clicking or right clicking might open the custom Oracle gate in a new circuit. I see the tool tip as captured by @grayskripko

I agree that a larger image in the tool tip would solve the problem for all users.

A user-end workaround is to click the Clear Circuit button and drag in the custom gate, and then examine the URL. (https://algassert.com/quirk#circuit={"cols":[["~vn6c"]],"gates":[{"id":"~vn6c","name":"Oracle","circuit":{"cols":[["Z","%E2%80%A2","%E2%97%A6","%E2%80%A2","%E2%80%A2"]]}}],"init":["+","+","+","+","+"]})

[bennettbrowniowa]

Relevant code: https://github.com/Strilanc/Quirk/blob/8833791294e642795c8717038e84940a74b19a64/src/ui/DisplayedToolbox.js#L321... https://github.com/Strilanc/Quirk/blob/8833791294e642795c8717038e84940a74b19a64/src/draw/WidgetPainter.js#L237...