fix: work around inconsistent entity identifier prefixes in api response

components/data-map-view.vue

@@ -170,7 +170,7 @@ watch(data, () => {
 			</GeoMap>
 
 			<Centered v-if="isLoading" class="pointer-events-none">
-				<LoadingIndicator class="text-[#0a0a0a]" size="lg" />
+				<LoadingIndicator class="text-neutral-950" size="lg" />
 			</Centered>
 		</VisualisationContainer>
 	</div>

components/geo-map.client.vue

@@ -181,7 +181,7 @@ function update() {
 
 	if (geojson.features.length > 0) {
 		const bounds = turf.bbox(geojson);
-		map.fitBounds(bounds, { padding: 20 });
+		map.fitBounds(bounds, { padding: 50 });
 	}
 }
 

composables/use-create-entity.ts

@@ -10,7 +10,7 @@ export interface Entity extends LinkedPlace {
 }
 
 export function useCreateEntity() {
-	const prefix = useIdPrefix();
+	const { getUnprefixedId } = useIdPrefix();
 
 	return function createtEntity(lp: LinkedPlace): Entity {
 		/**
@@ -19,7 +19,7 @@ export function useCreateEntity() {
 		 * uniquely identify each entity, and to create links to entity details pages.
 		 */
 		lp.features.forEach((feature) => {
-			const id = feature["@id"].slice(prefix.length);
+			const id = getUnprefixedId(feature["@id"]);
 			const _feature = feature as EntityFeature;
 			_feature.properties._id = id;
 		});

composables/use-id-prefix.ts

@@ -7,5 +7,16 @@ export function useIdPrefix() {
 		createUrl({ baseUrl: env.public.NUXT_PUBLIC_API_BASE_URL, pathname: "/api/entity/" }),
 	);
 
-	return prefix;
+	function getUnprefixedId(id: string) {
+		/**
+		 * FIXME:
+		 * Currently, some identifiers in the api response are prefixed with "/entity", but others
+		 * with "/api/entity", so this must be fixed backend-side first.
+		 */
+		// return id.slice(prefix.length);
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return id.split("/").at(-1)!;
+	}
+
+	return { prefix, getUnprefixedId };
 }

package.json

@@ -7,7 +7,7 @@
 		"node": "20.x",
 		"pnpm": "8.x"
 	},
-	"packageManager": "[email protected].2",
+	"packageManager": "[email protected].3",
 	"scripts": {
 		"analyze": "nuxt analyze",
 		"build": "nuxt build --dotenv ./.env.local",
@@ -62,7 +62,7 @@
 		"fast-glob": "^3.3.2",
 		"is-ci": "^3.0.1",
 		"lucide-vue-next": "^0.330.0",
-		"maplibre-gl": "^4.0.0",
+		"maplibre-gl": "^4.0.1",
 		"npm-run-all2": "^6.1.2",
 		"nuxt": "^3.10.2",
 		"openapi-typescript": "^7.0.0-next.7",

pages/entities/[id].vue

@@ -23,7 +23,7 @@ definePageMeta({
 
 const locale = useLocale();
 const t = useTranslations();
-const prefix = useIdPrefix();
+const { getUnprefixedId } = useIdPrefix();
 
 const route = useRoute();
 const id = computed(() => {
@@ -131,7 +131,7 @@ const typesById = computed(() => {
 									<li v-for="(relation, index) of relations" :key="index">
 										<NavLink
 											class="underline decoration-dotted hover:no-underline"
-											:href="{ path: `/entities/${relation.relationTo?.slice(prefix.length)}` }"
+											:href="{ path: `/entities/${getUnprefixedId(relation.relationTo)}` }"
 										>
 											{{ relation.label }}
 										</NavLink>