dashboard: switch emissions chart from instantaneous rate to cumulative total

The chart was titled "emissions over time" but plotted an instantaneous
rate (kg CO2/hr) -- tiny and nearly flat for nimbus, so with
beginAtZero it visually read as empty. Now integrates the rate
client-side (rectangle rule) into a running total that climbs steadily
even while idle.

Author: cboettig

cmd/static/dashboard.html

@@ -170,6 +170,7 @@ <h2>Models</h2>
 let currentRange = '7d';
 let barMode = 'co2';
 let lastData = null;
+let lastEmissionsTotalGrams = 0;
 
 function chartColors() {
   const light = document.body.classList.contains('light');
@@ -490,7 +491,19 @@ <h2>Models</h2>
   }).join('');
 }
 
-// CO₂/token over time — only points where tokens were being generated.
+// The backend always emits step as one of "5m0s", "1h0m0s", "6h0m0s"
+// (Go's time.Duration.String()) -- parse the h/m/s components present.
+function parseStepSeconds(stepStr) {
+  const h = /(\d+)h/.exec(stepStr);
+  const m = /(\d+)m/.exec(stepStr);
+  const s = /(\d+)s/.exec(stepStr);
+  return (h?+h[1]*3600:0) + (m?+m[1]*60:0) + (s?+s[1]:0);
+}
+
+// Cumulative CO₂ emissions over the selected window — integrates the
+// co2_grams_per_hour rate series using the rectangle rule (rate × step
+// duration), running-summed. Always populated as long as the range has any
+// points, even during idle periods (the total simply grows slowly).
 function renderTimeSeries(data) {
   const pts = data.points || [];
   if (!pts.length) return;
@@ -504,59 +517,49 @@ <h2>Models</h2>
     return d.toLocaleDateString([],{month:'short',day:'numeric'});
   };
 
