Otto/second-brain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build second brain graph 2.0 view

Browse Source
This commit is contained in:
Otto
2026-06-05 09:43:24 +02:00
parent 5ebb87db41
commit 89dd603629
3 changed files with 161 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
templates/dashboard.html
View File

@@ -67,16 +67,17 @@
<option value="5000">Nodes: 5000</option>
</select>
<button class="btn" onclick="reloadGraph()">Reload</button>
<span class="graph-mode">Live physics on</span>
<span class="graph-mode">Graph 2.0 live</span>
</div>
<canvas id="graphCanvas" width="440" height="520"></canvas>
<div class="graph-hint muted small" id="graphHint">Lade Graph…</div>
<div class="graph-insights" id="graphInsights"></div>
<div class="graph-live" id="graphLive">
<div class="graph-live-title">Live</div>
<div id="graphLiveFeed" class="graph-live-feed"></div>
</div>
<div class="graph-legend">
<div><strong>Graph</strong>: Live Cluster wie Obsidian. Zoom per Pinch, Pan per Drag. Tap auf Engram öffnet Details, Tap auf Tag setzt Suche.</div>
<div><strong>Graph 2.0</strong>: Topic-Cluster, Brücken und Live-Deltas. Zoom per Pinch, Pan per Drag. Tap auf Engram öffnet Details, Tap auf Tag setzt Suche.</div>
<div class="legend-row"><span class="legend-dot engram"></span> Engram</div>
<div class="legend-row"><span class="legend-dot tag"></span> Tag</div>
<div class="legend-row"><span class="legend-dot source"></span> Quelle</div>
@@ -348,7 +349,7 @@ async function loadGraph() {
_graphDraw();
try {
let offset = 0;
const chunkSize = maxEngrams && maxEngrams <= 1000 ? 400 : 900;
const chunkSize = maxEngrams && maxEngrams <= 1000 ? 500 : 1800;
while (token === graphState.loadingToken) {
const limit = maxEngrams ? Math.min(chunkSize, Math.max(0, maxEngrams - offset)) : chunkSize;
if (limit <= 0) break;
@@ -420,7 +421,10 @@ let graphState = {
edgeKeys: new Set(),
sourceIndex: new Map(),
sourceCounts: new Map(),
clusterIndex: new Map(),
clusterCounts: new Map(),
nextSourceIndex: 0,
nextClusterIndex: 0,
loadingToken: 0,
totalEngrams: 0,
loadedEngrams: 0,
@@ -454,7 +458,10 @@ function _graphResetData() {
graphState.edgeKeys = new Set();
graphState.sourceIndex = new Map();
graphState.sourceCounts = new Map();
graphState.clusterIndex = new Map();
graphState.clusterCounts = new Map();
graphState.nextSourceIndex = 0;
graphState.nextClusterIndex = 0;
graphState.totalEngrams = 0;
graphState.loadedEngrams = 0;
graphState.lastModified = null;
@@ -477,18 +484,32 @@ function _graphHashUnit(s) {
function _graphPalette(seed) {
const palette = [
[34, 211, 238], // cyan
[244, 114, 182], // pink
[168, 85, 247], // purple
[74, 222, 128], // green
[248, 113, 113], // red
[96, 165, 250], // blue
[251, 191, 36], // amber
[45, 212, 191], // teal
[34, 211, 238], [236, 72, 153], [168, 85, 247],
[74, 222, 128], [248, 113, 113], [96, 165, 250],
[251, 191, 36], [45, 212, 191], [250, 204, 21],
[129, 140, 248], [251, 113, 133], [52, 211, 153],
];
return palette[Math.floor(_graphHashUnit(seed) * palette.length) % palette.length];
}
function _graphClusterKey(n) {
if (!n) return 'unknown';
const raw = n.cluster || (Array.isArray(n.tags) && n.tags[0]) || n.source || n.label || n.id || 'unknown';
return String(raw || 'unknown').slice(0, 80);
}
function _graphClusterCenter(cluster) {
const key = cluster || 'unknown';
if (!graphState.clusterIndex.has(key)) {
graphState.clusterIndex.set(key, graphState.nextClusterIndex++);
}
const i = graphState.clusterIndex.get(key);
if (i === 0) return {x: 0, y: 0};
const angle = i * 2.399963 + _graphHashUnit(key) * 0.85;
const ring = 190 + Math.sqrt(i) * 78;
return {x: Math.cos(angle) * ring, y: Math.sin(angle) * ring};
}
function _graphSourceCenter(source) {
const key = source || 'unknown';
if (!graphState.sourceIndex.has(key)) {
@@ -505,28 +526,30 @@ function _graphSourceCenter(source) {
function _graphPlaceNode(n) {
if (n.kind === 'source') {
return _graphSourceCenter((n.label || n.id || '').replace(/^source:/, ''));
const p = _graphSourceCenter((n.label || n.id || '').replace(/^source:/, ''));
return {x: p.x * 0.55, y: p.y * 0.55};
}
if (n.kind === 'tag') {
const p = _graphClusterCenter(n.label || n.id);
const angle = _graphHashUnit(n.id) * Math.PI * 2;
const ring = 470 + (_graphHashUnit(n.id + ':r') * 260);
return {x: Math.cos(angle) * ring, y: Math.sin(angle) * ring};
const ring = 24 + (_graphHashUnit(n.id + ':r') * 54);
return {x: p.x + Math.cos(angle) * ring, y: p.y + Math.sin(angle) * ring};
}
if (n.kind === 'host') {
const angle = _graphHashUnit(n.id) * Math.PI * 2;
const ring = 640 + (_graphHashUnit(n.id + ':r') * 220);
const ring = 540 + (_graphHashUnit(n.id + ':r') * 260);
return {x: Math.cos(angle) * ring, y: Math.sin(angle) * ring};
}
// Obsidian-like "brain": each source gets a lobe, entries fill it as a
// golden-angle cloud so 50k+ nodes appear immediately without edge layout.
const source = n.source || 'unknown';
const local = (graphState.sourceCounts.get(source) || 0) + 1;
graphState.sourceCounts.set(source, local);
const center = _graphSourceCenter(source);
const angle = local * 2.399963 + _graphHashUnit(n.id) * 0.7;
const radius = 18 + Math.sqrt(local) * 7.5 + _graphHashUnit(n.id + ':r') * 28;
const squash = 0.94 + (_graphHashUnit(source) - 0.5) * 0.16;
// Graph 2.0: nodes live in topic lobes. This gives an InfraNodus-like
// overview immediately, before expensive edge physics has any work to do.
const cluster = _graphClusterKey(n);
const local = (graphState.clusterCounts.get(cluster) || 0) + 1;
graphState.clusterCounts.set(cluster, local);
const center = _graphClusterCenter(cluster);
const angle = local * 2.399963 + _graphHashUnit(n.id) * 0.9;
const radius = 14 + Math.sqrt(local) * 6.6 + _graphHashUnit(n.id + ':r') * 30;
const squash = 0.9 + (_graphHashUnit(cluster) - 0.5) * 0.24;
return {
x: center.x + Math.cos(angle) * radius * squash,
y: center.y + Math.sin(angle) * radius / squash,
@@ -546,6 +569,8 @@ function _graphEnsureSimNode(n) {
modified: n.modified ?? existing.modified,
last_accessed: n.last_accessed ?? existing.last_accessed,
source: n.source ?? existing.source,
cluster: n.cluster ?? existing.cluster,
tags: n.tags ?? existing.tags,
predict_locked: n.predict_locked ?? existing.predict_locked,
createdMs: Date.parse(n.created || existing.created || '') || existing.createdMs || 0,
modifiedMs: Date.parse(n.modified || existing.modified || '') || existing.modifiedMs || 0,
@@ -567,6 +592,8 @@ function _graphEnsureSimNode(n) {
modifiedMs: Date.parse(n.modified || '') || 0,
last_accessed: n.last_accessed,
source: n.source,
cluster: n.cluster,
tags: n.tags,
predict_locked: n.predict_locked,
x: p.x,
y: p.y,
@@ -649,11 +676,11 @@ function _graphNodeFill(n) {
}
if (n.kind === 'engram') {
let base = _graphPalette(n.source || n.id);
let base = _graphPalette(_graphClusterKey(n));
const verdict = (n.verdict || '').toString();
if (verdict === 'confirmed_false') base = [248, 113, 113];
else if (verdict === 'confirmed_true') {
const src = _graphPalette(n.source || n.id);
const src = _graphPalette(_graphClusterKey(n));
base = [Math.round((src[0] + 74) / 2), Math.round((src[1] + 222) / 2), Math.round((src[2] + 128) / 2)];
}
@@ -1107,21 +1134,21 @@ function _graphStepAmbient(alpha = 1.0) {
if (!count) return;
// Keep the full 50k+ graph alive without doing an expensive all-node force
// solve: tiny deterministic drift plus stronger movement on fresh/hub nodes.
const sample = Math.min(count, 900);
const sample = Math.min(count, 1400);
const start = Math.floor((t * 97) % count);
for (let k = 0; k < sample; k++) {
const n = sim[(start + k * 13) % count];
const amp = (n.kind === 'engram') ? 0.018 : 0.05;
const amp = (n.kind === 'engram') ? 0.026 : 0.07;
n.x += Math.sin(t * 0.7 + _graphHashUnit(n.id) * 6.283) * amp * alpha;
n.y += Math.cos(t * 0.6 + _graphHashUnit(n.id + ':y') * 6.283) * amp * alpha;
}
const recentCutoff = now - 12 * 60 * 1000;
for (const n of sim) {
if (n.kind === 'source' || n.kind === 'tag' || (n.modifiedMs || n.createdMs || 0) > recentCutoff) {
const home = n.kind === 'engram' ? _graphSourceCenter(n.source || 'unknown') : null;
const home = n.kind === 'engram' ? _graphClusterCenter(_graphClusterKey(n)) : (n.kind === 'tag' ? _graphClusterCenter(n.label || n.id) : null);
if (home) {
n.vx += (home.x - n.x) * 0.00003 * alpha;
n.vy += (home.y - n.y) * 0.00003 * alpha;
n.vx += (home.x - n.x) * 0.00004 * alpha;
n.vy += (home.y - n.y) * 0.00004 * alpha;
}
n.vx *= 0.92; n.vy *= 0.92;
n.x += n.vx; n.y += n.vy;
@@ -1133,8 +1160,38 @@ function _graphEdgeColor(kind) {
const k = (kind || '').toString().toLowerCase();
if (k.includes('tag')) return '#7c3aed';
if (k.includes('host')) return '#f59e0b';
if (k.includes('source')) return '#22d3ee';
if (k.includes('ref')) return '#10b981';
return '#3a3a55';
return '#64748b';
}
function _graphDenseEdgeVisible(l) {
if (!l || !l.a || !l.b) return false;
if (l.kind === 'link') return true;
const da = graphState.degree.get(l.a.id) || 0;
const db = graphState.degree.get(l.b.id) || 0;
if (l.a.kind !== 'engram' || l.b.kind !== 'engram') return Math.max(da, db) >= 28;
const h = _graphHashUnit(`${l.a.id}:${l.b.id}:${l.kind}`);
return h > 0.982;
}
function _graphRenderInsights() {
const el = document.getElementById('graphInsights');
if (!el) return;
const clusters = Array.from(graphState.clusterCounts.entries())
.sort((a, b) => b[1] - a[1])
.slice(0, 5);
const live = graphState.sim.filter(n => {
const ms = n.modifiedMs || n.createdMs || 0;
return ms && (graphState.drawNow - ms) < 15 * 60 * 1000;
}).length;
const html = [
`<div class="graph-chip"><b>${graphState.sim.length}</b><span>Knoten live</span></div>`,
`<div class="graph-chip"><b>${graphState.links.length}</b><span>Beziehungen</span></div>`,
`<div class="graph-chip"><b>${live}</b><span>aktiv / neu</span></div>`,
...clusters.map(([name, count]) => `<div class="graph-chip"><b>${escapeHtml(name)}</b><span>${count} Einträge</span></div>`),
].join('');
el.innerHTML = html;
}
function _graphDraw() {
@@ -1163,14 +1220,17 @@ function _graphDraw() {
const term = (graphState.search || '').trim();
const dense = graphState.sim.length > 12000;
const drawEdges = !dense || term || graphState.selectedId;
if (drawEdges) for (const l of graphState.links) {
let drawnEdges = 0;
const maxDenseEdges = graphState.selectedId || term ? 5000 : 2400;
for (const l of graphState.links) {
const isMatchEdge = term && (_graphMatches(l.a, term) || _graphMatches(l.b, term));
const selectedEdge = graphState.selectedId && (l.a.id === graphState.selectedId || l.b.id === graphState.selectedId);
if (dense && !isMatchEdge && !selectedEdge && l.kind !== 'link') continue;
if (dense && !isMatchEdge && !selectedEdge && !_graphDenseEdgeVisible(l)) continue;
if (dense && !isMatchEdge && !selectedEdge && drawnEdges >= maxDenseEdges) continue;
drawnEdges++;
const w = Math.max(0.2, Math.min(3.0, (l.weight || 1.0)));
ctx.lineWidth = (0.6 + w) / graphState.zoom;
ctx.globalAlpha = isMatchEdge || selectedEdge ? 0.9 : (dense ? 0.12 : (0.20 + Math.min(0.35, w * 0.18)));
ctx.globalAlpha = isMatchEdge || selectedEdge ? 0.9 : (dense ? 0.16 : (0.20 + Math.min(0.35, w * 0.18)));
ctx.strokeStyle = isMatchEdge ? '#f7d154' : _graphEdgeColor(l.kind);
ctx.beginPath();
ctx.moveTo(l.a.x, l.a.y);
@@ -1249,12 +1309,16 @@ function _graphDraw() {
ctx.save();
ctx.beginPath();
ctx.arc(cx, cy, viewR, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(34, 211, 238, 0.18)';
ctx.lineWidth = 1.2;
ctx.strokeStyle = 'rgba(34, 211, 238, 0.05)';
ctx.lineWidth = 0.8;
ctx.stroke();
ctx.restore();
const loaded = graphState.totalEngrams ? ` | engrams=${graphState.loadedEngrams}/${graphState.totalEngrams}` : '';
hint.textContent = `nodes=${graphState.nodes.length} edges=${graphState.edges.length}${loaded}` + (term ? ` | match=${matches}` : '');
if (!graphState._lastInsightsAt || graphState.drawNow - graphState._lastInsightsAt > 1500) {
graphState._lastInsightsAt = graphState.drawNow;
_graphRenderInsights();
}
}
function _graphLoop() {