04_intro_to_lab.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction to JupyterLab\n",
    "## An overview of key features in JuptyerLab\n",
    "\n",
    "<img src=\"images/logos.3.600.wide.png\" width=\"600\" align='right'>\n",
    "\n",
    "### Chalmer Lowe\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Overview\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this session, we will explore a number of key features in JupyterLab's Integrated Development Environment that are necessary to gain familiarity with the interface and to progress through this lesson and subsequent lessons."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Objectives\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By the end of this lesson, students will be able to:\n",
    "\n",
    "* Use select components of the collapsible left sidebar\n",
    "* Use the menu bar\n",
    "* Understand and manipulate the workspace and workspace layout\n",
    "* Use the Launcher to open a notebook, a console, a terminal and a text editor\n",
    "* Manage files \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# JupyterLab Integrated Development Environment\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## JupyterLab\n",
    "\n",
    "Presuming that the install went successfully, we should have a JupyterLab Integrated Development Environment (IDE) open in a web browser window OR tab. If not, revisit the [Installation instructions](01_installation.ipynb) before proceeding.\n",
    "\n",
    "At this point, your default browser should be open (OR a new tab if your browser is already open) and you should have something that looks like this...\n",
    "\n",
    "<img src=\"images/basic_lab_screenshot.png\" width=\"800\">\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Troubleshooting:\n",
    "\n",
    "If you ever accidentally close your browser OR close the tab and want to get back to your Jupyter Lab workspace, you can look in your terminal for the Lab workspace URL. The URL includes a uniquely and randomly generated token that is included for security purposes.\n",
    "\n",
    "```bash\n",
    "http://localhost:8890/?token=52e8f40ad7316c325db8388bf7c16276718df53288ca9fb7\n",
    "```\n",
    "\n",
    "* `http://localhost:` - points your browser to the Lab server running on your computer\n",
    "* `8890` - points to a port on your computer where the server is listening\n",
    "* `?token=` - provides the security token to allow you to access the Lab server\n",
    "\n",
    "You may need to scroll around a bit to find the unique token, which is produced shortly after the Lab instance starts up:\n",
    "\n",
    "<img src=\"images/lab_token.png\" width=\"800\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exploring the IDE\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The JupyterLab IDE has many features, too many to go through all of them, but we will go through enough of the major features to get you up and running. Over the course of the tutorial, we will cover additional features and provide some references to where you can learn more on your own."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The collapsible left sidebar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Let's start with the collapsible left sidebar.\n",
    "\n",
    "The left sidebar is composed of multiple tabs:\n",
    "\n",
    "* **Files**: a file browser\n",
    "* **Running**: a list of running kernels and terminals\n",
    "* **Commands**: access to the command palette\n",
    "* **Tabs**: a list of all the open tabs\n",
    "\n",
    "<img src=\"images/left_sidebar.png\" width=\"450\">\n",
    "\n",
    "**NOTE**: depending on circumstances, there may also appear a fifth tab with an image of a wrench, which allows you to inspect individual cells in your Notebook."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The left sidebar can be collapsed or expanded by selecting “Show Left Sidebar” in the View menu or by clicking on the active sidebar tab (i.e. the highlighted tab):\n",
    "\n",
    "<img src=\"images/left_sidebar_collapsed.png\" width=\"280\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Managing files"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The File Browser has a row of buttons across the top, that allow you to:\n",
    "\n",
    "* **New file**: create new files via the Launcher\n",
    "* **New folder**: create new folders\n",
    "* **Upload**: upload files\n",
    "* **Refresh**: refresh the file lists\n",
    "\n",
    "<img src=\"images/file_browser_launcher.png\" width=\"600\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The menu bar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The menu bar at the top of the JupyterLab IDE has menus that include actions available in JupyterLab (where available, the menus include keyboard shortcuts). The default menus include:\n",
    "\n",
    "* **File**: menu items on files and directories\n",
    "* **Edit**: menu items related to editing documents and other activities\n",
    "* **View**: menu items that alter the appearance of JupyterLab\n",
    "* **Run**: menu items to run code in notebooks and code consoles\n",
    "* **Kernel**: menu items to manage kernels (separate processes for running code)\n",
    "* **Tabs**: menu items to manage open documents and activities in the workspace\n",
    "* **Settings**: menu items for settings and for an advanced settings editor\n",
    "* **Help**: menu items with JupyterLab and kernel help links\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"images/menu_screenshot.png\" width=\"550\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Using the Launcher"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To create new files OR launch new consoles and terminals, JupyterLab uses the Launcher.\n",
    "\n",
    "The Launcher will open as a tab in the JupyterLab workspace...\n",
    "\n",
    "There will be a number of buttons available to create new notebooks, or launch consoles and terminals, etc\n",
    "\n",
    "In this case, looking top to bottom, there are buttons to:\n",
    "\n",
    "* Create a Jupyter Notebook (or if you have other programming languages installed, there may be buttons for languages such as Julia)\n",
    "* Open a Jupyter Console\n",
    "* Open a terminal window\n",
    "* Open a text editor\n",
    "\n",
    "<img src=\"images/launcher_generic.png\" width=\"350\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Manipulating the workspace layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A very useful characteristic about the Jupyter Lab workspace is that the tabs can be dragged and dropped to change their order AND can be moved around so that they create a paneled layout.\n",
    "\n",
    "<img src=\"images/panels.png\" width=\"800\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Experience Points (XP)\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Open one of each of the following. \n",
    "\n",
    "* Jupyter Notebook\n",
    "* Python Console\n",
    "* Terminal\n",
    "* Text File\n",
    "\n",
    "Arrange them as shown. We will be using each of these shortly. Our initial focus will be on the notebook, so feel free to make that panel plenty big:\n",
    "\n",
    "<img src=\"images/panels_xp.png\" width='1000'>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When you complete this exercise, please put your green post-it on your monitor. \n",
    "\n",
    "If you want to continue on at your own-pace, please feel free to do so.\n",
    "\n",
    "<img src='./images/green_sticky.300px.png' width='200' style='float:left'>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Managing files\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The File Browser has a number of capabilities found in typical file explorer interfaces, such as:\n",
    "\n",
    "* Breadcrumbs to show the file path to the current folder (i.e. `> path > to > folder`)\n",
    "* Sort by name OR by modification date/time\n",
    "* Right-click menu w/ the following features\n",
    "    * Open files both in the workspace and in a new browser tab (using assorted viewers, where appropriate)\n",
    "    * Rename\n",
    "    * Delete, Cut, Copy, Paste\n",
    "    * Duplicate (one step Copy-Paste)\n",
    "    * Download\n",
    "    * Shutdown Kernel\n",
    "    * Copy Path\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Right-click menu\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**NOTE**: the right-click menu is context-sensitive and will change depending on what you click on. We will see some examples of this as the lesson progresses.\n",
    "\n",
    "<img src=\"images/right_click.png\" width=\"300\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Looks like you are done here! **Congrats**.\n",
    "\n",
    "Please proceed to the next lesson."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}