Add a notebook in a wiki page

This is a minimal viable feature of the Collaboratory. It is work in progress. We plan to make it more user friendly in the future.

3

4

5

== Link to a notebook ==

6

7

The simplest way to link to a Jupyter Notebook which is stored in the Drive of a collab is to use the URL of the Lab link in the navigation menu of that collab. That link opens JupyterLab with its file browser focused on the appropriate Drive folder but it does not open any specific Notebook.

(% class="box" %)

(((

**Example:** //https:~/~/wiki.ebrains.eu/bin/view/Collabs/my-collab-name/Lab//

12

)))

13

14

Users can determine a direct link that will open the Jupyter Notebook by following these steps:

15

16

1. Open JupyterLab

17

1. Right-click on the Notebook file in the file browser of JupyterLab and select **Copy Shareable Link**

18

1. Edit the URL to:

19

11. remove anything before the last https:~/~/ (in cases where the URL has more than one)

20

11. replace the **/user///username///** by **/user-redirect/ **(note there is one fewer slash '/')

21

11. you should not have spaces in the URL, they appear as %20 or as a dash '-'

22

23

The resulting URL should look like:

(% class="box" %)

(((

//https:~/~/lab.ebrains.eu/user-redirect/lab/tree/drive/Shared%20with%20groups/my-collab-name/my-notebook-file.ipynb//

28

)))

29

30

== Embed a notebook viewer in a wiki page ==

31

32

=== Export a snapshot of a notebook as an HTML file ===

33

34

Go to [[https:~~/~~/lab.ebrains.eu>>https://lab.ebrains.eu]] , choose a notebook, optionally run it, and then export the notebook as HTML.

35

36

37

(% style="text-align:center" %)

38

[[image:lab_export_html.png]]

39

40

=== Upload the HTML file as wiki attachment ===

41

42

Go to the wiki page where to embed the notebook viewer. Before editing the wiki page, attach the HTML file generated above in the Attachment section at the bottom of the wiki page. Upload the HTML file. Remember the HTML filename as you will need it for the next step.

43

44

45

(% style="text-align:center" %)

46

[[image:upload_notebookviewer.png]]

----

=== Insert a "Jupyter Notebook Viewer" macro in a wiki page ===

51

52

Edit your wiki page (the one with the HTML attachment). Select a place in the wiki page where to add the notebook viewer. Click the cog icon to add a macro and select the "Jupyter Notebook Viewer" macro from the macro select dialog and click select.

53

In the "Filename" field, enter the name of the HTML file you have uploaded in the previous step. In our example this is //"hello_collab.html"//. Under revision, enter the revision of the attachment you want to use. In most cases using the default value will be ok. The revision number is the number that appears on the right of the uploaded filename in the attachment section. In our example above, the revision was the default 1.1 (see figure above).

54

In the "Height" field, specify the container height in pixels. Default is 500. If content overflows the browser displays vertical scrollbar.

55

56

Click the submit button.

57

58

(% style="text-align:center" %)

59

[[image:jupyter_nbviewer_macro.png]]

Save and view the wiki page. You should now see the saved snapshot of your notebook in your wiki page. In our example, it will look something like this.

64

65

Wiki source code of Add a notebook in a wiki page

The Collaboratory test 4

version	line-number	content
14.1	1	{{info}}
	2	This is a minimal viable feature of the Collaboratory. It is work in progress. We plan to make it more user friendly in the future.
	3	{{/info}}
	4
	5	== Link to a notebook ==
	6
	7	The simplest way to link to a Jupyter Notebook which is stored in the Drive of a collab is to use the URL of the Lab link in the navigation menu of that collab. That link opens JupyterLab with its file browser focused on the appropriate Drive folder but it does not open any specific Notebook.
	8
	9	(% class="box" %)
	10	(((
	11	Example: //https:~/~/wiki.ebrains.eu/bin/view/Collabs/my-collab-name/Lab//
	12	)))
	13
	14	Users can determine a direct link that will open the Jupyter Notebook by following these steps:
	15
	16	1. Open JupyterLab
	17	1. Right-click on the Notebook file in the file browser of JupyterLab and select Copy Shareable Link
	18	1. Edit the URL to:
	19	11. remove anything before the last https:~/~/ (in cases where the URL has more than one)
	20	11. replace the /user///username/// by /user-redirect/ (note there is one fewer slash '/')
	21	11. you should not have spaces in the URL, they appear as %20 or as a dash '-'
	22
	23	The resulting URL should look like:
	24
	25	(% class="box" %)
	26	(((
	27	//https:~/~/lab.ebrains.eu/user-redirect/lab/tree/drive/Shared%20with%20groups/my-collab-name/my-notebook-file.ipynb//
	28	)))
	29
	30	== Embed a notebook viewer in a wiki page ==
	31
	32	=== Export a snapshot of a notebook as an HTML file ===
	33
	34	Go to [[https:~~/~~/lab.ebrains.eu>>https://lab.ebrains.eu]] , choose a notebook, optionally run it, and then export the notebook as HTML.
	35
	36
	37	(% style="text-align:center" %)
	38	[[image:lab_export_html.png]]
	39
	40	=== Upload the HTML file as wiki attachment ===
	41
	42	Go to the wiki page where to embed the notebook viewer. Before editing the wiki page, attach the HTML file generated above in the Attachment section at the bottom of the wiki page. Upload the HTML file. Remember the HTML filename as you will need it for the next step.
	43
	44
	45	(% style="text-align:center" %)
	46	[[image:upload_notebookviewer.png]]
	47
	48	----
	49
	50	=== Insert a "Jupyter Notebook Viewer" macro in a wiki page ===
	51
	52	Edit your wiki page (the one with the HTML attachment). Select a place in the wiki page where to add the notebook viewer. Click the cog icon to add a macro and select the "Jupyter Notebook Viewer" macro from the macro select dialog and click select.
	53	In the "Filename" field, enter the name of the HTML file you have uploaded in the previous step. In our example this is //"hello_collab.html"//. Under revision, enter the revision of the attachment you want to use. In most cases using the default value will be ok. The revision number is the number that appears on the right of the uploaded filename in the attachment section. In our example above, the revision was the default 1.1 (see figure above).
	54	In the "Height" field, specify the container height in pixels. Default is 500. If content overflows the browser displays vertical scrollbar.
	55
	56	Click the submit button.
	57
	58	(% style="text-align:center" %)
	59	[[image:jupyter_nbviewer_macro.png]]
	60
	61
	62
	63	Save and view the wiki page. You should now see the saved snapshot of your notebook in your wiki page. In our example, it will look something like this.
	64
	65	{{JupyterNoteBookViewer filename="hello_collab.html"/}}