feat(dashboard): huge feature upgrade - native dark mode, interactive graph inspector panel, type filtering and legend, actionable kanban completion via new POST endpoint, and fuzzy search highlighting
This commit is contained in:
Riz Ashraf committed
1 parent
4d4fc32616
commit
db8fd367f6
4 files changed
+519
-109
No files matched your search
+411
-109
@@ -5,35 +5,84 @@
|
||||
<title>Antigravity Memory Hub</title>
|
||||
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f4f7f6;
|
||||
--panel-bg: white;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--border-color: #e1e8ed;
|
||||
--header-border: #f0f2f5;
|
||||
--canvas-bg: #fafbfc;
|
||||
--card-bg: white;
|
||||
--kanban-bg: #f8f9fa;
|
||||
--kanban-card: white;
|
||||
--kanban-completed-bg: #fcfcfc;
|
||||
--btn-bg: white;
|
||||
--btn-border: #dcdde1;
|
||||
--btn-hover: #f8f9fa;
|
||||
--search-hover: #f0f2f5;
|
||||
--input-bg: white;
|
||||
--input-text: #2c3e50;
|
||||
--inspector-bg: rgba(255,255,255,0.98);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-color: #12151a;
|
||||
--panel-bg: #1e242b;
|
||||
--text-primary: #d1d8e0;
|
||||
--text-secondary: #a4b0be;
|
||||
--border-color: #2c3643;
|
||||
--header-border: #2c3643;
|
||||
--canvas-bg: #171b21;
|
||||
--card-bg: #2b333d;
|
||||
--kanban-bg: #1a1e24;
|
||||
--kanban-card: #2b333d;
|
||||
--kanban-completed-bg: #222831;
|
||||
--btn-bg: #2b333d;
|
||||
--btn-border: #3d4a57;
|
||||
--btn-hover: #3d4a57;
|
||||
--search-hover: #2c3643;
|
||||
--input-bg: #171b21;
|
||||
--input-text: #d1d8e0;
|
||||
--inspector-bg: rgba(30, 36, 43, 0.98);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f4f7f6;
|
||||
color: #2c3e50;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.header-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
background: var(--panel-bg);
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.header-bar h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
color: #2c3e50;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.status-dot {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
@@ -43,6 +92,17 @@
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 5px #2ecc71;
|
||||
}
|
||||
.theme-toggle {
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.5em;
|
||||
padding: 0;
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -50,36 +110,62 @@
|
||||
min-height: 0;
|
||||
}
|
||||
.panel {
|
||||
background: white;
|
||||
background: var(--panel-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.panel h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #34495e;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.2em;
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
border-bottom: 2px solid var(--header-border);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.graph-panel {
|
||||
flex: 2;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Filter Bar */
|
||||
.graph-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.filter-chip {
|
||||
background: var(--btn-bg);
|
||||
border: 1px solid var(--btn-border);
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.filter-chip.active {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border-color: #2980b9;
|
||||
}
|
||||
|
||||
#network-container {
|
||||
flex: 1;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
border: 1px solid #e1e8ed;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: #fafbfc;
|
||||
background: var(--canvas-bg);
|
||||
}
|
||||
.graph-controls {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
top: 105px;
|
||||
right: 35px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
@@ -87,21 +173,58 @@
|
||||
gap: 5px;
|
||||
}
|
||||
.graph-controls button {
|
||||
background: white;
|
||||
border: 1px solid #dcdde1;
|
||||
background: var(--btn-bg);
|
||||
border: 1px solid var(--btn-border);
|
||||
border-radius: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #34495e;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.graph-controls button:hover {
|
||||
background: #f8f9fa;
|
||||
border-color: #bdc3c7;
|
||||
background: var(--btn-hover);
|
||||
}
|
||||
|
||||
/* Inspector Panel */
|
||||
#inspector-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 350px;
|
||||
background: var(--inspector-bg);
|
||||
border-left: 1px solid var(--border-color);
|
||||
z-index: 20;
|
||||
padding: 20px;
|
||||
box-shadow: -4px 0 15px rgba(0,0,0,0.1);
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
#inspector-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
#inspector-close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#inspector-close:hover { color: #e74c3c; }
|
||||
.inspector-meta {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.right-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -117,11 +240,13 @@
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #dcdde1;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 15px;
|
||||
font-size: 0.95em;
|
||||
background: var(--input-bg);
|
||||
color: var(--input-text);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
@@ -133,18 +258,28 @@
|
||||
flex: 1;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#search-results::-webkit-scrollbar { width: 6px; }
|
||||
#search-results::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }
|
||||
.search-result-item {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
border-bottom: 1px solid var(--header-border);
|
||||
}
|
||||
.search-result-item:hover {
|
||||
background: var(--search-hover);
|
||||
}
|
||||
.search-result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.search-result-item strong {
|
||||
color: #2980b9;
|
||||
color: #3498db;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.search-highlight {
|
||||
background: rgba(241, 196, 15, 0.3);
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.kanban-panel {
|
||||
flex: 1.5;
|
||||
min-height: 0;
|
||||
@@ -157,18 +292,18 @@
|
||||
}
|
||||
.kanban-column {
|
||||
flex: 1;
|
||||
background: #f8f9fa;
|
||||
background: var(--kanban-bg);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
border: 1px solid #e1e8ed;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.kanban-column h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 0.85em;
|
||||
color: #7f8c8d;
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
@@ -186,29 +321,54 @@
|
||||
width: 6px;
|
||||
}
|
||||
.kanban-items::-webkit-scrollbar-thumb {
|
||||
background-color: #bdc3c7;
|
||||
background-color: var(--border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.task-card {
|
||||
background: white;
|
||||
background: var(--kanban-card);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #3498db;
|
||||
font-size: 0.85em;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
}
|
||||
.task-card.completed {
|
||||
border-left-color: #2ecc71;
|
||||
background-color: #fcfcfc;
|
||||
color: #7f8c8d;
|
||||
background-color: var(--kanban-completed-bg);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.task-card strong {
|
||||
color: #2c3e50;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 1.05em;
|
||||
padding-right: 25px; /* space for check button */
|
||||
}
|
||||
.task-card.completed strong {
|
||||
text-decoration: line-through;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.complete-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
font-size: 1em;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.complete-btn:hover {
|
||||
color: #2ecc71;
|
||||
border-color: #2ecc71;
|
||||
background: rgba(46, 204, 113, 0.1);
|
||||
}
|
||||
|
||||
.activity-panel {
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
@@ -218,15 +378,18 @@
|
||||
flex: 1;
|
||||
font-family: 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.85em;
|
||||
background: #1e272e;
|
||||
background: #111417;
|
||||
color: #4cd137;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
|
||||
box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
#activity-feed::-webkit-scrollbar { width: 6px; }
|
||||
#activity-feed::-webkit-scrollbar-thumb { background-color: #2c3643; border-radius: 3px; }
|
||||
.feed-entry {
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.feed-entry .time {
|
||||
color: #7f8c8d;
|
||||
@@ -237,18 +400,37 @@
|
||||
<body>
|
||||
<div class="header-bar">
|
||||
<h1>🧠 Antigravity Memory Hub</h1>
|
||||
<div style="font-weight: 500;"><span class="status-dot"></span>System Online</div>
|
||||
<div class="header-actions">
|
||||
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
|
||||
<div style="font-weight: 500;"><span class="status-dot"></span>System Online</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="panel graph-panel">
|
||||
<h2>Knowledge Graph</h2>
|
||||
<div class="graph-filters" id="graph-filters">
|
||||
<!-- Filters injected dynamically -->
|
||||
</div>
|
||||
<div class="graph-controls">
|
||||
<button onclick="zoomGraph(0.2)" title="Zoom In">+</button>
|
||||
<button onclick="zoomGraph(-0.2)" title="Zoom Out">-</button>
|
||||
<button onclick="resetGraph()" title="Reset View">⌂</button>
|
||||
</div>
|
||||
<div id="network-container"></div>
|
||||
<div id="network-container">
|
||||
<div id="inspector-panel">
|
||||
<button id="inspector-close" onclick="closeInspector()">✕</button>
|
||||
<h2 id="inspector-title" style="margin-top:0; color:var(--text-primary);"></h2>
|
||||
<div class="inspector-meta">
|
||||
<div><strong>Type:</strong> <span id="inspector-type"></span></div>
|
||||
<div><strong>Namespace:</strong> <span id="inspector-namespace"></span></div>
|
||||
</div>
|
||||
<h4 style="margin:10px 0 5px 0;">Observations</h4>
|
||||
<ul id="inspector-observations" style="padding-left:20px; font-size:0.9em; line-height:1.4;"></ul>
|
||||
<h4 style="margin:15px 0 5px 0;">Relations</h4>
|
||||
<ul id="inspector-relations" style="padding-left:20px; font-size:0.9em; line-height:1.4;"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-column">
|
||||
@@ -280,7 +462,48 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Graph Controls
|
||||
// --- Theme Toggle ---
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
}
|
||||
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMatchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
|
||||
// --- Global Graph Data ---
|
||||
let network = null;
|
||||
let nodesData = new vis.DataSet();
|
||||
let edgesData = new vis.DataSet();
|
||||
let rawEntities = {};
|
||||
let rawRelations = [];
|
||||
let activeFilters = new Set();
|
||||
let allTypes = new Set();
|
||||
|
||||
const typeColors = {
|
||||
'Concept': { bg: '#9b59b6', border: '#8e44ad' },
|
||||
'Technology': { bg: '#3498db', border: '#2980b9' },
|
||||
'Infrastructure': { bg: '#e67e22', border: '#d35400' },
|
||||
'Database_Table': { bg: '#f1c40f', border: '#f39c12' },
|
||||
'Service': { bg: '#1abc9c', border: '#f39c12' },
|
||||
'Tool': { bg: '#e74c3c', border: '#c0392b' },
|
||||
'Integration': { bg: '#2ecc71', border: '#27ae60' },
|
||||
'System': { bg: '#34495e', border: '#2c3e50' },
|
||||
'Rule': { bg: '#fd79a8', border: '#e84393' }
|
||||
};
|
||||
|
||||
function getColorForType(type) {
|
||||
if (typeColors[type]) return typeColors[type];
|
||||
// Hash string to color
|
||||
let hash = 0;
|
||||
for (let i = 0; i < type.length; i++) hash = type.charCodeAt(i) + ((hash << 5) - hash);
|
||||
const hue = hash % 360;
|
||||
return { background: `hsl(${hue}, 70%, 60%)`, border: `hsl(${hue}, 70%, 40%)` };
|
||||
}
|
||||
|
||||
// --- Graph Controls ---
|
||||
function zoomGraph(step) {
|
||||
if (!network) return;
|
||||
const currentScale = network.getScale();
|
||||
@@ -291,75 +514,124 @@
|
||||
network.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
|
||||
}
|
||||
|
||||
// Graph Initialization
|
||||
let network = null;
|
||||
let nodesData = new vis.DataSet();
|
||||
let edgesData = new vis.DataSet();
|
||||
// --- Graph Inspector ---
|
||||
function closeInspector() {
|
||||
document.getElementById('inspector-panel').classList.remove('open');
|
||||
if (network) network.unselectAll();
|
||||
}
|
||||
function showInspector(nodeId) {
|
||||
const entity = rawEntities[nodeId];
|
||||
if (!entity) return;
|
||||
|
||||
document.getElementById('inspector-title').innerText = entity.name;
|
||||
document.getElementById('inspector-type').innerText = entity.entityType;
|
||||
document.getElementById('inspector-namespace').innerText = entity.namespace || 'global';
|
||||
|
||||
const obsHtml = (entity.observations || []).map(o => `<li>${o}</li>`).join('');
|
||||
document.getElementById('inspector-observations').innerHTML = obsHtml || '<li><em>No observations recorded.</em></li>';
|
||||
|
||||
const rels = rawRelations.filter(r => r.from === nodeId || r.to === nodeId);
|
||||
const relHtml = rels.map(r => {
|
||||
if (r.from === nodeId) return `<li>→ <em>${r.relationType}</em> → <strong>${r.to}</strong></li>`;
|
||||
return `<li>← <em>${r.relationType}</em> ← <strong>${r.from}</strong></li>`;
|
||||
}).join('');
|
||||
document.getElementById('inspector-relations').innerHTML = relHtml || '<li><em>No direct relations.</em></li>';
|
||||
|
||||
document.getElementById('inspector-panel').classList.add('open');
|
||||
}
|
||||
|
||||
function toggleFilter(type) {
|
||||
if (activeFilters.has(type)) activeFilters.delete(type);
|
||||
else activeFilters.add(type);
|
||||
renderFilters();
|
||||
updateGraphData();
|
||||
}
|
||||
|
||||
function renderFilters() {
|
||||
const container = document.getElementById('graph-filters');
|
||||
container.innerHTML = Array.from(allTypes).sort().map(type => {
|
||||
const isActive = activeFilters.has(type);
|
||||
const color = getColorForType(type).background;
|
||||
return `<button class="filter-chip ${isActive ? 'active' : ''}" onclick="toggleFilter('${type}')">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${color};margin-right:4px;"></span>
|
||||
${type}
|
||||
</button>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function updateGraphData() {
|
||||
const newNodes = [];
|
||||
const newEdges = [];
|
||||
const nodeIds = new Set();
|
||||
|
||||
for (const [name, entity] of Object.entries(rawEntities)) {
|
||||
allTypes.add(entity.entityType);
|
||||
// If filters are active, only show matching types
|
||||
if (activeFilters.size > 0 && !activeFilters.has(entity.entityType)) continue;
|
||||
|
||||
const color = getColorForType(entity.entityType);
|
||||
|
||||
newNodes.push({
|
||||
id: name,
|
||||
label: name,
|
||||
title: `<strong>${name}</strong><br/>${entity.entityType}`,
|
||||
color: { background: color.bg || color.background, border: color.border },
|
||||
font: { color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#eee' : '#333' }
|
||||
});
|
||||
nodeIds.add(name);
|
||||
}
|
||||
|
||||
rawRelations.forEach(r => {
|
||||
if (nodeIds.has(r.from) && nodeIds.has(r.to)) {
|
||||
newEdges.push({
|
||||
id: r.from + '-' + r.to + '-' + r.relationType,
|
||||
from: r.from,
|
||||
to: r.to,
|
||||
label: r.relationType,
|
||||
arrows: 'to',
|
||||
font: { color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#aaa' : '#666', strokeWidth: 0 }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const currentNodes = nodesData.getIds();
|
||||
nodesData.remove(currentNodes.filter(id => !nodeIds.has(id)));
|
||||
nodesData.update(newNodes);
|
||||
|
||||
const currentEdges = edgesData.getIds();
|
||||
const newEdgeIds = new Set(newEdges.map(e => e.id));
|
||||
edgesData.remove(currentEdges.filter(id => !newEdgeIds.has(id)));
|
||||
edgesData.update(newEdges);
|
||||
|
||||
renderFilters();
|
||||
}
|
||||
|
||||
async function loadGraph() {
|
||||
try {
|
||||
const res = await fetch('/api/graph');
|
||||
const data = await res.json();
|
||||
|
||||
const newNodes = [];
|
||||
const newEdges = [];
|
||||
const nodeIds = new Set();
|
||||
rawEntities = data.entities || {};
|
||||
rawRelations = data.relations || [];
|
||||
|
||||
for (const [name, entity] of Object.entries(data.entities)) {
|
||||
newNodes.push({
|
||||
id: name,
|
||||
label: name,
|
||||
title: entity.observations.join('\n')
|
||||
});
|
||||
nodeIds.add(name);
|
||||
}
|
||||
|
||||
data.relations.forEach(r => {
|
||||
if (nodeIds.has(r.from) && nodeIds.has(r.to)) {
|
||||
newEdges.push({
|
||||
id: r.from + '-' + r.to + '-' + r.relationType,
|
||||
from: r.from,
|
||||
to: r.to,
|
||||
label: r.relationType,
|
||||
arrows: 'to'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Sync nodes
|
||||
const currentNodes = nodesData.getIds();
|
||||
const toRemoveNodes = currentNodes.filter(id => !nodeIds.has(id));
|
||||
nodesData.remove(toRemoveNodes);
|
||||
nodesData.update(newNodes);
|
||||
|
||||
// Sync edges
|
||||
const currentEdges = edgesData.getIds();
|
||||
const newEdgeIds = new Set(newEdges.map(e => e.id));
|
||||
const toRemoveEdges = currentEdges.filter(id => !newEdgeIds.has(id));
|
||||
edgesData.remove(toRemoveEdges);
|
||||
edgesData.update(newEdges);
|
||||
updateGraphData();
|
||||
|
||||
if (!network) {
|
||||
const container = document.getElementById('network-container');
|
||||
const options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 16,
|
||||
font: { size: 12, color: '#333' },
|
||||
color: { background: '#3498db', border: '#2980b9' },
|
||||
shadow: true
|
||||
},
|
||||
edges: {
|
||||
color: { color: '#bdc3c7' },
|
||||
font: { size: 10, align: 'middle' },
|
||||
smooth: { type: 'continuous' }
|
||||
},
|
||||
physics: {
|
||||
barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, springLength: 95 }
|
||||
},
|
||||
nodes: { shape: 'dot', size: 16, font: { size: 12 } },
|
||||
edges: { color: { inherit: 'from', opacity: 0.6 }, font: { size: 10, align: 'middle' }, smooth: { type: 'continuous' } },
|
||||
physics: { barnesHut: { gravitationalConstant: -2000, centralGravity: 0.3, springLength: 95 } },
|
||||
interaction: { hover: true, tooltipDelay: 100 }
|
||||
};
|
||||
network = new vis.Network(container, { nodes: nodesData, edges: edgesData }, options);
|
||||
|
||||
network.on("selectNode", function(params) {
|
||||
if (params.nodes.length > 0) showInspector(params.nodes[0]);
|
||||
});
|
||||
network.on("deselectNode", function(params) {
|
||||
if (params.nodes.length === 0) closeInspector();
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load graph", err);
|
||||
@@ -367,7 +639,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Kanban Board Initialization
|
||||
// --- Kanban Board ---
|
||||
async function completeTask(id) {
|
||||
try {
|
||||
await fetch(`/api/tasks/${id}/complete`, { method: 'POST' });
|
||||
loadTasks(); // Refresh UI instantly
|
||||
} catch(e) { console.error("Failed to complete task", e); }
|
||||
}
|
||||
|
||||
async function loadTasks() {
|
||||
try {
|
||||
const res = await fetch('/api/tasks');
|
||||
@@ -380,24 +659,34 @@
|
||||
|
||||
tasks.forEach(t => {
|
||||
const card = document.createElement('div');
|
||||
card.className = `task-card ${t.status === 'completed' ? 'completed' : ''}`;
|
||||
card.innerHTML = `<strong>${t.title}</strong>${t.description}`;
|
||||
const isCompleted = t.status === 'completed';
|
||||
card.className = `task-card ${isCompleted ? 'completed' : ''}`;
|
||||
|
||||
if (t.status === 'completed') {
|
||||
doneContainer.appendChild(card);
|
||||
} else {
|
||||
activeContainer.appendChild(card);
|
||||
let html = `<strong>${t.title}</strong>${t.description}`;
|
||||
if (!isCompleted) {
|
||||
html += `<button class="complete-btn" onclick="completeTask('${t.id}')" title="Mark Completed">✓</button>`;
|
||||
}
|
||||
card.innerHTML = html;
|
||||
|
||||
if (isCompleted) doneContainer.appendChild(card);
|
||||
else activeContainer.appendChild(card);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to load tasks", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
// --- Fuzzy-ish Search ---
|
||||
function highlightText(text, query) {
|
||||
if (!query) return text;
|
||||
const regex = new RegExp(`(${query})`, 'gi');
|
||||
return text.replace(regex, '<span class="search-highlight">$1</span>');
|
||||
}
|
||||
|
||||
async function handleSearch(e) {
|
||||
if (e.key === 'Enter') {
|
||||
const q = e.target.value;
|
||||
const q = e.target.value;
|
||||
// Provide live feedback if they type at least 3 characters, or hit Enter
|
||||
if (e.key === 'Enter' || q.length >= 3 || q.length === 0) {
|
||||
if (!q) {
|
||||
document.getElementById('search-results').innerHTML = '';
|
||||
return;
|
||||
@@ -405,23 +694,28 @@
|
||||
const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
|
||||
const data = await res.json();
|
||||
const container = document.getElementById('search-results');
|
||||
|
||||
if (data.results.length === 0) {
|
||||
container.innerHTML = '<div style="padding:15px;color:var(--text-secondary);">No results found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.results.map(r => `
|
||||
<div class="search-result-item">
|
||||
<strong>${r.type_name}</strong>
|
||||
<div>${r.content.substring(0, 100)}...</div>
|
||||
<div style="font-size:0.85em;color:#95a5a6;margin-top:4px;">Score: ${r.score.toFixed(2)}</div>
|
||||
<div class="search-result-item" onclick="if(rawEntities['${r.type_name}']){ showInspector('${r.type_name}'); network.selectNodes(['${r.type_name}']); network.focus('${r.type_name}', {scale:1.2, animation:true}); }" style="cursor:pointer;">
|
||||
<strong>${highlightText(r.type_name, q)}</strong>
|
||||
<div>${highlightText(r.content.substring(0, 150), q)}...</div>
|
||||
<div style="font-size:0.85em;color:var(--text-secondary);margin-top:4px;">Score: ${r.score.toFixed(2)}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
}
|
||||
|
||||
// SSE Activity Feed
|
||||
// --- SSE Activity Feed ---
|
||||
function setupSSE() {
|
||||
const es = new EventSource('/sse');
|
||||
const feed = document.getElementById('activity-feed');
|
||||
|
||||
es.addEventListener('activity', function(event) {
|
||||
// If it's the endpoint initialization message, ignore it visually
|
||||
if (event.data.startsWith('/messages?')) return;
|
||||
|
||||
const div = document.createElement('div');
|
||||
@@ -429,15 +723,24 @@
|
||||
const time = new Date().toLocaleTimeString();
|
||||
div.innerHTML = `<span class="time">[${time}]</span> ${event.data}`;
|
||||
feed.appendChild(div);
|
||||
feed.scrollTop = feed.scrollHeight;
|
||||
|
||||
// Auto-scroll logic
|
||||
const isScrolledToBottom = feed.scrollHeight - feed.clientHeight <= feed.scrollTop + 20;
|
||||
if (isScrolledToBottom) {
|
||||
feed.scrollTop = feed.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Start
|
||||
// --- Start ---
|
||||
loadGraph();
|
||||
loadTasks();
|
||||
setupSSE();
|
||||
|
||||
// Listen to theme toggle changes to update graph font colors
|
||||
const observer = new MutationObserver(() => updateGraphData());
|
||||
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
||||
|
||||
setInterval(() => {
|
||||
loadGraph();
|
||||
loadTasks();
|
||||
@@ -445,4 +748,3 @@
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in new issue
Block a user