Skip to content

UI polish 12/12 — Knowledge graph: glowing nodes, refined edges, fact cards #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mlcyclops merged 2 commits into from
Jun 20, 2026
Merged

UI polish 12/12 — Knowledge graph: glowing nodes, refined edges, fact cards #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd759f5
polish(kg): glowing nodes, refined edges, embossed fact cards (UI bat…
mlcyclops Jun 20, 2026
130534b
Merge remote-tracking branch 'origin/master' into _resolve
mlcyclops Jun 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 29 additions & 5 deletions desktop/renderer/graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,12 @@ export interface GraphHandle { destroy: () => void; setLens: (l: "kind" | "trust
const NS = "http://www.w3.org/2000/svg";
const make = <K extends keyof SVGElementTagNameMap>(t: K): SVGElementTagNameMap[K] => document.createElementNS(NS, t);

const reducedMotion = (): boolean =>
typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;

export function mountGraph(host: HTMLElement, data: PersonalGraphData, onSelect: (id: string | null) => void): GraphHandle {
host.innerHTML = "";
const calm = reducedMotion(); // reduced-motion: no particle flow, instant fit, gentler settle
const W = host.clientWidth || 600, H = host.clientHeight || 420;
const cx = W / 2, cy = H / 2;
let lens: "kind" | "trust" = "kind";
Expand All @@ -44,9 +48,25 @@ export function mountGraph(host: HTMLElement, data: PersonalGraphData, onSelect:
const colorOf = (n: SimNode): string => (lens === "trust" ? TRUST_COLOR[n.trust] : KIND_COLOR[kindLabel(n.kind)]) ?? "#888";

const svg = make("svg"); svg.setAttribute("class", "kg-svg"); svg.setAttribute("width", "100%"); svg.setAttribute("height", "100%");

// ── one reusable, cheap soft-glow filter (a single blur shared by every node) ──
const defs = make("defs");
const filt = make("filter");
filt.setAttribute("id", "kgGlow");
filt.setAttribute("x", "-60%"); filt.setAttribute("y", "-60%");
filt.setAttribute("width", "220%"); filt.setAttribute("height", "220%");
const blur = make("feGaussianBlur");
blur.setAttribute("in", "SourceGraphic"); blur.setAttribute("stdDeviation", "2.4"); blur.setAttribute("result", "b");
const merge = make("feMerge");
const m1 = make("feMergeNode"); m1.setAttribute("in", "b");
const m2 = make("feMergeNode"); m2.setAttribute("in", "SourceGraphic");
merge.append(m1, m2); filt.append(blur, merge); defs.append(filt); svg.append(defs);

const vp = make("g");
const edgeG = make("g"); const partG = make("g"); const nodeG = make("g");
nodeG.setAttribute("class", "kg-nodes"); // hosts the shared glow filter via CSS
vp.append(edgeG, partG, nodeG); svg.append(vp); host.append(svg);
if (calm) partG.style.display = "none"; // reduced-motion: hide the flow particles entirely

// ── edges as curved paths + a few flow particles each (cap for perf on bigger graphs) ──
const PPE = edges.length > 36 ? 1 : edges.length > 14 ? 2 : 3; // particles per edge
Expand Down Expand Up @@ -81,9 +101,10 @@ export function mountGraph(host: HTMLElement, data: PersonalGraphData, onSelect:
const a = byId.get(ed.e.from)!, b = byId.get(ed.e.to)!;
const [ccx, ccy] = ctrl(a, b);
ed.path.setAttribute("d", `M${a.x.toFixed(1)} ${a.y.toFixed(1)} Q${ccx.toFixed(1)} ${ccy.toFixed(1)} ${b.x.toFixed(1)} ${b.y.toFixed(1)}`);
if (calm) continue; // reduced-motion: particles are hidden, skip their work
const col = colorOf(a); // flow direction + colour come from the source node
for (let i = 0; i < ed.parts.length; i++) {
const t = ((phase * 0.006) + i / ed.parts.length) % 1; // travels source → target
const t = ((phase * 0.0045) + i / ed.parts.length) % 1; // calmer travel, source → target
const c = ed.parts[i]!;
c.setAttribute("cx", bez(a.x, ccx, b.x, t).toFixed(1));
c.setAttribute("cy", bez(a.y, ccy, b.y, t).toFixed(1));
Expand Down Expand Up @@ -132,13 +153,16 @@ export function mountGraph(host: HTMLElement, data: PersonalGraphData, onSelect:
const d = Math.hypot(dx, dy) || 0.01, target = 72 + a.r + b.r, f = (d - target) * 0.03; dx /= d; dy /= d;
a.vx += dx * f; a.vy += dy * f; b.vx -= dx * f; b.vy -= dy * f;
}
for (const n of nodes) { if (n === drag) { n.vx = n.vy = 0; continue; } n.vx += (cx - n.x) * 0.0025; n.vy += (cy - n.y) * 0.0025; n.vx *= 0.85; n.vy *= 0.85; n.x += n.vx; n.y += n.vy; }
// settling damping eases from looser → tighter so motion glides to rest instead of buzzing
const damp = frames < 120 ? 0.86 : 0.8;
for (const n of nodes) { if (n === drag) { n.vx = n.vy = 0; continue; } n.vx += (cx - n.x) * 0.0025; n.vy += (cy - n.y) * 0.0025; n.vx *= damp; n.vy *= damp; n.x += n.vx; n.y += n.vy; }
frames++;
if (frames === 90 && !userMoved) computeFit(); // one-time auto-fit once the layout forms
}
if (fitT) { // ease current transform toward the fit target
scale += (fitT.sc - scale) * 0.16; tx += (fitT.tx - tx) * 0.16; ty += (fitT.ty - ty) * 0.16;
if (Math.abs(fitT.sc - scale) < 0.002 && Math.abs(fitT.tx - tx) < 0.5 && Math.abs(fitT.ty - ty) < 0.5) { scale = fitT.sc; tx = fitT.tx; ty = fitT.ty; fitT = null; }
if (fitT) { // ease current transform toward the fit target (snap instantly for reduced-motion)
const k = calm ? 1 : 0.12; // gentler glide than before, less springy
scale += (fitT.sc - scale) * k; tx += (fitT.tx - tx) * k; ty += (fitT.ty - ty) * k;
if (calm || (Math.abs(fitT.sc - scale) < 0.002 && Math.abs(fitT.tx - tx) < 0.5 && Math.abs(fitT.ty - ty) < 0.5)) { scale = fitT.sc; tx = fitT.tx; ty = fitT.ty; fitT = null; }
}
paint();
raf = requestAnimationFrame(tick);
Expand Down
37 changes: 23 additions & 14 deletions desktop/renderer/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -820,32 +820,41 @@ body.resizing .sidebar,body.resizing .inspector{transition:none}
.kg{width:min(900px,70vw);background:var(--bg-1);border-left:1px solid var(--line-soft);display:flex;flex-direction:column;overflow:hidden;animation:slideInR var(--t-slow) var(--ease-out)}
.kg-tools{display:flex;align-items:center;gap:10px}
.seg.kg-lens{display:flex;gap:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:3px}
.kg-lens button{-webkit-app-region:no-drag;border:0;background:transparent;color:var(--txt-3);font-size:11px;font-weight:600;padding:4px 11px;border-radius:6px;cursor:pointer}
.kg-lens button.on{background:var(--bg-4);color:var(--txt)}
.kg-lens button{-webkit-app-region:no-drag;border:0;background:transparent;color:var(--txt-3);font-size:11px;font-weight:600;padding:4px 11px;border-radius:6px;cursor:pointer;transition:background var(--t),color var(--t),box-shadow var(--t)}
.kg-lens button:hover{color:var(--txt-2)}
.kg-lens button.on{background:var(--bg-4);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 2px rgba(0,0,0,.35)}
.kg-ai{-webkit-app-region:no-drag;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--txt-3);cursor:pointer;user-select:none}
.kg-ai input{accent-color:var(--accent);cursor:pointer;margin:0}
.kg-main{flex:1;min-height:0;display:flex}
.kg-canvas{flex:1;min-width:0;position:relative;background:radial-gradient(circle at 50% 38%,var(--bg-1),var(--bg-0));overflow:hidden;cursor:grab}
.kg-canvas{flex:1;min-width:0;position:relative;background:radial-gradient(120% 90% at 50% 34%,#12141d 0%,var(--bg-1) 42%,var(--bg-0) 100%);overflow:hidden;cursor:grab}
/* faint vignette so nodes feel lit from within the canvas rather than floating on flat fill */
.kg-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 42%,transparent 58%,rgba(0,0,0,.32) 100%)}
.kg-canvas:active{cursor:grabbing}
.kg-side{width:250px;flex:none;border-left:1px solid var(--line-soft);overflow:auto;padding:14px 14px 24px}
.kg-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--txt-4);font-size:13px;text-align:center;padding:0 36px}
.kg-empty .ic{opacity:.55}
.kg-side-empty{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--txt-4);font-size:12px;margin-top:34px;text-align:center}
.kg-svg{display:block}
.kg-edge{fill:none;stroke:var(--line-strong);stroke-width:1.2;opacity:.45;stroke-linecap:round}
.kg-part{opacity:.9;filter:drop-shadow(0 0 2px currentColor)}
.kg-node circle{stroke:var(--bg-0);stroke-width:1.5;transition:stroke var(--t)}
.kg-node:hover circle{stroke:var(--txt-2)}
.kg-node.sel circle{stroke:#fff;stroke-width:2.5}
.kg-label{fill:var(--txt-2);font-size:9.5px;font-family:inherit;text-anchor:middle;paint-order:stroke;stroke:var(--bg-0);stroke-width:3px;stroke-linejoin:round}
.kg-svg{display:block;position:relative;z-index:1}
.kg-edge{fill:none;stroke:var(--line-strong);stroke-width:1.1;opacity:.32;stroke-linecap:round;transition:opacity var(--t)}
.kg-part{opacity:.8;filter:drop-shadow(0 0 2.5px currentColor)}
/* shared soft glow over the whole node layer — one cheap filter, not one per node */
.kg-nodes{filter:url(#kgGlow)}
.kg-node circle{stroke:var(--bg-0);stroke-width:1.5;transition:stroke var(--t),stroke-width var(--t),transform var(--t) var(--ease-out);transform-box:fill-box;transform-origin:center}
.kg-node{cursor:pointer}
.kg-node:hover circle{stroke:var(--txt-2);transform:scale(1.12)}
.kg-node.sel circle{stroke:#fff;stroke-width:2.5;transform:scale(1.06)}
.kg-label{fill:var(--txt-2);font-size:9.5px;font-family:inherit;text-anchor:middle;paint-order:stroke;stroke:var(--bg-0);stroke-width:3px;stroke-linejoin:round;transition:fill var(--t)}
.kg-node:hover .kg-label,.kg-node.sel .kg-label{fill:var(--txt)}
.kg-side-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13.5px}
.kg-side-head b{color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis}
.kg-side-kind{flex:none;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-2);padding:2px 7px;border-radius:6px}
.kg-fact{border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:var(--bg-2)}
.kg-fact-stmt{font-size:12.5px;color:var(--txt);line-height:1.5}
/* embossed fact cards — hairline top highlight + soft elevation, lifts on hover */
.kg-fact{border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;margin-bottom:8px;background:linear-gradient(var(--bg-2),var(--bg-1));box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 1px 2px rgba(0,0,0,.28);transition:border-color var(--t),box-shadow var(--t),transform var(--t) var(--ease-out)}
.kg-fact:hover{border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px -4px rgba(0,0,0,.5);transform:translateY(-1px)}
.kg-fact-stmt{font-size:12.5px;color:var(--txt);line-height:1.55}
.kg-fact-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10.5px;color:var(--txt-4)}
.kg-forget{-webkit-app-region:no-drag;margin-left:auto;border:1px solid var(--line);background:var(--bg-3);color:var(--txt-3);border-radius:6px;padding:2px 7px;font-size:10px;cursor:pointer;display:inline-flex;align-items:center;gap:3px;transition:border-color var(--t),color var(--t)}
.kg-forget:hover{border-color:var(--red);color:#ff9b9b}
.kg-forget{-webkit-app-region:no-drag;margin-left:auto;border:1px solid var(--line);background:var(--bg-3);color:var(--txt-3);border-radius:6px;padding:2px 7px;font-size:10px;cursor:pointer;display:inline-flex;align-items:center;gap:3px;transition:border-color var(--t),color var(--t),background var(--t)}
.kg-forget:hover{border-color:var(--red);color:#ff9b9b;background:var(--red-dim)}
.set-sec{margin-bottom:14px;animation:setSecIn var(--t-slow) var(--ease-out) both}
@keyframes setSecIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.set-lbl{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--txt-3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
Expand Down