redo leaderboard

app.py

@@ -1,7 +1,11 @@
 from dash import Dash, html, dcc, Input, Output, State
 import pandas as pd
 import dash_mantine_components as dmc
-from graphs.leaderboard import create_leaderboard, get_top_n_leaderboard, render_table, render_table_content
+from graphs.leaderboard import (
+    create_leaderboard,
+    get_top_n_leaderboard,
+    render_table_content,
+)
 
 # Initialize the app
 app = Dash()
@@ -10,160 +14,375 @@ server = app.server
 # Load pre-processed data frames
 filtered_df = pd.read_pickle("data_frames/filtered_df.pkl")
 
+# Create a dcc slider for time range selection by year (readable marks)
+start_dt = filtered_df["time"].min()
+end_dt = filtered_df["time"].max()
+start_ts = int(start_dt.timestamp())
+end_ts = int(end_dt.timestamp())
+
+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")})
+
 # Create a dcc slider for time range selection by year
-created_slider = dcc.Slider(
-    id='created-slider',
-    min=filtered_df['time'].min().year,
-    max=filtered_df['time'].max().year,
-    marks={year: str(year) for year in range(filtered_df['time'].min().year, filtered_df['time'].max().year + 1)},
-    step=1,
-    tooltip={"placement": "bottom", "always_visible": True},
-    updatemode='mouseup',
+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": "70%", "margin": "0 auto"},
+    labelAlwaysOn=False,
+    # thumbChildren=[
+    #     dmc.Text(id="time-slider-thumb-from-label", size="xs", children="Hello"),
+    #     dmc.Text(id="time-slider-thumb-to-label", size="xs"),
+    # ]
 )
 
 # App layout
 app.layout = dmc.MantineProvider(
-    theme={"colorScheme": "light",
-           "primaryColor": "blue",
-           "fontFamily": "Inter, sans-serif"},
-    children=[html.Div(
-    [
+    theme={
+        "colorScheme": "light",
+        "primaryColor": "blue",
+        "fontFamily": "Inter, sans-serif",
+    },
+    children=[
         html.Div(
             [
-                html.Div(children='Visualizing the Open Model Ecosystem', style={'fontSize': 28, 'fontWeight': 'bold', 'marginBottom': 6}),
-                html.Div(children='An interactive dashboard to explore trends in open models on Hugging Face', style={'fontSize': 16, 'marginBottom': 12}),
+                # Header
+                html.Div(
+                    [
+                        html.Div(
+                            [
+                                html.Div(
+                                    [
+                                        html.Div(
+                                            children="Visualizing the Open Model Ecosystem",
+                                            style={
+                                                "fontSize": 22,
+                                                "fontWeight": "700",
+                                                "lineHeight": "1.1",
+                                            },
+                                        ),
+                                        html.Div(
+                                            children="An interactive dashboard to explore trends in open models on Hugging Face",
+                                            style={
+                                                "fontSize": 13,
+                                                "marginTop": 6,
+                                                "opacity": 0.9,
+                                            },
+                                        ),
+                                    ],
+                                    style={
+                                        "display": "flex",
+                                        "flexDirection": "column",
+                                        "justifyContent": "center",
+                                    },
+                                ),
+                                html.Div(
+                                    [
+                                        html.A(
+                                            children=[
+                                                html.Img(
+                                                    src="assets/images/dpi-logo.svg",
+                                                    style={
+                                                        "height": "28px",
+                                                        "verticalAlign": "middle",
+                                                        "paddingRight": "8px",
+                                                    },
+                                                ),
+                                                "Data Provenance Initiative",
+                                            ],
+                                            href="https://www.dataprovenance.org/",
+                                            target="_blank",
+                                            style={
+                                                "display": "inline-block",
+                                                "padding": "6px 14px",
+                                                "fontSize": 13,
+                                                "color": "#082030",
+                                                "backgroundColor": "#ffffff",
+                                                "borderRadius": "18px",
+                                                "fontWeight": "700",
+                                                "textDecoration": "none",
+                                                "marginRight": "12px",
+                                            },
+                                        ),
+                                        html.A(
+                                            children=[
+                                                html.Img(
+                                                    src="assets/images/Hf-logo-with-title.svg",
+                                                    style={
+                                                        "height": "30px",
+                                                        "verticalAlign": "middle",
+                                                    },
+                                                )
+                                            ],
+                                            href="https://huggingface.co/",
+                                            target="_blank",
+                                            style={
+                                                "display": "inline-flex",
+                                                "padding": "6px 14px",
+                                                "alignItems": "center",
+                                                "backgroundColor": "#ffffff",
+                                                "borderRadius": "18px",
+                                                "textDecoration": "none",
+                                            },
+                                        ),
+                                    ],
+                                    style={"display": "flex", "alignItems": "center"},
+                                ),
+                            ],
+                            style={
+                                "marginLeft": "50px",
+                                "marginRight": "50px",
+                                "display": "flex",
+                                "justifyContent": "space-between",
+                                "alignItems": "center",
+                                "padding": "18px 24px",
+                                "gap": "24px",
+                            },
+                        ),
+                    ],
+                    style={
+                        "backgroundColor": "#082030",
+                        "color": "white",
+                        "width": "100%",
+                    },
+                ),
+                # Intro / description below header (kept but styled to match layout)
+                # Title
+                html.Div(
+                    children="Model Leaderboard",  # Change this to your desired title
+                    style={
+                        "fontSize": 40,
+                        "fontWeight": "700",
+                        "textAlign": "center",
+                        "marginTop": 20,
+                        "marginBottom": 20,
+                    },
+                ),
+                # Button
                 html.Div(
                     children=[
-                        html.A(
-                            "Data Provenance Initiative",
-                            href="https://www.dataprovenance.org/",
-                            target="_blank",
+                        html.Button(
+                            "Read the paper",  # Change this to your desired button text
+                            id="my-button",
                             style={
-                                'display': 'inline-block',
-                                'padding': '4px 14px',
-                                'fontSize': 13,
-                                'color': 'white',
-                                'border': 'none',
-                                'backgroundColor': '#228BE6',
-                                'borderRadius': '18px',
-                                'textDecoration': 'none',
-                                'fontWeight': 'bold',
-                                'boxShadow': '0 2px 8px rgba(37,99,235,0.08)',
-                                'marginLeft': '6px',
-                                'marginBottom': '4px',
-                                'transition': 'background 0.2s',
-                                'cursor': 'pointer'
-                            }
-                        )
+                                "padding": "10px 20px",
+                                "fontSize": 16,
+                                "margin": "0 auto",
+                                "display": "block",
+                                "backgroundColor": "#AC482A",
+                                "color": "white",
+                                "border": "none",
+                                "borderRadius": "5px",
+                                "cursor": "pointer",
+                            },
+                        ),
                     ],
-                    style={'fontSize': 14, 'marginBottom': 12}
+                    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...",
+                    style={
+                        "fontSize": 14,
+                        "marginTop": 18,
+                        "marginBottom": 12,
+                        "marginLeft": 100,
+                        "marginRight": 100,
+                        "textAlign": "center",
+                    },
+                ),
+                # Main content (filters + tabs)
+                html.Div(
+                    children=[
+                        html.Div(
+                            [
+                                html.Div(
+                                    "Select Window",
+                                    style={
+                                        "fontWeight": "700",
+                                        "marginBottom": 8,
+                                        "fontSize": 14,
+                                    },
+                                ),
+                                dmc.SegmentedControl(
+                                    id="segmented",
+                                    value="all-downloads",
+                                    color="#AC482A",
+                                    transitionDuration=200,
+                                    data=[
+                                        {
+                                            "value": "all-downloads",
+                                            "label": "All Downloads",
+                                        },
+                                        {
+                                            "value": "filtered-downloads",
+                                            "label": "Filtered Downloads",
+                                        },
+                                    ],
+                                    mb=10,
+                                ),
+                                html.Span(
+                                    id="global-toggle-status",
+                                    style={
+                                        "marginLeft": "8px",
+                                        "display": "inline-block",
+                                        "marginTop": 6,
+                                    },
+                                ),
+                            ],
+                            style={"flex": 1, "minWidth": "220px"},
+                        ),
+                        html.Div(
+                            [
+                                html.Div(
+                                    "Select Time Range",
+                                    style={
+                                        "fontWeight": "700",
+                                        "marginBottom": 8,
+                                        "fontSize": 14,
+                                    },
+                                ),
+                                time_slider,
+                            ],
+                            style={"flex": 2, "minWidth": "320px"},
+                        ),
+                    ],
+                    style={
+                        "display": "flex",
+                        "gap": "24px",
+                        "padding": "32px",
+                        "alignItems": "flex-start",
+                        # 'margin': '24px auto 64px',     # centered horizontally
+                        "marginLeft": "100px",
+                        "marginRight": "100px",
+                        "backgroundColor": "#FFFBF9",
+                        "borderRadius": "18px",
+                    },
+                ),
+                html.Div(
+                    [
+                        dcc.Tabs(
+                            id="leaderboard-tabs",
+                            value="Countries",
+                            children=[  # wrap Tabs here
+                                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",  # underline only
+                                    },
+                                    children=[
+                                        create_leaderboard(filtered_df, "countries")
+                                    ],
+                                ),
+                                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=[
+                                        create_leaderboard(filtered_df, "developers")
+                                    ],
+                                ),
+                                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=[
+                                        create_leaderboard(filtered_df, "models")
+                                    ],
+                                ),
+                            ],
+                        ),
+                    ],
+                    style={
+                        "borderRadius": "18px",
+                        "padding": "32px",
+                        "marginTop": "12px",
+                        "marginBottom": "64px",
+                        "marginLeft": "50px",
+                        "marginRight": "50px",
+                        # 'maxWidth': '1250px',
+                    },
                 ),
-                html.Hr(style={'marginTop': 8, 'marginBottom': 8}),
-                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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', style={'fontSize': 14, 'marginBottom': 12, 'marginLeft': 100, 'marginRight': 100}),
-            ],
-            style={'textAlign': 'center'}
-        ),
-        html.Div(
-            children=[
-            dmc.SegmentedControl(
-                        id="segmented",
-                        value="all-time",
-                        data=[
-                            {"value": "one-year", "label": "One Year Window"},
-                            {"value": "all-time", "label": "All Time"},
-                        ],
-                        mb=10,
-                    ),
-            html.Span(id="global-toggle-status", style={"marginLeft": "8px"}),
-            created_slider,
-            html.Div(children='This is an explanation of the filters on this block.', style={'fontSize': 12, 'marginTop': 20, 'marginLeft': 10, 'marginRight': 10}),
-            ],
-            style={
-                'backgroundColor': 'white',
-                'borderRadius': '18px',
-                'boxShadow': '0 4px 24px rgba(0,0,0,0.10)',
-                'padding': '32px',
-                'margin': '32px auto',
-                'maxWidth': '1000px',
-            }
-        ),
-        html.Div(
-            [
-                dcc.Tabs(children=[  # wrap Tabs here
-                    dcc.Tab(label='Countries', children=[
-                        create_leaderboard(
-                            filtered_df, "countries"
-                        )
-                    ]),
-                    dcc.Tab(label='Developers', children=[
-                        create_leaderboard(
-                            filtered_df, "developers"
-                        )
-                    ]),
-                    dcc.Tab(label='Models', children=[
-                        create_leaderboard(
-                            filtered_df, "models"
-                        )
-                    ]),
-                ]),
             ],
             style={
-                'backgroundColor': 'white',
-                'borderRadius': '18px',
-                'boxShadow': '0 4px 24px rgba(0,0,0,0.10)',
-                'padding': '32px',
-                'margin': '32px auto',
-                'maxWidth': '1250px',
-            }
+                "fontFamily": "Inter",
+                "backgroundColor": "#ffffff",
+                "minHeight": "100vh",
+            },
         )
     ],
