Incompatibility with `constrained` layout?

[guillaumedavidphd]

I think I found a bug when using Matplotlib's constrained layout and flexitext. In this case, flexitext makes the layout very inconsistent if the window is resized, and different from what is expected. Here's some example code:

import matplotlib.pyplot as plt
from flexitext import flexitext

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

text1 = "<size:42, name:Carlito>Some<color:#11557c, weight:bold> text</></>"
text2 = "<size:36, name:Lato, color:royalblue><weight:bold>Here</> too</>"

flexitext(0.5, 0.5, text1, ha="center", ax=ax[0])
flexitext(0.5, 0.5, text2, ha="center", ax=ax[1])

fig.set_facecolor("w")
# fig.savefig("example.png", dpi=300)
plt.show()

Here is a screenshot of the result:

After maximizing the window, and going back to its original size, the layout has changed:

Maximizing again, and going back to the original size:

Note that uncommenting fig.savefig("example.png", dpi=300) triggers a canvas draw and improves the layout for the given window size, but it doesn't seem to be what the layout would be without the flexitext.

Expected layout:

Layout after a canvas draw:

What do you think?

[tomicapretto]

Interesting!

I'll try to reproduce and understand what's going on.

[tomicapretto]

I can reproduce the issue.

globals

import matplotlib.pyplot as plt
from flexitext import flexitext

text1 = "<size:42, name:Carlito>Some<color:#11557c, weight:bold> text</></>"
text2 = "<size:36, name:Lato, color:royalblue><weight:bold>Here</> too</>"

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

fig.set_facecolor("w")
fig.savefig("example_empty.png", dpi=300)

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

flexitext(0.5, 0.5, text1, ha="center", ax=ax[0])
flexitext(0.5, 0.5, text2, ha="center", ax=ax[1])

fig.set_facecolor("w")
fig.savefig("example_full.png", dpi=300)

However, there are two things I found.

1. In the second block, while using flexitext() I got this warning

/tmp/ipykernel_12507/4264917797.py:10: UserWarning: constrained_layout not applied because axes sizes collapsed to zero.  Try making figure larger or axes decorations smaller.
  fig.savefig("example_full.png", dpi=300)
/home/tomas/anaconda3/envs/flexitext/lib/python3.10/site-packages/IPython/core/events.py:89: UserWarning: constrained_layout not applied because axes sizes collapsed to zero.  Try making figure larger or axes decorations smaller.
  func(*args, **kwargs)

which tells the size of the figure and the size of the fonts are somehow incompatible (I'm not sure, and I don't know why).

2. The image shown in the Jupyter Notebook actually looks good! So it looks like there's some magic going under the hood

[tomicapretto]

It's not a problem with Flexitext per se, but a problem with how some internals are handled by Matplotlib. In the following chunk I'm adding some text the same way flexitext does it. See we still get the warning

import matplotlib.pyplot as plt

from matplotlib.offsetbox import AnnotationBbox, HPacker, TextArea, VPacker

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

offsetbox = VPacker(
    children=[
        HPacker(
            children=[
                TextArea(
                    "Some weight",
                    textprops={"size": 42}
                )
            ],
            pad=0, 
            sep=0,
            align="baseline"
        )
    ], 
    pad=0, 
    sep=0,
    align="left"
)
ab1 = AnnotationBbox(
    offsetbox,
    (0.5, 0.5),
    xycoords="axes fraction",
    box_alignment=(0.5, 0.5),
    pad=0
)
ax[0].add_artist(ab1)

fig.set_facecolor("w")
fig.savefig("example_not.png", dpi=300)
plt.show()

/home/tomas/anaconda3/envs/flexitext/lib/python3.10/tkinter/__init__.py:839: UserWarning: constrained_layout not applied because axes sizes collapsed to zero.  Try making figure larger or axes decorations smaller.
  func(*args)

[tomicapretto]

On the other hand, if we simple use ax.text() it works (without any warning)...

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

ax[0].text(0.5, 0.5, "Some weight", size=42, ha="center", transform=ax[0].transAxes)
ax[1].text(0.5, 0.5, "Here too", size=36, ha="center", transform=ax[1].transAxes)

fig.set_facecolor("w")
fig.savefig("example_plain.png", dpi=300)

[tomicapretto]

@guillaumedavidphd maybe we can open an issue ticket in Matplotlib?

[guillaumedavidphd]

Thanks for looking into this @tomicapretto. I agree with your comments above, and I do see the UserWarning you mentioned as well. I guess opening a ticket with Matplotlib is our best bet. Should I do it or would you rather handle it yourself?

[tomicapretto]

I opened this https://discourse.matplotlib.org/t/constrained-layout-does-not-work-well-with-annotationbbox/23301

[tomicapretto]

@guillaumedavidphd Matplotlib devs are fixing this issue here matplotlib/matplotlib#26184. I still see the warning but now it works.

[guillaumedavidphd]

Great to hear!

[rcomer]

Great to know that you have tested and it fixes the flexitext case!

I was not expecting that you’d still see the warning. What backend are you using?

[tomicapretto]

@rcomer I'm using TkAgg. I've never specified it by hand, it's what I have by default.

I've noticed the warning appears when the script contains a plt.show(). See the following examples

Example 1

# This script is called plot.py
import matplotlib
import matplotlib.pyplot as plt

from matplotlib.offsetbox import AnnotationBbox, HPacker, TextArea, VPacker

print(matplotlib.get_backend())

fig, ax = plt.subplots(1, 2, figsize=(12, 6), layout="constrained")

offsetbox = VPacker(
    children=[
        HPacker(
            children=[
                TextArea(
                    "Some weight",
                    textprops={"size": 42}
                )
            ],
            pad=0, 
            sep=0,
            align="baseline"
        )
    ], 
    pad=0, 
    sep=0,
    align="left"
)
ab1 = AnnotationBbox(
    offsetbox,
    (0.5, 0.5),
    xycoords="axes fraction",
    box_alignment=(0.5, 0.5),
    pad=0
)
ax[0].add_artist(ab1)

fig.set_facecolor("w")
fig.savefig("plot.png", dpi=300)

python plot.py 
TkAgg

Example 2

It's like the example above, but it includes plt.show() right below fig.savesig("plot.png", dpi=300). This is the output

TkAgg
/home/tomas/anaconda3/envs/flexitext/lib/python3.10/tkinter/__init__.py:839: UserWarning: constrained_layout not applied because axes sizes collapsed to zero.  Try making figure larger or axes decorations smaller.
  func(*args)

And this is how it looks in the viewer

@rcomer don't hesitate to ask if you want me to report this in the PR

[rcomer]

Oh yikes! I confirm I have reproduced that with both TkAgg and QtAgg. I can't reproduce it with the simpler example from matplotlib/matplotlib#24453 though. So may be something specific to VPacker and HPacker?

Edit: actually with QtAgg I see the bad positioning but not the warning.

[rcomer]

It might be worth opening a new issue on Matplotlib about this one. It seems to be specific to using plt.show after savefig. If there is no call to savefig, what's in the viewer looks fine. If I just call savefig twice, both saved images are fine. I also just found that what's in the viewer is different depending whether I call fig.savefig or plt.savefig first.

[tomicapretto]

Thanks for all the support and details @rcomer! Will open an issue later today.

Very interesting how these things interact!