From b5372d6f73ef1e201de6fab5249ca4f82418b35d Mon Sep 17 00:00:00 2001
From: Kpa-clawbot <kpaclawbot@outlook.com>
Date: Tue, 21 Apr 2026 09:52:18 -0700
Subject: [PATCH] fix(#859): remove opacity gradient from Per-Observer
 Reachability rows (#863)

Fixes #859

## What

The "Per-Observer Reachability" and "Best Path to Each Node" sections in
the Topology tab had inline `opacity` styles on each `.reach-ring` row
that decreased with hop count (`1 - hops * 0.06`, floored at 0.3). This
made text progressively darker/unreadable toward the bottom.

## Fix

Removed the inline `opacity:${opacity}` style from both
`renderPerObserverReach()` and `renderBestPath()`. The rows now render
at full opacity with text colors governed by CSS variables as intended.

## Changed
- `public/analytics.js`: removed opacity computation and inline style in
two functions (4 lines removed, 2 added)

## Scope
Only touches Per-Observer Reachability and Best Path rendering. No
changes to Overview, Channels, or shared helpers.

Co-authored-by: you <you@example.com>
---
 public/analytics.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/public/analytics.js b/public/analytics.js
index 57f01ee6..e0bac658 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -624,14 +624,13 @@
     if (!data || !data.rings.length) return '<div class="text-muted">No path data for this observer</div>';
     let html = `<div class="reach-rings">`;
     data.rings.forEach(ring => {
-      const opacity = Math.max(0.3, 1 - ring.hops * 0.06);
       const nodeLinks = ring.nodes.slice(0, 8).map(n => {
         const label = n.name ? `<a href="#/nodes/${encodeURIComponent(n.pubkey)}" class="analytics-link">${esc(n.name)}</a>` : `<span class="mono">${n.hop}</span>`;
         const detail = n.distRange ? ` <span class="text-muted">(${n.distRange})</span>` : '';
         return label + detail;
       }).join(', ');
       const extra = ring.nodes.length > 8 ? ` <span class="text-muted">+${ring.nodes.length - 8} more</span>` : '';
-      html += `<div class="reach-ring" style="opacity:${opacity}">
+      html += `<div class="reach-ring">
         <div class="reach-hop">${ring.hops} hop${ring.hops > 1 ? 's' : ''}</div>
         <div class="reach-nodes">${nodeLinks}${extra}</div>
         <div class="reach-count">${ring.nodes.length} node${ring.nodes.length > 1 ? 's' : ''}</div>
@@ -675,7 +674,6 @@
     });
     let html = '<div class="reach-rings">';
     Object.entries(byDist).sort((a, b) => +a[0] - +b[0]).forEach(([dist, nodes]) => {
-      const opacity = Math.max(0.3, 1 - (+dist) * 0.06);
       const nodeLinks = nodes.slice(0, 10).map(n => {
         const label = n.name
           ? `<a href="#/nodes/${encodeURIComponent(n.pubkey)}" class="analytics-link">${esc(n.name)}</a>`
@@ -683,7 +681,7 @@
         return label + ` <span class="text-muted">via ${esc(n.observer_name)}</span>`;
       }).join(', ');
       const extra = nodes.length > 10 ? ` <span class="text-muted">+${nodes.length - 10} more</span>` : '';
-      html += `<div class="reach-ring" style="opacity:${opacity}">
+      html += `<div class="reach-ring">
         <div class="reach-hop">${dist} hop${+dist > 1 ? 's' : ''}</div>
         <div class="reach-nodes">${nodeLinks}${extra}</div>
         <div class="reach-count">${nodes.length} node${nodes.length > 1 ? 's' : ''}</div>