-    style={'fontFamily': 'Inter', 'backgroundColor': '#f7f7fa', 'minHeight': '100vh'}
-)])
+)
 
 # Callbacks for interactivity
+# -- helper utilities to consolidate duplicated callback logic --
+def _apply_time_slider(slider_value):
+    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")
+        return filtered_df[(filtered_df["time"] >= start) & (filtered_df["time"] <= end)]
+    return filtered_df
 
-# Model Market Share Tab
-# On slider change, update output text
-# @app.callback(
-#     Output('output-container-range-slider', 'children'),
-#     [Input('time-slider', 'value')]
-# )
-# def update_output(value):
-#     if value and len(value) == 2:
-#         start_time = pd.to_datetime(value[0], unit='s').strftime("%b %d, %Y")
-#         end_time = pd.to_datetime(value[1], unit='s').strftime("%b %d, %Y")
-#         return f"Selected time range: {start_time} to {end_time}"
-#     return "Select a time range"
-
-# On slider change, update world map
-# @app.callback(
-#     Output('world-map-with-slider', 'figure'),
-#     Input('created-slider', 'value')
-# )
-# def update_world_map(value):
-#     # Filter by created year
-#     if value is None:
-#         return world_map
-    
-#     created_after = f"{int(value)}-01-01"
-#     updated_fig = create_world_map(
-#         filtered_df,
-#         created_after=created_after
-#     )
-#     return updated_fig
-
-@app.callback(
-    Output("top_countries-table", "children"),
-    Output("top_countries-toggle", "children"),
-    Input("top_countries-toggle", "n_clicks"),
-    State("top_countries-toggle", "children"),
-)
-def update_top_countries(n_clicks, current_label):
-    print(n_clicks, current_label)
-    # Handle initial page load
+def _leaderboard_callback_logic(n_clicks, slider_value, current_label, group_col, filename, default_label="▼ Show Top 50", chip_color="#F0F9FF"):
+    # Normalize label on first load
     if current_label is None:
