mirror of
https://github.com/perstarkse/minne.git
synced 2026-01-11 20:50:24 +01:00
430 lines
16 KiB
JavaScript
430 lines
16 KiB
JavaScript
// Knowledge graph renderer: interactive 2D force graph with
|
|
// zoom/pan, search, neighbor highlighting, curved links with arrows,
|
|
// responsive resize, and type/relationship legends.
|
|
(function () {
|
|
const D3_SRC = '/assets/d3.min.js';
|
|
|
|
let d3Loading = null;
|
|
|
|
function ensureD3() {
|
|
if (window.d3) return Promise.resolve();
|
|
if (d3Loading) return d3Loading;
|
|
d3Loading = new Promise((resolve, reject) => {
|
|
const s = document.createElement('script');
|
|
s.src = D3_SRC;
|
|
s.async = true;
|
|
s.onload = () => resolve();
|
|
s.onerror = () => reject(new Error('Failed to load D3'));
|
|
document.head.appendChild(s);
|
|
});
|
|
return d3Loading;
|
|
}
|
|
|
|
// Simple palettes (kept deterministic across renders)
|
|
const PALETTE_A = ['#60A5FA', '#34D399', '#F59E0B', '#A78BFA', '#F472B6', '#F87171', '#22D3EE', '#84CC16', '#FB7185'];
|
|
const PALETTE_B = ['#94A3B8', '#A3A3A3', '#9CA3AF', '#C084FC', '#FDA4AF', '#FCA5A5', '#67E8F9', '#A3E635', '#FDBA74'];
|
|
|
|
function buildMap(values) {
|
|
const unique = Array.from(new Set(values.filter(Boolean)));
|
|
const map = new Map();
|
|
unique.forEach((v, i) => map.set(v, PALETTE_A[i % PALETTE_A.length]));
|
|
return map;
|
|
}
|
|
|
|
function linkColorMap(values) {
|
|
const unique = Array.from(new Set(values.filter(Boolean)));
|
|
const map = new Map();
|
|
unique.forEach((v, i) => map.set(v, PALETTE_B[i % PALETTE_B.length]));
|
|
return map;
|
|
}
|
|
|
|
function radiusForDegree(deg) {
|
|
const d = Math.max(0, +deg || 0);
|
|
const r = 6 + Math.sqrt(d) * 3; // gentle growth
|
|
return Math.max(6, Math.min(r, 24));
|
|
}
|
|
|
|
function curvedPath(d) {
|
|
const sx = d.source.x, sy = d.source.y, tx = d.target.x, ty = d.target.y;
|
|
const dx = tx - sx, dy = ty - sy;
|
|
const dr = Math.hypot(dx, dy) * 0.7; // curve radius
|
|
const mx = (sx + tx) / 2;
|
|
const my = (sy + ty) / 2;
|
|
// Offset normal to create a consistent arc
|
|
const nx = -dy / (Math.hypot(dx, dy) || 1);
|
|
const ny = dx / (Math.hypot(dx, dy) || 1);
|
|
const cx = mx + nx * 20;
|
|
const cy = my + ny * 20;
|
|
return `M ${sx},${sy} Q ${cx},${cy} ${tx},${ty}`;
|
|
}
|
|
|
|
function buildAdjacency(nodes, links) {
|
|
const idToNode = new Map(nodes.map(n => [n.id, n]));
|
|
const neighbors = new Map();
|
|
nodes.forEach(n => neighbors.set(n.id, new Set()));
|
|
links.forEach(l => {
|
|
const s = typeof l.source === 'object' ? l.source.id : l.source;
|
|
const t = typeof l.target === 'object' ? l.target.id : l.target;
|
|
if (neighbors.has(s)) neighbors.get(s).add(t);
|
|
if (neighbors.has(t)) neighbors.get(t).add(s);
|
|
});
|
|
return { idToNode, neighbors };
|
|
}
|
|
|
|
function attachOverlay(container, { onSearch, onToggleNames, onToggleEdgeLabels, onCenter }) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'kg-overlay';
|
|
|
|
const primaryRow = document.createElement('div');
|
|
primaryRow.className = 'kg-control-row kg-control-row-primary';
|
|
|
|
const secondaryRow = document.createElement('div');
|
|
secondaryRow.className = 'kg-control-row kg-control-row-secondary';
|
|
|
|
// search box
|
|
const input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.placeholder = 'Search nodes…';
|
|
input.className = 'nb-input kg-search-input';
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') onSearch && onSearch(input.value.trim());
|
|
});
|
|
|
|
const searchBtn = document.createElement('button');
|
|
searchBtn.className = 'nb-btn btn-xs nb-cta kg-search-btn';
|
|
searchBtn.textContent = 'Go';
|
|
searchBtn.addEventListener('click', () => onSearch && onSearch(input.value.trim()));
|
|
|
|
const namesToggle = document.createElement('button');
|
|
namesToggle.className = 'nb-btn btn-xs kg-toggle';
|
|
namesToggle.type = 'button';
|
|
namesToggle.textContent = 'Names';
|
|
namesToggle.addEventListener('click', () => onToggleNames && onToggleNames());
|
|
|
|
const labelToggle = document.createElement('button');
|
|
labelToggle.className = 'nb-btn btn-xs kg-toggle';
|
|
labelToggle.type = 'button';
|
|
labelToggle.textContent = 'Labels';
|
|
labelToggle.addEventListener('click', () => onToggleEdgeLabels && onToggleEdgeLabels());
|
|
|
|
const centerBtn = document.createElement('button');
|
|
centerBtn.className = 'nb-btn btn-xs';
|
|
centerBtn.textContent = 'Center';
|
|
centerBtn.addEventListener('click', () => onCenter && onCenter());
|
|
|
|
primaryRow.appendChild(input);
|
|
primaryRow.appendChild(searchBtn);
|
|
|
|
secondaryRow.appendChild(namesToggle);
|
|
secondaryRow.appendChild(labelToggle);
|
|
secondaryRow.appendChild(centerBtn);
|
|
|
|
overlay.appendChild(primaryRow);
|
|
overlay.appendChild(secondaryRow);
|
|
|
|
container.style.position = 'relative';
|
|
container.appendChild(overlay);
|
|
|
|
return { input, overlay, namesToggle, labelToggle };
|
|
}
|
|
|
|
function attachLegends(container, typeColor, relColor) {
|
|
const wrap = document.createElement('div');
|
|
wrap.className = 'kg-legend';
|
|
|
|
function section(title, items) {
|
|
const sec = document.createElement('div');
|
|
sec.className = 'nb-card kg-legend-card';
|
|
const h = document.createElement('div'); h.className = 'kg-legend-heading'; h.textContent = title; sec.appendChild(h);
|
|
items.forEach(([label, color]) => {
|
|
const row = document.createElement('div'); row.className = 'kg-legend-row';
|
|
const sw = document.createElement('span'); sw.style.background = color; sw.style.width = '12px'; sw.style.height = '12px'; sw.style.border = '2px solid #000';
|
|
const t = document.createElement('span'); t.textContent = label || '—';
|
|
row.appendChild(sw); row.appendChild(t); sec.appendChild(row);
|
|
});
|
|
return sec;
|
|
}
|
|
|
|
const typeItems = Array.from(typeColor.entries());
|
|
if (typeItems.length) wrap.appendChild(section('Entity Type', typeItems));
|
|
const relItems = Array.from(relColor.entries());
|
|
if (relItems.length) wrap.appendChild(section('Relationship', relItems));
|
|
|
|
container.appendChild(wrap);
|
|
return wrap;
|
|
}
|
|
|
|
async function renderKnowledgeGraph(root) {
|
|
const container = (root || document).querySelector('#knowledge-graph');
|
|
if (!container) return;
|
|
|
|
await ensureD3().catch(() => {
|
|
const err = document.createElement('div');
|
|
err.className = 'alert alert-error';
|
|
err.textContent = 'Unable to load graph library (D3).';
|
|
container.appendChild(err);
|
|
});
|
|
if (!window.d3) return;
|
|
|
|
// Clear previous render
|
|
container.innerHTML = '';
|
|
|
|
const width = container.clientWidth || 800;
|
|
const height = container.clientHeight || 600;
|
|
|
|
const et = container.dataset.entityType || '';
|
|
const cc = container.dataset.contentCategory || '';
|
|
const qs = new URLSearchParams();
|
|
if (et) qs.set('entity_type', et);
|
|
if (cc) qs.set('content_category', cc);
|
|
|
|
const url = '/knowledge/graph.json' + (qs.toString() ? ('?' + qs.toString()) : '');
|
|
let data;
|
|
try {
|
|
const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
|
|
if (!res.ok) throw new Error('Failed to load graph data');
|
|
data = await res.json();
|
|
} catch (_e) {
|
|
const err = document.createElement('div');
|
|
err.className = 'alert alert-error';
|
|
err.textContent = 'Unable to load graph data.';
|
|
container.appendChild(err);
|
|
return;
|
|
}
|
|
|
|
// Color maps
|
|
const typeColor = buildMap(data.nodes.map(n => n.entity_type));
|
|
const relColor = linkColorMap(data.links.map(l => l.relationship_type));
|
|
const { neighbors } = buildAdjacency(data.nodes, data.links);
|
|
|
|
// Build overlay controls
|
|
let namesVisible = true;
|
|
let edgeLabelsVisible = true;
|
|
|
|
const togglePressedState = (button, state) => {
|
|
if (!button) return;
|
|
button.setAttribute('aria-pressed', state ? 'true' : 'false');
|
|
button.classList.toggle('kg-toggle-active', !!state);
|
|
};
|
|
|
|
const { input, namesToggle, labelToggle } = attachOverlay(container, {
|
|
onSearch: (q) => focusSearch(q),
|
|
onToggleNames: () => {
|
|
namesVisible = !namesVisible;
|
|
label.style('display', namesVisible ? null : 'none');
|
|
togglePressedState(namesToggle, namesVisible);
|
|
},
|
|
onToggleEdgeLabels: () => {
|
|
edgeLabelsVisible = !edgeLabelsVisible;
|
|
linkLabel.style('display', edgeLabelsVisible ? null : 'none');
|
|
togglePressedState(labelToggle, edgeLabelsVisible);
|
|
},
|
|
onCenter: () => zoomTo(1, [width / 2, height / 2])
|
|
});
|
|
|
|
togglePressedState(namesToggle, namesVisible);
|
|
togglePressedState(labelToggle, edgeLabelsVisible);
|
|
|
|
// SVG + zoom
|
|
const svg = d3.select(container)
|
|
.append('svg')
|
|
.attr('width', '100%')
|
|
.attr('height', height)
|
|
.attr('viewBox', [0, 0, width, height])
|
|
.attr('style', 'cursor: grab; touch-action: none; background: transparent;')
|
|
.call(d3.zoom().scaleExtent([0.25, 5]).on('zoom', (event) => {
|
|
g.attr('transform', event.transform);
|
|
}));
|
|
|
|
const g = svg.append('g');
|
|
|
|
// Defs for arrows
|
|
const defs = svg.append('defs');
|
|
const markerFor = (key, color) => {
|
|
const id = `arrow-${key.replace(/[^a-z0-9_-]/gi, '_')}`;
|
|
if (!document.getElementById(id)) {
|
|
defs.append('marker')
|
|
.attr('id', id)
|
|
.attr('viewBox', '0 -5 10 10')
|
|
.attr('refX', 16)
|
|
.attr('refY', 0)
|
|
.attr('markerWidth', 6)
|
|
.attr('markerHeight', 6)
|
|
.attr('orient', 'auto')
|
|
.append('path')
|
|
.attr('d', 'M0,-5L10,0L0,5')
|
|
.attr('fill', color);
|
|
}
|
|
return `url(#${id})`;
|
|
};
|
|
|
|
// Forces
|
|
const linkForce = d3.forceLink(data.links)
|
|
.id(d => d.id)
|
|
.distance(l => 70)
|
|
.strength(0.5);
|
|
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
.force('link', linkForce)
|
|
.force('charge', d3.forceManyBody().strength(-220))
|
|
.force('center', d3.forceCenter(width / 2, height / 2))
|
|
.force('collision', d3.forceCollide().radius(d => radiusForDegree(d.degree) + 6))
|
|
.force('y', d3.forceY(height / 2).strength(0.02))
|
|
.force('x', d3.forceX(width / 2).strength(0.02));
|
|
|
|
// Links as paths so we can curve + arrow
|
|
const link = g.append('g')
|
|
.attr('fill', 'none')
|
|
.attr('stroke-opacity', 0.7)
|
|
.selectAll('path')
|
|
.data(data.links)
|
|
.join('path')
|
|
.attr('stroke', d => relColor.get(d.relationship_type) || '#CBD5E1')
|
|
.attr('stroke-width', 1.5)
|
|
.attr('marker-end', d => markerFor(d.relationship_type || 'rel', relColor.get(d.relationship_type) || '#CBD5E1'));
|
|
|
|
// Optional edge labels (midpoint)
|
|
const linkLabel = g.append('g')
|
|
.selectAll('text')
|
|
.data(data.links)
|
|
.join('text')
|
|
.attr('font-size', 9)
|
|
.attr('fill', '#475569')
|
|
.attr('text-anchor', 'middle')
|
|
.attr('opacity', 0.7)
|
|
.text(d => d.relationship_type || '');
|
|
|
|
// Nodes
|
|
const node = g.append('g')
|
|
.attr('stroke', '#fff')
|
|
.attr('stroke-width', 1.5)
|
|
.selectAll('circle')
|
|
.data(data.nodes)
|
|
.join('circle')
|
|
.attr('r', d => radiusForDegree(d.degree))
|
|
.attr('fill', d => typeColor.get(d.entity_type) || '#94A3B8')
|
|
.attr('cursor', 'pointer')
|
|
.on('mouseenter', function (_evt, d) { setHighlight(d); })
|
|
.on('mouseleave', function () { clearHighlight(); })
|
|
.on('click', function (_evt, d) {
|
|
// pin/unpin on click
|
|
if (d.fx == null) { d.fx = d.x; d.fy = d.y; this.setAttribute('data-pinned', 'true'); }
|
|
else { d.fx = null; d.fy = null; this.removeAttribute('data-pinned'); }
|
|
})
|
|
.call(d3.drag()
|
|
.on('start', (event, d) => {
|
|
if (!event.active) simulation.alphaTarget(0.3).restart();
|
|
d.fx = d.x; d.fy = d.y;
|
|
})
|
|
.on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
|
|
.on('end', (event, d) => { if (!event.active) simulation.alphaTarget(0); }));
|
|
|
|
node.append('title').text(d => `${d.name} • ${d.entity_type} • deg ${d.degree}`);
|
|
|
|
// Labels
|
|
const label = g.append('g')
|
|
.selectAll('text')
|
|
.data(data.nodes)
|
|
.join('text')
|
|
.text(d => d.name)
|
|
.attr('font-size', 11)
|
|
.attr('fill', '#111827')
|
|
.attr('stroke', 'white')
|
|
.attr('paint-order', 'stroke')
|
|
.attr('stroke-width', 3)
|
|
.attr('dx', d => radiusForDegree(d.degree) + 6)
|
|
.attr('dy', 4);
|
|
|
|
// Legends
|
|
attachLegends(container, typeColor, relColor);
|
|
|
|
// Highlight logic
|
|
function setHighlight(n) {
|
|
const ns = neighbors.get(n.id) || new Set();
|
|
node.attr('opacity', d => (d.id === n.id || ns.has(d.id)) ? 1 : 0.15);
|
|
label.attr('opacity', d => (d.id === n.id || ns.has(d.id)) ? 1 : 0.15);
|
|
link
|
|
.attr('stroke-opacity', d => {
|
|
const s = (typeof d.source === 'object') ? d.source.id : d.source;
|
|
const t = (typeof d.target === 'object') ? d.target.id : d.target;
|
|
return (s === n.id || t === n.id || (ns.has(s) && ns.has(t))) ? 0.9 : 0.05;
|
|
})
|
|
.attr('marker-end', d => {
|
|
const c = relColor.get(d.relationship_type) || '#CBD5E1';
|
|
return markerFor(d.relationship_type || 'rel', c);
|
|
});
|
|
linkLabel.attr('opacity', d => {
|
|
const s = (typeof d.source === 'object') ? d.source.id : d.source;
|
|
const t = (typeof d.target === 'object') ? d.target.id : d.target;
|
|
return (s === n.id || t === n.id) ? 0.9 : 0.05;
|
|
});
|
|
}
|
|
function clearHighlight() {
|
|
node.attr('opacity', 1);
|
|
label.attr('opacity', 1);
|
|
link.attr('stroke-opacity', 0.7);
|
|
linkLabel.attr('opacity', 0.7);
|
|
}
|
|
|
|
// Search + center helpers
|
|
function centerOnNode(n) {
|
|
const k = 1.5; // zoom factor
|
|
const x = n.x, y = n.y;
|
|
const transform = d3.zoomIdentity.translate(width / 2 - k * x, height / 2 - k * y).scale(k);
|
|
svg.transition().duration(350).call(zoom.transform, transform);
|
|
}
|
|
function focusSearch(query) {
|
|
if (!query) return;
|
|
const q = query.toLowerCase();
|
|
const found = data.nodes.find(n => (n.name || '').toLowerCase().includes(q));
|
|
if (found) { setHighlight(found); centerOnNode(found); }
|
|
}
|
|
|
|
// Expose zoom instance
|
|
const zoom = d3.zoom().scaleExtent([0.25, 5]).on('zoom', (event) => g.attr('transform', event.transform));
|
|
svg.call(zoom);
|
|
function zoomTo(k, center) {
|
|
const transform = d3.zoomIdentity.translate(width / 2 - k * center[0], height / 2 - k * center[1]).scale(k);
|
|
svg.transition().duration(250).call(zoom.transform, transform);
|
|
}
|
|
|
|
// Tick update
|
|
simulation.on('tick', () => {
|
|
link.attr('d', curvedPath);
|
|
node.attr('cx', d => d.x).attr('cy', d => d.y);
|
|
label.attr('x', d => d.x).attr('y', d => d.y);
|
|
linkLabel.attr('x', d => (d.source.x + d.target.x) / 2).attr('y', d => (d.source.y + d.target.y) / 2);
|
|
});
|
|
|
|
// Resize handling
|
|
const ro = new ResizeObserver(() => {
|
|
const w = container.clientWidth || width;
|
|
const h = container.clientHeight || height;
|
|
svg.attr('viewBox', [0, 0, w, h]).attr('height', h);
|
|
simulation.force('center', d3.forceCenter(w / 2, h / 2));
|
|
simulation.alpha(0.3).restart();
|
|
});
|
|
ro.observe(container);
|
|
}
|
|
|
|
function tryRender(root) {
|
|
const container = (root || document).querySelector('#knowledge-graph');
|
|
if (container) renderKnowledgeGraph(root);
|
|
}
|
|
|
|
// Expose for debugging/manual re-render
|
|
window.renderKnowledgeGraph = () => renderKnowledgeGraph(document);
|
|
|
|
// Full page load
|
|
document.addEventListener('DOMContentLoaded', () => tryRender(document));
|
|
|
|
// HTMX partial swaps
|
|
document.body.addEventListener('knowledge-graph-refresh', () => {
|
|
tryRender(document);
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterSettle', (evt) => {
|
|
tryRender(evt && evt.target ? evt.target : document);
|
|
});
|
|
})();
|