pds list tweaks, map is optional

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "atscan-fe",
-	"version": "0.8.0-alpha",
+	"version": "0.8.1-alpha",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

frontend/src/lib/components/PDSTable.svelte

@@ -48,7 +48,18 @@
 			val = arr.reverse().join(' ');
 		}
 		if (key === 'host') {
-			val = `<a href="/pds/${val}" class=""><span class="font-semibold text-lg">${val}</span></a>`;
+			val = `<div class="inline-block align-top"><a href="/pds/${val}" class=""><span class="font-semibold text-lg">${val}</span></a>`;
+
+			if (
+				row.inspect?.current.data?.availableUserDomains &&
+				row.inspect.current.data.availableUserDomains.length > 0
+			) {
+				val +=
+					'<div class="text-xs opacity-75">' +
+					row.inspect?.current.data?.availableUserDomains.join(', ') +
+					'</div>';
+			}
+			val += `</div>`;
 		}
 		if (key === 'responseTime') {
 			val = row.responseTime ? '~' + Math.round(row.responseTime) + 'ms' : '-';
@@ -61,16 +72,18 @@
 					  }" class="inline-block mr-2" />`
 					: '-';
 			if (row.ip && row.ip.city) {
-				val += `${row.ip.city} - `;
+				val += `${row.ip.city}, ${row.ip.country}`;
 			}
 			if (row.ip) {
 				const dnsIp = row.dns ? row.dns.Answer?.filter((a) => a.type === 1)[0].data : null;
-				val +=
+				/*val +=
 					`<a href="http://ipinfo.io/${dnsIp}" target="_blank" class="anchor">${dnsIp}</a>` || '-';
 				if (row.ip && row.ip.regionName) {
 					val += ' (' + row.ip.regionName + ')';
-				}
-				val += `<br /><span class="text-xs">${row.ip?.org || 'n/a'}</span>`;
+				}*/
+				val += `<br /><span class="text-xs opacity-75">${
+					row.ip?.org?.replace(/^AS\d+ /, '') || 'n/a'
+				}</span>`;
 			}
 		}
 		if (key === 'didsCount') {
@@ -90,6 +103,9 @@
 					: '-'
 			}</span>`;
 		}
+		if (key === 'time') {
+			val = `<span class="text-xs">${dateDistance(row.time)} ago</span>`;
+		}
 		if (key === 'host_raw') {
 			val = row.host;
 		}
@@ -112,9 +128,10 @@
 			['Host', 'host'],
 			['DIDs', 'didsCount'],
 			['Size', 'size'],
-			['Location', 'country'],
-			['PLCs (User Domains)', 'plcs'],
+			['Location / Provider', 'country'],
+			//['PLCs (User Domains)', 'plcs'],
 			['Latency', 'responseTime'],
+			['First seen', 'time'],
 			['Last Online', 'lastOnline']
 		],
 		body: customTableMapper(
@@ -126,8 +143,9 @@
 				'didsCount',
 				'size',
 				'location',
-				'plcs',
+				//'plcs',
 				'responseTime',
+				'time',
 				'lastOnline'
 			],
 			tableMap

frontend/src/lib/components/Table.svelte

@@ -86,7 +86,7 @@
 	$: classesTable = `${element} ${text} ${color}`;
 </script>
 
-<div class="table-container {classesBase}">
+<div class="table-container {classesBase}" id="table">
 	<!-- Table -->
 	<!-- prettier-ignore -->
 	<table
@@ -134,10 +134,12 @@
 							aria-colindex={cellIndex + 1}
 							tabindex={cellIndex === 0 ? 0 : -1}
 						>
+
 							{@html cell ? cell : '-'}
 							{#if favoriteColumn !== null && favoriteColumn === cellIndex}
-								<i class="favorite fa-regular fa-star ml-1 {source.meta[rowIndex][3] !== undefined && source.meta[rowIndex][3] ? 'inline-block active text-yellow-500 opacity-100 hover:text-red-500' : 'opacity-50 hidden hover:text-green-500'} hover:opacity-100" on:click={(ev) => onFavoriteClick(ev, source.meta[rowIndex][0])}></i>
+								<div class="inline-block"><i class="favorite fa-regular fa-star ml-1 {source.meta[rowIndex][3] !== undefined && source.meta[rowIndex][3] ? 'inline-block active text-yellow-500 opacity-100 hover:text-red-500' : 'opacity-50 hidden hover:text-green-500'} hover:opacity-100" on:click={(ev) => onFavoriteClick(ev, source.meta[rowIndex][0])}></i></div>
 							{/if}
+
 						</td>
 					{/each}
 				</tr>

frontend/src/lib/stores.js

@@ -1,5 +1,6 @@
 import { persisted } from 'svelte-local-storage-store';
 
 export const preferences = persisted('preferences', {
-	favoritePDS: []
+	favoritePDS: [],
+	pdsShowMap: true
 });

frontend/src/routes/pds/+page.svelte

@@ -10,6 +10,7 @@
 	import { nats, connected, codec } from '$lib/sockets.js';
 	import { preferences } from '$lib/stores.js';
 	import { onMount, onDestroy } from 'svelte';
+	import { SlideToggle } from '@skeletonlabs/skeleton';
 
 	export let data;
 
@@ -205,8 +206,18 @@
 		{#if $preferences.favoritePDS.length > 0}
 			<h2 class="h2">Your favourites</h2>
 			<PDSTable sourceData={favoritesData} {data} on:favoriteClick={(e) => onFavoriteClick(e)} />
+		{/if}
 
-			<h2 class="h2">All instances</h2>
+		<div class="flex">
+			<div class="grow"><h2 class="h2">PDS Worldwide</h2></div>
+			<div class="">
+				<SlideToggle name="slider-label" bind:checked={$preferences.pdsShowMap} size="sm"
+					>Show map</SlideToggle
+				>
+			</div>
+		</div>
+		{#if $preferences.pdsShowMap}
+			<PDSMap data={baseData} />
 		{/if}
 	{/if}
 
@@ -217,10 +228,6 @@
 		{:else}
 			All PDS Instances ({formatNumber(sourceData.length)}):
 		{/if}
-
-		{#if !$search}
-			<PDSMap data={baseData} />
-		{/if}
 	</div>
 	<div class="min-h-screen">
 		<PDSTable