{
 "metadata": {
  "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.8.5-final"
  },
  "orig_nbformat": 2,
  "kernelspec": {
   "name": "python_defaultSpec_1601889646686",
   "display_name": "Python 3.8.5 64-bit ('streamlit': conda)",
   "metadata": {
    "interpreter": {
     "hash": "d5b47a323bfc67f94a37e7cb8fd52db1ad06cc55d227a5b8c375f2f5af6e26dc"
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2,
 "cells": [
  {
   "source": [
    "# A first view on Streamlit"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "source": [
    "I had a look into streamlit as anoter way to deploy a data science app. It seems really convenient to work with.\n",
    "\n",
    "Unfortunately, I cannot use it on a static website, so I need to learn how to deploy it on a service with Docker."
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "source": [
    "## Tutorial"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "source": [
    "I went through the [getting started tutorial](https://docs.streamlit.io/en/stable/getting_started.html), below are the main steps."
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "source": [
    "We import streamlit as a separate package and simply run it in as script. \n",
    "\n",
    "```shell\n",
    "streamlit run first_app.py\n",
    "```\n",
    "\n",
    "This, by default, creates a local server where we can see the results."
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "\n",
    "import numpy as np\n",
    "import pandas as pd\n",
    "import altair as alt"
   ]
  },
  {
   "source": [
    "Streamlit tries to diplay everything, somehow similar how it happens in a jupyter notebook."
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": "   first  second\n0      1      10\n1      2      20\n2      3      30\n3      4      40",
      "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>first</th>\n      <th>second</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>1</td>\n      <td>10</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>2</td>\n      <td>20</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>3</td>\n      <td>30</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>4</td>\n      <td>40</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
     },
     "metadata": {},
     "execution_count": 2
    }
   ],
   "source": [
    "df = pd.DataFrame({\"first\": [1, 2, 3, 4], \"second\": [10, 20, 30, 40]})\n",
    "\n",
    "df"
   ]
  },
  {
   "source": [
    "![dataframe](images/streamlit/dataframe.png)"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": "&lt;streamlit.delta_generator.DeltaGenerator at 0x7fd5941fdc70&gt;"
     },
     "metadata": {},
     "execution_count": 3
    }
   ],
   "source": [
    "chart_data = pd.DataFrame(np.random.randn(20, 3), columns=[\"a\", \"b\", \"c\"])\n",
    "\n",
    "st.line_chart(chart_data)"
   ]
  },
  {
   "source": [
    "![line chart](images/streamlit/chart.png)"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": "&lt;streamlit.delta_generator.DeltaGenerator at 0x7fd5941fdc70&gt;"
     },
     "metadata": {},
     "execution_count": 4
    }
   ],
   "source": [
    "map_data = pd.DataFrame(\n",
    "    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], columns=[\"lat\", \"lon\"]\n",
    ")\n",
    "\n",
    "st.map(map_data)"
   ]
  },
  {
   "source": [
    "![map](images/streamlit/map.png)"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": "(&#39;You selected &#39;,\n    first  second\n 0      1      10)"
     },
     "metadata": {},
     "execution_count": 5
    }
   ],
   "source": [
    "if st.checkbox('Show dataframe'):\n",
    "    chart_data = pd.DataFrame(np.random.randn(20, 3), columns = ['a', 'b', 'c'])\n",
    "\n",
    "    st.line_chart(chart_data)\n",
    "\n",
    "\n",
    "option = st.sidebar.selectbox(\"Which number do you like best?\", df['first'])\n",
    "\n",
    "'You selected ', df.loc[df['first'] == option, :]"
   ]
  },
  {
   "source": [
    "![checkbox](images/streamlit/checkbox.png)"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": "&#39;...and done!&#39;"
     },
     "metadata": {},
     "execution_count": 6
    }
   ],
   "source": [
    "import time\n",
    "\n",
    "\"Long computation...\"\n",
    "\n",
    "# Add a placeholder\n",
    "latest_iteration = st.empty()\n",
    "bar = st.progress(0)\n",
    "\n",
    "for i in range(100):\n",
    "    # Update progress bar with each iteration\n",
    "    latest_iteration.text(f\"Iteration {i + 1}\")\n",
    "    bar.progress(i + 1)\n",
    "    time.sleep(0.1)\n",
    "\n",
    "\"...and done!\""
   ]
  },
  {
   "source": [
    "![progress bar](images/streamlit/computation.png)"
   ],
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   }
  }
 ]
}