02_Example.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#hide\n",
    "from dash_oop_components.core import *"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Covid Dashboard Example\n",
    "> A small example showing the power of dash_oop_components in building a modular covid tracking dashboard\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This dashboard has been deployed to [https://dash-oop-demo.herokuapp.com/](https://dash-oop-demo.herokuapp.com/)\n",
    "\n",
    "Source code at [http://github.com/oegedijk/dash_oop_demo](http://github.com/oegedijk/dash_oop_demo)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Dashboard Design\n",
    "\n",
    "The dashboard consists one `DashFigureFactory` and four `DashComponent`s. \n",
    "\n",
    "1. **CovidPlots**: `DashFigureFactory` that stores a covid dataset and can plot both timeseries and piecharts for a select number of countries for either cases or deaths.\n",
    "2. **CovidTimeSeries**: a component with a deaths/cases and a country dropdown that displays the timeseries plot\n",
    "3. **CovidPieChart**: a component with a deaths/cases and a country dropdown that displays the pie chart plot\n",
    "4. **CovidComponent**: a component that combines a `CovidTimeSeries` and a `CovidPieChart`, and adds its own dropdowns that control both subcomponents\n",
    "5. **CovidDashboard**: a dashboard consisting of four `CovidComponent`s in four different tabs:\n",
    "    1. One showing only european countries\n",
    "    2. One showing only Asian countries\n",
    "    3. One showing only cases\n",
    "    4. One showing only deaths\n",
    "    \n",
    "    \n",
    "So the `CovidComponent` gets re-used four times, with different configurations. And each `CovidComponent` reuses `CovidTimeSeries` and `CovidPieChart`. \n",
    "\n",
    "The `CovidPlots` figure factory gets passed down by the `CovidDashboard` to the `CovidComponents`, and by the `CovidComponents` to the `CovidTimeSeries` and `CovidPieChart`. \n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Running the dashboard\n",
    "\n",
    "We run the dashboard by passing the `CovidDashboard` to a `DashApp` and calling `.run()`. \n",
    "\n",
    "We can store the configuration with `dashboard.to_yaml(\"covid_dashboard.yaml\")`.\n",
    "\n",
    "And then build a new `DashApp` instance directly from that configuration with `DashApp.from_yaml(\"covid_dashboard.yaml\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Imports"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: pandas in /Users/oege/projects/venv/lib/python3.8/site-packages (1.1.3)\n",
      "Requirement already satisfied: plotly-express in /Users/oege/projects/venv/lib/python3.8/site-packages (0.4.1)\n",
      "Requirement already satisfied: python-dateutil>=2.7.3 in /Users/oege/projects/venv/lib/python3.8/site-packages (from pandas) (2.8.1)\n",
      "Requirement already satisfied: pytz>=2017.2 in /Users/oege/projects/venv/lib/python3.8/site-packages (from pandas) (2020.1)\n",
      "Requirement already satisfied: numpy>=1.15.4 in /Users/oege/projects/venv/lib/python3.8/site-packages (from pandas) (1.19.2)\n",
      "Requirement already satisfied: statsmodels>=0.9.0 in /Users/oege/projects/venv/lib/python3.8/site-packages (from plotly-express) (0.12.0)\n",
      "Requirement already satisfied: plotly>=4.1.0 in /Users/oege/projects/venv/lib/python3.8/site-packages (from plotly-express) (4.12.0)\n",
      "Requirement already satisfied: patsy>=0.5 in /Users/oege/projects/venv/lib/python3.8/site-packages (from plotly-express) (0.5.1)\n",
      "Requirement already satisfied: scipy>=0.18 in /Users/oege/projects/venv/lib/python3.8/site-packages (from plotly-express) (1.5.3)\n",
      "Requirement already satisfied: six>=1.5 in /Users/oege/projects/venv/lib/python3.8/site-packages (from python-dateutil>=2.7.3->pandas) (1.15.0)\n",
      "Requirement already satisfied: retrying>=1.3.3 in /Users/oege/projects/venv/lib/python3.8/site-packages (from plotly>=4.1.0->plotly-express) (1.3.3)\n",
      "\u001b[33mWARNING: You are using pip version 20.1.1; however, version 20.2.4 is available.\n",
      "You should consider upgrading via the '/Users/oege/projects/venv/bin/python -m pip install --upgrade pip' command.\u001b[0m\n"
     ]
    }
   ],
   "source": [
    "#hide\n",
    "\n",
    "!pip install pandas plotly-express"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#hide\n",
    "import dash_html_components as html\n",
    "import dash_core_components as dcc\n",
    "import dash_bootstrap_components as dbc\n",
    "\n",
    "from dash.dependencies import Input, Output, State\n",
    "from dash.exceptions import PreventUpdate\n",
    "\n",
    "import pandas as pd\n",
    "import plotly.express as px"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## CovidPlots\n",
    "\n",
    "First we build a plot factory that holds the dataframe, and has two plotting functions:\n",
    "\n",
    "- `plot_time_series`: plots a time series for a given list of countries for a given metric ('cases' or 'deaths')\n",
    "- `plot_pie_chart`: plots a pie chart for a given list of countries for a given metric ('cases' or 'deaths')\n",
    "    \n",
    "We store a list of countries and metrics to `self.countries` and `self.metric`, so that the components can use those to populate the dropdowns. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "dash_figure_factory:\n",
      "  class_name: CovidPlots\n",
      "  module: __main__\n",
      "  params:\n",
      "    datafile: covid.csv\n",
      "    exclude_countries: []\n",
      "\n"
     ]
    }
   ],
   "source": [
    "class CovidPlots(DashFigureFactory):\n",
    "    def __init__(self, datafile=\"covid.csv\", exclude_countries=[]):\n",
    "        super().__init__()\n",
    "        self.df = pd.read_csv(datafile)\n",
    "        if exclude_countries:\n",
    "            self.df = self.df[~self.df.countriesAndTerritories.isin(exclude_countries)]\n",
    "        self.countries = self.df.countriesAndTerritories.unique().tolist()\n",
    "        self.metrics = ['cases', 'deaths']\n",
    "        \n",
    "    def plot_time_series(self, countries, metric):\n",
    "        return px.line(\n",
    "            data_frame=self.df[self.df.countriesAndTerritories.isin(countries)],\n",
    "            x='dateRep',\n",
    "            y=metric,\n",
    "            color='countriesAndTerritories',\n",
    "            labels={'countriesAndTerritories':'Countries', 'dateRep':'date'},\n",
    "            )\n",
    "    \n",
    "    def plot_pie_chart(self, countries, metric):\n",
    "        return px.pie(\n",
    "            data_frame=self.df[self.df.countriesAndTerritories.isin(countries)],\n",
    "            names='countriesAndTerritories',\n",
    "            values=metric,\n",
    "            hole=.3,\n",
    "            labels={'countriesAndTerritories':'Countries'}\n",
    "            ) \n",
    "    \n",
    "plot_factory = CovidPlots(datafile=\"covid.csv\")\n",
    "print(plot_factory.to_yaml())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## CovidTimeSeries"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A `CovidTimeSeries` component consisting of:\n",
    "\n",
    "    - A dropdown to select a number of countries\n",
    "    - A dropdown to select cases or deaths\n",
    "    - a time series plot\n",
    "    \n",
    "All parameters are automatically assigned to attributes. So we can simply use `self.plot_factory` or `self.countries` with having to specify the assignments in the `__init__`. \n",
    "\n",
    "Both dropdowns can be hidden by passing `hide_country_dropdown=True` or `hide_metric_dropdown=True`. This works\n",
    "by using the `make_hideable()` staticmethod from the `DashComponent` class: We wrap the relevant part of the layout in a `self.make_hideable(..., hide=self.hide_country_dropdown)` wrapper. If `hide==True` then `make_hideable()` will wrap a hidden div around the element.\n",
    "\n",
    "If no `include_countries` or `include_metrics` are given, then by default all countries and metrics get included."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class CovidTimeSeries(DashComponent):\n",
    "    def __init__(self, plot_factory, \n",
    "                 hide_country_dropdown=False, include_countries=None, countries=None, \n",
    "                 hide_metric_dropdown=False, include_metrics=None, metric='cases', name=None):\n",
    "        super().__init__()\n",
    "        \n",
    "        if not self.include_countries:\n",
    "            self.include_countries = self.plot_factory.countries\n",
    "        if not self.countries:\n",
    "            self.countries = self.include_countries\n",
    "        \n",
    "        if not self.include_metrics:\n",
    "            self.include_metrics = self.plot_factory.metrics\n",
    "        if not self.metric:\n",
    "            self.metric = self.include_metrics[0]\n",
    "        \n",
    "    def layout(self):\n",
    "        return dbc.Container([\n",
    "            dbc.Row([\n",
    "                dbc.Col([\n",
    "                    html.H3(\"Covid Time Series\"),\n",
    "                    self.make_hideable(\n",
    "                        dcc.Dropdown(\n",
    "                            id=self.id('timeseries-metric-dropdown'),\n",
    "                            options=[{'label': metric, 'value': metric} for metric in self.include_metrics],\n",
    "                            value=self.metric,\n",
    "                        ), hide=self.hide_metric_dropdown),\n",
    "                    self.make_hideable(\n",
    "                        dcc.Dropdown(\n",
    "                            id=self.id('timeseries-country-dropdown'),\n",
    "                            options=[{'label': country, 'value': country} for country in self.include_countries],\n",
    "                            value=self.countries,\n",
    "                            multi=True,\n",
    "                        ), hide=self.hide_country_dropdown),\n",
    "                    dcc.Graph(id=self.id('timeseries-figure'))\n",
    "                ]),\n",
    "            ])\n",
    "        ])\n",
    "    \n",
    "    def component_callbacks(self, app):\n",
    "        @app.callback(\n",
    "            self.Output('timeseries-figure', 'figure'),\n",
    "            self.Input('timeseries-country-dropdown', 'value'),\n",
    "            self.Input('timeseries-metric-dropdown', 'value')\n",
    "        )\n",
    "        def update_timeseries_plot(countries, metric):\n",
    "            if countries and metric:\n",
    "                return self.plot_factory.plot_time_series(countries, metric)\n",
    "            raise PreventUpdate"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## CovidPieChart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A `CovidPieChart` component consisting of:\n",
    "\n",
    "    - A dropdown to select a number of countries\n",
    "    - A dropdown to select cases or deaths\n",
    "    - a pie chart plot\n",
    "    \n",
    "The first parameter is a `CovidPlots` `DashPlotFactory` that will be used to return the right plot in the callbacks.\n",
    "    \n",
    "All parameters are automatically assigned to attributes. So we can simply use `self.plot_factory` or `self.countries` with having to specify the assignments in the `__init__`. \n",
    "\n",
    "Both dropdowns can be hidden by passing `hide_country_dropdown=True` or `hide_metric_dropdown=True`. This works\n",
    "by using the `make_hideable()` staticmethod from the `DashComponent` class: We wrap the relevant part of the layout in a `self.make_hideable(..., hide=self.hide_country_dropdown)` wrapper. If `hide==True` then `make_hideable()` will wrap a hidden div around the element.\n",
    "\n",
    "If no `include_countries` or `include_metrics` are given, then by default all countries and metrics get included."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class CovidPieChart(DashComponent):\n",
    "    def __init__(self, plot_factory, \n",
    "                 hide_country_dropdown=False, include_countries=None, countries=None, \n",
    "                 hide_metric_dropdown=False, include_metrics=None, metric='cases', name=None):\n",
    "        super().__init__()\n",
    "        \n",
    "        if not self.include_countries:\n",
    "            self.include_countries = self.plot_factory.countries\n",
    "        if not self.countries:\n",
    "            self.countries = self.include_countries\n",
    "        \n",
    "        if not self.include_metrics:\n",
    "            self.include_metrics = self.plot_factory.metrics\n",
    "        if not self.metric:\n",
    "            self.metric = self.include_metrics[0]\n",
    "        \n",
    "    def layout(self):\n",
    "        return dbc.Container([\n",
    "            dbc.Row([\n",
    "                dbc.Col([\n",
    "                    html.H3(\"Covid Pie Chart\"),\n",
    "                    self.make_hideable(\n",
    "                        dcc.Dropdown(\n",
    "                            id=self.id('piechart-metric-dropdown'),\n",
    "                            options=[{'label': metric, 'value': metric} for metric in self.include_metrics],\n",
    "                            value=self.metric,\n",
    "                        ), hide=self.hide_metric_dropdown),\n",
    "                    self.make_hideable(\n",
    "                        dcc.Dropdown(\n",
    "                            id=self.id('piechart-country-dropdown'),\n",
    "                            options=[{'label': country, 'value': country} for country in self.include_countries],\n",
    "                            value=self.countries,\n",
    "                            multi=True\n",
    "                        ), hide=self.hide_country_dropdown),\n",
    "                    dcc.Graph(id='piechart-figure-'+self.name)\n",
    "                ]),\n",
    "            ])\n",
    "        ])\n",
    "    \n",
    "    def component_callbacks(self, app):\n",
    "        @app.callback(\n",
    "            self.Output('piechart-figure', 'figure'),\n",
    "            self.Input('piechart-country-dropdown', 'value'),\n",
    "            self.Input('piechart-metric-dropdown', 'value')\n",
    "        )\n",
    "        def update_timeseries_plot(countries, metric):\n",
    "            if countries and metric:\n",
    "                return self.plot_factory.plot_pie_chart(countries, metric)\n",
    "            raise PreventUpdate"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## CovidComposite"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A `CovidComposite` combines a `CovidTimeSeries` and `CovidPieChart` component into a single composite component.\n",
    "\n",
    "- The `plot_factory` gets passed down to the subcomponents\n",
    "- The subcomponents are included in the layout with `self.timeseries.layout()` and `self.piechart.layout()`.\n",
    "- A `DashConnector` called `DropDownConnector` is defined that equalizes the dropdown values of the timeseries\n",
    "    and piechart components to that of the `CovidComposite` dropdowns. This `DropdownConnector` is then \n",
    "    instantiated in the init.\n",
    "    - An alternative would have been to define the `DropdownConnector` callbacks directly in the\n",
    "        `def component_callbacks(self, app)` of `CovidComposite` \n",
    "- The dropdowns of the subcomponents are hidden by setting `hide_country_dropdown=True` \n",
    "    and `hide_metric_dropdown=True`\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class DropdownConnector(DashConnector):\n",
    "    \"\"\"Connects the country and metric dropdown menus of a\n",
    "    CovidComposite with the dropdowns of a CovidTimeSeries \n",
    "    and CovidPieChart respectively\"\"\"\n",
    "    def __init__(self, composite, timeseries, piechart):\n",
    "        super().__init__()\n",
    "        \n",
    "    def component_callbacks(self, app):\n",
    "        @app.callback(\n",
    "            self.timeseries.Output('timeseries-country-dropdown', 'value'),\n",
    "            self.piechart.Output('piechart-country-dropdown', 'value'),\n",
    "            self.composite.Input('dashboard-country-dropdown', 'value'),\n",
    "        )\n",
    "        def update_timeseries_plot(countries):\n",
    "            return countries, countries\n",
    "        \n",
    "        @app.callback(\n",
    "            self.timeseries.Output('timeseries-metric-dropdown', 'value'),\n",
    "            self.piechart.Output('piechart-metric-dropdown', 'value'),\n",
    "            self.composite.Input('dashboard-metric-dropdown', 'value'),\n",
    "        )\n",
    "        def update_timeseries_plot(metric):\n",
    "            return metric, metric\n",
    "        "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class CovidComposite(DashComponent):\n",
    "    \"\"\"A composite DashComponent of a CovidTimeSeries and CovidPieChart, with a dropdown\n",
    "    added that controls both subcomponents.\"\"\"\n",
    "    def __init__(self, plot_factory, title=\"Covid Analysis\",\n",
    "                 hide_country_dropdown=False, \n",
    "                 include_countries=None, countries=None, \n",
    "                 hide_metric_dropdown=False, \n",
    "                 include_metrics=None, metric='cases', name=None):\n",
    "        super().__init__(title=title)\n",
    "        \n",
    "        if not self.include_countries:\n",
    "            self.include_countries = self.plot_factory.countries\n",
    "        if not self.countries:\n",
    "            self.countries = self.include_countries\n",
    "        \n",
    "        if not self.include_metrics:\n",
    "            self.include_metrics = self.plot_factory.metrics\n",
    "        if not self.metric:\n",
    "            self.metric = self.include_metrics[0]\n",
    "            \n",
    "        self.timeseries = CovidTimeSeries(\n",
    "                plot_factory, \n",
    "                hide_country_dropdown=True, countries=self.countries,\n",
    "                hide_metric_dropdown=True, metric=self.metric)\n",
    "        \n",
    "        self.piechart = CovidPieChart(\n",
    "                plot_factory, \n",
    "                hide_country_dropdown=True, countries=self.countries,\n",
    "                hide_metric_dropdown=True, metric=self.metric)\n",
    "        \n",
    "        self.connector = DropdownConnector(self, self.timeseries, self.piechart)\n",
    "        \n",
    "    def layout(self, params=None):\n",
    "        return dbc.Container([\n",
    "            dbc.Row([\n",
    "                dbc.Col([\n",
    "                    html.H1(self.title),\n",
    "                    self.make_hideable(\n",
    "                        self.querystring(params)(dcc.Dropdown)(\n",
    "                            id=self.id('dashboard-metric-dropdown'),\n",
    "                            options=[{'label': metric, 'value': metric} for metric in self.include_metrics],\n",
    "                            value=self.metric,\n",
    "                        ), hide=self.hide_metric_dropdown),\n",
    "                    self.make_hideable(\n",
    "                        self.querystring(params)(dcc.Dropdown)(\n",
    "                            id=self.id('dashboard-country-dropdown'),\n",
    "                            options=[{'label': metric, 'value': metric} for metric in self.include_countries],\n",
    "                            value=self.countries,\n",
    "                            multi=True,\n",
    "                        ), hide=self.hide_country_dropdown),\n",
    "                ], md=6),\n",
    "            ], justify=\"center\"),\n",
    "            dbc.Row([\n",
    "                dbc.Col([\n",
    "                    self.timeseries.layout(),\n",
    "                ], md=6),\n",
    "                dbc.Col([\n",
    "                    self.piechart.layout(),\n",
    "                ], md=6)\n",
    "            ])\n",
    "        ], fluid=True)\n",
    "        "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# CovidDashboard"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The final `CovidDashboard` consists of four `CovidComposites` subcomponents, each in its own tab, and each with a slightly different configuration.\n",
    "\n",
    "- First tab only shows European counties, by passing `include_countries=[...]`\n",
    "- Second tab only shows Asian countries\n",
    "- Third includes all countries, but only shows cases, and hides the metric dropdown. \n",
    "    The default initial countries are ['China', 'Italy', 'Brazil']\n",
    "- Third includes all countries, but only shows deaths, and hides the metric dropdown. \n",
    "    The default initial countries are ['China', 'Italy', 'Brazil']\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "dash_component:\n",
      "  class_name: CovidDashboard\n",
      "  module: __main__\n",
      "  params:\n",
      "    plot_factory:\n",
      "      dash_figure_factory:\n",
      "        class_name: CovidPlots\n",
      "        module: __main__\n",
      "        params:\n",
      "          datafile: covid.csv\n",
      "          exclude_countries: []\n",
      "    europe_countries:\n",
      "    - Italy\n",
      "    - Spain\n",
      "    - Germany\n",
      "    - France\n",
      "    - United_Kingdom\n",
      "    - Switzerland\n",
      "    - Netherlands\n",
      "    - Belgium\n",
      "    - Austria\n",
      "    - Portugal\n",
      "    - Norway\n",
      "    asia_countries:\n",
      "    - China\n",
      "    - Vietnam\n",
      "    - Malaysia\n",
      "    - Philippines\n",
      "    - Taiwan\n",
      "    - Myanmar\n",
      "    - Thailand\n",
      "    - South_Korea\n",
      "    - Japan\n",
      "    name: Dth4uYnM6R\n",
      "\n"
     ]
    }
   ],
   "source": [
    "class CovidDashboard(DashComponent):\n",
    "    def __init__(self, plot_factory, \n",
    "                 europe_countries = ['Italy',  'Spain', 'Germany', 'France', \n",
    "                                     'United_Kingdom', 'Switzerland', 'Netherlands',  \n",
    "                                     'Belgium', 'Austria', 'Portugal', 'Norway'],\n",
    "                asia_countries = ['China', 'Vietnam', 'Malaysia', 'Philippines', \n",
    "                                  'Taiwan', 'Myanmar', 'Thailand', 'South_Korea', 'Japan']):\n",
    "        super().__init__()\n",
    "        \n",
    "        self.europe = CovidComposite(self.plot_factory, \"Europe\", \n",
    "                                     include_countries=self.europe_countries, name=\"eur\")\n",
    "        self.asia = CovidComposite(self.plot_factory, \"Asia\", \n",
    "                                   include_countries=self.asia_countries, name=\"asia\")\n",
    "        self.cases_only = CovidComposite(self.plot_factory, \"Cases Only\", \n",
    "                                         include_metrics=['cases'], metric='cases',\n",
    "                                         hide_metric_dropdown=True,\n",
    "                                         countries=['China', 'Italy', 'Brazil'], name=\"case\")\n",
    "        self.deaths_only = CovidComposite(self.plot_factory, \"Deaths Only\", \n",
    "                                          include_metrics=['deaths'], metric='deaths',\n",
    "                                          hide_metric_dropdown=True,\n",
    "                                          countries=['China', 'Italy', 'Brazil'], name='death')\n",
    "        \n",
    "    def layout(self, params=None):\n",
    "        return dbc.Container([\n",
    "            dbc.Row([\n",
    "                html.H1(\"Covid Dashboard\"),\n",
    "            ]),\n",
    "            dbc.Row([\n",
    "                dbc.Col([\n",
    "                    self.querystring(params)(DashComponentTabs)(id=\"tabs\", \n",
    "                        tabs=[self.europe, self.asia, self.cases_only, self.deaths_only],\n",
    "                        params=params, component=self, single_tab_querystrings=True)\n",
    "                ])\n",
    "            ])\n",
    "        ], fluid=True)\n",
    "    \n",
    "dashboard = CovidDashboard(plot_factory)\n",
    "print(dashboard.to_yaml())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[('tabs', 'value'),\n",
       " ('dashboard-metric-dropdown-eur', 'value'),\n",
       " ('dashboard-country-dropdown-eur', 'value'),\n",
       " ('dashboard-metric-dropdown-asia', 'value'),\n",
       " ('dashboard-country-dropdown-asia', 'value'),\n",
       " ('dashboard-metric-dropdown-case', 'value'),\n",
       " ('dashboard-country-dropdown-case', 'value'),\n",
       " ('dashboard-metric-dropdown-death', 'value'),\n",
       " ('dashboard-country-dropdown-death', 'value')]"
      ]
     },
     "execution_count": null,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dashboard.compute_querystring_params()\n",
    "dashboard.get_querystring_params()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Start app"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Pass the `dashboard` to the `DashApp`, and add the bootstrap stylesheet that is needed to correctly display all the `dbc.Row`s and `dbc.Col`s:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = DashApp(dashboard, port=9050, querystrings=True, bootstrap=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And finally we run the app:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "#hide\n",
    "\n",
    "run_app = False"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "if run_app: # remove to run\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Store App config and reload"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can check out the configuration that was generated for our dashboard. \n",
    "This includes:\n",
    "\n",
    "- What the topline dashboard_component is, from where to import it and with which parameters to start it\n",
    "- The `plot_factory` parameter gets automatically replaced with the configuration for the plot_factory:\n",
    "    - includes information on how to import and all parameters\n",
    "- The default list of parameters for `europe_countries` and `asia_countries` is included\n",
    "- The parameters for the `dash_app` itself:\n",
    "    - port=8050\n",
    "    - mode='dash'\n",
    "    - external_stylesheets=dbc.themes.BOOTSTRAP"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "dash_app:\n",
      "  class_name: DashApp\n",
      "  module: dash_oop_components.core\n",
      "  params:\n",
      "    dashboard_component:\n",
      "      dash_component:\n",
      "        class_name: CovidDashboard\n",
      "        module: __main__\n",
      "        params:\n",
      "          plot_factory:\n",
      "            dash_figure_factory:\n",
      "              class_name: CovidPlots\n",
      "              module: __main__\n",
      "              params:\n",
      "                datafile: covid.csv\n",
      "                exclude_countries: []\n",
      "          europe_countries:\n",
      "          - Italy\n",
      "          - Spain\n",
      "          - Germany\n",
      "          - France\n",
      "          - United_Kingdom\n",
      "          - Switzerland\n",
      "          - Netherlands\n",
      "          - Belgium\n",
      "          - Austria\n",
      "          - Portugal\n",
      "          - Norway\n",
      "          asia_countries:\n",
      "          - China\n",
      "          - Vietnam\n",
      "          - Malaysia\n",
      "          - Philippines\n",
      "          - Taiwan\n",
      "          - Myanmar\n",
      "          - Thailand\n",
      "          - South_Korea\n",
      "          - Japan\n",
      "          name: GqoAJVV5mh\n",
      "    port: 9050\n",
      "    mode: dash\n",
      "    querystrings: true\n",
      "    bootstrap: true\n",
      "    kwargs:\n",
      "      external_stylesheets:\n",
      "      - https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\n",
      "      suppress_callback_exceptions: true\n",
      "\n"
     ]
    }
   ],
   "source": [
    "print(app.to_yaml())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we can store this configuration to disk:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.to_yaml(\"covid_dashboard.yaml\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And reload another `DashApp` from this configuration. This means that:\n",
    "\n",
    "- The releve3nt `DashFigureFactory`s will get imported, instantiated with the right parameters and passed down to the `DashComponent`.\n",
    "- The `DashComponent`s will get imported from the right module, passed an instantiated `DashFigureFactory` along with other parameters.\n",
    "- Either a `dash.Dash()` or a `jupyter_dash.JupyterDash()` app gets started, depending on `mode`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Warning: the use of _register_callbacks() will be deprecated! Use component_callbacks() from now on.\n",
      "Warning: the use of _register_callbacks() will be deprecated! Use component_callbacks() from now on.\n",
      "Warning: the use of _register_callbacks() will be deprecated! Use component_callbacks() from now on.\n",
      "Warning: the use of _register_callbacks() will be deprecated! Use component_callbacks() from now on.\n",
      "Warning: the use of _register_callbacks() will be deprecated! Use component_callbacks() from now on.\n"
     ]
    }
   ],
   "source": [
    "app2 = DashApp.from_yaml(\"covid_dashboard.yaml\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can check that the configuration of this new `app2` is indeed the same as `app`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "dash_app:\n",
      "  class_name: DashApp\n",
      "  module: dash_oop_components.core\n",
      "  params:\n",
      "    dashboard_component:\n",
      "      dash_component:\n",
      "        class_name: CovidDashboard\n",
      "        module: __main__\n",
      "        params:\n",
      "          plot_factory:\n",
      "            dash_figure_factory:\n",
      "              class_name: CovidPlots\n",
      "              module: __main__\n",
      "              params:\n",
      "                datafile: covid.csv\n",
      "                exclude_countries: []\n",
      "          europe_countries:\n",
      "          - Italy\n",
      "          - Spain\n",
      "          - Germany\n",
      "          - France\n",
      "          - United_Kingdom\n",
      "          - Switzerland\n",
      "          - Netherlands\n",
      "          - Belgium\n",
      "          - Austria\n",
      "          - Portugal\n",
      "          - Norway\n",
      "          asia_countries:\n",
      "          - China\n",
      "          - Vietnam\n",
      "          - Malaysia\n",
      "          - Philippines\n",
      "          - Taiwan\n",
      "          - Myanmar\n",
      "          - Thailand\n",
      "          - South_Korea\n",
      "          - Japan\n",
      "          name: FpEgUgzXDj\n",
      "    port: 9050\n",
      "    mode: dash\n",
      "    querystrings: true\n",
      "    bootstrap: true\n",
      "    kwargs:\n",
      "      external_stylesheets:\n",
      "      - https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\n",
      "      - https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css\n",
      "      suppress_callback_exceptions: true\n",
      "\n"
     ]
    }
   ],
   "source": [
    "print(app2.to_yaml())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And if we run it it still works!\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "if run_app:\n",
    "    app2.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}