From 3b5241bb9ad882497a67bc3d7e76303754e54cd3 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Mon, 17 Aug 2026 12:58:35 +0200
Subject: [PATCH] Overviews: create before publish-all; Home: the trend curves
 keep their dot

The Home table drew the one sparkline without its live dot, on the grounds
that a polled rollup's right edge is the last complete slice rather than this
instant. Identical curves reading differently is the worse trade, so the dot
is back everywhere and the cell keeps room for the half that hangs past the
curve.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XC2jX6Hdj7pxGGKzBTrbqB
---
 .../src/components/Common/OverviewToolbar.tsx | 34 +++++++++----------
 .../src/components/Health/HealthOverview.tsx  | 11 +++---
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Common/OverviewToolbar.tsx b/frontend/src/components/Common/OverviewToolbar.tsx
index c1aff7d..1295d4b 100644
--- a/frontend/src/components/Common/OverviewToolbar.tsx
+++ b/frontend/src/components/Common/OverviewToolbar.tsx
@@ -104,6 +104,23 @@ export function OverviewToolbar({
         </Tooltip>
       )}
 
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DialogTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className={ICON}
+              aria-label={createLabel}
+              data-testid={createTestId}
+            >
+              <Plus />
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{createLabel}</TooltipContent>
+      </Tooltip>
+
       <Tooltip>
         <TooltipTrigger asChild>
           {/* A disabled button gets no pointer events, so the tooltip that
@@ -128,23 +145,6 @@ export function OverviewToolbar({
             : `Publish ${draftCount} unpublished change${draftCount === 1 ? "" : "s"}`}
         </TooltipContent>
       </Tooltip>
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DialogTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className={ICON}
-              aria-label={createLabel}
-              data-testid={createTestId}
-            >
-              <Plus />
-            </Button>
-          </DialogTrigger>
-        </TooltipTrigger>
-        <TooltipContent>{createLabel}</TooltipContent>
-      </Tooltip>
     </div>
   )
 }
diff --git a/frontend/src/components/Health/HealthOverview.tsx b/frontend/src/components/Health/HealthOverview.tsx
index 1f67d28..1019414 100644
--- a/frontend/src/components/Health/HealthOverview.tsx
+++ b/frontend/src/components/Health/HealthOverview.tsx
@@ -40,9 +40,9 @@ function Tile({
  *
  * Sixty slices of whatever window is selected, so the curve stays the same
  * width and only its resolution moves. The same curve the node panel and the
- * edge popover draw, in the chart ramp this page's other graphs use. No live
- * dot: the rollups are polled, so the right edge is the last completed slice
- * rather than this instant.
+ * edge popover draw, dot included, in the chart ramp this page's other graphs
+ * use. The dot marks the newest slice rather than this instant — the rollups
+ * are polled, so that slice is the last complete one.
  */
 function Spark({ counts }: { counts: number[] }) {
   const points: HistoryPoint[] = counts.map((value, index) => ({
@@ -57,7 +57,6 @@ function Spark({ counts }: { counts: number[] }) {
       points={points}
       color="var(--chart-1)"
       height="h-6"
-      dot={false}
       readout={false}
     />
   )
@@ -205,7 +204,9 @@ export function HealthOverview({
                   <td className="whitespace-nowrap px-3 py-2 text-center">
                     {si(row.avg_lag_ms)} ms
                   </td>
-                  <td className="py-2 pl-3 text-right">
+                  {/* The dot straddles the curve's right edge, so the cell
+                      keeps a little room for the half that hangs out. */}
+                  <td className="py-2 pr-2 pl-3 text-right">
                     <Spark counts={row.spark} />
                   </td>
                 </tr>