cleanup app.py into modularized components

app.py

@@ -1,94 +1,26 @@
 from dash import Dash, html, dcc, Input, Output, State
 import pandas as pd
 import dash_mantine_components as dmc
-import duckdb
 import time
+
+from config import DATASET_ID
+from data_utils import create_fresh_duckdb_with_views, get_last_updated
 from graphs.leaderboard import (
-    button_style,
-    get_top_n_leaderboard,
-    render_table_content,
-    build_leaderboard_query,
+    leaderboard_callback_logic,
+)
+from helpers import build_slider_marks, get_thumb_label_single, get_thumb_labels
+from layout_components import (
+    build_main_layout,
+    build_range_slider,
+    build_single_slider,
 )
-from dash_iconify import DashIconify
 
 # Initialize the app
 app = Dash(suppress_callback_exceptions=True) # suppress callback exceptions for multi-page layout
 server = app.server
 
-
-# Add dataset URLs (used by the helper to create views)
-HF_DATASET_ID = "mmpr/open_model_evolution_data"
-hf_parquet_url_1 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
-hf_parquet_url_2 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
-
-# Helper: create a fresh in-memory DuckDB connection and (re)create parquet-backed views.
-def create_fresh_duckdb_with_views():
-    """
-    Returns a fresh in-memory DuckDB connection with httpfs enabled and the
-    all_downloads / one_year_rolling views created from the remote parquet URLs.
-    Caller must close the returned connection.
-    """
-    local_con = duckdb.connect(database=":memory:", read_only=False)
-    try:
-        # try to install/load httpfs if necessary; ignore errors if preinstalled
-        try:
-            local_con.execute("INSTALL httpfs;")
-            local_con.execute("LOAD httpfs;")
-        except Exception:
-            pass
-
-        # keep HF Spaces behavior consistent
-        try:
-            local_con.execute("SET enable_http_metadata_cache = false;")
-            local_con.execute("SET enable_object_cache = false;")
-        except Exception:
-            pass
-
-        # create views referencing remote parquet files
-        local_con.execute(f"""
-            CREATE OR REPLACE VIEW all_downloads AS
-            SELECT * FROM read_parquet('{hf_parquet_url_1}')
-        """)
-        local_con.execute(f"""
-            CREATE OR REPLACE VIEW one_year_rolling AS
-            SELECT * FROM read_parquet('{hf_parquet_url_2}')
-        """)
-    except Exception:
-        # If view creation fails, ensure connection is still returned for caller to handle/close
-        pass
-    return local_con
-
-# Query for most recent date in all_downloads
-def get_last_updated():
-    try:
-        conn = create_fresh_duckdb_with_views()
-        try:
-            result = conn.execute("SELECT MAX(time) as max_time FROM all_downloads").fetchdf()
-        finally:
-            conn.close()
-
-        max_time = result["max_time"].iloc[0]
-        if pd.isnull(max_time):
-            return "N/A"
-        dt = pd.to_datetime(max_time)
-        return dt.strftime("%b %d, %Y")
-    except Exception:
-        return "N/A"
-
-
-# DuckDB connection (global)
-con = duckdb.connect(database=":memory:", read_only=False)
-
-# disable all caching so HF Spaces always read latest parquet
-con.execute("SET enable_http_metadata_cache = false;")
-con.execute("SET enable_object_cache = false;")
-
-# Load parquet files from Hugging Face using DuckDB
-HF_DATASET_ID = "mmpr/open_model_evolution_data"
-hf_parquet_url_1 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
-hf_parquet_url_2 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
-
-print(f"Attempting to connect to dataset from Hugging Face Hub: {HF_DATASET_ID}")
+# Load dataset and determine time range
+print(f"Attempting to connect to dataset from Hugging Face Hub: {DATASET_ID}")
 try:
     overall_start_time = time.time()
 
@@ -111,153 +43,27 @@ except Exception as e:
 # Create a dcc slider for time range selection by year (readable marks)
 start_ts = int(start_dt.timestamp())
 end_ts = int(end_dt.timestamp())
