WIP Dashboard : some styling

web/dashboard/app.py

@@ -1,11 +1,13 @@
 import os
+from pathlib import Path
 
 import pandas as pd
 import panel as pn
+import param
+import ui
 from main_dashboard import MainDashboard
 from odmantic import SyncEngine
 from pymongo import MongoClient
-from ui import get_template
 
 from osm import schemas
 
@@ -69,15 +71,84 @@ def load_data():
     return pd.DataFrame(flatten_dict(match) for match in matches)
 
 
-def dashboard_page():
-    template = get_template()
+class OSMApp(param.Parameterized):
+    def __init__(self):
+        super().__init__()
 
-    dashboard = MainDashboard({"RTransparent": pn.state.cache["data"]})
+        # Apply the design modifiers to the panel components
+        # It returns all the CSS files of the modifiers
+        self.css_filepaths = ui.apply_design_modifiers()
 
-    template.main.append(dashboard.get_dashboard)
-    template.sidebar.append(dashboard.get_sidebar)
+    def get_template(self):
+        # A bit hacky, but works.
+        # we need to preload the css files to avoid a flash of unstyled content, especially when switching between chats.
+        # This is achieved by adding <link ref="preload" ...> tags in the head of the document.
+        # But none of the panel templates allow to add custom link tags in the head.
+        # the only way I found is to take advantage of the raw_css parameter, which allows to add custom css in the head.
+        preload_css = "\n".join(
+            [
+                f"""<link rel="preload" href="{css_fp}" as="style" />"""
+                for css_fp in self.css_filepaths
+            ]
+        )
+        preload_css = f"""
+                     </style>
+                     {preload_css}
+                     <style type="text/css">
+                     """
+
+        template = pn.template.FastListTemplate(
+            site="NIH",
+            title="OpenSciMetrics",
+            favicon="https://www.nih.gov/favicon.ico",
+            sidebar=[],
+            accent_base_color=ui.MAIN_COLOR,
+            theme_toggle=False,
+            raw_css=[ui.CSS_VARS, preload_css],
+            css_files=[
+                "https://rsms.me/inter/inter.css",
+                "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
+            ],
+        )
+        # <link rel="preconnect" href="https://fonts.googleapis.com">
+        # <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        # <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+        template.header.append(
+            ui.connection_monitor(),
+        )
 
-    return template
+        return template
+
+    def dashboard_page(self):
+        template = self.get_template()
+        dashboard = MainDashboard({"RTransparent": pn.state.cache["data"]})
+        template.main.append(dashboard.get_intro_block())
+        template.main.append(dashboard.get_dashboard)
+        template.sidebar.append(dashboard.get_sidebar)
+
+        return template
+
+    def serve(self):
+        pn.serve(
+            {"/": self.dashboard_page},
+            address="0.0.0.0",
+            port=8501,
+            start=True,
+            location=True,
+            show=False,
+            keep_alive=30 * 1000,  # 30s
+            autoreload=True,
+            admin=True,
+            profiler="pyinstrument",
+            allow_websocket_origin=[
+                "localhost:8501",
+                "osm.pythonaisolutions.com",
+            ],
+            static_dirs={
+                dir: str(Path(__file__).parent / dir)
+                for dir in ["css"]  # add more directories if needed
+            },
+        )
 
 
 def on_load():
@@ -108,19 +179,5 @@ def on_load():
     # Runs all the things necessary before the server actually starts.
     pn.state.onload(on_load)
     print("starting dashboard!")
-    pn.serve(
-        {"/": dashboard_page},
-        address="0.0.0.0",
-        port=8501,
-        start=True,
-        location=True,
-        show=False,
-        keep_alive=30 * 1000,  # 30s
-        autoreload=True,
-        admin=True,
-        profiler="pyinstrument",
-        allow_websocket_origin=[
-            "localhost:8501",
-            "osm.pythonaisolutions.com",
-        ],
-    )
+
+    OSMApp().serve()

web/dashboard/css/filters/markdown.css

@@ -0,0 +1,18 @@
+:host(.filters-section-header.markdown) {
+    padding:0px 0px 0px 0.5em !important;
+    margin:0px !important;
+    color: rgba(0, 0, 0, 0.87);
+
+}
+:host(.filters-section-header) h3 {
+
+    margin:0px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 266%;
+
+    letter-spacing: 1px;
+    text-transform: uppercase;
+
+}

web/dashboard/css/filters/textinput.css

