Skip to content

Tweak colors #5063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
1ucian0 merged 28 commits into from
Sep 28, 2020
Merged

Tweak colors #5063

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
5fa5898
Tweak colors to match new IQX colors
galeinston Sep 14, 2020
660bd00
Testing push commit
enavarro51 Sep 17, 2020
08fa8a9
Merge branch 'master' into Tweak_Colors_IQX
galeinston Sep 17, 2020
149641b
Update qcstyle to provide 3 classes for mpl
galeinston Sep 22, 2020
fc86dcf
Merge branch 'Tweak_Colors_IQX' of https://github.com/galeinston/qisk…
galeinston Sep 22, 2020
11bbd2b
Merge branch 'master' into Tweak_Colors_IQX
galeinston Sep 22, 2020
e559e77
Adjust style and color options
enavarro51 Sep 22, 2020
c994f70
Minor qcstyle changes
enavarro51 Sep 22, 2020
befb689
Allow str or tuple for displaycolor and update docs
enavarro51 Sep 22, 2020
394e6fa
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 22, 2020
2971c46
Doc string changes
enavarro51 Sep 23, 2020
14456d8
Further update docs
enavarro51 Sep 23, 2020
bcf09e6
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 23, 2020
4221874
Add name in style param to choose ipx or bw and add binder test
enavarro51 Sep 23, 2020
fc7709d
Add style to test and fix typos
enavarro51 Sep 23, 2020
49a649f
Rework style name and add name to style docs
enavarro51 Sep 24, 2020
80fbd86
Add reno
enavarro51 Sep 24, 2020
2117b78
Minor name mods
enavarro51 Sep 24, 2020
70f7034
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 24, 2020
25bd9bb
Fix indent
enavarro51 Sep 24, 2020
4fd55bf
Merge branch 'Tweak_Colors_IQX' of https://github.com/galeinston/qisk…
enavarro51 Sep 24, 2020
25798af
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 26, 2020
9e9e448
Fix style selection
enavarro51 Sep 26, 2020
84edcf5
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 27, 2020
498bee4
Merge branch 'Tweak_Colors_IQX' of https://github.com/galeinston/qisk…
enavarro51 Sep 27, 2020
5233a8e
Fix lint and imports
enavarro51 Sep 27, 2020
cb57699
Lint again
enavarro51 Sep 27, 2020
3fa5787
Merge branch 'master' into Tweak_Colors_IQX
enavarro51 Sep 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions qiskit/visualization/matplotlib.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,9 +347,16 @@ def _get_colors(self, op):
ec = self._style.edge_color
lc = self._style.lc
if op.name == 'reset':
gt = self._style.lc
else:
gt = self._style.gt
if op.name not in {'h', 't', 's', 'z', 'sdg', 'tdg', 'u1', 'r', 'reset', 'meas', 'measure'}:

@abhobe abhobe Sep 18, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if op.name not in {'h', 't', 's', 'z', 'sdg', 'tdg', 'u1', 'r', 'reset', 'meas', 'measure'}:
if op.name not in {'h', 't', 's', 'z', 'sdg', 'tdg', 'u1', 'reset', 'meas', 'measure'}:

I think r should be removed because it seems like its a quantum gate which needs a white font.

Binder Tests
image

gt = self._style.not_gate_lc
self._style.sc = self._style.not_gate_lc
else:
gt = self._style.gt
self._style.sc = self._style.lc

return fc, ec, gt, self._style.tc, self._style.sc, lc

