From 2f3ff55343d6555ab76b1f8230ece76a7c506fcb Mon Sep 17 00:00:00 2001
From: zahraa222 <zahraaaa@umich.edu>
Date: Fri, 31 Jul 2026 12:44:39 -0400
Subject: [PATCH] =?UTF-8?q?Update=20the=20metadata=20sidebar=20for=20SWOT?=
 =?UTF-8?q?=20viewer=20so=20closing=20it=20clears=20the=20map=E2=80=99s=20?=
 =?UTF-8?q?selection=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataViewDrawer.vue | 14 ++++++++------
 frontend/src/components/TheLeafletMap.vue  |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DataViewDrawer.vue b/frontend/src/components/DataViewDrawer.vue
index 98591ed..195849e 100644
--- a/frontend/src/components/DataViewDrawer.vue
+++ b/frontend/src/components/DataViewDrawer.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useFeaturesStore } from '@/stores/features'
 import { mdiChevronRight, mdiChevronLeft, mdiChartScatterPlot } from '@mdi/js'
 import StaticMetadata from './StaticMetadata.vue'
@@ -55,12 +55,14 @@ const hasResults = () => {
   return featureStore?.activeFeature?.results !== undefined
 }
 
-featureStore.$subscribe((mutation, state) => {
-  if (state.activeFeature !== null) {
-    // && typeof mutation.events.newValue === 'object'
-    show.value = true
+watch(
+  () => featureStore.activeFeature?.properties?.feature_id,
+  (newId, oldId) => {
+    if (newId != null && newId !== oldId) {
+      show.value = true
+    }
   }
-})
+)
 </script>
 
 <style scoped>
diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
index 6600a56..dbf0731 100644
--- a/frontend/src/components/TheLeafletMap.vue
+++ b/frontend/src/components/TheLeafletMap.vue
@@ -532,6 +532,7 @@ function clearSelection() {
 
   featureStore.clearSelectedFeatures()
   chartStore.clearChartData()
+  featureStore.activeFeature = null
 
   // update the map
   updateMapBBox()