Version 9.1 by chaney08 on 2021/09/02 17:06
Show last authors
1 This page describes multiple ways of referring to a Jupyter notebook from an element in the navigation panel of a collab in Wiki to open a Jupyter notebook in the collab window.
2
3 == Link to the Lab ==
4
5 The Lab link in each collab opens JupyterLab with its file browser focused on that collab's Drive. This does not open a specific notebook in JupyterLab; it is up to the user to select a notebook file from that folder.
6
7 **Example for a collab called my-collab-name, the Lab linkpoints in fact to the URL:**
8
9 **URL: **//https:~/~/wiki.ebrains.eu/bin/view/Collabs/my-collab-name/Lab//
10
11 == Link to a Jupyter Notebook ==
12
13 You can add a navigation element for a collab that will open a specific Jupyter notebook in that collab window. To do so, you first have to determine the URL of the Jupyter notebook and then add a page of type iFrame with the link to the notebook.
14
15 === Getting the relevant URL ===
16
17 1. Open the Lab
18 1. In the file browser of JupyterLab, browse to the specific Notebook file to be linked, right-click on the Notebook file and select "Copy Shareable Link"**. **You now have the URL you need in the browser buffer.
19
20 === Creating the navigation element ===
21
22 Now that you have the URL you need, to create a navigation element linking to the notebook, simply go to the collab you want to add the navigation element to.
23
24 To add a **Top-level **navigation element, you need to go to the main page of a the collab in question and click "Create." See the following image for an example.[[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/1619614141909-944.png?rev=1.1||alt="1619614141909-944.png"]]
25
26 If you cannot see the "Create" button, you do not have the appropriate edition rights for this collab, and you need to talk to the collab admin about getting those rights.
27
28 Otherwise, if you click on create, you will get a "Create Page" screen. You need to fill out the title, and when this is done, it is important to click on the "Integrate external page with an iFrame" page type, as shown in the following image.
29
30 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/1619614348194-886.png?rev=1.1||alt="1619614348194-886.png"]]
31
32 When you click on the green "Create" button, you will be brought to a page that will ask you to enter a URL (you can also change the title from this page). Use the URL you retrieved in the "Getting the Relevant URL" section. Once you click on “Create,” your new navigation element will be created with the title you specified
33
34 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/1619614515992-874.png?width=163&height=150&rev=1.1||alt="1619614515992-874.png" height="150" width="163"]]
35
36 This link will bring you straight to the relevant notebook.
37
38 If you want a **sub-menu **navigation element, the only difference is where you select the initial "Create" button. In the example images and using the same example collab, if you click on the "Expandable selection" wiki page, you have the option to click "Create" as seen in the following image.
39
40 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/1619614700438-489.png?rev=1.1||alt="1619614700438-489.png"]]
41
42 If you click on the "Create" button in the above image and follow the exact same process as the one detailed above, you will end up with the same link as a sub-menu instead of a top-level navigation element. In the above image, you can see "SubLinkDemo" under "Expandable selection." This functions exactly in the same way as the "Test link to my test Notebook" link created earlier, except it is a sub-menu.
43
44 //NOTE: These instructions only apply if use the default selections, you can manually change the page location when creating a page which will change how this works, as seen in the figure below~://
45 [[image:1625823634282-821.png||height="159" width="450"]]
46
47 == Embed a notebook viewer in a wiki page ==
48
49 Export a snapshot of a notebook as an HTML file. Open the Lab, choose a notebook, optionally run it, and then export the notebook as HTML.
50
51 (((
52 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/lab_export_html.png?rev=1.1||alt="lab_export_html.png" height="368" width="600"]]
53 )))
54
55 Upload the HTML file as an attachment to a wiki page
56
57 Go to the wiki page where you want to embed the notebook viewer. Before editing the wiki page, attach the HTML file generated above in the Attachments 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.
58
59
60 (((
61 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/upload_notebookviewer.png?rev=1.1||alt="upload_notebookviewer.png" height="324" width="600"]]
62 )))
63
64 Now insert a "Jupyter Notebook Viewer" macro in the wiki page.
65
66 1. 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, select the "Jupyter Notebook Viewer" macro from the "Select macro" dialogue, and click select.
67 1. 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 the example above, the revision was the default 1.1 (see figure above).
68 1. In the "Height" field, specify the container height in pixels. Default is 500. If content overflows, the browser will display a vertical scrollbar.
69 1. Click the submit button.(((
70 [[image:https://wiki.ebrains.eu/bin/download/Collabs/the-collaboratory/how-to/Add%20a%20notebook%20in%20a%20wiki%20page/WebHome/jupyter_nbviewer_macro.png?rev=1.2||alt="jupyter_nbviewer_macro.png" height="809" width="600"]]
71 )))
72 1. Save and view the wiki page. You should now see the saved snapshot of your notebook in your wiki page.