fix: fixed bug of not showing no of stars correctly for map and data …

…page. (#4702) * fix: fixed bug of not showing no of stars correctly for map and data page. * migrated Tags component to svelte 5 * migrated layer sort components to svelte 5 * fix: fixed bug of not updating layer list when new layer is added to layer tab.
UNDP-Data · Jan 9, 2025 · 0124b84 · 0124b84
1 parent acd664a
commit 0124b84
Show file tree

Hide file tree

Showing 16 changed files with 1,273 additions and 757 deletions.
diff --git a/.changeset/forty-files-deny.md b/.changeset/forty-files-deny.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: fixed bug of not showing no of stars correctly for map and data page.
diff --git a/.changeset/metal-mails-lay.md b/.changeset/metal-mails-lay.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: fixed bug of not updating layer list when new layer is added to layer tab.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/geohub/package.json b/sites/geohub/package.json
@@ -47,25 +47,25 @@
 		"@maptiler/geocoding-control": "^1.4.1",
 		"@neodrag/svelte": "^2.2.0",
 		"@sveltejs/adapter-node": "^5.2.11",
-		"@sveltejs/kit": "^2.15.0",
+		"@sveltejs/kit": "^2.15.2",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
 		"@testing-library/user-event": "^14.5.2",
-		"@turf/bbox": "^7.1.0",
+		"@turf/bbox": "^7.2.0",
 		"@types/chroma-js": "^2.4.5",
 		"@types/colormap": "^2.3.4",
 		"@types/crypto-js": "^4.2.2",
 		"@types/geojson": "^7946.0.15",
-		"@types/lodash": "^4.17.13",
+		"@types/lodash": "^4.17.14",
 		"@types/lodash-es": "^4.17.12",
 		"@types/papaparse": "^5.3.15",
 		"@types/pbf": "^3.0.5",
 		"@types/pg": "^8.11.10",
 		"@types/pngjs": "^6.0.5",
 		"@types/uuid": "^10.0.0",
 		"@typescript-eslint/eslint-plugin": "8.19.1",
-		"@typescript-eslint/parser": "^8.18.2",
+		"@typescript-eslint/parser": "^8.19.1",
 		"@undp-data/cgaz-admin-tool": "workspace:*",
 		"@undp-data/style-switcher": "workspace:*",
 		"@undp-data/svelte-file-dropzone": "^2.0.3",
@@ -102,19 +102,19 @@
 		"jszip": "^3.10.1",
 		"lodash-es": "^4.17.21",
 		"maplibre-gl": "^5.0.0",
-		"marked": "^15.0.4",
+		"marked": "^15.0.6",
 		"mathjs": "^14.0.1",
 		"millify": "^6.1.0",
 		"pako": "^2.1.0",
 		"papaparse": "^5.4.1",
 		"pmtiles": "^4.1.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"sass": "^1.83.0",
-		"svelte": "^5.16.0",
+		"sass": "^1.83.1",
+		"svelte": "^5.17.1",
 		"svelte-awesome-color-picker": "^3.1.4",
 		"svelte-carousel": "^1.0.25",
-		"svelte-check": "^4.1.1",
+		"svelte-check": "^4.1.3",
 		"svelte-htm": "^1.2.0",
 		"svelte-infinite-scroll": "^2.0.1",
 		"svelte-keydown": "^0.7.0",
@@ -127,11 +127,11 @@
 		"tippy.js": "^6.3.7",
 		"topojson-client": "^3.1.0",
 		"tslib": "^2.8.1",
-		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.2",
-		"uuid": "^11.0.3",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.19.1",
+		"uuid": "^11.0.4",
 		"valid-filename": "^4.0.0",
-		"vite": "^6.0.6",
+		"vite": "^6.0.7",
 		"vitest": "^2.1.8",
 		"xlsx": "^0.18.5"
 	},

diff --git a/sites/geohub/src/components/pages/map/Content.svelte b/sites/geohub/src/components/pages/map/Content.svelte
@@ -164,7 +164,7 @@
 	<DataView {contentHeight} />
 </div>
 <div hidden={activeTab !== TabNames.LAYERS}>
-	<LayerList {contentHeight} bind:activeTab on:export={addExportTab} />
+	<LayerList {contentHeight} bind:activeTab onexport={addExportTab} />
 </div>
 <div class="mx-4" hidden={activeTab !== TabNames.EXPORT}>
 	{#if $map}

diff --git a/sites/geohub/src/components/pages/map/layers/LayerList.svelte b/sites/geohub/src/components/pages/map/layers/LayerList.svelte
@@ -25,13 +25,11 @@
 		type MapStore
 	} from '@undp-data/svelte-undp-components';
 	import { Loader } from '@undp-data/svelte-undp-design';
