Use template instead of global config and add favicon to the template

Author: tupui

Makefile

@@ -39,7 +39,10 @@ test:  ## Run tests with coverage
 	pytest --cov simdec --cov-report term-missing
 
 serve-dev:  ## Serve Panel dashboard - Dev mode
-	panel serve panel/app.py --show --autoreload --reuse-sessions --global-loading-spinner
+	panel serve panel/app.py \
+ 		--show --autoreload \
+ 		--static-dirs _static=docs/_static \
+ 		--reuse-sessions --global-loading-spinner
 
 serve:  ## Serve Panel dashboard - Prod mode
 	PANEL_BASIC_AUTH=$(PANEL_TOKEN) panel serve panel/app.py \

panel/app.py

@@ -16,10 +16,20 @@
 
 
 # panel app
-pn.extension(template="material")
 pn.extension("tabulator")
 pn.extension("gridstack")
 
+template = pn.template.MaterialTemplate(
+    title="Simulation Decomposition Dashboard",
+    # logo="_static/logo.gif",
+    favicon="_static/favicon.png",
+    meta_description="Simulation Decomposition",
+    meta_keywords=(
+        "Sensitivity Analysis, Visualization, Data Analysis, Auditing, "
+        "Factors priorization, Colorization, Histogram"
+    ),
+)
+
 pn.config.sizing_mode = "stretch_width"
 pn.config.throttled = True
 font_size = "12pt"
@@ -369,7 +379,7 @@ def csv_data(
 # App layout
 
 # Sidebar
-pn_params = pn.layout.WidgetBox(
+sidebar_area = pn.layout.WidgetBox(
     pn.pane.Markdown("## Data", styles={"color": blue_color}),
     text_fname,
     selector_output,
@@ -384,33 +394,37 @@ def csv_data(
     color_pickers,
     max_width=350,
     sizing_mode="stretch_width",
-).servable(area="sidebar")
+)
+
+template.sidebar.append(sidebar_area)
 
 # Main window
-gstack = GridStack(name="SimDec Analysis", sizing_mode="stretch_both", min_height=600)
+main_area = GridStack(
+    name="SimDec Analysis", sizing_mode="stretch_both", min_height=600
+)
 
-gstack[0:3, 0:3] = pn.pane.Matplotlib(
+main_area[0:3, 0:3] = pn.pane.Matplotlib(
     interactive_figure,
     tight=True,
     format="svg",
 )
 
-gstack[0:3, 3:5] = pn.Column(
+main_area[0:3, 3:5] = pn.Column(
     pn.pane.Markdown("## Scenarios", styles={"color": blue_color}),
     interactive_tableau,
 )
 
-gstack[3:5, 3:5] = pn.Column(
+main_area[3:5, 3:5] = pn.Column(
     pn.pane.Markdown("## Details on inputs' states", styles={"color": blue_color}),
     interactive_tableau_states,
 )
 
-gstack[3:5, 0:2] = pn.Column(
+main_area[3:5, 0:2] = pn.Column(
     pn.pane.Markdown("## Sensitivity Indices", styles={"color": blue_color}),
     interactive_sensitivity_indices_table,
 )
 
-gstack.servable(title="Simulation Decomposition Dashboard")
+template.main.append(main_area)
 
 # Header
 icon_size = "1.5em"
@@ -458,10 +472,15 @@ def csv_data(
 logout_button = pn.widgets.Button(name="Log out", width=100)
 logout_button.js_on_click(code="""window.location.href = './logout'""")
 
-pn.Row(
+header_area = pn.Row(
     pn.HSpacer(),
     download_file_button,
     info_button,
     issue_button,
     # logout_button,
-).servable(area="header")
+)
+
+template.header.append(header_area)
+
+# serve the template
+template.servable()