docs/layouts.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This page explains the multiple layouts components and all the options to control the layout of the dashboard.\n",
    "\n",
    "There are 4 main components of Jupyter-flex Dashboard: Pages, Sections, Cards and Cells and they have that same hierarchy meaning that Pages contain one or more Sections, Sections contain or or multiple Cards and Cards contain one or multiple cells.\n",
    "\n",
    "Cells are pretty self explanatory as they are the same as in Jupyter."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Cards\n",
    "\n",
    "A Card is an object that holds one or more Cells, these can be markdown cells or output cells that have outputs such as plots, text, widgets and more. \n",
    "\n",
    "To define a new Card you use a level-3 markdown header (`###`). Each card belongs in a Section and one Section can have one or more Cards.\n",
    "\n",
    "Any tagged ells (markdown or outputs) will be added to the current Card until a new Card, Section or Page is defined.\n",
    "\n",
    "The components of a Card are:\n",
    "\n",
    "1. The header: Based on the value of level-3 markdown header (`###`) used to define the Card\n",
    "2. One (or more) code cells that contain outputs tagged with `body`\n",
    "3. One (or more) markdown cells tagged with `text` that contain some narrative for the dashboard\n",
    "4. Fotter: based on one or more cells (markdown or code) tagged with `footer`\n",
    "5. Help modal: based on one or more cells (markdown or code) tagged with `help`\n",
    "\n",
    "For example this notebook with one Card, two plots and some text. Note that code cells get expanded to ocupy all the space in the Card while text cells get just use the space they need."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly\n",
    "import plotly.express as px"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = px.data.iris()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Card header"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"This is a markdown cell, **all** *regular* syntax ~~should~~ works.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"This is another markdown cell, you can have multiple text cells and the main chart is expanded.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true,
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\")\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"This is more markdown below the main content\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Click on the help button in the corner to open the help modal.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "footer"
    ]
   },
   "outputs": [],
   "source": [
    "\"This plot is using plotly and can show code, for example:\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "footer"
    ]
   },
   "outputs": [],
   "source": [
    "\"plotly version: \" + plotly.__version__"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "help"
    ]
   },
   "outputs": [],
   "source": [
    "\"This is the help modal, the title above ^^ is the same card header and this is just a regular markdown cell.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "help"
    ]
   },
   "outputs": [],
   "source": [
    "\"This is code output\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "help"
    ]
   },
   "outputs": [],
   "source": [
    "\"You can have also have plots here\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "help"
    ]
   },
   "outputs": [],
   "source": [
    "fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\")\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex one plot](/assets/img/screenshots/layouts/card-complete.png)](/examples/card-complete.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Sections\n",
    "\n",
    "A Section is an object that holds one or more Cards, those Cards can be shown as rows (default) or columns inside the Section.\n",
    "\n",
    "To define a new Section you use a level-2 markdown header (`##`). Each Section belongs in a Page and one Page can have one or more Sections.\n",
    "The default orientation of Sections in a Page is to show each section as a column.\n",
    "\n",
    "For example this Notebook with two Sections, the first with one Card and the second one with two:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Column 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Single column"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Column 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Sub Plot 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Sub Plot 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex section columns](/assets/img/screenshots/layouts/section-columns.png \"Section Columns\")](/examples/section-columns.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>\n",
    "\n",
    "### Orientation\n",
    "\n",
    "The default orientations are `columns` for Sections and `rows` for Cards. This means that each Section, will be shown as a column and Cards in a Section will be shown as rows.\n",
    "\n",
    "Each Section default parameters can be overwritten by adding tags to the Section cell (the one with a level-2 header: `##`).\n",
    "\n",
    "For example in the last Notebook to make the second Section (right column) to also be divided by colums, instead of the defualt of rows, we add an `orientation=columns` tag like this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "orientation=columns"
    ]
   },
   "outputs": [],
   "source": [
    "## Column 2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex section columns + columns](/assets/img/screenshots/layouts/section-columns-columns.png \"Section Columns + Columns\")](/examples/section-columns-columns.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To change the orientation of Sections in a Page use the global `flex_orientation` parameter.\n",
    "\n",
    "The default is to use the oposite orientation between Sections and Cards as follows:\n",
    "- If dashboard orientation is `columns` (default), then section orientation is `rows`\n",
    "- If dashboard orientation is `rows`, then section orientation is `columns`\n",
    "\n",
    "To set the globa parameters you tag one code Cell in the Notebook with `parameters`.\n",
    "\n",
    "<div class=\"admonition tip\">\n",
    "    <p class=\"admonition-title\">The <code>parameters</code> tag</p>\n",
    "    <ol>\n",
    "        <li>It's usually a good idea to have this cell at the begining of the notebook</li>\n",
    "        <li>This is the same tag used by <a href=\"https://github.com/nteract/papermill\">papermill</a> so you can use it as part of a more complex pipeline</li>\n",
    "    </ol>\n",
    "</div>\n",
    "\n",
    "For example adding the following cell as the first cell of the Notebook we had before:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_orientation = \"rows\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex section rows](/assets/img/screenshots/layouts/section-rows.png \"Section Rows\")](/examples/section-rows.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Size: Width and Height\n",
    "\n",
    "You might have noticed that by default all the Cards in a Section and Sections in a Page are divided equally. If there are 2 Cards in a Section each Card will get 50% of the space, if there are 3 Cards in one Section each will get 33.3% of the space and so on.\n",
    "\n",
    "This also applied for multiple Sections in one Page.\n",
    "\n",
    "This proportions can be controlled using the `size={value}` tag in Sections and Cards cells.\n",
    "\n",
    "For example take this notebook that focuses most of the dashboard space on the top Section with one Card."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_orientation = \"rows\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=650"
    ]
   },
   "outputs": [],
   "source": [
    "## Row 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Main plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=350"
    ]
   },
   "outputs": [],
   "source": [
    "## Row 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Subplot 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Subplot 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Focal Chart Top](/assets/img/screenshots/layouts/focal-chart-top.png \"Focal Chart Top\")](/examples/focal-chart-top.html)\n",
    "\n",
    "<div class=\"admonition info\">\n",
    "    <p class=\"admonition-title\">What does the value of size mean?</p>\n",
    "    <p>The values for the <code>size</code> parameter are passed directly to the <code>flex-grow</code> and <code>flex-shrink</code> CSS properties. </p>\n",
    "    <p>The default value is 500 so all sections and cards get the same space compared to its sibilings.</p>\n",
    "    <p>An easy way to change this proportions is to make all <code>size</code> values in a Section add to 1000 (or a simple round number), that way you can calculate the proportions easily.</p>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Card size\n",
    "\n",
    "In the same way that you can control Section proportions in a Page, you can control the Card proportions inside a Section using the `size` parameter as a tag in the Card header (level-3 markdown header: `###`).\n",
    "\n",
    "In the last example if we change these two cells:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=800"
    ]
   },
   "outputs": [],
   "source": [
    "### Subplot 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=200"
    ]
   },
   "outputs": [],
   "source": [
    "### Subplot 2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Focal Chart Top plus Card size](/assets/img/screenshots/layouts/focal-chart-top-card-size.png \"Focal Chart Top plus Card size\")](/examples/focal-chart-top-card-size.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Section Tabs\n",
    "\n",
    "You can make a Section display all it's Cards as tabs, making each Card a tab, allowing you to get more screen space for each Card. Tabs are especially useful when you have a large number of components to display.\n",
    "\n",
    "To do this just `tabs` tag to Section header cell (the one with the level-2 markdown header: `##`).\n",
    "\n",
    "<div class=\"admonition note\">\n",
    "    <p class=\"admonition-title\">Tabs animation and header fill</p>\n",
    "    <p>By default Jupyter-flex applies a small fade transition when changing tabs and fills the space for the navigation, these defaults can be controlled on each Section with and <code>no-nav-fill</code> and <code>no-fade</code> tags respectively.</p>\n",
    "</div>\n",
    "\n",
    "For example this notebook:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "tabs"
    ]
   },
   "outputs": [],
   "source": [
    "## Column 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### First"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Second"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "tabs",
     "no-nav-fill",
     "no-fade"
    ]
   },
   "outputs": [],
   "source": [
    "## Column 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### A"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"A\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### B"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"B\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### C"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"C\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Section tabs](/assets/img/screenshots/layouts/section-tabs-columns.png \"Section tabs columns\")](/examples/section-tabs-columns.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Pages\n",
    "\n",
    "For more complex dashboards with a lot components you can divide the dashboard into multiple pages using level-1 markdown headers (`#`).\n",
    "\n",
    "A Page is an object that holds one or more Sections, those Sections can be shown as columns (default) or rows inside the Page.\n",
    "\n",
    "If more than one of these headers are present, the main navigation of the dashboard will include each Page title as its own top-level navigation tab.\n",
    "\n",
    "Page parameters, such as orientation and size, can be overwritten as one would do for Sections by just tagging the level-1 markdown header cell.\n",
    "\n",
    "A simple example Notebook with 2 Pages and multiple sections, including tabs:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Page 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "size=650"
    ]
   },
   "outputs": [],
   "source": [
    "## Col 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 1 - Col 1 - Plot 1\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "tabs",
     "size=350"
    ]
   },
   "outputs": [],
   "source": [
    "## Col 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Col 2 - Tab 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 1 - Col 2 - Tab 1\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Col 2 - Tab 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 1 - Col 2 - Tab 2\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "orientation=rows"
    ]
   },
   "outputs": [],
   "source": [
    "# Page 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Row 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 2 - Row 1\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Row 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 2 - Row 2\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Pages](/assets/img/screenshots/layouts/pages.png \"Pages\")](/examples/pages.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Sidebars\n",
    "\n",
    "Sidebars are just one special type of Section and Page, they behave in the same way as regular Section, they can contain one or more cards with markdown or outputs.\n",
    "\n",
    "If you tag a Page with `sidebar` it will be a global Sidebar, meaning that all pages will have the same sidebar.\n",
    "\n",
    "If you a Section with `sidebar` then it will only appear when that particular Page is selected.\n",
    "\n",
    "This is mostly useful when defining inputs and using ipywidgets, see [Voila and Widgets](/voila-ipywidgets) but it can also be used to display other type of information.\n",
    "\n",
    "Lets take this example with 2 pages, the first one being tagged with `sidebar`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "sidebar"
    ]
   },
   "outputs": [],
   "source": [
    "# Sidebar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This is the global sidebar of the dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"This content is a regular Card, for example *this* **is** [markdown](https://daringfireball.net/projects/markdown/).\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This is another card"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Since we have to cards in the sidebar the content was split 50/50 by default as it happens in Sections but it can be controlled by tags.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Page 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This is the first page"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "### Page 1 text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 1 code\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Page 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This is the second page"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"Page 2 code\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Global sidebar](/assets/img/screenshots/layouts/sidebar-global.png \"Global Sidebar\")](/examples/sidebar-global.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Page sidebar\n",
    "\n",
    "If you want a sidebar that is only available to one of the Pages, just tag with `sidebar` one of the section in that page."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Page 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "sidebar"
    ]
   },
   "outputs": [],
   "source": [
    "## Sidebar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This is the sidebar of page 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "page"
    ]
   },
   "outputs": [],
   "source": [
    "\"This sidebar only appears of page 1, page 2 doesn't have a sidebar.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Page 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### This page doesn't have a sidebar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex Page sidebar](/assets/img/screenshots/layouts/sidebar-pages.png \"Global Sidebar\")](/examples/sidebar-pages.html)\n",
    "\n",
    "<p class=\"img-footer\">Click on the image to open the rendered dashboard</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Vertical Layout: Scroll\n",
    "\n",
    "By default Jupyter-flex components are laid out to automatically fill the height of the browser. So that multiple components (Sections, Cards) get expanded to the available space and there is no vertical scrollbar in the body.\n",
    "\n",
    "This is a good default that works well for a small to medium number of charts, however if you have lots of charts you’ll probably want to scroll rather than fit them all onto the page.\n",
    "\n",
    "You can control this behavior using the `flex_vertical_layout` option. Specify `fill` to vertically re-size charts so they completely fill the page and `scroll` to layout charts at their natural height, scrolling the page if necessary. For example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_vertical_layout = \"scroll\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/altair-scroll.html\">\n",
    "        <img src=\"/assets/img/screenshots/plots/altair-scroll.png\">\n",
    "    </a>\n",
    "    <figcaption>altair-scroll</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/ipywidgets-gallery.html\">\n",
    "        <img src=\"/assets/img/screenshots/widgets/ipywidgets-gallery.png\">\n",
    "    </a>\n",
    "    <figcaption>ipywidgets-gallery</figcaption>\n",
    "  </figure>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## All examples\n",
    "\n",
    "This part has quick links to all the examples shown in this page and other. Creativity is the limit!\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/card-complete.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/card-complete.png\">\n",
    "    </a>\n",
    "    <figcaption>card</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/section-columns.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-columns.png\">\n",
    "    </a>\n",
    "    <figcaption>section-columns</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/section-columns-columns.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-columns-columns.png\">\n",
    "    </a>\n",
    "    <figcaption>section-columns + columns</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/section-rows.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-rows.png\">\n",
    "    </a>\n",
    "    <figcaption>section-rows</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/section-rows-rows.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-rows-rows.png\">\n",
    "    </a>\n",
    "    <figcaption>section-rows + rows</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/focal-chart-top.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/focal-chart-top.png\">\n",
    "    </a>\n",
    "    <figcaption>focal-chart-top</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/focal-chart-top-card-size.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/focal-chart-top-card-size.png\">\n",
    "    </a>\n",
    "    <figcaption>focal-chart-top-card-size</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "      <a href=\"/examples/section-tabs-columns.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-tabs-columns.png\">\n",
    "    </a>\n",
    "    <figcaption>section-tabs-columns</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "      <a href=\"/examples/section-tabs-rows.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/section-tabs-rows.png\">\n",
    "    </a>\n",
    "    <figcaption>section-tabs-rows</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/pages.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/pages.png\">\n",
    "    </a>\n",
    "    <figcaption>pages + section with tabs</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/sidebar-global.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/sidebar-global.png\">\n",
    "    </a>\n",
    "    <figcaption>sidebar-global</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/sidebar-pages.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/sidebar-pages.png\">\n",
    "    </a>\n",
    "    <figcaption>sidebar-pages</figcaption>\n",
    "  </figure>\n",
    "</div>\n",
    "\n",
    "<div class=\"image-grid-row\">\n",
    " <figure class=\"image-card\">\n",
    "    <a href=\"/examples/grid-2x2.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/grid-2x2.png\">\n",
    "    </a>\n",
    "    <figcaption>grid-2x2</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "    <a href=\"/examples/grid-2x3.html\">\n",
    "        <img src=\"/assets/img/screenshots/layouts/grid-2x3.png\">\n",
    "    </a>\n",
    "    <figcaption>grid-2x3</figcaption>\n",
    "  </figure>\n",
    "  <figure class=\"image-card\">\n",
    "  </figure>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "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.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}