-	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	import LayerTemplate from './LayerTemplate.svelte';
 	import StyleSaveDialog from './StyleSaveDialog.svelte';
 	import StyleShareDialog from './StyleShareDialog.svelte';
 
-	const dispatch = createEventDispatcher();
-
 	const map: MapStore = getContext(MAPSTORE_CONTEXT_KEY);
 	const layerListStore: LayerListStore = getContext(LAYERLISTSTORE_CONTEXT_KEY);
 	const editingLayerStore: EditingLayerStore = getContext(EDITING_LAYER_STORE_CONTEXT_KEY);
@@ -42,9 +40,14 @@
 	interface Props {
 		contentHeight: number;
 		activeTab: TabNames;
+		onexport?: () => void;
 	}
 
-	let { contentHeight = $bindable(), activeTab = $bindable() }: Props = $props();
+	let {
+		contentHeight = $bindable(),
+		activeTab = $bindable(),
+		onexport = () => {}
+	}: Props = $props();
 
 	let config: UserConfig = page.data.config;
 	let style: DashboardMapStyle = $state(page.data.style);
@@ -174,7 +177,7 @@
 	};
 
 	const handleExportClicked = () => {
-		dispatch('export');
+		if (onexport) onexport();
 	};
 
 	onMount(() => {
@@ -251,15 +254,17 @@
 	<div class="layer-list">
 		<div class="layer-contents" style="height: {totalHeight}px;">
 			{#key isLayerListChanged}
-				{#each $layerListStore as layer, index}
-					<LayerTemplate
-						bind:layer={$layerListStore[index]}
-						isExpanded={layer.isExpanded as boolean}
-						ontoggled={handleLayerToggled}
-						onchange={handleLayerListChanged}
-						showEditButton={true}
-					></LayerTemplate>
-				{/each}
+				{#key $layerListStore}
+					{#each $layerListStore as layer, index}
+						<LayerTemplate
+							bind:layer={$layerListStore[index]}
+							isExpanded={layer.isExpanded as boolean}
+							ontoggled={handleLayerToggled}
+							onchange={handleLayerListChanged}
+							showEditButton={true}
+						></LayerTemplate>
+					{/each}
+				{/key}
 			{/key}
 		</div>
 

diff --git a/sites/geohub/src/components/pages/map/layers/order/LayerOrderPanel.svelte b/sites/geohub/src/components/pages/map/layers/order/LayerOrderPanel.svelte
@@ -2,36 +2,31 @@
 	import { distinct } from '$lib/helper';
 	import { MAPSTORE_CONTEXT_KEY, type MapStore } from '@undp-data/svelte-undp-components';
 	import type { LayerSpecification, StyleSpecification } from 'maplibre-gl';
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	import SortLayer from './SortLayer.svelte';
 
 	const map: MapStore = getContext(MAPSTORE_CONTEXT_KEY);
 
-	export let onlyRendered = true;
-	export let onlyRelative = true;
-	export let style: StyleSpecification;
-
-	let hovering: boolean | number | undefined = false;
-	$: isShowLastDropArea = hovering === getLastVisibleIndex();
-
-	$: allLayers = style ? style.layers : [];
-	let visibleLayerMap: { [key: string]: LayerSpecification } = {};
-	export let relativeLayers: { [key: string]: string } = {};
-
-	$: {
-		if ($map) {
-			$map.on('moveend', updateLayers);
-			$map.on('styledata', updateLayers);
-		}
+	interface Props {
+		onlyRendered?: boolean;
+		onlyRelative?: boolean;
+		relativeLayers?: { [key: string]: string };
 	}
 
-	$: onlyRendered, updateLayers();
-	$: onlyRelative, updateLayers();
-	$: style, handleStyleChanged();
+	let {
+		onlyRendered = true,
+		onlyRelative = true,
+		relativeLayers = $bindable({})
+	}: Props = $props();
+
+	let style: StyleSpecification | undefined = $state();
+	let hovering: boolean | number | undefined = $state(false);
+	let visibleLayerMap: { [key: string]: LayerSpecification } = $state({});
 
 	const handleStyleChanged = () => {
 		if (!$map) return;
-		if (!style) return;
+		style = $map.getStyle();
+
 		if ($map.isStyleLoaded()) {
 			updateLayers();
 		} else {
@@ -73,9 +68,15 @@
 	};
 
 	const drop = (event, target: number, layer?: LayerSpecification) => {
+		event.preventDefault();
 		event.dataTransfer.dropEffect = 'move';
-		const start = parseInt(event.dataTransfer.getData('text/plain'));
-		const newTracklist = allLayers;
+
+		const start = parseInt(event.dataTransfer.getData('text/plain'), 10);
+		if (isNaN(start) || start < 0 || start >= allLayers.length) {
+			return;
+		}
+
+		const newTracklist = [...allLayers];
 
 		if (start <= target) {
 			newTracklist.splice(target + 1, 0, newTracklist[start]);
@@ -166,6 +167,23 @@
 		}
 		return isShow;
 	};
+	let allLayers: LayerSpecification[] = $state([]);
+
+	$effect(() => {
+		if ($map) {
+			$map.on('moveend', updateLayers);
+			$map.on('styledata', handleStyleChanged);
+
+			style = $map.getStyle();
+		}
+	});
+
+	onMount(() => {
+		if (style) {
+			allLayers = style.layers;
+		}
+		updateLayers();
+	});
 </script>
 
 <ul class="legend-panel">
@@ -176,16 +194,16 @@
 					role="list"
 					class="list-item"
 					draggable={true}
-					on:dragstart={(event) => dragstart(event, index)}
-					on:drop|preventDefault={(event) => drop(event, index, layer)}
-					on:dragover={(event) => dragover(event)}
-					on:dragenter={() => {
+					ondragstart={(event) => dragstart(event, index)}
+					ondrop={(event) => drop(event, index, layer)}
+					ondragover={(event) => dragover(event)}
+					ondragenter={() => {
 						hovering = index;
 					}}
 					class:is-active={hovering === index}
 				>
 					<li class="legend-panel-block">
-						<SortLayer {layer} {relativeLayers} on:layerOrderChanged={layerOrderChanged} />
+						<SortLayer {layer} {relativeLayers} onchange={layerOrderChanged} />
 					</li>
 				</div>
 			{/if}
@@ -195,14 +213,14 @@
 			class="list-item"
 			style="height: 40px;"
 			draggable={false}
-			on:drop|preventDefault={(event) => drop(event, getLastVisibleIndex())}
-			on:dragover={(event) => dragover(event)}
-			on:dragenter={() => {
+			ondrop={(event) => drop(event, getLastVisibleIndex())}
+			ondragover={(event) => dragover(event)}
+			ondragenter={() => {
 				hovering = getLastVisibleIndex();
 			}}
 			class:is-active={hovering === getLastVisibleIndex()}
 		>
-			{#if isShowLastDropArea}
+			{#if hovering === getLastVisibleIndex()}
 				<div class="last-drop-area">Drag to the last</div>
 			{/if}
 		</div>

diff --git a/sites/geohub/src/components/pages/map/layers/order/LayerOrderPanelButton.svelte b/sites/geohub/src/components/pages/map/layers/order/LayerOrderPanelButton.svelte
@@ -9,7 +9,6 @@
 		type MapStore
 	} from '@undp-data/svelte-undp-components';
 	import { Checkbox } from '@undp-data/svelte-undp-design';
-	import type { StyleSpecification } from 'maplibre-gl';
 	import { getContext, untrack } from 'svelte';
 
 	const map: MapStore = getContext(MAPSTORE_CONTEXT_KEY);
@@ -18,7 +17,6 @@
 	let onlyRendered = $state(false);
 	let onlyRelative = $state(true);
 	let relativeLayers: { [key: string]: string } = $state({});
-	let style: StyleSpecification = $state();
 
 	const updateLayerOrderList = () => {
 		if ($map && $layerListStore) {
@@ -30,7 +28,6 @@
 					relativeLayers[child.id] = `${clean(layer.name)} label`;
 				});
 			});
-			style = $map.getStyle();
 		}
 	};
 
@@ -53,12 +50,10 @@
 	$effect(() => {
 		if ($map) {
 			$map.on('styledata', function () {
-				style = $map.getStyle();
 				updateLayerOrderList();
 			});
 			$map.on('sourcedata', function (e) {
 				if (e.isSourceLoaded) {
-					style = $map.getStyle();
 					updateLayerOrderList();
 				}
 			});
@@ -96,7 +91,7 @@
 	</div>
 
 	<div class="layer-order">
-		<LayerOrderPanel bind:style bind:onlyRendered bind:onlyRelative bind:relativeLayers />
+		<LayerOrderPanel {onlyRendered} {onlyRelative} bind:relativeLayers />
 	</div>
 </div>