add mobile responsiveness

app.py

@@ -1,5 +1,4 @@
 from dash import Dash, html, dcc, Input, Output, State
-from dash import Dash, html, dcc, Input, Output, State
 import pandas as pd
 import dash_mantine_components as dmc
 import duckdb
@@ -199,7 +198,7 @@ app.layout = dmc.MantineProvider(
         dcc.Store(id="selected-view", data="all_downloads"),
         dcc.Store(
             id="model-attribution-type", data="uploader"
-        ),  # Store for attribution type
+        ),
         html.Div(
             [
                 # Header
@@ -353,6 +352,7 @@ app.layout = dmc.MantineProvider(
                         "gap": "24px",
                         "backgroundColor": "#082030",  # restored dark background
                     },
+                    className="responsive-header",  # <-- add class
                 ),
                 # Title row with "live" button
                 html.Div(
@@ -376,10 +376,23 @@ app.layout = dmc.MantineProvider(
                         "marginTop": "20px",
                         "marginBottom": "20px",
                     },
+                    className="responsive-title-row",  # <-- add class
                 ),
                 # Intro / description below header (kept but styled to match layout)
                 html.Div(
-                    children="This leaderboard assesses concentrations of power in the open model ecosystem across three hierarchies: countries, developers, and models. Explore how downloads are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face.",
+                    children=[
+                        "This leaderboard assesses concentrations of power in the open model ecosystem through ranking user downloads across three groups: countries, developers, and models. Explore how user downloads of models are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face. This dashboard accompanies the paper titled ",
+                        html.A(
+                            "Economies of Open Intelligence: Tracing Power & Participation in the Model Ecosystem.",
+                            href="https://www.google.com/",  # <-- update to actual paper link if available
+                            target="_blank",
+                            style={
+                                "color": "#AC482A",
+                                "fontWeight": "700",
+                                "textDecoration": "underline",
+                            },
+                        ),
+                    ],
                     style={
                         "fontSize": 14,
                         "marginTop": 18,
@@ -388,6 +401,7 @@ app.layout = dmc.MantineProvider(
                         "marginRight": 100,
                         "textAlign": "center",
                     },
+                    className="responsive-intro",  # <-- add class
                 ),
                 # Main content (filters + tabs)
                 html.Div(
@@ -397,7 +411,7 @@ app.layout = dmc.MantineProvider(
                                 html.Div(
                                     html.Span(
                                         [
-                                            "Select Download View",
+                                            "Download View",
                                             dmc.HoverCard(
                                                 width=260,
                                                 shadow="md",
@@ -479,7 +493,7 @@ app.layout = dmc.MantineProvider(
                                 html.Div(
                                     [
                                         html.Div(
-                                            "Select Model Attribution",
+                                            "Model Attribution",
                                             style={
                                                 "fontWeight": "700",
                                                 "marginBottom": 8,
@@ -528,7 +542,7 @@ app.layout = dmc.MantineProvider(
                         html.Div(
                             [
                                 html.Div(
-                                    "Select Time Range",
+                                    "Download Date Range",
                                     style={
                                         "fontWeight": "700",
                                         "marginBottom": 8,
@@ -537,7 +551,7 @@ app.layout = dmc.MantineProvider(
                                 ),
                                 time_slider,
                                 html.Div(
-                                    "Adjust the time range to filter leaderboard results by model download times.",
+                                    "Adjust the time range to filter leaderboard results by when models were downloaded by users.",
                                     style={
                                         "fontSize": 13,
                                         "color": "#555",
@@ -643,6 +657,7 @@ app.layout = dmc.MantineProvider(
                         "backgroundColor": "#FFFBF9",
                         "borderRadius": "18px",
                     },
+                    className="responsive-main-content",  # <-- add class
                 ),
                 html.Div(
                     [
@@ -677,11 +692,14 @@ app.layout = dmc.MantineProvider(
                                                 "textAlign": "left",
                                             },
                                         ),
-                                        dcc.Loading(
-                                            id="loading-countries",
-                                            type="circle",
-                                            color="#AC482A",
-                                            children=html.Div(id="top_countries-table"),
+                                        html.Div(
+                                            dcc.Loading(
+                                                id="loading-countries",
+                                                type="circle",
+                                                color="#AC482A",
+                                                children=html.Div(id="top_countries-table"),
+                                            ),
+                                            className="responsive-table-wrapper",  # <-- add wrapper for scroll
                                         ),
                                         html.Button(
                                             id="top_countries-toggle",
@@ -718,13 +736,16 @@ app.layout = dmc.MantineProvider(
                                                 "textAlign": "left",
                                             },
                                         ),
-                                        dcc.Loading(
-                                            id="loading-developers",
-                                            type="circle",
-                                            color="#AC482A",
-                                            children=html.Div(
-                                                id="top_developers-table"
+                                        html.Div(
+                                            dcc.Loading(
+                                                id="loading-developers",
+                                                type="circle",
+                                                color="#AC482A",
+                                                children=html.Div(
+                                                    id="top_developers-table"
+                                                ),
                                             ),
+                                            className="responsive-table-wrapper",
                                         ),
                                         html.Button(
                                             id="top_developers-toggle",
@@ -761,11 +782,14 @@ app.layout = dmc.MantineProvider(
                                                 "textAlign": "left",
                                             },
                                         ),
-                                        dcc.Loading(
-                                            id="loading-models",
-                                            type="circle",
-                                            color="#AC482A",
-                                            children=html.Div(id="top_models-table"),
+                                        html.Div(
+                                            dcc.Loading(
+                                                id="loading-models",
+                                                type="circle",
+                                                color="#AC482A",
+                                                children=html.Div(id="top_models-table"),
+                                            ),
+                                            className="responsive-table-wrapper",
                                         ),
                                         html.Button(
                                             id="top_models-toggle",
@@ -782,10 +806,11 @@ app.layout = dmc.MantineProvider(
                         "borderRadius": "18px",
                         "padding": "32px",
                         "marginTop": "12px",
-                        "marginBottom": "12px",  # reduced from 64px
+                        "marginBottom": "12px",
                         "marginLeft": "50px",
                         "marginRight": "50px",
                     },
+                    className="responsive-tabs",  # <-- add class
                 ),
             ],
             style={
@@ -818,7 +843,7 @@ def _get_filtered_top_n_from_duckdb(
     if group_col == "org_country_single":
         group_expr = """CASE 
             WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-            WHEN org_country_single IN ('International', 'Online') THEN 'International/Online'
+            WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
             ELSE org_country_single
         END"""
     else:
@@ -833,7 +858,7 @@ def _get_filtered_top_n_from_duckdb(
                 {group_expr} AS group_key,
                 CASE 
                     WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-                    WHEN org_country_single IN ('International', 'Online') THEN 'International/Online'
+                    WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
                     ELSE org_country_single
                 END AS org_country_single,
                 author,

assets/styles.css

@@ -123,3 +123,39 @@ button[id^="download-"]:focus {
   transform: scale(1.06);
   outline: none;
 }
+
+@media (max-width: 1150px) {
+    .responsive-main-content {
+        flex-direction: column !important;
+        gap: 16px !important;
+        padding: 18px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
+    .responsive-main-content > div {
+        min-width: 0 !important;
+        width: 100% !important;
+    }
+    .responsive-header {
+        flex-direction: column !important;
+        gap: 12px !important;
+        padding: 12px !important;
+    }
+    .responsive-title-row {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        font-size: 28px !important;
+    }
+    .responsive-intro {
+        margin-left: 12px !important;
+        margin-right: 12px !important;
+    }
+    .responsive-tabs {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        padding: 12px !important;
+    }
+    .responsive-table-wrapper {
+        overflow-x: auto;
+    }
+}

graphs/leaderboard.py

@@ -25,6 +25,8 @@ company_icon_map = {
     "sentence-transformers": "../assets/images/hf.svg",
     "facebook": "../assets/icons/meta.png",
     "openai": "../assets/icons/openai.png",
+    "amazon": "../assets/icons/amazon.png",
+    "microsoft": "../assets/icons/microsoft.png",
 }
 
 country_emoji_fallback = {
@@ -34,14 +36,21 @@ country_emoji_fallback = {
 }
 
 meta_cols_map = {
-    "org_country_single": ["org_country_single"],
-    "author": ["org_country_single", "author", "merged_country_groups_single"],
-    "derived_author": ["org_country_single", "derived_author", "merged_country_groups_single"],
+    "org_country_single": ["org_country_single", "total_downloads"],
+    "author": [
+        "org_country_single",
+        "author",
+        "total_downloads",
+    ],
+    "derived_author": [
+        "org_country_single",
+        "derived_author",
+        "total_downloads",
+    ],
     "model": [
         "org_country_single",
         "author",
         "derived_author",
-        "merged_country_groups_single",
         "merged_modality",
         "total_downloads",
     ],
@@ -137,7 +146,6 @@ def get_metadata_popover_content(icon, name, meta_type):
         "author": f"Author/Organization: {name}",
         "downloads": f"Total downloads: {name}",
         "modality": f"Modality: {name}",
-        "parameters": f"Estimated parameters: {name}",
     }
     return popover_texts.get(meta_type, name)
 
@@ -165,9 +173,7 @@ def chip_with_hovercard(text, bg_color="#F0F0F0", meta_type=None, icon=None):
                     },
                 )
             ),
-            dmc.HoverCardDropdown(
-                dmc.Text(hovercard_content, size="sm")
-            ),
+            dmc.HoverCardDropdown(dmc.Text(hovercard_content, size="sm")),
         ],
     )
 
@@ -187,7 +193,8 @@ def render_chips(metadata_list, chip_color):
                             html.Span(
                                 [
                                     html.Img(
-                                        src=icon, style={"height": "18px", "marginRight": "6px"}
+                                        src=icon,
+                                        style={"height": "18px", "marginRight": "6px"},
                                     ),
                                     name,
                                 ],
@@ -204,13 +211,18 @@ def render_chips(metadata_list, chip_color):
                             )
                         ),
                         dmc.HoverCardDropdown(
-                            dmc.Text(get_metadata_popover_content(icon, name, meta_type), size="sm")
+                            dmc.Text(
+                                get_metadata_popover_content(icon, name, meta_type),
+                                size="sm",
+                            )
                         ),
                     ],
                 )
             )
         else:
-            chips.append(chip_with_hovercard(f"{icon} {name}", chip_color, meta_type, icon))
+            chips.append(
+                chip_with_hovercard(f"{icon} {name}", chip_color, meta_type, icon)
+            )
     return html.Div(
         chips, style={"display": "flex", "flexWrap": "wrap", "justifyContent": "left"}
     )
@@ -282,6 +294,7 @@ def render_table_content(
         ]
     )
 
+
 # Function to get top N leaderboard (now accepts pandas DataFrame from DuckDB query)
 def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggle=True):
     """
@@ -303,7 +316,13 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
         .sum()
         .nlargest(top_n, columns="total_downloads")
         .reset_index()
-        .rename(columns={group_col: "Name", "total_downloads": "Total Value", "percent_of_total": "% of total"})
+        .rename(
+            columns={
+                group_col: "Name",
+                "total_downloads": "Total Value",
+                "percent_of_total": "% of total",
+            }
+        )
     )
 
     # Create a downloadable version of the leaderboard
@@ -316,11 +335,11 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
 
     # 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] = {}
@@ -335,23 +354,22 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     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"
-            # Try countryflag.getflag(), fallback to dictionary if fails
             try:
                 flag_emoji = countryflag.getflag(c)
-                # If countryflag returns empty or None, fallback
                 if not flag_emoji or flag_emoji == c:
                     flag_emoji = country_emoji_fallback.get(c, "🌍")
             except Exception:
                 flag_emoji = country_emoji_fallback.get(c, "🌍")
             chips.append((flag_emoji, c, "country"))
-        
+            # Add downloads chip for country (only once)
+
         # Author - use derived_author_toggle to determine which column
         author_key = "derived_author" if derived_author_toggle else "author"
         for a in meta.get(author_key, []):
@@ -362,41 +380,39 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
                 else:
                     icon = "👤"
             chips.append((icon, a, "author"))
-        
-        # Downloads
-        total_downloads = sum(
-            d for d in meta.get("total_downloads", []) if pd.notna(d)
-        )
-        if total_downloads:
-            chips.append(("⬇️", f"{int(total_downloads):,}", "downloads"))
 
         # Modality
         for m in meta.get("merged_modality", []):
             if pd.notna(m):
                 chips.append(("", m, "modality"))
-        
+
+        # Total downloads
+        for d in meta.get("total_downloads", []):
+            formatted_downloads = format_large_number(d)
+            chips.append(("⬇️", formatted_downloads, "downloads"))
+
         return chips
 
     # Function to create downloadable dataframe metadata
     def build_download_metadata(nm):
         meta = download_map.get(nm, {})
         download_info = {}
-        
+
         for col in meta_cols:
             if col not in meta or not meta[col]:
                 continue
-            
+
             vals = meta.get(col, [])
             if vals:
                 download_info[col] = ", ".join(str(v) for v in vals if pd.notna(v))
             else:
                 download_info[col] = ""
-        
+
         return download_info
 
     # Apply metadata builder to top dataframe
     top["Metadata"] = top["Name"].astype(object).apply(build_metadata)
-    
+
     # Build download dataframe with metadata
     download_info_list = [build_download_metadata(nm) for nm in download_top["Name"]]
     download_info_df = pd.DataFrame(download_info_list)
@@ -405,16 +421,18 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     return top[["Name", "Metadata", "% of total"]], download_top
 
 
-def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None, view="all_downloads"):
+def get_top_n_from_duckdb(
+    con, group_col, top_n=10, time_filter=None, view="all_downloads"
+):
     """
     Query DuckDB directly to get top N entries with minimal data transfer
-    
+
     Args:
         con: DuckDB connection object
         group_col: Column to group by
         top_n: Number of top entries
         time_filter: Optional tuple of (start_timestamp, end_timestamp)
-        
+
     Returns:
         Pandas DataFrame with only the rows needed for top N
     """
@@ -429,7 +447,7 @@ def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None, view="all_
     if group_col == "org_country_single":
         group_expr = """CASE 
             WHEN org_country_single IN ('HF', 'United States of America') THEN 'United States of America'
-            WHEN org_country_single IN ('International', 'Online') THEN 'International/Online'
+            WHEN org_country_single IN ('International', 'Online', 'Online?') THEN 'International/Online'
             ELSE org_country_single
         END"""
     else:
@@ -543,4 +561,16 @@ def get_top_n_from_duckdb(con, group_col, top_n=10, time_filter=None, view="all_
         return con.execute(query).fetchdf()
     except Exception as e:
         print(f"Error querying DuckDB: {e}")
-        return pd.DataFrame()
+        return pd.DataFrame()
+
+
+def format_large_number(n):
+    """Shorten large numbers, e.g. 5,000,000 -> '5 million'."""
+    if n >= 1_000_000_000:
+        return f"{n / 1_000_000_000:.1f} billion"
+    elif n >= 1_000_000:
+        return f"{n / 1_000_000:.1f} million"
+    elif n >= 1_000:
+        return f"{n / 1_000:.1f}k"
+    else:
+        return str(int(n))