design overhaul and add switch functionality

app.py

@@ -4,49 +4,62 @@ import dash_mantine_components as dmc
 import duckdb
 import time
 from graphs.leaderboard import (
-    create_leaderboard,
+    button_style,
     get_top_n_leaderboard,
     render_table_content,
 )
+from dash_iconify import DashIconify
 
 # Initialize the app
 app = Dash()
 server = app.server
 
-# DuckDB connection (global)
-con = duckdb.connect(database=':memory:', read_only=False)
-
-# Load parquet file from Hugging Face using DuckDB
-HF_DATASET_ID = "emsesc/open_model_evolution_data"
-hf_parquet_url = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/filtered_df.parquet"
-
-print(f"Attempting to connect to dataset from Hugging Face Hub: {HF_DATASET_ID}")
-try:
-    overall_start_time = time.time()
-    
+def load_parquet_to_duckdb(con, parquet_url, view_name):
+    """
+    Loads a parquet file from a remote URL into DuckDB as a view.
+    Returns (start_dt, end_dt) for the 'time' column.
+    """
     # Install and load httpfs extension for remote file access
     con.execute("INSTALL httpfs;")
     con.execute("LOAD httpfs;")
-    
+
     # Create a view that references the remote parquet file
     con.execute(f"""
-        CREATE OR REPLACE VIEW filtered_df AS 
-        SELECT * FROM read_parquet('{hf_parquet_url}')
+        CREATE OR REPLACE VIEW {view_name} AS 
+        SELECT * FROM read_parquet('{parquet_url}')
     """)
-    
-    # Get column list and basic info
-    columns = con.execute("DESCRIBE filtered_df").fetchdf()
-    print("Columns:", columns['column_name'].tolist())
-    
+
     # Get time range for slider
-    time_range = con.execute("SELECT MIN(time) as min_time, MAX(time) as max_time FROM filtered_df").fetchdf()
-    start_dt = pd.to_datetime(time_range['min_time'].iloc[0])
-    end_dt = pd.to_datetime(time_range['max_time'].iloc[0])
-    
-    msg = f"Successfully connected to dataset in {time.time() - overall_start_time:.2f}s."
+    time_range = con.execute(
+        f"SELECT MIN(time) as min_time, MAX(time) as max_time FROM {view_name}"
+    ).fetchdf()
+    start_dt = pd.to_datetime(time_range["min_time"].iloc[0])
+    end_dt = pd.to_datetime(time_range["max_time"].iloc[0])
+    return start_dt, end_dt
+
+# DuckDB connection (global)
+con = duckdb.connect(database=":memory:", read_only=False)
+
+# Load parquet files from Hugging Face using DuckDB
+HF_DATASET_ID = "emsesc/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"
+
+print(f"Attempting to connect to dataset from Hugging Face Hub: {HF_DATASET_ID}")
+try:
+    overall_start_time = time.time()
+
+    # Load both parquet files as views
+    start_dt, end_dt = load_parquet_to_duckdb(con, hf_parquet_url_1, "all_downloads")
+    # Example: load a second parquet file as another view
+    start_dt2, end_dt2 = load_parquet_to_duckdb(con, hf_parquet_url_2, "one_year_rolling")
+
+    msg = (
+        f"Successfully connected to datasets in {time.time() - overall_start_time:.2f}s."
+    )
     print(msg)
 except Exception as e:
-    err_msg = f"Failed to load dataset. Error: {e}"
+    err_msg = f"Failed to load dataset(s). Error: {e}"
     print(err_msg)
     raise
 
@@ -54,6 +67,18 @@ except Exception as e:
 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")})
@@ -66,6 +91,59 @@ for yr in range(start_dt.year, end_dt.year + 1):
 # 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",
@@ -80,11 +158,14 @@ time_slider = dmc.RangeSlider(
     size="md",
     radius="xl",
     marks=marks,
-    style={"width": "70%", "margin": "0 auto"},
-    labelAlwaysOn=False,
+    style={"width": "95%", "paddingLeft": "60px"},  # updated paddingLeft
+    label=None,
+    showLabelOnHover=False,
+    labelTransitionProps={"transition": "fade", "duration": 150},
+    thumbChildren=get_thumb_labels([start_ts, end_ts]),
 )
 