def _multiqubit_gate(self, xy, fc=None, ec=None, gt=None, sc=None, text='', subtext=''):
Expand Down Expand Up @@ -456,10 +463,10 @@ def _measure(self, qxy, cxy, cid, fc=None, ec=None, gt=None, sc=None):
# add measure symbol
arc = patches.Arc(xy=(qx, qy - 0.15 * HIG), width=WID * 0.7,
height=HIG * 0.7, theta1=0, theta2=180, fill=False,
ec=self._style.not_gate_lc, linewidth=self._lwidth2, zorder=PORDER_GATE)
ec=self._style.lc, linewidth=self._lwidth2, zorder=PORDER_GATE)
self.ax.add_patch(arc)
self.ax.plot([qx, qx + 0.35 * WID], [qy - 0.15 * HIG, qy + 0.20 * HIG],
color=self._style.not_gate_lc, linewidth=self._lwidth2, zorder=PORDER_GATE)
color=self._style.lc, linewidth=self._lwidth2, zorder=PORDER_GATE)
# arrow
self._line(qxy, [cx, cy + 0.35 * WID], lc=self._style.cc, ls=self._style.cline)
arrowhead = patches.Polygon(((cx - 0.20 * WID, cy + 0.35 * WID),
Expand Down Expand Up @@ -924,6 +931,15 @@ def _draw_ops(self, verbose=False):
ac=self._style.dispcol['target'])
self._line(qreg_b, qreg_t, lc=lc)

# ccx gates
elif isinstance(op.op, ControlledGate) and op.name == 'ccx':
num_ctrl_qubits = op.op.num_ctrl_qubits
self._set_ctrl_bits(op.op.ctrl_state, num_ctrl_qubits,
q_xy, ec=ec, tc=tc, text=ctrl_text, qargs=op.qargs)
self._x_tgt_qubit(q_xy[num_ctrl_qubits+1], ec=ec,
ac=self._style.dispcol['target'])
self._line(qreg_b, qreg_t, lc=lc)

@enavarro51 enavarro51 Sep 14, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't believe this elif is necessary. The ccx is covered by the base_name == 'x' elif above it.

@galeinston galeinston Sep 14, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I don't specifically add the elif here, the color would be in dark red instead of dark blue (please check the reference in #5032). The present version doesn't handle this scenario either, i.e. >=2 controlled qubit, the color is different from colors defined for swap and cx

@enavarro51 enavarro51 Sep 14, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see you added ccx to dispcol in qcstyle. This should take care of the color. I haven't run your code yet, but when I add it in to qcstyle with a different color using the master version, the color changes in the display output.

# cz gate
elif op.name == 'cz':
num_ctrl_qubits = op.op.num_ctrl_qubits
Expand Down Expand Up @@ -953,7 +969,7 @@ def _draw_ops(self, verbose=False):
self._line(qreg_b, qreg_t, lc=lc)

# cswap gate
elif op.name != 'swap' and base_name == 'swap':
elif op.name == 'cswap':

@enavarro51 enavarro51 Sep 14, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will not cover swap gates with more than one control, like ccswap, so should go back to original.

@galeinston galeinston Sep 14, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. I also figured this problem. The current version also doesn't cover for cases with more than 1 controlling qubit. Since the original problem asked for colors change only, I modified the code to match it up with IQX reference. Should we create a different issue for it?

@enavarro51 enavarro51 Sep 14, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand why you did it, but we have to be careful we don't lose functionality. Adding a separate elif would be better. I left a comment on the original issue. I feel like we're working with an incomplete spec.

@Cryoris Cryoris Sep 16, 2020 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The specifications are complete, see the comment below: #5063 (comment)

num_ctrl_qubits = op.op.num_ctrl_qubits
self._set_ctrl_bits(op.op.ctrl_state, num_ctrl_qubits,
q_xy, ec=ec, tc=tc, text=ctrl_text, qargs=op.qargs)
Expand Down
56 changes: 31 additions & 25 deletions qiskit/visualization/qcstyle.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,15 @@ class DefaultStyle:

def __init__(self):
# Set colors
basis_color = '#FA74A6' # Red
clifford_color = '#6FA4FF' # Blue
non_gate_color = '#000000' # Black
other_color = '#BB8BFF' # Purple
pauli_color = '#05BAB6' # Green
iden_color = '#05BAB6' # Green
basis_color = '#FA74A6' # Red
clifford_color = '#6FA4FF' # Blue
iden_color = '#05BAB6' # Green

hadamard_color = '#DC143C' # Red
classical_gate_color = '#000080' # Dark Blue
phase_gate_color = '#1E90FF' # Light Blue
non_unitary_gate_color = '#808080' # Grey
other_color = '#99004C' # Dark Red

@Cryoris Cryoris Sep 16, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the official color codes, could you update these?

classical: #002D9C
phase: #33B1FF
hadamard: #FA4D56
quantum: #9F1853
non-unitary: #A8A8A8

@galeinston galeinston Sep 16, 2020

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Cryoris absolutely


self.name = 'iqx'
self.tc = '#000000'
Expand Down Expand Up @@ -77,36 +80,39 @@ def __init__(self):
}
self.dispcol = {
'u0': basis_color,
'u1': basis_color,
'u2': basis_color,
'u3': basis_color,
'u1': phase_gate_color,
'u2': other_color,
'u3': other_color,
'id': iden_color,
'x': pauli_color,
'y': pauli_color,
'z': pauli_color,
'h': clifford_color,
'cx': clifford_color,
'cy': clifford_color,
'cz': clifford_color,
'swap': clifford_color,
's': clifford_color,
'sdg': clifford_color,
'x': classical_gate_color,
'y': other_color,
'z': phase_gate_color,
'h': hadamard_color,
'cx': classical_gate_color,
'ccx': classical_gate_color,
'cy': other_color,
'cz': other_color,
'swap': classical_gate_color,
'cswap': classical_gate_color,
's': phase_gate_color,
'sdg': phase_gate_color,
'dcx': clifford_color,
'iswap': clifford_color,
't': other_color,
'tdg': other_color,
'iswap': classical_gate_color,
't': phase_gate_color,
'tdg': phase_gate_color,
'r': other_color,
'rx': other_color,
'ry': other_color,
'rz': other_color,
'rxx': other_color,
'ryy': other_color,
'rzz': other_color,
'rzx': other_color,
'reset': non_gate_color,
'reset': non_unitary_gate_color,
'target': '#ffffff',
'multi': other_color,
'meas': non_gate_color,
'measure': non_gate_color
'meas': non_unitary_gate_color,
'measure': non_unitary_gate_color
}
self.latexmode = False
self.index = False
Expand Down