Merge pull request 'fix: graph touch UX + colors/legend (closes #23)' (#24) from fix/graph-touch-colors into master

static/style.css

@@ -156,7 +156,45 @@ body {
     background:#12121a;
     border:1px solid #252533;
     border-radius: 14px;
+    touch-action: none;
 }
+
+.graph-controls{
+    display:flex;
+    gap:8px;
+    padding: 10px 12px 0;
+    align-items:center;
+    flex-wrap: wrap;
+}
+.graph-controls .btn{
+    background:#1e1e28;
+    border:1px solid #2a2a3a;
+    border-radius: 10px;
+    padding: 8px 10px;
+    color:#cfd3ff;
+    font-weight:700;
+    font-size:0.82rem;
+}
+.graph-controls .btn.primary{
+    border-color:#6c8af5;
+    box-shadow:0 0 0 1px rgba(108,138,245,0.18) inset;
+}
+.graph-legend{
+    margin: 8px 12px 0;
+    padding: 10px 12px;
+    background:#1a1a24;
+    border:1px solid #252533;
+    border-radius: 14px;
+    color:#b9b9c9;
+    font-size:0.8rem;
+    line-height:1.4;
+}
+.legend-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }
+.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
+.legend-dot.engram{ background:#6c8af5; }
+.legend-dot.tag{ background:#8a9aff; }
+.legend-dot.match{ background:#f7d154; }
+.graph-hint{ padding: 4px 12px 10px; }
 #searchInput {
     flex: 1;
     background: #1e1e28;

templates/dashboard.html

@@ -46,8 +46,20 @@
 
         <!-- Graph -->
         <div class="graph" id="graph" style="display:none;">
+            <div class="graph-controls">
+                <button class="btn primary" id="btnGraphPhysics" onclick="toggleGraphPhysics()">Physics: off</button>
+                <button class="btn" onclick="resetGraphView()">Reset view</button>
+                <button class="btn" onclick="fitGraphView()">Fit</button>
+                <button class="btn" onclick="reloadGraph()">Reload</button>
+            </div>
             <canvas id="graphCanvas" width="440" height="520"></canvas>
-            <div class="muted small" id="graphHint">Lade Graph…</div>
+            <div class="graph-hint muted small" id="graphHint">Lade Graph…</div>
+            <div class="graph-legend">
+                <div><strong>Graph</strong>: Zoom per Pinch (2 Finger), Pan per Drag (1 Finger). 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 match"></span> Match (Suche)</div>
+            </div>
         </div>
 
         <!-- Status -->
@@ -218,79 +230,282 @@ async function loadGraph() {
     renderGraph(g.nodes || [], g.edges || []);
 }
 
-function renderGraph(nodes, edges) {
+function reloadGraph() { loadGraph(); }
-    const canvas = document.getElementById('graphCanvas');
+
-    const hint = document.getElementById('graphHint');
+// ─── Graph Renderer (Canvas) ────────────────────────────────────────────────
-    const ctx = canvas.getContext('2d');
+let graphState = {
+    nodes: [],
+    edges: [],
+    sim: [],
+    links: [],
+    nodeById: new Map(),
+    simById: new Map(),
+    degree: new Map(),
+    physicsOn: false,
+    draggingId: null,
+    panning: false,
+    lastX: 0,
+    lastY: 0,
+    panX: 0,
+    panY: 0,
+    zoom: 1,
+    raf: null,
+    search: '',
+    pointers: new Map(),
+    pinchStartDist: null,
+    pinchStartZoom: null,
+    pinchStartPan: null,
+};
+
+function _graphCanvas() { return document.getElementById('graphCanvas'); }
+function _graphCtx() { return _graphCanvas().getContext('2d'); }
+
+function _graphNodeRadius(n) {
+    const d = graphState.degree.get(n.id) || 0;
+    const base = n.kind === 'tag' ? 4 : 6;
+    return Math.max(3, Math.min(14, base + Math.sqrt(d)));
+}
+
+function _graphNodeFill(n) {
+    if (n.kind === 'tag') return '#8a9aff';
+    return '#6c8af5';
+}
+
+function _graphMatches(n, term) {
+    const t = (term || '').trim().toLowerCase();
+    if (!t) return false;
+    const id = (n.id || '').toLowerCase();
+    const label = (n.label || '').toLowerCase();
+    return id.includes(t) || label.includes(t);
+}
+
+function _graphWorldFromScreen(cx, cy) {
+    return {
+        x: (cx - graphState.panX) / graphState.zoom,
+        y: (cy - graphState.panY) / graphState.zoom,
+    };
+}
+
+function _graphHitTest(wx, wy) {
+    for (let i = graphState.sim.length - 1; i >= 0; i--) {
+        const n = graphState.sim[i];
+        const r = _graphNodeRadius(n) + 2;
+        const dx = wx - n.x;
+        const dy = wy - n.y;
+        if ((dx*dx + dy*dy) <= r*r) return n;
+    }
+    return null;
+}
+
+function _graphInitInteractions() {
+    const canvas = _graphCanvas();
+    if (canvas._graphBound) return;
+    canvas._graphBound = true;
+
+    const toCanvasXY = (ev) => {
+        const rect = canvas.getBoundingClientRect();
+        return { cx: ev.clientX - rect.left, cy: ev.clientY - rect.top };
+    };
+
+    const pinchMidpoint = () => {
+        const pts = Array.from(graphState.pointers.values());
+        if (pts.length < 2) return null;
+        return { cx: (pts[0].cx + pts[1].cx) / 2, cy: (pts[0].cy + pts[1].cy) / 2 };
+    };
+
+    const pinchDistance = () => {
+        const pts = Array.from(graphState.pointers.values());
+        if (pts.length < 2) return null;
+        const dx = pts[0].cx - pts[1].cx;
+        const dy = pts[0].cy - pts[1].cy;
+        return Math.sqrt(dx*dx + dy*dy);
+    };
+
+    canvas.addEventListener('pointerdown', (ev) => {
+        canvas.setPointerCapture(ev.pointerId);
+        const pos = toCanvasXY(ev);
+        graphState.pointers.set(ev.pointerId, pos);
+
+        // When 2 pointers: start pinch
+        if (graphState.pointers.size === 2) {
+            graphState.panning = false;
+            graphState.draggingId = null;
+            graphState.pinchStartDist = pinchDistance();
+            graphState.pinchStartZoom = graphState.zoom;
+            graphState.pinchStartPan = { panX: graphState.panX, panY: graphState.panY };
+            _graphDraw();
+            return;
+        }
+
+        // Single pointer: pan or drag node
+        const { cx, cy } = pos;
+        const w = _graphWorldFromScreen(cx, cy);
+        const hit = _graphHitTest(w.x, w.y);
+        graphState.lastX = cx; graphState.lastY = cy;
+        if (hit) graphState.draggingId = hit.id;
+        else graphState.panning = true;
+    });
+
+    canvas.addEventListener('pointermove', (ev) => {
+        if (!graphState.pointers.has(ev.pointerId)) return;
+        const pos = toCanvasXY(ev);
+        graphState.pointers.set(ev.pointerId, pos);
+
+        // Pinch zoom (2 pointers)
+        if (graphState.pointers.size >= 2 && graphState.pinchStartDist) {
+            const dist = pinchDistance();
+            const mid = pinchMidpoint();
+            if (!dist || !mid) return;
+
+            const zoomOld = graphState.zoom;
+            const wx = (mid.cx - graphState.panX) / zoomOld;
+            const wy = (mid.cy - graphState.panY) / zoomOld;
+
+            const factor = dist / graphState.pinchStartDist;
+            const next = Math.max(0.35, Math.min(3.0, graphState.pinchStartZoom * factor));
+            graphState.zoom = next;
+            graphState.panX = mid.cx - wx * graphState.zoom;
+            graphState.panY = mid.cy - wy * graphState.zoom;
+            _graphDraw();
+            return;
+        }
+
+        // Single pointer
+        const { cx, cy } = pos;
+        const dx = cx - graphState.lastX;
+        const dy = cy - graphState.lastY;
+        graphState.lastX = cx; graphState.lastY = cy;
+
+        if (graphState.draggingId) {
+            const w = _graphWorldFromScreen(cx, cy);
+            const n = graphState.simById.get(graphState.draggingId);
+            if (n) { n.x = w.x; n.y = w.y; n.vx = 0; n.vy = 0; }
+            _graphDraw();
+            return;
+        }
+        if (graphState.panning) {
+            graphState.panX += dx;
+            graphState.panY += dy;
+            _graphDraw();
+        }
+    });
+
+    const endPointer = (ev) => {
+        if (graphState.pointers.has(ev.pointerId)) graphState.pointers.delete(ev.pointerId);
+        try { canvas.releasePointerCapture(ev.pointerId); } catch {}
+
+        if (graphState.pointers.size < 2) {
+            graphState.pinchStartDist = null;
+            graphState.pinchStartZoom = null;
+            graphState.pinchStartPan = null;
+        }
+        graphState.draggingId = null;
+        graphState.panning = false;
+    };
+    canvas.addEventListener('pointerup', endPointer);
+    canvas.addEventListener('pointercancel', endPointer);
+}
+
+function renderGraph(nodes, edges) {
+    const canvas = _graphCanvas();
+    const hint = document.getElementById('graphHint');
+    const ctx = _graphCtx();
 
-    // Fit canvas to container width (mobile)
     const w = canvas.parentElement.clientWidth - 24;
     canvas.width = Math.max(320, Math.min(520, w));
     canvas.height = 520;
 
-    if (!nodes.length || !edges.length) {
+    graphState.nodes = nodes || [];
-        hint.textContent = 'Graph: keine Kanten (noch keine Links/Tags/Hosts im Sample).';
+    graphState.edges = edges || [];
+    graphState.nodeById = new Map(graphState.nodes.map(n => [n.id, n]));
+    graphState.degree = new Map();
+    for (const e of graphState.edges) {
+        graphState.degree.set(e.from, (graphState.degree.get(e.from) || 0) + 1);
+        graphState.degree.set(e.to, (graphState.degree.get(e.to) || 0) + 1);
+    }
+
+    if (!graphState.nodes.length || !graphState.edges.length) {
+        hint.textContent = 'Graph: keine Kanten (noch keine Links/Tags im Sample).';
         ctx.clearRect(0,0,canvas.width,canvas.height);
         return;
     }
 
-    hint.textContent = `nodes=${nodes.length} edges=${edges.length}`;
+    hint.textContent = `nodes=${graphState.nodes.length} edges=${graphState.edges.length}`;
-
+    graphState.sim = graphState.nodes.map(n => ({
-    const nodeById = new Map(nodes.map(n => [n.id, n]));
-    const sim = nodes.map(n => ({
         id: n.id,
         kind: n.kind,
         label: n.label || n.id,
-        x: Math.random()*canvas.width,
+        x: (Math.random() - 0.5) * canvas.width,
-        y: Math.random()*canvas.height,
+        y: (Math.random() - 0.5) * canvas.height,
         vx: 0, vy: 0,
     }));
-    const simById = new Map(sim.map(n => [n.id, n]));
+    graphState.simById = new Map(graphState.sim.map(n => [n.id, n]));
-
+    graphState.links = graphState.edges
-    const links = edges
+        .map(e => ({a: graphState.simById.get(e.from), b: graphState.simById.get(e.to), kind: e.kind}))
-        .map(e => ({a: simById.get(e.from), b: simById.get(e.to), kind: e.kind}))
         .filter(l => l.a && l.b);
 
-    // Simple force layout (few iterations)
+    graphState.panX = canvas.width / 2;
-    for (let iter=0; iter<180; iter++) {
+    graphState.panY = canvas.height / 2;
-        // repulsion
+    graphState.zoom = 1;
-        for (let i=0; i<sim.length; i++) {
+    graphState.search = state.search || '';
-            for (let j=i+1; j<sim.length; j++) {
+
-                const a = sim[i], b = sim[j];
+    _graphInitInteractions();
-                const dx = a.x - b.x, dy = a.y - b.y;
+    for (let i = 0; i < 120; i++) _graphStepPhysics(0.9);
-                const d2 = dx*dx + dy*dy + 0.01;
+    _graphDraw();
-                const f = 120 / d2;
+}
-                a.vx += dx*f; a.vy += dy*f;
+
-                b.vx -= dx*f; b.vy -= dy*f;
+function _graphStepPhysics(alpha = 1.0) {
-            }
+    const canvas = _graphCanvas();
-        }
+    const repulsion = 180;
-        // springs
+    const damping = 0.86;
-        for (const l of links) {
+    const target = 80;
-            const a = l.a, b = l.b;
+    const springK = 0.018;
-            const dx = b.x - a.x, dy = b.y - a.y;
+
-            const dist = Math.sqrt(dx*dx + dy*dy) || 1;
+    const sim = graphState.sim;
-            const target = 60;
+    for (let i = 0; i < sim.length; i++) {
-            const k = 0.02;
+        for (let j = i + 1; j < sim.length; j++) {
-            const f = (dist - target) * k;
+            const a = sim[i], b = sim[j];
-            const fx = (dx/dist)*f, fy = (dy/dist)*f;
+            const dx = a.x - b.x, dy = a.y - b.y;
-            a.vx += fx; a.vy += fy;
+            const d2 = dx*dx + dy*dy + 0.02;
-            b.vx -= fx; b.vy -= fy;
+            const f = (repulsion / d2) * alpha;
-        }
+            a.vx += dx*f; a.vy += dy*f;
-        // integrate + bounds
+            b.vx -= dx*f; b.vy -= dy*f;
-        for (const n of sim) {
-            n.vx *= 0.85; n.vy *= 0.85;
-            n.x += n.vx; n.y += n.vy;
-            n.x = Math.max(10, Math.min(canvas.width-10, n.x));
-            n.y = Math.max(10, Math.min(canvas.height-10, n.y));
         }
     }
+    for (const l of graphState.links) {
+        const a = l.a, b = l.b;
+        const dx = b.x - a.x, dy = b.y - a.y;
+        const dist = Math.sqrt(dx*dx + dy*dy) || 1;
+        const f = (dist - target) * springK * alpha;
+        const fx = (dx/dist) * f, fy = (dy/dist) * f;
+        a.vx += fx; a.vy += fy;
+        b.vx -= fx; b.vy -= fy;
+    }
+    for (const n of sim) {
+        n.vx *= damping; n.vy *= damping;
+        n.x += n.vx; n.y += n.vy;
+        const pad = 10;
+        const bx = canvas.width / graphState.zoom;
+        const by = canvas.height / graphState.zoom;
+        n.x = Math.max(-bx/2 + pad, Math.min(bx/2 - pad, n.x));
+        n.y = Math.max(-by/2 + pad, Math.min(by/2 - pad, n.y));
+    }
+}
+
+function _graphDraw() {
+    const canvas = _graphCanvas();
+    const ctx = _graphCtx();
+    const hint = document.getElementById('graphHint');
 
     ctx.clearRect(0,0,canvas.width,canvas.height);
-    // edges
+    ctx.save();
-    ctx.globalAlpha = 0.5;
+    ctx.translate(graphState.panX, graphState.panY);
+    ctx.scale(graphState.zoom, graphState.zoom);
+
+    ctx.globalAlpha = 0.45;
     ctx.strokeStyle = '#3a3a55';
-    ctx.lineWidth = 1;
+    ctx.lineWidth = 1 / graphState.zoom;
-    for (const l of links) {
+    for (const l of graphState.links) {
         ctx.beginPath();
         ctx.moveTo(l.a.x, l.a.y);
         ctx.lineTo(l.b.x, l.b.y);
@@ -298,19 +513,82 @@ function renderGraph(nodes, edges) {
     }
     ctx.globalAlpha = 1.0;
 
-    // nodes
+    const term = (graphState.search || '').trim();
-    for (const n of sim) {
+    let matches = 0;
-        let r = 5;
+    for (const n of graphState.sim) {
-        let fill = '#6c8af5';
+        const r = _graphNodeRadius(n);
-        if (n.kind === 'tag') { fill = '#8a9aff'; r = 4; }
+        const isMatch = _graphMatches(n, term);
-        if (n.kind === 'host') { fill = '#f5b46c'; r = 4; }
+        if (isMatch) matches++;
-        if (n.kind === 'engram') { fill = '#6c8af5'; r = 5; }
+
+        if (isMatch) {
+            ctx.beginPath();
+            ctx.strokeStyle = '#f7d154';
+            ctx.lineWidth = 3 / graphState.zoom;
+            ctx.arc(n.x, n.y, r + 3, 0, Math.PI*2);
+            ctx.stroke();
+        }
 
         ctx.beginPath();
-        ctx.fillStyle = fill;
+        ctx.fillStyle = _graphNodeFill(n);
         ctx.arc(n.x, n.y, r, 0, Math.PI*2);
         ctx.fill();
     }
+
+    ctx.restore();
+    hint.textContent = `nodes=${graphState.nodes.length} edges=${graphState.edges.length}` + (term ? ` | match=${matches}` : '');
+}
+
+function _graphLoop() {
+    if (!graphState.physicsOn) return;
+    _graphStepPhysics(1.0);
+    _graphDraw();
+    graphState.raf = requestAnimationFrame(_graphLoop);
+}
+
+function toggleGraphPhysics() {
+    graphState.physicsOn = !graphState.physicsOn;
+    const b = document.getElementById('btnGraphPhysics');
+    b.textContent = `Physics: ${graphState.physicsOn ? 'on' : 'off'}`;
+    b.classList.toggle('primary', graphState.physicsOn);
+    if (graphState.physicsOn) {
+        if (graphState.raf) cancelAnimationFrame(graphState.raf);
+        graphState.raf = requestAnimationFrame(_graphLoop);
+    } else {
+        if (graphState.raf) cancelAnimationFrame(graphState.raf);
+        graphState.raf = null;
+        _graphDraw();
+    }
+}
+
+function resetGraphView() {
+    const canvas = _graphCanvas();
+    graphState.panX = canvas.width / 2;
+    graphState.panY = canvas.height / 2;
+    graphState.zoom = 1;
+    _graphDraw();
+}
+
+function fitGraphView() {
+    const canvas = _graphCanvas();
+    if (!graphState.sim.length) return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of graphState.sim) {
+        minX = Math.min(minX, n.x); minY = Math.min(minY, n.y);
+        maxX = Math.max(maxX, n.x); maxY = Math.max(maxY, n.y);
+    }
+    const w = Math.max(1, maxX - minX);
+    const h = Math.max(1, maxY - minY);
+    const zx = (canvas.width - 40) / w;
+    const zy = (canvas.height - 40) / h;
+    graphState.zoom = Math.max(0.35, Math.min(2.5, Math.min(zx, zy)));
+    graphState.panX = canvas.width / 2;
+    graphState.panY = canvas.height / 2;
+    _graphDraw();
+}
+
+function graphApplySearch(term) {
+    graphState.search = term || '';
+    _graphDraw();
 }
 
 // Real-time updates via SSE
@@ -478,6 +756,7 @@ document.getElementById('searchInput').addEventListener('input', (e) => {
     state.search = e.target.value;
     state.offset = 0;
     loadCards();
+    if (state.view === 'graph') graphApplySearch(state.search);
 });
 
 document.getElementById('filterSelect').addEventListener('change', (e) => {