-  // Use CO₂/token where available; show null (gap) during idle periods
-  const tokenPts  = pts.filter(p => p.co2_mg_per_token > 0);
-  const hasTokens = tokenPts.length > 0;
-
-  const datasets = hasTokens ? [
-    {
-      label: 'Cluster avg CO₂/token (mg)',
-      data: pts.map(p => p.co2_mg_per_token > 0 ? +p.co2_mg_per_token.toFixed(3) : null),
-      borderColor: '#22c55e',
-      backgroundColor: 'rgba(34,197,94,0.08)',
-      fill: true, tension: 0.3, pointRadius: 0, spanGaps: false,
-    },
-  ] : [
-    // Fallback: show CO₂/hr when no token data in range
-    {
-      label: 'CO₂ rate (kg/hr)',
-      data: pts.map(p => +(p.co2_grams_per_hour/1000).toFixed(4)),
-      borderColor: '#6366f1', backgroundColor: 'rgba(99,102,241,0.1)',
+  const stepHours = parseStepSeconds(data.step) / 3600;
+  let running = 0;
+  const cumulativeGrams = pts.map(p => {
+    running += p.co2_grams_per_hour * stepHours;
+    return +running.toFixed(2);
+  });
+  lastEmissionsTotalGrams = running;
+
+  const totalLabel = running >= 1000
+    ? (running/1000).toFixed(2) + ' kg CO₂e'
+    : running.toFixed(1) + ' g CO₂e';
+
+  const chartData = {
+    labels: pts.map(mkLabel),
+    datasets: [{
+      label: 'Cumulative CO₂ (g)',
+      data: cumulativeGrams,
+      borderColor: '#6366f1',
+      backgroundColor: 'rgba(99,102,241,0.1)',
       fill: true, tension: 0.3, pointRadius: 0,
-    }
-  ];
-
-  const avgToken = hasTokens
-    ? (tokenPts.reduce((s,p)=>s+p.co2_mg_per_token,0)/tokenPts.length).toFixed(2) + ' mg CO₂/token avg'
-    : 'no active generation in range — showing CO₂/hr';
-
-  const yTitle = hasTokens ? 'mg CO₂ / token' : 'kg CO₂ / hr';
-  const tooltipFmt = hasTokens
-    ? c => ` ${c.dataset.label}: ${c.parsed.y != null ? c.parsed.y.toFixed(3) : '—'} mg/token`
-    : c => ` ${c.parsed.y.toFixed(3)} kg CO₂/hr`;
-
-  const chartData = { labels: pts.map(mkLabel), datasets };
+    }],
+  };
   const lc = chartColors();
   const options = {
     responsive: true,
     interaction: { mode:'index', intersect:false },
     plugins: {
       legend: { labels:{ color:lc.legend, font:{size:10}, boxWidth:12 } },
-      title: { display:true, text:`${rangeLabel} — ${avgToken}`,
+      title: { display:true, text:`${rangeLabel} — Total: ${totalLabel}`,
                color:lc.tick, font:{size:11, weight:'normal'}, padding:{bottom:8} },
-      tooltip: { callbacks: { label: tooltipFmt } }
+      tooltip: { callbacks: { label: c => ` ${c.parsed.y.toFixed(2)} g CO₂ cumulative` } }
     },
     scales: {
       x: { ticks:{color:lc.tick,font:{size:10},maxTicksLimit:10}, grid:{color:lc.grid} },
       y: { ticks:{color:lc.tick,font:{size:10}}, grid:{color:lc.grid},
-           title:{display:true, text:yTitle, color:lc.tick, font:{size:10}},
+           title:{display:true, text:'g CO₂ (cumulative)', color:lc.tick, font:{size:10}},
            beginAtZero:true }
     }
   };
 
   if (lineChart) {
     lineChart.data = chartData;
-    lineChart.options.plugins.title.text = `${rangeLabel} — ${avgToken}`;
+    lineChart.options.plugins.title.text = `${rangeLabel} — Total: ${totalLabel}`;
     lineChart.update('none');
   } else {
     lineChart = new Chart(document.getElementById('lineChart'), { type:'line', data:chartData, options });

cmd/static/methodology.html

@@ -348,18 +348,21 @@ <h3>Energy per token across models (J/token view)</h3>
   watts, tok/s, and GPU hardware for context.</p>
 </div>
 
-<h3>Cumulative CO₂ and cluster CO₂/token (time-series view)</h3>
+<h3>Cumulative CO₂ emissions (time-series view)</h3>
 <p>
-  For the time-series charts, we query the Prometheus range API at adaptive resolution
-  (5-minute steps for 24 h, hourly for 7 d, 6-hourly for 30 d),
-  apply the same per-node intensity to each sample, and integrate:
+  The backend's timeseries endpoint queries the Prometheus range API at
+  adaptive resolution (5-minute steps for 24 h, hourly for 7 d, 6-hourly for
+  30 d) and returns <code>co2_grams_per_hour</code> at each step (already
+  computed server-side as <code>power_watts × 0.198</code>, nimbus's fixed
+  grid intensity). The dashboard then integrates that rate client-side using
+  the rectangle rule, running-summed over the selected window:
+</p>
+<pre><code>total_g = Σ (co2_grams_per_hour_i × step_hours)</code></pre>
+<p>
+  This total only grows — it never resets within a window — so the chart
+  climbs steadily even while nimbus is mostly idle, rather than looking flat
+  or empty the way a tiny, nearly-constant rate does.
 </p>
-<pre><code>CO₂_kg_cumulative = Σ (P_watts_i × intensity_i × Δt_hrs / 1000)
-
--- Total token rate used as denominator for cluster-wide CO₂/token:
-sum by (namespace, container) (
-  rate(vllm:generation_tokens_total[5m]) + rate(vllm:prompt_tokens_total[5m])
-)</code></pre>
 
 <h2>Limitations and Future Work</h2>
 <ul style="color:#cbd5e1; padding-left:1.5rem; margin:0.5rem 0 1rem;">