Breaking - I have no idea what I have done

src/lib/Navbar.svelte

@@ -1,14 +1,9 @@
-<script lang="ts">
-	import StatusText from '$lib/StatusText.svelte';
-</script>
-
 <div>
 	<section>
 		<nav>
 			<a href="/">Home</a>
 			<a href="/map">Map</a>
 		</nav>
-		<StatusText />
 	</section>
 </div>
 

src/lib/PolarPlot.svelte

@@ -0,0 +1,55 @@
+<script>
+	import { WebglPlot, WebglPolar, ColorRGBA } from 'webgl-plot';
+
+	let bInitialised = false;
+
+	export let anAngles_deg;
+	export let strChartID;
+
+	let Chart = undefined;
+	let ChartLines = undefined;
+	let WebGLPlot = undefined;
+	let LineColor = undefined;
+
+	function InitCanvas() {
+		// Ensure HMTL is loaded in
+		if (!document.getElementById(strChartID)) {
+			return;
+		}
+		// Ensure we processed some data (therefore var set)
+		if (!anAngles_deg.length) {
+			return;
+		}
+		// Create the "class" wise context only once
+		if (!WebGLPlot) {
+			ChartLines = [];
+			Chart = document.getElementById(strChartID);
+			WebGLPlot = new WebglPlot(Chart);
+		}
+
+		bInitialised = true;
+	}
+
+	$: {
+		if (!bInitialised) {
+			InitCanvas();
+		}
+
+		if (WebGLPlot && ChartLines) {
+			WebGLPlot.removeDataLines();
+
+			for (let i = 0; i < anAngles_deg.length; i++) {
+				LineColor = new ColorRGBA(0, 0, 0, 1);
+				let line = new WebglPolar(LineColor, 10);
+
+				line.setRtheta(0, 0, 0);
+				line.setRtheta(1, anAngles_deg[i], 10);
+
+				WebGLPlot.addLine(line);
+			}
+			WebGLPlot.update();
+		}
+	}
+</script>
+
+<canvas class="canvas" id={strChartID} bind:this={Chart} />

src/lib/SensorGroup.svelte

@@ -1,47 +1,62 @@
 <script lang="ts" defer>
 	import { Badge } from '@svelteuidev/core';
 	import LineChart from '$lib/LineChart.svelte';
+	import PolarPlot from './PolarPlot.svelte';
 
 	// Define the props expected by SensorGroup
 	export let timeSampleRate = -1;
 	export let timeChunkSize = -1;
 	export let freqSampleRate = -1;
 	export let freqChunkSize = -1;
-	export let sourceIdentifier = '-';
+	export let sourceIdentifier = '';
 
 	export let aanTimeYValues: number[][] = [];
 	export let aanFreqYValues: number[][] = [];
+	export let anAngles_deg: number[][] = [];
 </script>
 
 <div class-="sensorGroup">
 	<Badge color="gray" radius="md" size="xl">Sensor ID: {sourceIdentifier}</Badge>
 	<div class="graphSuperGroup">
