From a3e7c92915dd0eb38057162e8d28cf885915cbb6 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 6 Feb 2026 14:06:37 +0700
Subject: [PATCH] Clear inactive clusters on view switch

---
 app/components/catalog/CatalogMap.vue | 11 +++++------
 app/components/page/CatalogPage.vue   |  8 ++++++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/components/catalog/CatalogMap.vue b/app/components/catalog/CatalogMap.vue
index 00ce6a5..2cf4307 100644
--- a/app/components/catalog/CatalogMap.vue
+++ b/app/components/catalog/CatalogMap.vue
@@ -800,12 +800,11 @@ const initServerClusteringLayersByType = async (map: MapboxMapType) => {
       const features = map.queryRenderedFeatures(e.point, { layers: [clusterLayerId] })
       const feature = features[0]
       if (!feature) return
-      const clusterId = feature.properties?.cluster_id
-      const source = map.getSource(sourceIdByType) as mapboxgl.GeoJSONSource
-      source.getClusterExpansionZoom(clusterId, (err, zoom) => {
-        if (err) return
-        const geometry = feature.geometry as GeoJSON.Point
-        map.easeTo({ center: geometry.coordinates as [number, number], zoom: zoom || 4 })
+      const expansionZoom = feature.properties?.expansionZoom
+      const geometry = feature.geometry as GeoJSON.Point
+      map.easeTo({
+        center: geometry.coordinates as [number, number],
+        zoom: expansionZoom || map.getZoom() + 2
       })
     })
 
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 8d95b3d..331e995 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -316,8 +316,15 @@ const clusterLoading = computed(() => {
   return offerClusters.loading.value
 })
 
+const clearInactiveClusters = (active: 'offer' | 'hub' | 'supplier') => {
+  if (active !== 'offer') offerClusters.clearNodes()
+  if (active !== 'hub') hubClusters.clearNodes()
+  if (active !== 'supplier') supplierClusters.clearNodes()
+}
+
 const fetchActiveClusters = async () => {
   if (!currentBounds.value) return
+  clearInactiveClusters(activeClusterType.value)
   if (activeClusterType.value === 'hub') {
     await hubClusters.fetchClusters(currentBounds.value)
     return
@@ -333,6 +340,7 @@ const fetchActiveClusters = async () => {
 watch(mapViewMode, async () => {
   if (!props.useServerClustering) return
   if (useTypedClusters.value) {
+    clearInactiveClusters(activeClusterType.value)
     if (currentBounds.value) {
       await fetchActiveClusters()
     }