Graph of recommendations in control panel (#867)

* add vis-network dependency

* feat: add visualizer route and implement reference graph functionality with mock data

* connect to db + seed + clean mock ups

* fix graph physics

* feat: enhance visualizer with node detail display and interaction

* feat: add key block for selected node detail panel to optimize rendering

* Minor fixes

* feat: enhance reference fetching with API key validation and add missing headers

* feat: add pagination support to getAllReferences method

* feat: enhance getAllReferences method with pagination and API key validation

* feat: enhance graph visualization with filter and detail panels

* feat: improve focus handling in FilterPanel with event prevention

* chore: remove auto-generated next-env.d.ts

* chore: lockfile

---------

Co-authored-by: Ananya Rana <ananyarana2920@gmail.com>

Author: Bekiboo

infrastructure/control-panel/.npmrc

@@ -1 +1,2 @@
-engine-strict=true
+# vis-network required node < 22
+engine-strict=false

infrastructure/control-panel/package.json

@@ -56,6 +56,7 @@
 		"lucide-svelte": "^0.561.0",
 		"qrcode": "^1.5.4",
 		"signature-validator": "workspace:*",
-		"tailwind-merge": "^3.0.2"
+		"tailwind-merge": "^3.0.2",
+		"vis-network": "^10.0.2"
 	}
 }

infrastructure/control-panel/src/routes/+layout.svelte

@@ -14,7 +14,8 @@
 		{ label: 'Dashboard', href: '/' },
 		{ label: 'Monitoring', href: '/monitoring' },
 		{ label: 'Actions', href: '/actions' },
-		{ label: 'Notifications', href: '/notifications' }
+		{ label: 'Notifications', href: '/notifications' },
+		{ label: 'Visualizer', href: '/visualizer' }
 	];
 
 	const isActive = (href: string) => (href === '/' ? pageUrl === '/' : pageUrl.startsWith(href));

infrastructure/control-panel/src/routes/api/references/+server.ts

@@ -0,0 +1,29 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export const GET: RequestHandler = async () => {
+	const baseUrl = env.EREPUTATION_BASE_URL || 'http://localhost:8765';
+
+	try {
+		const controller = new AbortController();
+		const timeout = setTimeout(() => controller.abort(), 5000);
+		const response = await fetch(`${baseUrl}/api/references/all`, {
+			headers: env.VISUALIZER_API_KEY ? { 'x-visualizer-key': env.VISUALIZER_API_KEY } : {},
+			signal: controller.signal,
+		});
+		clearTimeout(timeout);
+		
+
+		if (!response.ok) {
+			console.error('eReputation API error:', response.status, response.statusText);
+			return json({ error: 'Failed to fetch references', references: [] }, { status: 500 });
+		}
+
+		const data = await response.json();
+		return json(data);
+	} catch (error) {
+		console.error('Error fetching references from eReputation:', error);
+		return json({ error: 'Failed to connect to eReputation API', references: [] }, { status: 500 });
+	}
+};

infrastructure/control-panel/src/routes/visualizer/+page.server.ts

@@ -0,0 +1,30 @@
+import type { PageServerLoad } from './$types';
+
+export interface ReferenceEdge {
+	id: string;
+	content: string;
+	numericScore: number | null;
+	referenceType: string;
+	status: string;
+	targetType: string; // "user" | "group" | "platform"
+	targetId: string;
+	targetName: string;
+	author: {
+		id: string;
+		ename: string;
+		name: string;
+	};
+	createdAt: string;
+}
+
+
+export const load: PageServerLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch('/api/references');
+		const data = await response.json();
+		return { references: (data.references ?? []) as ReferenceEdge[] };
+	} catch (error) {
+		console.error('Error loading references for visualizer:', error);
+		return { references: [] as ReferenceEdge[] };
+	}
+};