From 1ec0abd9be2967b51a64f25a660d88ac7ee368a2 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 27 Jun 2024 11:54:20 +0200
Subject: [PATCH 1/4] feat: popup of entity on network when detailview is
 enabled

---
 components/data-graph.vue        |  9 ++++++-
 components/data-map-view.vue     | 27 +++++++++++++++++++-
 components/data-network-view.vue | 10 +++++++-
 components/network.client.vue    | 44 ++++++++++++++++++++++++++++++++
 layouts/visualization.vue        |  2 +-
 5 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/components/data-graph.vue b/components/data-graph.vue
index b07a35b3..964d42fd 100644
--- a/components/data-graph.vue
+++ b/components/data-graph.vue
@@ -4,10 +4,12 @@ import Graph from "graphology";
 import type { NetworkEntity } from "@/types/api";
 
 import { colors } from "../project.config.json";
+import { number } from "zod";
 
 const props = defineProps<{
 	networkData: NetworkEntity;
 	searchNode: string;
+	detailNode?: string;
 }>();
 
 const graph = new Graph();
@@ -62,5 +64,10 @@ function getNodeColor(nodeClass: string) {
 
 <template>
 	<div class="absolute z-10 m-3 flex w-full"></div>
-	<Network v-if="graph.size > 0" :graph="graph" :search-node="props.searchNode" />
+	<Network
+		v-if="graph.size > 0"
+		:graph="graph"
+		:search-node="props.searchNode"
+		:detail-node="props.detailNode"
+	/>
 </template>
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 2cab6c7e..f2c1e619 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -16,12 +16,17 @@ const route = useRoute();
 const t = useTranslations();
 
 const currentView = useGetCurrentView();
+const { getUnprefixedId } = useIdPrefix();
 
 const searchFiltersSchema = v.object({
 	category: v.fallback(v.picklist(categories), "entityName"),
 	search: v.fallback(v.string(), ""),
 });
 
+const detailEntityId = computed(() => {
+	return route.params.id as string;
+});
+
 const searchFilters = computed(() => {
 	return v.parse(searchFiltersSchema, route.query);
 });
@@ -48,7 +53,7 @@ const { data, isPending, isPlaceholderData } = useGetSearchResults(
 					: [],
 			show: ["geometry", "when"],
 			centroid: true,
-			system_classes: ["place", "object_location"],
+			system_classes: ["place"],
 			limit: 0,
 		};
 	}),
@@ -141,6 +146,26 @@ watch(data, () => {
 	 */
 	popover.value = null;
 });
+
+watch(
+	detailEntityId,
+	(detailEntityId) => {
+		const entity = entities.value.find((feature) => {
+			const id = getUnprefixedId(feature["@id"]);
+			return id === detailEntityId;
+		});
+	},
+	{ immediate: true },
+);
+
+onMounted(() => {
+	if (detailEntityId) {
+		const entity = features.value.find((feature) => {
+			const id = feature.id as string;
+			return id === detailEntityId.value;
+		});
+	}
+});
 </script>
 
 <template>
diff --git a/components/data-network-view.vue b/components/data-network-view.vue
index 27a3194c..a61386a8 100644
--- a/components/data-network-view.vue
+++ b/components/data-network-view.vue
@@ -9,6 +9,10 @@ import { project } from "../config/project.config";
 const router = useRouter();
 const route = useRoute();
 
+const detailEntityId = computed(() => {
+	return route.params.id as string;
+});
+
 const searchFiltersSchema = z.object({
 	search: z.string().catch(""),
 });
