fix: handle layer name correctly if it contains dot (.) in title (#4927)

* fix: show accordion and floating panel titile correctly if title contains dot (.)

* fix: fixed /datasets/{id}/table endpoint to handle layer name correctly if layer name contains dot (.)

Author: Jin Igarashi

.changeset/great-pumas-attack.md

@@ -0,0 +1,7 @@
+---
+"@undp-data/svelte-maplibre-storymap": patch
+"@undp-data/svelte-undp-components": patch
+"geohub": patch
+---
+
+fix: show accordion and floating panel titile correctly if title contains dot (.)

.changeset/stupid-teachers-thank.md

@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: fixed /datasets/{id}/table endpoint to handle layer name correctly if layer name contains dot (.)

packages/svelte-maplibre-storymap/src/lib/MaplibreLegendControl.svelte

@@ -337,7 +337,7 @@
 					{#if showInvisibleLayers || (!showInvisibleLayers && getLayerOpacity(l.id) > 0 && !isRemoteLegend)}
 						{#if showInteractive}
 							<Accordion
-								title={clean(l.name)}
+								title={l.name}
 								bind:isExpanded={expanded[l.id]}
 								isSelected={false}
 								showHoveredColor={true}

packages/svelte-undp-components/src/lib/components/ui/Accordion.svelte

@@ -9,6 +9,7 @@
 		isSelected?: boolean;
 		showHoveredColor?: boolean;
 		isUppercase?: boolean;
+		removeExtension?: boolean;
 		padding?: string;
 		buttons?: import('svelte').Snippet;
 		content?: import('svelte').Snippet;
@@ -21,6 +22,7 @@
 		isSelected = false,
 		showHoveredColor = false,
 		isUppercase = true,
+		removeExtension = false,
 		padding = 'px-4',
 		buttons,
 		content,
@@ -72,7 +74,7 @@
 					class="fa-solid fa-chevron-down toggle-icon {isExpanded ? 'active' : ''} has-text-primary"
 				></i>
 			</span>
-			<span class="has-text-grey-dark">{clean(title, isUppercase)}</span>
+			<span class="has-text-grey-dark">{clean(title, isUppercase, removeExtension)}</span>
 		</span>
 
 		{@render buttons?.()}

packages/svelte-undp-components/src/lib/components/ui/FloatingPanel.svelte

@@ -54,7 +54,7 @@
 			}}
 			onkeydown={handleEnterKey}
 		>
-			{clean(title)}
+			{clean(title, true, false)}
 		</div>
 		{#if showExpand || showClose}
 			<div class="header-buttons is-flex is-align-items-center ml-auto">

packages/svelte-undp-components/src/lib/util/clean.ts

@@ -2,11 +2,16 @@
  * Remove underscore and extension and apply start/title case to a string
  * @param val String to clean
  */
-export const clean = (val: string, isUppercase = true) => {
+export const clean = (val: string, isUppercase = true, removeExtension = true) => {
 	if (!val) return '';
 	// apply start/title case
-	return val
-		.replace(/[_-]/g, ' ') // remove underscore and hyphen
-		.replace(/\.[^/.]+$/, '') // remove extension
-		.replace(/\b\w/g, (str) => (isUppercase ? str.toUpperCase() : str));
+	let result = val.replace(/[_-]/g, ' '); // remove underscore and hyphen
+
+	if (removeExtension) {
+		result = result.replace(/\.[^/.]+$/, '');
+	}
+
+	result = result.replace(/\b\w/g, (str) => (isUppercase ? str.toUpperCase() : str));
+
+	return result;
 };

sites/geohub/src/components/pages/map/layers/LayerTemplate.svelte

@@ -452,7 +452,7 @@
 </script>
 
 <Accordion
-	title={clean(layer.name)}
+	title={clean(layer.name, true, false)}
 	bind:isExpanded
 	isSelected={$editingLayerStore?.id === layer.id}
 	showHoveredColor={true}

sites/geohub/src/lib/server/api/datasets/[id]/table/layers/[layer].[format]/GET.ts

@@ -33,7 +33,7 @@ export const Param = z.object({
 		.describe(`a layer ID. This should be equivalent to maplibre's source layer ID.`)
 		.openapi({ example: 'zanzibar_tourism_attractions' }),
 	format: z
-		.enum([...SupportedTableFormats] as [string, ...string[]])
+		.string()
 		.describe(`Table format either json or csv or geojson or xlsx. default is json.`)
 });
 
@@ -162,8 +162,17 @@ export default new Endpoint({ Param, Query, Output, Modifier }).handle(
 		}
 
 		const id: string = param.id;
-		const layer: string = param.layer.toLowerCase();
-		const format: string = param.format.toLowerCase();
+		let layer: string = param.layer.toLowerCase();
+		let format: string = param.format.toLowerCase();
+
+		// if layer name consists of dot, sveltekit will split layer name and format weirdly.
+		// this code will fix layer name and format name correctly.
+		const formatParts = format.split('.');
+		if (formatParts.length > 1) {
+			format = formatParts[formatParts.length - 1];
+			layer = [layer, ...formatParts.slice(0, formatParts.length - 1)].join('.');
+		}
+
 		if (!SupportedTableFormats.includes(format)) {
 			error(400, {
 				message: `${format} is not supported. Please select it from ${SupportedTableFormats.join(', ')}`