From ce92bf95f6fbe35d2728a1474f3e2513bcbfa85e Mon Sep 17 00:00:00 2001
From: Tirefire <84106878+tire-fire@users.noreply.github.com>
Date: Mon, 26 Oct 2026 23:53:59 +0000
Subject: [PATCH] Highlight viewer's own team on scoreboard graphs

---
 static/templates/pages/graphs.html |  69 ++++++++++++---
 tests/integration/graphs_test.go   | 131 +++++++++++++++++++++++++++++
 tests/testutil/testutil.go         |  19 ++++-
 www/api/graphs.go                  |  30 +++++--
 4 files changed, 230 insertions(+), 19 deletions(-)
 create mode 100644 tests/integration/graphs_test.go

diff --git a/static/templates/pages/graphs.html b/static/templates/pages/graphs.html
index 3e258940..061782bf 100644
--- a/static/templates/pages/graphs.html
+++ b/static/templates/pages/graphs.html
@@ -11,7 +11,24 @@
                         <div class="card-img-top graph" id="service-status"></div>
                         <script>
                             const getChartTheme = () => document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
-                            let TEAMMAP = {}
+                            // The API marks only the viewer's own team with Self, which is shown by color alone.
+                            const SELF_COLOR = '#775DD0'
+                            const OTHER_COLORS = ['#008FFB', '#00E396', '#FEB019', '#FF4560'] // ApexCharts' palette without SELF_COLOR
+                            // Moves the viewer's series last: the top row of a heatmap, the topmost line of a line chart.
+                            const pinSelfToTop = (series) => [...series.filter((s) => !s.self), ...series.filter((s) => s.self)]
+                            // Labels are matched by position, since on an anonymized scoreboard they all read "Team".
+                            // Runs after every render, since ApexCharts redraws labels on resize and theme changes.
+                            const highlightSelfLabel = (selfLabelIndex) => (chartContext) => {
+                                const selfIndex = selfLabelIndex()
+                                chartContext.el.querySelectorAll('.apexcharts-yaxis-label').forEach((label, i) => {
+                                    label.style.fill = i === selfIndex ? SELF_COLOR : ''
+                                    label.style.fontWeight = i === selfIndex ? '700' : ''
+                                })
+                            }
+                            // A heatmap's y-axis labels start with a blank one, then go top row first, where pinSelfToTop puts the viewer.
+                            const heatmapSelfLabel = (hasSelf) => highlightSelfLabel(() => hasSelf() ? 1 : -1)
+                            let TEAMIDS = []
+                            let STATUS_HAS_SELF = false
                             let ROUNDID = 0
                             let options = {
                                 series: [],
@@ -20,13 +37,14 @@
                                     background: 'transparent',
                                     events: {
                                         dataPointSelection: function(event, chartContext, config) {
-                                            const teamName = chartContext.w.globals.seriesNames[config.seriesIndex]
                                             const serviceName = chartContext.w.globals.categoryLabels[config.dataPointIndex]
-                                            const teamID = TEAMMAP[teamName]
+                                            const teamID = TEAMIDS[config.seriesIndex]
                                             if (teamID !== undefined) {
                                                 window.location.href = `/services?team=${teamID}&service=${serviceName}&round=${ROUNDID}`
                                             }
-                                        }
+                                        },
+                                        mounted: heatmapSelfLabel(() => STATUS_HAS_SELF),
+                                        updated: heatmapSelfLabel(() => STATUS_HAS_SELF),
                                     }
                                 },
                                 stroke: {
@@ -100,11 +118,10 @@
                                         console.log(data)
                                         ROUNDID = data.roundID
                                         series = data.series.map((service) => {
-                                            if (service.Name !== "Team" && service.ID) {
-                                                TEAMMAP[service.Name] = service.ID
-                                            }
                                             return {
                                                 name: service.Name,
+                                                teamID: service.ID || undefined,
+                                                self: !!service.Self,
                                                 data: service.Data.map((status) => {
                                                     return {
                                                         x: status.X,
@@ -118,6 +135,9 @@
                                         if (!series.every((s) => s.name === "Team")) {
                                             series.sort((a, b) => b.name.localeCompare(a.name))
                                         }
+                                        series = pinSelfToTop(series)
+                                        TEAMIDS = series.map((s) => s.teamID)
+                                        STATUS_HAS_SELF = series.some((s) => s.self)
                                     })
                                 if (!series || !series.length || !series[0].data.length) {
                                     await STATUSCHART.updateOptions({
@@ -157,7 +177,7 @@
                                             img = UNKIMG
                                         }
 
-                                        const teamID = TEAMMAP[series[i].name]
+                                        const teamID = TEAMIDS[i]
                                         const serviceName = status.x
                                         const pointID = `status-${i}-${j}`
                                         const rowHeight = STATUSCHART.w.globals.gridHeight / series.length;
@@ -202,11 +222,16 @@
                     <div class="card overflow-y-scroll">
                         <div class="card-img-top graph" id="uptime-status"></div>
                         <script>
+                            let UPTIME_HAS_SELF = false
                             let options3 = {
                                 series: [],
                                 chart: {
                                     type: 'heatmap',
                                     background: 'transparent',
+                                    events: {
+                                        mounted: heatmapSelfLabel(() => UPTIME_HAS_SELF),
+                                        updated: heatmapSelfLabel(() => UPTIME_HAS_SELF),
+                                    },
                                 },
                                 stroke: {
                                     width: 1
@@ -297,6 +322,7 @@
                                         series = data.series.map((service) => {
                                             return {
                                                 name: service.Name,
+                                                self: !!service.Self,
                                                 data: service.Data.sort((a, b) => { return a.Service.localeCompare(b.Service) }).map((status) => {
                                                     if (status.Uptime === null || status.Uptime < 0) {
                                                         return {
@@ -314,6 +340,8 @@
                                         if (!series.every((s) => s.name === "Team")) {
                                             series.sort((a, b) => b.name.localeCompare(a.name))
                                         }
+                                        series = pinSelfToTop(series)
+                                        UPTIME_HAS_SELF = series.some((s) => s.self)
                                     })
 
                                 if (!series || !series.length || !series[0].data.length) {
@@ -382,11 +410,16 @@
                             const SCORECHART = new ApexCharts(document.querySelector("#score-status"), options1);
                             SCORECHART.render();
 
+                            let LEADERBOARD_SELF = -1
                             let options2 = {
                                 series: [{ data: [] }],
                                 chart: {
                                     type: 'bar',
                                     background: 'transparent',
+                                    events: {
+                                        mounted: highlightSelfLabel(() => LEADERBOARD_SELF),
+                                        updated: highlightSelfLabel(() => LEADERBOARD_SELF),
+                                    },
                                     animations: {
                                         enabled: false,
                                     },
@@ -428,11 +461,13 @@
                                             if (team.Data === null) {
                                                 return {
                                                     name: team.Name,
+                                                    self: !!team.Self,
                                                     data: []
                                                 }
                                             }
                                             return {
                                                 name: team.Name,
+                                                self: !!team.Self,
                                                 data: team.Data.map((point) => {
                                                     return {
                                                         x: point.Round,
@@ -459,11 +494,17 @@
                                     return status.x
                                 })
 
+                                // Later series draw on top, so the viewer's line goes last.
+                                const lines = pinSelfToTop(series)
                                 await SCORECHART.updateOptions({
                                     legend: {
-                                        show: !series.every((s) => s.name === "Team"),
+                                        show: !lines.every((s) => s.name === "Team"),
                                     },
-                                    series: series,
+                                    stroke: {
+                                        width: lines.map((s) => s.self ? 5 : 2),
+                                    },
+                                    colors: lines.map((s, i) => s.self ? SELF_COLOR : OTHER_COLORS[i % OTHER_COLORS.length]),
+                                    series: lines,
                                     xaxis: {
                                         categories: categories,
                                     }
@@ -474,18 +515,26 @@
                                     if (team.data.length === 0) {
                                         return {
                                             name: team.name,
+                                            self: team.self,
                                             data: 0
                                         }
                                     }
                                     return {
                                         name: team.name,
+                                        self: team.self,
                                         data: team.data[team.data.length - 1].y
                                     }
                                 }).sort((a, b) => {
                                     return b.data - a.data
                                 })
+                                LEADERBOARD_SELF = leaderboard_series.findIndex((team) => team.self)
 
                                 await LEADERBOARDCHART.updateOptions({
+                                    plotOptions: {
+                                        bar: { horizontal: true, distributed: true },
+                                    },
+                                    legend: { show: false },
+                                    colors: leaderboard_series.map((team) => team.self ? SELF_COLOR : OTHER_COLORS[0]),
                                     series: [{
                                         name: 'Service Score',
                                         data: leaderboard_series.reduce((acc, team) => {
diff --git a/tests/integration/graphs_test.go b/tests/integration/graphs_test.go
new file mode 100644
index 00000000..e9ae8e6d
--- /dev/null
+++ b/tests/integration/graphs_test.go
@@ -0,0 +1,131 @@
+package integration
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/dbaseqp/Quotient/engine"
+	"github.com/dbaseqp/Quotient/engine/db"
+	"github.com/dbaseqp/Quotient/tests/testutil"
+	"github.com/dbaseqp/Quotient/www/api"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+type graphSeries struct {
+	Name string
+	ID   uint
+	Self bool
+}
+
+func graphRequest(t *testing.T, handler http.HandlerFunc, identity *api.Identity) (*httptest.ResponseRecorder, []graphSeries) {
+	t.Helper()
+	r := httptest.NewRequest(http.MethodGet, "/", nil)
+	if identity != nil {
+		ctx := api.WithIdentity(r.Context(), *identity)
+		ctx = context.WithValue(ctx, "roles", identity.Roles) //nolint:staticcheck // matches the authentication middleware
+		r = r.WithContext(ctx)
+	}
+	w := httptest.NewRecorder()
+	handler(w, r)
+	require.Equal(t, http.StatusOK, w.Code, w.Body.String())
+
+	var body struct{ Series []graphSeries }
+	require.NoError(t, json.Unmarshal(w.Body.Bytes(), &body))
+	return w, body.Series
+}
+
+func TestGraphsMarkOnlyCallersOwnSeries(t *testing.T) {
+	if testing.Short() {
+		t.Skip("skipping integration test in short mode")
+	}
+
+	redis, pg := testutil.StartContainers(t)
+	require.NoError(t, pg.DB.ResetScores())
+	eng := engine.NewTestEngine(t, redis, pg, 3)
+	a := api.NewAPI(eng.Config, eng)
+	require.NoError(t, pg.DB.SetCompetitionStarted(true))
+	t.Cleanup(func() { pg.ResetCompetitionState(t) })
+
+	suffix := time.Now().UnixNano()
+	teams := make([]db.TeamSchema, 3)
+	checks := make([]db.ServiceCheckSchema, 0, len(teams))
+	for i := range teams {
+		team, err := pg.DB.CreateTeam(db.TeamSchema{
+			Name:       fmt.Sprintf("graphteam%d-%d", i, suffix),
+			Identifier: fmt.Sprintf("%02d", i+1),
+			Active:     true,
+		})
+		require.NoError(t, err)
+		teams[i] = team
+		checks = append(checks, db.ServiceCheckSchema{TeamID: team.ID, ServiceName: "box-web", Points: 1, Result: true})
+	}
+	_, err := pg.DB.CreateRound(db.RoundSchema{ID: 1, StartTime: time.Now(), Checks: checks})
+	require.NoError(t, err)
+
+	me := teams[1]
+	handlers := map[string]http.HandlerFunc{
+		"services": a.GetServiceStatus,
+		"scores":   a.GetScoreStatus,
+		"uptimes":  a.GetUptimeStatus,
+	}
+
+	for name, handler := range handlers {
+		t.Run(name+"/own team anonymized", func(t *testing.T) {
+			w, series := graphRequest(t, handler, &api.Identity{Username: "u", Roles: []string{"team"}, TeamID: me.ID, HasTeam: true})
+			assert.Equal(t, "private, no-store", w.Header().Get("Cache-Control"))
+
+			selfCount := 0
+			for _, s := range series {
+				assert.Equal(t, "Team", s.Name)
+				if s.Self {
+					selfCount++
+					if name == "services" {
+						assert.Equal(t, me.ID, s.ID, "own row keeps its ID so it can link to the services page")
+					}
+				} else {
+					assert.Zero(t, s.ID, "other teams' IDs must stay scrubbed")
+				}
+			}
+			assert.Equal(t, 1, selfCount)
+			for _, team := range teams {
+				assert.NotContains(t, w.Body.String(), team.Name)
+			}
+		})
+
+		for _, viewer := range []struct {
+			label    string
+			identity *api.Identity
+		}{
+			{"red team", &api.Identity{Username: "red", Roles: []string{"red"}}},
+			{"logged out", nil},
+		} {
+			t.Run(name+"/"+viewer.label, func(t *testing.T) {
+				w, series := graphRequest(t, handler, viewer.identity)
+				for _, s := range series {
+					assert.False(t, s.Self)
+					assert.Zero(t, s.ID)
+					assert.Equal(t, "Team", s.Name)
+				}
+				assert.False(t, strings.Contains(w.Body.String(), `"Self"`))
+			})
+		}
+
+		t.Run(name+"/admin", func(t *testing.T) {
+			_, series := graphRequest(t, handler, &api.Identity{Username: "admin", Roles: []string{"admin"}})
+			names := map[string]bool{}
+			for _, s := range series {
+				assert.False(t, s.Self)
+				names[s.Name] = true
+			}
+			assert.True(t, names[me.Name], "admins still see real team names")
+		})
+	}
+}
diff --git a/tests/testutil/testutil.go b/tests/testutil/testutil.go
index 40f8b754..40e58ce0 100644
--- a/tests/testutil/testutil.go
+++ b/tests/testutil/testutil.go
@@ -11,6 +11,8 @@ import (
 	"github.com/dbaseqp/Quotient/engine/db"
 	"github.com/redis/go-redis/v9"
 	"github.com/stretchr/testify/require"
+	"gorm.io/driver/postgres"
+	"gorm.io/gorm"
 )
 
 // RedisContainer wraps a Redis client for testing
@@ -45,7 +47,8 @@ func startRedis(t *testing.T) *RedisContainer {
 
 // PostgresContainer wraps a Postgres connection string for testing
 type PostgresContainer struct {
-	DB *db.DB
+	DB         *db.DB
+	connString string
 }
 
 func (p *PostgresContainer) Close() error {
@@ -66,7 +69,19 @@ func startPostgres(t *testing.T) *PostgresContainer {
 	connString := fmt.Sprintf("host=%s port=%s user=%s password=%s dbname=%s sslmode=disable",
 		host, port, user, password, dbname)
 
-	return &PostgresContainer{DB: db.Connect(connString)}
+	return &PostgresContainer{DB: db.Connect(connString), connString: connString}
+}
+
+// ResetCompetitionState forgets that the competition ever started, which the
+// DB layer never does on its own: StartedAt is kept once set.
+func (p *PostgresContainer) ResetCompetitionState(t *testing.T) {
+	t.Helper()
+	conn, err := gorm.Open(postgres.Open(p.connString), &gorm.Config{})
+	require.NoError(t, err)
+	sqlDB, err := conn.DB()
+	require.NoError(t, err)
+	defer sqlDB.Close() //nolint:errcheck
+	require.NoError(t, conn.Exec("DELETE FROM competition_state_schemas").Error)
 }
 
 // testTeamCounter provides unique team IDs across test runs
diff --git a/www/api/graphs.go b/www/api/graphs.go
index aef98b21..b77088d3 100644
--- a/www/api/graphs.go
+++ b/www/api/graphs.go
@@ -51,9 +51,11 @@ func (a *API) GetServiceStatus(w http.ResponseWriter, r *http.Request) {
 	type Series struct {
 		Name string
 		ID   uint
+		Self bool `json:",omitempty"`
 		Data []Point
 	}
 
+	callerTeamID, hasTeam := CallerTeamID(r.Context())
 	series := make([]Series, 0, len(teams))
 	for _, team := range teams {
 		temp := make(map[string]Point)
@@ -75,14 +77,17 @@ func (a *API) GetServiceStatus(w http.ResponseWriter, r *http.Request) {
 			points = append(points, point)
 		}
 
-		s := Series{Name: team.Name, ID: team.ID, Data: points}
+		s := Series{Name: team.Name, ID: team.ID, Self: hasTeam && team.ID == callerTeamID, Data: points}
 		series = append(series, s)
 	}
 
 	if a.shouldScrub(r) {
 		for i := range series {
 			series[i].Name = "Team"
-			series[i].ID = 0
+			// The caller's own ID links their row to their services page.
+			if !series[i].Self {
+				series[i].ID = 0
+			}
 		}
 		rand.Shuffle(len(series), func(i, j int) { // #nosec G404 -- non-crypto randomization of anonymized graph series
 			series[i], series[j] = series[j], series[i]
@@ -90,7 +95,7 @@ func (a *API) GetServiceStatus(w http.ResponseWriter, r *http.Request) {
 	}
 
 	data := map[string]any{"series": series, "roundID": round.ID}
-	WriteJSON(w, http.StatusOK, data)
+	writeCallerJSON(w, data)
 }
 
 func (a *API) GetScoreStatus(w http.ResponseWriter, r *http.Request) {
@@ -110,6 +115,7 @@ func (a *API) GetScoreStatus(w http.ResponseWriter, r *http.Request) {
 	}
 	type Series struct {
 		Name string
+		Self bool `json:",omitempty"`
 		Data []Point
 	}
 
@@ -123,8 +129,9 @@ func (a *API) GetScoreStatus(w http.ResponseWriter, r *http.Request) {
 
 	teams = slices.DeleteFunc(teams, func(team db.TeamSchema) bool { return !team.Active })
 
+	callerTeamID, hasTeam := CallerTeamID(r.Context())
 	for _, team := range teams {
-		s := Series{Name: team.Name, Data: make([]Point, 0)}
+		s := Series{Name: team.Name, Self: hasTeam && team.ID == callerTeamID, Data: make([]Point, 0)}
 		series = append(series, s)
 	}
 
@@ -159,7 +166,7 @@ func (a *API) GetScoreStatus(w http.ResponseWriter, r *http.Request) {
 	})
 
 	data := map[string]any{"series": series}
-	WriteJSON(w, http.StatusOK, data)
+	writeCallerJSON(w, data)
 }
 
 func (a *API) GetUptimeStatus(w http.ResponseWriter, r *http.Request) {
@@ -195,12 +202,14 @@ func (a *API) GetUptimeStatus(w http.ResponseWriter, r *http.Request) {
 	}
 	type Series struct {
 		Name string
+		Self bool `json:",omitempty"`
 		Data []Point
 	}
 
+	callerTeamID, hasTeam := CallerTeamID(r.Context())
 	series := make([]Series, 0, len(uptime))
 	for _, team := range teams {
-		s := Series{Name: team.Name}
+		s := Series{Name: team.Name, Self: hasTeam && team.ID == callerTeamID}
 
 		points := make([]Point, 0, len(uniqueServices))
 		for _, servicename := range uniqueServices {
@@ -227,7 +236,7 @@ func (a *API) GetUptimeStatus(w http.ResponseWriter, r *http.Request) {
 	}
 
 	data := map[string]any{"series": series}
-	WriteJSON(w, http.StatusOK, data)
+	writeCallerJSON(w, data)
 }
 
 func (a *API) shouldScrub(r *http.Request) bool {
@@ -243,3 +252,10 @@ func (a *API) shouldScrub(r *http.Request) bool {
 	}
 	return true
 }
+
+// writeCallerJSON writes a graph response that marks the caller's own series,
+// so no shared cache may serve it to anyone else.
+func writeCallerJSON(w http.ResponseWriter, data any) {
+	w.Header().Set("Cache-Control", "private, no-store")
+	WriteJSON(w, http.StatusOK, data)
+}