cleanup

app.py

@@ -6,7 +6,7 @@ import time
 from graphs.leaderboard import (
     button_style,
     get_top_n_leaderboard,
-    render_table_content,
+    render_table_content
 )
 from dash_iconify import DashIconify
 
@@ -58,9 +58,9 @@ def load_parquet_to_duckdb(con, parquet_url, view_name):
 con = duckdb.connect(database=":memory:", read_only=False)
 
 # Load parquet files from Hugging Face using DuckDB
-HF_DATASET_ID = "emsesc/open_model_evolution_data"
-hf_parquet_url_1 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
-hf_parquet_url_2 = "https://huggingface.co/datasets/emsesc/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
+HF_DATASET_ID = "mmpr/open_model_evolution_data"
+hf_parquet_url_1 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/all_downloads_with_annotations.parquet"
+hf_parquet_url_2 = "https://huggingface.co/datasets/mmpr/open_model_evolution_data/resolve/main/one_year_rolling.parquet"
 
 print(f"Attempting to connect to dataset from Hugging Face Hub: {HF_DATASET_ID}")
 try:
@@ -196,71 +196,32 @@ app.layout = dmc.MantineProvider(
     },
     children=[
         dcc.Store(id="selected-view", data="all_downloads"),
-        dcc.Store(
-            id="model-attribution-type", data="uploader"
-        ),
+        dcc.Store(id="model-attribution-type", data="uploader"),
         html.Div(
             [
                 # Header
                 html.Div(
                     [
-                        # --- Replace title/subtitle with LIVE button and last updated ---
                         html.Div(
                             [
                                 html.Span(
                                     [
                                         html.Span(
-                                            style={
-                                                "display": "inline-block",
-                                                "width": "14px",
-                                                "height": "14px",
-                                                "borderRadius": "50%",
-                                                "backgroundColor": "#AC482A",
-                                                "marginRight": "8px",
-                                                "verticalAlign": "middle",
-                                                "boxShadow": "0 0 6px #AC482A",
-                                            },
+                                            className="live-dot",
                                         ),
                                         html.Span(
                                             "LIVE",
-                                            style={
-                                                "backgroundColor": "transparent",
-                                                "color": "#fff",
-                                                "fontWeight": "700",
-                                                "fontSize": "18px",
-                                                "letterSpacing": "1px",
-                                                "verticalAlign": "middle",
-                                                "display": "inline-block",
-                                            },
+                                            className="live-label",
                                         ),
                                     ],
-                                    style={
-                                        "display": "inline-flex",
-                                        "alignItems": "center",
-                                        "marginRight": "16px",
-                                    },
+                                    className="live-row",
                                 ),
                                 html.Span(
                                     f"Last updated: {get_last_updated()}",
-                                    style={
-                                        "backgroundColor": "#1B344D",
-                                        "color": "#FFFFFF",
-                                        "fontWeight": "500",
-                                        "fontSize": "15px",
-                                        "verticalAlign": "middle",
-                                        "display": "inline-block",
-                                        "borderRadius": "8px",
-                                        "padding": "4px 14px",
-                                        "boxShadow": "0 1px 4px rgba(8,32,48,0.10)",
-                                        "marginLeft": "0px",
-                                    },
+                                    className="last-updated",
                                 ),
                             ],
-                            style={
-                                "display": "flex",
-                                "alignItems": "center",
-                                "gap": "12px",
-                            },
+                            className="header-status-row",
                         ),
                         html.Div(
                             [
@@ -268,36 +229,19 @@ app.layout = dmc.MantineProvider(
                                     children=[
                                         html.Img(
                                             src="assets/images/dpi.svg",
-                                            style={
-                                                "height": "28px",
-                                                "verticalAlign": "middle",
-                                                "paddingRight": "8px",
-                                            },
+                                            className="header-logo-img",
                                         ),
                                         "Data Provenance Initiative",
                                     ],
                                     href="https://www.dataprovenance.org/",
                                     target="_blank",
                                     className="no-bg-link header-link",
-                                    style={
-                                        "display": "inline-block",
-                                        "padding": "6px 14px",
-                                        "fontSize": 13,
-                                        "color": "#FFFFFF",  # white on dark header
-                                        "borderRadius": "18px",
-                                        "fontWeight": "700",
-                                        "textDecoration": "none",
-                                        "marginRight": "12px",
-                                    },
                                 ),
                                 html.A(
                                     children=[
                                         html.Img(
                                             src="assets/images/hf.svg",
-                                            style={
-                                                "height": "30px",
-                                                "verticalAlign": "middle",
-                                            },
+                                            className="header-logo-img",
                                         ),
                                         html.Span(
                                             "Hugging Face",
@@ -307,15 +251,6 @@ app.layout = dmc.MantineProvider(
                                     href="https://huggingface.co/",
                                     target="_blank",
                                     className="no-bg-link header-link",
-                                    style={
-                                        "display": "inline-flex",
-                                        "padding": "6px 14px",
-                                        "alignItems": "center",
-                                        "color": "#FFFFFF",
-                                        "borderRadius": "18px",
-                                        "textDecoration": "none",
-                                        "marginRight": "12px",
-                                    },
                                 ),
                                 html.A(
                                     children=[
@@ -327,21 +262,9 @@ app.layout = dmc.MantineProvider(
                                     href="https://www.google.com/",
                                     target="_blank",
                                     className="no-bg-link header-link paper-link",
-                                    style={
-                                        "display": "inline-flex",
-                                        "alignItems": "center",
-                                        "padding": "6px 12px",
-                                        "fontSize": 14,
-                                        "margin": "0 auto",
-                                        "backgroundColor": "#AC482A",
-                                        "color": "#FFFFFF",
-                                        "borderRadius": "5px",
-                                        "textDecoration": "none",
-                                        "fontWeight": "700",
-                                    },
                                 ),
                             ],
-                            style={"display": "flex", "alignItems": "center"},
+                            className="header-links-row",
                         ),
                     ],
                     style={
@@ -354,7 +277,6 @@ app.layout = dmc.MantineProvider(
                     },
                     className="responsive-header",  # <-- add class
                 ),
-                # Title row with "live" button
                 html.Div(
                     [
                         html.Span(
@@ -378,13 +300,12 @@ app.layout = dmc.MantineProvider(
                     },
                     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 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
+                            href="https://www.google.com/",
                             target="_blank",
                             style={
                                 "color": "#AC482A",
@@ -403,7 +324,6 @@ app.layout = dmc.MantineProvider(
                     },
                     className="responsive-intro",  # <-- add class
                 ),
-                # Main content (filters + tabs)
                 html.Div(
                     children=[
                         html.Div(
@@ -442,18 +362,9 @@ app.layout = dmc.MantineProvider(
                                                 ],
                                             ),
                                         ],
-                                        style={
-                                            "display": "inline-flex",
-                                            "alignItems": "center",
-                                        },
+                                        className="filter-label-row",
                                     ),
-                                    style={
-                                        "fontWeight": "700",
-                                        "marginBottom": 8,
-                                        "fontSize": 14,
-                                        "display": "flex",
-                                        "alignItems": "center",
-                                    },
+                                    className="filter-label-container",
                                 ),
                                 html.Div(
                                     [
@@ -463,42 +374,23 @@ app.layout = dmc.MantineProvider(
                                             color="#AC482A",
                                             transitionDuration=200,
                                             data=[
-                                                {
-                                                    "value": "all-downloads",
-                                                    "label": "All Downloads",
-                                                },
-                                                {
-                                                    "value": "filtered-downloads",
-                                                    "label": html.Span(
-                                                        [
-                                                            "Filtered Downloads",
-                                                        ]
-                                                    ),
-                                                },
+                                                {"value": "all-downloads", "label": "All Downloads"},
+                                                {"value": "filtered-downloads", "label": html.Span(["Filtered Downloads"])},
                                             ],
                                             mb=10,
                                         ),
                                     ],
-                                    style={"display": "flex", "alignItems": "center"},
+                                    className="filter-segmented-row",
                                 ),
                                 html.Div(
                                     "Choose whether to count all downloads, or only downloads up to one year from model creation.",
-                                    style={
-                                        "fontSize": 13,
-                                        "color": "#555",
-                                        "marginBottom": "12px",
-                                    },
+                                    className="filter-description",
                                 ),
-                                # New segmented control below the first one
                                 html.Div(
                                     [
                                         html.Div(
                                             "Model Attribution",
-                                            style={
-                                                "fontWeight": "700",
-                                                "marginBottom": 8,
-                                                "fontSize": 14,
-                                            },
+                                            className="filter-label",
                                         ),
                                         dmc.SegmentedControl(
                                             id="model-attribution-segmented",
@@ -506,59 +398,36 @@ app.layout = dmc.MantineProvider(
                                             color="#AC482A",
                                             transitionDuration=200,
                                             data=[
-                                                {
-                                                    "value": "uploader",
-                                                    "label": "Model Uploader",
-                                                },
-                                                {
-                                                    "value": "original_creator",
-                                                    "label": "Original Model Creator",
-                                                },
+                                                {"value": "uploader", "label": "Model Uploader"},
+                                                {"value": "original_creator", "label": "Original Model Creator"},
                                             ],
                                             mb=10,
                                         ),
                                         html.Div(
                                             "Toggle between having downloads attributed to the account that uploaded the model, or the account that uploaded the model that this was originally derived from.",
-                                            style={
-                                                "fontSize": 13,
-                                                "color": "#555",
-                                                "marginBottom": "12px",
-                                            },
+                                            className="filter-description",
                                         ),
                                     ],
                                     style={"marginTop": "10px"},
                                 ),
                                 html.Span(
                                     id="global-toggle-status",
-                                    style={
-                                        "marginLeft": "8px",
-                                        "display": "inline-block",
-                                        "marginTop": 6,
-                                    },
+                                    className="global-toggle-status",
                                 ),
                             ],
-                            style={"flex": 1, "minWidth": "220px"},
+                            className="main-content-left",
                         ),
                         html.Div(
                             [
                                 html.Div(
                                     "Download Date Range",
-                                    style={
-                                        "fontWeight": "700",
-                                        "marginBottom": 8,
-                                        "fontSize": 14,
-                                    },
+                                    className="filter-label",
                                 ),
                                 time_slider,
                                 html.Div(
                                     "Adjust the time range to filter leaderboard results by when models were downloaded by users.",
-                                    style={
-                                        "fontSize": 13,
-                                        "color": "#555",
-                                        "marginTop": "32px",  # increased from 24px
-                                    },
+                                    className="filter-description filter-description-margin",
                                 ),
-                                # Tip section
                                 html.Div(
                                     [
                                         html.Div(
@@ -574,77 +443,40 @@ app.layout = dmc.MantineProvider(
                                                 ),
                                                 html.Span("Tip"),
                                             ],
-                                            style={
-                                                "fontWeight": "700",
-                                                "fontSize": 15,
-                                                "marginBottom": "6px",
-                                                "color": "#082030",
-                                                "display": "flex",
-                                                "alignItems": "center",
-                                            },
+                                            className="tip-title",
                                         ),
                                         html.Div(
                                             [
                                                 "Try switching between ",
                                                 html.Span(
                                                     "All Downloads",
-                                                    style={
-                                                        "fontWeight": "600",
-                                                        "color": "#AC482A",
-                                                    },
+                                                    className="tip-highlight",
                                                 ),
                                                 " and ",
                                                 html.Span(
                                                     "Filtered Downloads",
-                                                    style={
-                                                        "fontWeight": "600",
-                                                        "color": "#AC482A",
-                                                    },
+                                                    className="tip-highlight",
                                                 ),
                                                 " to compare net popularity (but many duplicate, unused downloads) versus more immediate interest as models are released. ",
                                                 "You can also toggle between ",
                                                 html.Span(
                                                     "Model Uploader",
-                                                    style={
-                                                        "fontWeight": "600",
-                                                        "color": "#AC482A",
-                                                    },
+                                                    className="tip-highlight",
                                                 ),
                                                 " and ",
                                                 html.Span(
                                                     "Original Model Creator",
-                                                    style={
-                                                        "fontWeight": "600",
-                                                        "color": "#AC482A",
-                                                    },
+                                                    className="tip-highlight",
                                                 ),
                                                 " to see how attribution affects perceived popularity.",
                                             ],
-                                            style={
-                                                "fontSize": 13,
-                                                "color": "#082030",
-                                                "lineHeight": "1.6",
-                                            },
+                                            className="tip-description",
                                         ),
                                     ],
-                                    style={
-                                        "backgroundColor": "#F5ECE6",
-                                        "borderRadius": "14px",
-                                        "padding": "18px 20px",
-                                        "marginTop": "28px",
-                                        "boxShadow": "0 1px 4px rgba(8,32,48,0.04)",
-                                        "border": "1px solid #f0e3d6",
-                                    },
+                                    className="tip-section",
                                 ),
                             ],
-                            style={
-                                "flex": 2,
-                                "minWidth": "320px",
-                                "display": "flex",
-                                "flexDirection": "column",
-                                "justifyContent": "center",
-                                "height": "100%",
-                            },
+                            className="main-content-right",
                         ),
                     ],
                     style={
@@ -684,13 +516,14 @@ app.layout = dmc.MantineProvider(
                                     },
                                     children=[
                                         html.Div(
-                                            children="The country leaderboard shows how downloads are distributed across different nations, highlighting which countries are leading in model usage and adoption.",
-                                            style={
-                                                "fontSize": 14,
-                                                "marginTop": 18,
-                                                "marginBottom": 12,
-                                                "textAlign": "left",
-                                            },
+                                            children=[
+                                                "The country leaderboard shows how downloads are distributed across different nations, highlighting which countries are leading in model usage and adoption. The metadata includes the ",
+                                                html.Span("country", className="meta-var"),
+                                                " and ",
+                                                html.Span("number of user downloads", className="meta-var"),
+                                                ".",
+                                            ],
+                                            className="tab-description",
                                         ),
                                         html.Div(
                                             dcc.Loading(
@@ -728,13 +561,16 @@ app.layout = dmc.MantineProvider(
                                     },
                                     children=[
                                         html.Div(
-                                            children="The developer leaderboard highlights the most influential model creators on Hugging Face, showcasing which developers have garnered the highest download counts for their models.",
-                                            style={
-                                                "fontSize": 14,
-                                                "marginTop": 18,
-                                                "marginBottom": 12,
-                                                "textAlign": "left",
-                                            },
+                                            children=[
+                                                "The developer leaderboard highlights the most influential model creators on Hugging Face, showcasing which developers have garnered the highest download counts for their models. The metadata includes the ",
+                                                html.Span("developer name", className="meta-var"),
+                                                ", ",
+                                                html.Span("number of user downloads", className="meta-var"),
+                                                ", and the ",
+                                                html.Span("country", className="meta-var"),
+                                                ".",
+                                            ],
+                                            className="tab-description",
                                         ),
                                         html.Div(
                                             dcc.Loading(
@@ -774,13 +610,18 @@ app.layout = dmc.MantineProvider(
                                     },
                                     children=[
                                         html.Div(
-                                            children="The model leaderboard showcases the most popular models on Hugging Face based on download counts, highlighting which models are driving adoption in the open model ecosystem.",
-                                            style={
-                                                "fontSize": 14,
-                                                "marginTop": 18,
-                                                "marginBottom": 12,
-                                                "textAlign": "left",
-                                            },
+                                            children=[
+                                                "The model leaderboard ranks individual models based on their download counts, revealing which models are most popular among users on Hugging Face. The metadata includes the ",
+                                                html.Span("model name", className="meta-var"),
+                                                ", ",
+                                                html.Span("number of user downloads", className="meta-var"),
+                                                ", the ",
+                                                html.Span("developer", className="meta-var"),
+                                                ", and ",
+                                                html.Span("modality", className="meta-var"),
+                                                " (the input and output types of the model).",
+                                            ],
+                                            className="tab-description",
                                         ),
                                         html.Div(
                                             dcc.Loading(

assets/styles.css

@@ -51,15 +51,21 @@
 .paper-link {
   position: relative; /* needed for positioning the arrow */
   overflow: visible;
+  display: inline-flex !important;
+  align-items: center !important;
+  padding: 6px 12px !important;
+  font-size: 14px !important;
+  margin: 0 auto !important;
   background-color: #AC482A !important; /* restore previous button color */
   color: #FFFFFF !important;
-  padding: 10px 20px; /* ensure spacing matches inline styles */
-  border-radius: 5px;
-  font-weight: 700;
-  display: inline-flex;
-  align-items: center;
+  border-radius: 5px !important;
   text-decoration: none !important;
+  font-weight: 700 !important;
   transition: transform var(--default-transition-duration, .15s) var(--default-transition-timing-function, cubic-bezier(.4,0,.2,1)), background-color var(--default-transition-duration, .15s);
+  max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Small arrow placed inline to the right of the text */
@@ -124,6 +130,169 @@ button[id^="download-"]:focus {
   outline: none;
 }
 
+.chip-hover-darken {
+  transition: background-color 0.15s;
+}
+.chip-hover-darken:hover,
+.chip-hover-darken:focus {
+  background-color: #e1f2fd !important; /* slightly darker than #F0F0F0 */
+}
+
+/* Header status row */
+.header-status-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.live-row {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 16px;
+}
+.live-dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: #AC482A;
+  margin-right: 8px;
+  vertical-align: middle;
+  box-shadow: 0 0 6px #AC482A;
+}
+.live-label {
+  background-color: transparent;
+  color: #fff;
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: 1px;
+  vertical-align: middle;
+  display: inline-block;
+}
+.last-updated {
+  background-color: #1B344D;
+  color: #FFFFFF;
+  font-weight: 500;
+  font-size: 15px;
+  vertical-align: middle;
+  display: inline-block;
+  border-radius: 8px;
+  padding: 4px 14px;
+  box-shadow: 0 1px 4px rgba(8,32,48,0.10);
+  margin-left: 0px;
+}
+.header-links-row {
+  display: flex;
+  align-items: center;
+}
+.header-link {
+  display: inline-flex !important;
+  padding: 6px 14px !important;
+  font-size: 13px !important;
+  color: #FFFFFF !important;
+  border-radius: 18px !important;
+  font-weight: 700 !important;
+  text-decoration: none !important;
+  margin-right: 12px !important;
+  align-items: center !important;
+}
+.header-logo-img {
+  height: 28px;
+  vertical-align: middle;
+  padding-right: 8px;
+}
+.main-title {
+  font-size: 40px;
+  font-weight: 700;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.intro-paper-link {
+  color: #AC482A;
+  font-weight: 700;
+  text-decoration: underline;
+}
+.filter-label-row {
+  display: inline-flex;
+  align-items: center;
+}
+.filter-label-container {
+  font-weight: 700;
+  margin-bottom: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+.filter-segmented-row {
+  display: flex;
+  align-items: center;
+}
+.filter-label {
+  font-weight: 700;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+.filter-description {
+  font-size: 13px;
+  color: #555;
+  margin-bottom: 12px;
+}
+.filter-description-margin {
+  margin-top: 32px !important;
+}
+.global-toggle-status {
+  margin-left: 8px;
+  display: inline-block;
+  margin-top: 6px;
+}
+.main-content-left {
+  flex: 1;
+  min-width: 220px;
+}
+.main-content-right {
+  flex: 2;
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+.tip-section {
+  background-color: #F5ECE6;
+  border-radius: 14px;
+  padding: 18px 20px;
+  margin-top: 28px;
+  box-shadow: 0 1px 4px rgba(8,32,48,0.04);
+  border: 1px solid #f0e3d6;
+}
+.tip-title {
+  font-weight: 700;
+  font-size: 15px;
+  margin-bottom: 6px;
+  color: #082030;
+  display: flex;
+  align-items: center;
+}
+.tip-highlight {
+  font-weight: 600;
+  color: #AC482A;
+}
+.tip-description {
+  font-size: 13px;
+  color: #082030;
+  line-height: 1.6;
+}
+.tab-description {
+  font-size: 14px;
+  margin-top: 18px;
+  margin-bottom: 12px;
+  text-align: left;
+}
+.meta-var {
+  font-weight: bold;
+  color: #082030;
+}
+
 @media (max-width: 1150px) {
     .responsive-main-content {
         flex-direction: column !important;
@@ -140,6 +309,30 @@ button[id^="download-"]:focus {
         flex-direction: column !important;
         gap: 12px !important;
         padding: 12px !important;
+        width: 100vw !important;
+        box-sizing: border-box !important;
+    }
+    /* Fix header link squishing: stack links vertically and center them */
+    .responsive-header .header-link {
+        display: flex !important;
+        flex-direction: row !important;
+        align-items: center !important;
+        justify-content: center !important;
+        margin-bottom: 8px !important;
+        width: 100% !important;
+        min-width: 0 !important;
+        font-size: 15px !important;
+        flex-wrap: wrap !important;
+    }
+    .responsive-header > div:last-child {
+        flex-direction: column !important;
+        align-items: center !important;
+        gap: 8px !important;
+        width: 100% !important;
+    }
+    .responsive-header .header-link img {
+        margin-bottom: 0 !important;
+        margin-right: 8px !important;
     }
     .responsive-title-row {
         margin-left: 0 !important;

graphs/leaderboard.py

@@ -154,7 +154,7 @@ def get_metadata_popover_content(icon, name, meta_type):
 def chip_with_hovercard(text, bg_color="#F0F0F0", meta_type=None, icon=None):
     hovercard_content = get_metadata_popover_content(icon, text, meta_type)
     return dmc.HoverCard(
-        width=220,
+        width="auto",
         shadow="md",
         position="top",
         children=[
@@ -170,7 +170,10 @@ def chip_with_hovercard(text, bg_color="#F0F0F0", meta_type=None, icon=None):
                         "alignItems": "center",
                         "fontSize": "14px",
                         "cursor": "pointer",
+                        "transition": "background-color 0.15s",
                     },
+                    # Add a class for hover effect
+                    className="chip-hover-darken"
                 )
             ),
             dmc.HoverCardDropdown(dmc.Text(hovercard_content, size="sm")),
@@ -330,9 +333,6 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     download_top["Total Value"] = download_top["Total Value"].astype(int)
     download_top["% of total"] = download_top["% of total"].round(2)
 
-    # Replace "User" in names
-    top["Name"] = top["Name"].replace("User", "user")
-
     # All relevant metadata columns
     meta_cols = meta_cols_map.get(group_col, [])
 
@@ -413,6 +413,9 @@ def get_top_n_leaderboard(filtered_df, group_col, top_n=10, derived_author_toggl
     # Apply metadata builder to top dataframe
     top["Metadata"] = top["Name"].astype(object).apply(build_metadata)
 
+    # Capitalize "user" back to "User" for display
+    top["Name"] = top["Name"].replace("user", "User")
+
     # 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)