cocalc-jupyter ipywidgets: fully implement GridBoxModel and other layouts

[williamstein]

1. Put this code in a notebook:

from ipywidgets import Button, GridBox, Layout, ButtonStyle

header  = Button(description='Header',
                 layout=Layout(width='auto', grid_area='header'),
                 style=ButtonStyle(button_color='lightblue'))
main    = Button(description='Main',
                 layout=Layout(width='auto', grid_area='main'),
                 style=ButtonStyle(button_color='moccasin'))
sidebar = Button(description='Sidebar',
                 layout=Layout(width='auto', grid_area='sidebar'),
                 style=ButtonStyle(button_color='salmon'))
footer  = Button(description='Footer',
                 layout=Layout(width='auto', grid_area='footer'),
                 style=ButtonStyle(button_color='olive'))

GridBox(children=[header, main, sidebar, footer],
        layout=Layout(
            width='50%',
            grid_template_rows='auto auto auto',
            grid_template_columns='25% 25% 25% 25%',
            grid_template_areas='''
            "header header header header"
            "main main . sidebar "
            "footer footer footer footer"
            ''')
       )

2. It should look like this (in jupyter classic):

3. But in CoCalc it looks like this:

This is not surprising given the code in src/smc-webapp/jupyter/output-messages/widget.tsx which explicitly says this isn't fully implemented.

[williamstein]

WORKAROUND: Use JupyterLab or Jupyter Classic in CoCalc.
https://doc.cocalc.com/jupyter.html#classical-versus-cocalc

[williamstein]

Better link to the code -- https://github.com/sagemathinc/cocalc/blob/master/src/smc-webapp/jupyter/output-messages/widget.tsx#L419

It's probably not hard to actually implement this properly... I should really do it soon.

[williamstein]

@jasongrout check out how I fixed this via 4dfb08a if you want to be really annoyed! 🤷

[haraldschilly]

I'm reverting this, this breaks those controls.

[jasongrout]

@jasongrout check out how I fixed this via 4dfb08a if you want to be really annoyed! 🤷

Ouch :).

[williamstein]

@jasongrout check out how I fixed this via 4dfb08a if you want to be really annoyed! 🤷

Ouch :).

3405032

[williamstein]

I disabled the ipywidgets thing again since it evidently subtly broke something -- no clue why. In any case, another approach is instead of moving the widgets up one level in the DOM (thus replacing their parents), I can copy the CSS and styles up one level, so that the parents enforce the right layout. Maybe that is enough. I don't know. My guess is that the current approach confuses cleanup the phosphor widgets and causes a crash.

[williamstein]

This is fixed by #7687