-# App layout
+# Add a dcc.Store to hold the selected view (all_downloads or one_year_rolling)
 app.layout = dmc.MantineProvider(
     theme={
         "colorScheme": "light",
@@ -92,6 +173,7 @@ app.layout = dmc.MantineProvider(
         "fontFamily": "Inter, sans-serif",
     },
     children=[
+        dcc.Store(id="selected-view", data="all_downloads"),
         html.Div(
             [
                 # Header
@@ -129,7 +211,7 @@ app.layout = dmc.MantineProvider(
                                         html.A(
                                             children=[
                                                 html.Img(
-                                                    src="assets/images/dpi-logo.svg",
+                                                    src="assets/images/dpi.svg",
                                                     style={
                                                         "height": "28px",
                                                         "verticalAlign": "middle",
@@ -140,12 +222,13 @@ app.layout = dmc.MantineProvider(
                                             ],
                                             href="https://www.dataprovenance.org/",
                                             target="_blank",
+                                            className="no-bg-link header-link",
                                             style={
                                                 "display": "inline-block",
                                                 "padding": "6px 14px",
                                                 "fontSize": 13,
-                                                "color": "#082030",
-                                                "backgroundColor": "#ffffff",
+                                                "color": "#FFFFFF",  # white on dark header
+                                                # background removed so CSS controls it
                                                 "borderRadius": "18px",
                                                 "fontWeight": "700",
                                                 "textDecoration": "none",
@@ -155,22 +238,51 @@ app.layout = dmc.MantineProvider(
                                         html.A(
                                             children=[
                                                 html.Img(
-                                                    src="assets/images/Hf-logo-with-title.svg",
+                                                    src="assets/images/hf.svg",
                                                     style={
                                                         "height": "30px",
                                                         "verticalAlign": "middle",
                                                     },
-                                                )
+                                                ),
+                                                html.Span(
+                                                    "Hugging Face",
+                                                    className="hf-brand-text",
+                                                ),
                                             ],
                                             href="https://huggingface.co/",
                                             target="_blank",
+                                            className="no-bg-link header-link",
                                             style={
                                                 "display": "inline-flex",
                                                 "padding": "6px 14px",
                                                 "alignItems": "center",
-                                                "backgroundColor": "#ffffff",
+                                                "color": "#FFFFFF",
                                                 "borderRadius": "18px",
                                                 "textDecoration": "none",
+                                                "marginRight": "12px",
+                                            },
+                                        ),
+                                        html.A(
+                                            children=[
+                                                html.Span(
+                                                    "Read the paper",
+                                                    className="paper-text",
+                                                ),
+                                            ],
+                                            href="https://www.google.com/",
+                                            target="_blank",
+                                            className="no-bg-link header-link paper-link",
+                                            style={
+                                                "display": "inline-flex",
+                                                "alignItems": "center",
+                                                "padding": "6px 12px",  # decreased size
+                                                "fontSize": 14,  # smaller text
+                                                "margin": "0 auto",
+                                                "backgroundColor": "#AC482A",
+                                                "color": "#FFFFFF",
+                                                "borderRadius": "5px",
+                                                "textDecoration": "none",
+                                                "fontWeight": "700",
                                             },
                                         ),
                                     ],
@@ -206,29 +318,8 @@ app.layout = dmc.MantineProvider(
                         "marginBottom": 20,
                     },
                 ),
-                # Button
                 html.Div(
-                    children=[
-                        html.Button(
-                            "Read the paper",
-                            id="my-button",
-                            style={
-                                "padding": "10px 20px",
-                                "fontSize": 16,
-                                "margin": "0 auto",
-                                "display": "block",
-                                "backgroundColor": "#AC482A",
-                                "color": "white",
-                                "border": "none",
-                                "borderRadius": "5px",
-                                "cursor": "pointer",
-                            },
-                        ),
-                    ],
-                    style={"textAlign": "center", "marginBottom": 20},
-                ),
-                html.Div(
-                    children="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...",
+                    children="The model leaderboard assesses concentrations of power across three hierarchies: countries, developers, and models. Explore how downloads are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face.",
                     style={
                         "fontSize": 14,
                         "marginTop": 18,
@@ -268,6 +359,42 @@ app.layout = dmc.MantineProvider(
                                     ],
                                     mb=10,
                                 ),
+                                html.Div(
+                                    "Choose whether to view all downloads or only filtered downloads for the leaderboard.",
+                                    style={
+                                        "fontSize": 13,
+                                        "color": "#555",
+                                        "marginBottom": "12px",
+                                    },
+                                ),
+                                # New segmented control below the first one
+                                html.Div(
+                                    [
+                                        html.Div(
+                                            "Select Mode",
+                                            style={
+                                                "fontWeight": "700",
+                                                "marginBottom": 8,
+                                                "fontSize": 14,
+                                            },
+                                        ),
+                                        dmc.Switch(
+                                            color="#AC482A",
+                                            label="Derived Authors",
+                                            checked=True,
+                                            mb=10,
+                                        ),
+                                        html.Div(
+                                            "Switch between absolute numbers and relative percentages for leaderboard values.",
+                                            style={
+                                                "fontSize": 13,
+                                                "color": "#555",
+                                                "marginBottom": "12px",
+                                            },
+                                        ),
+                                    ],
+                                    style={"marginTop": "10px"},
+                                ),
                                 html.Span(
                                     id="global-toggle-status",
                                     style={
@@ -290,8 +417,74 @@ app.layout = dmc.MantineProvider(
                                     },
                                 ),
                                 time_slider,
+                                html.Div(
+                                    "Adjust the time range to filter leaderboard results by model release date.",
+                                    style={
+                                        "fontSize": 13,
+                                        "color": "#555",
+                                        "marginTop": "32px",  # increased from 24px
+                                    },
+                                ),
+                                # Tip section
+                                html.Div(
+                                    [
+                                        html.Div(
+                                            [
+                                                DashIconify(
+                                                    icon="mdi:lightbulb-on-outline",
+                                                    width=20,
+                                                    height=20,
+                                                    style={"marginRight": "8px", "color": "#082030"},
+                                                ),
+                                                html.Span("Tip"),
+                                            ],
+                                            style={
+                                                "fontWeight": "700",
+                                                "fontSize": 15,
+                                                "marginBottom": "6px",
+                                                "color": "#082030",
+                                                "display": "flex",
+                                                "alignItems": "center",
+                                            },
+                                        ),
+                                        html.Div(
+                                            [
+                                                "Try switching between ",
+                                                html.Span("All Downloads", style={"fontWeight": "600", "color": "#AC482A"}),
+                                                " and ",
+                                                html.Span("Filtered Downloads", style={"fontWeight": "600", "color": "#AC482A"}),
+                                                " to compare ecosystem-wide vs. curated model trends. ",
+                                                "You can also toggle between ",
+                                                html.Span("Absolute", style={"fontWeight": "600", "color": "#AC482A"}),
+                                                " and ",
+                                                html.Span("Relative", style={"fontWeight": "600", "color": "#AC482A"}),
+                                                " to see raw counts or percentages."
+                                            ],
+                                            style={
+                                                "fontSize": 13,
+                                                "color": "#082030",
+                                                "lineHeight": "1.6",
+                                            },
+                                        ),
+                                    ],
+                                    style={
+                                        "backgroundColor": "#F5ECE6",
+                                        "borderRadius": "14px",
+                                        "padding": "18px 20px",
+                                        "marginTop": "28px",
+                                        "boxShadow": "0 1px 4px rgba(8,32,48,0.04)",
+                                        "border": "1px solid #f0e3d6",
+                                    },
+                                ),
                             ],
-                            style={"flex": 2, "minWidth": "320px"},
+                            style={
+                                "flex": 2,
+                                "minWidth": "320px",
+                                "display": "flex",
+                                "flexDirection": "column",
+                                "justifyContent": "center",
+                                "height": "100%",
+                            },
                         ),
                     ],
                     style={
@@ -329,7 +522,27 @@ app.layout = dmc.MantineProvider(
                                         "borderBottom": "3px solid #082030",
                                     },
                                     children=[
-                                        create_leaderboard(con, "countries")
+                                        html.Div(
+                                            children="The model leaderboard assesses concentrations of power across three hierarchies: countries, developers, and models. Explore how downloads are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face.",
+                                            style={
+                                                "fontSize": 14,
+                                                "marginTop": 18,
+                                                "marginBottom": 12,
+                                                "textAlign": "left",
+                                            },
+                                        ),
+                                        dcc.Loading(
+                                            id="loading-countries",
+                                            type="circle",
+                                            color="#AC482A",
+                                            children=html.Div(id="top_countries-table")
+                                        ),
+                                        html.Button(
+                                            id="top_countries-toggle",
+                                            children="▼ Show Top 50",
+                                            n_clicks=0,
+                                            style={**button_style, "border": "none"},
+                                        ),
                                     ],
                                 ),
                                 dcc.Tab(
@@ -350,7 +563,27 @@ app.layout = dmc.MantineProvider(
                                         "borderBottom": "3px solid #082030",
                                     },
                                     children=[
-                                        create_leaderboard(con, "developers")
+                                        html.Div(
+                                            children="The model leaderboard assesses concentrations of power across three hierarchies: countries, developers, and models. Explore how downloads are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face.",
+                                            style={
+                                                "fontSize": 14,
+                                                "marginTop": 18,
+                                                "marginBottom": 12,
+                                                "textAlign": "left",
+                                            },
+                                        ),
+                                        dcc.Loading(
+                                            id="loading-developers",
+                                            type="circle",
+                                            color="#AC482A",
+                                            children=html.Div(id="top_developers-table")
+                                        ),
+                                        html.Button(
+                                            id="top_developers-toggle",
+                                            children="▼ Show Top 50",
+                                            n_clicks=0,
+                                            style={**button_style, "border": "none"},
+                                        ),
                                     ],
                                 ),
                                 dcc.Tab(
@@ -371,7 +604,27 @@ app.layout = dmc.MantineProvider(
                                         "borderBottom": "3px solid #082030",
                                     },
                                     children=[
-                                        create_leaderboard(con, "models")
+                                        html.Div(
+                                            children="The model leaderboard assesses concentrations of power across three hierarchies: countries, developers, and models. Explore how downloads are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face.",
+                                            style={
+                                                "fontSize": 14,
+                                                "marginTop": 18,
+                                                "marginBottom": 12,
+                                                "textAlign": "left",
+                                            },
+                                        ),
+                                        dcc.Loading(
+                                            id="loading-models",
+                                            type="circle",
+                                            color="#AC482A",
+                                            children=html.Div(id="top_models-table")
+                                        ),
+                                        html.Button(
+                                            id="top_models-toggle",
+                                            children="▼ Show Top 50",
+                                            n_clicks=0,
+                                            style={**button_style, "border": "none"},
+                                        ),
                                     ],
                                 ),
                             ],
@@ -381,7 +634,7 @@ app.layout = dmc.MantineProvider(
                         "borderRadius": "18px",
                         "padding": "32px",
                         "marginTop": "12px",
-                        "marginBottom": "64px",
+                        "marginBottom": "12px",  # reduced from 64px
                         "marginLeft": "50px",
                         "marginRight": "50px",
                     },
@@ -396,30 +649,21 @@ app.layout = dmc.MantineProvider(
     ],
 )
 
+
 # Callbacks for interactivity
 # -- helper utilities to consolidate duplicated callback logic --
-def _get_filtered_top_n_from_duckdb(slider_value, group_col, top_n):
+def _get_filtered_top_n_from_duckdb(slider_value, group_col, top_n, view="all_downloads"):
     """
     Query DuckDB directly to get top N entries with metadata
     This minimizes data transfer by doing aggregation in DuckDB
     """
     # Build time filter clause
-    time_filter = ""
+    time_clause = ""
     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")
-        time_filter = f"WHERE time >= '{start}' AND time <= '{end}'"
-    
-    # Apply country replacements in the query
-    country_case = """
-        CASE 
-            WHEN org_country_single = 'HF' THEN 'United States of America'
-            WHEN org_country_single = 'International' THEN 'International/Online'
-            WHEN org_country_single = 'Online' THEN 'International/Online'
-            ELSE org_country_single
-        END as org_country_single
-    """
-    
+        time_clause = f"WHERE time >= '{start}' AND time <= '{end}'"
+
     # Build the aggregation query to get top N with all needed metadata
     # This query groups by the target column and aggregates downloads
     # while collecting all metadata we need for chips
@@ -427,35 +671,63 @@ def _get_filtered_top_n_from_duckdb(slider_value, group_col, top_n):
     WITH base_data AS (
         SELECT 
             {group_col},
-            {country_case},
+            CASE 
+                WHEN org_country_single = 'HF' THEN 'United States of America'
+                WHEN org_country_single = 'International' THEN 'International/Online'
+                WHEN org_country_single = 'Online' THEN 'International/Online'
+                ELSE org_country_single
+            END AS org_country_single,
             author,
             merged_country_groups_single,
             merged_modality,
             downloads,
-            estimated_parameters,
             model
-        FROM filtered_df
-        {time_filter}
+        FROM {view}
+        {time_clause}
     ),
-    aggregated AS (
-        SELECT 
-            {group_col} as name,
-            SUM(downloads) as total_downloads
+
+    -- Compute the total downloads for all rows in the time range
+    total_downloads_cte AS (
+        SELECT SUM(downloads) AS total_downloads_all
         FROM base_data
-        GROUP BY {group_col}
-        ORDER BY total_downloads DESC
-        LIMIT {top_n}
+    ),
+
+    -- Compute per-group totals and their percentage of all downloads
+    top_items AS (
+        SELECT 
+            b.{group_col} AS name,
+            SUM(b.downloads) AS total_downloads,
+            ROUND(SUM(b.downloads) * 100.0 / t.total_downloads_all, 2) AS percent_of_total,
+            -- Pick first non-null metadata values for reference
+            ANY_VALUE(b.org_country_single) AS org_country_single,
+            ANY_VALUE(b.author) AS author,
+            ANY_VALUE(b.merged_country_groups_single) AS merged_country_groups_single,
+            ANY_VALUE(b.merged_modality) AS merged_modality,
+            ANY_VALUE(b.model) AS model
+        FROM base_data b
+        CROSS JOIN total_downloads_cte t
+        GROUP BY b.{group_col}, t.total_downloads_all
     )
-    SELECT 
-        b.*
-    FROM base_data b
-    INNER JOIN aggregated a ON b.{group_col} = a.name
-    ORDER BY a.total_downloads DESC
+
+    SELECT *
+    FROM top_items
+    ORDER BY total_downloads DESC
+    LIMIT {top_n};
     """
-    
+
     return con.execute(query).fetchdf()
 
-def _leaderboard_callback_logic(n_clicks, slider_value, current_label, group_col, filename, default_label="▼ Show Top 50", chip_color="#F0F9FF"):
+
+def _leaderboard_callback_logic(
+    n_clicks,
+    slider_value,
+    current_label,
+    group_col,
+    filename,
+    default_label="▼ Show Top 50",
+    chip_color="#F0F9FF",
+    view="all_downloads",
+):
     # Normalize label on first load
     if current_label is None:
         current_label = default_label
@@ -472,22 +744,28 @@ def _leaderboard_callback_logic(n_clicks, slider_value, current_label, group_col
         top_n, new_label = 10, "▼ Show Top 50"
 
     # Get filtered and aggregated data directly from DuckDB
-    df_filtered = _get_filtered_top_n_from_duckdb(slider_value, group_col, top_n)
-    
+    df_filtered = _get_filtered_top_n_from_duckdb(slider_value, group_col, top_n, view=view)
+
     # Process the already-filtered data
     df, download_df = get_top_n_leaderboard(df_filtered, group_col, top_n)
-    return render_table_content(df, download_df, chip_color=chip_color, filename=filename), new_label
+    return render_table_content(
+        df, download_df, chip_color=chip_color, filename=filename
+    ), new_label
+
+
 # -- end helpers --
 
+
 # Callbacks for interactivity (modularized)
 @app.callback(
     Output("top_countries-table", "children"),
     Output("top_countries-toggle", "children"),
     Input("top_countries-toggle", "n_clicks"),
     Input("time-slider", "value"),
+    Input("selected-view", "data"),
     State("top_countries-toggle", "children"),
 )
-def update_top_countries(n_clicks, slider_value, current_label):
+def update_top_countries(n_clicks, slider_value, selected_view, current_label):
     return _leaderboard_callback_logic(
         n_clicks,
         slider_value,
@@ -496,34 +774,40 @@ def update_top_countries(n_clicks, slider_value, current_label):
         filename="top_countries",
         default_label="▼ Show Top 50",
         chip_color="#F0F9FF",
+        view=selected_view,
     )
 
+
 @app.callback(
     Output("top_developers-table", "children"),
     Output("top_developers-toggle", "children"),
     Input("top_developers-toggle", "n_clicks"),
     Input("time-slider", "value"),
+    Input("selected-view", "data"),
     State("top_developers-toggle", "children"),
 )
-def update_top_developers(n_clicks, slider_value, current_label):
+def update_top_developers(n_clicks, slider_value, selected_view, current_label):
     return _leaderboard_callback_logic(
         n_clicks,
         slider_value,
         current_label,
         group_col="author",
         filename="top_developers",
-        default_label="▼ Show More",
+        default_label="▼ Show Top 50",
         chip_color="#F0F9FF",
+        view=selected_view,
     )
 
+
 @app.callback(
     Output("top_models-table", "children"),
     Output("top_models-toggle", "children"),
     Input("top_models-toggle", "n_clicks"),
     Input("time-slider", "value"),
+    Input("selected-view", "data"),
     State("top_models-toggle", "children"),
 )
-def update_top_models(n_clicks, slider_value, current_label):
+def update_top_models(n_clicks, slider_value, selected_view, current_label):
     return _leaderboard_callback_logic(
         n_clicks,
         slider_value,
@@ -532,18 +816,29 @@ def update_top_models(n_clicks, slider_value, current_label):
         filename="top_models",
         default_label="▼ Show More",
         chip_color="#F0F9FF",
+        view=selected_view,
     )
 
+
 @app.callback(
-    Output("time-slider", "label"),
-    Input("time-slider", "value")
+    Output("time-slider", "thumbChildren"),
+    Input("time-slider", "value"),
 )
-def update_range_labels(values):
-    start_label = pd.to_datetime(values[0], unit="s").strftime("%b %Y")
-    end_label = pd.to_datetime(values[1], unit="s").strftime("%b %Y")
-    return [start_label, end_label]
+def update_thumb_labels(values):
+    return get_thumb_labels(values)
 
+# --- Add callback to update selected view based on segmented control ---
+@app.callback(
+    Output("selected-view", "data"),
+    Input("segmented", "value"),
+)
+def update_selected_view(seg_value):
+    if seg_value == "filtered-downloads":
+        return "one_year_rolling"
+    return "all_downloads"
 
 # Run the app
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run(debug=True)
+if __name__ == "__main__":
+    app.run(debug=True)

assets/styles.css

@@ -0,0 +1,123 @@
+/* Header links: transparent background, white text, grow on hover */
+.no-bg-link {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  transition: transform 0.12s ease, background-color 0.12s ease;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none !important;
+  padding: 6px 14px; /* keep spacing consistent with inline styles */
+  border-radius: 18px;
+}
+
+/* Subtle hover tint and scale for interactivity */
+.no-bg-link:hover {
+  transform: scale(1.06);
+  background-color: rgba(255, 255, 255, 0.04) !important;
+}
+
+/* Make logo images scale smoothly on hover */
+.no-bg-link img {
+  transition: transform 0.12s ease;
+}
+.no-bg-link:hover img {
+  transform: scale(1.06);
+}
+
+/* Read the paper button: scale up on hover */
+.paper-button {
+  transition: transform 0.12s ease;
+  will-change: transform;
+}
+.paper-button:hover {
+  transform: scale(1.06);
+}
+
+/* Hugging Face brand text to use Inter and visually match HF typography */
+.hf-brand-text {
+  font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 1000;
+  font-size: 14px;
+  line-height: 1;
+  margin-left: 8px;
+  color: #FFFFFF;
+  display: inline-block;
+  transform-origin: center;
+}
+
+/* Paper link: position relative for arrow, overflow visible */
+.paper-link {
+  position: relative; /* needed for positioning the arrow */
+  overflow: visible;
+  background-color: #AC482A !important; /* restore previous button color */
+  color: #FFFFFF !important;
+  padding: 10px 20px; /* ensure spacing matches inline styles */
+  border-radius: 5px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none !important;
+  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
+}
+
+/* Small arrow placed inline to the right of the text */
+.paper-link::after {
+  content: "↗";
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+  opacity: 0.95;
+  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1));
+  transform-origin: center;
+  pointer-events: none;
+  vertical-align: baseline;
+}
+
+/* Hover/focus states */
+.paper-link:hover,
+.paper-link:focus {
+  transform: scale(1.06);
+  background-color: #95371f !important; /* slightly darker on hover */
+}
+.paper-link:hover::after,
+.paper-link:focus::after {
+  transform: scale(1.08);
+}
+
+/* Apply same interactive behavior to leaderboard "show top" toggles and download controls */
+/* Matches elements with ids like "top_countries-toggle" and download anchors like "download-top_countries" */
+[id$="-toggle"],
+button[id$="-toggle"],
+[id^="download-"],
+a[id^="download-"],
+button[id^="download-"],
+.leaderboard-toggle,
+.download-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  font-size: 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none !important;
+  background-color: transparent;
+  color: #082030;
+  transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
+  will-change: transform;
+}
+
+/* Hover / focus: subtle scale + tint similar to header links */
+[id$="-toggle"]:hover,
+[id^="download-"]:hover,
+button[id$="-toggle"]:hover,
+button[id^="download-"]:hover,
+.leaderboard-toggle:hover,
+.download-btn:hover,
+[id$="-toggle"]:focus,
+[id^="download-"]:focus,
+button[id$="-toggle"]:focus,
+button[id^="download-"]:focus {
+  transform: scale(1.06);
+  outline: none;
+}

graphs/leaderboard.py

@@ -3,6 +3,7 @@ from dash import html, dcc
 from dash_iconify import DashIconify
 import dash_mantine_components as dmc
 import base64
+import countryflag
 
 button_style = {
     "display": "inline-block",
@@ -18,64 +19,6 @@ button_style = {
     "fontSize": "14px",
 }
 
-country_icon_map = {
-    "USA": "🇺🇸",
-    "China": "🇨🇳",
-    "Germany": "🇩🇪",
-    "France": "🇫🇷",
-    "India": "🇮🇳",
-    "Italy": "🇮🇹",
-    "Japan": "🇯🇵",
-    "South Korea": "🇰🇷",
-    "United Kingdom": "🇬🇧",
-    "Canada": "🇨🇦",
-    "Brazil": "🇧🇷",
-    "Australia": "🇦🇺",
-    "Unknown": "❓",
-    "Finland": "🇫🇮",
-    "Lebanon": "🇱🇧",
-    "Iceland": "🇮🇸",
-    "Singapore": "🇸🇬",
-    "Israel": "🇮🇱",
-    "Iran": "🇮🇷",
-    "Hong Kong": "🇭🇰",
-    "Netherlands": "🇳🇱",
-    "Chile": "🇨🇱",
-    "Vietnam": "🇻🇳",
-    "Russia": "🇷🇺",
-    "Qatar": "🇶🇦",
-    "Switzerland": "🇨🇭",
-    "User": "👤",
-    "International/Online": "🌐",
-    "Spain": "🇪🇸",
-    "Sweden": "🇸🇪",
-    "Norway": "🇳🇴",
-    "Denmark": "🇩🇰",
-    "Austria": "🇦🇹",
-    "Belgium": "🇧🇪",
-    "Poland": "🇵🇱",
-    "Turkey": "🇹🇷",
-    "Mexico": "🇲🇽",
-    "Argentina": "🇦🇷",
-    "Thailand": "🇹🇭",
-    "Indonesia": "🇮🇩",
-    "Malaysia": "🇲🇾",
-    "Philippines": "🇵🇭",
-    "Egypt": "🇪🇬",
-    "South Africa": "🇿🇦",
-    "New Zealand": "🇳🇿",
-    "Ireland": "🇮🇪",
-    "Portugal": "🇵🇹",
-    "Greece": "🇬🇷",
-    "Czech Republic": "🇨🇿",
-    "Romania": "🇷🇴",
-    "Ukraine": "🇺🇦",
-    "United Arab Emirates": "🇦🇪",
-    "Saudi Arabia": "🇸🇦",
-    "Pakistan": "🇵🇰",
-    "Bangladesh": "🇧🇩",
-}
-
 company_icon_map = {
     "google": "../assets/icons/google.png",
     "distilbert": "../assets/icons/hugging-face.png",
@@ -84,6 +27,12 @@ company_icon_map = {
     "openai": "../assets/icons/openai.png",
 }
 
+country_emoji_fallback = {
+    "User": "👤",
+    "Organization": "🏢",
+    "Model": "📦",
+}
+
 meta_cols_map = {
     "org_country_single": ["org_country_single"],
     "author": ["org_country_single", "author", "merged_country_groups_single"],
@@ -92,7 +41,7 @@ meta_cols_map = {
         "author",
         "merged_country_groups_single",
         "merged_modality",
-        "downloads",
+        "total_downloads",
     ],
 }
 
@@ -114,7 +63,7 @@ def chip(text, bg_color="#F0F0F0"):
 
 
 # Progress bar for % of total
-def progress_bar(percent, bar_color="#082030"):
+def progress_bar(percent, bar_color="#AC482A"):
     return html.Div(
         style={
             "position": "relative",
@@ -179,42 +128,99 @@ def df_to_download_link(df, filename):
     )
 
 
-# Render multiple chips in one row
-def render_chips(metadata_list, chip_color):
-    chips = []
-    for icon, name in metadata_list:
-        if isinstance(icon, str) and icon.endswith((".png", ".jpg", ".jpeg", ".svg")):
-            chips.append(
+# Helper to get popover content for each metadata type
+def get_metadata_popover_content(icon, name, meta_type):
+    popover_texts = {
+        "country": f"Country: {name}",
+        "author": f"Author/Organization: {name}",
+        "downloads": f"Total downloads: {name}",
+        "modality": f"Modality: {name}",
+        "parameters": f"Estimated parameters: {name}",
+    }
+    return popover_texts.get(meta_type, name)
+
+
+# Chip renderer with hovercard
+def chip_with_hovercard(text, bg_color="#F0F0F0", meta_type=None, icon=None):
+    hovercard_content = get_metadata_popover_content(icon, text, meta_type)
+    return dmc.HoverCard(
+        width=220,
+        shadow="md",
+        position="top",
+        children=[
+            dmc.HoverCardTarget(
                 html.Span(
-                    [
-                        html.Img(
-                            src=icon, style={"height": "18px", "marginRight": "6px"}
-                        ),
-                        name,
-                    ],
+                    text,
                     style={
-                        "backgroundColor": chip_color,
+                        "backgroundColor": bg_color,
                         "padding": "4px 10px",
                         "borderRadius": "12px",
                         "margin": "2px",
                         "display": "inline-flex",
-                        "alignItems": "left",
+                        "alignItems": "center",
                         "fontSize": "14px",
+                        "cursor": "pointer",
                     },
                 )
+            ),
+            dmc.HoverCardDropdown(
+                dmc.Text(hovercard_content, size="sm")
+            ),
+        ],
+    )
+
+
+# Render multiple chips in one row, each with popover
+def render_chips(metadata_list, chip_color):
+    chips = []
+    for icon, name, meta_type in metadata_list:
+        if isinstance(icon, str) and icon.endswith((".png", ".jpg", ".jpeg", ".svg")):
+            chips.append(
+                dmc.HoverCard(
+                    width=220,
+                    shadow="md",
+                    position="top",
+                    children=[
+                        dmc.HoverCardTarget(
+                            html.Span(
+                                [
+                                    html.Img(
+                                        src=icon, style={"height": "18px", "marginRight": "6px"}
+                                    ),
+                                    name,
+                                ],
+                                style={
+                                    "backgroundColor": chip_color,
+                                    "padding": "4px 10px",
+                                    "borderRadius": "12px",
+                                    "margin": "2px",
+                                    "display": "inline-flex",
+                                    "alignItems": "left",
+                                    "fontSize": "14px",
+                                    "cursor": "pointer",
+                                },
+                            )
+                        ),
+                        dmc.HoverCardDropdown(
+                            dmc.Text(get_metadata_popover_content(icon, name, meta_type), size="sm")
+                        ),
+                    ],
+                )
             )
         else:
-            chips.append(chip(f"{icon} {name}", chip_color))
+            chips.append(chip_with_hovercard(f"{icon} {name}", chip_color, meta_type, icon))
     return html.Div(
         chips, style={"display": "flex", "flexWrap": "wrap", "justifyContent": "left"}
     )
 
 
 def render_table_content(
-    df, download_df, chip_color, bar_color="#082030", filename="data"
+    df, download_df, chip_color, bar_color="#AC482A", filename="data"
 ):
     return html.Div(
         [
+            # Add download button above the table
+            df_to_download_link(download_df, filename),
             html.Table(
                 [
                     html.Thead(
@@ -274,129 +280,6 @@ def render_table_content(
         ]
     )
 
-
-# Table renderer
-def render_table(
-    df, download_df, title, chip_color, bar_color="#AC482A", filename="data"
-):
-    return html.Div(
-        id=f"{filename}-div",
-        children=[
-            html.Div(
-                [
-                    html.H4(
-                        title,
-                        style={
-                            "textAlign": "left",
-                            "marginBottom": "10px",
-                            "fontSize": "20px",
-                            "display": "inline-block",
-                        },
-                    ),
-                    df_to_download_link(download_df, filename),
-                ],
-                style={
-                    "display": "flex",
-                    "alignItems": "center",
-                    "justifyContent": "space-between",
-                },
-            ),
-            html.Div(
-                id=f"{filename}-table",
-                children=[
-                    html.Table(
-                        [
-                            html.Thead(
-                                html.Tr(
-                                    [
-                                        html.Th(
-                                            "Rank",
-                                            style={
-                                                "backgroundColor": "#F0F0F0",
-                                                "textAlign": "left",
-                                            },
-                                        ),
-                                        html.Th(
-                                            "Name",
-                                            style={
-                                                "backgroundColor": "#F0F0F0",
-                                                "textAlign": "left",
-                                            },
-                                        ),
-                                        html.Th(
-                                            "Metadata",
-                                            style={
-                                                "backgroundColor": "#F0F0F0",
-                                                "textAlign": "left",
-                                                "marginRight": "10px",
-                                            },
-                                        ),
-                                        html.Th(
-                                            "% of Total",
-                                            style={
-                                                "backgroundColor": "#F0F0F0",
-                                                "textAlign": "left",
-                                            },
-                                        ),
-                                    ]
-                                )
-                            ),
-                            html.Tbody(
-                                [
-                                    html.Tr(
-                                        [
-                                            html.Td(
-                                                idx + 1, style={"textAlign": "center"}
-                                            ),
-                                            html.Td(
-                                                row["Name"], style={"textAlign": "left"}
-                                            ),
-                                            html.Td(
-                                                render_chips(
-                                                    row["Metadata"], chip_color
-                                                )
-                                            ),
-                                            html.Td(
-                                                progress_bar(
-                                                    row["% of total"], bar_color
-                                                ),
-                                                style={"textAlign": "center"},
-                                            ),
-                                        ]
-                                    )
-                                    for idx, row in df.iterrows()
-                                ]
-                            ),
-                        ],
-                        style={
-                            "borderCollapse": "collapse",
-                            "width": "100%",
-                            "border": "none",
-                        },
-                    ),
-                ],
-            ),
-            dcc.Loading(
-                id=f"loading-{filename}-toggle",
-                type="dot",
-                color="#082030",
-                children=html.Div(
-                    [
-                        html.Button(
-                            "▼ Show Top 50",
-                            id=f"{filename}-toggle",
-                            n_clicks=0,
-                            style={**button_style, "border": "none"},
-                        )
-                    ],
-                    style={"marginTop": "5px", "textAlign": "left"},
-                ),
-            ),
-        ],
-        style={"marginBottom": "20px"},
-    )
-
-
 # Function to get top N leaderboard (now accepts pandas DataFrame from DuckDB query)
 def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
     """
@@ -410,17 +293,15 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
     Returns:
         tuple: (display_df, download_df)
     """
+
     # Group by and get top N
     top = (
-        filtered_df.groupby(group_col)["downloads"]
+        filtered_df.groupby(group_col)[["total_downloads", "percent_of_total"]]
         .sum()
-        .nlargest(top_n)
+        .nlargest(top_n, columns="total_downloads")
         .reset_index()
-        .rename(columns={group_col: "Name", "downloads": "Total Value"})
+        .rename(columns={group_col: "Name", "total_downloads": "Total Value", "percent_of_total": "% of total"})
     )
-    
-    total_value = top["Total Value"].sum()
-    top["% of total"] = top["Total Value"] / total_value * 100 if total_value else 0
 
     # Create a downloadable version of the leaderboard
     download_top = top.copy()
@@ -459,7 +340,15 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
                 c = "USA"
             if c == "user":
                 c = "User"
-            chips.append((country_icon_map.get(c, "🌍"), c))
+            # Try countryflag.getflag(), fallback to dictionary if fails
+            try:
+                flag_emoji = countryflag.getflag(c)
+                # If countryflag returns empty or None, fallback
+                if not flag_emoji or flag_emoji == c:
+                    flag_emoji = country_emoji_fallback.get(c, "🌍")
+            except Exception:
+                flag_emoji = country_emoji_fallback.get(c, "🌍")
+            chips.append((flag_emoji, c, "country"))
         
         # Author
         for a in meta.get("author", []):
@@ -469,32 +358,19 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
                     icon = "🏢"
                 else:
                     icon = "👤"
-            chips.append((icon, a))
+            chips.append((icon, a, "author"))
         
         # Downloads
         total_downloads = sum(
-            d for d in meta.get("downloads", []) if pd.notna(d)
+            d for d in meta.get("total_downloads", []) if pd.notna(d)
         )
         if total_downloads:
-            chips.append(("⬇️", f"{int(total_downloads):,}"))
+            chips.append(("⬇️", f"{int(total_downloads):,}", "downloads"))
 
         # Modality
         for m in meta.get("merged_modality", []):
             if pd.notna(m):
-                chips.append(("", m))
-
-        # Estimated Parameters
-        for p in meta.get("estimated_parameters", []):
-            if pd.notna(p):
-                if p >= 1e9:
-                    p_str = f"{p / 1e9:.1f}B"
-                elif p >= 1e6:
-                    p_str = f"{p / 1e6:.1f}M"
-                elif p >= 1e3:
-                    p_str = f"{p / 1e3:.1f}K"
-                else:
-                    p_str = str(int(p))
-                chips.append(("⚙️", p_str))
+                chips.append(("", m, "modality"))
         
         return chips
 
@@ -526,7 +402,7 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
     return top[["Name", "Metadata", "% of total"]], download_top
 
 
-def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None):
+def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None, view="all_downloads"):
     """
     Query DuckDB directly to get top N entries with minimal data transfer
     
@@ -546,103 +422,57 @@ def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None):
         end = pd.to_datetime(time_filter[1], unit="s")
         time_clause = f"WHERE time >= '{start}' AND time <= '{end}'"
     
-    # Apply country replacements in the query
-    country_case = """
-        CASE 
-            WHEN org_country_single = 'HF' THEN 'United States of America'
-            WHEN org_country_single = 'International' THEN 'International/Online'
-            WHEN org_country_single = 'Online' THEN 'International/Online'
-            ELSE org_country_single
-        END as org_country_single
-    """
-    
     # Optimized query: first find top N, then get only those rows
     query = f"""
     WITH base_data AS (
         SELECT 
             {group_col},
-            {country_case},
+            CASE 
+                WHEN org_country_single = 'HF' THEN 'United States of America'
+                WHEN org_country_single = 'International' THEN 'International/Online'
+                WHEN org_country_single = 'Online' THEN 'International/Online'
+                ELSE org_country_single
+            END AS org_country_single,
             author,
             merged_country_groups_single,
             merged_modality,
             downloads,
-            estimated_parameters,
             model
-        FROM filtered_df
+        FROM {view}
         {time_clause}
     ),
+
+    -- Compute the total downloads for all rows in the time range
+    total_downloads_cte AS (
+        SELECT SUM(downloads) AS total_downloads_all
+        FROM base_data
+    ),
+
+    -- Compute per-group totals and their percentage of all downloads
     top_items AS (
         SELECT 
-            {group_col} as name,
-            SUM(downloads) as total_downloads
-        FROM base_data
-        GROUP BY {group_col}
-        ORDER BY total_downloads DESC
-        LIMIT {top_n}
+            b.{group_col} AS name,
+            SUM(b.downloads) AS total_downloads,
+            ROUND(SUM(b.downloads) * 100.0 / t.total_downloads_all, 2) AS percent_of_total,
+            -- Pick first non-null metadata values for reference
+            ANY_VALUE(b.org_country_single) AS org_country_single,
+            ANY_VALUE(b.author) AS author,
+            ANY_VALUE(b.merged_country_groups_single) AS merged_country_groups_single,
+            ANY_VALUE(b.merged_modality) AS merged_modality,
+            ANY_VALUE(b.model) AS model
+        FROM base_data b
+        CROSS JOIN total_downloads_cte t
+        GROUP BY b.{group_col}, t.total_downloads_all
     )
-    SELECT 
-        b.*
-    FROM base_data b
-    INNER JOIN top_items t ON b.{group_col} = t.name
-    ORDER BY t.total_downloads DESC
+
+    SELECT *
+    FROM top_items
+    ORDER BY total_downloads DESC
+    LIMIT {top_n};
     """
-    
+
     try:
         return con.execute(query).fetchdf()
     except Exception as e:
         print(f"Error querying DuckDB: {e}")
-        return pd.DataFrame()
-
-
-def create_leaderboard(con, board_type, top_n=10):
-    """
-    Create leaderboard using DuckDB connection with optimized queries
-    
-    Args:
-        con: DuckDB connection object
-        board_type: Type of leaderboard ('countries', 'developers', 'models')
-        top_n: Number of top entries to display
-        
-    Returns:
-        Dash HTML component with the leaderboard table
-    """
-    # Map board type to column name
-    column_map = {
-        "countries": "org_country_single",
-        "developers": "author",
-        "models": "model"
-    }
-    
-    title_map = {
-        "countries": "Top Countries",
-        "developers": "Top Developers",
-        "models": "Top Models"
-    }
-    
-    filename_map = {
-        "countries": "top_countries",
-        "developers": "top_developers",
-        "models": "top_models"
-    }
-    
-    group_col = column_map.get(board_type)
-    if not group_col:
-        return html.Div(f"Unknown board type: {board_type}")
-    
-    # Get only the top N rows from DuckDB
-    filtered_df = get_top_n_from_duckdb(con, group_col, top_n)
-    
-    if filtered_df.empty:
-        return html.Div("No data available")
-    
-    # Process the already-filtered data
-    top_data, download_data = get_top_n_leaderboard(filtered_df, group_col, top_n)
-    
-    return render_table(
-        top_data,
-        download_data,
-        title_map[board_type],
-        chip_color="#F0F9FF",
-        bar_color="#082030",
-        filename=filename_map[board_type],
-    )
+        return pd.DataFrame()

requirements.txt

@@ -5,4 +5,5 @@ gunicorn
 dash-mantine-components
 dash-bootstrap-components
 pyarrow
-duckdb
+duckdb
+countryflag