Change the side panel to a console window.

[BoPeng]

With long discussions on the JupyterLab side, it is becoming clear that the side panel and related features will be implemented in JLab console window. That is to say, the console window

1. will be destination of line by line execution (the runInConsole feature)
2. will be used to display transient_display_data (the transient_message plugin)

It is hard to say which interface is better but the console window has the advantage of saving all histories, which will fix #143 because the output of the preview magic will not overwrite the error message from previous statement.

[BoPeng]

Work in progress:

[BoPeng]

@gaow @HenryLeongStat

Still need to fix execution counter and perhaps other stuff, but let me know how you think of this new side panel. It resembles the console window of JupyterLab.

[HenryLeongStat]

Liking it on my end!!

When I expand the cell, the color and the little triangle don't expand when the size of the cell reaches to a certain size.

[BoPeng]

Cannot reproduce. There is a maximum of 1/2 width of the side panel but I do not see the triangle goes into the middle. I am still tweaking, perhaps you are not at the latest trunk? Note that you need to do python -m sos_notebook.install restart the browser after pip install . -U.

[HenryLeongStat]

The problem begins to show up when you have some history above and the scrollbar shows up:

[gaow]

@BoPeng I'm mostly on JupyterLab these days for SoS Notebook. Maybe missing some of the nice new developments here. But when i was just trying to reproduce @HenryLeongStat 's issue I noticed the side-panel can be dragged out of the embedded page and become floating again and cannot be easily restored. ...

[BoPeng]

I disabled dragging yesterday, how did you drag?

[gaow]

I pulled the latest master, hovered over the side panel, and dragged by moving my mouse to the light yellow region on the top of the side panel:

[HenryLeongStat]

Interesting... I can't drag the side panel.

[BoPeng]

@gaow I believe that you forgot to do python -m sos_notebook.install because the screenshot is not the master.

[BoPeng]

I can now reproduce the middle triangle thing.

[BoPeng]

I think I will just remove the triangle because it is not usable.

[gaow]

I have a local Makefile that always does python -m sos_notebook.install. Let me see what is going on here ...

[HenryLeongStat]

Exactly! Expanding the side panel doesn't need the triangle. For the color along with the code cell, it still looks good even it doesn't expand along with the code cell.

But for the history above, maybe better to change the color of the background of the code?

[BoPeng]

OK. Input background is restored, but the output zigzag (#153) remains. Checking if there is anyway to fix it.

[HenryLeongStat]

Looking good!!

[HenryLeongStat]

How about making the color of the "In [1]" rectangle small for solving the zigzag?

[BoPeng]

What do you mean?

[HenryLeongStat]

For example, the zigzag below is like

Is there a way to make the blue rectangle smaller? Or, changing yellow to transplant?

[BoPeng]

I have tried... The problem seems to be the because the output prompt was always clear, they did not bother to make input and output prompt exactly the same size. Instead, the output prompt was made a bit wider to indent the output.

[HenryLeongStat]

I see... And I see the reason why you changed the color of the background of the code in history of the side panel into the same color as the "blue" rectangle.