feat: implement derived filtered logs and enhance live polling in KeyLogViewer

Author: Ahmedhossamdev

src/lib/components/KeyLogViewer.svelte

@@ -36,6 +36,14 @@
 	let chartTimeRange = $state<'30m' | '1h' | '2h' | '6h' | '24h' | 'all'>('all');
 	let chartLogs = $state<KeyLogEntry[]>([]);
 
+	const filteredLogs = $derived(
+		loggerState.logs.filter((log) => {
+			if (loggerState.filterMode === 'all') return true;
+			const match = valuesMatch(log.server1_value, log.server2_value);
+			return loggerState.filterMode === 'match' ? match : !match;
+		})
+	);
+
 	const trendByLogId = $derived.by(() => {
 		const map = new SvelteMap<
 			number,
@@ -253,21 +261,19 @@
 		}
 	}
 
-	const filteredLogs = $derived(
-		loggerState.logs.filter((log) => {
-			if (loggerState.filterMode === 'all') return true;
-			const match = valuesMatch(log.server1_value, log.server2_value);
-			return loggerState.filterMode === 'match' ? match : !match;
-		})
-	);
-
 	onMount(() => {
 		fetchLoggedEndpoints();
-		if (loggerState.selectedEndpoint) {
-			fetchKeyPaths(loggerState.selectedEndpoint);
-			fetchLogs(false);
+	});
+
+	$effect(() => {
+		void loggedEndpoints;
+		if (!loggerState.selectedEndpoint) {
+			if (comparatorState.selectedEndpoint) {
+				loggerState.selectedEndpoint = comparatorState.selectedEndpoint;
+			} else if (loggedEndpoints.length > 0) {
+				loggerState.selectedEndpoint = loggedEndpoints[0];
+			}
 		}
-		fetchCount();
 	});
 
 	$effect(() => {
@@ -293,9 +299,10 @@
 		});
 	});
 
+	let livePollTimer: ReturnType<typeof setInterval> | undefined = $state();
+
 	$effect(() => {
 		void logState.lastUpdated;
-		if (loggerState.timeRange !== 'live') return;
 		untrack(() => {
 			if (loggerState.selectedEndpoint) {
 				fetchLogs(true);
@@ -304,6 +311,28 @@
 		});
 	});
 
+	$effect(() => {
+		if (loggerState.timeRange === 'live' && loggerState.selectedEndpoint) {
+			fetchLogs(true);
+			fetchCount();
+			livePollTimer = setInterval(() => {
+				fetchLogs(true);
+				fetchCount();
+			}, 1000);
+			return () => {
+				if (livePollTimer !== undefined) {
+					clearInterval(livePollTimer);
+					livePollTimer = undefined;
+				}
+			};
+		} else {
+			if (livePollTimer !== undefined) {
+				clearInterval(livePollTimer);
+				livePollTimer = undefined;
+			}
+		}
+	});
+
 	async function fetchLoggedEndpoints() {
 		try {
 			const res = await fetch('/api/keylog?meta=endpoints');
@@ -392,6 +421,7 @@
 				: '/api/keylog';
 			await fetch(url, { method: 'DELETE' });
 			loggerState.logs = [];
+			chartLogs = [];
 			await fetchLoggedEndpoints();
 			await fetchCount();
 		} catch (e) {

src/routes/+page.svelte

@@ -364,46 +364,51 @@
 					</div>
 				{/snippet}
 			</SplitPane>
-		{:else if activeTab === 'comparator'}
-			<ComparatorPanel />
-		{:else if activeTab === 'protobuf'}
-			<div class="h-full">
-				<ProtobufPanel />
+		{:else}
+			<div class="h-full {activeTab !== 'comparator' ? 'hidden' : ''}">
+				<ComparatorPanel />
 			</div>
-		{:else if activeTab === 'gtfs-static'}
-			<div class="h-full">
-				<GtfsStaticViewer />
+			<div class="h-full {activeTab !== 'protobuf' ? 'hidden' : ''}">
+				<div class="h-full">
+					<ProtobufPanel />
+				</div>
 			</div>
-		{:else if activeTab === 'logger'}
-			<div class="flex h-full flex-col">
-				<div class="mb-6 flex shrink-0 justify-center">
-					<div class="inline-flex rounded-xl bg-gray-200/50 p-1 dark:bg-gray-800/50">
-						<button
-							onclick={() => (loggerSubTab = 'api')}
-							class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab === 'api'
-								? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
-								: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-						>
-							API Response Logs
-						</button>
-						<button
-							onclick={() => (loggerSubTab = 'gtfsrt')}
-							class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab ===
-							'gtfsrt'
-								? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
-								: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
-						>
-							GTFS-RT Snapshots
-						</button>
-					</div>
+			<div class="h-full {activeTab !== 'gtfs-static' ? 'hidden' : ''}">
+				<div class="h-full">
+					<GtfsStaticViewer />
 				</div>
+			</div>
+			<div class="h-full {activeTab !== 'logger' ? 'hidden' : ''}">
+				<div class="flex h-full flex-col">
+					<div class="mb-6 flex shrink-0 justify-center">
+						<div class="inline-flex rounded-xl bg-gray-200/50 p-1 dark:bg-gray-800/50">
+							<button
+								onclick={() => (loggerSubTab = 'api')}
+								class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab === 'api'
+									? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
+									: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
+							>
+								API Response Logs
+							</button>
+							<button
+								onclick={() => (loggerSubTab = 'gtfsrt')}
+								class="rounded-lg px-6 py-2 text-sm font-bold transition-all {loggerSubTab ===
+								'gtfsrt'
+									? 'bg-white text-green-600 shadow-sm dark:bg-gray-700 dark:text-green-400'
+									: 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
+							>
+								GTFS-RT Snapshots
+							</button>
+						</div>
+					</div>
 
-				<div class="min-h-0 flex-1">
-					{#if loggerSubTab === 'api'}
-						<KeyLogViewer />
-					{:else}
-						<GtfsRtLogViewer />
-					{/if}
+					<div class="min-h-0 flex-1">
+						{#if loggerSubTab === 'api'}
+							<KeyLogViewer />
+						{:else}
+							<GtfsRtLogViewer />
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/if}