Qiskit-terra: Tweak colors to match new IQX colors

[1ucian0]

From https://github.com/Qiskit/qiskit-terra/pull/3196#issue-324844793, @nonhermitian says:

Match the upcoming changes to IQX circuit composer styling.

The closed PR #3196 suggests a new set of colors the the MPL circuit drawer. However, the PR got out-of-sync.

Please, use PR #3196 as a reference to set the new colors and run binder (see https://github.com/Qiskit/qiskit-terra/pull/4544 as reference) to create the new reference images.

[galeinston]

Hi @1ucian0 can I work on this?

One thing I would like to double check, you want colors to match IQX colors as follows, correct?

Red: Hadamard gate
Dark blue: Classical gates
Light blue: Phase gates
Grey: Non-unitary operations
Pink or dark red: Other quantum gates

[1ucian0]

Feel free to port #3196 to current master (dont forget to keep the original authorship for credit). I assume the color scheme is coming from https://quantum-computing.ibm.com/

[abhobe]

@1ucian0 I managed to change the colors for the gate backgrounds. It works fine but in the IQX(White Theme) the classical gates have a white font color whereas all the other gates seem to have a black font. I am not exactly sure how to do this for QuantumCircuit(). I can however do the dark theme of IQX since it only has one font color.

[abhobe]

Update So Far:

[abhobe]

https://github.com/abhobe/qiskit-terra/blob/fixissue5032/qiskit/visualization/qcstyle.py

[galeinston]

Thank you for the update @abhobe. But I think I can handle this myself. Really appreciate your help, tho 😉

I've been working on this after @1ucian0 assigned it to me. There's another thing I wanna ask is if we also need to add letter 'z' to the measurement symbol? Not just changing colors, correct?

[1ucian0]

Just colors

[abhobe]

@galeinston I know you have been assigned to this issue, but I couldn't help but try to solve this myself (Since I have never contributed before) . I am not going to create a PR but wanted to let you know that I have managed to get colors and font colors to work and match IQX.

[galeinston]

@abhobe It's too bad that today is the day I'm finalizing the PR. My apologies :(

[abhobe]

@abhobe It's too bad that today is the day I'm finalizing the PR. My apologies :(

@galeinston
If it is okay with you, can I create a PR? If not , that's fine with me. I understand :)

[galeinston]

@abhobe My PR is waiting for a review. If there is something wrong with my PR that I can't fix it, you are more than welcome make one.

[enavarro51]

I'm not sure what the rationale for this is. When I started working on the mpl drawer, we had a clear definition for colors, Pauli-green, Clifford-blue, U-gates-red, measure/reset-black, and all else purple. I feel like purple could be split into a 2 or 3 colors, but other than that, this fits functionality with color.

For the IQX colors, first off the only spec we seem to have is the IBM page shown above. This doesn't explain what an mcx with 3 controls, for example, should be colored. What about sx, sxdg, iswap, ccswap, etc.?

For me, the real question is - is Classical, Phase, Hadamard, Quantum a better breakdown for visualizing a circuit? If the consensus is that it is, then we need a complete spec for the colors, or if everything that's not shown is red, it seems there might be an excess of red.

[mtreinish]

@enavarro51 I tend to agree with you, the current color scheme makes more sense to me and is clearly defined. If we're going to change the color map again, we should define the rules for it so it can be applied consistently to all the gates. IMO it's not an issue if the IQX composer and the mpl drawer backend use a different colormap. I could see it being important for iqx to have a consistent colormap between the composer and mpl drawings in the hosted notebooks, but instead of trying to update the mpl drawer every time there is a design change, I feel like we should facilitate the ability to easily set a per environment default colormap. I'm thinking like adding the ability to set a style sheet via the user config file or something.

[enavarro51]

@mtreinish @1ucian0 @nonhermitian I like the idea of style sheets. We can have a default color map we supply, but then users can modify it in a way that groups the gates any way they like. Something like the dicts in qcstyle could be a good starting point.

In regards to this PR, do we want to proceed with changing the colors as they were being done in #3196, keeping the current mpl drawer Pauli, Clifford, U-gates, etc. groupings, or do we just stay with the current mpl colors?

[galeinston]

I'm also on board with the style sheet.

Quick question in regard to 'cu1' in the current official version, was it intentional to have the text oddly appeared as indicated in the following picture? (the gate with the text 'u1 pi/2' next to a vertical line)

Update So Far:

[enavarro51]

Yes, that's the correct way for cu1 and rzz gates.