-
-
-def ordinal(n):
-    # Helper to get ordinal suffix for a day
-    if 10 <= n % 100 <= 20:
-        suffix = "th"
-    else:
-        suffix = {1: "st", 2: "nd", 3: "rd"}.get(n % 10, "th")
-    return f"{n}{suffix}"
-
-
-def format_date(dt):
-    # Format date as "Oct 8th, 2025"
-    return dt.strftime("%b") + f" {ordinal(dt.day)}, {dt.year}"
-
-
-marks = []
-# Add start label (e.g. "Jan 2020")
-marks.append({"value": start_ts, "label": start_dt.strftime("%b %Y")})
-# Add yearly marks between start and end (e.g. "2021", "2022")
-# for yr in range(start_dt.year, end_dt.year + 1):
-#     yr_ts = int(pd.Timestamp(year=yr, month=1, day=1).timestamp())
-#     start_yr = int(pd.Timestamp(year=start_dt.year, month=1, day=1).timestamp())
-#     if yr_ts != start_yr and yr_ts != end_ts:
-#         marks.append({"value": yr_ts, "label": str(yr)})
-# Add end label (e.g. "Dec 2024")
-marks.append({"value": end_ts, "label": end_dt.strftime("%b %Y")})
-
-
-def get_thumb_labels(values):
-    # Returns formatted labels for both thumbs
-    distance = abs(values[1] - values[0])
-    close = distance < 4 * 30 * 86400  # 4 months
-
-    label_style = {
-        "background": "#fff",
-        "color": "#082030",
-        "fontWeight": "bold",
-        "fontSize": "13px",
-        "borderRadius": "8px",
-        "padding": "2px 8px",
-        "boxShadow": "0 1px 4px rgba(8,32,48,0.10)",
-        "position": "absolute",
-        "left": "50%",
-        "transform": "translateX(-50%)",
-        "whiteSpace": "nowrap",
-        "zIndex": 100,
-    }
-
-    if close:
-        # Move first label above, second label below (closer to slider)
-        style_top_1 = label_style.copy()
-        style_top_1["top"] = "-38px"
-        style_top_2 = label_style.copy()
-        style_top_2["top"] = "14px"
-        return [
-            html.Div(
-                format_date(pd.to_datetime(values[0], unit="s")),
-                style=style_top_1,
-            ),
-            html.Div(
-                format_date(pd.to_datetime(values[1], unit="s")),
-                style=style_top_2,
-            ),
-        ]
-    else:
-        # Both labels below the slider (closer to slider)
-        style_top_1 = label_style.copy()
-        style_top_1["top"] = "14px"
-        style_top_2 = label_style.copy()
-        style_top_2["top"] = "14px"
-        return [
-            html.Div(
-                format_date(pd.to_datetime(values[0], unit="s")),
-                style=style_top_1,
-            ),
-            html.Div(
-                format_date(pd.to_datetime(values[1], unit="s")),
-                style=style_top_2,
-            ),
-        ]
-
-
-# Create a dcc slider for time range selection by year
-time_slider = dmc.RangeSlider(
-    id="time-slider",
-    min=start_ts,
-    max=end_ts,
-    value=[
-        start_ts,
-        end_ts,
-    ],
-    step=24 * 60 * 60,
-    color="#AC482A",
-    size="md",
-    radius="xl",
-    marks=marks,
-    style={"width": "95%", "paddingLeft": "60px"},  # updated paddingLeft
-    label=None,
-    showLabelOnHover=False,
-    labelTransitionProps={"transition": "fade", "duration": 150},
-    thumbChildren=get_thumb_labels([start_ts, end_ts]),
+marks = build_slider_marks(start_dt, end_dt)
+
+time_slider = build_range_slider(
+    start_ts,
+    end_ts,
+    [start_ts, end_ts],
+    marks,
+    thumb_children=get_thumb_labels([start_ts, end_ts]),
 )
 
-# Create a dcc slider for single date selection (all-time mode)
-def get_thumb_label_single(value):
-    """Returns formatted label for single thumb"""
-    label_style = {
-        "background": "#fff",
-        "color": "#082030",
-        "fontWeight": "bold",
-        "fontSize": "13px",
-        "borderRadius": "8px",
-        "padding": "2px 8px",
-        "boxShadow": "0 1px 4px rgba(8,32,48,0.10)",
-        "position": "absolute",
-        "left": "50%",
-        "transform": "translateX(-50%)",
-        "whiteSpace": "nowrap",
-        "zIndex": 100,
-        "top": "14px",
-    }
-    return [
-        html.Div(
-            format_date(pd.to_datetime(value, unit="s")),
-            style=label_style,
-        )
-    ]
-
-time_slider_alltime = dmc.Slider(
-    id="time-slider-alltime",
-    min=start_ts,
-    max=end_ts,
-    value=end_ts,
-    step=24 * 60 * 60,
-    color="#AC482A",
-    size="md",
-    radius="xl",
-    marks=marks,
-    style={"width": "95%", "paddingLeft": "60px"},
-    label=None,
-    showLabelOnHover=False,
-    labelTransitionProps={"transition": "fade", "duration": 150},
-    thumbChildren=get_thumb_label_single(end_ts),
+time_slider_alltime = build_single_slider(
+    start_ts,
+    end_ts,
+    end_ts,
+    marks,
+    thumb_children=get_thumb_label_single(end_ts),
 )
 
-# Add a dcc.Store to hold the selected view (all_downloads or one_year_rolling)
+last_updated_label = get_last_updated()
+
+# Define the app layout
 app.layout = dmc.MantineProvider(
     theme={
         "colorScheme": "light",
@@ -269,748 +75,15 @@ app.layout = dmc.MantineProvider(
         dcc.Store(id="model-attribution-type", data="uploader"),
         dcc.Store(id="time-slider-value", data=[start_ts, end_ts]),
         dcc.Store(id="time-slider-alltime-value", data=end_ts),
-        html.Div(
-            [
-                # Header
-                html.Div(
-                    [
-                        html.Div(
-                            [
-                                html.Span(
-                                    [
-                                        html.Span(
-                                            className="live-dot",
-                                        ),
-                                        html.Span(
-                                            "LIVE",
-                                            className="live-label",
-                                        ),
-                                    ],
-                                    className="live-row",
-                                ),
-                                html.Span(
-                                    f"Last updated: {get_last_updated()}",
-                                    className="last-updated",
-                                ),
-                            ],
-                            className="header-status-row",
-                        ),
-                        html.Div(
-                            [
-                                html.A(
-                                    children=[
-                                        html.Img(
-                                            src="assets/images/dpi.svg",
-                                            className="header-logo-img",
-                                        ),
-                                        "Data Provenance Initiative",
-                                    ],
-                                    href="https://www.dataprovenance.org/",
-                                    target="_blank",
-                                    className="no-bg-link header-link",
-                                ),
-                                html.A(
-                                    children=[
-                                        html.Img(
-                                            src="assets/images/hf.svg",
-                                            className="header-logo-img",
-                                        ),
-                                        html.Span(
-                                            "Hugging Face",
-                                            className="hf-brand-text",
-                                        ),
-                                    ],
-                                    href="https://huggingface.co/",
-                                    target="_blank",
-                                    className="no-bg-link header-link",
-                                ),
-                                html.A(
-                                    children=[
-                                        html.Span(
-                                            "Read the paper",
-                                            className="paper-text",
-                                        ),
-                                    ],
-                                    href="https://arxiv.org/abs/2512.03073",
-                                    target="_blank",
-                                    className="no-bg-link header-link paper-link",
-                                ),
-                            ],
-                            className="header-links-row",
-                        ),
-                    ],
-                    style={
-                        "display": "flex",
-                        "justifyContent": "space-between",
-                        "alignItems": "center",
-                        "padding": "18px 24px",
-                        "gap": "24px",
-                        "backgroundColor": "#082030",  # restored dark background
-                    },
-                    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={
-                                "fontSize": 40,
-                                "fontWeight": "700",
-                                "textAlign": "center",
-                                "marginTop": "20px",
-                                "marginBottom": "20px",
-                            },
-                        ),
-                    ],
-                    style={
-                        "display": "flex",
-                        "flexDirection": "column",
-                        "alignItems": "center",
-                        "justifyContent": "center",
-                        "gap": "12px",
-                        "marginTop": "20px",
-                        "marginBottom": "20px",
-                    },
-                    className="responsive-title-row",  # <-- add class
-                ),
-                html.Div(
-                    children=[
-                        "This leaderboard assesses concentrations of power in the open model ecosystem through ranking user downloads across three groups: countries, developers, and models. Explore how user downloads of models are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face. This dashboard accompanies the paper titled ",
-                        html.A(
-                            "Economies of Open Intelligence: Tracing Power & Participation in the Model Ecosystem.",
-                            href="https://arxiv.org/abs/2512.03073",
-                            target="_blank",
-                            style={
-                                "color": "#AC482A",
-                                "fontWeight": "700",
-                                "textDecoration": "underline",
-                            },
-                        ),
-                    ],
-                    style={
-                        "fontSize": 14,
-                        "marginTop": 18,
-                        "marginBottom": 12,
-                        "marginLeft": 100,
-                        "marginRight": 100,
-                        "textAlign": "center",
-                    },
-                    className="responsive-intro",  # <-- add class
-                ),
-                html.Div(
-                    children=[
-                        html.Div(
-                            [
-                                html.Div(
-                                    html.Span(
-                                        [
-                                            "Download View",
-                                            dmc.HoverCard(
-                                                width=260,
-                                                shadow="md",
-                                                position="top",
-                                                children=[
-                                                    dmc.HoverCardTarget(
-                                                        html.Span(
-                                                            DashIconify(
-                                                                icon="mdi:information-outline",
-                                                                width=16,
-                                                                height=16,
-                                                                style={
-                                                                    "marginLeft": "6px",
-                                                                    "color": "#AC482A",
-                                                                    "verticalAlign": "middle",
-                                                                },
-                                                            ),
-                                                            style={"cursor": "pointer"},
-                                                        )
-                                                    ),
-                                                    dmc.HoverCardDropdown(
-                                                        dmc.Text(
-                                                            "We believe this filter isolates more authentic usage, mitigating the impact of automatic software downloads for older models.",
-                                                            size="sm",
-                                                            style={"maxWidth": "240px"},
-                                                        )
-                                                    ),
-                                                ],
-                                            ),
-                                        ],
-                                        className="filter-label-row",
-                                    ),
-                                    className="filter-label-container",
-                                ),
-                                html.Div(
-                                    [
-                                        dmc.SegmentedControl(
-                                            id="segmented",
-                                            value="all-downloads",
-                                            color="#AC482A",
-                                            transitionDuration=200,
-                                            data=[
-                                                {
-                                                    "value": "all-downloads",
-                                                    "label": "All Downloads",
-                                                },
-                                                {
-                                                    "value": "filtered-downloads",
-                                                    "label": html.Span(
-                                                        ["Filtered Downloads"]
-                                                    ),
-                                                },
-                                            ],
-                                            mb=10,
-                                        ),
-                                    ],
-                                    className="filter-segmented-row",
-                                ),
-                                html.Div(
-                                    "Choose whether to count all downloads, or only downloads up to one year from model creation.",
-                                    className="filter-description",
-                                ),
-                                html.Div(
-                                    [
-                                        html.Div(
-                                            "Model Attribution",
-                                            className="filter-label",
-                                        ),
-                                        dmc.SegmentedControl(
-                                            id="model-attribution-segmented",
-                                            value="uploader",
-                                            color="#AC482A",
-                                            transitionDuration=200,
-                                            data=[
-                                                {
-                                                    "value": "uploader",
-                                                    "label": "Model Uploader",
-                                                },
-                                                {
-                                                    "value": "original_creator",
-                                                    "label": "Original Model Creator",
-                                                },
-                                            ],
-                                            mb=10,
-                                        ),
-                                        html.Div(
-                                            "Toggle between having downloads attributed to the account that uploaded the model, or the account that uploaded the model that this was originally derived from.",
-                                            className="filter-description",
-                                        ),
-                                    ],
-                                    style={"marginTop": "10px"},
-                                ),
-                                html.Span(
-                                    id="global-toggle-status",
-                                    className="global-toggle-status",
-                                ),
-                            ],
-                            className="main-content-left",
-                        ),
-                        html.Div(
-                            [
-                                html.Div(
-                                    [
-                                        html.Span(
-                                            "Download Date Range",
-                                            className="filter-label",
-                                        ),
-                                        dmc.HoverCard(
-                                            width=260,
-                                            shadow="md",
-                                            position="top",
-                                            children=[
-                                                dmc.HoverCardTarget(
-                                                    html.Span(
-                                                        DashIconify(
-                                                            icon="mdi:information-outline",
-                                                            width=16,
-                                                            height=16,
-                                                            style={
-                                                                "marginLeft": "6px",
-                                                                "color": "#AC482A",
-                                                                "verticalAlign": "middle",
-                                                            },
-                                                        ),
-                                                        style={"cursor": "pointer"},
-                                                    )
-                                                ),
-                                                dmc.HoverCardDropdown(
-                                                    dmc.Text(
-                                                        "Toggle between viewing downloads between a date range or all-time downloads at a single date.",
-                                                        size="sm",
-                                                        style={"maxWidth": "240px"},
-                                                    )
-                                                ),
-                                            ],
-                                        ),
-                                    ],
-                                    className="filter-label-row",
-                                ),
-                                dmc.Switch(
-                                    id="time-range-toggle",
-                                    label="All-time",
-                                    checked=False,
-                                    color="#AC482A",
-                                    style={"marginBottom": "12px"},
-                                ),
-                                dcc.Loading(
-                                    id="loading-slider",
-                                    type="circle",
-                                    color="#AC482A",
-                                    children=html.Div(
-                                        id="slider-container",
-                                        children=[time_slider],
-                                    ),
-                                ),
-                                html.Div(
-                                    id="slider-description",
-                                    children="Adjust the time range to filter leaderboard results by when models were downloaded by users.",
-                                    className="filter-description filter-description-margin",
-                                ),
-                                html.Div(
-                                    [
-                                        html.Div(
-                                            [
-                                                DashIconify(
-                                                    icon="mdi:lightbulb-on-outline",
-                                                    width=20,
-                                                    height=20,
-                                                    style={
-                                                        "marginRight": "8px",
-                                                        "color": "#082030",
-                                                    },
-                                                ),
-                                                html.Span("Tip"),
-                                            ],
-                                            className="tip-title",
-                                        ),
-                                        html.Div(
-                                            [
-                                                "Try switching between ",
-                                                html.Span(
-                                                    "All Downloads",
-                                                    className="tip-highlight",
-                                                ),
-                                                " and ",
-                                                html.Span(
-                                                    "Filtered Downloads",
-                                                    className="tip-highlight",
-                                                ),
-                                                " to compare net popularity (but many duplicate, unused downloads) versus more immediate interest as models are released. ",
-                                                "You can also toggle between ",
-                                                html.Span(
-                                                    "Model Uploader",
-                                                    className="tip-highlight",
-                                                ),
-                                                " and ",
-                                                html.Span(
-                                                    "Original Model Creator",
-                                                    className="tip-highlight",
-                                                ),
-                                                " to see how attribution affects perceived popularity.",
-                                            ],
-                                            className="tip-description",
-                                        ),
-                                    ],
-                                    className="tip-section",
-                                ),
-                            ],
-                            className="main-content-right",
-                        ),
-                    ],
-                    style={
-                        "display": "flex",
-                        "gap": "24px",
-                        "padding": "32px",
-                        "alignItems": "flex-start",
-                        "marginLeft": "100px",
-                        "marginRight": "100px",
-                        "backgroundColor": "#FFFBF9",
-                        "borderRadius": "18px",
-                    },
-                    className="responsive-main-content",  # <-- add class
-                ),
-                html.Div(
-                    [
-                        dcc.Tabs(
-                            id="leaderboard-tabs",
-                            value="Countries",
-                            children=[
-                                dcc.Tab(
-                                    label="Countries",
-                                    value="Countries",
-                                    style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "color": "#6B7280",
-                                        "fontWeight": "500",
-                                    },
-                                    selected_style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "fontWeight": "700",
-                                        "borderBottom": "3px solid #082030",
-                                    },
-                                    children=[
-                                        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"
-                                                ),
-                                                " and number of ",
-                                                html.Span(
-                                                    "user downloads",
-                                                    className="meta-var",
-                                                ),
-                                                ".",
-                                            ],
-                                            className="tab-description",
-                                        ),
-                                        html.Div(
-                                            dcc.Loading(
-                                                id="loading-countries",
-                                                type="circle",
-                                                color="#AC482A",
-                                                children=html.Div(
-                                                    id="top_countries-table"
-                                                ),
-                                            ),
-                                            className="responsive-table-wrapper",  # <-- add wrapper for scroll
-                                        ),
-                                        html.Button(
-                                            id="top_countries-toggle",
-                                            children="▼ Show Top 50",
-                                            n_clicks=0,
-                                            style={**button_style, "border": "none"},
-                                        ),
-                                    ],
-                                ),
-                                dcc.Tab(
-                                    label="Developers",
-                                    value="Developers",
-                                    style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "color": "#6B7280",
-                                        "fontWeight": "500",
-                                    },
-                                    selected_style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "fontWeight": "700",
-                                        "borderBottom": "3px solid #082030",
-                                    },
-                                    children=[
-                                        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"
-                                                ),
-                                                ", number of ",
-                                                html.Span(
-                                                    "user downloads",
-                                                    className="meta-var",
-                                                ),
-                                                ", and ",
-                                                html.Span(
-                                                    "country", className="meta-var"
-                                                ),
-                                                ".",
-                                            ],
-                                            className="tab-description",
-                                        ),
-                                        html.Div(
-                                            dcc.Loading(
-                                                id="loading-developers",
-                                                type="circle",
-                                                color="#AC482A",
-                                                children=html.Div(
-                                                    id="top_developers-table"
-                                                ),
-                                            ),
-                                            className="responsive-table-wrapper",
-                                        ),
-                                        html.Button(
-                                            id="top_developers-toggle",
-                                            children="▼ Show Top 50",
-                                            n_clicks=0,
-                                            style={**button_style, "border": "none"},
-                                        ),
-                                    ],
-                                ),
-                                dcc.Tab(
-                                    label="Models",
-                                    value="Models",
-                                    style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "color": "#6B7280",
-                                        "fontWeight": "500",
-                                    },
-                                    selected_style={
-                                        "backgroundColor": "transparent",
-                                        "border": "none",
-                                        "padding": "10px 18px",
-                                        "fontWeight": "700",
-                                        "borderBottom": "3px solid #082030",
-                                    },
-                                    children=[
-                                        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"
-                                                ),
-                                                ", number of ",
-                                                html.Span(
-                                                    "user downloads",
-                                                    className="meta-var",
-                                                ),
-                                                ", ",
-                                                html.Span(
-                                                    "developer", className="meta-var"
-                                                ),
-                                                ", and ",
-                                                html.Span(
-                                                    "modality", className="meta-var"
-                                                ),
-                                                " (the input and output types of the model).",
-                                            ],
-                                            className="tab-description",
-                                        ),
-                                        html.Div(
-                                            dcc.Loading(
-                                                id="loading-models",
-                                                type="circle",
-                                                color="#AC482A",
-                                                children=html.Div(
-                                                    id="top_models-table"
-                                                ),
-                                            ),
-                                            className="responsive-table-wrapper",
-                                        ),
-                                        html.Button(
-                                            id="top_models-toggle",
-                                            children="▼ Show Top 50",
-                                            n_clicks=0,
-                                            style={**button_style, "border": "none"},
-                                        ),
-                                    ],
-                                ),
-                            ],
-                        ),
-                    ],
-                    style={
-                        "borderRadius": "18px",
-                        "padding": "32px",
-                        "marginTop": "12px",
-                        "marginBottom": "12px",
-                        "marginLeft": "50px",
-                        "marginRight": "50px",
-                    },
-                    className="responsive-tabs",  # <-- add class
-                ),
-            ],
-            style={
-                "fontFamily": "Inter",
-                "backgroundColor": "#ffffff",
-                "minHeight": "100vh",
-            },
-        ),
+        build_main_layout(last_updated_label, time_slider),
     ],
 )
 