@@ -0,0 +1,32 @@
+
+:host(.filters-text-input) {
+    /* background-color: red; */
+}
+
+:host(.filters-text-input.pubdate-input) {
+    width:45%;
+    max-width: 45%;
+    min-width: 45%;
+    margin-top:0px;
+
+
+}
+
+:host(.filters-text-input) .bk-input-group {
+    width:unset;
+}
+
+.bk-input-group label {
+
+    color: var(--secondary-text-color);
+    transform: translate(9px, 9px);
+    background: var(--background-color);
+    z-index: 1;
+    padding: 0 4px;
+
+}
+
+
+.bk-input-group input {
+    border-color: var(--secondary-bg-color) !important;
+} 

web/dashboard/css/global/button.css

@@ -0,0 +1,12 @@
+:host(.solid) .bk-btn.bk-btn-primary {
+  background-color: var(--accent-fill-rest);
+  border-color: var(--accent-fill-rest);
+  color: var(--foreground-on-accent-rest);
+  font-size: 14px;
+}
+
+:host(.solid) .bk-btn.bk-btn-primary:hover {
+  background-color: var(--accent-fill-hover);
+  border-color: var(--accent-fill-hover);
+  color: var(--foreground-on-accent-hover);
+}

web/dashboard/css/global/divider.css

@@ -0,0 +1,11 @@
+:host(.default_divider) {
+  padding: 0em 1em;
+}
+
+:host(.default_divider) hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  padding: 0;
+}

web/dashboard/css/global/select.css

@@ -0,0 +1,3 @@
+.bk-input {
+  border-color: var(--neutral-color) !important;
+}

web/dashboard/css/global/textinput.css

@@ -0,0 +1,3 @@
+.bk-input {
+  border-color: var(--neutral-color) !important;
+}

web/dashboard/main_dashboard.py

@@ -14,7 +14,10 @@
 
 extraction_tools_params = {
     "RTransparent": {
-        "metrics": ["is_data_pred", "is_code_pred", "score", "eigenfactor_score"],
+        "metrics": [
+            "is_data_pred",
+            "is_code_pred",
+        ],
         "splitting_vars": [
             "None",
             "journal",
@@ -27,8 +30,8 @@
 dims_aggregations = {
     "is_data_pred": ["percent", "count_true"],
     "is_code_pred": ["percent", "count_true"],
-    "score": ["mean"],
-    "eigenfactor_score": ["mean"],
+    # "score": ["mean"],
+    # "eigenfactor_score": ["mean"],
 }
 
 metrics_titles = {
@@ -346,10 +349,14 @@ def get_pubdate_filter(self):
 
         # The text inputs only reflect and update the value of the slider's bounds
         start_pubdate_input = pn.widgets.TextInput(
-            value=str(int(self.param.filter_pubdate.bounds[0])), width=80
+            value=str(int(self.param.filter_pubdate.bounds[0])),
+            name="From",
+            css_classes=["filters-text-input", "pubdate-input"],
         )
         end_pubdate_input = pn.widgets.TextInput(
-            value=str(int(self.param.filter_pubdate.bounds[1])), width=80
+            value=str(int(self.param.filter_pubdate.bounds[1])),
+            name="To",
+            css_classes=["filters-text-input", "pubdate-input"],
         )
 
         # When the slider's value change, update the TextInputs
@@ -426,7 +433,9 @@ def get_sidebar(self):
             pn.pane.Markdown("### Applied Filters"),
             pn.pane.Markdown("(todo)"),
             pn.layout.Divider(),
-            pn.pane.Markdown("### Publication Details"),
+            pn.pane.Markdown(
+                "### Publication Details", css_classes=["filters-section-header"]
+            ),
             # pn.pane.Markdown("#### Publication Date"),
             self.get_pubdate_filter(),
             pn.layout.Divider(),
@@ -448,6 +457,32 @@ def get_top_bar(self):
             pn.widgets.Select.from_param(self.param.splitting_var),
         )
 
+    def get_intro_block(self):
+        explore_data_button = pn.widgets.Button(
+            name="EXPLORE THE DATA", width=180, button_style="solid"
+        )
+
+        learn_more_button = pn.widgets.Button(
+            name="LEARN MORE",
+            width=180,
+            button_style="solid",
+            button_type="light",
+        )
+        github_button = pn.widgets.Button(
+            name="GITHUB",
+            width=180,
+            button_style="solid",
+            button_type="light",
+        )
+
+        return pn.Column(
+            pn.pane.Markdown("#OpenSciMetrics Dashboard"),
+            pn.pane.Markdown(
+                "OpenSciMetrics is a tool designed to evaluate open science practices in biomedical publications, such as data sharing, code availability, and research transparency. Our goal is to provide insights into how these practices evolve over time and across different fields, journals, and countries. Use the dashboard below to explore key metrics and trends."
+            ),
+            pn.Row(explore_data_button, learn_more_button, github_button),
+        )
+
     @pn.depends(
         "extraction_tool",
         "filter_journal",