-        current_label = "▼ Show Top 50"
+        current_label = default_label
 
+    # Determine top_n and next label
     if n_clicks == 0:
         top_n = 10
         new_label = current_label
@@ -174,58 +393,79 @@ def update_top_countries(n_clicks, current_label):
     else:
         top_n, new_label = 10, "▼ Show Top 50"
 
-    df, download_df = get_top_n_leaderboard(filtered_df, "org_country_single", top_n)
-    return render_table_content(df, download_df, chip_color="#FCE8E6", filename="top_countries"), new_label
+    # Apply time filter and build table
+    df_time = _apply_time_slider(slider_value)
+    df, download_df = get_top_n_leaderboard(df_time, group_col, top_n)
+    return render_table_content(df, download_df, chip_color=chip_color, filename=filename), new_label
+# -- end helpers --
+
+# ...existing code...
 
+# 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"),
+    State("top_countries-toggle", "children"),
+)
+def update_top_countries(n_clicks, slider_value, current_label):
+    return _leaderboard_callback_logic(
+        n_clicks,
+        slider_value,
+        current_label,
+        group_col="org_country_single",
+        filename="top_countries",
+        default_label="▼ Show Top 50",
+        chip_color="#F0F9FF",
+    )
 
 @app.callback(
     Output("top_developers-table", "children"),
     Output("top_developers-toggle", "children"),
     Input("top_developers-toggle", "n_clicks"),
+    Input("time-slider", "value"),
     State("top_developers-toggle", "children"),
 )
-def update_top_developers(n_clicks, current_label):
-    # Handle initial page load
-    if current_label is None:
-        current_label = "▼ Show More"
-
-    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"
-
-    df, download_df = get_top_n_leaderboard(filtered_df, "author", top_n)
-    return render_table_content(df, download_df, chip_color="#E6F4EA", filename="top_developers"), new_label
+def update_top_developers(n_clicks, slider_value, current_label):
+    return _leaderboard_callback_logic(
+        n_clicks,
+        slider_value,
+        current_label,
+        group_col="author",
+        filename="top_developers",
+        default_label="▼ Show More",
+        chip_color="#F0F9FF",
+    )
 
 @app.callback(
     Output("top_models-table", "children"),
     Output("top_models-toggle", "children"),
     Input("top_models-toggle", "n_clicks"),
+    Input("time-slider", "value"),
     State("top_models-toggle", "children"),
 )
-def update_top_models(n_clicks, current_label):
-    # Handle initial page load
-    if current_label is None:
-        current_label = "▼ Show More"
+def update_top_models(n_clicks, slider_value, current_label):
+    return _leaderboard_callback_logic(
+        n_clicks,
+        slider_value,
+        current_label,
+        group_col="model",
+        filename="top_models",
+        default_label="▼ Show More",
+        chip_color="#F0F9FF",
+    )
 
-    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"
+@app.callback(
+    Output("time-slider", "label"),
+    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]
 
-    df, download_df = get_top_n_leaderboard(filtered_df, "model", top_n)
-    return render_table_content(df, download_df, chip_color="#E8F0FE", filename="top_models"), new_label
 
 # Run the app
-if __name__ == '__main__':
+if __name__ == "__main__":
     app.run(debug=True)

graphs/leaderboard.py

@@ -5,49 +5,49 @@ import dash_mantine_components as dmc
 import base64
 
 button_style = {
-            "display": "inline-block",
-            "marginBottom": "10px",
-            "marginRight": "15px",
-            "marginTop": "30px",
-            "padding": "6px 16px",
-            "backgroundColor": "#2196F3",
-            "color": "white",
-            "borderRadius": "6px",
-            "textDecoration": "none",
-            "fontWeight": "bold",
-            "fontSize": "14px"
-        }
+    "display": "inline-block",
+    "marginBottom": "10px",
+    "marginRight": "15px",
+    "marginTop": "30px",
+    "padding": "6px 16px",
+    "backgroundColor": "#082030",
+    "color": "white",
+    "borderRadius": "6px",
+    "textDecoration": "none",
+    "fontWeight": "bold",
+    "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": "🌐",
-    }
+    "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": "🌐",
+}
 
 company_icon_map = {
     "google": "../assets/icons/google.png",
@@ -60,9 +60,16 @@ company_icon_map = {
 meta_cols_map = {
     "org_country_single": ["org_country_single"],
     "author": ["org_country_single", "author", "merged_country_groups_single"],
-    "model": ["org_country_single", "author", "merged_country_groups_single", "merged_modality", "downloads"]
+    "model": [
+        "org_country_single",
+        "author",
+        "merged_country_groups_single",
+        "merged_modality",
+        "downloads",
+    ],
 }
 
+
 # Chip renderer
 def chip(text, bg_color="#F0F0F0"):
     return html.Span(
@@ -74,12 +81,13 @@ def chip(text, bg_color="#F0F0F0"):
             "margin": "2px",
             "display": "inline-flex",
             "alignItems": "center",
-            "fontSize": "14px"
-        }
+            "fontSize": "14px",
+        },
     )
 
+
 # Progress bar for % of total
-def progress_bar(percent, bar_color="#4CAF50"):
+def progress_bar(percent, bar_color="#082030"):
     return html.Div(
         style={
             "position": "relative",
@@ -111,11 +119,12 @@ def progress_bar(percent, bar_color="#4CAF50"):
                     "fontSize": "12px",
                     "lineHeight": "20px",
                     "textAlign": "center",
-                }
-            )
-        ]
+                },
+            ),
+        ],
     )
 
+
 # Helper to convert DataFrame to CSV and encode for download
 def df_to_download_link(df, filename):
     csv_string = df.to_csv(index=False)
@@ -124,103 +133,252 @@ def df_to_download_link(df, filename):
         html.A(
             children=dmc.ActionIcon(
                 DashIconify(icon="mdi:download", width=24),
-                size="lg"
+                size="lg",
+                color="#082030",
             ),
             id=f"download-{filename}",
             download=f"{filename}.csv",
             href=f"data:text/csv;base64,{b64}",
             target="_blank",
             title="Download CSV",
-            style={"padding": "6px 12px", "display": "inline-flex", "alignItems": "center", "justifyContent": "center"}
+            style={
+                "padding": "6px 12px",
+                "display": "inline-flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+            },
         ),
-        style={"textAlign": "right"}
+        style={"textAlign": "right"},
     )
 
+
 # Render multiple chips in one row
-def render_chips(metadata_list, chip_color="#F0F0F0"):
+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')):
+        if isinstance(icon, str) and icon.endswith((".png", ".jpg", ".jpeg", ".svg")):
             chips.append(
-                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"
-                })
+                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",
+                    },
+                )
             )
         else:
             chips.append(chip(f"{icon} {name}", chip_color))
     return html.Div(
-        chips,
-        style={"display": "flex", "flexWrap": "wrap", "justifyContent": "left"}
+        chips, style={"display": "flex", "flexWrap": "wrap", "justifyContent": "left"}
+    )
+
+
+def render_table_content(
+    df, download_df, chip_color, bar_color="#082030", filename="data"
+):
+    return html.Div(
+        [
+            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%"},
+            ),
+        ]
     )
 
-def render_table_content(df, download_df, chip_color="#F0F0F0", bar_color="#4CAF50", filename="data"):
-    return html.Div([
-        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%"}),
-        ])
 
 # Table renderer
-def render_table(df, download_df, title, chip_color="#F0F0F0", bar_color="#4CAF50", 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"}),
-        ]),
-        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"})
+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
 def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
-    top = filtered_df.groupby(group_col)["downloads"].sum().nlargest(top_n).reset_index().rename(columns={group_col: "Name", "downloads": "Total Value"})
+    top = (
+        filtered_df.groupby(group_col)["downloads"]
+        .sum()
+        .nlargest(top_n)
+        .reset_index()
+        .rename(columns={group_col: "Name", "downloads": "Total Value"})
+    )
     total_value = top["Total Value"].sum()
     top["% of total"] = top["Total Value"] / total_value * 100 if total_value else 0
 
@@ -245,7 +403,7 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
                 unique_vals = name_data[col].unique()
                 meta_map[name][col] = list(unique_vals)
                 download_map[name][col] = list(unique_vals)
-    
+
     # Function to build metadata chips
     def build_metadata(nm):
         meta = meta_map.get(nm, {})
