From f6fabc888c8e4ef60dd6401f05b9c61da0c50b06 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 28 Jun 2024 17:21:12 +0200
Subject: [PATCH 01/18] chore: remove padding and center buttons in
 visualizations

---
 components/data-view.vue      |  3 ++-
 components/entity-sidebar.vue | 21 +++++++++---------
 layouts/visualization.vue     | 40 ++++++++++++++++++++++++-----------
 pages/index.vue               |  4 ++--
 pages/map/index.vue           |  2 +-
 pages/network/index.vue       |  2 +-
 6 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/components/data-view.vue b/components/data-view.vue
index b19d68cf..4d4200e2 100644
--- a/components/data-view.vue
+++ b/components/data-view.vue
@@ -103,10 +103,11 @@ const entities = computed(() => {
 		}) ?? []
 	);
 });
+
 </script>
 
 <template>
-	<div class="relative grid grid-rows-[auto_1fr] gap-4">
+	<div class="container relative grid grid-rows-[auto_1fr] gap-4">
 		<SearchForm
 			:filter="searchFilters.category"
 			:search="searchFilters.search"
diff --git a/components/entity-sidebar.vue b/components/entity-sidebar.vue
index 7c833d2d..38f36f79 100644
--- a/components/entity-sidebar.vue
+++ b/components/entity-sidebar.vue
@@ -23,16 +23,7 @@ const updateHandledRelations = (relations: Array<RelationType>) => {
 		class="group absolute z-10 mb-2 mr-2 h-full w-1/4 translate-x-[-25vw] transition-transform duration-300 open:translate-x-0"
 		:open="openState"
 	>
-		<summary
-			class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2"
-		>
-			<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
-			<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
-			<span class="sr-only">{{
-				t("EntityPage.sidebar.toggle", { title: entity.properties.title })
-			}}</span>
-		</summary>
-		<Card class="h-full overflow-y-scroll">
+		<Card class="h-full overflow-y-scroll relative">
 			<EntityPrimaryDetails :entity="entity" @handled-relations="updateHandledRelations" />
 
 			<slot name="custom-details" />
@@ -44,5 +35,15 @@ const updateHandledRelations = (relations: Array<RelationType>) => {
 				class="mx-4 mt-16"
 			/>
 		</Card>
+		<summary
+			class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2 pl-1 shadow-md"
+			style="top: calc(50% - 40px)"
+		>
+			<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
+			<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
+			<span class="sr-only">{{
+				t("EntityPage.sidebar.toggle", { title: entity.properties.title })
+			}}</span>
+		</summary>
 	</details>
 </template>
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index f2f35cfd..30167fd4 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { MapIcon, WaypointsIcon } from "lucide-vue-next";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { z } from "zod";
 
 const env = useRuntimeConfig();
 
+const isVisible = false;
+
 const t = useTranslations();
 
 const route = useRoute();
@@ -33,20 +36,33 @@ const currentView = useGetCurrentView();
 
 <template>
 	<NuxtLayout name="default">
-		<MainContent class="container relative grid h-full py-8">
+		<MainContent class="relative grid h-full">
 			<div
-				class="absolute right-4 top-1/2 z-20 rounded-md bg-white/90 p-6 shadow-md dark:bg-neutral-900"
+				class="absolute right-4 z-20 rounded-md bg-white/90 p-6 shadow-md dark:bg-neutral-900"
+				style="top: calc(50% - 48px)"
 			>
-				<NavLink
-					class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-					:href="{ path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}` }"
-				>
-					<MapIcon v-if="currentView === 'network'" class="size-6" />
-					<WaypointsIcon v-else class="size-6" />
-					<span class="sr-only">{{
-						currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
-					}}</span>
-				</NavLink>
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger>
+							<NavLink
+								class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+								:href="{
+									path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}`,
+								}"
+							>
+								<MapIcon v-if="currentView === 'network'" class="size-6" />
+								<WaypointsIcon v-else class="size-6" />
+								<span class="sr-only">{{
+									currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
+								}}</span>
+							</NavLink></TooltipTrigger
+						>
+						<TooltipContent>
+							<p v-if="currentView === 'map'">{{ t("EntityPage.network") }}</p>
+							<p v-if="currentView === 'network'">{{ t("EntityPage.map") }}</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
 			</div>
 			<template v-if="env.public.NUXT_PUBLIC_DATABASE !== 'disabled'">
 				<ErrorBoundary>
diff --git a/pages/index.vue b/pages/index.vue
index 38869ea7..3d4d077c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -51,9 +51,9 @@ onServerPrefetch(async () => {
 </script>
 
 <template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div v-if="!project.map.startPage">
-			<template v-if="content != null && content.leadIn != null">
+			<template v-if="content != null && content.leadIn != null" class="container py-8">
 				<div class="grid place-items-center gap-8 p-8 sm:py-16">
 					<div>
 						<h1 class="sr-only">{{ content.title }}</h1>
diff --git a/pages/map/index.vue b/pages/map/index.vue
index 249e2066..675fa810 100644
--- a/pages/map/index.vue
+++ b/pages/map/index.vue
@@ -16,7 +16,7 @@ const env = useRuntimeConfig();
 </script>
 
 <template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div>
 			<PageTitle class="sr-only">{{ t("MapPage.title") }}</PageTitle>
 		</div>
diff --git a/pages/network/index.vue b/pages/network/index.vue
index ab8b477a..c133cff2 100644
--- a/pages/network/index.vue
+++ b/pages/network/index.vue
@@ -16,7 +16,7 @@ const env = useRuntimeConfig();
 </script>
 
 <template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
+	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div>
 			<PageTitle class="sr-only">{{ t("NetworkPage.title") }}</PageTitle>
 		</div>

From 34823685ded4d1220cd2ab2e7853b583df981aa8 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 15 Jul 2024 16:29:31 +0200
Subject: [PATCH 02/18] style: place tooltip above element

---
 layouts/visualization.vue | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 30167fd4..dd9f32ab 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -37,26 +37,25 @@ const currentView = useGetCurrentView();
 <template>
 	<NuxtLayout name="default">
 		<MainContent class="relative grid h-full">
-			<div
-				class="absolute right-4 z-20 rounded-md bg-white/90 p-6 shadow-md dark:bg-neutral-900"
-				style="top: calc(50% - 48px)"
-			>
+			<div class="absolute right-4 z-20" style="top: calc(50% - 40px)">
 				<TooltipProvider>
 					<Tooltip>
 						<TooltipTrigger>
-							<NavLink
-								class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-								:href="{
-									path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}`,
-								}"
-							>
-								<MapIcon v-if="currentView === 'network'" class="size-6" />
-								<WaypointsIcon v-else class="size-6" />
-								<span class="sr-only">{{
-									currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
-								}}</span>
-							</NavLink></TooltipTrigger
-						>
+							<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
+								<NavLink
+									class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+									:href="{
+										path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}`,
+									}"
+								>
+									<MapIcon v-if="currentView === 'network'" class="size-6" />
+									<WaypointsIcon v-else class="size-6" />
+									<span class="sr-only">{{
+										currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
+									}}</span>
+								</NavLink>
+							</div>
+						</TooltipTrigger>
 						<TooltipContent>
 							<p v-if="currentView === 'map'">{{ t("EntityPage.network") }}</p>
 							<p v-if="currentView === 'network'">{{ t("EntityPage.map") }}</p>

From b8a9d7bdc8b28ed8ccb9c065a1bc821c367e743b Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 19 Jul 2024 18:02:58 +0200
Subject: [PATCH 03/18] chore: refactor the layout and usage of query params so
 the sidebar won't trigger a reload

---
 components/data-map-view.vue        | 28 +++++++++---
 components/data-network-view.vue    |  2 +-
 components/entity-sidebar.vue       | 68 +++++++++++++++++------------
 components/network.client.vue       |  5 +--
 composables/use-get-current-view.ts |  1 +
 layouts/visualization.vue           | 30 ++++++-------
 pages/entities/[id]/index.vue       |  9 ----
 pages/entities/[id]/map.vue         | 21 ---------
 pages/entities/[id]/network.vue     | 21 ---------
 pages/map/index.vue                 |  1 +
 pages/network/index.vue             |  1 +
 11 files changed, 81 insertions(+), 106 deletions(-)
 delete mode 100644 pages/entities/[id]/index.vue
 delete mode 100644 pages/entities/[id]/map.vue
 delete mode 100644 pages/entities/[id]/network.vue

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 8bfd9580..72d470b8 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -15,7 +15,6 @@ const router = useRouter();
 const route = useRoute();
 const t = useTranslations();
 
-const currentView = useGetCurrentView();
 const { getUnprefixedId } = useIdPrefix();
 
 const searchFiltersSchema = v.object({
@@ -23,16 +22,29 @@ const searchFiltersSchema = v.object({
 	search: v.fallback(v.string(), ""),
 });
 
-const detailEntityId = computed(() => {
-	return route.params.id as string;
+const entitySelectionSchema = v.object({
+	selection: v.fallback(v.array(v.string()), []),
 });
 
 const searchFilters = computed(() => {
 	return v.parse(searchFiltersSchema, route.query);
 });
 
+type EntitySelection = v.InferOutput<typeof entitySelectionSchema>;
+
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
+function setEntitySelection(query: Partial<EntitySelection>) {
+	void router.push({ query });
+}
+
+function onChangeEntitySelection(values: EntityFeature) {
+	const temp: EntitySelection = {
+		selection: [getUnprefixedId(values["@id"])],
+	};
+	setEntitySelection(temp);
+}
+
 function setSearchFilters(query: Partial<SearchFilters>) {
 	void router.push({ query });
 }
@@ -83,6 +95,9 @@ function togglePolygons() {
 	show.value = !show.value;
 }
 
+const selection = computed(() => {
+	return route.query.selection;
+});
 /**
  * Reduce size of geojson payload, which has an impact on performance,
  * because `maplibre-gl` will serialize geojson features when sending them to the webworker.
@@ -150,7 +165,7 @@ watch(data, () => {
 watchEffect(() => {
 	const entity = entities.value.find((feature) => {
 		const id = getUnprefixedId(feature["@id"]);
-		return id === detailEntityId.value;
+		return id === selection.value;
 	});
 
 	if (entity) {
@@ -248,8 +263,9 @@ watchEffect(() => {
 					>
 						<strong class="font-medium">
 							<NavLink
-								class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-								:href="{ path: `/entities/${entity.properties._id}/${currentView}` }"
+								href="#"
+								class="flex cursor-pointer items-center gap-1 underline decoration-dotted hover:no-underline"
+								@click="onChangeEntitySelection(entity)"
 							>
 								<Component :is="getEntityIcon(entity.systemClass)" class="size-3.5 shrink-0" />
 								{{ entity.properties.title }}
diff --git a/components/data-network-view.vue b/components/data-network-view.vue
index a61386a8..ffefb342 100644
--- a/components/data-network-view.vue
+++ b/components/data-network-view.vue
@@ -10,7 +10,7 @@ const router = useRouter();
 const route = useRoute();
 
 const detailEntityId = computed(() => {
-	return route.params.id as string;
+	return route.query.selection as string;
 });
 
 const searchFiltersSchema = z.object({
diff --git a/components/entity-sidebar.vue b/components/entity-sidebar.vue
index 38f36f79..b31e962d 100644
--- a/components/entity-sidebar.vue
+++ b/components/entity-sidebar.vue
@@ -3,7 +3,19 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";
 
 const t = useTranslations();
 
-defineProps<{ entity: EntityFeature }>();
+const props = defineProps<{
+	id: number;
+}>();
+
+const { data } = useGetEntity(
+	computed(() => {
+		return { entityId: props.id };
+	}),
+);
+
+const entity = computed(() => {
+	return data.value?.features[0];
+});
 
 const openState = ref(false);
 
@@ -19,31 +31,33 @@ const updateHandledRelations = (relations: Array<RelationType>) => {
 </script>
 
 <template>
-	<details
-		class="group absolute z-10 mb-2 mr-2 h-full w-1/4 translate-x-[-25vw] transition-transform duration-300 open:translate-x-0"
-		:open="openState"
-	>
-		<Card class="h-full overflow-y-scroll relative">
-			<EntityPrimaryDetails :entity="entity" @handled-relations="updateHandledRelations" />
-
-			<slot name="custom-details" />
-			<!-- <component v-if="hasCustomDetails" v-bind:is="entityDetailsDict" bind:entity-data /> -->
-
-			<EntityDetails
-				:handled-relations="handledRelations"
-				:relations="entity.relations"
-				class="mx-4 mt-16"
-			/>
-		</Card>
-		<summary
-			class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2 pl-1 shadow-md"
-			style="top: calc(50% - 40px)"
+	<div v-if="entity != null && props.id != null">
+		<details
+			class="group absolute z-10 mb-2 mr-2 h-full w-1/4 translate-x-[-25vw] transition-transform duration-300 open:translate-x-0"
+			:open="openState"
 		>
-			<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
-			<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
-			<span class="sr-only">{{
-				t("EntityPage.sidebar.toggle", { title: entity.properties.title })
-			}}</span>
-		</summary>
-	</details>
+			<Card class="relative h-full overflow-y-scroll">
+				<EntityPrimaryDetails :entity="entity" @handled-relations="updateHandledRelations" />
+
+				<slot name="custom-details" />
+				<!-- <component v-if="hasCustomDetails" v-bind:is="entityDetailsDict" bind:entity-data /> -->
+
+				<EntityDetails
+					:handled-relations="handledRelations"
+					:relations="entity.relations"
+					class="mx-4 mt-16"
+				/>
+			</Card>
+			<summary
+				class="absolute left-full top-1/2 block -translate-x-2 rounded-md bg-[hsl(var(--card))] py-2 pl-1 shadow-md"
+				style="top: calc(50% - 40px)"
+			>
+				<ChevronLeftIcon class="ml-auto hidden size-8 group-open:block" />
+				<ChevronRightIcon class="ml-auto size-8 group-open:hidden" />
+				<span class="sr-only">{{
+					t("EntityPage.sidebar.toggle", { title: entity.properties.title })
+				}}</span>
+			</summary>
+		</details>
+	</div>
 </template>
diff --git a/components/network.client.vue b/components/network.client.vue
index b14032d4..a8951471 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -49,7 +49,6 @@ const state = ref<State>({});
 const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions });
 
 const disabledNodeColor = project.colors.disabledNodeColor;
-
 watch(
 	() => {
 		return props.searchNode;
@@ -135,8 +134,6 @@ watch(
 	{ immediate: true },
 );
 
-const currentView = useGetCurrentView();
-
 onMounted(async () => {
 	layout.start();
 
@@ -156,7 +153,7 @@ onMounted(async () => {
 	context.camera = context.renderer.getCamera();
 
 	context.renderer.on("clickNode", ({ node }) => {
-		void router.push(`/${locale.value}/entities/${node}/${currentView.value}`);
+		void router.push(`/${locale.value}/network?selection=${node}`);
 	});
 
 	context.renderer.on("enterNode", ({ node }) => {
diff --git a/composables/use-get-current-view.ts b/composables/use-get-current-view.ts
index 0d18b39c..a5705465 100644
--- a/composables/use-get-current-view.ts
+++ b/composables/use-get-current-view.ts
@@ -6,6 +6,7 @@ export function useGetCurrentView() {
 	const route = useRoute();
 
 	return computed(() => {
+		console.log(route.path.split("/").pop());
 		const view = viewSchema.parse(route.path.split("/").pop());
 		return view;
 	});
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index dd9f32ab..5f4a02bd 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
 import { MapIcon, WaypointsIcon } from "lucide-vue-next";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { z } from "zod";
 
-const env = useRuntimeConfig();
-
-const isVisible = false;
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 const t = useTranslations();
 
@@ -28,7 +25,9 @@ usePageMetadata({
 });
 
 const id = computed(() => {
-	return Number(route.params.id as string);
+	if (route.query.selection != null) {
+		return Number(route.query.selection);
+	} else return null;
 });
 
 const currentView = useGetCurrentView();
@@ -36,7 +35,10 @@ const currentView = useGetCurrentView();
 
 <template>
 	<NuxtLayout name="default">
-		<MainContent class="relative grid h-full">
+		<MainContent class="relative h-full">
+			<template v-if="id != null">
+				<EntitySidebar :id="id" />
+			</template>
 			<div class="absolute right-4 z-20" style="top: calc(50% - 40px)">
 				<TooltipProvider>
 					<Tooltip>
@@ -45,7 +47,8 @@ const currentView = useGetCurrentView();
 								<NavLink
 									class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
 									:href="{
-										path: `/entities/${id}/${currentView === 'network' ? 'map' : 'network'}`,
+										path: `/${currentView === 'network' ? 'map' : 'network'}`,
+										query: id ? { selection: id } : {},
 									}"
 								>
 									<MapIcon v-if="currentView === 'network'" class="size-6" />
@@ -63,16 +66,9 @@ const currentView = useGetCurrentView();
 					</Tooltip>
 				</TooltipProvider>
 			</div>
-			<template v-if="env.public.NUXT_PUBLIC_DATABASE !== 'disabled'">
-				<ErrorBoundary>
-					<DataMapView v-if="currentView === 'map'" />
-					<DataNetworkView v-if="currentView === 'network'" />
-				</ErrorBoundary>
-			</template>
-			<template v-else>
-				<div>{{ t("DataPage.work-in-progress") }}</div>
-			</template>
-			<slot />
+			<div class="relative grid h-full">
+				<slot />
+			</div>
 		</MainContent>
 	</NuxtLayout>
 </template>
diff --git a/pages/entities/[id]/index.vue b/pages/entities/[id]/index.vue
deleted file mode 100644
index f554f780..00000000
--- a/pages/entities/[id]/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-	middleware: [
-		function (to, _from) {
-			return navigateTo(`${to.path}/map`); // TODO: Enable setting the default view through config
-		},
-	],
-});
-</script>
diff --git a/pages/entities/[id]/map.vue b/pages/entities/[id]/map.vue
deleted file mode 100644
index 6ba90058..00000000
--- a/pages/entities/[id]/map.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	layout: "visualization",
-});
-
-const t = useTranslations();
-
-const { entity } = useGetEntityFromRoute();
-
-useHead({
-	title: computed(() => {
-		return entity.value?.properties.title ?? t("EntityPage.meta.title");
-	}),
-});
-</script>
-
-<template>
-	<template v-if="entity != null">
-		<EntitySidebar :entity="entity" />
-	</template>
-</template>
diff --git a/pages/entities/[id]/network.vue b/pages/entities/[id]/network.vue
deleted file mode 100644
index 6ba90058..00000000
--- a/pages/entities/[id]/network.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	layout: "visualization",
-});
-
-const t = useTranslations();
-
-const { entity } = useGetEntityFromRoute();
-
-useHead({
-	title: computed(() => {
-		return entity.value?.properties.title ?? t("EntityPage.meta.title");
-	}),
-});
-</script>
-
-<template>
-	<template v-if="entity != null">
-		<EntitySidebar :entity="entity" />
-	</template>
-</template>
diff --git a/pages/map/index.vue b/pages/map/index.vue
index 675fa810..57299d0c 100644
--- a/pages/map/index.vue
+++ b/pages/map/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 definePageMeta({
+	layout: "visualization",
 	validate() {
 		const env = useRuntimeConfig();
 		return env.public.database !== "disabled";
diff --git a/pages/network/index.vue b/pages/network/index.vue
index c133cff2..a845aa72 100644
--- a/pages/network/index.vue
+++ b/pages/network/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 definePageMeta({
+	layout: "visualization",
 	validate() {
 		const env = useRuntimeConfig();
 		return env.public.database !== "disabled";

From 111a204b3fb065701b09bbd6afdb611bffbb8092 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 22 Jul 2024 19:23:50 +0200
Subject: [PATCH 04/18] WIP: make the visualizations navigatable per query
 params

---
 components/app-header.vue                     | 16 ++++++---
 components/custom-primary-details-feature.vue | 22 ++++++++++--
 components/data-map-view.vue                  |  2 +-
 components/entity-details.vue                 | 28 +++++++++++++--
 components/entity-preview-link.vue            | 17 ++++++++-
 components/nav-link.vue                       | 29 ++++++++++++++-
 components/network.client.vue                 |  9 ++++-
 components/relation-list-entry.vue            | 17 ++++++++-
 layouts/visualization.vue                     | 36 +++++++++----------
 pages/index.vue                               | 14 +++++++-
 pages/{map => visualization}/index.vue        |  9 ++++-
 11 files changed, 166 insertions(+), 33 deletions(-)
 rename pages/{map => visualization}/index.vue (76%)

diff --git a/components/app-header.vue b/components/app-header.vue
index e0326aa1..e2401ce7 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -17,15 +17,23 @@ const defaultLinks = computed<
 		return {
 			home: { href: { path: "/" }, label: t("AppHeader.links.home") },
 			data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
-			map: { href: { path: "/map" }, label: t("AppHeader.links.map") },
-			network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
+			map: {
+				href: { path: "/visualization", query: { mode: "map" } },
+				label: t("AppHeader.links.map"),
+			},
+			network: {
+				href: { path: "/visualization", query: { mode: "network" } },
+				label: t("AppHeader.links.network"),
+			},
 			team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 		};
 	}
 	return {
-		home: { href: { path: "/" }, label: t("AppHeader.links.home") },
+		home: {
+			href: { path: "/", query: { mode: "map" } },
+			label: t("AppHeader.links.home"),
+		},
 		data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
-		network: { href: { path: "/network" }, label: t("AppHeader.links.network") },
 		team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 	};
 });
diff --git a/components/custom-primary-details-feature.vue b/components/custom-primary-details-feature.vue
index b968753e..0d8c13f7 100644
--- a/components/custom-primary-details-feature.vue
+++ b/components/custom-primary-details-feature.vue
@@ -6,6 +6,7 @@ const t = useTranslations();
 const { getUnprefixedId } = useIdPrefix();
 
 const props = defineProps<{ entity: EntityFeature }>();
+const route = useRoute();
 
 const { data } = useGetBySystemClass(
 	computed(() => {
@@ -80,13 +81,27 @@ const handledRelations: Array<RelationType> = [
 onMounted(() => {
 	emit("handledRelations", handledRelations);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
 	<div class="flex justify-between">
 		<NavLink
 			v-if="previousFeature"
-			:href="{ path: `/entities/${getUnprefixedId(previousFeature['@id'])}` }"
+			:href="{
+				path: `/${getPath()}`,
+				query: { mode: currentMode, selection: getUnprefixedId(previousFeature['@id']) },
+			}"
 			class="flex items-center underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
 		>
 			<ChevronLeftIcon class="size-4" />
@@ -95,7 +110,10 @@ onMounted(() => {
 		</NavLink>
 		<NavLink
 			v-if="nextFeature"
-			:href="{ path: `/entities/${getUnprefixedId(nextFeature['@id'])}` }"
+			:href="{
+				path: `/${getPath()}`,
+				query: { mode: currentMode, selection: getUnprefixedId(nextFeature['@id']) },
+			}"
 			class="flex items-center underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
 		>
 			<span>{{ nextFeature.properties.title }}</span>
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 72d470b8..42dd73a1 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -35,7 +35,7 @@ type EntitySelection = v.InferOutput<typeof entitySelectionSchema>;
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
 function setEntitySelection(query: Partial<EntitySelection>) {
-	void router.push({ query });
+	void router.push({ query: { ...route.query, ...query } });
 }
 
 function onChangeEntitySelection(values: EntityFeature) {
diff --git a/components/entity-details.vue b/components/entity-details.vue
index 68318fe5..4bb79460 100644
--- a/components/entity-details.vue
+++ b/components/entity-details.vue
@@ -6,6 +6,7 @@ import { useIdPrefix } from "@/composables/use-id-prefix";
 const { getUnprefixedId } = useIdPrefix();
 
 const t = useTranslations();
+const route = useRoute();
 
 const props = defineProps<{
 	relations: EntityFeature["relations"];
@@ -33,6 +34,17 @@ const relationsByType = computed(() => {
 		},
 	);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -54,7 +66,13 @@ const relationsByType = computed(() => {
 								<NavLink
 									v-if="relation.relationTo"
 									class="underline decoration-dotted hover:no-underline"
-									:href="{ path: `/entities/${getUnprefixedId(relation.relationTo)}` }"
+									:href="{
+										path: `/${getPath()}`,
+										query: {
+											mode: currentMode,
+											selection: getUnprefixedId(relation.relationTo),
+										},
+									}"
 								>
 									{{ relation.label }}
 								</NavLink>
@@ -68,7 +86,13 @@ const relationsByType = computed(() => {
 									<NavLink
 										v-if="relation.relationTo"
 										class="underline decoration-dotted hover:no-underline"
-										:href="{ path: `/entities/${getUnprefixedId(relation.relationTo)}` }"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: currentMode,
+												selection: getUnprefixedId(relation.relationTo),
+											},
+										}"
 									>
 										{{ relation.label }}
 									</NavLink>
diff --git a/components/entity-preview-link.vue b/components/entity-preview-link.vue
index e95ebdd6..da38739f 100644
--- a/components/entity-preview-link.vue
+++ b/components/entity-preview-link.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const route = useRoute();
 const props = defineProps<{ id: number; entity?: EntityFeature; label?: string }>();
 
 const previewEntity = computed(() => {
@@ -21,6 +22,17 @@ const { data, isPending, isPlaceholderData } = props.entity
 const isLoading = computed(() => {
 	return isPending || isPlaceholderData;
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template v-if="entity || id">
@@ -28,7 +40,10 @@ const isLoading = computed(() => {
 		<HoverCardTrigger as-child>
 			<NavLink
 				class="underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
-				:href="{ path: `/entities/${id}` }"
+				:href="{
+					path: `/${getPath()}`,
+					query: { mode: currentMode, selection: id },
+				}"
 			>
 				<template v-if="label">
 					{{ label }}
diff --git a/components/nav-link.vue b/components/nav-link.vue
index 352cf0e9..c1df3413 100644
--- a/components/nav-link.vue
+++ b/components/nav-link.vue
@@ -8,10 +8,37 @@ export interface NavLinkProps
 const props = defineProps<NavLinkProps>();
 
 const localePath = useLocalePath();
+
+const route = useRoute();
+
+const isCurrentPage = computed<boolean>(() => {
+	const href = typeof props.href === "string" ? createURLObject(props.href) : props.href;
+	const path = localePath(href.path ?? "");
+	const query = href.query ?? {};
+
+	const isEqualPathname = path === route.path;
+	const isEqualQuery = query.mode === route.query.mode;
+
+	return isEqualPathname && isEqualQuery;
+});
+
+function createURLObject(href: string): { path: string; query: { mode: string | null } } {
+	const url = new URL(href, "http://temp");
+	return {
+		path: url.pathname,
+		query: {
+			mode: url.searchParams.get("mode"),
+		},
+	};
+}
 </script>
 
 <template>
-	<NuxtLink :href="props.external ? props.href : localePath(props.href)" :external="props.external">
+	<NuxtLink
+		:href="props.external ? props.href : localePath(props.href)"
+		:external="props.external"
+		:aria-current="isCurrentPage ? 'page' : undefined"
+	>
 		<slot />
 	</NuxtLink>
 </template>
diff --git a/components/network.client.vue b/components/network.client.vue
index a8951471..ead8a3fa 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -42,7 +42,14 @@ circular.assign(context.graph);
 
 const locale = useLocale();
 const router = useRouter();
+const route = useRoute();
 
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 let hoverTimeOut: ReturnType<typeof setTimeout>;
 
 const state = ref<State>({});
@@ -153,7 +160,7 @@ onMounted(async () => {
 	context.camera = context.renderer.getCamera();
 
 	context.renderer.on("clickNode", ({ node }) => {
-		void router.push(`/${locale.value}/network?selection=${node}`);
+		void router.push(`/${getPath()}?mode=network&selection=${node}`);
 	});
 
 	context.renderer.on("enterNode", ({ node }) => {
diff --git a/components/relation-list-entry.vue b/components/relation-list-entry.vue
index c7f1977f..09e44f70 100644
--- a/components/relation-list-entry.vue
+++ b/components/relation-list-entry.vue
@@ -1,7 +1,19 @@
 <script lang="ts" setup>
 const { getUnprefixedId } = useIdPrefix();
+const route = useRoute();
 
 defineProps<{ relation: NonNullable<EntityFeature["relations"]>[0] }>();
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -14,7 +26,10 @@ defineProps<{ relation: NonNullable<EntityFeature["relations"]>[0] }>();
 			/>
 			<NavLink
 				class="underline decoration-dotted hover:no-underline"
-				:href="{ path: `/entities/${getUnprefixedId(relation.relationTo ?? '')}` }"
+				:href="{
+					path: `/${getPath()}`,
+					query: { mode: currentMode, selection: getUnprefixedId(relation.relationTo ?? '') },
+				}"
 			>
 				{{ relation.label }}
 			</NavLink>
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 5f4a02bd..ac347b00 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -8,17 +8,12 @@ const t = useTranslations();
 
 const route = useRoute();
 
-definePageMeta({
-	validate(route) {
-		const env = useRuntimeConfig();
-		if (env.public.NUXT_PUBLIC_DATABASE === "disabled") return false;
-
-		const paramsSchema = z.object({
-			id: z.coerce.number().int().positive(),
-		});
-		return paramsSchema.safeParse(route.params).success;
-	},
-});
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 
 usePageMetadata({
 	title: t("EntityPage.meta.title"),
@@ -30,7 +25,9 @@ const id = computed(() => {
 	} else return null;
 });
 
-const currentView = useGetCurrentView();
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -47,21 +44,24 @@ const currentView = useGetCurrentView();
 								<NavLink
 									class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
 									:href="{
-										path: `/${currentView === 'network' ? 'map' : 'network'}`,
-										query: id ? { selection: id } : {},
+										path: `/${getPath()}`,
+										query: {
+											mode: currentMode === 'network' ? 'map' : 'network',
+											...(id && { selection: id }),
+										},
 									}"
 								>
-									<MapIcon v-if="currentView === 'network'" class="size-6" />
+									<MapIcon v-if="currentMode === 'network'" class="size-6" />
 									<WaypointsIcon v-else class="size-6" />
 									<span class="sr-only">{{
-										currentView === "network" ? t("MapPage.title") : t("NetworkPage.title")
+										currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
 									}}</span>
 								</NavLink>
 							</div>
 						</TooltipTrigger>
 						<TooltipContent>
-							<p v-if="currentView === 'map'">{{ t("EntityPage.network") }}</p>
-							<p v-if="currentView === 'network'">{{ t("EntityPage.map") }}</p>
+							<p v-if="currentMode === 'map'">{{ t("EntityPage.network") }}</p>
+							<p v-if="currentMode === 'network'">{{ t("EntityPage.map") }}</p>
 						</TooltipContent>
 					</Tooltip>
 				</TooltipProvider>
diff --git a/pages/index.vue b/pages/index.vue
index 3d4d077c..70f5be56 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,8 +11,15 @@ defineRouteRules({
 
 const locale = useLocale();
 const t = useTranslations();
+const route = useRoute();
+const router = useRouter();
+
+onMounted(() => {
+	return router.push({ query: { mode: "map" } });
+});
 
 definePageMeta({
+	layout: project.map.startPage ? "visualization" : "default",
 	validate() {
 		const env = useRuntimeConfig();
 		return env.public.database !== "disabled";
@@ -48,6 +55,10 @@ onServerPrefetch(async () => {
 	 */
 	await suspense().catch(noop);
 });
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -118,7 +129,8 @@ onServerPrefetch(async () => {
 			</div>
 			<template v-if="env.public.database !== 'disabled'">
 				<ErrorBoundary>
-					<DataMapView />
+					<DataMapView v-show="currentMode === 'map'" />
+					<DataNetworkView v-show="currentMode === 'network'" />
 				</ErrorBoundary>
 			</template>
 			<template v-else>
diff --git a/pages/map/index.vue b/pages/visualization/index.vue
similarity index 76%
rename from pages/map/index.vue
rename to pages/visualization/index.vue
index 57299d0c..802b5fcf 100644
--- a/pages/map/index.vue
+++ b/pages/visualization/index.vue
@@ -13,7 +13,13 @@ usePageMetadata({
 	title: t("MapPage.meta.title"),
 });
 
+const route = useRoute();
+
 const env = useRuntimeConfig();
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -23,7 +29,8 @@ const env = useRuntimeConfig();
 		</div>
 		<template v-if="env.public.database !== 'disabled'">
 			<ErrorBoundary>
-				<DataMapView />
+				<DataMapView v-if="currentMode === 'map'" />
+				<DataNetworkView v-if="currentMode === 'network'" />
 			</ErrorBoundary>
 		</template>
 		<template v-else>

From 686bd447bfcd67c5727e1e7392772b51efb25c4d Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 23 Jul 2024 14:18:09 +0200
Subject: [PATCH 05/18] fix: search in both visualizations, network mode with
 query params

---
 components/data-map-view.vue     |  4 +-
 components/data-network-view.vue |  4 +-
 components/network.client.vue    | 97 ++++++++++++++++----------------
 pages/index.vue                  | 12 +++-
 pages/network/index.vue          | 33 -----------
 5 files changed, 63 insertions(+), 87 deletions(-)
 delete mode 100644 pages/network/index.vue

diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index 42dd73a1..deb2d3f4 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -35,7 +35,7 @@ type EntitySelection = v.InferOutput<typeof entitySelectionSchema>;
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
 function setEntitySelection(query: Partial<EntitySelection>) {
-	void router.push({ query: { ...route.query, ...query } });
+	void router.push({ query: { mode: route.query.mode, ...query } });
 }
 
 function onChangeEntitySelection(values: EntityFeature) {
@@ -46,7 +46,7 @@ function onChangeEntitySelection(values: EntityFeature) {
 }
 
 function setSearchFilters(query: Partial<SearchFilters>) {
-	void router.push({ query });
+	void router.push({ query: { mode: route.query.mode, ...query } });
 }
 
 function onChangeSearchFilters(values: SearchFormData) {
diff --git a/components/data-network-view.vue b/components/data-network-view.vue
index ffefb342..5d70d505 100644
--- a/components/data-network-view.vue
+++ b/components/data-network-view.vue
@@ -22,7 +22,7 @@ const searchFilters = computed(() => {
 });
 
 function onChangeSearchFilters(values: SearchFormData) {
-	const query = { ...searchFilters.value, ...values };
+	const query = { mode: route.query.mode, ...searchFilters.value, ...values };
 
 	if (values.search === "") {
 		// @ts-expect-error Fix me later please
@@ -33,7 +33,7 @@ function onChangeSearchFilters(values: SearchFormData) {
 }
 
 function onChangeCategory(values: CategoryFormData) {
-	void router.push({ query: { ...searchFilters.value, ...values } });
+	void router.push({ query: { mode: route.query.mode, ...searchFilters.value, ...values } });
 }
 
 const { data, isPending, isPlaceholderData } = useGetNetworkData(
diff --git a/components/network.client.vue b/components/network.client.vue
index ead8a3fa..2d41cd8a 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -40,64 +40,52 @@ const context: NetworkContext = {
 
 circular.assign(context.graph);
 
-const locale = useLocale();
 const router = useRouter();
 const route = useRoute();
 
-function getPath() {
-	if (route.path.includes("visualization")) {
-		return "visualization";
-	}
-	return "";
-}
 let hoverTimeOut: ReturnType<typeof setTimeout>;
 
 const state = ref<State>({});
 const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions });
 
 const disabledNodeColor = project.colors.disabledNodeColor;
-watch(
-	() => {
-		return props.searchNode;
-	},
-	(searchNode) => {
-		context.graph.nodes().forEach((el) => {
-			context.graph.removeNodeAttribute(el, "highlighted");
-		});
-		const query = searchNode?.toLowerCase();
-
-		if (query) {
-			const results = context.graph
-				.nodes()
-				.map((n) => {
-					return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
-				})
-				.filter(({ label }) => {
-					return label.toLowerCase().includes(query);
-				});
 
-			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;
+function setSearchHighlight(searchNode: string) {
+	context.graph.nodes().forEach((el) => {
+		context.graph.removeNodeAttribute(el, "highlighted");
+	});
+	const query = searchNode.toLowerCase();
+
+	if (query) {
+		const results = context.graph
+			.nodes()
+			.map((n) => {
+				return { id: n, label: context.graph.getNodeAttribute(n, "label") as string };
+			})
+			.filter(({ label }) => {
+				return label.toLowerCase().includes(query);
+			});
+
+		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 },
-);
+	// 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,
+	});
+}
 
 watch(
 	() => {
@@ -138,6 +126,17 @@ watch(
 			skipIndexation: true,
 		});
 	},
+);
+
+watch(
+	() => {
+		return props.searchNode;
+	},
+	(searchNode) => {
+		if (searchNode) {
+			setSearchHighlight(searchNode);
+		}
+	},
 	{ immediate: true },
 );
 
@@ -159,8 +158,12 @@ onMounted(async () => {
 
 	context.camera = context.renderer.getCamera();
 
+	if (props.searchNode) {
+		setSearchHighlight(props.searchNode);
+	}
+
 	context.renderer.on("clickNode", ({ node }) => {
-		void router.push(`/${getPath()}?mode=network&selection=${node}`);
+		void router.push({ query: { mode: route.query.mode, selection: node } });
 	});
 
 	context.renderer.on("enterNode", ({ node }) => {
diff --git a/pages/index.vue b/pages/index.vue
index 70f5be56..1f735c3a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,7 +15,13 @@ const route = useRoute();
 const router = useRouter();
 
 onMounted(() => {
-	return router.push({ query: { mode: "map" } });
+	if (project.map.startPage) {
+		if (!route.query.mode) {
+			return router.push({ query: { mode: "map" } });
+		}
+		return null;
+	}
+	return null;
 });
 
 definePageMeta({
@@ -64,8 +70,8 @@ const currentMode = computed(() => {
 <template>
 	<MainContent class="grid grid-rows-[auto_1fr]">
 		<div v-if="!project.map.startPage">
-			<template v-if="content != null && content.leadIn != null" class="container py-8">
-				<div class="grid place-items-center gap-8 p-8 sm:py-16">
+			<template v-if="content != null && content.leadIn != null">
+				<div class="container grid place-items-center gap-8 p-8 sm:py-16">
 					<div>
 						<h1 class="sr-only">{{ content.title }}</h1>
 						<NuxtImg
diff --git a/pages/network/index.vue b/pages/network/index.vue
deleted file mode 100644
index a845aa72..00000000
--- a/pages/network/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	layout: "visualization",
-	validate() {
-		const env = useRuntimeConfig();
-		return env.public.database !== "disabled";
-	},
-});
-
-const t = useTranslations();
-
-usePageMetadata({
-	title: t("NetworkPage.meta.title"),
-});
-
-const env = useRuntimeConfig();
-</script>
-
-<template>
-	<MainContent class="grid grid-rows-[auto_1fr]">
-		<div>
-			<PageTitle class="sr-only">{{ t("NetworkPage.title") }}</PageTitle>
-		</div>
-		<template v-if="env.public.database !== 'disabled'">
-			<ErrorBoundary>
-				<DataNetworkView></DataNetworkView>
-			</ErrorBoundary>
-		</template>
-		<template v-else>
-			<div>{{ t("DataPage.work-in-progress") }}</div>
-		</template>
-	</MainContent>
-</template>

From 06143b3c1045a92fe781e91dd8ed88ff48856264 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 23 Jul 2024 17:02:57 +0200
Subject: [PATCH 06/18] chore: disable mode switch when the entity is not a
 place

---
 components/mode-switch.vue       | 98 ++++++++++++++++++++++++++++++++
 content/system-pages/de/index.md |  2 +-
 layouts/visualization.vue        | 43 +-------------
 messages/de/common.json          |  3 +-
 messages/en/common.json          |  3 +-
 5 files changed, 105 insertions(+), 44 deletions(-)
 create mode 100644 components/mode-switch.vue

diff --git a/components/mode-switch.vue b/components/mode-switch.vue
new file mode 100644
index 00000000..ce1b2bd5
--- /dev/null
+++ b/components/mode-switch.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { MapPinIcon, MapPinOffIcon, WaypointsIcon } from "lucide-vue-next";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const props = defineProps<{
+	currentMode: string;
+	id: number | null;
+}>();
+
+const t = useTranslations();
+
+const route = useRoute();
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+let hasPlace = ref(true);
+
+const { data } = useGetEntity(
+	computed(() => {
+		return { entityId: Number(props.id) };
+	}),
+);
+
+watch(
+	() => {
+		return data;
+	},
+	() => {
+		const entity = data.value?.features[0];
+		if (entity) {
+			entityHasCoordinates(entity);
+		}
+	},
+	{ immediate: true, deep: true },
+);
+
+function entityHasCoordinates(entity: EntityFeature) {
+	if (entity.systemClass !== "place") {
+		hasPlace.value = false;
+	}
+	if (entity.systemClass === "place") {
+		hasPlace.value = true;
+	}
+}
+</script>
+
+<template>
+	<div v-if="hasPlace">
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
+						<NavLink
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode === 'network' ? 'map' : 'network',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<MapPinIcon v-if="currentMode === 'network'" class="size-6" />
+							<WaypointsIcon v-else class="size-6" />
+							<span class="sr-only">{{
+								currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
+							}}</span>
+						</NavLink>
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p v-if="props.currentMode === 'map'">{{ t("EntityPage.network") }}</p>
+					<p v-if="props.currentMode === 'network'">{{ t("EntityPage.map") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	</div>
+	<div v-if="!hasPlace && props.id">
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
+						<MapPinOffIcon v-if="currentMode === 'network'" class="size-6 text-neutral-400" />
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p>{{ t("EntityPage.no-map") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	</div>
+</template>
diff --git a/content/system-pages/de/index.md b/content/system-pages/de/index.md
index e1b0eb58..7d0fe1e2 100644
--- a/content/system-pages/de/index.md
+++ b/content/system-pages/de/index.md
@@ -12,7 +12,7 @@ links:
   - label: Daten anzeigen
     href: /data
   - label: Karte anzeigen
-    href: /map
+    href: /visualization?mode=map
 ---
 
 THANADOS (Die Anthropologische und Archäologische Datenbank von Sepulturen) beschäftigt sich mit der
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index ac347b00..b80f9cf4 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,20 +1,8 @@
 <script lang="ts" setup>
-import { MapIcon, WaypointsIcon } from "lucide-vue-next";
-import { z } from "zod";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-
 const t = useTranslations();
 
 const route = useRoute();
 
-function getPath() {
-	if (route.path.includes("visualization")) {
-		return "visualization";
-	}
-	return "";
-}
-
 usePageMetadata({
 	title: t("EntityPage.meta.title"),
 });
@@ -26,7 +14,7 @@ const id = computed(() => {
 });
 
 const currentMode = computed(() => {
-	return route.query.mode;
+	return route.query.mode as string;
 });
 </script>
 
@@ -37,34 +25,7 @@ const currentMode = computed(() => {
 				<EntitySidebar :id="id" />
 			</template>
 			<div class="absolute right-4 z-20" style="top: calc(50% - 40px)">
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger>
-							<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
-								<NavLink
-									class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-									:href="{
-										path: `/${getPath()}`,
-										query: {
-											mode: currentMode === 'network' ? 'map' : 'network',
-											...(id && { selection: id }),
-										},
-									}"
-								>
-									<MapIcon v-if="currentMode === 'network'" class="size-6" />
-									<WaypointsIcon v-else class="size-6" />
-									<span class="sr-only">{{
-										currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
-									}}</span>
-								</NavLink>
-							</div>
-						</TooltipTrigger>
-						<TooltipContent>
-							<p v-if="currentMode === 'map'">{{ t("EntityPage.network") }}</p>
-							<p v-if="currentMode === 'network'">{{ t("EntityPage.map") }}</p>
-						</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
+				<ModeSwitch :id="id" :current-mode="currentMode" />
 			</div>
 			<div class="relative grid h-full">
 				<slot />
diff --git a/messages/de/common.json b/messages/de/common.json
index 04271a2c..fcd2ba2d 100644
--- a/messages/de/common.json
+++ b/messages/de/common.json
@@ -75,7 +75,8 @@
 		"network": "Netzwerk-Visualisierung",
 		"sidebar": {
 			"toggle": "Details für {title} umschalten"
-		}
+		},
+		"no-map": "Nicht auf der Karte vorhanden."
 	},
 	"EntitySidebar": {
 		"NextFeature": "Nächste Funktion",
diff --git a/messages/en/common.json b/messages/en/common.json
index 3ef96330..db2a0553 100644
--- a/messages/en/common.json
+++ b/messages/en/common.json
@@ -75,7 +75,8 @@
 		"network": "Network Visualization",
 		"sidebar": {
 			"toggle": "Toggle details for {title}"
-		}
+		},
+		"no-map": "Not visible on the map."
 	},
 	"EntitySidebar": {
 		"NextFeature": "NextFeature",

From c619fb3a883617d9e0cfb11641319b13d4057605 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 24 Jul 2024 15:33:27 +0200
Subject: [PATCH 07/18] fix: labels are shown when a detailview is selected

---
 components/network.client.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/network.client.vue b/components/network.client.vue
index 2d41cd8a..a62620e5 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -126,6 +126,7 @@ watch(
 			skipIndexation: true,
 		});
 	},
+	{ immediate: true, deep: true },
 );
 
 watch(
@@ -137,7 +138,7 @@ watch(
 			setSearchHighlight(searchNode);
 		}
 	},
-	{ immediate: true },
+	{ immediate: true, deep: true },
 );
 
 onMounted(async () => {

From c03d9fdf6f0d352f973303fa3217eb25018fe96a Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 24 Jul 2024 15:34:02 +0200
Subject: [PATCH 08/18] fix: call mode-switcher only when an id is provided

---
 layouts/visualization.vue | 42 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index b80f9cf4..0cf73cb1 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { MapPinIcon, WaypointsIcon } from "lucide-vue-next";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 const t = useTranslations();
 
 const route = useRoute();
@@ -16,6 +20,13 @@ const id = computed(() => {
 const currentMode = computed(() => {
 	return route.query.mode as string;
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 </script>
 
 <template>
@@ -25,7 +36,36 @@ const currentMode = computed(() => {
 				<EntitySidebar :id="id" />
 			</template>
 			<div class="absolute right-4 z-20" style="top: calc(50% - 40px)">
-				<ModeSwitch :id="id" :current-mode="currentMode" />
+				<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
+				<div v-else>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: currentMode === 'network' ? 'map' : 'network',
+											},
+										}"
+									>
+										<MapPinIcon v-if="currentMode === 'network'" class="size-6" />
+										<WaypointsIcon v-else class="size-6" />
+										<span class="sr-only">{{
+											currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
+										}}</span>
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p v-if="currentMode === 'map'">{{ t("EntityPage.network") }}</p>
+								<p v-if="currentMode === 'network'">{{ t("EntityPage.map") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				</div>
 			</div>
 			<div class="relative grid h-full">
 				<slot />

From 97f30e0237e27c397cfdb5a1c3683ecf1a545f80 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Thu, 25 Jul 2024 12:18:50 +0200
Subject: [PATCH 09/18] fix: highlight searchnodes in network after disposing a
 detailnode

---
 components/network.client.vue | 63 ++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/network.client.vue b/components/network.client.vue
index a62620e5..e375ba52 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -51,6 +51,7 @@ const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions
 const disabledNodeColor = project.colors.disabledNodeColor;
 
 function setSearchHighlight(searchNode: string) {
+	console.log("RECEIVING SEARCH TERM", searchNode);
 	context.graph.nodes().forEach((el) => {
 		context.graph.removeNodeAttribute(el, "highlighted");
 	});
@@ -92,39 +93,41 @@ 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);
-				});
+			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;
 			}
-		}
-		// 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,
-		});
+			// 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, deep: true },
 );

From c17ed1817b9fe7ed326ea5898bfb29ada78ddda8 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 29 Jul 2024 15:42:37 +0200
Subject: [PATCH 10/18] chore: implement the detailview functionality in the
 data table

---
 components/app-header.vue           |  5 ++++-
 components/data-view.vue            |  7 ++++---
 components/entity-sidebar.vue       |  7 ++++++-
 components/search-results-table.vue | 16 +++++++++++++++-
 layouts/visualization.vue           | 18 ++++++++++++++----
 pages/visualization/index.vue       |  1 +
 6 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/components/app-header.vue b/components/app-header.vue
index e2401ce7..20ca2bce 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -16,7 +16,10 @@ const defaultLinks = computed<
 	if (!project.map.startPage) {
 		return {
 			home: { href: { path: "/" }, label: t("AppHeader.links.home") },
-			data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
+			data: {
+				href: { path: "/visualization", query: { mode: "table" } },
+				label: t("AppHeader.links.data"),
+			},
 			map: {
 				href: { path: "/visualization", query: { mode: "map" } },
 				label: t("AppHeader.links.map"),
diff --git a/components/data-view.vue b/components/data-view.vue
index 4d4200e2..1bd18a13 100644
--- a/components/data-view.vue
+++ b/components/data-view.vue
@@ -53,7 +53,9 @@ const sortingState = computed(() => {
 type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
 
 function setSearchFilters(query: Partial<SearchFilters>) {
-	void router.push({ query });
+	void router.push({
+		query: { mode: route.query.mode, selection: route.query.selection, ...query },
+	});
 	document.body.scrollTo(0, 0);
 }
 
@@ -103,11 +105,10 @@ const entities = computed(() => {
 		}) ?? []
 	);
 });
-
 </script>
 
 <template>
-	<div class="container relative grid grid-rows-[auto_1fr] gap-4">
+	<div class="container relative grid grid-rows-[auto_1fr] gap-4 p-8">
 		<SearchForm
 			:filter="searchFilters.category"
 			:search="searchFilters.search"
diff --git a/components/entity-sidebar.vue b/components/entity-sidebar.vue
index b31e962d..6898d7a7 100644
--- a/components/entity-sidebar.vue
+++ b/components/entity-sidebar.vue
@@ -5,6 +5,7 @@ const t = useTranslations();
 
 const props = defineProps<{
 	id: number;
+	noTableSidebar: boolean;
 }>();
 
 const { data } = useGetEntity(
@@ -33,7 +34,11 @@ const updateHandledRelations = (relations: Array<RelationType>) => {
 <template>
 	<div v-if="entity != null && props.id != null">
 		<details
-			class="group absolute z-10 mb-2 mr-2 h-full w-1/4 translate-x-[-25vw] transition-transform duration-300 open:translate-x-0"
+			:class="
+				props.noTableSidebar
+					? 'group z-10 mb-2 mr-2 h-full translate-x-[-25vw] transition-transform duration-300 open:translate-x-0 absolute w-1/4'
+					: 'group z-10 mb-2 mr-2 h-full translate-x-[-25vw] transition-transform duration-300 open:translate-x-0'
+			"
 			:open="openState"
 		>
 			<Card class="relative h-full overflow-y-scroll">
diff --git a/components/search-results-table.vue b/components/search-results-table.vue
index b4d80736..d835f4be 100644
--- a/components/search-results-table.vue
+++ b/components/search-results-table.vue
@@ -40,8 +40,15 @@ const props = defineProps<{
 
 const t = useTranslations();
 const { d } = useI18n();
+const route = useRoute();
 
 const columnHelper = createColumnHelper<EntityFeature>();
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
 
 /**
  * Converts a date cell value to a formatted date string.
@@ -124,7 +131,14 @@ const cols = [
 				{
 					class:
 						"underline decoration-dotted transition hover:no-underline focus-visible:no-underline",
-					href: { path: `/entities/${encodeURIComponent(info.row.original.properties._id)}` },
+					href: {
+						path: `/${getPath()}`,
+						query: {
+							...route.query,
+							mode: route.query.mode,
+							selection: encodeURIComponent(info.row.original.properties._id),
+						},
+					},
 				},
 				title,
 			);
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 0cf73cb1..8665719e 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -32,10 +32,14 @@ function getPath() {
 <template>
 	<NuxtLayout name="default">
 		<MainContent class="relative h-full">
-			<template v-if="id != null">
-				<EntitySidebar :id="id" />
+			<template v-if="id != null && currentMode !== 'table'">
+				<EntitySidebar :id="id" :no-table-sidebar="true" />
 			</template>
-			<div class="absolute right-4 z-20" style="top: calc(50% - 40px)">
+			<div
+				v-if="currentMode !== 'table'"
+				class="absolute right-4 z-20"
+				style="top: calc(50% - 40px)"
+			>
 				<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
 				<div v-else>
 					<TooltipProvider>
@@ -67,7 +71,13 @@ function getPath() {
 					</TooltipProvider>
 				</div>
 			</div>
-			<div class="relative grid h-full">
+			<div
+				class="relative grid h-full grid-cols-[0px_1fr] transition-all delay-150 ease-in-out data-[sidepanel]:grid-cols-[25vw_1fr]"
+				:data-sidepanel="id != null && currentMode === 'table' ? 'true' : undefined"
+			>
+				<div class="grid h-full">
+					<EntitySidebar v-if="id != null && currentMode === 'table'" :id="id" :no-table-sidebar="false" />
+				</div>
 				<slot />
 			</div>
 		</MainContent>
diff --git a/pages/visualization/index.vue b/pages/visualization/index.vue
index 802b5fcf..d6e0ca55 100644
--- a/pages/visualization/index.vue
+++ b/pages/visualization/index.vue
@@ -31,6 +31,7 @@ const currentMode = computed(() => {
 			<ErrorBoundary>
 				<DataMapView v-if="currentMode === 'map'" />
 				<DataNetworkView v-if="currentMode === 'network'" />
+				<DataView v-if="currentMode === 'table'"></DataView>
 			</ErrorBoundary>
 		</template>
 		<template v-else>

From 27f6b5a060cd141d596538f888225d32ec64c181 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Mon, 29 Jul 2024 15:54:08 +0200
Subject: [PATCH 11/18] refactor: delete unused data page

---
 pages/data/index.vue | 33 ---------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 pages/data/index.vue

diff --git a/pages/data/index.vue b/pages/data/index.vue
deleted file mode 100644
index d3e6e685..00000000
--- a/pages/data/index.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-definePageMeta({
-	validate() {
-		const env = useRuntimeConfig();
-		return env.public.database !== "disabled";
-	},
-});
-
-const t = useTranslations();
-
-usePageMetadata({
-	title: t("DataPage.meta.title"),
-});
-
-const env = useRuntimeConfig();
-</script>
-
-<template>
-	<MainContent class="container grid grid-rows-[auto_1fr] py-8">
-		<div>
-			<PageTitle class="sr-only">{{ t("DataPage.title") }}</PageTitle>
-		</div>
-
-		<template v-if="env.public.database !== 'disabled'">
-			<ErrorBoundary>
-				<DataView />
-			</ErrorBoundary>
-		</template>
-		<template v-else>
-			<div>{{ t("DataPage.work-in-progress") }}</div>
-		</template>
-	</MainContent>
-</template>

From 73dfc037b08e5a704aee4f6a53d93fe73c05e053 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 30 Jul 2024 13:20:11 +0200
Subject: [PATCH 12/18] chore: modify mode-switcher so the datalist view is
 also switchable

---
 components/data-network-view.vue |  16 +---
 components/entity-sidebar.vue    |   9 +++
 components/mode-switch.vue       | 101 ++++++++++++++++++++----
 config/project.config.ts         |   3 +
 layouts/visualization.vue        | 127 ++++++++++++++++++++++---------
 messages/de/common.json          |   9 ++-
 messages/en/common.json          |   7 +-
 project.config.json              |  15 ++++
 tailwind.config.ts               |   3 +-
 9 files changed, 218 insertions(+), 72 deletions(-)

diff --git a/components/data-network-view.vue b/components/data-network-view.vue
index 5d70d505..1aab3554 100644
--- a/components/data-network-view.vue
+++ b/components/data-network-view.vue
@@ -40,20 +40,8 @@ const { data, isPending, isPlaceholderData } = useGetNetworkData(
 	// @ts-expect-error Includes custom, per-instance system classes.
 	computed(() => {
 		return {
-			exclude_system_classes: [
-				// TO-DO: Currently there is an issue: filtering by case study and system_class type will return no results
-				"type",
-				"object_location",
-				"reference_system",
-				"file",
-				"source_translation",
-				"source",
-				"bibliography",
-				"external_reference",
-				"administrative_unit",
-				"edition",
-				"type_tools",
-			],
+			// TO-DO: Currently there is an issue: filtering by case study and system_class type will return no results
+			exclude_system_classes: project.network.exclude,
 		};
 	}),
 );
diff --git a/components/entity-sidebar.vue b/components/entity-sidebar.vue
index 6898d7a7..23cf8a36 100644
--- a/components/entity-sidebar.vue
+++ b/components/entity-sidebar.vue
@@ -24,6 +24,15 @@ onMounted(() => {
 	openState.value = true;
 });
 
+watch(
+	() => {
+		return props.id;
+	},
+	() => {
+		openState.value = true;
+	},
+	{ immediate: true, deep: true },
+);
 const handledRelations = ref<Array<RelationType>>([]);
 
 const updateHandledRelations = (relations: Array<RelationType>) => {
diff --git a/components/mode-switch.vue b/components/mode-switch.vue
index ce1b2bd5..e3eb34b2 100644
--- a/components/mode-switch.vue
+++ b/components/mode-switch.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { MapPinIcon, MapPinOffIcon, WaypointsIcon } from "lucide-vue-next";
+import {
+	CircleOffIcon,
+	MapPinIcon,
+	MapPinOffIcon,
+	RadiusIcon,
+	TablePropertiesIcon,
+} from "lucide-vue-next";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -20,6 +26,7 @@ function getPath() {
 }
 
 let hasPlace = ref(true);
+let inNetwork = ref(true);
 
 const { data } = useGetEntity(
 	computed(() => {
@@ -35,6 +42,7 @@ watch(
 		const entity = data.value?.features[0];
 		if (entity) {
 			entityHasCoordinates(entity);
+			entityInNetwork(entity);
 		}
 	},
 	{ immediate: true, deep: true },
@@ -48,49 +56,110 @@ function entityHasCoordinates(entity: EntityFeature) {
 		hasPlace.value = true;
 	}
 }
+
+function entityInNetwork(entity: EntityFeature) {
+	if (project.network.exclude.includes(entity.systemClass)) {
+		inNetwork.value = false;
+	} else inNetwork.value = true;
+}
 </script>
 
 <template>
-	<div v-if="hasPlace">
+	<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger>
-					<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
+					<div
+						:class="
+							props.currentMode === 'map'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white' && !hasPlace
+									? 'rounded-md bg-neutral-300 p-4 shadow-md'
+									: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
 						<NavLink
+							v-if="hasPlace"
 							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
 							:href="{
 								path: `/${getPath()}`,
 								query: {
-									mode: currentMode === 'network' ? 'map' : 'network',
+									mode: 'map',
 									...(props.id && { selection: props.id }),
 								},
 							}"
 						>
-							<MapPinIcon v-if="currentMode === 'network'" class="size-6" />
-							<WaypointsIcon v-else class="size-6" />
-							<span class="sr-only">{{
-								currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
-							}}</span>
+							<MapPinIcon class="size-6 text-white dark:text-black" />
 						</NavLink>
+						<MapPinOffIcon v-if="!hasPlace" class="size-6 text-white dark:text-black" />
 					</div>
 				</TooltipTrigger>
 				<TooltipContent>
-					<p v-if="props.currentMode === 'map'">{{ t("EntityPage.network") }}</p>
-					<p v-if="props.currentMode === 'network'">{{ t("EntityPage.map") }}</p>
+					<p v-if="hasPlace">{{ t("EntityPage.map") }}</p>
+					<p v-if="!hasPlace && props.id">{{ t("EntityPage.no-map") }}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<div
+						:class="
+							props.currentMode === 'network'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white' && !inNetwork
+									? 'rounded-md bg-neutral-300 p-4 shadow-md'
+									: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
+						<NavLink
+							v-if="inNetwork"
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: 'network',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<RadiusIcon class="size-6 text-white dark:text-black" />
+						</NavLink>
+						<CircleOffIcon v-if="!inNetwork" class="size-6 text-white dark:text-black" />
+					</div>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p v-if="inNetwork">{{ t("EntityPage.network") }}</p>
+					<p v-if="!inNetwork">{{ t("EntityPage.no-network") }}</p>
 				</TooltipContent>
 			</Tooltip>
 		</TooltipProvider>
-	</div>
-	<div v-if="!hasPlace && props.id">
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger>
-					<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
-						<MapPinOffIcon v-if="currentMode === 'network'" class="size-6 text-neutral-400" />
+					<div
+						:class="
+							props.currentMode === 'table'
+								? 'rounded-md bg-brand p-4 shadow-md'
+								: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+						"
+					>
+						<NavLink
+							class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: 'table',
+									...(props.id && { selection: props.id }),
+								},
+							}"
+						>
+							<TablePropertiesIcon class="size-6 text-white dark:text-black" />
+						</NavLink>
 					</div>
 				</TooltipTrigger>
 				<TooltipContent>
-					<p>{{ t("EntityPage.no-map") }}</p>
+					<p>{{ t("DataPage.title") }}</p>
 				</TooltipContent>
 			</Tooltip>
 		</TooltipProvider>
diff --git a/config/project.config.ts b/config/project.config.ts
index cdb10e44..18b186b5 100644
--- a/config/project.config.ts
+++ b/config/project.config.ts
@@ -45,6 +45,9 @@ const schema = v.object({
 			};
 		}),
 	),
+	network: v.object({
+		exclude: v.array(v.string()),
+	}),
 	defaultLocale: v.picklist(["de", "en"]),
 	fullscreen: v.boolean(),
 	imprint: v.picklist(["acdh-ch", "custom", "none"]),
diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 8665719e..09067cde 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { MapPinIcon, WaypointsIcon } from "lucide-vue-next";
+import { MapPinIcon, RadiusIcon, TablePropertiesIcon } from "lucide-vue-next";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
@@ -35,48 +35,107 @@ function getPath() {
 			<template v-if="id != null && currentMode !== 'table'">
 				<EntitySidebar :id="id" :no-table-sidebar="true" />
 			</template>
-			<div
-				v-if="currentMode !== 'table'"
-				class="absolute right-4 z-20"
-				style="top: calc(50% - 40px)"
-			>
+			<div class="absolute right-4 z-20" style="top: calc(50% - 110px)">
 				<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
 				<div v-else>
-					<TooltipProvider>
-						<Tooltip>
-							<TooltipTrigger>
-								<div class="rounded-md bg-white/90 p-4 shadow-md dark:bg-neutral-900">
-									<NavLink
-										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-										:href="{
-											path: `/${getPath()}`,
-											query: {
-												mode: currentMode === 'network' ? 'map' : 'network',
-											},
-										}"
+					<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger>
+									<div
+										:class="
+											currentMode === 'map'
+												? 'rounded-md bg-brand p-4 shadow-md'
+												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+										"
+									>
+										<NavLink
+											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+											:href="{
+												path: `/${getPath()}`,
+												query: {
+													mode: 'map',
+												},
+											}"
+										>
+											<MapPinIcon class="size-6 text-white dark:text-black" />
+										</NavLink>
+									</div>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p>{{ t("EntityPage.map") }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger>
+									<div
+										:class="
+											currentMode === 'network'
+												? 'rounded-md bg-brand p-4 shadow-md'
+												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+										"
+									>
+										<NavLink
+											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+											:href="{
+												path: `/${getPath()}`,
+												query: {
+													mode: 'network',
+												},
+											}"
+										>
+											<RadiusIcon class="size-6 text-white dark:text-black" />
+										</NavLink>
+									</div>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p>{{ t("EntityPage.network") }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger>
+									<div
+										:class="
+											currentMode === 'table'
+												? 'rounded-md bg-brand p-4 shadow-md'
+												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+										"
 									>
-										<MapPinIcon v-if="currentMode === 'network'" class="size-6" />
-										<WaypointsIcon v-else class="size-6" />
-										<span class="sr-only">{{
-											currentMode === "network" ? t("MapPage.title") : t("NetworkPage.title")
-										}}</span>
-									</NavLink>
-								</div>
-							</TooltipTrigger>
-							<TooltipContent>
-								<p v-if="currentMode === 'map'">{{ t("EntityPage.network") }}</p>
-								<p v-if="currentMode === 'network'">{{ t("EntityPage.map") }}</p>
-							</TooltipContent>
-						</Tooltip>
-					</TooltipProvider>
+										<NavLink
+											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+											:href="{
+												path: `/${getPath()}`,
+												query: {
+													mode: 'table',
+												},
+											}"
+										>
+											<TablePropertiesIcon class="size-6 text-white dark:text-black" />
+										</NavLink>
+									</div>
+								</TooltipTrigger>
+								<TooltipContent>
+									<p>{{ t("DataPage.title") }}</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</div>
 				</div>
 			</div>
 			<div
 				class="relative grid h-full grid-cols-[0px_1fr] transition-all delay-150 ease-in-out data-[sidepanel]:grid-cols-[25vw_1fr]"
 				:data-sidepanel="id != null && currentMode === 'table' ? 'true' : undefined"
 			>
-				<div class="grid h-full">
-					<EntitySidebar v-if="id != null && currentMode === 'table'" :id="id" :no-table-sidebar="false" />
+				<div class="grid">
+					<EntitySidebar
+						v-if="id != null && currentMode === 'table'"
+						:id="id"
+						:no-table-sidebar="false"
+					/>
 				</div>
 				<slot />
 			</div>
diff --git a/messages/de/common.json b/messages/de/common.json
index fcd2ba2d..4bfa11d4 100644
--- a/messages/de/common.json
+++ b/messages/de/common.json
@@ -48,14 +48,14 @@
 	},
 	"DataPage": {
 		"meta": {
-			"title": "Daten"
+			"title": "Datenliste"
 		},
 		"search": "Suche",
-		"title": "Daten",
+		"title": "Datenliste",
 		"work-in-progress": "Die Datenbank ist derzeit im Aufbau."
 	},
 	"DataView": {
-		"nothing-found": "Keine Einträge zu dieser Suche."
+		"nothing-found": "Keine Einträge zu dieser Suche.",
 	},
 	"DefaultLayout": {
 		"skip-to-main-content": "Zum Hauptinhalt springen"
@@ -76,7 +76,8 @@
 		"sidebar": {
 			"toggle": "Details für {title} umschalten"
 		},
-		"no-map": "Nicht auf der Karte vorhanden."
+		"no-map": "Nicht auf der Karte vorhanden.",
+		"no-network": "Nicht im Netzwerk vorhanden."
 	},
 	"EntitySidebar": {
 		"NextFeature": "Nächste Funktion",
diff --git a/messages/en/common.json b/messages/en/common.json
index db2a0553..94131613 100644
--- a/messages/en/common.json
+++ b/messages/en/common.json
@@ -48,10 +48,10 @@
 	},
 	"DataPage": {
 		"meta": {
-			"title": "Data"
+			"title": "Datalist"
 		},
 		"search": "Search",
-		"title": "Data",
+		"title": "Datalist",
 		"work-in-progress": "The database is currently work in progress."
 	},
 	"DataView": {
@@ -76,7 +76,8 @@
 		"sidebar": {
 			"toggle": "Toggle details for {title}"
 		},
-		"no-map": "Not visible on the map."
+		"no-map": "Not visible on the map.",
+		"no-network": "Not visible in the network."
 	},
 	"EntitySidebar": {
 		"NextFeature": "NextFeature",
diff --git a/project.config.json b/project.config.json
index 9d751129..a888da0d 100644
--- a/project.config.json
+++ b/project.config.json
@@ -22,6 +22,21 @@
 		"geojsonPoints": "#69c0ef",
 		"geojsonAreaCenterPoints": "#b8cf5b"
 	},
+	"network": {
+		"exclude": [
+			"type",
+			"object_location",
+			"reference_system",
+			"file",
+			"source_translation",
+			"source",
+			"bibliography",
+			"external_reference",
+			"administrative_unit",
+			"edition",
+			"type_tools"
+		]
+	},
 	"map": {
 		"startPage": false
 	},
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 387b9ac5..87c3da95 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { createPreset as createDesignTokenPreset } from "@acdh-oeaw/tailwindcss-
 import type { Config } from "tailwindcss";
 import createPlugin from "tailwindcss/plugin";
 
-// import { project } from "./config/project.config";
+import { project } from "./config/project.config";
 
 const shadcnPlugin = createPlugin(
 	({ addBase }) => {
@@ -75,6 +75,7 @@ const shadcnPlugin = createPlugin(
 			},
 			extend: {
 				colors: {
+					brand: project.colors.brand,
 					border: "hsl(var(--border))",
 					input: "hsl(var(--input))",
 					ring: "hsl(var(--ring))",

From be07f712e307cd4a229851f509db33163765f36b Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 30 Jul 2024 14:55:36 +0200
Subject: [PATCH 13/18] fix: mode switcher movement when a detailview in the
 data view is selected

---
 layouts/visualization.vue | 182 +++++++++++++++++++-------------------
 1 file changed, 91 insertions(+), 91 deletions(-)

diff --git a/layouts/visualization.vue b/layouts/visualization.vue
index 09067cde..ff70bb49 100644
--- a/layouts/visualization.vue
+++ b/layouts/visualization.vue
@@ -31,106 +31,106 @@ function getPath() {
 
 <template>
 	<NuxtLayout name="default">
-		<MainContent class="relative h-full">
-			<template v-if="id != null && currentMode !== 'table'">
-				<EntitySidebar :id="id" :no-table-sidebar="true" />
-			</template>
-			<div class="absolute right-4 z-20" style="top: calc(50% - 110px)">
-				<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
-				<div v-else>
-					<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger>
-									<div
-										:class="
-											currentMode === 'map'
-												? 'rounded-md bg-brand p-4 shadow-md'
-												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
-										"
+		<div class="absolute right-4 z-20" style="top: calc(50% - 110px)">
+			<ModeSwitch v-if="id != null" :id="id" :current-mode="currentMode" />
+			<div v-else>
+				<div class="grid gap-2 rounded-md bg-white/90 p-4 shadow-md dark:bg-black/90">
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'map'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'map',
+											},
+										}"
 									>
-										<NavLink
-											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-											:href="{
-												path: `/${getPath()}`,
-												query: {
-													mode: 'map',
-												},
-											}"
-										>
-											<MapPinIcon class="size-6 text-white dark:text-black" />
-										</NavLink>
-									</div>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>{{ t("EntityPage.map") }}</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger>
-									<div
-										:class="
-											currentMode === 'network'
-												? 'rounded-md bg-brand p-4 shadow-md'
-												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
-										"
+										<MapPinIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("EntityPage.map") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'network'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'network',
+											},
+										}"
 									>
-										<NavLink
-											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-											:href="{
-												path: `/${getPath()}`,
-												query: {
-													mode: 'network',
-												},
-											}"
-										>
-											<RadiusIcon class="size-6 text-white dark:text-black" />
-										</NavLink>
-									</div>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>{{ t("EntityPage.network") }}</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger>
-									<div
-										:class="
-											currentMode === 'table'
-												? 'rounded-md bg-brand p-4 shadow-md'
-												: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
-										"
+										<RadiusIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("EntityPage.network") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger>
+								<div
+									:class="
+										currentMode === 'table'
+											? 'rounded-md bg-brand p-4 shadow-md'
+											: 'rounded-md bg-primary/90 p-4 shadow-md dark:bg-white'
+									"
+								>
+									<NavLink
+										class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: 'table',
+											},
+										}"
 									>
-										<NavLink
-											class="flex items-center gap-1 underline decoration-dotted hover:no-underline"
-											:href="{
-												path: `/${getPath()}`,
-												query: {
-													mode: 'table',
-												},
-											}"
-										>
-											<TablePropertiesIcon class="size-6 text-white dark:text-black" />
-										</NavLink>
-									</div>
-								</TooltipTrigger>
-								<TooltipContent>
-									<p>{{ t("DataPage.title") }}</p>
-								</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-					</div>
+										<TablePropertiesIcon class="size-6 text-white dark:text-black" />
+									</NavLink>
+								</div>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>{{ t("DataPage.title") }}</p>
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				</div>
 			</div>
+		</div>
+		<MainContent class="relative h-full">
+			<template v-if="id != null && currentMode !== 'table'">
+				<EntitySidebar :id="id" :no-table-sidebar="true" />
+			</template>
 			<div
 				class="relative grid h-full grid-cols-[0px_1fr] transition-all delay-150 ease-in-out data-[sidepanel]:grid-cols-[25vw_1fr]"
 				:data-sidepanel="id != null && currentMode === 'table' ? 'true' : undefined"
 			>
-				<div class="grid">
+				<div class="grid h-full">
 					<EntitySidebar
 						v-if="id != null && currentMode === 'table'"
 						:id="id"

From de1ca21f42e855aac82f9fa8911eca9952067e32 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 31 Jul 2024 12:27:03 +0200
Subject: [PATCH 14/18] fix: data and map view when map is the start page

---
 components/app-header.vue           |  1 -
 components/data-map-view.vue        | 52 ++++++++++++++++-------------
 components/network.client.vue       |  1 -
 composables/use-get-current-view.ts |  1 -
 messages/de/common.json             |  2 +-
 pages/index.vue                     |  1 +
 6 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/components/app-header.vue b/components/app-header.vue
index 20ca2bce..edaf7e97 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -36,7 +36,6 @@ const defaultLinks = computed<
 			href: { path: "/", query: { mode: "map" } },
 			label: t("AppHeader.links.home"),
 		},
-		data: { href: { path: "/data" }, label: t("AppHeader.links.data") },
 		team: { href: { path: "/team" }, label: t("AppHeader.links.team") },
 	};
 });
diff --git a/components/data-map-view.vue b/components/data-map-view.vue
index deb2d3f4..24e1027a 100644
--- a/components/data-map-view.vue
+++ b/components/data-map-view.vue
@@ -98,6 +98,10 @@ function togglePolygons() {
 const selection = computed(() => {
 	return route.query.selection;
 });
+
+const mode = computed(() => {
+	return route.query.mode;
+});
 /**
  * Reduce size of geojson payload, which has an impact on performance,
  * because `maplibre-gl` will serialize geojson features when sending them to the webworker.
@@ -163,30 +167,32 @@ watch(data, () => {
 });
 
 watchEffect(() => {
-	const entity = entities.value.find((feature) => {
-		const id = getUnprefixedId(feature["@id"]);
-		return id === selection.value;
-	});
-
-	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];
+	if (mode.value && selection.value) {
+		const entity = entities.value.find((feature) => {
+			const id = getUnprefixedId(feature["@id"]);
+			return id === selection.value;
+		});
+
+		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];
+			}
+
+			popover.value = {
+				coordinates:
+					coordinates ??
+					(turf.center(createFeatureCollection([entity])).geometry.coordinates as [number, number]),
+				entities: [entity],
+			};
 		}
-
-		popover.value = {
-			coordinates:
-				coordinates ??
-				(turf.center(createFeatureCollection([entity])).geometry.coordinates as [number, number]),
-			entities: [entity],
-		};
 	}
 });
 </script>
diff --git a/components/network.client.vue b/components/network.client.vue
index e375ba52..4bc6157b 100644
--- a/components/network.client.vue
+++ b/components/network.client.vue
@@ -51,7 +51,6 @@ const layout = new FA2LayoutSupervisor(context.graph, { settings: layoutOptions
 const disabledNodeColor = project.colors.disabledNodeColor;
 
 function setSearchHighlight(searchNode: string) {
-	console.log("RECEIVING SEARCH TERM", searchNode);
 	context.graph.nodes().forEach((el) => {
 		context.graph.removeNodeAttribute(el, "highlighted");
 	});
diff --git a/composables/use-get-current-view.ts b/composables/use-get-current-view.ts
index a5705465..0d18b39c 100644
--- a/composables/use-get-current-view.ts
+++ b/composables/use-get-current-view.ts
@@ -6,7 +6,6 @@ export function useGetCurrentView() {
 	const route = useRoute();
 
 	return computed(() => {
-		console.log(route.path.split("/").pop());
 		const view = viewSchema.parse(route.path.split("/").pop());
 		return view;
 	});
diff --git a/messages/de/common.json b/messages/de/common.json
index 4bfa11d4..0ae8456c 100644
--- a/messages/de/common.json
+++ b/messages/de/common.json
@@ -55,7 +55,7 @@
 		"work-in-progress": "Die Datenbank ist derzeit im Aufbau."
 	},
 	"DataView": {
-		"nothing-found": "Keine Einträge zu dieser Suche.",
+		"nothing-found": "Keine Einträge zu dieser Suche."
 	},
 	"DefaultLayout": {
 		"skip-to-main-content": "Zum Hauptinhalt springen"
diff --git a/pages/index.vue b/pages/index.vue
index 1f735c3a..46b23b9a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -137,6 +137,7 @@ const currentMode = computed(() => {
 				<ErrorBoundary>
 					<DataMapView v-show="currentMode === 'map'" />
 					<DataNetworkView v-show="currentMode === 'network'" />
+					<DataView v-if="currentMode === 'table'"></DataView>
 				</ErrorBoundary>
 			</template>
 			<template v-else>

From 483ee9c51bfca17137423744fe6c0411666c9623 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Mon, 5 Aug 2024 13:22:07 +0200
Subject: [PATCH 15/18] fix: update landing page links

---
 content/system-pages/de/index.md | 2 +-
 content/system-pages/en/index.md | 4 ++--
 pages/index.vue                  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/system-pages/de/index.md b/content/system-pages/de/index.md
index 7d0fe1e2..3430ae8e 100644
--- a/content/system-pages/de/index.md
+++ b/content/system-pages/de/index.md
@@ -10,7 +10,7 @@ leadIn: >-
   Archäologische Datenbank von Sepulturen
 links:
   - label: Daten anzeigen
-    href: /data
+    href: /visualization?mode=table
   - label: Karte anzeigen
     href: /visualization?mode=map
 ---
diff --git a/content/system-pages/en/index.md b/content/system-pages/en/index.md
index f1989bb4..3814f08f 100644
--- a/content/system-pages/en/index.md
+++ b/content/system-pages/en/index.md
@@ -9,9 +9,9 @@ leadIn: >-
   [THANADOS](https://thanados.net/) - The Anthropological and Archaeological Database of Sepultures
 links:
   - label: View data
-    href: /data
+    href: /visualization?mode=table
   - label: View map
-    href: /map
+    href: /visualization?mode=map
 ---
 
 THANADOS (The Anthropological and Archaeological Database of Sepultures) deals with the digital
diff --git a/pages/index.vue b/pages/index.vue
index 46b23b9a..4018ae2e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -137,7 +137,7 @@ const currentMode = computed(() => {
 				<ErrorBoundary>
 					<DataMapView v-show="currentMode === 'map'" />
 					<DataNetworkView v-show="currentMode === 'network'" />
-					<DataView v-if="currentMode === 'table'"></DataView>
+					<DataView v-if="currentMode === 'table'" />
 				</ErrorBoundary>
 			</template>
 			<template v-else>

From cdd4ac9f5cfcbc8485166de7f8f12d05ea44f364 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Mon, 5 Aug 2024 13:26:58 +0200
Subject: [PATCH 16/18] fix: add missing icon for event system class

---
 utils/get-entity-icon.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/utils/get-entity-icon.ts b/utils/get-entity-icon.ts
index 8b247341..5148b57e 100644
--- a/utils/get-entity-icon.ts
+++ b/utils/get-entity-icon.ts
@@ -20,6 +20,7 @@ const icons: Record<string, Icon> = {
 	bibliography: TextIcon,
 	edition: TextIcon,
 	external_reference: TextIcon,
+	event: CalendarFoldIcon,
 	feature: MapPinIcon,
 	file: TextIcon,
 	find: MapPinIcon,

From 1e3640f947bbdbb2681484565158c09c7163a2e0 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 7 Aug 2024 14:16:18 +0200
Subject: [PATCH 17/18] fix: adapt navlinks in the detail view to new route

---
 components/types-popover.vue | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/components/types-popover.vue b/components/types-popover.vue
index 4e40bef3..9cffbcf8 100644
--- a/components/types-popover.vue
+++ b/components/types-popover.vue
@@ -6,6 +6,7 @@ type LpType = NonNullable<LinkedPlaceFeature["types"]> extends Array<infer U> ?
 const t = useTranslations();
 
 const { getUnprefixedId } = useIdPrefix();
+const route = useRoute();
 
 const props = defineProps<{ type: LpType }>();
 
@@ -16,6 +17,17 @@ const hierarchy = computed(() => {
 const hiddenHierarchy = computed(() => {
 	return hierarchy.value.slice(1);
 });
+
+function getPath() {
+	if (route.path.includes("visualization")) {
+		return "visualization";
+	}
+	return "";
+}
+
+const currentMode = computed(() => {
+	return route.query.mode;
+});
 </script>
 
 <template>
@@ -58,7 +70,13 @@ const hiddenHierarchy = computed(() => {
 									<NavLink
 										v-if="hierarchyItem.identifier"
 										class="underline decoration-dotted hover:no-underline"
-										:href="{ path: `/entities/${getUnprefixedId(hierarchyItem.identifier)}` }"
+										:href="{
+											path: `/${getPath()}`,
+											query: {
+												mode: currentMode,
+												selection: getUnprefixedId(hierarchyItem.identifier),
+											},
+										}"
 									>
 										{{ hierarchyItem.label }}
 									</NavLink>
@@ -73,7 +91,13 @@ const hiddenHierarchy = computed(() => {
 						<NavLink
 							v-if="hiddenHierarchy[0].identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(hiddenHierarchy[0].identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(hiddenHierarchy[0].identifier),
+								},
+							}"
 						>
 							{{ hiddenHierarchy[0].label }}
 						</NavLink>
@@ -86,7 +110,13 @@ const hiddenHierarchy = computed(() => {
 						<NavLink
 							v-if="type.identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(type.identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(type.identifier),
+								},
+							}"
 						>
 							{{ type.label }}
 						</NavLink>

From c54e08036fe2ae299b4d4a4a08cf46ddd5d04660 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Wed, 7 Aug 2024 14:26:23 +0200
Subject: [PATCH 18/18] fix: missing route

---
 components/types-popover.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/types-popover.vue b/components/types-popover.vue
index 9cffbcf8..d67562f7 100644
--- a/components/types-popover.vue
+++ b/components/types-popover.vue
@@ -47,7 +47,13 @@ const currentMode = computed(() => {
 						<NavLink
 							v-if="hierarchy[0]?.identifier"
 							class="underline decoration-dotted hover:no-underline"
-							:href="{ path: `/entities/${getUnprefixedId(hierarchy[0]?.identifier)}` }"
+							:href="{
+								path: `/${getPath()}`,
+								query: {
+									mode: currentMode,
+									selection: getUnprefixedId(hierarchy[0]?.identifier),
+								},
+							}"
 						>
 							{{ hierarchy[0].label }}
 						</NavLink>