Repository: Qiskit/qiskit

Issue:
Incorrect shaded barriers in mpl drawer
Circuit with single qubit barriers on 2Q. The text drawn output is correct, but the mpl output is incorrect.

MPL (incorrect)

<img width="992" alt="image" src="https://user-images.githubusercontent.com/32201347/53523392-ae062380-3aaa-11e9-9c36-12f8ce2962bd.png">

Text (correct)

<img width="677" alt="image" src="https://user-images.githubusercontent.com/32201347/53523411-bfe7c680-3aaa-11e9-9716-d7cbebf71c97.png">

Qasm

'OPENQASM 2.0;\ninclude "qelib1.inc";\nqreg q7[3];\ncreg c7[2];\nu2(0.0,0.0) q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\ny q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nx q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\ny q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nx q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\ny q7[0];\nbarrier q7[0];\nid q7[0];\nbarrier q7[0];\nu2(0.0,0.0) q7[0];\nu2(0.0,0.0) q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\ny q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nx q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\ny q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nx q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\ny q7[2];\nbarrier q7[2];\nid q7[2];\nbarrier q7[2];\nu2(0.0,0.0) q7[2];\nbarrier q7[0],q7[1],q7[2];\nmeasure q7[0] -> c7[0];\nmeasure q7[2] -> c7[1];\n'



<!-- ⚠️ If you do not respect this template, your issue will be closed -->
<!-- ⚠️ Make sure to browse the opened and closed issues -->

### Information

- **Qiskit Terra version**: Latest pull from github
- **Python version**:  3.6
- **Operating system**: macox

### What is the current behavior?



### Steps to reproduce the problem



### What is the expected behavior?



### Suggested solutions





Discussion:
So I've been looking at this a bit more and I'm not actually convinced the `mpl` output is wrong, it's just not aligned/justified the same way as the `text` version. The part which is confusing here is the barrier style, the dark grey shading isn't actually the barrier, it's the dotted line. To verify that I came up with this little test:

```
import qiskit as qk
qr = qk.QuantumRegister(3)
qc = qk.QuantumCircuit(qr)
qc.h([qr[0], qr[1]])
qc.barrier([qr[0], qr[1]])
qc.h(qr[2])
qc.barrier(qr[2])
qc.y(qr)
qc.draw(output='mpl')
```

Which yielded:

![barrier-test](https://user-images.githubusercontent.com/2447371/53579011-c7f54400-3b46-11e9-93b1-6d59c2a9f520.png)

With that in mind when I ran that qasm through QuantumCircuit.draw() the circuit output was correct, it just didn't left justify everything. So the parts on q7[0] and q7[2] weren't lined up like in the text drawer. To make this a bit clearer I rendered the same qasm with the mpl backend and set the fold higher so it would put everything in a single row:

![mpl](https://user-images.githubusercontent.com/2447371/53579332-5d90d380-3b47-11e9-9975-c902404bd655.png)

It's not as nice looking as text, but there's nothing wrong with it. FWIW, the justify option is in progress here: https://github.com/Qiskit/qiskit-terra/pull/1797 
But, just out of curiosity I took a look look at the latex output from the same qasm generated circuit and that is really wrong on several fronts:

![latex](https://user-images.githubusercontent.com/2447371/53579824-4b636500-3b48-11e9-807f-2614683aef47.png)


So the latex issue is it doesn't apparently know how to draw iden gates (which is where those double barriers come from, the gap is where an iden gate should be). That'll be easy to fix and I'll push a patch in a second. The horizontal spacing on the barriers will be a bit trickier
mpl extends barrier to other qubits intentionally to fix https://github.com/Qiskit/qiskit-terra/issues/1703
> mpl extends barrier to other qubits intentionally to fix #1703

This is not related to #1703... the bug there was that the barrier was not shown where it *should* have been. Here we are seeing the shaded area of barriers being extended even to irrelevant qubits. This is a problem, as it confuses where the barrier is. The same issue is also raised in https://github.com/Qiskit/qiskit-terra/issues/2319.

Doing this yields weird images like this:
<img width="560" alt="image" src="https://user-images.githubusercontent.com/8622381/62548907-8d9a7c00-b835-11e9-8d3d-ad69b013157a.png">

The shaded area and the dotted lines should cover the same qubits.
@dcmckayibm what do you think still needs to be done here?
As i commented above, I think the gray shaded area should be modified to be exactly the same as where the dotted line is. I changed the issue title to relfect this. 

Resolving patch:
diff --git a/qiskit/visualization/matplotlib.py b/qiskit/visualization/matplotlib.py
--- a/qiskit/visualization/matplotlib.py
+++ b/qiskit/visualization/matplotlib.py
@@ -477,28 +477,25 @@ def _swap(self, xy, color):
                      [ypos + 0.20 * WID, ypos - 0.20 * WID],
                      color=color, linewidth=2, zorder=PORDER_LINE + 1)
 
-    def _barrier(self, config, anc):
+    def _barrier(self, config):
         xys = config['coord']
         group = config['group']
         y_reg = []
         for qreg in self._qreg_dict.values():
             if qreg['group'] in group:
                 y_reg.append(qreg['y'])
-        x0 = xys[0][0]
-
-        box_y0 = min(y_reg) - int(anc / self.fold) * (self._cond['n_lines'] + 1) - 0.5
-        box_y1 = max(y_reg) - int(anc / self.fold) * (self._cond['n_lines'] + 1) + 0.5
-        box = patches.Rectangle(xy=(x0 - 0.3 * WID, box_y0),
-                                width=0.6 * WID, height=box_y1 - box_y0,
-                                fc=self._style.bc, ec=None, alpha=0.6,
-                                linewidth=1.5, zorder=PORDER_GRAY)
-        self.ax.add_patch(box)
+
         for xy in xys:
             xpos, ypos = xy
             self.ax.plot([xpos, xpos], [ypos + 0.5, ypos - 0.5],
                          linewidth=1, linestyle="dashed",
                          color=self._style.lc,
                          zorder=PORDER_TEXT)
+            box = patches.Rectangle(xy=(xpos - (0.3 * WID), ypos - 0.5),
+                                    width=0.6 * WID, height=1,
+                                    fc=self._style.bc, ec=None, alpha=0.6,
+                                    linewidth=1.5, zorder=PORDER_GRAY)
+            self.ax.add_patch(box)
 
     def _linefeed_mark(self, xy):
         xpos, ypos = xy
@@ -851,7 +848,7 @@ def _draw_ops(self, verbose=False):
                             _barriers['group'].append(q_group)
                         _barriers['coord'].append(q_xy[index])
                     if self.plot_barriers:
-                        self._barrier(_barriers, this_anc)
+                        self._barrier(_barriers)
                 elif op.name == 'initialize':
                     vec = '[%s]' % param
                     self._custom_multiqubit_gate(q_xy, wide=_iswide,


Test patch: