leaderboard

app.py

@@ -1,332 +1,477 @@
-import dash
+from dash import Dash, html, dcc, Input, Output, State
+import pandas as pd
 import dash_mantine_components as dmc
-import plotly.express as px
-from dash import Input, Output, callback, dcc, html
-from dash_iconify import DashIconify
-
+from graphs.leaderboard import (
+    create_leaderboard,
+    get_top_n_leaderboard,
+    render_table_content,
+)
 
-app = dash.Dash(__name__)
+# Initialize the app
+app = Dash()
 server = app.server
 
-df = px.data.gapminder()
-
-
-def create_scatter_plot(selected_year, selected_continent=None):
-    filtered_df = df[df["year"] == selected_year]
-
-    if selected_continent and selected_continent != "All":
-        filtered_df = filtered_df[filtered_df["continent"] == selected_continent]
-
-    fig = px.scatter(
-        filtered_df,
-        x="gdpPercap",
-        y="lifeExp",
-        size="pop",
-        color="continent",
-        hover_name="country",
-        log_x=True,
-        size_max=60,
-        title=f"Life Expectancy vs GDP per Capita ({selected_year})",
-    )
-
-    fig.update_layout(
-        template="plotly_dark",
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-    )
-
-    return fig
+# Load parquet file from Hugging Face
+print("Loading data...")
+hf_parquet_url = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/filtered_df.parquet"
+filtered_df = pd.read_parquet(hf_parquet_url)
+print("Data loaded.")
 
+# List columns for reference
+print(filtered_df.columns.tolist())
 
-def create_line_chart(selected_country):
-    country_data = df[df["country"] == selected_country]
-    fig = px.line(
-        country_data,
-        x="year",
-        y="lifeExp",
-        title=f"{selected_country} - Life Expectancy",
-    )
-    fig.update_layout(
-        template="plotly_dark",
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-    )
-    return fig
+# 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")})
 
-def create_bar_chart(selected_year):
-    year_data = df[df["year"] == selected_year]
-    continent_stats = year_data.groupby("continent")["lifeExp"].mean().reset_index()
-    fig = px.bar(
-        continent_stats,
-        x="continent",
-        y="lifeExp",
-        color="continent",
-        title=f"Average Life Expectancy by Continent ({selected_year})",
-    )
-    fig.update_layout(
-        template="plotly_dark",
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="rgba(0,0,0,0)",
-        showlegend=False,
-    )
-    return fig
-
-
-def create_datacard(title, value, icon, color):
-    return dmc.Card(
-        [
-            dmc.Group(
-                [
-                    DashIconify(icon=icon, width=30, color=color),
-                    html.Div(
-                        [
-                            dmc.Text(value, size="xl", fw=700, c="white"),
-                            dmc.Text(title, size="sm", c="dimmed"),
-                        ]
-                    ),
-                ],
-                align="center",
-                gap="md",
-            )
-        ],
-        p="md",
-        className="datacard",
-    )
-
+# Create a dcc slider for time range selection by year
+time_slider = dmc.RangeSlider(
+    id="time-slider",
+    min=start_ts,
+    max=end_ts,
+    value=[
+        start_ts,
+        end_ts,
+    ],
+    step=24 * 60 * 60,
+    color="#AC482A",
+    size="md",
+    radius="xl",
+    marks=marks,
+    style={"width": "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(
-    [
-        html.Link(
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap",
-            rel="stylesheet",
-        ),
-        dmc.Group(
-            [
-                DashIconify(icon="twemoji:globe-with-meridians", width=45),
-                dmc.Text(
-                    "Gapminder World Data Explorer", ml=10, size="xl", fw=900, c="white"
-                ),
-            ],
-            align="center",
-            className="header",
-            mb="md",
-        ),
-        dmc.Grid(
+    theme={
+        "colorScheme": "light",
+        "primaryColor": "blue",
+        "fontFamily": "Inter, sans-serif",
+    },
+    children=[
+        html.Div(
             [
-                dmc.GridCol(
+                # Header
+                html.Div(
                     [
-                        dmc.Stack(
+                        html.Div(
                             [
-                                dmc.Card(
+                                html.Div(
                                     [
-                                        dmc.Text("Controls", size="lg", mb="md"),
-                                        dmc.Stack(
-                                            [
-                                                html.Div(
-                                                    [
-                                                        dmc.Text(
-                                                            "Year:", size="sm", mb=5
-                                                        ),
-                                                        dmc.Slider(
-                                                            id="year-slider",
-                                                            min=1952,
-                                                            max=2007,
-                                                            step=5,
-                                                            value=2007,
-                                                            marks=[
-                                                                {
-                                                                    "value": year,
-                                                                    "label": str(year),
-                                                                }
-                                                                for year in [
-                                                                    1952,
-                                                                    1967,
-                                                                    1982,
-                                                                    1997,
-                                                                    2007,
-                                                                ]
-                                                            ],
-                                                        ),
-                                                    ]
-                                                ),
-                                                html.Div(
-                                                    [
-                                                        dmc.Text(
-                                                            "Continent Filter:",
-                                                            size="sm",
-                                                            mb=5,
-                                                        ),
-                                                        dmc.Select(
-                                                            id="continent-dropdown",
-                                                            data=[
-                                                                {
-                                                                    "value": "All",
-                                                                    "label": "All Continents",
-                                                                }
-                                                            ]
-                                                            + [
-                                                                {
-                                                                    "value": cont,
-                                                                    "label": cont,
-                                                                }
-                                                                for cont in sorted(
-                                                                    df[
-                                                                        "continent"
-                                                                    ].unique()
-                                                                )
-                                                            ],
-                                                            value="All",
-                                                        ),
-                                                    ]
-                                                ),
-                                                html.Div(
-                                                    [
-                                                        dmc.Text(
-                                                            "Select Country:",
-                                                            size="sm",
-                                                            mb=5,
-                                                        ),
-                                                        dmc.Select(
-                                                            id="country-dropdown",
-                                                            data=[
-                                                                {
-                                                                    "value": country,
-                                                                    "label": country,
-                                                                }
-                                                                for country in sorted(
-                                                                    df[
-                                                                        "country"
-                                                                    ].unique()
-                                                                )
-                                                            ],
-                                                            value="United States",
-                                                            searchable=True,
-                                                        ),
-                                                    ]
+                                        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",
+                                                    },
+                                                )
                                             ],
-                                            gap="lg",
+                                            href="https://huggingface.co/",
+                                            target="_blank",
+                                            style={
+                                                "display": "inline-flex",
+                                                "padding": "6px 14px",
+                                                "alignItems": "center",
+                                                "backgroundColor": "#ffffff",
+                                                "borderRadius": "18px",
+                                                "textDecoration": "none",
+                                            },
                                         ),
                                     ],
-                                    p="md",
-                                    className="control-card",
-                                )
-                            ]
-                        )
+                                    style={"display": "flex", "alignItems": "center"},
+                                ),
+                            ],
+                            style={
+                                "marginLeft": "50px",
+                                "marginRight": "50px",
+                                "display": "flex",
+                                "justifyContent": "space-between",
+                                "alignItems": "center",
+                                "padding": "18px 24px",
+                                "gap": "24px",
+                            },
+                        ),
                     ],
-                    span=3,
+                    style={
+                        "backgroundColor": "#082030",
+                        "color": "white",
+                        "width": "100%",
+                    },
                 ),
-                dmc.GridCol(
-                    [
-                        dmc.Stack(
+                # 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.Button(
+                            "Read the paper",  # Change this to your desired button text
+                            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...",
+                    style={
+                        "fontSize": 14,
+                        "marginTop": 18,
+                        "marginBottom": 12,
+                        "marginLeft": 100,
+                        "marginRight": 100,
+                        "textAlign": "center",
+                    },
+                ),
+                # Main content (filters + tabs)
+                html.Div(
+                    children=[
+                        html.Div(
                             [
-                                html.Div(id="stats-cards"),
-                                dmc.Card(
-                                    [dcc.Graph(id="scatter-plot")],
-                                    p="sm",
-                                    className="chart-card",
+                                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,
+                                    },
                                 ),
                             ],
-                            gap="md",
-                        )
-                    ],
-                    span=9,
-                ),
-            ],
-            gutter="md",
-        ),
-        dmc.Grid(
-            [
-                dmc.GridCol(
-                    [
-                        dmc.Card(
-                            [dcc.Graph(id="line-chart")], p="sm", className="chart-card"
-                        )
+                            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"},
+                        ),
                     ],
-                    span=6,
+                    style={
+                        "display": "flex",
+                        "gap": "24px",
+                        "padding": "32px",
+                        "alignItems": "flex-start",
+                        # 'margin': '24px auto 64px',     # centered horizontally
+                        "marginLeft": "100px",
+                        "marginRight": "100px",
+                        "backgroundColor": "#FFFBF9",
+                        "borderRadius": "18px",
+                    },
                 ),
-                dmc.GridCol(
+                html.Div(
                     [
-                        dmc.Card(
-                            [dcc.Graph(id="bar-chart")], p="sm", className="chart-card"
-                        )
+                        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")
+                                    ],
+                                ),
+                            ],
+                        ),
                     ],
-                    span=6,
+                    style={
+                        "borderRadius": "18px",
+                        "padding": "32px",
+                        "marginTop": "12px",
+                        "marginBottom": "64px",
+                        "marginLeft": "50px",
+                        "marginRight": "50px",
+                        # 'maxWidth': '1250px',
+                    },
                 ),
             ],
-            gutter="md",
-            mt="md",
-        ),
+            style={
+                "fontFamily": "Inter",
+                "backgroundColor": "#ffffff",
+                "minHeight": "100vh",
+            },
+        )
     ],
-    forceColorScheme="dark",
-    theme={"colorScheme": "dark"},
 )
 
+# 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
 
-@callback(
-    Output("scatter-plot", "figure"),
-    [Input("year-slider", "value"), Input("continent-dropdown", "value")],
-)
-def update_scatter_plot(selected_year, selected_continent):
-    return create_scatter_plot(selected_year, selected_continent)
-
+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 = default_label
 
-@callback(Output("line-chart", "figure"), Input("country-dropdown", "value"))
-def update_line_chart(selected_country):
-    return create_line_chart(selected_country)
+    # Determine top_n and next label
+    if n_clicks == 0:
+        top_n = 10
+        new_label = current_label
+    elif "Show Top 50" in current_label:
+        top_n, new_label = 50, "▼ Show Top 100"
+    elif "Show Top 100" in current_label:
+        top_n, new_label = 100, "▲ Show Less"
+    else:
+        top_n, new_label = 10, "▼ Show Top 50"
 
+    # 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 --
 
-@callback(Output("bar-chart", "figure"), Input("year-slider", "value"))
-def update_bar_chart(selected_year):
-    return create_bar_chart(selected_year)
+# ...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",
+    )
 
-@callback(Output("stats-cards", "children"), Input("year-slider", "value"))
-def update_stats(selected_year):
-    year_data = df[df["year"] == selected_year]
-
-    avg_life_exp = round(year_data["lifeExp"].mean(), 1)
-    total_pop = year_data["pop"].sum()
-    num_countries = len(year_data)
-    avg_gdp = round(year_data["gdpPercap"].mean(), 0)
+@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, 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",
+    )
 
-    return dmc.Grid(
-        [
-            dmc.GridCol(
-                create_datacard(
-                    "Life Expectancy",
-                    f"{avg_life_exp} years",
-                    "mdi:heart-pulse",
-                    "#ff6b35",
-                ),
-                span=3,
-            ),
-            dmc.GridCol(
-                create_datacard(
-                    "Population",
-                    f"{total_pop / 1e9:.1f}B",
-                    "mdi:account-group",
-                    "#1f77b4",
-                ),
-                span=3,
-            ),
-            dmc.GridCol(
-                create_datacard(
-                    "Countries", str(num_countries), "mdi:earth", "#2ca02c"
-                ),
-                span=3,
-            ),
-            dmc.GridCol(
-                create_datacard(
-                    "GDP per Capita", f"${avg_gdp:,.0f}", "mdi:currency-usd", "#d62728"
-                ),
-                span=3,
-            ),
-        ],
-        gutter="sm",
+@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, 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",
     )
 
+@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]
+
 
+# Run the app
 if __name__ == "__main__":
-    app.run(debug=True, port=8050)
+    app.run(debug=True)

assets/styles.css

@@ -1,107 +0,0 @@
-body {
-    font-family: 'Outfit', sans-serif;
-    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
-    margin: 0;
-    padding: 20px;
-    min-height: 100vh;
-}
-
-.header {
-    background: linear-gradient(135deg, #ff6b35, #d43425);
-    padding: 20px 30px;
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
-    margin-bottom: 20px;
-}
-
-.control-card {
-    background: rgba(15, 15, 20, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.chart-card {
-    background: rgba(15, 15, 20, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.datacard {
-    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(212, 52, 37, 0.1));
-    border: 1px solid rgba(255, 107, 53, 0.3);
-    border-radius: 12px;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-}
-
-.datacard:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.2);
-}
-
-.year-slider .mantine-Slider-track {
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.year-slider .mantine-Slider-bar {
-    background: linear-gradient(90deg, #ff6b35, #d43425);
-}
-
-.year-slider .mantine-Slider-thumb {
-    background: #ff6b35;
-    border: 2px solid white;
-}
-
-.continent-select .mantine-Select-input,
-.country-select .mantine-Select-input {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-}
-
-.continent-select .mantine-Select-input:focus,
-.country-select .mantine-Select-input:focus {
-    border-color: #ff6b35;
-    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
-}
-
-/* Custom scrollbar for dropdowns */
-.mantine-Select-dropdown {
-    background: rgba(15, 15, 20, 0.95);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-}
-
-.mantine-Select-item {
-    color: white;
-}
-
-.mantine-Select-item:hover {
-    background: rgba(255, 107, 53, 0.2);
-}
-
-/* Graph styling adjustments */
-.js-plotly-plot {
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    body {
-        padding: 10px;
-    }
-    
-    .header {
-        padding: 15px 20px;
-    }
-    
-    .control-card,
-    .chart-card {
-        margin: 10px 0;
-    }
-}

graphs/leaderboard.py

@@ -0,0 +1,526 @@
+import pandas as pd
+from dash import html, dcc
+from dash_iconify import DashIconify
+import dash_mantine_components as dmc
+import base64
+
+button_style = {
+    "display": "inline-block",
+    "marginBottom": "10px",
+    "marginRight": "15px",
+    "marginTop": "30px",
+    "padding": "6px 16px",
+    "backgroundColor": "#082030",
+    "color": "white",
+    "borderRadius": "6px",
+    "textDecoration": "none",
+    "fontWeight": "bold",
+    "fontSize": "14px",
+}
+
+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": "🌐",
+}
+
+company_icon_map = {
+    "google": "../assets/icons/google.png",
+    "distilbert": "../assets/icons/hugging-face.png",
+    "sentence-transformers": "../assets/icons/hugging-face.png",
+    "facebook": "../assets/icons/meta.png",
+    "openai": "../assets/icons/openai.png",
+}
+
+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",
+    ],
+}
+
+
+# Chip renderer
+def chip(text, bg_color="#F0F0F0"):
+    return html.Span(
+        text,
+        style={
+            "backgroundColor": bg_color,
+            "padding": "4px 10px",
+            "borderRadius": "12px",
+            "margin": "2px",
+            "display": "inline-flex",
+            "alignItems": "center",
+            "fontSize": "14px",
+        },
+    )
+
+
+# Progress bar for % of total
+def progress_bar(percent, bar_color="#082030"):
+    return html.Div(
+        style={
+            "position": "relative",
+            "backgroundColor": "#E0E0E0",
+            "borderRadius": "8px",
+            "height": "20px",
+            "width": "100%",
+            "overflow": "hidden",
+        },
+        children=[
+            html.Div(
+                style={
+                    "backgroundColor": bar_color,
+                    "width": f"{percent}%",
+                    "height": "100%",
+                    "borderRadius": "8px",
+                    "transition": "width 0.5s",
+                }
+            ),
+            html.Div(
+                f"{percent:.1f}%",
+                style={
+                    "position": "absolute",
+                    "top": 0,
+                    "left": "50%",
+                    "transform": "translateX(-50%)",
+                    "color": "black",
+                    "fontWeight": "bold",
+                    "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)
+    b64 = base64.b64encode(csv_string.encode()).decode()
+    return html.Div(
+        html.A(
+            children=dmc.ActionIcon(
+                DashIconify(icon="mdi:download", width=24),
+                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={"textAlign": "right"},
+    )
+
+
+# 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(
+                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"}
+    )
+
+
+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%"},
+            ),
+        ]
+    )
+
+
+# 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
+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"})
+    )
+    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()
+    download_top["Total Value"] = download_top["Total Value"].astype(int)
+    download_top["% of total"] = download_top["% of total"].round(2)
+
+    top["Name"].replace("User", "user")
+
+    # All relevant metadata columns
+    meta_cols = meta_cols_map.get(group_col, [])
+    # Collect all metadata per top n for each category (country, author, model)
+    meta_map = {}
+    download_map = {}
+    for name in top["Name"]:
+        name_data = filtered_df[filtered_df[group_col] == name]
+        meta_map[name] = {}
+        download_map[name] = {}
+        for col in meta_cols:
+            if col in name_data.columns:
+                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, {})
+        chips = []
+        # Countries
+        for c in meta.get("org_country_single", []):
+            if c == "United States of America":
+                c = "USA"
+            if c == "user":
+                c = "User"
+            chips.append((country_icon_map.get(c, ""), c))
+        # Author
+        for a in meta.get("author", []):
+            icon = company_icon_map.get(a, "")
+            if icon == "":
+                if meta.get("merged_country_groups_single", ["User"])[0] != "User":
+                    icon = "🏢"
+                else:
+                    icon = "👤"
+            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
+        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"
+                elif p >= 1e6:
+                    p_str = f"{p / 1e6:.1f}M"
+                elif p >= 1e3:
+                    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, {})
+        download_info = {}
+        for col in meta_cols:
+            # don't add empty columns
+            if col not in meta or not meta[col]:
+                continue
+            vals = meta.get(col, [])
+            if vals:
+                # Join list into a single string for CSV
+                download_info[col] = ", ".join(str(v) for v in vals)
+            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"]]
+    download_info_df = pd.DataFrame(download_info_list)
+    download_top = pd.concat([download_top, download_info_df], axis=1)
+
+    return top[["Name", "Metadata", "% of total"]], download_top
+
+
+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"}
+    )
+    # Merge International and 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_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="#F0F9FF",
+            bar_color="#082030",
+            filename="top_countries",
+        )
+    elif board_type == "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="#F0F9FF",
+            bar_color="#082030",
+            filename="top_models",
+        )

requirements.txt

@@ -1,6 +1,7 @@
+pandas
 dash
-dash-mantine-components
-dash-iconify
 plotly
-pandas
-gunicorn
+gunicorn
+dash-mantine-components
+dash-bootstrap-components
+pyarrow