Updated for JuypterLab interface

Author: bjmorgan

CH40208/notebooks_introduction/images/code_cell.png

@@ -6,30 +6,26 @@ There are a few sections of the Notebook interface that will be useful to know y
 
 ![](images/notebook_interface.png)
 
-1. The jupyterhub logo. Clicking on this takes you back to your **Notebook Dashboard**.
-2. The name of your Notebook. Please do not leave this as `Untitled.ipynb`. You will thank me later.
-3. Information about when this Notebook was last saved. (or, in Jupyter parlance, when a **checkpoint** was last created.).
-    You can force your Notebook to save using:
-    - ⌘S (Mac) / alt+S (Windows)
-    - Select `File` -> `Save and Checkpoint`.
-4. The **Notebook Menubar**. This contains:
-    - `File`: File operations, e.g. create a new Notebook, open an existing Notebook, Copy your current Notebook, Save, etc.
-    - `Edit`: Manipulating **cells**
-    - `View`: Options for what appears on your screen, and for toggling various aspects on and off.
-    - `Cell`: Executing one of more **cells**, and manipulating the output of **cells**.
-    - `Kernel`: Stop, start, etc. the **kernel**.
-    - `Widgets`: Managing plugins and extensions that you might have installed.
-    - `Help`: Access to the built-in help.
-        - Particularly useful items here are `Help` → `User Interface Tour` and `Help` → `Notebook Help`.
-5. The **Notebook Toolbar**
-    This contains buttons for the most common actions for working with Notebooks. Hovering you mouse over each button will show you a popup with some information about the associated action.
-6. The currently selected cell.
-7. Indicates whether a cell has run or not, and for cells that have been run, the order they ran in.
-8. The text area for the **code cell**. This is where you can type in Pyton code to then run.
+**The notebook tab**: This shows your notebook filename (e.g., `Untitled1.ipynb`). You can have multiple notebooks open in different tabs. You can rename your notebook by right-clicking on the tab and selecting `Rename Notebook…`. When you create a new notebook, it will be called `Untitled<N>.ipynb`. It is good practice to rename your notebooks when you create them so that you can more easily find them again later.
+
+**The notebook toolbar**: Contains the most commonly used actions:
+- 💾 Save notebook
+- \+ Add a new cell below
+- ✂️  Cut selected cells
+- 📋 Copy and paste cells
+- ▶️  Run the current cell
+- ⏹️ Interrupt the kernel
+- 🔄 Restart the kernel
+- `Code ▼` Cell type selector (change between Code, Markdown, and Raw)
+
+**The cell**: Below the toolbar is a "cell". This is where you type your Python code. A notebook can have multiple cells, which allows you to organise your code into components.
 
 ## Cells
 
 The body of the notebook is made up of **input cells**. When you open a new notebook it will contain only one empty cell; this is the grey box with `In [  ]:` to the left. 
+
+![](images/code_cell.png)
+
 There are three types of input cells where you can add content to a notebook.
 
 ### Code cells
@@ -38,7 +34,7 @@ There are three types of input cells where you can add content to a notebook.
 A **code cell** can accept code, that can then be executed (run). 
 When the code in a code cell is run, the notebook displays any output generated by that code directly below the corresponding cell.
 
-![](images/code_cell.png)
+![](images/code_cell_run.png)
 
 In the figure above, the code cell has the Python code `print(4+3)` entered.
 This cell has then been run, which executes (runs) the code in the cell: in this instance we add 4 and 3, and print the result.
@@ -49,19 +45,17 @@ A **markdown cell** contains text formatted using [Markdown](https://www.markdow
 When a **markdown cell** is run, the markdown is converted into HTML, with the formatted text then shown _in place_ of the cell.
 **Markdown cells** can be used to include formatted text, mathetmatical equations, images, tables, and more types of rich media.
 
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/md_cell.png)
+![](images/md_cell.png)
 This figure shows a markdown cell being edited, with raw markdown entered.
 
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/formatted_md.png)
+![](images/formatted_md.png)
 This figure shows the same cell after it has been run, with the markdown converted to formatted text.
 
 ### Raw cells
 Input entered into **Raw cells** is not converted when the cell is run. These cells are usually used to provide additional information for converting Jupyter Notebooks to a different format (e.g., a PDF document). You almost certainly will not need to use **Raw cells** during this course, but might be curious about this third cell type.
 
 ### Switching cell type.
-Cells can be switched between **code** and **markdown** using the **Cell** &rarr; **Cell Type**  menu options:
-
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/cell_switch.png)
+Cells can be switched between **code** and **markdown** using the `Code ▼` menubar option.
 
 You can also switch between cell types in **commmand mode** (see below) using the keyboard shortcuts `Y` for **code**, `M` for **markdown**, and `R` for **raw**.
 
