change to alert

app.py

@@ -3,11 +3,7 @@ import pandas as pd
 import dash_mantine_components as dmc
 import duckdb
 import time
-from graphs.leaderboard import (
-    button_style,
-    get_top_n_leaderboard,
-    render_table_content
-)
+from graphs.leaderboard import button_style, get_top_n_leaderboard, render_table_content
 from dash_iconify import DashIconify
 
 # Initialize the app
@@ -282,7 +278,42 @@ app.layout = dmc.MantineProvider(
                     className="responsive-header",  # <-- add class
                 ),
                 html.Div(
-                    [
+                    children=[
+                        dmc.Alert(
+                            # add an icon to the alert
+                            icon=DashIconify(
+                                icon="mdi:information-outline",
+                                width=18,
+                                height=18,
+                                style={"color": "#1A5F8D"},
+                            ),
+                            children=[
+                                "Note: This dashboard uses ",
+                                html.A(
+                                    "public Hugging Face",
+                                    href="https://huggingface.co/datasets/hfmlsoc/hub_weekly_snapshots",
+                                    target="_blank",
+                                    style={
+                                        "color": "#1A5F8D",
+                                        "fontWeight": "bold",
+                                        "textDecoration": "underline",
+                                    },
+                                ),
+                                " download data, which is less precise than data analyzed in the paper.",
+                            ],
+                            color="blue",
+                            radius="md",
+                            variant="light",
+                            withCloseButton=True,
+                            style={
+                                "marginTop": "16px",
+                                "marginBottom": "8px",
+                                "fontSize": "15px",
+                                "fontWeight": "500",
+                                "marginLeft": "auto",
+                                "marginRight": "auto",
+                            },
+                        ),
                         html.Span(
                             "The Open Model Leaderboard",
                             style={
@@ -293,58 +324,10 @@ app.layout = dmc.MantineProvider(
                                 "marginBottom": "20px",
                             },
                         ),
-                        # Add info popover next to the title
-                        dmc.Popover(
-                            width=350,
-                            position="top",
-                            withArrow=True,
-                            shadow="md",
-                            offset=8,
-                            children=[
-                                dmc.PopoverTarget(
-                                    html.Span(
-                                        DashIconify(
-                                            icon="mdi:information-outline",
-                                            width=22,
-                                            height=22,
-                                            style={
-                                                "marginLeft": "12px",
-                                                "color": "#AC482A",
-                                                "verticalAlign": "middle",
-                                                "cursor": "pointer",
-                                            },
-                                        ),
-                                        style={"display": "inline-block"},
-                                    )
-                                ),
-                                dmc.PopoverDropdown(
-                                    html.Div(
-                                        [
-                                            html.Span("Note: This dashboard uses ", style={"color": "#082030", "fontWeight": "500"}),
-                                            html.A(
-                                                "public Hugging Face download data",
-                                                href="https://huggingface.co/datasets/hfmlsoc/hub_weekly_snapshots",
-                                                target="_blank",
-                                                style={
-                                                    "color": "#AC482A",
-                                                    "fontWeight": "bold",
-                                                    "textDecoration": "underline"
-                                                },
-                                            ),
-                                            html.Span(", which is less precise than data analyzed in the paper.", style={"color": "#082030", "fontWeight": "500"}),
-                                        ],
-                                        style={
-                                            "fontSize": "15px",
-                                            "lineHeight": "1.5",
-                                            "margin": "4px 0",
-                                        },
-                                    )
-                                ),
-                            ],
-                        ),
                     ],
                     style={
                         "display": "flex",
+                        "flexDirection": "column",
                         "alignItems": "center",
                         "justifyContent": "center",
                         "gap": "12px",
@@ -427,8 +410,16 @@ app.layout = dmc.MantineProvider(
                                             color="#AC482A",
                                             transitionDuration=200,
                                             data=[
-                                                {"value": "all-downloads", "label": "All Downloads"},
-                                                {"value": "filtered-downloads", "label": html.Span(["Filtered Downloads"])},
+                                                {
+                                                    "value": "all-downloads",
+                                                    "label": "All Downloads",
+                                                },
+                                                {
+                                                    "value": "filtered-downloads",
+                                                    "label": html.Span(
+                                                        ["Filtered Downloads"]
+                                                    ),
+                                                },
                                             ],
                                             mb=10,
                                         ),
@@ -451,8 +442,14 @@ app.layout = dmc.MantineProvider(
                                             color="#AC482A",
                                             transitionDuration=200,
                                             data=[
-                                                {"value": "uploader", "label": "Model Uploader"},
-                                                {"value": "original_creator", "label": "Original Model Creator"},
+                                                {
+                                                    "value": "uploader",
+                                                    "label": "Model Uploader",
+                                                },
+                                                {
+                                                    "value": "original_creator",
+                                                    "label": "Original Model Creator",
+                                                },
                                             ],
                                             mb=10,
                                         ),
@@ -571,9 +568,14 @@ app.layout = dmc.MantineProvider(
                                         html.Div(
                                             children=[
                                                 "The country leaderboard shows how downloads are distributed across different nations, highlighting which countries are leading in model usage and adoption. The metadata includes the ",
-                                                html.Span("country", className="meta-var"),
+                                                html.Span(
+                                                    "country", className="meta-var"
+                                                ),
                                                 " and number of ",
-                                                html.Span("user downloads", className="meta-var"),
+                                                html.Span(
+                                                    "user downloads",
+                                                    className="meta-var",
+                                                ),
                                                 ".",
                                             ],
                                             className="tab-description",
@@ -583,7 +585,9 @@ app.layout = dmc.MantineProvider(
                                                 id="loading-countries",
                                                 type="circle",
                                                 color="#AC482A",
-                                                children=html.Div(id="top_countries-table"),
+                                                children=html.Div(
+                                                    id="top_countries-table"
+                                                ),
                                             ),
                                             className="responsive-table-wrapper",  # <-- add wrapper for scroll
                                         ),
@@ -616,11 +620,18 @@ app.layout = dmc.MantineProvider(
                                         html.Div(
                                             children=[
                                                 "The developer leaderboard highlights the most influential model creators on Hugging Face, showcasing which developers have garnered the highest download counts for their models. The metadata includes the ",
-                                                html.Span("developer", className="meta-var"),
+                                                html.Span(
+                                                    "developer", className="meta-var"
+                                                ),
                                                 ", number of ",
-                                                html.Span("user downloads", className="meta-var"),
+                                                html.Span(
+                                                    "user downloads",
+                                                    className="meta-var",
+                                                ),
                                                 ", and ",
-                                                html.Span("country", className="meta-var"),
+                                                html.Span(
+                                                    "country", className="meta-var"
+                                                ),
                                                 ".",
                                             ],
                                             className="tab-description",
@@ -665,13 +676,22 @@ app.layout = dmc.MantineProvider(
                                         html.Div(
                                             children=[
                                                 "The model leaderboard ranks individual models based on their download counts, revealing which models are most popular among users on Hugging Face. The metadata includes the ",
-                                                html.Span("model name", className="meta-var"),
+                                                html.Span(
+                                                    "model name", className="meta-var"
+                                                ),
                                                 ", number of ",
-                                                html.Span("user downloads", className="meta-var"),
+                                                html.Span(
+                                                    "user downloads",
+                                                    className="meta-var",
+                                                ),
                                                 ", ",
-                                                html.Span("developer", className="meta-var"),
+                                                html.Span(
+                                                    "developer", className="meta-var"
+                                                ),
                                                 ", and ",
-                                                html.Span("modality", className="meta-var"),
+                                                html.Span(
+                                                    "modality", className="meta-var"
+                                                ),
                                                 " (the input and output types of the model).",
                                             ],
                                             className="tab-description",
@@ -681,7 +701,9 @@ app.layout = dmc.MantineProvider(
                                                 id="loading-models",
                                                 type="circle",
                                                 color="#AC482A",
-                                                children=html.Div(id="top_models-table"),
+                                                children=html.Div(
+                                                    id="top_models-table"
+                                                ),
                                             ),
                                             className="responsive-table-wrapper",
                                         ),