feat(notebook): start jupyterlab servers from any branch and commit

[lorenzo-cavazzi]

Add the possibility to start a Jupyterlab server form any branch and commit

If the server is already running, the user can connect directly from the launch page.
A preview is available here: https://lorenzotest.dev.renku.ch/
It already includes full URL paths from this PR: SwissDataScienceCenter/renku-notebooks#181

---

closes #416
addresses SwissDataScienceCenter/renku#437

[lorenzo-cavazzi]

Currently, the branch parameter doesn't go through the notebook API, so each notebook appears to be on master. If the commit is not available in that branch, the history shown by git log seems to be compromised.
Waiting for SwissDataScienceCenter/renku-notebooks#90 to be fixed

[ciyer]

I have a few very minor changes.

[ciyer]

First of all -- this is a great feature! I'm looking forward to making use of it! I should have tested it earlier, and I'm sorry these comments are coming so late.

1. Can the branch and commit be defaulted to master and the most recent commit, respectively? Those will be the most common choices and the interaction would be greatly streamlined with defaults there. (Branch is defaulted on Chrome but not on Safari...)
2. The branch and commit settings do not work on Safari/Mac. They do work on Chrome and Firefox, so I'm not sure what is going on there.
3. The notebook server does not seem to actually be at the requested commit. See the screenshot below. The URL indicated that we should be at commit c735d545, but git log shows that we are at a later commit.

On Safari, I see the followings in the console when I try to click on the settings popup:

[Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in UncontrolledTooltip (at Notebooks.present.js:439)
    in StartNotebookBranchesOptions (at Notebooks.present.js:373)
    in label (created by Label)
    in Label (at Notebooks.present.js:370)
    in div (created by FormGroup)
    in FormGroup (at Notebooks.present.js:369)
    in div (created by FormGroup)
    in FormGroup (at Notebooks.present.js:408)
    in StartNotebookBranches (at Notebooks.present.js:347)
    in form (created by Form)
    in Form (at Notebooks.present.js:346)
    in div (created by Col)
    in Col (at Notebooks.present.js:344)
    in div (created by Row)
    in Row (at Notebooks.present.js:343)
    in StartNotebookServer (created by Connect(StartNotebookServer))
    in Connect(StartNotebookServer) (at Notebooks.container.js:269)
	warningWithoutStack (1.chunk.js:242775)
	warnAboutUpdateOnUnmounted (1.chunk.js:261656)
	scheduleWork (1.chunk.js:263143)
	enqueueSetState (1.chunk.js:253851)
	setState (1.chunk.js:302944)
	toggle (1.chunk.js:312168)
	toggle
	toggle
	hide (1.chunk.js:311415)
	hide
	bound hide
[Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in UncontrolledPopover (at Notebooks.present.js:442)
    in StartNotebookBranchesOptions (at Notebooks.present.js:373)
    in label (created by Label)
    in Label (at Notebooks.present.js:370)
    in div (created by FormGroup)
    in FormGroup (at Notebooks.present.js:369)
    in div (created by FormGroup)
    in FormGroup (at Notebooks.present.js:408)
    in StartNotebookBranches (at Notebooks.present.js:347)
    in form (created by Form)
    in Form (at Notebooks.present.js:346)
    in div (created by Col)
    in Col (at Notebooks.present.js:344)
    in div (created by Row)
    in Row (at Notebooks.present.js:343)
    in StartNotebookServer (created by Connect(StartNotebookServer))
    in Connect(StartNotebookServer) (at Notebooks.container.js:269)
	warningWithoutStack (1.chunk.js:242775)
	warnAboutUpdateOnUnmounted (1.chunk.js:261656)
	scheduleWork (1.chunk.js:263143)
	enqueueSetState (1.chunk.js:253851)
	setState (1.chunk.js:302944)
	toggle (1.chunk.js:312097)
	toggle
	toggle
	show (1.chunk.js:311400)
	show
	bound show

This does not appear in Chrome.

[rokroskar]

The URL indicated that we should be at commit c735d545, but git log shows that we are at a later commit.

was there an autosave branch? That functionality may not take starting from arbitrary branches/commits into account properly.

[ciyer]

No, it was on master. I tried again with the latest version of the notebook component (renku/renku-notebooks:0.4.0-9d1a78b), but I still end up at the latest commit, even if I ask for an earlier one.

[rokroskar]

yes, you started from master but was there an autosave branch present?

[ciyer]

Yes, there was an autosave branch.

[lorenzo-cavazzi]

I updated the preview in https://lorenzotest.dev.renku.ch/

1. I have added the "auto select" logic to automatically select "master" as the default branch and the latest commit.
   Please mind that switching between branches has a different logic: it keeps the selected commit if it's available also on the other branch, otherwise it is reset (this doesn't happen if no commit is selected).
   I prefer this way because it is more explicit. Since everything is now auto-selected, a user may first change the commit, then the branch. If the last action affects the commit again, the user may be confused or he may not notice it at all. I am open to discuss this if anyone disagrees.
2. I have changed the branch and commit selection logic a little bit, I hope this could help to address the problem on safari. Let me know
3. @rokroskar I totally forgot about this during our last discussion in Bern. In the user interaction (pseudo)flowchart, we should at some point check if there is an autosaved branch and ask the user what to do (start from there/discard). The reference issue is New Jupyter server with auto-saved data #429 .
4. That error comes form the component <UncontrolledTooltip> in reactstrap, there is an issue on their repo to fix it Toggle called from unmounted Tooltips reactstrap/reactstrap#1255 . It happens when clicking on the refresh icon for branches/commits because the cog disappears and the toolitp was attached there. We could live with that until it's solved or switch to the standard <Tooltip> by manually implementing the logic.

P.S. At the moment there is a limitation: if a notebook server starts for the combination (branch1, commit1), it's not possible to start another one for (branch2, commit1). Will be solved in SwissDataScienceCenter/renku-notebooks#186.

[rokroskar]

@lorenzo-cavazzi the autosave problem that @ciyer encountered is a bug - the script that recovers from the autosave I believe only checks that it was made for the branch but not also for the commit. So if you have an autosave branch for master for a different commit, it will always reset you there.

Still, we should probably ask the user what they want to do with the autosave data...

[ciyer]

The auto select of branch and commit works very nicely!

If the problems with the settings popup have their source in a reactstrap bug, then let us wait for that to get fixed there. No need to add extra code to solve a problem that will get fixed at the source, since it is more an annoyance than a blocker.