first reading the start of a map with a 3 minute delay to overcome the transition period from the previous map

discord_verificiation/playtime-frontend/components/MapSessionTimelineChart.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useContainerWidth } from '@/lib/useContainerWidth';
+import { START_BASELINE_MIN, START_BASELINE_MS } from '@/lib/populationBaseline';
 
 interface Point {
   t: string;
@@ -91,7 +92,18 @@ export default function MapSessionTimelineChart({ mapId }: { mapId: number }) {
   // right at map start vs. right at map end (or "now" if still running) —
   // same definition as the dumbbell chart, found by nearest bucket to each
   // boundary rather than a separate query.
-  const startPoint = mapStart != null ? findNearestPoint(xForEpoch(mapStart)) : null;
+  //
+  // The "start" reading is taken START_BASELINE_MS after the map begins, not
+  // at the exact change instant: right at the change the population is still
+  // the previous map's (people leaving/reconnecting), so reading it at t=0
+  // would blame this map for the previous one's attrition. Clamped to the
+  // map's end (or latest point, if still running) so short maps still work.
+  const lastPointEpoch = points.length > 0 ? points[points.length - 1].tEpoch : null;
+  const baselineEpoch =
+    mapStart != null
+      ? Math.min(mapStart + START_BASELINE_MS, mapEnd ?? lastPointEpoch ?? mapStart + START_BASELINE_MS)
+      : null;
+  const startPoint = baselineEpoch != null ? findNearestPoint(xForEpoch(baselineEpoch)) : null;
   const endPoint = mapEnd != null ? findNearestPoint(xForEpoch(mapEnd)) : points[points.length - 1] ?? null;
   const delta = startPoint && endPoint ? endPoint.players - startPoint.players : null;
   const deltaColor = delta == null ? '#8A9691' : delta > 0 ? '#3FD37A' : delta < 0 ? '#E0665C' : '#8A9691';
@@ -105,7 +117,7 @@ export default function MapSessionTimelineChart({ mapId }: { mapId: number }) {
         <h2 className="text-lg text-ink">Population during this map</h2>
         {startPoint && endPoint && (
           <p className="text-sm text-ink-muted mt-1">
-            Started with <span className="text-ink">{startPoint.players}</span> players, ended with{' '}
+            Had <span className="text-ink">{startPoint.players}</span> players {START_BASELINE_MIN} min in, ended with{' '}
             <span className="text-ink">{endPoint.players}</span>
             <span style={{ color: deltaColor }}>
               {' '}