@@ -104,7 +108,11 @@ const systemClasses = computed(() => {
 				:system-classes="systemClasses"
 				@submit="onChangeCategory"
 			/>
-			<DataGraph :network-data="entities" :search-node="searchFilters.search" />
+			<DataGraph
+				:network-data="entities"
+				:search-node="searchFilters.search"
+				:detail-node="detailEntityId"
+			/>
 			<Centered v-if="isLoading" class="pointer-events-none">
 				<LoadingIndicator class="text-neutral-950" size="lg" />
 			</Centered>
diff --git a/components/network.client.vue b/components/network.client.vue
index 93542741..b14032d4 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -23,6 +23,7 @@ interface State {
 const props = defineProps<{
 	graph: Graph;
 	searchNode?: string;
+	detailNode?: string;
 }>();
 
 interface NetworkContext {
@@ -41,6 +42,7 @@ circular.assign(context.graph);
 
 const locale = useLocale();
 const router = useRouter();
+
 let hoverTimeOut: ReturnType<typeof setTimeout>;
 
 const state = ref<State>({});
@@ -91,6 +93,48 @@ watch(
 	{ immediate: true },
 );
 
+watch(
+	() => {
+		return props.detailNode;
+	},
+	(detailNode) => {
+		context.graph.nodes().forEach((el) => {
+			context.graph.removeNodeAttribute(el, "highlighted");
+		});
+
+		if (detailNode) {
+			const results = context.graph
+				.nodes()
+				.map((n) => {
+					return { id: n, label: context.graph.getNodeAttribute(n, "id") as string };
+				})
+				.filter(({ id }) => {
+					return id === detailNode;
+				});
+
+			if (results.length === 1) {
+				state.value.selectedNodes = results;
+				state.value.selectedNodes.forEach((el) => {
+					context.graph.setNodeAttribute(el.id, "highlighted", true);
+				});
+			}
+		}
+		// If the query is empty, then we reset the selectedNode
+		else {
+			state.value.selectedNodes = undefined;
+		}
+
+		// Refresh rendering
+		// You can directly call `renderer.refresh()`, but if you need performances
+		// you can provide some options to the refresh method.
+		// In this case, we don't touch the graph data so we can skip its reindexation
+		context.renderer?.refresh({
+			skipIndexation: true,
+		});
+	},
+	{ immediate: true },
+);
+
 const currentView = useGetCurrentView();
 
 onMounted(async () => {
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 5b027ecf..f2f35cfd 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -51,7 +51,7 @@ const currentView = useGetCurrentView();
 			<template v-if="env.public.NUXT_PUBLIC_DATABASE !== 'disabled'">
 				<ErrorBoundary>
 					<DataMapView v-if="currentView === 'map'" />
-					<DataNetworkView v-else />
+					<DataNetworkView v-if="currentView === 'network'" />
 				</ErrorBoundary>
 			</template>
 			<template v-else>

From 5306949cf252d4eeb95ae1ffea5b663ad7b130bc Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 27 Jun 2024 14:51:38 +0200
Subject: [PATCH 2/4] feat: entity popup shows on map when detailview is
 enabled

---
 components/data-map-view.vue        | 50 ++++++++++++++++++++---------
 components/geo-map-popup.client.vue |  3 +-
 components/geo-map.client.vue       |  7 +++-
 components/network.client.vue       |  1 +
 4 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index f2c1e619..f36469bc 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -64,6 +64,7 @@ const isLoading = computed(() => {
 });
 
 const entities = computed(() => {
+	console.log("entities watcher");
 	return (
 		data.value?.results.flatMap((result) => {
 			return result.features;
@@ -140,6 +141,7 @@ function onLayerClick(features: Array<MapGeoJSONFeature & Pick<GeoJsonFeature, "
 }
 
 watch(data, () => {
+	console.log("data watcher");
 	/**
 	 * Close popover when search results change, to avoid displaying popup for features which are
 	 * no longer in the search results set.
@@ -147,25 +149,41 @@ watch(data, () => {
 	popover.value = null;
 });
 
-watch(
-	detailEntityId,
-	(detailEntityId) => {
-		const entity = entities.value.find((feature) => {
-			const id = getUnprefixedId(feature["@id"]);
-			return id === detailEntityId;
-		});
-	},
-	{ immediate: true },
-);
+watchEffect(() => {
+	console.log("detailviewId watcher");
+	const entity = entities.value.find((feature) => {
+		const id = getUnprefixedId(feature["@id"]);
+		return id === detailEntityId.value;
+	});
 
-onMounted(() => {
-	if (detailEntityId) {
-		const entity = features.value.find((feature) => {
-			const id = feature.id as string;
-			return id === detailEntityId.value;
-		});
+	console.log({ entity });
+	if (entity) {
+		let coordinates = null;
+
+		if (entity.geometry.type === "GeometryCollection") {
+			coordinates = entity.geometry.geometries.find((g) => {
+				return g.type === "Point";
+			})?.coordinates as [number, number] | undefined;
+		}
+
+		if (entity.geometry.type === "Point") {
+			coordinates = entity.geometry.coordinates as unknown as [number, number];
+		}
+
+		console.log({ coordinates, type: entity.geometry.type });
+
+		popover.value = {
+			coordinates:
+				coordinates ??
+				(turf.center(createFeatureCollection([entity])).geometry.coordinates as [number, number]),
+			entities: [entity],
+		};
 	}
 });
+
+onMounted(() => {
+	console.log("hellloooo");
+});
 </script>
 
 <template>
diff --git a/components/geo-map-popup.client.vue b/components/geo-map-popup.client.vue
index fee65fdb..4010b71f 100644
--- a/components/geo-map-popup.client.vue
+++ b/components/geo-map-popup.client.vue
@@ -10,7 +10,7 @@ const emit = defineEmits<{
 	(event: "close"): void;
 }>();
 
-const { map } = useGeoMap();
+const geoMapContext = useGeoMap();
 
 const elementRef = ref<HTMLElement | null>(null);
 
@@ -24,6 +24,7 @@ const context: Context = {
 
 onMounted(async () => {
 	await nextTick();
+	const { map } = geoMapContext;
 	assert(elementRef.value != null);
 	assert(map != null);
 
diff --git a/components/geo-map.client.vue b/components/geo-map.client.vue
index c70d60c2..a7345d79 100644
--- a/components/geo-map.client.vue
+++ b/components/geo-map.client.vue
@@ -54,7 +54,9 @@ onScopeDispose(dispose);
 
 async function create() {
 	await nextTick();
-	assert(elementRef.value != null);
+	assert(elementRef.value != null, "assert");
+
+	console.log("map mounted");
 
 	const map = new GeoMap({
 		center: [initialViewState.longitude, initialViewState.latitude],
@@ -69,11 +71,13 @@ async function create() {
 	context.map = map;
 
 	map.on("load", init);
+	console.log("map loaded: ", map);
 }
 
 function init() {
 	assert(context.map != null);
 	const map = context.map;
+	console.log("map init fn");
 
 	//
 
@@ -175,6 +179,7 @@ function init() {
 
 function dispose() {
 	context.map?.remove();
+	console.log("Disposing map", context.map);
 }
 
 watch(() => {
diff --git a/components/network.client.vue b/components/network.client.vue
index b14032d4..a2fc32c2 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -138,6 +138,7 @@ watch(
 const currentView = useGetCurrentView();
 
 onMounted(async () => {
+	console.log("network mounted");
 	layout.start();
 
 	// await the layout algorithm so the initial circular layout does not flash for a sec

From bdc53b840948f0840892dd92122fe79b763f2384 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 27 Jun 2024 15:05:03 +0200
Subject: [PATCH 3/4] chore: lint fix

---
 components/data-graph.vue     | 1 -
 components/data-map-view.vue  | 9 ---------
 components/geo-map.client.vue | 7 +------
 components/network.client.vue | 1 -
 4 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/components/data-graph.vue b/components/data-graph.vue
index 964d42fd..7681e291 100644
--- a/components/data-graph.vue
+++ b/components/data-graph.vue
@@ -4,7 +4,6 @@ import Graph from "graphology";
 import type { NetworkEntity } from "@/types/api";
 
 import { colors } from "../project.config.json";
-import { number } from "zod";
 
 const props = defineProps<{
 	networkData: NetworkEntity;
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index f36469bc..9fa98194 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -64,7 +64,6 @@ const isLoading = computed(() => {
 });
 
 const entities = computed(() => {
-	console.log("entities watcher");
 	return (
 		data.value?.results.flatMap((result) => {
 			return result.features;
@@ -141,7 +140,6 @@ function onLayerClick(features: Array<MapGeoJSONFeature & Pick<GeoJsonFeature, "
 }
 
 watch(data, () => {
-	console.log("data watcher");
 	/**
 	 * Close popover when search results change, to avoid displaying popup for features which are
 	 * no longer in the search results set.
@@ -150,13 +148,11 @@ watch(data, () => {
 });
 
 watchEffect(() => {
-	console.log("detailviewId watcher");
 	const entity = entities.value.find((feature) => {
 		const id = getUnprefixedId(feature["@id"]);
 		return id === detailEntityId.value;
 	});
 
-	console.log({ entity });
 	if (entity) {
 		let coordinates = null;
 
@@ -170,8 +166,6 @@ watchEffect(() => {
 			coordinates = entity.geometry.coordinates as unknown as [number, number];
 		}
 
-		console.log({ coordinates, type: entity.geometry.type });
-
 		popover.value = {
 			coordinates:
 				coordinates ??
@@ -181,9 +175,6 @@ watchEffect(() => {
 	}
 });
 
-onMounted(() => {
-	console.log("hellloooo");
-});
 </script>
 
 <template>
diff --git a/components/geo-map.client.vue b/components/geo-map.client.vue
index a7345d79..c70d60c2 100644
--- a/components/geo-map.client.vue
+++ b/components/geo-map.client.vue
@@ -54,9 +54,7 @@ onScopeDispose(dispose);
 
 async function create() {
 	await nextTick();
-	assert(elementRef.value != null, "assert");
-
-	console.log("map mounted");
+	assert(elementRef.value != null);
 
 	const map = new GeoMap({
 		center: [initialViewState.longitude, initialViewState.latitude],
@@ -71,13 +69,11 @@ async function create() {
 	context.map = map;
 
 	map.on("load", init);
-	console.log("map loaded: ", map);
 }
 
 function init() {
 	assert(context.map != null);
 	const map = context.map;
-	console.log("map init fn");
 
 	//
 
@@ -179,7 +175,6 @@ function init() {
 
 function dispose() {
 	context.map?.remove();
-	console.log("Disposing map", context.map);
 }
 
 watch(() => {
diff --git a/components/network.client.vue b/components/network.client.vue
index a2fc32c2..b14032d4 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -138,7 +138,6 @@ watch(
 const currentView = useGetCurrentView();
 
 onMounted(async () => {
-	console.log("network mounted");
 	layout.start();
 
 	// await the layout algorithm so the initial circular layout does not flash for a sec

From f19e872e12a0774face822c20d68619d9f2c48b8 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 27 Jun 2024 15:08:37 +0200
Subject: [PATCH 4/4] chore: format fix

---
 components/data-map-view.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 9fa98194..8bd21b68 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -174,7 +174,6 @@ watchEffect(() => {
 		};
 	}
 });
-
 </script>
 
 <template>