@@ -73,26 +67,24 @@ A cell is marked as **active** if it is highlighted. The colour of the highlight
 
 **Command mode** is indicated by a blue highlight. When you are in command mode you can use **keyboard shortcuts** to cut, paste, and move cells, etc. You can see all the **keyboard shortcuts** under `Help` &#8594; `Keyboard Shortcuts`.
 
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/command_mode.png)
-
 #### Edit mode
 
 If you are in **command mode** then pressing `Enter` or clicking in the input text area of a cell will switch you to **edit mode**. **Edit mode** is indicated by a green highlight, and a pencil icon in the top right of the Notebook window.
 
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/edit_mode.png)
-
 Typing now inserts text into the currently active cell:
 
-![](https://github.com/pythoninchemistry/ch40208/raw/main/CH40208/notebooks_introduction/images/edit_mode_filled.png)
-
 To get out of **Edit Mode**, and back into **Command Mode**, press `Esc` or click outside the text entry area.
 
 ## Running cells
-Each cell can consist of more than one line of input, which is not processed until the cell is executed, or &ldquo;run&rdquo;.
-You can run the currently active cell from the menu bar by clicking **Cell** &rarr; **Run Cells**, or by clicking on the &lqduo;play&&rdquo;; icon button in the menu bar.
-You can also run the currently selected cell using keyboard shortcuts:
-- **ctrl** + **enter**: Run the currently selected cell and keep this cell active.
-- **shift** + **enter**: Run the currently selected cell and move the focus to the next cell below. If there is not a cell below, a new empty cell will be created.
-- **alt** + **enter** or **option** + **enter**: Run the currently selected cell and create a new empty cell immediately below.
-
-You can also run every cell in a notebook, from top to bottom, by selecting **Kernel** &rarr; **Restart & Run All** from the menu bar. This **halts** your Jupyter notebook and restarts it, before running each cell in sequence from the top down. 
+Each cell can consist of more than one line of input, which is not processed until the cell is executed, or "run".
+
+You can run cells using:
+- The ▶️ button in the toolbar
+- **Keyboard shortcuts:**
+  - **Shift + Enter**: Run cell and move to next cell
+  - **Ctrl + Enter**: Run cell and stay on same cell  
+  - **Alt + Enter**: Run cell and insert a new cell below
+
+You can run all cells in a notebook using the ⏩ (Run All) button in the toolbar, or by right-clicking on a cell and selecting "Run All Above" or "Run All Below".
+
+To restart the kernel and run all cells from scratch, use the 🔄 button in the toolbar followed by the ⏩ button, or right-click on any cell and select "Restart Kernel and Run All Cells...". This halts your Jupyter notebook, clears all stored variables, and runs each cell in sequence from top to bottom.

CH40208/notebooks_introduction/images/code_cell_run.png

@@ -23,6 +23,8 @@ If this is the first time you have logged on to Noteable, you will see the follo
 :width: 700px
 :align: center
 ```
+<br/>
+
 On the left is the Jupyter **File Browser**, which shows all of your files and folders/directories saved in Noteable. On the right is the **Launcher**, which contains buttons for quickly creating notebooks and shells.
 
 ## Creating a new Jupyter notebook
@@ -33,8 +35,9 @@ To create a new Jupyter notebook, click on the `Python 3 (ipykernel)` button in
 :width: 300px
 :align: center
 ```
-
+<br/>
 This will open a new Jupyter Notebook document in a new browser window, which should look like this:
+<br/>
 
 ```{image} images/new_notebook_example.png
 :width: 600px
@@ -43,14 +46,15 @@ This will open a new Jupyter Notebook document in a new browser window, which sh
 
 ## Renaming notebooks
 
-We will look at using Jupyter Notebooks in more detail later. For now, notice at the top you have the text &ldquo;Untitled&rdquo;. This is a placeholder filename that has been assigned to this new Notebook you have just created. To rename your notebook, right click on `Untitled.ipynb` in the **File Browser** and click rename.
+We will look at using Jupyter Notebooks in more detail later. For now, notice at the top you have the text "Untitled". This is a placeholder filename that has been assigned to this new Notebook you have just created. To rename your notebook, right click on `Untitled.ipynb` in the **File Browser** and click rename.
 
 **Do not delete the `.ipynb` extension when renaming your notebook - Noteable will break if you do!**
 
 ```{image} images/rename_notebook_dialogue.png
 :width: 500px
 :align: center
 ```
+<br/>
 
 Rename your notebook to something more meaningful (e.g., &ldquo;Lab 0.ipynb&rdquo;) by typing the new name and hitting Enter.
 
@@ -67,6 +71,7 @@ This can be done using the square stop button, located on the notebook toolbar.
 :width: 400px
 :align: center
 ```
+<br/>
 
 
 If that doesn't work, then you can restart the Kernel (think of this as a reboot of the system) by clicking the `Kernel` tab of the Notebook menu followed by the `Restart Kernel` option.