feat: added popup to show values in dashboard (#5230)

Author: Thuhaa

.changeset/quiet-poets-sip.md

@@ -0,0 +1,5 @@
+---
+"geohub": minor
+---
+
+feat: added popup to show values in electricity dashboard

sites/geohub/src/routes/(app)/dashboards/electricity/[email protected]

@@ -302,6 +302,8 @@
 		} else {
 			electricitySelected = NONE_ID;
 		}
+
+		console.log('electricitySelected', electricitySelected);
 	};
 
 	const setTimeSliderActive = () => {

sites/geohub/src/routes/(app)/dashboards/electricity/components/AnalyzeBivariate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { initTooltipTippy } from '@undp-data/svelte-undp-components';
 	import { onDestroy, onMount } from 'svelte';
-	import { map } from '../stores';
+	import { map, selectedAdminDataset } from '../stores';
 	import { unloadAdmin, upsertBivariateAdmin } from '../utils/adminLayer';
 	import { UNDP_DASHBOARD_RASTER_LAYER_ID } from './TimeSlider.svelte';
 	import type { ExpressionSpecification } from 'maplibre-gl';
@@ -91,6 +91,7 @@
 	};
 
 	onMount(() => {
+		selectedAdminDataset.set('Electricity Access with Wealth indicator');
 		if ($map) {
 			const style = $map.getStyle();
 			for (const layer of style.layers) {
@@ -101,12 +102,10 @@
 		}
 		colorExpression = updateColorExpression(propertyA, propertyB, selectedRow, selectedCol);
 		upsertBivariateAdmin(colorExpression as ExpressionSpecification);
-		// $map.on('zoomend', () => {
-		//     upsertBivariateAdmin(colorExpression as ExpressionSpecification)
-		// });
 	});
 
 	onDestroy(() => {
+		selectedAdminDataset.set(undefined);
 		unloadAdmin();
 	});
 </script>

sites/geohub/src/routes/(app)/dashboards/electricity/components/ColormapChanger.svelte

@@ -17,8 +17,4 @@
 <div class="mt-2 p-4 has-background-light">
 	<p class="mb-2">Electricity access</p>
 	<ColorMapPicker colorMapName={$colorMap.value} onchange={colorPickerChangeHandler} />
-	<!--	<label class="checkbox mt-2">-->
-	<!--		<input type="checkbox" onchange={showLabelsHandler} checked={showMapLabels} />-->
-	<!--		Show Labels-->
-	<!--	</label>-->
 </div>

sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityDataExplore.svelte

@@ -2,7 +2,6 @@
 	import ElectricityDataTimelineControl from './ElectricityDataTimelineControl.svelte';
 	import ColormapChanger from './ColormapChanger.svelte';
 	import { ELECTRICITY_DATATYPE_CONTEXT_KEY } from '../stores/electricityDataType';
-
 	import { onDestroy, onMount, setContext } from 'svelte';
 	import { loadAdmin, unloadAdmin } from '../utils/adminLayer';
 

sites/geohub/src/routes/(app)/dashboards/electricity/components/ElectricityDataTimelineControl.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
 	import { electricityDataTypes } from '../stores/electricityDataType';
+	import { onDestroy, onMount } from 'svelte';
+	import { selectedAdminDataset } from '../stores';
 
 	interface Props {
 		electricityDataType: number[];
 	}
 
 	let { electricityDataType = $bindable() }: Props = $props();
+
+	onMount(() => {
+		if (electricityDataType.includes(2012)) {
+			selectedAdminDataset.set('Settlement-Level Electricity Access');
+		} else {
+			selectedAdminDataset.set('Electricity Access Forecast');
+		}
+	});
+	onDestroy(() => selectedAdminDataset.set(undefined));
 </script>
 
 <div>
@@ -15,6 +26,11 @@
 				class="button data-option pl-3 {`${JSON.stringify(choice.value) === JSON.stringify(electricityDataType) ? 'is-active' : ''}`}"
 				onclick={() => {
 					electricityDataType = choice.value as number[];
+					if (choice.value.includes(2012)) {
+						selectedAdminDataset.set('Settlement-Level Electricity Access');
+					} else {
+						selectedAdminDataset.set('Electricity Access Forecast');
+					}
 				}}
 			>
 				<span class="is-size-7">{choice.title}</span>

sites/geohub/src/routes/(app)/dashboards/electricity/stores/index.ts

@@ -13,3 +13,10 @@ export const colorMap = writable({
 	value: 'pubu',
 	isReversed: false
 });
+
+export const selectedAdminDataset = writable<
+	| 'Settlement-Level Electricity Access'
+	| 'Electricity Access Forecast'
+	| 'Electricity Access with Wealth indicator'
+	| undefined
+>(undefined);

sites/geohub/src/routes/(app)/dashboards/electricity/utils/adminLayer.ts

@@ -2,15 +2,17 @@ import maplibregl, {
 	type ExpressionSpecification,
 	type FillLayerSpecification,
 	type LineLayerSpecification,
+	type Popup,
 	type SourceSpecification
 } from 'maplibre-gl';
-import { admin, colorMap, map as mapStore } from '../stores';
+import { admin, colorMap, selectedAdminDataset, map as mapStore } from '../stores';
 import { get } from 'svelte/store';
 import chroma from 'chroma-js';
 
 const ADM_ID = 'admin';
 const ADM0_ID = 'adm0';
-let hoveredStateId: string;
+let hoverPopup: Popup | null = null;
+let lastFeatureId: null;
 const choropleth = true;
 
 let adminUrl = '';
@@ -44,48 +46,106 @@ export const offInteraction = () => {
 	map.off('mouseleave', ADM_ID, onMouseLeave);
 };
 
+let lastUpdate = 0;
+
+const getAdminLevelName = () => {
+	const map = getMap();
+	const zoom = map.getZoom();
+	if (zoom < 3) return 'Country';
+	if (zoom < 7) return 'State';
+	return 'District';
+};
+
 const onMouseMove = (e) => {
+	if (!maplibregl) return;
+
+	const now = performance.now();
+	if (now - lastUpdate < 50) {
+		if (hoverPopup) hoverPopup.setLngLat(e.lngLat);
+		return;
+	}
+	lastUpdate = now;
+
 	const map = getMap();
 	const lvl = getAdminLevelForZoom(map.getZoom());
 	const promoteId = `adm${lvl}_id`;
 	const sourceLayer = `adm${lvl}_polygons`;
-
 	const feature = e.features?.[0];
-	if (!feature) return;
 
-	const featureId = feature.properties[promoteId];
-	if (!featureId) return;
+	if (!feature) {
+		if (hoverPopup) hoverPopup.remove();
 
-	if (hoveredStateId && hoveredStateId !== featureId) {
-		map.setFeatureState({ source: ADM_ID, sourceLayer, id: hoveredStateId }, { hover: false });
+		if (lastFeatureId !== null) {
+			map.setFeatureState({ source: ADM_ID, sourceLayer, id: lastFeatureId }, { hover: false });
+			lastFeatureId = null;
+			admin.set({});
+		}
+		return;
+	}
+
+	if (!hoverPopup) {
+		hoverPopup = new maplibregl.Popup({
+			closeButton: false,
+			closeOnClick: false
+		}).trackPointer();
 	}
 
-	hoveredStateId = featureId;
+	const nameColumn = feature.properties[`adm${lvl}_name`];
+	const valueColumn = feature.properties[`hrea_${year}`];
+	const currentId = feature.properties[promoteId];
+
+	if (currentId !== lastFeatureId) {
+		hoverPopup
+			.setHTML(
+				`
+                    <div style="padding:10px 12px; background:#fff; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.15); font-size:13px;">
+                        <div style="font-weight:600; margin-bottom:4px;">${get(selectedAdminDataset)}</div>
+                        <hr style="border:0; border-top:1px solid #e0e0e0; margin:6px 0;">
+                        <div style="font-weight:400; margin-bottom:4px;">${getAdminLevelName()}: ${nameColumn}</div>
+                        <div>${year}: ${(valueColumn * 100).toFixed(1)}%</div>
+                    </div>
+                `
+			)
+			.addTo(map);
+
+		if (lastFeatureId || lastFeatureId === 0) {
+			map.setFeatureState({ source: ADM_ID, sourceLayer, id: lastFeatureId }, { hover: false });
+		}
+
+		map.setFeatureState({ source: ADM_ID, sourceLayer, id: currentId }, { hover: true });
 
-	map.setFeatureState({ source: ADM_ID, sourceLayer, id: hoveredStateId }, { hover: true });
+		const el = hoverPopup.getElement().querySelector('.maplibregl-popup-content');
+		el.style.cssText = 'background:transparent;border:none;box-shadow:none;padding:0;';
 
-	admin.set(feature.properties);
+		lastFeatureId = currentId;
+		admin.set(feature.properties);
+	} else {
+		hoverPopup.setLngLat(e.lngLat);
+	}
 };
 
 const onMouseLeave = () => {
 	const map = getMap();
 	const lvl = getAdminLevelForZoom(map.getZoom());
 	const sourceLayer = `adm${lvl}_polygons`;
 
-	if (hoveredStateId) {
-		map.setFeatureState({ source: ADM_ID, sourceLayer, id: hoveredStateId }, { hover: false });
+	if (lastFeatureId !== null) {
+		map.setFeatureState({ source: ADM_ID, sourceLayer, id: lastFeatureId }, { hover: false });
+		lastFeatureId = null;
 		admin.set({});
 	}
 
-	hoveredStateId = null;
+	if (hoverPopup) {
+		hoverPopup.remove();
+	}
 };
 
 const onZoom = async ({ originalEvent }) => {
 	if (!originalEvent) return;
 	loadAdmin();
 };
 
-const getMap = () => get(mapStore);
+export const getMap = () => get(mapStore);
 
 export const loadAdmin = () => {
 	const map = getMap();
@@ -96,6 +156,7 @@ export const loadAdmin = () => {
 	}
 	loadAdminChoropleth(null);
 	onInteraction();
+
 	map.on('zoom', onZoom);
 };