Merge pull request #12 from opensource-observer/styling-fixes

ccerv1 · web-flow · commit 9d4d487d342f · 2026-03-17T16:47:16.000-04:00
chore: document styling and apply some small fixes to insights notebooks
diff --git a/notebooks/claude.md b/notebooks/claude.md
@@ -37,9 +37,24 @@ Never pin a marimo version. The top of every notebook file must have:
 
 ```python
 __generated_with = "unknown"
-app = marimo.App(width="full")
+app = marimo.App(width="full", css_file="styles/root.css")
 ```
 
+The `css_file` path is relative to the notebook file. Use the correct variant:
+- Root notebooks (`notebooks/*.py`): `css_file="styles/root.css"`
+- Data notebooks (`notebooks/data/**/*.py`): `css_file="../../styles/data.css"`
+- Insight notebooks (`notebooks/insights/*.py`): `css_file="../styles/insights.css"`
+
+CSS is built from `notebooks/styles/base.css` + variant partials by `scripts/build_css.py`. Run `uv run scripts/build_css.py` after editing any CSS source file.
+
+### Filter ecosystem queries
+
+When querying `oso.stg_opendevdata__ecosystems` and listing/ranking multiple ecosystems, always add:
+```sql
+WHERE e.is_crypto = 1 AND e.is_category = 0
+```
+This filters out ODD's internal category ecosystems. Not needed when filtering by a specific ecosystem name (e.g., `WHERE e.name = 'Ethereum'`).
+
 ### Use Trino SQL
 All queries run against a Trino data warehouse via pyoso. Write Trino-compatible SQL:
 - `DATE_TRUNC('month', dt)` not `DATE_TRUNC(dt, MONTH)`
diff --git a/notebooks/insights/defi-builder-journeys.py b/notebooks/insights/defi-builder-journeys.py
@@ -1328,7 +1328,8 @@ def transform_pipeline_composition(
 
 
 @app.cell(hide_code=True)
-def section_conclusion(mo):
+def section_conclusion(mo, pipeline_by_eco):
+    # pipeline_by_eco dependency ensures this renders after all content cells
     mo.accordion({
         "Metrics & Definitions": mo.md("""
         - Ecosystem Classification:
diff --git a/notebooks/insights/developer-lifecycle.py b/notebooks/insights/developer-lifecycle.py
@@ -152,6 +152,11 @@ def _categorize(label):
         'body{font-size:14px;color:#0f172a;padding:4px}'
         '.ddp-select{padding:4px 8px;border:1px solid #e2e8f0;border-radius:4px;font-size:0.8125em;color:#0f172a;background:#fff;cursor:pointer;outline:none}'
         '.ddp-select-label{font-size:0.6875em;color:#64748b;display:block;margin-bottom:2px}'
+        '.ddp-stat-row{display:flex;gap:12px;margin:12px 0}'
+        '.ddp-stat-box{border:1px solid #e2e8f0;border-radius:6px;padding:12px 16px;flex:1;min-width:120px}'
+        '.ddp-stat-value{font-size:1.5em;font-weight:600;letter-spacing:-0.02em;color:#0f172a;line-height:1.2}'
+        '.ddp-stat-label{font-size:0.6875em;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px}'
+        '.ddp-stat-caption{font-size:0.75em;color:#64748b;margin-top:4px}'
         '</style></head><body>'
         f'{_sel_html}'
         '<div id="stats" style="margin-bottom:12px"></div>'
@@ -251,6 +256,11 @@ def ecosystem_comparison_tabs(ACTIVE_LABELS, CHURNED_LABELS, DORMANT_LABELS, FT_
         'body{font-size:14px;color:#0f172a;padding:4px}'
         '.ddp-select{padding:4px 8px;border:1px solid #e2e8f0;border-radius:4px;font-size:0.8125em;color:#0f172a;background:#fff;cursor:pointer;outline:none}'
         '.ddp-select-label{font-size:0.6875em;color:#64748b;display:block;margin-bottom:2px}'
+        '.ddp-stat-row{display:flex;gap:12px;margin:12px 0}'
+        '.ddp-stat-box{border:1px solid #e2e8f0;border-radius:6px;padding:12px 16px;flex:1;min-width:120px}'
+        '.ddp-stat-value{font-size:1.5em;font-weight:600;letter-spacing:-0.02em;color:#0f172a;line-height:1.2}'
+        '.ddp-stat-label{font-size:0.6875em;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px}'
+        '.ddp-stat-caption{font-size:0.75em;color:#64748b;margin-top:4px}'
         '</style></head><body>'
         f'{_sel_html}'
         '<div id="chart"></div>'
diff --git a/notebooks/insights/developer-report-2025.py b/notebooks/insights/developer-report-2025.py
@@ -11,7 +11,7 @@ def header_title(mo):
 
 
 @app.cell(hide_code=True)
-def header_accordion(mo):
+def header_accordion(mo, _report_complete):
     mo.accordion({
         "Metrics & Definitions": mo.md("""
     - **Time period**: January 2015 to December 2025 (full historical data)
@@ -1634,7 +1634,8 @@ def comparison_chart(df_all, mo, pd):
     )
     _src = _html_mod.escape(_inner, quote=True)
     mo.Html(f'<iframe srcdoc="{_src}" class="ddp-chart-frame" scrolling="no"></iframe>')
-    return
+    _report_complete = True
+    return (_report_complete,)
 
 
 if __name__ == "__main__":
diff --git a/notebooks/insights/developer-retention.py b/notebooks/insights/developer-retention.py
@@ -262,6 +262,11 @@ def _stat(value, label, caption=''):
         'body{font-size:14px;color:#0f172a;padding:4px}'
         '.ddp-select{padding:4px 8px;border:1px solid #e2e8f0;border-radius:4px;font-size:0.8125em;color:#0f172a;background:#fff;cursor:pointer;outline:none}'
         '.ddp-select-label{font-size:0.6875em;color:#64748b;display:block;margin-bottom:2px}'
+        '.ddp-stat-row{display:flex;gap:12px;margin:12px 0}'
+        '.ddp-stat-box{border:1px solid #e2e8f0;border-radius:6px;padding:12px 16px;flex:1;min-width:120px}'
+        '.ddp-stat-value{font-size:1.5em;font-weight:600;letter-spacing:-0.02em;color:#0f172a;line-height:1.2}'
+        '.ddp-stat-label{font-size:0.6875em;font-weight:500;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:4px}'
+        '.ddp-stat-caption{font-size:0.75em;color:#64748b;margin-top:4px}'
         '</style></head><body>'
         f'{_sel_html}'
         '<div id="stats" style="margin-bottom:12px"></div>'
