Issue with GridspecLayout (Ipywidgets) on Colaboratory - google-colaboratory

Question

I'm trying to place two graphs in individual cells of the grid, created using GridspecLayout from Ipywidgets. However, the plots appear to the left of the interactive controls, instead of below as supposed to.
This picture here shows the issue in Colaboratory, while this picture here shows how I expect it to look (from Jupyter Notebook via Anaconda)
The code below reproduces both pictures, depending on the front end used.
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import ipywidgets as widgets
from ipywidgets import GridspecLayout,HTML,Layout,interactive_output
grid = GridspecLayout(5,8)
testTable = pd.DataFrame({'a':np.random.randn(10),
'b':np.random.randn(10),
'c':np.random.randn(10),
'd':np.random.randn(10),
'e':np.random.randn(10)})
def plotData(x):
plt.figure()
if len(x) > 1:
plt.plot(testTable.loc[list(x)])
else:
plt.plot(testTable.loc[x])
plt.show()
# header
grid[0,:] = widgets.HTML(value = f"<center><font size = 6><b><font color='red'>{'Historical Overview'}</b></center>")
# Sub-headlines
grid[1,2] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Historical Development Graph'}</u></center>")
grid[1,4] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Upper Pie Chart'}</u></center>")
grid[1,6] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Lower Pie Chart'}</u></center>")
# Interactive controls and descriptions
grid[2,1] = widgets.HTML(value = f"<center><font color='red'>{'Categories:'}")
grid[2,2] = widgets.SelectMultiple(options=testTable.index,
disabled=False,
value = [0])
grid[2,3] = widgets.HTML(value = f"<center><font color='red'>{'Time periods:'}")
grid[2,4] = widgets.SelectMultiple(options=testTable.index,
value = [0],
disabled = False)
grid[2,5] = widgets.HTML(value = f"<center><font color='red'>{'Time periods:'}")
grid[2,6] = widgets.Select(options=testTable.columns,
value = 'a',
disabled = False)
# Graphs
grid[3,1:4] = widgets.interactive_output(plotData, {'x':grid[2,2]});
grid[3,4:8] = interactive_output(plotData, {'x':grid[2,4]});
display(grid)
I'm working on Colaboratory and Jupyter Notebook via Anaconda, both via Chrome on Windows 10.
This has been tested on JupyterLab via Firefox on Mac as well, which is why I suspect it to be an issue with Colaboratory.
In advance, thank you.

Answer 1

If I copy/paste your code here
https://colab.research.google.com/notebooks/empty.ipynb
It displays as you wanted (I believe)
However I modified the grid a bit, as
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import ipywidgets as widgets
from ipywidgets import GridspecLayout,HTML,Layout,interactive_output
grid = GridspecLayout(10,3)
testTable = pd.DataFrame({'a':np.random.randn(10),
'b':np.random.randn(10),
'c':np.random.randn(10),
'd':np.random.randn(10),
'e':np.random.randn(10)})
def plotData(x):
plt.figure()
if len(x) > 1:
plt.plot(testTable.loc[list(x)])
else:
plt.plot(testTable.loc[x])
plt.show()
# header
grid[0,:] = widgets.HTML(value = f"<center><font size = 6><b><font color='red'>{'Historical Overview'}</b></center>")
# Sub-headlines
grid[1,0] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Historical Development Graph'}</u></center>")
grid[1,1] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Upper Pie Chart'}</u></center>")
grid[1,2] = widgets.HTML(value = f"<center><font size = 2><u><font color='red'>{'Lower Pie Chart'}</u></center>")
# Interactive controls and descriptions
grid[2,0] = widgets.HTML(value = f"<center><font color='red'>{'Categories:'}")
grid[3,0] = widgets.SelectMultiple(options=testTable.index,
disabled=False,
value = [0])
grid[2,1] = widgets.HTML(value = f"<center><font color='red'>{'Time periods:'}")
grid[3,1] = widgets.SelectMultiple(options=testTable.index,
value = [0],
disabled = False)
grid[2,2] = widgets.HTML(value = f"<center><font color='red'>{'Time periods II:'}")
grid[3,2] = widgets.SelectMultiple(options=testTable.index, value = [0], disabled = False)
#widgets.Select(options=testTable.columns, value = 'a', disabled = False)
# Graphs
grid[4:,0] = interactive_output(plotData, {'x':grid[3,0]});
grid[4:,1] = interactive_output(plotData, {'x':grid[3,1]});
grid[4:,2] = interactive_output(plotData, {'x':grid[3,1]});
display(grid)
And it shows