danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Artist Map v2 — Phase 2: richer real data on hover (connection counts)

Browse source 
Investigating 'each mode is different / not good enough' showed the engine is
already shared across all three modes (watchlist/genre/explore) and already does
LOD rendering, eased camera, and debounced zoom-rebuilds — so the inconsistency
was perception driven mostly by the (now-fixed) lag, not separate engines.

This phase surfaces more real data the map already has: the hover tooltip now
shows each artist's live connection count (computed from the map edges), shown
consistently across all three modes. Cheap (only recomputed when the hovered
artist changes, after Phase 1's de-churn). Additive + safe.

JS syntax clean.
This commit is contained in:
BoulderBadgeDad 2026-06-02 23:41:56 -07:00
parent 14388d4f42
commit 1b21983ce7
2 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webui/static/discover.js
View file

@ -5754,12 +5754,18 @@ function _artMapShowTooltip(e, node) {
const genres = (node.genres || []).slice(0, 3);
const genreHTML = genres.length ? `<div class="artmap-tip-genres">${genres.map(g => `<span>${escapeHtml(g)}</span>`).join('')}</div>` : '';
const typeLabel = node.type === 'watchlist' ? '<span class="artmap-tip-badge">★ Watchlist</span>' : '';
// Real connection count from the map's edges (cheap; only on hover change).
let conn = 0;
const edges = _artMap.edges || [];
for (const ed of edges) { if (ed.source === node.id || ed.target === node.id) conn++; }
const connHTML = conn ? `<div class="artmap-tip-conn">${conn} connection${conn === 1 ? '' : 's'}</div>` : '';
tip.innerHTML = `
<div class="artmap-tip-row">
${img}
<div class="artmap-tip-info">
<div class="artmap-tip-name">${escapeHtml(node.name)}</div>
${typeLabel}
${connHTML}
${genreHTML}
</div>
</div>

1
webui/static/style.css
View file

@ -34299,6 +34299,7 @@ div.artist-hero-badge {
.artmap-tip-info { min-width: 0; }
.artmap-tip-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artmap-tip-badge { display: inline-block; font-size: 9px; font-weight: 700; color: #fbbf24; margin-top: 2px; }
.artmap-tip-conn { font-size: 10px; font-weight: 600; color: rgba(138,43,226,0.85); margin-top: 3px; }
.artmap-tip-genres { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.artmap-tip-genres span {
font-size: 9px; padding: 2px 6px; border-radius: 4px;