benjivers/notes Public Public: anyone can read this; nobody can change it.
Graph: spread a big vault out and label only its hubs until you zoom
Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
1 file
changed +11
−8
static/graph.js +11 −8
| @@ -97,7 +97,7 @@ function chart(canvas) { | ||
| 97 | 97 | |
| 98 | 98 | function tick() { |
| 99 | 99 | const n = ps.length; |
| 100 | const repel = local ? 900 : 1400; | |
| 100 | const repel = local ? 900 : 2600 + ps.length * 40; | |
| 101 | 101 | for (let i = 0; i < n; i++) { |
| 102 | 102 | const a = ps[i]; |
| 103 | 103 | for (let j = i + 1; j < n; j++) { |
| @@ -110,7 +110,7 @@ function chart(canvas) { | ||
| 110 | 110 | dy = jitter(b.id, i); |
| 111 | 111 | d2 = 0.01; |
| 112 | 112 | } |
| 113 | if (d2 > 250000) continue; | |
| 113 | if (d2 > 1_000_000) continue; | |
| 114 | 114 | const f = (repel * alpha) / d2; |
| 115 | 115 | const d = Math.sqrt(d2); |
| 116 | 116 | a.vx += (dx / d) * f; |
| @@ -119,7 +119,7 @@ function chart(canvas) { | ||
| 119 | 119 | b.vy -= (dy / d) * f; |
| 120 | 120 | } |
| 121 | 121 | } |
| 122 | const rest = local ? 70 : 60; | |
| 122 | const rest = local ? 70 : 95; | |
| 123 | 123 | for (const [a, b] of links) { |
| 124 | 124 | const dx = b.x - a.x; |
| 125 | 125 | const dy = b.y - a.y; |
| @@ -131,8 +131,8 @@ function chart(canvas) { | ||
| 131 | 131 | b.vy -= (dy / d) * f; |
| 132 | 132 | } |
| 133 | 133 | for (const p of ps) { |
| 134 | p.vx -= p.x * 0.012 * alpha; | |
| 135 | p.vy -= p.y * 0.012 * alpha; | |
| 134 | p.vx -= p.x * 0.006 * alpha; | |
| 135 | p.vy -= p.y * 0.006 * alpha; | |
| 136 | 136 | if (p.fixed || (local && p.id === focus)) { |
| 137 | 137 | p.vx = p.vy = 0; |
| 138 | 138 | if (local && p.id === focus && !p.fixed) p.x = p.y = 0; |
| @@ -160,7 +160,7 @@ function chart(canvas) { | ||
| 160 | 160 | x1 = Math.max(x1, p.x + p.r); |
| 161 | 161 | y1 = Math.max(y1, p.y + p.r + 18); |
| 162 | 162 | } |
| 163 | const k = Math.min((w * 0.8) / Math.max(1, x1 - x0), (h * 0.75) / Math.max(1, y1 - y0), local ? 1.6 : 2.4); | |
| 163 | const k = Math.min((w * 0.8) / Math.max(1, x1 - x0), (h * 0.75) / Math.max(1, y1 - y0), local ? 1.6 : 1.5); | |
| 164 | 164 | view = { x: -(x0 + x1) / 2, y: -(y0 + y1) / 2, k: Math.max(0.25, k) }; |
| 165 | 165 | } |
| 166 | 166 | |
| @@ -208,7 +208,10 @@ function chart(canvas) { | ||
| 208 | 208 | ctx.lineTo(q.x, q.y); |
| 209 | 209 | ctx.stroke(); |
| 210 | 210 | } |
| 211 | const labels = local || view.k > 1.15 || ps.length <= 30; | |
| 211 | // Labels: all of them when few or zoomed in; otherwise the hubs, and | |
| 212 | // whatever the pointer is near, so a big vault reads as a map, not a smudge. | |
| 213 | const all = local || ps.length <= 24 || view.k > 1.8; | |
| 214 | const hub = Math.max(5, [...ps].map((p) => p.links).sort((a, b) => b - a)[Math.min(9, ps.length - 1)] ?? 0); | |
| 212 | 215 | ctx.font = `${local ? 11 : 12}px system-ui, -apple-system, sans-serif`; |
| 213 | 216 | ctx.textAlign = "center"; |
| 214 | 217 | ctx.textBaseline = "top"; |
| @@ -221,7 +224,7 @@ function chart(canvas) { | ||
| 221 | 224 | ctx.beginPath(); |
| 222 | 225 | ctx.arc(s.x, s.y, r, 0, Math.PI * 2); |
| 223 | 226 | ctx.fill(); |
| 224 | if (labels || on) { | |
| 227 | if (all || on || p.links >= hub) { | |
| 225 | 228 | const t = p.title.length > 28 ? `${p.title.slice(0, 27)}…` : p.title; |
| 226 | 229 | ctx.globalAlpha = lit && !on ? 0.3 : 1; |
| 227 | 230 | ctx.fillStyle = p === lit ? c.label : c.quiet; |