From 726467ce3b4840b77f7b7feab966af4569e574ac Mon Sep 17 00:00:00 2001
From: Miguel Vieira <jose.m.vieira@kcl.ac.uk>
Date: Fri, 19 Jul 2024 14:37:09 +0100
Subject: [PATCH] perf(frontend): split long block into functions

---
 .../src/lib/components/InscriptionMap.svelte  | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/InscriptionMap.svelte b/frontend/src/lib/components/InscriptionMap.svelte
index 20fb1e93e61..9bbbc1313dc 100644
--- a/frontend/src/lib/components/InscriptionMap.svelte
+++ b/frontend/src/lib/components/InscriptionMap.svelte
@@ -1,7 +1,6 @@
 <script>
 	import maplibregl from 'maplibre-gl';
 	import { afterUpdate, onDestroy, onMount } from 'svelte';
-
 	import 'maplibre-gl/dist/maplibre-gl.css';
 
 	const { Map, Marker, NavigationControl, Popup } = maplibregl;
@@ -26,15 +25,12 @@
 				if (!acc[key]) {
 					acc[key] = [];
 				}
-
 				acc[key].push(curr);
-
 				return acc;
 			}, {});
 
 		Object.entries(inscriptionsByGeo).forEach(([_, inscriptions]) => {
 			const numberInscriptions = inscriptions.length;
-
 			let markerSize = '8px';
 			if (numberInscriptions > 15) {
 				markerSize = '48px';
@@ -44,37 +40,45 @@
 				markerSize = '16px';
 			}
 
-			const el = document.createElement('div');
-			el.className = 'marker';
-			el.style.width = markerSize;
-			el.style.height = markerSize;
-			el.style.lineHeight = markerSize;
-
-			if (numberInscriptions > 1) {
-				el.innerHTML = numberInscriptions.toString();
-			}
-
+			const el = createMarkerElement(markerSize, numberInscriptions);
 			const geo = inscriptions[0].geo;
-			const place = inscriptions[0].place._;
-
-			let html = `<div class="tooltip"><h3>${place}</h3>`;
-			const linkItems = inscriptions
-				.map(
-					(inscription) =>
-						`<li><a href="inscription/${inscription.file}">${inscription.title}</a></li>`
-				)
-				.join('');
-			html = `${html}<ul>${linkItems}</ul></div>`;
+			const popupContent = createPopupContent(inscriptions);
 
 			const marker = new Marker({ element: el })
 				.setLngLat([geo[1], geo[0]])
-				.setPopup(new Popup().setHTML(html))
+				.setPopup(new Popup().setHTML(popupContent))
 				.addTo(map);
 
 			markers.push(marker);
 		});
 	}
 
+	function createMarkerElement(size, numberInscriptions) {
+		const el = document.createElement('div');
+		el.className = 'marker';
+		el.style.width = size;
+		el.style.height = size;
+		el.style.lineHeight = size;
+
+		if (numberInscriptions > 1) {
+			el.innerHTML = numberInscriptions.toString();
+		}
+
+		return el;
+	}
+
+	function createPopupContent(inscriptions) {
+		const place = inscriptions[0].place._;
+		let html = `<div class="tooltip"><h3>${place}</h3>`;
+		const linkItems = inscriptions
+			.map(
+				(inscription) =>
+					`<li><a href="inscription/${inscription.file}">${inscription.title}</a></li>`
+			)
+			.join('');
+		return `${html}<ul>${linkItems}</ul></div>`;
+	}
+
 	onMount(() => {
 		map = new Map({
 			container: mapContainer,
@@ -115,7 +119,7 @@
 			padding: 0;
 			text-align: center;
 
-			&:hover {
+			& :hover {
 				filter: brightness(90%);
 				box-shadow: var(--shadow-4);
 			}