-		<div class="graphGroup">
-			<div class="parameterContainer">
-				<Badge color="gray">Sample Rate: {timeSampleRate}</Badge>
-				<Badge color="gray">Chunk Size: {timeChunkSize}</Badge>
+		{#if aanTimeYValues.length !== 0}
+			<div class="graphGroup">
+				<Badge color="gray">Time Domain</Badge>
+				<div class="parameterContainer">
+					<Badge color="gray">Sample Rate: {timeSampleRate}</Badge>
+					<Badge color="gray">Chunk Size: {timeChunkSize}</Badge>
+				</div>
+				<div class="canvas">
+					<LineChart
+						strChartID={sourceIdentifier + '-time'}
+						aanYValues={aanTimeYValues}
+						YScale={0.000025}
+					/>
+				</div>
 			</div>
-			<div class="canvas">
-				<LineChart
-					strChartID={sourceIdentifier + '-time'}
-					aanYValues={aanTimeYValues}
-					YScale={0.000025}
-				/>
+		{/if}
+		{#if aanFreqYValues.length !== 0}
+			<div class="graphGroup">
+				<Badge color="gray">Frequency Domain</Badge>
+				<div class="parameterContainer">
+					<Badge color="gray">Sample Rate: {freqSampleRate}</Badge>
+					<Badge color="gray">Chunk Size: {freqChunkSize}</Badge>
+				</div>
+				<div class="canvas">
+					<LineChart
+						strChartID={sourceIdentifier + '-freq'}
+						aanYValues={aanFreqYValues}
+						YScale={0.000025}
+					/>
+				</div>
 			</div>
-		</div>
-		<div class="graphGroup">
-			<div class="parameterContainer">
-				<Badge color="gray">Sample Rate: {freqSampleRate}</Badge>
-				<Badge color="gray">Chunk Size: {freqChunkSize}</Badge>
+		{/if}
+		{#if anAngles_deg.length !== 0}
+			<div class="graphGroup">
+				<Badge color="gray">Polar (Angle of Arrival)</Badge>
+				<div class="parameterContainer"></div>
+				<PolarPlot strChartID={sourceIdentifier + '-polar'} {anAngles_deg} />
 			</div>
-			<div class="canvas">
-				<LineChart
-					strChartID={sourceIdentifier + '-freq'}
-					aanYValues={aanFreqYValues}
-					YScale={0.00025}
-				/>
-			</div>
-		</div>
+		{/if}
 	</div>
 </div>
 
@@ -55,7 +70,7 @@
 
 	.graphGroup {
 		height: 100%;
-		width: 50%;
+		width: 33%;
 		padding: 10px;
 	}
 	.canvas {

src/lib/StatusText.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { Badge } from '@svelteuidev/core';
 
 	var mapData = [];
-	$: Text = '';
 
 	/**
 	 * Function to find the index of a given sourceIdentifier in the mapData array.
@@ -54,8 +54,6 @@
 		for (let i = 0; i < mapData.length; i++) {
 			tmp = tmp + '\n' + JSON.stringify(mapData[i].value.SystemInfo);
 		}
-
-		Text = tmp;
 	}
 
 	function updateItemInMap(StatusParsedData) {
@@ -106,5 +104,10 @@
 </script>
 
 <div>
-	{Text}
+	<Badge radius="md" size="xl" color="gray">Processing Queue Stats</Badge>
+	{#each mapData as value}
+		<!-- {#if data.display} -->
+		<Badge color="gray">{JSON.stringify(value.value.SystemInfo)}</Badge>
+		<!-- {/if} -->
+	{/each}
 </div>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { dev, browser } from '$app/environment';
 	import { inject } from '@vercel/analytics';
+	import StatusText from '$lib/StatusText.svelte';
 
 	// util
 	import { webVitals } from '$lib/vitals';
@@ -40,6 +41,26 @@
 
 <main>
 	<Navbar />
+
 	<!-- +page.svelte is rendered in this <slot> -->
-	<slot />
+	<div class="left">
+		<slot />
+	</div>
+	<div class="right">
+		<StatusText />
+	</div>
 </main>
+
+<style>
+	.left {
+		flex-direction: row;
+		width: 80%;
+		height: 100%;
+	}
+
+	.right {
+		flex-direction: row;
+		width: 20%;
+		height: 100%;
+	}
+</style>

src/routes/+page.svelte

@@ -118,12 +118,12 @@
 
 		FreqWebSocket.addEventListener('close', (event) => {
 			console.log('WebSocket closed', event);
-			setTimeout(ConnectFreqWebSocket, 5000); // Attempt to reconnect after 1 second
 		});
 
 		FreqWebSocket.addEventListener('error', (error) => {
 			console.log('WebSocket error', error);
 			FreqWebSocket.close();
+			setTimeout(ConnectFreqWebSocket, 1000); // Attempt to reconnect after 1 second
 		});
 
 		let FreqParsedData = null;
@@ -151,13 +151,49 @@
 		});
 	}
 
+	let DirectionChunkSocket = null;
+	function ConnectDirectionChunkSocket() {
+		DirectionChunkSocket = new WebSocket('ws://localhost:10100/DataTypes/DirectionBinChunk');
+
+		DirectionChunkSocket.addEventListener('open', () => {
+			console.log('DirectionChunkSocket WebSocket connected');
+		});
+
+		DirectionChunkSocket.addEventListener('close', (event) => {
+			console.log('WebSocket closed', event);
+		});
+
+		DirectionChunkSocket.addEventListener('error', (error) => {
+			console.log('WebSocket error', error);
+			DirectionChunkSocket.close();
+		});
+
+		let PolarParsedData = null;
+
+		DirectionChunkSocket.addEventListener('message', async (event) => {
+			PolarParsedData = JSON.parse(event.data);
+			//If a plot is not active do not process its data to save time
+			if (!IsPlotActive(PolarParsedData['DirectionBinChunk']['SourceIdentifier'])) {
+				return;
+			}
+
+			updateItemInMap(PolarParsedData['DirectionBinChunk']['SourceIdentifier'], {
+				anAngles_deg: PolarParsedData['DirectionBinChunk']['DetectionAngles_deg'],
+				sourceIdentifier: PolarParsedData['DirectionBinChunk']['SourceIdentifier']
+			});
+		});
+	}
+
 	function closeWebSockets() {
 		if (TimeWebSocket) {
 			TimeWebSocket.close();
 		}
 		if (FreqWebSocket) {
 			FreqWebSocket.close();
 		}
+		if (DirectionChunkSocket) {
+			FreqWebSocket.close();
+		}
 	}
 
 	onDestroy(() => {
@@ -167,6 +203,7 @@
 	onMount(() => {
 		ConnectTimeWebSocket(); // Initial connection
 		ConnectFreqWebSocket(); // Initial connection
+		ConnectDirectionChunkSocket();
 	});
 </script>
 
@@ -197,7 +234,7 @@
 	<div class="container">
 		<div class="spacer">
 			<Stack align="center" spacing="xs">
-				<Badge color="gray" size="xl" radius="lg">Device ID</Badge>
+				<Badge color="gray" size="xl" radius="lg">Active Sensors</Badge>
 				{#each mapData as data, i}
 					<div class="Button">
 						<Button