No neighbor data available yet. Neighbor relationships are built from observed packet paths over time.
';
+ if (headerSelector) {
+ var h = document.querySelector(headerSelector);
+ if (h) h.textContent = 'Neighbors (0)';
+ }
+ return;
+ }
+ if (headerSelector) {
+ var h = document.querySelector(headerSelector);
+ if (h) h.textContent = 'Neighbors (' + data.neighbors.length + ')';
+ }
+ var html = renderNeighborTable(data.neighbors, limit);
+ if (limit && data.neighbors.length > limit && viewAllPubkey) {
+ html += '
Paths Through This Node
@@ -427,6 +536,11 @@
} catch {}
}
+ // Fetch neighbors for this node (full-screen view)
+ fetchAndRenderNeighbors(n.public_key, 'fullNeighborsContent', {
+ headerSelector: '#fullNeighborsHeader'
+ });
+
// Fetch paths through this node (full-screen view)
api('/nodes/' + encodeURIComponent(n.public_key) + '/paths', { ttl: CLIENT_TTL.nodeDetail }).then(pathData => {
const el = document.getElementById('fullPathsContent');
@@ -819,6 +933,11 @@
` : ''}
+
+
Paths Through This Node
@@ -889,6 +1008,13 @@
} catch {}
}
+ // Fetch neighbors for this node (condensed panel — top 5)
+ fetchAndRenderNeighbors(n.public_key, 'panelNeighborsContent', {
+ limit: 5,
+ headerSelector: '#panelNeighborsHeader',
+ viewAllPubkey: n.public_key
+ });
+
// Fetch paths through this node
api('/nodes/' + encodeURIComponent(n.public_key) + '/paths', { ttl: CLIENT_TTL.nodeDetail }).then(pathData => {
const el = document.getElementById('pathsContent');
diff --git a/test-e2e-playwright.js b/test-e2e-playwright.js
index 624244ac..c026fd21 100644
--- a/test-e2e-playwright.js
+++ b/test-e2e-playwright.js
@@ -1308,6 +1308,7 @@ async function run() {
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
});
+<<<<<<< HEAD
// --- Group: Show Neighbors (#484 fix) ---
await test('Show Neighbors populates neighborPubkeys from affinity API', async () => {
@@ -1452,6 +1453,64 @@ async function run() {
await page.unroute(`**/api/nodes/${testPubkey}/neighbors*`);
await page.unroute(`**/api/nodes/${testPubkey}/paths*`);
});
+ // ─── Neighbor section tests ───────────────────────────────────────────────
+
+ await test('Node detail: neighbors section exists with correct columns', async () => {
+ // Navigate to a node detail page (use the first node in the list)
+ await page.goto(BASE + '/#/nodes');
+ await page.waitForSelector('#nodesBody tr[data-key]', { timeout: 10000 });
+ // Get the first node's pubkey from the row's data-key attribute
+ const pubkey = await page.$eval('#nodesBody tr[data-key]', el => el.dataset.key);
+ await page.goto(BASE + '/#/nodes/' + pubkey);
+ await page.waitForSelector('#node-neighbors', { timeout: 10000 });
+ // Check the section exists
+ const header = await page.$eval('#fullNeighborsHeader', el => el.textContent);
+ assert(header.startsWith('Neighbors'), 'Header should start with "Neighbors", got: ' + header);
+ // Wait for content to load (either table or empty state)
+ await page.waitForFunction(() => {
+ const el = document.getElementById('fullNeighborsContent');
+ return el && !el.innerHTML.includes('spinner');
+ }, { timeout: 10000 });
+ const hasTable = await page.$('#fullNeighborsContent .data-table');
+ if (hasTable) {
+ // Check columns
+ const headers = await page.$$eval('#fullNeighborsContent thead th', ths => ths.map(t => t.textContent));
+ assert(headers.includes('Neighbor'), 'Should have Neighbor column');
+ assert(headers.includes('Role'), 'Should have Role column');
+ assert(headers.includes('Score'), 'Should have Score column');
+ assert(headers.includes('Obs'), 'Should have Obs column');
+ assert(headers.includes('Last Seen'), 'Should have Last Seen column');
+ assert(headers.includes('Conf'), 'Should have Conf column');
+ } else {
+ // Empty state
+ const text = await page.$eval('#fullNeighborsContent', el => el.textContent);
+ assert(text.includes('No neighbor data') || text.includes('Could not load'), 'Should show empty or error state');
+ }
+ });
+
+ await test('Node detail: neighbors section loading state', async () => {
+ // Navigate to a node - the section should initially show a spinner
+ await page.goto(BASE + '/#/nodes');
+ await page.waitForSelector('#nodesBody tr[data-key]', { timeout: 10000 });
+ const pubkey = await page.$eval('#nodesBody tr[data-key]', el => el.dataset.key);
+ // Intercept API to delay response
+ await page.route('**/api/nodes/*/neighbors*', async route => {
+ await new Promise(r => setTimeout(r, 500));
+ await route.continue();
+ });
+ await page.goto(BASE + '/#/nodes/' + pubkey);
+ // Check spinner appears
+ const spinnerVisible = await page.waitForSelector('#fullNeighborsContent .spinner', { timeout: 5000 }).then(() => true).catch(() => false);
+ assert(spinnerVisible, 'Loading spinner should be visible initially');
+ // Wait for loading to finish
+ await page.waitForFunction(() => {
+ const el = document.getElementById('fullNeighborsContent');
+ return el && !el.innerHTML.includes('spinner');
+ }, { timeout: 15000 });
+ await page.unroute('**/api/nodes/*/neighbors*');
+ });
+
+ // ─── End neighbor section tests ───────────────────────────────────────────
// Extract frontend coverage if instrumented server is running
try {