From a14ec8631c2a6b81879cce8a2752977eb2bb5e5e Mon Sep 17 00:00:00 2001
From: Michael Chus <mike@mchus.pro>
Date: Sun, 5 Apr 2026 11:52:32 +0300
Subject: [PATCH] Persist GPU chart mode and expand GPU charts

---
 audit/internal/webui/pages.go  | 32 ++++++++++++++++++++---
 audit/internal/webui/server.go | 46 +++++++++++++++++++++++-----------
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/audit/internal/webui/pages.go b/audit/internal/webui/pages.go
index 1323324..cb2bdfc 100644
--- a/audit/internal/webui/pages.go
+++ b/audit/internal/webui/pages.go
@@ -553,6 +553,21 @@ func renderMetrics() string {
 
 <script>
 let gpuChartKey = '';
+const gpuChartModeStorageKey = 'bee.metrics.gpuChartMode';
+
+function loadGPUChartModePreference() {
+  try {
+    return sessionStorage.getItem(gpuChartModeStorageKey) === 'per-gpu';
+  } catch (_) {
+    return false;
+  }
+}
+
+function saveGPUChartModePreference(perGPU) {
+  try {
+    sessionStorage.setItem(gpuChartModeStorageKey, perGPU ? 'per-gpu' : 'per-metric');
+  } catch (_) {}
+}
 
 function refreshChartImage(el) {
   if (!el || el.dataset.loading === '1') return;
@@ -633,10 +648,19 @@ function loadMetricsLayout() {
   fetch('/api/metrics/latest').then(function(r) { return r.json(); }).then(syncMetricsLayout).catch(function() {});
 }
 
-document.getElementById('gpu-chart-toggle').addEventListener('change', function() {
-  applyGPUChartMode();
-  refreshCharts();
-});
+const gpuChartToggle = document.getElementById('gpu-chart-toggle');
+if (gpuChartToggle) {
+  gpuChartToggle.checked = loadGPUChartModePreference();
+}
+applyGPUChartMode();
+
+if (gpuChartToggle) {
+  gpuChartToggle.addEventListener('change', function() {
+    saveGPUChartModePreference(!!gpuChartToggle.checked);
+    applyGPUChartMode();
+    refreshCharts();
+  });
+}
 
 loadMetricsLayout();
 setInterval(refreshCharts, 3000);
diff --git a/audit/internal/webui/server.go b/audit/internal/webui/server.go
index 4948bf5..f95da74 100644
--- a/audit/internal/webui/server.go
+++ b/audit/internal/webui/server.go
@@ -581,7 +581,7 @@ func (h *handler) handleMetricsChartSVG(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	buf, err := renderChartSVG(title, datasets, names, labels, yMin, yMax)
+	buf, err := renderChartSVGWithHeight(title, datasets, names, labels, yMin, yMax, chartCanvasHeightForPath(path, len(names)))
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -1034,11 +1034,11 @@ func drawGPUOverviewChartSVG(title string, labels []string, series []gpuOverview
 	}
 	const (
 		width      = 1400
-		height     = 420
+		height     = 840
 		plotLeft   = 180
 		plotRight  = 1220
-		plotTop    = 74
-		plotBottom = 292
+		plotTop    = 96
+		plotBottom = 602
 	)
 	const (
 		leftOuterAxis  = 72
@@ -1093,10 +1093,10 @@ func drawGPUOverviewChartSVG(title string, labels []string, series []gpuOverview
 	var b strings.Builder
 	b.WriteString(fmt.Sprintf(`<svg xmlns="http://www.w3.org/2000/svg" width="%d" height="%d" viewBox="0 0 %d %d">`, width, height, width, height))
 	b.WriteString("\n")
-	b.WriteString(`<rect width="100%" height="100%" rx="10" ry="10" fill="#111217" stroke="#2f3440"/>` + "\n")
-	b.WriteString(`<text x="700" y="28" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="700" fill="#f5f7fa">` + sanitizeChartText(title) + `</text>` + "\n")
+	b.WriteString(`<rect width="100%" height="100%" rx="10" ry="10" fill="#ffffff" stroke="#d7e0ea"/>` + "\n")
+	b.WriteString(`<text x="700" y="28" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="700" fill="#1f2937">` + sanitizeChartText(title) + `</text>` + "\n")
 
-	b.WriteString(`<g stroke="#2f3440" stroke-width="1">` + "\n")
+	b.WriteString(`<g stroke="#e2e8f0" stroke-width="1">` + "\n")
 	for _, tick := range scales[0].Ticks {
 		y := yFor(tick, scales[0])
 		fmt.Fprintf(&b, `<line x1="%d" y1="%.1f" x2="%d" y2="%.1f"/>`+"\n", plotLeft, y, plotRight, y)
@@ -1107,14 +1107,14 @@ func drawGPUOverviewChartSVG(title string, labels []string, series []gpuOverview
 	}
 	b.WriteString("</g>\n")
 
-	fmt.Fprintf(&b, `<rect x="%d" y="%d" width="%d" height="%d" fill="none" stroke="#454c5c" stroke-width="1"/>`+"\n",
+	fmt.Fprintf(&b, `<rect x="%d" y="%d" width="%d" height="%d" fill="none" stroke="#cbd5e1" stroke-width="1"/>`+"\n",
 		plotLeft, plotTop, plotWidth, plotHeight)
 
 	for i, axisLineX := range axisX {
 		fmt.Fprintf(&b, `<line x1="%d" y1="%d" x2="%d" y2="%d" stroke="%s" stroke-width="1"/>`+"\n",
 			axisLineX, plotTop, axisLineX, plotBottom, series[i].Color)
 		fmt.Fprintf(&b, `<text x="%d" y="%d" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="%s">%s</text>`+"\n",
-			axisLineX, 52, series[i].Color, sanitizeChartText(series[i].AxisTitle))
+			axisLineX, 64, series[i].Color, sanitizeChartText(series[i].AxisTitle))
 		for _, tick := range scales[i].Ticks {
 			y := yFor(tick, scales[i])
 			label := sanitizeChartText(gpuChartFormatTick(tick))
@@ -1132,13 +1132,13 @@ func drawGPUOverviewChartSVG(title string, labels []string, series []gpuOverview
 		}
 	}
 
-	b.WriteString(`<g font-family="sans-serif" font-size="11" fill="#c8d0d8" text-anchor="middle">` + "\n")
+	b.WriteString(`<g font-family="sans-serif" font-size="11" fill="#64748b" text-anchor="middle">` + "\n")
 	for _, idx := range gpuChartLabelIndices(pointCount, 8) {
 		x := xFor(idx)
-		fmt.Fprintf(&b, `<text x="%.1f" y="%d">%s</text>`+"\n", x, plotBottom+22, sanitizeChartText(labels[idx]))
+		fmt.Fprintf(&b, `<text x="%.1f" y="%d">%s</text>`+"\n", x, plotBottom+28, sanitizeChartText(labels[idx]))
 	}
 	b.WriteString(`</g>` + "\n")
-	b.WriteString(`<text x="700" y="338" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#c8d0d8">Time</text>` + "\n")
+	b.WriteString(`<text x="700" y="662" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#64748b">Time</text>` + "\n")
 
 	for i := range series {
 		var points strings.Builder
@@ -1158,12 +1158,12 @@ func drawGPUOverviewChartSVG(title string, labels []string, series []gpuOverview
 		}
 	}
 
-	const legendY = 372
+	const legendY = 724
 	legendX := []int{190, 470, 790, 1090}
 	for i := range series {
 		fmt.Fprintf(&b, `<line x1="%d" y1="%d" x2="%d" y2="%d" stroke="%s" stroke-width="3"/>`+"\n",
 			legendX[i], legendY, legendX[i]+28, legendY, series[i].Color)
-		fmt.Fprintf(&b, `<text x="%d" y="%d" font-family="sans-serif" font-size="12" fill="#f5f7fa">%s</text>`+"\n",
+		fmt.Fprintf(&b, `<text x="%d" y="%d" font-family="sans-serif" font-size="12" fill="#1f2937">%s</text>`+"\n",
 			legendX[i]+38, legendY+4, sanitizeChartText(series[i].Name))
 	}
 
@@ -1260,6 +1260,10 @@ func gpuChartLabelIndices(total, target int) []int {
 
 // renderChartSVG renders a line chart SVG with a fixed Y-axis range.
 func renderChartSVG(title string, datasets [][]float64, names []string, labels []string, yMin, yMax *float64) ([]byte, error) {
+	return renderChartSVGWithHeight(title, datasets, names, labels, yMin, yMax, chartCanvasHeight(len(names)))
+}
+
+func renderChartSVGWithHeight(title string, datasets [][]float64, names []string, labels []string, yMin, yMax *float64, canvasHeight int) ([]byte, error) {
 	n := len(labels)
 	if n == 0 {
 		n = 1
@@ -1310,7 +1314,7 @@ func renderChartSVG(title string, datasets [][]float64, names []string, labels [
 	p := gocharts.NewPainter(gocharts.PainterOptions{
 		OutputFormat: gocharts.ChartOutputSVG,
 		Width:        1400,
-		Height:       chartCanvasHeight(len(names)),
+		Height:       canvasHeight,
 	}, gocharts.PainterThemeOption(gocharts.GetTheme("grafana")))
 	if err := p.LineChart(opt); err != nil {
 		return nil, err
@@ -1318,6 +1322,18 @@ func renderChartSVG(title string, datasets [][]float64, names []string, labels [
 	return p.Bytes()
 }
 
+func chartCanvasHeightForPath(path string, seriesCount int) int {
+	height := chartCanvasHeight(seriesCount)
+	if isGPUChartPath(path) {
+		return height * 2
+	}
+	return height
+}
+
+func isGPUChartPath(path string) bool {
+	return strings.HasPrefix(path, "gpu-all-") || strings.HasPrefix(path, "gpu/")
+}
+
 func chartLegendVisible(seriesCount int) bool {
 	return seriesCount <= 8
 }