Breaking - I have no idea what I have done

src/lib/Navbar.svelte

@@ -8,7 +8,7 @@
 			<a href="/">Home</a>
 			<a href="/map">Map</a>
 		</nav>
-		<StatusText />
+
 	</section>
 </div>
 

src/lib/PolarPlot.svelte

@@ -0,0 +1,60 @@
+<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,22 +1,26 @@
 <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">
+		{#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>
@@ -29,7 +33,10 @@
 				/>
 			</div>
 		</div>
+		{/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>
@@ -38,10 +45,23 @@
 				<LineChart
 					strChartID={sourceIdentifier + '-freq'}
 					aanYValues={aanFreqYValues}
-					YScale={0.00025}
+					YScale={0.000025}
 				/>
 			</div>
 		</div>
+		{/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={anAngles_deg}
+			/>
+		</div>
+		{/if}
 	</div>
 </div>
 
@@ -55,7 +75,7 @@
 
 	.graphGroup {
 		height: 100%;
-		width: 50%;
+		width: 33%;
 		padding: 10px;
 	}
 	.canvas {

src/lib/StatusText.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { Button, Badge, Stack } from '@svelteuidev/core';
 
 	var mapData = [];
 	$: Text = '';
@@ -106,5 +107,11 @@
 </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,27 @@
 
 <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

@@ -85,7 +85,7 @@
 		let timeParsedData = null;
 		let TimeDatasets = [];
 
-		TimeWebSocket.addEventListener('message', async (event) => {
+		TimeWebSocket.addEventListener('message', async (event) => { 
 			//console.log(endTime - startTime)
 			timeParsedData = JSON.parse(event.data);
 			// If a plot is not active do not process its data to save time
@@ -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