+# ----------
+# Callbacks
+# ----------
 
-# Callbacks for interactivity
-# -- helper utilities to consolidate duplicated callback logic --
-def _get_filtered_top_n_from_duckdb(
-    slider_value, group_col, top_n, view="all_downloads"
-):
-    """
-    Query DuckDB to get model-level rows with per-model total_downloads (delta or full)
-    Returns a DataFrame with columns including:
-      - group_key (the grouping column)
-      - org_country_single, author, derived_author, merged_country_groups_single, merged_modality, model
-      - total_downloads (per-model downloads in requested window)
-      - percent_of_total (percent of total across all returned model deltas)
-    """
-
-    # Create a fresh connection and load parquet-backed views for each call
-    local_con = create_fresh_duckdb_with_views()
-
-    try:
-        # Compute date window (if slider_value provided, use it; otherwise cover full range)
-        if slider_value and len(slider_value) == 2:
-            start = pd.to_datetime(slider_value[0], unit="s")
-            end = pd.to_datetime(slider_value[1], unit="s")
-        else:
-            start = pd.to_datetime("1970-01-01")
-            # keep previous behavior if end_dt exists
-            try:
-                end_local = end_dt  # may be defined from initial load
-            except NameError:
-                end_local = pd.Timestamp.now()
-            end = end_local
-
-        start_str = str(start)
-        end_str = str(end)
-
-        # Build query using shared function
-        query = build_leaderboard_query(group_col, top_n, start_str, end_str, view=view)
-
-        # execute using the fresh local connection
-        result_df = local_con.execute(query).fetchdf()
-        return result_df
-    finally:
-        local_con.close()
-
-
-def _get_filtered_top_n_alltime_from_duckdb(
-    slider_value, group_col, top_n, view="all_downloads"
-):
-    """
-    Query DuckDB to get model-level rows with all-time (cumulative) total_downloads at a specific date.
-    Returns a DataFrame with columns including:
-      - group_key (the grouping column)
-      - org_country_single, author, derived_author, merged_country_groups_single, merged_modality, model
-      - total_downloads (cumulative downloads up to the selected date)
-      - percent_of_total (percent of total across all returned models)
-    """
-
-    # Create a fresh connection and load parquet-backed views for each call
-    local_con = create_fresh_duckdb_with_views()
-
-    try:
-        # Get the single date from slider_value (all-time mode passes a single value)
-        if slider_value is not None:
-            date = pd.to_datetime(slider_value, unit="s")
-        else:
-            # Fallback to end_dt if available
-            try:
-                date = end_dt
-            except NameError:
-                date = pd.Timestamp.now()
-
-        date_str = str(date)
-
-        # Build query using shared function for all-time
-        query = build_leaderboard_query(group_col, top_n, date_str=date_str, view=view)
-
-        # execute using the fresh local connection
-        result_df = local_con.execute(query).fetchdf()
-        return result_df
-    finally:
-        local_con.close()
-
-
-def _leaderboard_callback_logic(
-    n_clicks,
-    slider_value,
-    current_label,
-    group_col,
-    filename,
-    default_label="▼ Show Top 50",
-    chip_color="#F0F9FF",
-    view="all_downloads",
-    derived_author_toggle=True,
-    is_alltime=False,
-):
-    # Normalize label on first load
-    if current_label is None:
-        current_label = default_label
-
-    # Determine top_n and next label
-    if n_clicks == 0:
-        top_n = 10
-        new_label = current_label
-    elif "Show Top 50" in current_label:
-        top_n, new_label = 50, "▼ Show Top 100"
-    elif "Show Top 100" in current_label:
-        top_n, new_label = 100, "▲ Show Less"
-    else:
-        top_n, new_label = 10, "▼ Show Top 50"
-
-    # Get filtered and aggregated data directly from DuckDB
-    # Use all-time query if is_alltime flag is True
-    if is_alltime:
-        df_filtered = _get_filtered_top_n_alltime_from_duckdb(
-            slider_value, group_col, top_n, view=view
-        )
-    else:
-        df_filtered = _get_filtered_top_n_from_duckdb(
-            slider_value, group_col, top_n, view=view
-        )
-
-    # If the SQL query returned no rows, ask user to broaden date range
-    if df_filtered is None or df_filtered.empty:
-        msg = html.Div(
-            "No data found in this time range. Try broadening the download date range.",
-            style={"padding": "18px", "fontSize": "16px", "color": "#082030"},
-        )
-        return msg, new_label
-
-    # Process the already-filtered data - pass derived_author_toggle
-    df, download_df = get_top_n_leaderboard(
-        df_filtered, group_col, top_n, derived_author_toggle=derived_author_toggle
-    )
-
-    # If processing produced no rows, ask user to broaden date range
-    if df is None or (hasattr(df, "empty") and df.empty):
-        msg = html.Div(
-            "No data found in this time range. Try broadening the download date range.",
-            style={"padding": "18px", "fontSize": "16px", "color": "#082030"},
-        )
-        return msg, new_label
-
-    return render_table_content(
-        df, download_df, chip_color=chip_color, filename=filename
-    ), new_label
-
-
-# -- end helpers --
-
-
-# --- Callback to store model attribution type ---
+# Update model attribution type based on user selection
 @app.callback(
     Output("model-attribution-type", "data"),
     Input("model-attribution-segmented", "value"),
@@ -1018,8 +91,7 @@ def _leaderboard_callback_logic(
 def update_model_attribution_type(selected_value):
     return selected_value
 
-
-# --- Callback to toggle between RangeSlider and Slider ---
+# Toggle between range slider and all-time slider
 @app.callback(
     Output("slider-container", "children"),
     Output("slider-description", "children"),
@@ -1030,48 +102,28 @@ def update_model_attribution_type(selected_value):
 def toggle_time_slider(is_alltime, range_value, alltime_value):
     if is_alltime:
         description = "Select a specific date to view all-time cumulative downloads up to that point."
-        # Recreate the all-time slider with current stored value
-        slider = dmc.Slider(
-            id="time-slider-alltime",
-            min=start_ts,
-            max=end_ts,
-            value=alltime_value if alltime_value is not None else end_ts,
-            step=24 * 60 * 60,
-            color="#AC482A",
-            size="md",
-            radius="xl",
-            marks=marks,
-            style={"width": "95%", "paddingLeft": "60px"},
-            label=None,
-            showLabelOnHover=False,
-            labelTransitionProps={"transition": "fade", "duration": 150},
-            thumbChildren=get_thumb_label_single(alltime_value if alltime_value is not None else end_ts),
+        slider_value = alltime_value if alltime_value is not None else end_ts
+        slider = build_single_slider(
+            start_ts,
+            end_ts,
+            slider_value,
+            marks,
+            thumb_children=get_thumb_label_single(slider_value),
         )
         return [slider], description
     else:
         description = "Adjust the slider to filter leaderboard results by the difference in downloads within the time range."
-        # Recreate the range slider with current stored value
         slider_val = range_value if range_value is not None else [start_ts, end_ts]
-        slider = dmc.RangeSlider(
-            id="time-slider",
-            min=start_ts,
-            max=end_ts,
-            value=slider_val,
-            step=24 * 60 * 60,
-            color="#AC482A",
-            size="md",
-            radius="xl",
-            marks=marks,
-            style={"width": "95%", "paddingLeft": "60px"},
-            label=None,
-            showLabelOnHover=False,
-            labelTransitionProps={"transition": "fade", "duration": 150},
-            thumbChildren=get_thumb_labels(slider_val),
+        slider = build_range_slider(
+            start_ts,
+            end_ts,
+            slider_val,
+            marks,
+            thumb_children=get_thumb_labels(slider_val),
         )
         return [slider], description
 
-
-# --- Callbacks to sync slider values to stores ---
+# Sync slider values to dcc.Store components
 @app.callback(
     Output("time-slider-value", "data"),
     Input("time-slider", "value"),
@@ -1079,7 +131,7 @@ def toggle_time_slider(is_alltime, range_value, alltime_value):
 def sync_time_slider_value(value):
     return value
 
-
+# Sync all-time slider value to dcc.Store component
 @app.callback(
     Output("time-slider-alltime-value", "data"),
     Input("time-slider-alltime", "value"),
@@ -1087,8 +139,7 @@ def sync_time_slider_value(value):
 def sync_time_slider_alltime_value(value):
     return value
 
-
-# Callbacks for interactivity (modularized)
+# Update Top Countries leaderboard
 @app.callback(
     Output("top_countries-table", "children"),
     Output("top_countries-toggle", "children"),
@@ -1106,7 +157,7 @@ def update_top_countries(
     # Use the appropriate slider value based on the toggle
     active_slider_value = slider_alltime_value if is_alltime else slider_value
     
-    return _leaderboard_callback_logic(
+    return leaderboard_callback_logic(
         n_clicks,
         active_slider_value,
         current_label,
@@ -1119,7 +170,7 @@ def update_top_countries(
         is_alltime=is_alltime,
     )
 
-
+# Update Top Developers leaderboard
 @app.callback(
     Output("top_developers-table", "children"),
     Output("top_developers-toggle", "children"),
@@ -1139,20 +190,20 @@ def update_top_developers(
     # Use the appropriate slider value based on the toggle
     active_slider_value = slider_alltime_value if is_alltime else slider_value
     
-    return _leaderboard_callback_logic(
+    return leaderboard_callback_logic(
         n_clicks,
         active_slider_value,
         current_label,
         group_col=group_col,
         filename="top_developers",
         default_label="▼ Show Top 50",
-        chip_color="#FFF0E6",
+        chip_color="#F0F9FF",
         view=selected_view,
         derived_author_toggle=(attribution_type == "original_creator"),
         is_alltime=is_alltime,
     )
 
-
+# Update Top Models leaderboard
 @app.callback(
     Output("top_models-table", "children"),
     Output("top_models-toggle", "children"),
@@ -1170,7 +221,7 @@ def update_top_models(
     # Use the appropriate slider value based on the toggle
     active_slider_value = slider_alltime_value if is_alltime else slider_value
     
-    return _leaderboard_callback_logic(
+    return leaderboard_callback_logic(
         n_clicks,
         active_slider_value,
         current_label,
@@ -1183,7 +234,7 @@ def update_top_models(
         is_alltime=is_alltime,
     )
 
-
+# Update thumb labels for range slider
 @app.callback(
     Output("time-slider", "thumbChildren"),
     Input("time-slider", "value"),
@@ -1191,7 +242,7 @@ def update_top_models(
 def update_thumb_labels(values):
     return get_thumb_labels(values)
 
-
+# Update thumb label for all-time slider
 @app.callback(
     Output("time-slider-alltime", "thumbChildren"),
     Input("time-slider-alltime", "value"),
@@ -1199,8 +250,7 @@ def update_thumb_labels(values):
 def update_thumb_label_alltime(value):
     return get_thumb_label_single(value)
 
-
-# --- Add callback to update selected view based on segmented control ---
+# Update selected view based on segmented control
 @app.callback(
     Output("selected-view", "data"),
     Input("segmented", "value"),
@@ -1210,7 +260,6 @@ def update_selected_view(seg_value):
         return "one_year_rolling"
     return "all_downloads"
 
-
 # Run the app
 if __name__ == "__main__":
     app.run(debug=True)

config.py

@@ -0,0 +1,56 @@
+PRIMARY_COLOR = "#AC482A"
+DARK_BACKGROUND = "#082030"
+DATASET_ID = "mmpr/open_model_evolution_data"
+HF_PARQUET_URL_1 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
+HF_PARQUET_URL_2 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
+
+BUTTON_STYLE = {
+    "display": "inline-block",
+    "marginBottom": "10px",
+    "marginRight": "15px",
+    "marginTop": "30px",
+    "padding": "6px 16px",
+    "backgroundColor": DARK_BACKGROUND,
+    "color": "white",
+    "borderRadius": "6px",
+    "textDecoration": "none",
+    "fontWeight": "bold",
+    "fontSize": "14px",
+}
+
+COMPANY_ICON_MAP = {
+    "google": "../assets/icons/google.png",
+    "distilbert": "../assets/images/hf.svg",
+    "sentence-transformers": "../assets/images/hf.svg",
+    "facebook": "../assets/icons/meta.png",
+    "openai": "../assets/icons/openai.png",
+    "amazon": "../assets/icons/amazon.png",
+    "microsoft": "../assets/icons/microsoft.png",
+}
+
+COUNTRY_EMOJI_FALLBACK = {
+    "User": "👤",
+    "Organization": "🏢",
+    "Model": "📦",
+}
+
+META_COLS_MAP = {
+    "org_country_single": ["org_country_single", "total_downloads"],
+    "author": [
+        "org_country_single",
+        "author",
+        "total_downloads",
+    ],
+    "derived_author": [
+        "org_country_single",
+        "derived_author",
+        "total_downloads",
+    ],
+    "model": [
+        "org_country_single",
+        "author",
+        "derived_author",
+        "merged_modality",
+        "total_downloads",
+    ],
+}

data_utils.py

@@ -0,0 +1,237 @@
+import duckdb
+import pandas as pd
+
+from config import DATASET_ID, HF_PARQUET_URL_1, HF_PARQUET_URL_2
+
+
+def create_fresh_duckdb_with_views(parquet_url_1: str = HF_PARQUET_URL_1, parquet_url_2: str = HF_PARQUET_URL_2):
+    """Return a fresh DuckDB connection with parquet-backed views configured."""
+    local_con = duckdb.connect(database=":memory:", read_only=False)
+    try:
+        try:
+            local_con.execute("INSTALL httpfs;")
+            local_con.execute("LOAD httpfs;")
+        except Exception:
+            pass
+
+        try:
+            local_con.execute("SET enable_http_metadata_cache = false;")
+            local_con.execute("SET enable_object_cache = false;")
+        except Exception:
+            pass
+
+        local_con.execute(
+            f"""
+            CREATE OR REPLACE VIEW all_downloads AS
+            SELECT * FROM read_parquet('{parquet_url_1}')
+        """
+        )
+        local_con.execute(
+            f"""
+            CREATE OR REPLACE VIEW one_year_rolling AS
+            SELECT * FROM read_parquet('{parquet_url_2}')
+        """
+        )
+    except Exception:
+        pass
+    return local_con
+
+
+def get_last_updated():
+    """Return the latest timestamp available in the all_downloads view."""
+    try:
+        conn = create_fresh_duckdb_with_views()
+        try:
+            result = conn.execute("SELECT MAX(time) as max_time FROM all_downloads").fetchdf()
+        finally:
+            conn.close()
+
+        max_time = result["max_time"].iloc[0]
+        if pd.isnull(max_time):
+            return "N/A"
+        dt = pd.to_datetime(max_time)
+        return dt.strftime("%b %d, %Y")
+    except Exception:
+        return "N/A"
+
+
+def build_leaderboard_query(
+    group_col,
+    top_n,
+    start_str=None,
+    end_str=None,
+    date_str=None,
+    view="all_downloads",
+):
+    """Build the SQL query string for leaderboard data."""
+    is_alltime = date_str is not None
+
+    if group_col == "org_country_single":
+        group_expr = """CASE 
+            WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
+            WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
+            ELSE org_country_single
+        END"""
+    else:
+        group_expr = group_col
+
+    if is_alltime:
+        base_where = f"WHERE time <= '{date_str}'"
+        downloads_calc = f"COALESCE(MAX(CASE WHEN time <= '{date_str}' THEN downloadsAllTime END), 0) AS total_downloads"
+    else:
+        base_where = ""
+        downloads_calc = f"""COALESCE(MAX(CASE WHEN time <= '{end_str}' THEN downloadsAllTime END), 0)
+            - COALESCE(MAX(CASE WHEN time < '{start_str}' THEN downloadsAllTime END), 0)
+            AS total_downloads"""
+
+    if group_col == "derived_author":
+        return f"""
+        WITH base_data AS (
+            SELECT
+                {group_expr} AS group_key,
+                CASE 
+                    WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
+                    WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
+                    ELSE org_country_single
+                END AS org_country_single,
+                author,
+                derived_author,
+                merged_country_groups_single,
+                merged_modality,
+                model,
+                time,
+                downloadsAllTime
+            FROM {view}
+            {base_where}
+        ),
+
+        author_country_lookup AS (
+            SELECT DISTINCT
+                derived_author,
+                FIRST_VALUE(org_country_single) OVER (PARTITION BY derived_author ORDER BY downloadsAllTime DESC) AS derived_author_country
+            FROM base_data
+            WHERE derived_author IS NOT NULL
+        ),
+
+        author_merged_country_lookup AS (
+            SELECT DISTINCT
+                derived_author,
+                FIRST_VALUE(merged_country_groups_single) OVER (PARTITION BY derived_author ORDER BY downloadsAllTime DESC) AS derived_author_merged_country
+            FROM base_data
+            WHERE derived_author IS NOT NULL
+        ),
+
+        model_metrics AS (
+            SELECT
+                model,
+                group_key,
+                ANY_VALUE(org_country_single) AS org_country_single,
+                ANY_VALUE(author) AS author,
+                ANY_VALUE(derived_author) AS derived_author,
+                ANY_VALUE(merged_country_groups_single) AS merged_country_groups_single,
+                ANY_VALUE(merged_modality) AS merged_modality,
+                {downloads_calc}
+            FROM base_data
+            GROUP BY model, group_key
+        ),
+
+        total_downloads_cte AS (
+            SELECT SUM(total_downloads) AS total_downloads_all FROM model_metrics
+        )
+
+        SELECT
+            mm.model,
+            mm.group_key,
+            acl.derived_author_country AS org_country_single,
+            amc.derived_author_merged_country AS merged_country_groups_single,
+            mm.author,
+            mm.derived_author,
+            mm.merged_modality,
+            mm.total_downloads,
+            CASE WHEN td.total_downloads_all = 0 THEN 0 ELSE ROUND(mm.total_downloads * 100.0 / td.total_downloads_all, 2) END AS percent_of_total
+        FROM model_metrics mm
+        LEFT JOIN author_country_lookup acl ON mm.group_key = acl.derived_author
+        LEFT JOIN author_merged_country_lookup amc ON mm.group_key = amc.derived_author
+        CROSS JOIN total_downloads_cte td
+        WHERE mm.total_downloads > 0
+        ORDER BY mm.total_downloads DESC
+        LIMIT {top_n * 10};
+        """
+
+    return f"""
+    WITH base_data AS (
+        SELECT
+            {group_expr} AS group_key,
+            CASE 
+                WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
+                WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
+                ELSE org_country_single
+            END AS org_country_single,
+            author,
+            derived_author,
+            merged_country_groups_single,
+            merged_modality,
+            model,
+            time,
+            downloadsAllTime
+        FROM {view}
+        {base_where}
+    ),
+
+    model_metrics AS (
+        SELECT
+            model,
+            group_key,
+            ANY_VALUE(org_country_single) AS org_country_single,
+            ANY_VALUE(author) AS author,
+            ANY_VALUE(derived_author) AS derived_author,
+            ANY_VALUE(merged_country_groups_single) AS merged_country_groups_single,
+            ANY_VALUE(merged_modality) AS merged_modality,
+            {downloads_calc}
+        FROM base_data
+        GROUP BY model, group_key
+    ),
+
+    total_downloads_cte AS (
+        SELECT SUM(total_downloads) AS total_downloads_all FROM model_metrics
+    )
+
+    SELECT
+        mm.model,
+        mm.group_key,
+        mm.org_country_single,
+        mm.author,
+        mm.derived_author,
+        mm.merged_country_groups_single,
+        mm.merged_modality,
+        mm.total_downloads,
+        CASE WHEN td.total_downloads_all = 0 THEN 0 ELSE ROUND(mm.total_downloads * 100.0 / td.total_downloads_all, 2) END AS percent_of_total
+    FROM model_metrics mm
+    CROSS JOIN total_downloads_cte td
+    WHERE mm.total_downloads > 0
+    ORDER BY mm.total_downloads DESC
+    LIMIT {top_n * 10};
+    """
+
+
+def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None, view="all_downloads"):
+    """Query DuckDB directly to get model-level rows with per-model total_downloads."""
+    if time_filter and len(time_filter) == 2:
+        start = pd.to_datetime(time_filter[0], unit="s")
+        end = pd.to_datetime(time_filter[1], unit="s")
+    else:
+        start = pd.to_datetime("1970-01-01")
+        end = pd.Timestamp.now()
+
+    start_str = str(start)
+    end_str = str(end)
+    query = build_leaderboard_query(group_col, top_n, start_str, end_str, view=view)
+
+    conn_local = create_fresh_duckdb_with_views()
+    try:
+        return conn_local.execute(query).fetchdf()
+    except Exception as exc:
+        print(f"Error querying DuckDB: {exc}")
+        return pd.DataFrame()
+    finally:
+        conn_local.close()

graphs/leaderboard.py

@@ -1,63 +1,162 @@
+import base64
 import pandas as pd
 from dash import html
 from dash_iconify import DashIconify
 import dash_mantine_components as dmc
-import base64
 import countryflag
-import duckdb
-
-button_style = {
-    "display": "inline-block",
-    "marginBottom": "10px",
-    "marginRight": "15px",
-    "marginTop": "30px",
-    "padding": "6px 16px",
-    "backgroundColor": "#082030",
-    "color": "white",
-    "borderRadius": "6px",
-    "textDecoration": "none",
-    "fontWeight": "bold",
-    "fontSize": "14px",
-}
-
-company_icon_map = {
-    "google": "../assets/icons/google.png",
-    "distilbert": "../assets/images/hf.svg",
-    "sentence-transformers": "../assets/images/hf.svg",
-    "facebook": "../assets/icons/meta.png",
-    "openai": "../assets/icons/openai.png",
-    "amazon": "../assets/icons/amazon.png",
-    "microsoft": "../assets/icons/microsoft.png",
-}
-
-country_emoji_fallback = {
-    "User": "👤",
-    "Organization": "🏢",
-    "Model": "📦",
-}
-
-meta_cols_map = {
-    "org_country_single": ["org_country_single", "total_downloads"],
-    "author": [
-        "org_country_single",
-        "author",
-        "total_downloads",
-    ],
-    "derived_author": [
-        "org_country_single",
-        "derived_author",
-        "total_downloads",
-    ],
-    "model": [
-        "org_country_single",
-        "author",
-        "derived_author",
-        "merged_modality",
-        "total_downloads",
-    ],
-}
+
+from config import COMPANY_ICON_MAP, COUNTRY_EMOJI_FALLBACK, META_COLS_MAP
+from data_utils import build_leaderboard_query, create_fresh_duckdb_with_views
+from helpers import format_large_number
+
+
+# =============================
+# Leaderboard Data Fetching
+# =============================
+
+def get_filtered_top_n_from_duckdb(
+    slider_value, group_col, top_n, view="all_downloads"
+):
+    """
+    Query DuckDB to get model-level rows with per-model total_downloads (delta or full)
+    Returns a DataFrame with columns including:
+      - group_key (the grouping column)
+      - org_country_single, author, derived_author, merged_country_groups_single, merged_modality, model
+      - total_downloads (per-model downloads in requested window)
+      - percent_of_total (percent of total across all returned model deltas)
+    """
+
+    # Create a fresh connection and load parquet-backed views for each call
+    local_con = create_fresh_duckdb_with_views()
+
+    try:
+        # Compute date window (if slider_value provided, use it; otherwise cover full range)
+        if slider_value and len(slider_value) == 2:
+            start = pd.to_datetime(slider_value[0], unit="s")
+            end = pd.to_datetime(slider_value[1], unit="s")
+        else:
+            start = pd.to_datetime("1970-01-01")
+            end = pd.Timestamp.now()
+
+        start_str = str(start)
+        end_str = str(end)
+
+        # Build query using shared function
+        query = build_leaderboard_query(group_col, top_n, start_str, end_str, view=view)
+
+        # execute using the fresh local connection
+        result_df = local_con.execute(query).fetchdf()
+        return result_df
+    finally:
+        local_con.close()
+
+
+def get_filtered_top_n_alltime_from_duckdb(
+    slider_value, group_col, top_n, view="all_downloads"
+):
+    """
+    Query DuckDB to get model-level rows with all-time (cumulative) total_downloads at a specific date.
+    Returns a DataFrame with columns including:
+      - group_key (the grouping column)
+      - org_country_single, author, derived_author, merged_country_groups_single, merged_modality, model
+      - total_downloads (cumulative downloads up to the selected date)
+      - percent_of_total (percent of total across all returned models)
+    """
+
+    # Create a fresh connection and load parquet-backed views for each call
+    local_con = create_fresh_duckdb_with_views()
+
+    try:
+        # Get the single date from slider_value (all-time mode passes a single value)
+        if slider_value is not None:
+            date = pd.to_datetime(slider_value, unit="s")
+        else:
+            date = pd.Timestamp.now()
+
+        date_str = str(date)
+
+        # Build query using shared function for all-time
+        query = build_leaderboard_query(group_col, top_n, date_str=date_str, view=view)
+
+        # execute using the fresh local connection
+        result_df = local_con.execute(query).fetchdf()
+        return result_df
+    finally:
+        local_con.close()
+
+
+def leaderboard_callback_logic(
+    n_clicks,
+    slider_value,
+    current_label,
+    group_col,
+    filename,
+    default_label="▼ Show Top 50",
+    chip_color="#F0F9FF",
+    view="all_downloads",
+    derived_author_toggle=True,
+    is_alltime=False,
+):
+    """
+    Core logic for handling leaderboard updates based on user interactions.
+    Returns tuple of (table_content, new_label) for the callback.
+    """
+    # Normalize label on first load
+    if current_label is None:
+        current_label = default_label
+
+    # Determine top_n and next label
+    if n_clicks == 0:
+        top_n = 10
+        new_label = current_label
+    elif "Show Top 50" in current_label:
+        top_n, new_label = 50, "▼ Show Top 100"
+    elif "Show Top 100" in current_label:
+        top_n, new_label = 100, "▲ Show Less"
+    else:
+        top_n, new_label = 10, "▼ Show Top 50"
+
+    # Get filtered and aggregated data directly from DuckDB
+    # Use all-time query if is_alltime flag is True
+    if is_alltime:
+        df_filtered = get_filtered_top_n_alltime_from_duckdb(
+            slider_value, group_col, top_n, view=view
+        )
+    else:
+        df_filtered = get_filtered_top_n_from_duckdb(
+            slider_value, group_col, top_n, view=view
+        )
+
+    # If the SQL query returned no rows, ask user to broaden date range
+    if df_filtered is None or df_filtered.empty:
+        msg = html.Div(
+            "No data found in this time range. Try broadening the download date range.",
+            style={"padding": "18px", "fontSize": "16px", "color": "#082030"},
+        )
+        return msg, new_label
+
+    # Process the already-filtered data - pass derived_author_toggle
+    df, download_df = get_top_n_leaderboard(
+        df_filtered, group_col, top_n, derived_author_toggle=derived_author_toggle
+    )
+
+    # If processing produced no rows, ask user to broaden date range
+    if df is None or (hasattr(df, "empty") and df.empty):
+        msg = html.Div(
+            "No data found in this time range. Try broadening the download date range.",
+            style={"padding": "18px", "fontSize": "16px", "color": "#082030"},
+        )
+        return msg, new_label
+
+    return render_table_content(
+        df, download_df, chip_color=chip_color, filename=filename
+    ), new_label
 
 
+# =============================
+# UI Rendering Components
+# =============================
+
 # Chip renderer
 def chip(text, bg_color="#F0F0F0"):
     return html.Span(
@@ -368,7 +467,7 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     download_top["% of total"] = download_top["% of total"].round(2)
 
     # All relevant metadata columns for the grouping
-    meta_cols = meta_cols_map.get(group_col, [])
+    meta_cols = META_COLS_MAP.get(group_col, [])
 
     # Collect metadata per group by inspecting the underlying model-level rows
     meta_map = {}
@@ -398,15 +497,15 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
             try:
                 flag_emoji = countryflag.getflag(c)
                 if not flag_emoji or flag_emoji == c:
-                    flag_emoji = country_emoji_fallback.get(c, "🌍")
+                    flag_emoji = COUNTRY_EMOJI_FALLBACK.get(c, "🌍")
             except Exception:
-                flag_emoji = country_emoji_fallback.get(c, "🌍")
+                flag_emoji = COUNTRY_EMOJI_FALLBACK.get(c, "🌍")
             chips.append((flag_emoji, c, "country"))
 
         # Author - use derived_author_toggle to determine which column
         author_key = "derived_author" if derived_author_toggle else "author"
         for a in meta.get(author_key, []):
-            icon = company_icon_map.get(a, "")
+            icon = COMPANY_ICON_MAP.get(a, "")
             if icon == "":
                 if meta.get("merged_country_groups_single", ["User"])[0] != "User":
                     icon = "🏢"
@@ -459,230 +558,6 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     return display_for_render, download_top
 
 
-# Add dataset URLs used to create views when running queries from this module
-hf_parquet_url_1 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
-hf_parquet_url_2 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
-
-
-def create_fresh_duckdb_with_views():
-    """
-    Returns a fresh in-memory DuckDB connection with httpfs enabled and the
-    all_downloads / one_year_rolling views created from the remote parquet URLs.
-    Caller must close the returned connection.
-    """
-    local_con = duckdb.connect(database=":memory:", read_only=False)
-    try:
-        try:
-            local_con.execute("INSTALL httpfs;")
-            local_con.execute("LOAD httpfs;")
-        except Exception:
-            pass
-        try:
-            local_con.execute("SET enable_http_metadata_cache = false;")
-            local_con.execute("SET enable_object_cache = false;")
-        except Exception:
-            pass
-
-        local_con.execute(f"""
-            CREATE OR REPLACE VIEW all_downloads AS
-            SELECT * FROM read_parquet('{hf_parquet_url_1}')
-        """)
-        local_con.execute(f"""
-            CREATE OR REPLACE VIEW one_year_rolling AS
-            SELECT * FROM read_parquet('{hf_parquet_url_2}')
-        """)
-    except Exception:
-        pass
-    return local_con
-
-
-def build_leaderboard_query(
-    group_col,
-    top_n,
-    start_str=None,
-    end_str=None,
-    date_str=None,
-    view="all_downloads",
-):
-    """
-    Build and return the SQL query string for leaderboard data.
-    
-    Supports two modes:
-    1. Time-range mode: Pass start_str and end_str to get downloads delta
-    2. All-time mode: Pass date_str to get cumulative downloads as of that date
-    
-    Args:
-        group_col: Column to group by (e.g., 'author', 'derived_author', 'org_country_single')
-        top_n: Number of top entries to return
-        start_str: Start date string (for time-range mode)
-        end_str: End date string (for time-range mode)
-        date_str: Specific date string (for all-time mode)
-        view: DuckDB view name ('all_downloads' or 'one_year_rolling')
-    
-    Returns:
-        SQL query string
-    """
-    # Determine mode
-    is_alltime = date_str is not None
-    
-    # handle country grouping normalization
-    if group_col == "org_country_single":
-        group_expr = """CASE 
-            WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-            WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
-            ELSE org_country_single
-        END"""
-    else:
-        group_expr = group_col
-
-    # Determine WHERE clause and total_downloads calculation
-    if is_alltime:
-        base_where = f"WHERE time <= '{date_str}'"
-        downloads_calc = f"COALESCE(MAX(CASE WHEN time <= '{date_str}' THEN downloadsAllTime END), 0) AS total_downloads"
-    else:
-        base_where = ""
-        downloads_calc = f"""COALESCE(MAX(CASE WHEN time <= '{end_str}' THEN downloadsAllTime END), 0)
-            - COALESCE(MAX(CASE WHEN time < '{start_str}' THEN downloadsAllTime END), 0)
-            AS total_downloads"""
-
-    # Derived-author special-case (uses author-derived lookups)
-    if group_col == "derived_author":
-        return f"""
-        WITH base_data AS (
-            SELECT
-                {group_expr} AS group_key,
-                CASE 
-                    WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-                    WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
-                    ELSE org_country_single
-                END AS org_country_single,
-                author,
-                derived_author,
-                merged_country_groups_single,
-                merged_modality,
-                model,
-                time,
-                downloadsAllTime
-            FROM {view}
-            {base_where}
-        ),
-
-        author_country_lookup AS (
-            SELECT DISTINCT
-                derived_author,
-                FIRST_VALUE(org_country_single) OVER (PARTITION BY derived_author ORDER BY downloadsAllTime DESC) AS derived_author_country
-            FROM base_data
-            WHERE derived_author IS NOT NULL
-        ),
-
-        author_merged_country_lookup AS (
-            SELECT DISTINCT
-                derived_author,
-                FIRST_VALUE(merged_country_groups_single) OVER (PARTITION BY derived_author ORDER BY downloadsAllTime DESC) AS derived_author_merged_country
-            FROM base_data
-            WHERE derived_author IS NOT NULL
-        ),
-
-        model_metrics AS (
-            SELECT
-                model,
-                group_key,
-                ANY_VALUE(org_country_single) AS org_country_single,
-                ANY_VALUE(author) AS author,
-                ANY_VALUE(derived_author) AS derived_author,
-                ANY_VALUE(merged_country_groups_single) AS merged_country_groups_single,
-                ANY_VALUE(merged_modality) AS merged_modality,
-                {downloads_calc}
-            FROM base_data
-            GROUP BY model, group_key
-        ),
-
-        total_downloads_cte AS (
-            SELECT SUM(total_downloads) AS total_downloads_all FROM model_metrics
-        )
-
-        SELECT
-            mm.model,
-            mm.group_key,
-            acl.derived_author_country AS org_country_single,
-            amc.derived_author_merged_country AS merged_country_groups_single,
-            mm.author,
-            mm.derived_author,
-            mm.merged_modality,
-            mm.total_downloads,
-            CASE WHEN td.total_downloads_all = 0 THEN 0 ELSE ROUND(mm.total_downloads * 100.0 / td.total_downloads_all, 2) END AS percent_of_total
-        FROM model_metrics mm
-        LEFT JOIN author_country_lookup acl ON mm.group_key = acl.derived_author
-        LEFT JOIN author_merged_country_lookup amc ON mm.group_key = amc.derived_author
-        CROSS JOIN total_downloads_cte td
-        WHERE mm.total_downloads > 0
-        ORDER BY mm.total_downloads DESC
-        LIMIT {top_n * 10};
-        """
-    
-    # Generic grouping SQL
-    return f"""
-    WITH base_data AS (
-        SELECT
-            {group_expr} AS group_key,
-            CASE 
-                WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-                WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
-                ELSE org_country_single
-            END AS org_country_single,
-            author,
-            derived_author,
-            merged_country_groups_single,
-            merged_modality,
-            model,
-            time,
-            downloadsAllTime
-        FROM {view}
-        {base_where}
-    ),
-
-    model_metrics AS (
-        SELECT
-            model,
-            group_key,
-            ANY_VALUE(org_country_single) AS org_country_single,
-            ANY_VALUE(author) AS author,
-            ANY_VALUE(derived_author) AS derived_author,
-            ANY_VALUE(merged_country_groups_single) AS merged_country_groups_single,
-            ANY_VALUE(merged_modality) AS merged_modality,
-            {downloads_calc}
-        FROM base_data
-        GROUP BY model, group_key
-    ),
-
-    total_downloads_cte AS (
-        SELECT SUM(total_downloads) AS total_downloads_all FROM model_metrics
-    )
-
-    SELECT
-        mm.model,
-        mm.group_key,
-        mm.org_country_single,
-        mm.author,
-        mm.derived_author,
-        mm.merged_country_groups_single,
-        mm.merged_modality,
-        mm.total_downloads,
-        CASE WHEN td.total_downloads_all = 0 THEN 0 ELSE ROUND(mm.total_downloads * 100.0 / td.total_downloads_all, 2) END AS percent_of_total
-    FROM model_metrics mm
-    CROSS JOIN total_downloads_cte td
-    WHERE mm.total_downloads > 0
-    ORDER BY mm.total_downloads DESC
-    LIMIT {top_n * 10};
-    """
-
-
-def build_leaderboard_query_alltime(group_col, top_n, date_str, view="all_downloads"):
-    """
-    Deprecated: Use build_leaderboard_query with date_str parameter instead.
-    Build and return the SQL query string for all-time downloads at a specific date.
-    """
-    return build_leaderboard_query(group_col, top_n, date_str=date_str, view=view)
 
 
 def get_top_n_from_duckdb(
@@ -718,15 +593,3 @@ def get_top_n_from_duckdb(
         return pd.DataFrame()
     finally:
         conn_local.close()
-
-
-def format_large_number(n):
-    """Shorten large numbers, e.g. 5,000,000 -> '5 million'."""
-    if n >= 1_000_000_000:
-        return f"{n / 1_000_000_000:.1f} billion"
-    elif n >= 1_000_000:
-        return f"{n / 1_000_000:.1f} million"
-    elif n >= 1_000:
-        return f"{n / 1_000:.1f}k"
-    else:
-        return str(int(n))

helpers.py

@@ -0,0 +1,90 @@
+import pandas as pd
+from dash import html
+
+def ordinal(n: int) -> str:
+    """Return the ordinal suffix for a day (e.g., 1 -> 1st)."""
+    if 10 <= n % 100 <= 20:
+        suffix = "th"
+    else:
+        suffix = {1: "st", 2: "nd", 3: "rd"}.get(n % 10, "th")
+    return f"{n}{suffix}"
+
+
+def format_date(dt: pd.Timestamp) -> str:
+    """Format a pandas Timestamp into a readable string."""
+    return dt.strftime("%b") + f" {ordinal(dt.day)}, {dt.year}"
+
+
+def build_slider_marks(start_dt: pd.Timestamp, end_dt: pd.Timestamp):
+    """Create slider marks for the range and all-time sliders."""
+    return [
+        {"value": int(start_dt.timestamp()), "label": start_dt.strftime("%b %Y")},
+        {"value": int(end_dt.timestamp()), "label": end_dt.strftime("%b %Y")},
+    ]
+
+def get_thumb_labels(values):
+    """Generate thumb labels for the range slider."""
+    distance = abs(values[1] - values[0])
+    close = distance < 4 * 30 * 86400  # 4 months
+
+    label_style = {
+        "background": "#fff",
+        "color": "#082030",
+        "fontWeight": "bold",
+        "fontSize": "13px",
+        "borderRadius": "8px",
+        "padding": "2px 8px",
+        "boxShadow": "0 1px 4px rgba(8,32,48,0.10)",
+        "position": "absolute",
+        "left": "50%",
+        "transform": "translateX(-50%)",
+        "whiteSpace": "nowrap",
+        "zIndex": 100,
+    }
+
+    if close:
+        style_top_1 = label_style.copy()
+        style_top_1["top"] = "-38px"
+        style_top_2 = label_style.copy()
+        style_top_2["top"] = "14px"
+    else:
+        style_top_1 = label_style.copy()
+        style_top_1["top"] = "14px"
+        style_top_2 = label_style.copy()
+        style_top_2["top"] = "14px"
+
+    return [
+        html.Div(pd.to_datetime(values[0], unit="s").strftime("%b %d, %Y"), style=style_top_1),
+        html.Div(pd.to_datetime(values[1], unit="s").strftime("%b %d, %Y"), style=style_top_2),
+    ]
+
+
+def get_thumb_label_single(value):
+    """Generate thumb label for the all-time slider."""
+    label_style = {
+        "background": "#fff",
+        "color": "#082030",
+        "fontWeight": "bold",
+        "fontSize": "13px",
+        "borderRadius": "8px",
+        "padding": "2px 8px",
+        "boxShadow": "0 1px 4px rgba(8,32,48,0.10)",
+        "position": "absolute",
+        "left": "50%",
+        "transform": "translateX(-50%)",
+        "whiteSpace": "nowrap",
+        "zIndex": 100,
+        "top": "14px",
+    }
+    return [html.Div(pd.to_datetime(value, unit="s").strftime("%b %d, %Y"), style=label_style)]
+
+
+def format_large_number(n: int) -> str:
+    """Shorten large numbers, e.g. 5,000,000 -> '5 million'."""
+    if n >= 1_000_000_000:
+        return f"{n / 1_000_000_000:.1f} billion"
+    if n >= 1_000_000:
+        return f"{n / 1_000_000:.1f} million"
+    if n >= 1_000:
+        return f"{n / 1_000:.1f}k"
+    return str(int(n))

layout_components.py

@@ -0,0 +1,603 @@
+from dash import html, dcc
+import dash_mantine_components as dmc
+from dash_iconify import DashIconify
+
+from config import BUTTON_STYLE, DARK_BACKGROUND, PRIMARY_COLOR
+
+
+def build_header(last_updated: str) -> html.Div:
+    """Top header with live badge and partner logos."""
+    return html.Div(
+        [
+            html.Div(
+                [
+                    html.Span(
+                        [
+                            html.Span(className="live-dot"),
+                            html.Span("LIVE", className="live-label"),
+                        ],
+                        className="live-row",
+                    ),
+                    html.Span(
+                        f"Last updated: {last_updated}", className="last-updated"
+                    ),
+                ],
+                className="header-status-row",
+            ),
+            html.Div(
+                [
+                    html.A(
+                        children=[
+                            html.Img(
+                                src="assets/images/dpi.svg",
+                                className="header-logo-img",
+                            ),
+                            "Data Provenance Initiative",
+                        ],
+                        href="https://www.dataprovenance.org/",
+                        target="_blank",
+                        className="no-bg-link header-link",
+                    ),
+                    html.A(
+                        children=[
+                            html.Img(
+                                src="assets/images/hf.svg",
+                                className="header-logo-img",
+                            ),
+                            html.Span("Hugging Face", className="hf-brand-text"),
+                        ],
+                        href="https://huggingface.co/",
+                        target="_blank",
+                        className="no-bg-link header-link",
+                    ),
+                    html.A(
+                        children=[html.Span("Read the paper", className="paper-text")],
+                        href="https://arxiv.org/abs/2512.03073",
+                        target="_blank",
+                        className="no-bg-link header-link paper-link",
+                    ),
+                ],
+                className="header-links-row",
+            ),
+        ],
+        style={
+            "display": "flex",
+            "justifyContent": "space-between",
+            "alignItems": "center",
+            "padding": "18px 24px",
+            "gap": "24px",
+            "backgroundColor": DARK_BACKGROUND,
+        },
+        className="responsive-header",
+    )
+
+
+def build_range_slider(start_ts: int, end_ts: int, value, marks, thumb_children=None):
+    """Create the range slider used for time deltas."""
+    return dmc.RangeSlider(
+        id="time-slider",
+        min=start_ts,
+        max=end_ts,
+        value=value,
+        step=24 * 60 * 60,
+        color=PRIMARY_COLOR,
+        size="md",
+        radius="xl",
+        marks=marks,
+        style={"width": "95%", "paddingLeft": "60px"},
+        label=None,
+        showLabelOnHover=False,
+        labelTransitionProps={"transition": "fade", "duration": 150},
+        thumbChildren=thumb_children,
+    )
+
+
+def build_single_slider(start_ts: int, end_ts: int, value, marks, thumb_children=None):
+    """Create the single-value slider used for all-time selection."""
+    return dmc.Slider(
+        id="time-slider-alltime",
+        min=start_ts,
+        max=end_ts,
+        value=value,
+        step=24 * 60 * 60,
+        color=PRIMARY_COLOR,
+        size="md",
+        radius="xl",
+        marks=marks,
+        style={"width": "95%", "paddingLeft": "60px"},
+        label=None,
+        showLabelOnHover=False,
+        labelTransitionProps={"transition": "fade", "duration": 150},
+        thumbChildren=thumb_children,
+    )
+
+
+def build_alert_and_title() -> html.Div:
+    """Intro alert and title block."""
+    return html.Div(
+        children=[
+            dmc.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={
+                    "fontSize": 40,
+                    "fontWeight": "700",
+                    "textAlign": "center",
+                    "marginTop": "20px",
+                    "marginBottom": "20px",
+                },
+            ),
+        ],
+        style={
+            "display": "flex",
+            "flexDirection": "column",
+            "alignItems": "center",
+            "justifyContent": "center",
+            "gap": "12px",
+            "marginTop": "20px",
+            "marginBottom": "20px",
+        },
+        className="responsive-title-row",
+    )
+
+
+def build_intro_paragraph() -> html.Div:
+    """Body intro paragraph under the title."""
+    return html.Div(
+        children=[
+            "This leaderboard assesses concentrations of power in the open model ecosystem through ranking user downloads across three groups: countries, developers, and models. Explore how user downloads of models are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face. This dashboard accompanies the paper titled ",
+            html.A(
+                "Economies of Open Intelligence: Tracing Power & Participation in the Model Ecosystem.",
+                href="https://arxiv.org/abs/2512.03073",
+                target="_blank",
+                style={
+                    "color": PRIMARY_COLOR,
+                    "fontWeight": "700",
+                    "textDecoration": "underline",
+                },
+            ),
+        ],
+        style={
+            "fontSize": 14,
+            "marginTop": 18,
+            "marginBottom": 12,
+            "marginLeft": 100,
+            "marginRight": 100,
+            "textAlign": "center",
+        },
+        className="responsive-intro",
+    )
+
+
+def build_filter_controls(time_slider_component) -> html.Div:
+    """Filter controls block with segmented controls and sliders."""
+    return html.Div(
+        children=[
+            html.Div(
+                [
+                    html.Div(
+                        html.Span(
+                            [
+                                "Download View",
+                                dmc.HoverCard(
+                                    width=260,
+                                    shadow="md",
+                                    position="top",
+                                    children=[
+                                        dmc.HoverCardTarget(
+                                            html.Span(
+                                                DashIconify(
+                                                    icon="mdi:information-outline",
+                                                    width=16,
+                                                    height=16,
+                                                    style={
+                                                        "marginLeft": "6px",
+                                                        "color": PRIMARY_COLOR,
+                                                        "verticalAlign": "middle",
+                                                    },
+                                                ),
+                                                style={"cursor": "pointer"},
+                                            )
+                                        ),
+                                        dmc.HoverCardDropdown(
+                                            dmc.Text(
+                                                "We believe this filter isolates more authentic usage, mitigating the impact of automatic software downloads for older models.",
+                                                size="sm",
+                                                style={"maxWidth": "240px"},
+                                            )
+                                        ),
+                                    ],
+                                ),
+                            ],
+                            className="filter-label-row",
+                        ),
+                        className="filter-label-container",
+                    ),
+                    html.Div(
+                        [
+                            dmc.SegmentedControl(
+                                id="segmented",
+                                value="all-downloads",
+                                color=PRIMARY_COLOR,
+                                transitionDuration=200,
+                                data=[
+                                    {
+                                        "value": "all-downloads",
+                                        "label": "All Downloads",
+                                    },
+                                    {
+                                        "value": "filtered-downloads",
+                                        "label": html.Span(["Filtered Downloads"]),
+                                    },
+                                ],
+                                mb=10,
+                            ),
+                        ],
+                        className="filter-segmented-row",
+                    ),
+                    html.Div(
+                        "Choose whether to count all downloads, or only downloads up to one year from model creation.",
+                        className="filter-description",
+                    ),
+                    html.Div(
+                        [
+                            html.Div("Model Attribution", className="filter-label"),
+                            dmc.SegmentedControl(
+                                id="model-attribution-segmented",
+                                value="uploader",
+                                color=PRIMARY_COLOR,
+                                transitionDuration=200,
+                                data=[
+                                    {"value": "uploader", "label": "Model Uploader"},
+                                    {
+                                        "value": "original_creator",
+                                        "label": "Original Model Creator",
+                                    },
+                                ],
+                                mb=10,
+                            ),
+                            html.Div(
+                                "Toggle between having downloads attributed to the account that uploaded the model, or the account that uploaded the model that this was originally derived from.",
+                                className="filter-description",
+                            ),
+                        ],
+                        style={"marginTop": "10px"},
+                    ),
+                    html.Span(
+                        id="global-toggle-status", className="global-toggle-status"
+                    ),
+                ],
+                className="main-content-left",
+            ),
+            html.Div(
+                [
+                    html.Div(
+                        [
+                            html.Span("Download Date Range", className="filter-label"),
+                            dmc.HoverCard(
+                                width=260,
+                                shadow="md",
+                                position="top",
+                                children=[
+                                    dmc.HoverCardTarget(
+                                        html.Span(
+                                            DashIconify(
+                                                icon="mdi:information-outline",
+                                                width=16,
+                                                height=16,
+                                                style={
+                                                    "marginLeft": "6px",
+                                                    "color": PRIMARY_COLOR,
+                                                    "verticalAlign": "middle",
+                                                },
+                                            ),
+                                            style={"cursor": "pointer"},
+                                        )
+                                    ),
+                                    dmc.HoverCardDropdown(
+                                        dmc.Text(
+                                            "Toggle between viewing downloads between a date range or all-time downloads at a single date.",
+                                            size="sm",
+                                            style={"maxWidth": "240px"},
+                                        )
+                                    ),
+                                ],
+                            ),
+                        ],
+                        className="filter-label-row",
+                    ),
+                    dmc.Switch(
+                        id="time-range-toggle",
+                        label="All-time",
+                        checked=False,
+                        color=PRIMARY_COLOR,
+                        style={"marginBottom": "12px"},
+                    ),
+                    dcc.Loading(
+                        id="loading-slider",
+                        type="circle",
+                        color=PRIMARY_COLOR,
+                        children=html.Div(
+                            id="slider-container", children=[time_slider_component]
+                        ),
+                    ),
+                    html.Div(
+                        id="slider-description",
+                        children="Adjust the time range to filter leaderboard results by when models were downloaded by users.",
+                        className="filter-description filter-description-margin",
+                    ),
+                    html.Div(
+                        [
+                            html.Div(
+                                [
+                                    DashIconify(
+                                        icon="mdi:lightbulb-on-outline",
+                                        width=20,
+                                        height=20,
+                                        style={
+                                            "marginRight": "8px",
+                                            "color": DARK_BACKGROUND,
+                                        },
+                                    ),
+                                    html.Span("Tip"),
+                                ],
+                                className="tip-title",
+                            ),
+                            html.Div(
+                                [
+                                    "Try switching between ",
+                                    html.Span(
+                                        "All Downloads", className="tip-highlight"
+                                    ),
+                                    " and ",
+                                    html.Span(
+                                        "Filtered Downloads", className="tip-highlight"
+                                    ),
+                                    " to compare net popularity (but many duplicate, unused downloads) versus more immediate interest as models are released. ",
+                                    "You can also toggle between ",
+                                    html.Span(
+                                        "Model Uploader", className="tip-highlight"
+                                    ),
+                                    " and ",
+                                    html.Span(
+                                        "Original Model Creator",
+                                        className="tip-highlight",
+                                    ),
+                                    " to see how attribution affects perceived popularity.",
+                                ],
+                                className="tip-description",
+                            ),
+                        ],
+                        className="tip-section",
+                    ),
+                ],
+                className="main-content-right",
+            ),
+        ],
+        style={
+            "display": "flex",
+            "gap": "24px",
+            "padding": "32px",
+            "alignItems": "flex-start",
+            "marginLeft": "100px",
+            "marginRight": "100px",
+            "backgroundColor": "#FFFBF9",
+            "borderRadius": "18px",
+        },
+        className="responsive-main-content",
+    )
+
+
+def build_leaderboard_tabs() -> html.Div:
+    """Tabbed leaderboard section."""
+    return html.Div(
+        [
+            dcc.Tabs(
+                id="leaderboard-tabs",
+                value="Countries",
+                children=[
+                    dcc.Tab(
+                        label="Countries",
+                        value="Countries",
+                        style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "color": "#6B7280",
+                            "fontWeight": "500",
+                        },
+                        selected_style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "fontWeight": "700",
+                            "borderBottom": "3px solid #082030",
+                        },
+                        children=[
+                            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"),
+                                    " and number of ",
+                                    html.Span("user downloads", className="meta-var"),
+                                    ".",
+                                ],
+                                className="tab-description",
+                            ),
+                            html.Div(
+                                dcc.Loading(
+                                    id="loading-countries",
+                                    type="circle",
+                                    color=PRIMARY_COLOR,
+                                    children=html.Div(id="top_countries-table"),
+                                ),
+                                className="responsive-table-wrapper",
+                            ),
+                            html.Button(
+                                id="top_countries-toggle",
+                                children="▼ Show Top 50",
+                                n_clicks=0,
+                                style={**BUTTON_STYLE, "border": "none"},
+                            ),
+                        ],
+                    ),
+                    dcc.Tab(
+                        label="Developers",
+                        value="Developers",
+                        style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "color": "#6B7280",
+                            "fontWeight": "500",
+                        },
+                        selected_style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "fontWeight": "700",
+                            "borderBottom": "3px solid #082030",
+                        },
+                        children=[
+                            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"),
+                                    ", number of ",
+                                    html.Span("user downloads", className="meta-var"),
+                                    ", and ",
+                                    html.Span("country", className="meta-var"),
+                                    ".",
+                                ],
+                                className="tab-description",
+                            ),
+                            html.Div(
+                                dcc.Loading(
+                                    id="loading-developers",
+                                    type="circle",
+                                    color=PRIMARY_COLOR,
+                                    children=html.Div(id="top_developers-table"),
+                                ),
+                                className="responsive-table-wrapper",
+                            ),
+                            html.Button(
+                                id="top_developers-toggle",
+                                children="▼ Show Top 50",
+                                n_clicks=0,
+                                style={**BUTTON_STYLE, "border": "none"},
+                            ),
+                        ],
+                    ),
+                    dcc.Tab(
+                        label="Models",
+                        value="Models",
+                        style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "color": "#6B7280",
+                            "fontWeight": "500",
+                        },
+                        selected_style={
+                            "backgroundColor": "transparent",
+                            "border": "none",
+                            "padding": "10px 18px",
+                            "fontWeight": "700",
+                            "borderBottom": "3px solid #082030",
+                        },
+                        children=[
+                            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"),
+                                    ", number of ",
+                                    html.Span("user downloads", className="meta-var"),
+                                    ", ",
+                                    html.Span("developer", className="meta-var"),
+                                    ", and ",
+                                    html.Span("modality", className="meta-var"),
+                                    " (the input and output types of the model).",
+                                ],
+                                className="tab-description",
+                            ),
+                            html.Div(
+                                dcc.Loading(
+                                    id="loading-models",
+                                    type="circle",
+                                    color=PRIMARY_COLOR,
+                                    children=html.Div(id="top_models-table"),
+                                ),
+                                className="responsive-table-wrapper",
+                            ),
+                            html.Button(
+                                id="top_models-toggle",
+                                children="▼ Show Top 50",
+                                n_clicks=0,
+                                style={**BUTTON_STYLE, "border": "none"},
+                            ),
+                        ],
+                    ),
+                ],
+            ),
+        ],
+        style={
+            "borderRadius": "18px",
+            "padding": "32px",
+            "marginTop": "12px",
+            "marginBottom": "12px",
+            "marginLeft": "50px",
+            "marginRight": "50px",
+        },
+        className="responsive-tabs",
+    )
+
+
+def build_main_layout(last_updated: str, time_slider_component) -> html.Div:
+    """Full page layout assembled from smaller sections."""
+    return html.Div(
+        [
+            build_header(last_updated),
+            build_alert_and_title(),
+            build_intro_paragraph(),
+            build_filter_controls(time_slider_component),
+            build_leaderboard_tabs(),
+        ],
+        style={
+            "fontFamily": "Inter",
+            "backgroundColor": "#ffffff",
+            "minHeight": "100vh",
+        },
+    )