From ce18692ed8f78779869c333036070cf614de112e Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sun, 2 Aug 2026 02:19:48 +0200
Subject: [PATCH] ui: aggregate plot alpha falloff 1/sqrt(n) and theme blend
 modes

- opacity 1/sqrt(lineCount): isolated machine lines stay visible with many series
- blend overlapping lines with each other (isolation: isolate) using a per-theme
  --blend-overlap: multiply (light) / overlay (dark)
---
 src/components/plots.tsx |  7 +++++--
 src/dark.css             |  1 +
 src/light.css            |  1 +
 src/styles.css           | 10 ++++++++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/plots.tsx b/src/components/plots.tsx
index 13538a3..5afc7a5 100644
--- a/src/components/plots.tsx
+++ b/src/components/plots.tsx
@@ -189,7 +189,9 @@ export function AggregatePlot({
     })
     .filter((p): p is string => p !== null)
   const lineCount = Math.max(1, paths.length)
-  const opacity = 1 / lineCount
+  // gentler 1/sqrt(n) falloff: isolated lines stay visible while dense clusters
+  // still accumulate to a solid mass
+  const opacity = 1 / Math.sqrt(lineCount)
 
   const [hover, setHover] = useState<{
     sample: MetricEntry
@@ -254,12 +256,13 @@ export function AggregatePlot({
       >
         <svg
           viewBox={`0 0 ${width} ${height}`}
-          class="line-plot"
+          class="line-plot agg-plot"
           preserveAspectRatio="none"
         >
           {paths.map((d, i) => (
             <path
               key={i}
+              class="agg-line"
               d={d}
               fill="none"
               stroke={color}
diff --git a/src/dark.css b/src/dark.css
index 9d17718..02dedc3 100644
--- a/src/dark.css
+++ b/src/dark.css
@@ -44,6 +44,7 @@
   --shadow-color: #0004;
   --shadow: 0.35rem 0.35rem 0 var(--shadow-color);
   --shadow-lg: 0.55rem 0.55rem 0 var(--shadow-color);
+  --blend-overlap: overlay;
   --overlay: rgba(0, 0, 0, 0.6);
   --sheen: rgba(255, 255, 255, 0.07);
   --sheen-strong: rgba(255, 255, 255, 0.12);
diff --git a/src/light.css b/src/light.css
index 0b31099..4e0774d 100644
--- a/src/light.css
+++ b/src/light.css
@@ -48,6 +48,7 @@
   --shadow-color: #0004;
   --shadow: 0.35rem 0.35rem 0 var(--shadow-color);
   --shadow-lg: 0.55rem 0.55rem 0 var(--shadow-color);
+  --blend-overlap: multiply;
   --overlay: rgba(0, 0, 0, 0.35);
   --sheen: rgba(255, 255, 255, 0.75);
   --sheen-strong: rgba(255, 255, 255, 0.9);
diff --git a/src/styles.css b/src/styles.css
index fd7d79c..e9e4ddd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -719,6 +719,16 @@ body {
   overflow: visible;
 }
 
+/* aggregate plot: blend overlapping machine lines with each other (and only
+   with each other) using the theme's --blend-overlap mode */
+.agg-plot {
+  isolation: isolate;
+}
+
+.agg-plot .agg-line {
+  mix-blend-mode: var(--blend-overlap, multiply);
+}
+
 .line-plot-wrap {
   position: relative;
 }