{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Welcome to Jupyter Notebook v7! 👋\n",
    "\n",
    "Jupyter Notebook v7 is built using the same components as JupyterLab, and reuses a lot of the work from the JupyterLab community by leveraging the new prebuilt (federated) extension system."
   ]
  },
  {
   "attachments": {
    "212ecd19-156e-48dd-99c7-e2ee7457de6f.png": {
     "image/png": "[encoded data, 18188 characters]"
    },
    "2d33971b-509e-433b-809e-2f0861a13105.png": {
     "image/png": "[encoded data, 28120 characters]"
    },
    "5aa6b072-c4d7-47de-9e75-0a107a37e2f2.png": {
     "image/png": "[encoded data, 31660 characters]"
    },
    "c448a783-da5a-499b-a52d-62be28a72438.png": {
     "image/png": "[encoded data, 26740 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Files 📂 and Running Sessions 🏃‍♀️\n",
    "\n",
    "Jupyter Notebook lets you navigate the files in a separate browser tab. \n",
    "\n",
    "Go ahead and click on the Jupyter icon in the top left corner!\n",
    "\n",
    "![image.png](attachment:212ecd19-156e-48dd-99c7-e2ee7457de6f.png)\n",
    "\n",
    "It will open a new browser tab with the listing of the files on the server:\n",
    "\n",
    "![image.png](attachment:5aa6b072-c4d7-47de-9e75-0a107a37e2f2.png)\n",
    "\n",
    "It also shows the list of running sessions and terminals in the `Running` tab:\n",
    "\n",
    "![image.png](attachment:c448a783-da5a-499b-a52d-62be28a72438.png)\n",
    "\n",
    "Alternatively it is also possible to access this page using the command in the `View` menu:\n",
    "\n",
    "![image.png](attachment:2d33971b-509e-433b-809e-2f0861a13105.png)"
   ]
  },
  {
   "attachments": {
    "72f98bea-d61c-40cd-8f56-29df50ae5f8d.png": {
     "image/png": "[encoded data, 67772 characters]"
    },
    "86ac8b15-8a6b-4d4d-b315-0c8a73870e3b.png": {
     "image/png": "[encoded data, 42660 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Editing Files 🖊️\n",
    "\n",
    "Jupyter Notebook also has support for editing files. Double-click on a file (or `Right Click > Open`) to open the editor:\n",
    "\n",
    "![image.png](attachment:72f98bea-d61c-40cd-8f56-29df50ae5f8d.png)\n",
    "\n",
    "![image.png](attachment:86ac8b15-8a6b-4d4d-b315-0c8a73870e3b.png)"
   ]
  },
  {
   "attachments": {
    "88ef6621-8ef1-4174-939c-3dcd8d9166ef.png": {
     "image/png": "[encoded data, 84520 characters]"
    },
    "9016e117-00db-490f-80c4-fa3ed6766d0f.png": {
     "image/png": "[encoded data, 22792 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Terminals 🖥️\n",
    "\n",
    "To create a new Terminal, select `File > New > Terminal` in the menu:\n",
    "\n",
    "![image.png](attachment:9016e117-00db-490f-80c4-fa3ed6766d0f.png)\n",
    "\n",
    "The terminal opens in a new browser tab:\n",
    "\n",
    "![image.png](attachment:88ef6621-8ef1-4174-939c-3dcd8d9166ef.png)"
   ]
  },
  {
   "attachments": {
    "72198f40-0581-4a18-bc23-8b4674351a97.png": {
     "image/png": "[encoded data, 108552 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Command Palette 🎨\n",
    "\n",
    "Jupyter Notebook includes a command palette, just like in JupyterLab.\n",
    "\n",
    "Hit `Ctrl-Shift-C` or `Accel-Shift-C` to activate it. Or via the menu with `View > Activate Command Palette`:\n",
    "\n",
    "![image.png](attachment:72198f40-0581-4a18-bc23-8b4674351a97.png)\n",
    "\n",
    "Using the palette is very convenient and can give a significant productivity boost over time!"
   ]
  },
  {
   "attachments": {
    "9c47f73c-24f2-4c1a-aa3a-52e231144057.png": {
     "image/png": "[encoded data, 77196 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Themes 🌈\n",
    "\n",
    "Since Jupyter Notebook v7 is heavily built on top of JupyterLab, it also has support for a Dark Mode! 🕶️\n",
    "\n",
    "Go to `Settings > Theme > JupyterLab Dark` to select the theme:\n",
    "\n",
    "![image.png](attachment:9c47f73c-24f2-4c1a-aa3a-52e231144057.png)\n",
    "\n",
    "New themes can be installed using the federated extension system. These themes will be compatible with both JupyterLab and Jupyter Notebook."
   ]
  },
  {
   "attachments": {
    "ac1323eb-c6e0-4b7c-80f3-7bf5f84adf98.png": {
     "image/png": "[encoded data, 253980 characters]"
    }
   },
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Zen Mode 😌\n",
    "\n",
    "This is an exclusivity in Jupyter Notebook v7 😎\n",
    "\n",
    "Activate the palette and choose `Toggle Zen Mode`. The interface will focus on the notebook and the notebook only!\n",
    "\n",
    "![image.png](attachment:ac1323eb-c6e0-4b7c-80f3-7bf5f84adf98.png)\n",
    "\n",
    "Press `Escape` to exit, or re-run the `Toggle Zen Mode` command from the palette."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Third Party Extensions 🧩\n",
    "\n",
    "Jupyter Notebook v7 supports third-party extensions developed for JupyterLab 3.0+, using the new distribution system. These extensions can be installed via `pip`.\n",
    "\n",
    "For example the extension to enable Jupyter Widgets rendering in both JupyterLab and Jupyter Notebook can be installed using the following command (run the cell): "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install ipywidgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now reload the page and resume from here. In the next section we will be able to create and use Jupyter Widgets!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Widgets\n",
    "\n",
    "Now let's instantiate a new widget:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "slideshow": {
     "slide_type": "fragment"
    }
   },
   "outputs": [],
   "source": [
    "from ipywidgets import IntSlider\n",
    "\n",
    "slider = IntSlider()\n",
    "slider"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Rich Display\n",
    "\n",
    "Just like in many Jupyter Frontends, Jupyter Notebook supports rich display rendering. For example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import Latex\n",
    "\n",
    "Latex(\n",
    "    r\"\"\"\\begin{eqnarray}\n",
    "\\nabla \\times \\vec{\\mathbf{B}} -\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{E}}}{\\partial t} & = \\frac{4\\pi}{c}\\vec{\\mathbf{j}} \\\\\n",
    "\\nabla \\cdot \\vec{\\mathbf{E}} & = 4 \\pi \\rho \\\\\n",
    "\\nabla \\times \\vec{\\mathbf{E}}\\, +\\, \\frac1c\\, \\frac{\\partial\\vec{\\mathbf{B}}}{\\partial t} & = \\vec{\\mathbf{0}} \\\\\n",
    "\\nabla \\cdot \\vec{\\mathbf{B}} & = 0\n",
    "\\end{eqnarray}\"\"\"\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Matplotlib figures:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "\n",
    "x = np.linspace(0, 10, 100)\n",
    "\n",
    "plt.plot(x, np.sin(x))\n",
    "plt.plot(x, np.cos(x))\n",
    "\n",
    "plt.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or even HTML:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import HTML, display\n",
    "\n",
    "s = \"\"\"<table>\n",
    "<tr>\n",
    "<th>Header 1</th>\n",
    "<th>Header 2</th>\n",
    "</tr>\n",
    "<tr>\n",
    "<td>row 1, cell 1</td>\n",
    "<td>row 1, cell 2</td>\n",
    "</tr>\n",
    "<tr>\n",
    "<td>row 2, cell 1</td>\n",
    "<td>row 2, cell 2</td>\n",
    "</tr>\n",
    "</table>\"\"\"\n",
    "h = HTML(s)\n",
    "display(h)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## That's it!\n",
    "\n",
    "Hope you enjoyed the tour. If you have more question or any other issues, don't hesitate to go to the repository on GitHub!\n",
    "\n",
    "https://github.com/jupyter/notebook"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.10.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