@@ -268,28 +426,30 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
             chips.append((icon, a))
         # Downloads
         # Sum downloads if multiple entries
-        total_downloads = sum(d for d in meta.get("downloads", []) if pd.notna(d))  # Check if d is not NaN
+        total_downloads = sum(
+            d for d in meta.get("downloads", []) if pd.notna(d)
+        )  # Check if d is not NaN
         if total_downloads:
             chips.append(("⬇️", f"{int(total_downloads):,}"))
 
         # Modality
         for m in meta.get("merged_modality", []):
             chips.append(("", m))
-    
+
         # Estimated Parameters
         for p in meta.get("estimated_parameters", []):
             if pd.notna(p):  # Check if p is not NaN
                 if p >= 1e9:
-                    p_str = f"{p/1e9:.1f}B"
+                    p_str = f"{p / 1e9:.1f}B"
                 elif p >= 1e6:
-                    p_str = f"{p/1e6:.1f}M"
+                    p_str = f"{p / 1e6:.1f}M"
                 elif p >= 1e3:
-                    p_str = f"{p/1e3:.1f}K"
+                    p_str = f"{p / 1e3:.1f}K"
                 else:
                     p_str = str(p)
                 chips.append(("⚙️", p_str))
         return chips
-    
+
     # Function to create downloadable dataframe
     def build_download_metadata(nm):
         meta = download_map.get(nm, {})
@@ -305,7 +465,7 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
             else:
                 download_info[col] = ""
         return download_info
-    
+
     # Apply metadata builder to top dataframe
     top["Metadata"] = top["Name"].astype(object).apply(build_metadata)
     download_info_list = [build_download_metadata(nm) for nm in download_top["Name"]]
@@ -314,27 +474,53 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10):
 
     return top[["Name", "Metadata", "% of total"]], download_top
 
-def create_leaderboard(filtered_df, board_type, start_time=None, top_n=10):
-    # Filter by time
-    if start_time is not None:
-        filtered_df = filtered_df[(filtered_df["created"] >= start_time) & (filtered_df["time"] >= start_time)]
 
+def create_leaderboard(filtered_df, board_type, top_n=10):
     if filtered_df.empty:
         return html.Div("No data in selected range")
-    
+
     # Merge HF and USA
-    filtered_df["org_country_single"] = filtered_df["org_country_single"].replace({"HF": "United States of America"})
+    filtered_df["org_country_single"] = filtered_df["org_country_single"].replace(
+        {"HF": "United States of America"}
+    )
     # Merge International and Online
-    filtered_df["org_country_single"] = filtered_df["org_country_single"].replace({"International": "International/Online", "Online": "International/Online"})
+    filtered_df["org_country_single"] = filtered_df["org_country_single"].replace(
+        {"International": "International/Online", "Online": "International/Online"}
+    )
 
     # Build leaderboards
-    top_countries, download_top_countries = get_top_n_leaderboard(filtered_df, "org_country_single", top_n)
-    top_developers, download_top_developers = get_top_n_leaderboard(filtered_df, "author", top_n)
+    top_countries, download_top_countries = get_top_n_leaderboard(
+        filtered_df, "org_country_single", top_n
+    )
+    top_developers, download_top_developers = get_top_n_leaderboard(
+        filtered_df, "author", top_n
+    )
     top_models, download_top_models = get_top_n_leaderboard(filtered_df, "model", top_n)
 
     if board_type == "countries":
-        return render_table(top_countries, download_top_countries, "Top Countries", chip_color="#FCE8E6", bar_color="#FF6F61", filename="top_countries")
+        return render_table(
+            top_countries,
+            download_top_countries,
+            "Top Countries",
+            chip_color="#F0F9FF",
+            bar_color="#082030",
+            filename="top_countries",
+        )
     elif board_type == "developers":
-        return render_table(top_developers, download_top_developers, "Top Developers", chip_color="#E6F4EA", bar_color="#4CAF50", filename="top_developers")
+        return render_table(
+            top_developers,
+            download_top_developers,
+            "Top Developers",
+            chip_color="#F0F9FF",
+            bar_color="#082030",
+            filename="top_developers",
+        )
     else:
-        return render_table(top_models, download_top_models, "Top Models", chip_color="#E8F0FE", bar_color="#2196F3", filename="top_models")
+        return render_table(
+            top_models,
+            download_top_models,
+            "Top Models",
+            chip_color="#F0F9FF",
+            bar_color="#082030",
+            filename="top_models",
+        )