Figure not shown when final example is run on Linux

[benmaier]

Hi @psteegstra, thank you so much for your code examples, really helpful! I have adapted your code (cited ofc) in a separate project and have run into the following problem.

When I run your final example (Interactive sine wave) on a notebook on Ubuntu, everything is displayed but the figure. If I run the same thing on the same environment on Mac OSX, the figure is properly displayed. I have no idea where I have to start looking for the bug (because no error message is displayed either), so I thought I would just ask whether you would have a clue for me where to start looking.

Thanks!

[kervel]

Hello. In the notebook there are multiple sine plots. do you see none of them ? then it will be a matplotlib problem. If not, did you install the requirements with the same versions as mentioned in requirements.txt ?

[benmaier]

It's this example:

%matplotlib widget
import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

def make_box_layout():
     return widgets.Layout(
        border='solid 1px black',
        margin='0px 10px 10px 0px',
        padding='5px 5px 5px 5px'
     )

class Sines(widgets.HBox):
    
    def __init__(self):
        super().__init__()
        output = widgets.Output()

        self.x = np.linspace(0, 2 * np.pi, 100)
        initial_color = '#FF00DD'

        with output:
            self.fig, self.ax = plt.subplots(constrained_layout=True, figsize=(5, 3.5))
        self.line, = self.ax.plot(self.x, np.sin(self.x), initial_color)
        
        self.fig.canvas.toolbar_position = 'bottom'
        self.ax.grid(True)

        # define widgets
        int_slider = widgets.IntSlider(
            value=1, 
            min=0, 
            max=10, 
            step=1, 
            description='freq'
        )
        color_picker = widgets.ColorPicker(
            value=initial_color, 
            description='pick a color'
        )
        text_xlabel = widgets.Text(
            value='', 
            description='xlabel', 
            continuous_update=False
        )
        text_ylabel = widgets.Text(
            value='', 
            description='ylabel', 
            continuous_update=False
        )

        controls = widgets.VBox([
            int_slider, 
            color_picker, 
            text_xlabel, 
            text_ylabel
        ])
        controls.layout = make_box_layout()
        
        out_box = widgets.Box([output])
        output.layout = make_box_layout()

        # observe stuff
        int_slider.observe(self.update, 'value')
        color_picker.observe(self.line_color, 'value')
        text_xlabel.observe(self.update_xlabel, 'value')
        text_ylabel.observe(self.update_ylabel, 'value')
        
        text_xlabel.value = 'x'
        text_ylabel.value = 'y'
        

        # add to children
        self.children = [controls, output]
    
    def update(self, change):
        """Draw line in plot"""
        self.line.set_ydata(np.sin(change.new * self.x))
        self.fig.canvas.draw()

    def line_color(self, change):
        self.line.set_color(change.new)

    def update_xlabel(self, change):
        self.ax.set_xlabel(change.new)

    def update_ylabel(self, change):
        self.ax.set_ylabel(change.new)
        
        
Sines()

Both on OSX and mybinder.org, the matplotlib figure is is shown on the right hand side of the HBox. On Ubuntu, it's not.

the package versions are not exactly the same as in the example and I'm currently having trouble settig up jupyter in a virtual env. Also I have limited access to a Linux machine, I'll report back with results made in an env with the exact same requirements shortly.

[cdaly2]

I have the same problem. Also on Ubuntu. Using either vscode with the Jupyter Lab backend, or using docker jupyter/datascience-notebook.

The code that doesn't work is:

output = widgets.Output()
 
# create some x data
x = np.linspace(0, 2 * np.pi, 100)
 
# default line color
initial_color = '#FF00DD'
 
with output:
    fig, ax = plt.subplots(constrained_layout=True, figsize=(6, 4))
     
# move the toolbar to the bottom
fig.canvas.toolbar_position = 'bottom'
ax.grid(True)    
line, = ax.plot(x, np.sin(x), initial_color)

I also use the variant:

output = widgets.Output(layout={'border': '1px solid black'})
 
# create some x data
x = np.linspace(0, 2 * np.pi, 100)
 
# default line color
initial_color = '#FF00DD'
 
with output:
    print("output widget capture!")
    fig, ax = plt.subplots(constrained_layout=True, figsize=(6, 4))
     
# move the toolbar to the bottom
fig.canvas.toolbar_position = 'bottom'
ax.grid(True)
with output:
    line, = ax.plot(x, np.sin(x), initial_color)

The plot is displayed immediately (i.e. it is not part of the output) and when I display the output, it only contains the text "output widget capture!"
It seems that this bug should be reported elsewhere, but I don't know where to report it.