From 8fdf613c2cd699aa725d45c911cad9d67ae264cf Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 18:19:39 -0400
Subject: [PATCH 01/10] add click event, when user click the marker, marker
 would enter localSelectMarker array

---
 src/maps/components/KMarker.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/maps/components/KMarker.vue b/src/maps/components/KMarker.vue
index f706d5f32..4e0eac6ba 100644
--- a/src/maps/components/KMarker.vue
+++ b/src/maps/components/KMarker.vue
@@ -56,6 +56,7 @@ export default {
   },
   emits: [
     'dragend',
+    'marker-clicked',
   ],
   setup () {
     const leafletMap = inject('leafletMap')
@@ -96,6 +97,11 @@ export default {
       draggable: this.draggable,
     }).addTo(this.leafletMap))
 
+    this.leafletMarker.on('click', event => {
+      // If user click the marker, it would enter localselectMarker array
+      this.$emit('marker-clicked', event)
+    })
+
     if (this.opacity) {
       this.leafletMarker.setOpacity(this.opacity)
     }

From e366006b928ab2feda268723195c6ff6336010c5 Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 18:21:32 -0400
Subject: [PATCH 02/10] add functions: handleMarkerClicked, updateZoom,
 centerAndZoom. update functions: opacityFor. Those new and updating functions
 can handle the new localSelectMarker event

---
 src/maps/components/StandardMap.vue | 83 +++++++++++++++++++++++++++--
 1 file changed, 79 insertions(+), 4 deletions(-)

diff --git a/src/maps/components/StandardMap.vue b/src/maps/components/StandardMap.vue
index fe88fa3ff..bf107137c 100644
--- a/src/maps/components/StandardMap.vue
+++ b/src/maps/components/StandardMap.vue
@@ -1,5 +1,6 @@
 <template>
   <KMap
+    ref="kmap"
     v-bind="mapProps"
     :show-attribution="showAttribution"
     :padding-top-left="paddingTopLeft"
@@ -19,6 +20,7 @@
       :popup="marker.popup"
       :opacity="opacityFor(marker)"
       @dragend="event => dragend(event, marker)"
+      @marker-clicked="event => handleMarkerClicked(event, marker)"
     />
     <QMenu
       ref="popover"
@@ -42,7 +44,8 @@ import KMap from './KMap.vue'
 import KMarker from './KMarker.vue'
 
 const SELECTED_OPACITY = 1
-const UNSELECTED_OPACITY = 0.5
+const UNSELECTED_OPACITY = 0.7
+const i = 1
 
 export default {
   components: {
@@ -96,18 +99,23 @@ export default {
     'map-move-end',
     'marker-moved',
     'map-click',
+    'update:selectedMarkers',
   ],
   data () {
     return {
       lastZoom: 15,
       popoverOffset: [0, 0],
       popoverLatLng: null,
+      // Create the localSelect Marker, when we click the specific marker, it would push in localSelect marker
+      localSelectedMarkers: this.selectedMarkers || [],
     }
   },
   computed: {
     mapProps () {
+      console.log('the times called here: ', i)
       if (this.forceZoom && this.forceCenter) {
         // This is used on the full page map view, where the params come from the URL, so we need to ignore all the markers
+        console.log('here 1')
         return {
           zoom: this.forceZoom,
           center: this.forceCenter,
@@ -115,6 +123,7 @@ export default {
       }
       if (this.forceBounds) {
         // This is used when we emphasize nearby groups
+        console.log('here 2')
         return {
           bounds: this.forceBounds,
         }
@@ -147,7 +156,15 @@ export default {
       }
     },
     markersForBounds () {
-      return this.hasSelectedMarkers ? this.selectedMarkers : this.markers
+      if (this.hasSelectedMarkers) {
+        console.log('Selected markers:', this.selectedMarkers) // Log the selected markers
+        return this.selectedMarkers
+      }
+      else {
+        console.log('No selected markers, showing all markers.') // Inform when no markers are selected
+        return this.markers
+      }
+      // return this.hasSelectedMarkers ? this.selectedMarkers : this.markers
     },
     hasSelectedMarkers () {
       return this.selectedMarkers && this.selectedMarkers.length > 0
@@ -157,6 +174,16 @@ export default {
     zoom (val) {
       if (Number.isInteger(val)) this.lastZoom = val
     },
+    selectedMarkers: {
+      handler (newVal) {
+        this.localSelectedMarkers = newVal || []
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted () {
+    this.localSelectedMarkers = [...this.selectedMarkers]
   },
   methods: {
     openContextMenu (event) {
@@ -172,16 +199,64 @@ export default {
     dragend ({ target }, marker) {
       this.$emit('marker-moved', target.getLatLng(), marker)
     },
+    handleMarkerClicked ({ target }, marker) {
+      const isSelected = this.localSelectedMarkers.some(m => m.id === marker.id)
+      if (!isSelected) {
+        this.localSelectedMarkers = [marker]
+        marker.click_count = 1
+        this.centerAndZoom(marker.latLng, 15)
+      }
+      else {
+        // Marker is already selected, increment click count
+        marker.click_count = (marker.click_count || 0) + 1
+        if (marker.click_count % 2 === 0) {
+          // Even number of clicks: zoom out
+          this.fitBoundsToMarkers()
+        }
+        else {
+          // Odd number of clicks: zoom in
+          this.centerAndZoom(marker.latLng, 15)
+        }
+      }
+      this.$emit('update:selectedMarkers', this.localSelectedMarkers)
+      console.log('the local select marker is, ', this.localSelectedMarkers)
+      console.log('this.selectmarker is, ', this.localSelectedMarkers)
+    },
+
     updateZoom (val) {
+      console.log('in zoom level, the select marker is', this.localSelectedMarkers)
       if (Number.isInteger(val)) this.lastZoom = val
+      if (this.localSelectedMarkers.length === 1) {
+        this.centerAndZoom(this.localSelectedMarkers[0].latLng, val)
+      }
+    },
+    centerAndZoom (latLng, zoomLevel) {
+      // If user choose specific marker, the map would automatically centralize to the location
+      const mapInstance = this.$refs.kmap.leafletMap
+      if (mapInstance) {
+        mapInstance.setView(latLng, zoomLevel)
+      }
     },
+    fitBoundsToMarkers () {
+      // This function can help the map always focus on the selected marker that user choose
+      const mapInstance = this.$refs.kmap.leafletMap
+      if (mapInstance && this.markers.length) {
+        const bounds = latLngBounds(this.markersForBounds.map(m => m.latLng)).pad(0.2)
+        mapInstance.fitBounds(bounds)
+      }
+    },
+
     mapClick (event) {
       this.closeContextMenu()
       this.$emit('map-click', event)
     },
     opacityFor (marker) {
-      if (!this.hasSelectedMarkers) return SELECTED_OPACITY
-      return this.selectedMarkers.find(m => m.id === marker.id) ? SELECTED_OPACITY : UNSELECTED_OPACITY
+      // If user choose the specific marker, this marker would change to darker color
+      if (!marker || typeof marker.id === 'undefined') {
+        console.error('Invalid marker:', marker)
+        return UNSELECTED_OPACITY
+      }
+      return this.localSelectedMarkers.some(m => m.id === marker.id) ? SELECTED_OPACITY : UNSELECTED_OPACITY
     },
   },
 }

From 6bb95110a31cdbacdd7ad063a7d436000cff94f7 Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 18:23:09 -0400
Subject: [PATCH 03/10] add different unit test to debug and test new features
 of handling the below event: changes selected marker, toggles the selection
 state on repeated clicks, and selects a marker and updates
 localSelectedMarkers

---
 src/maps/components/StandardMap.spec.js | 134 ++++++++++++++++++++----
 1 file changed, 115 insertions(+), 19 deletions(-)

diff --git a/src/maps/components/StandardMap.spec.js b/src/maps/components/StandardMap.spec.js
index fca630ade..c40a3b87c 100644
--- a/src/maps/components/StandardMap.spec.js
+++ b/src/maps/components/StandardMap.spec.js
@@ -1,37 +1,133 @@
-import { flushPromises } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { vi } from 'vitest'
 
-import GroupMarker from '@/maps/components/GroupMarker.vue'
 import KMap from '@/maps/components/KMap.vue'
 import KMarker from '@/maps/components/KMarker.vue'
 
-import { makeGroup } from '>/enrichedFactories'
-import { mountWithDefaults } from '>/helpers'
-
 import StandardMap from './StandardMap.vue'
-import { groupMarker } from './markers'
 
-const markers = [...Array(20).keys()].map(e => groupMarker(makeGroup()))
+// Define a utility to create a mock marker
+function createMockMarker (id) {
+  return {
+    id,
+    latLng: { lat: Math.random() * 100, lng: Math.random() * 100 },
+    popup: 'Test Marker ' + id,
+    color: 'blue',
+    fontIcon: 'marker-icon',
+    click_count: 0, // Initialize click_count here
+  }
+}
+
+// Custom equality checker for markers
+function containsMarker (container, marker) {
+  return container.some(m => m.id === marker.id)
+}
 
 describe('StandardMap', () => {
-  beforeEach(() => { vi.resetModules() })
-  it('renders markers with popups', async () => {
-    const wrapper = await mountWithDefaults(StandardMap, {
-      propsData: {
-        markers,
+  let wrapper
+  let markers
+
+  beforeEach(() => {
+    vi.resetModules()
+    markers = [createMockMarker(1), createMockMarker(2), createMockMarker(3), createMockMarker(4)]
+    wrapper = mount(StandardMap, {
+      props: { markers },
+      global: {
+        stubs: { KMap }, // Stub KMap to isolate the component test
       },
     })
+  })
+
+  it('selects a marker and updates localSelectedMarkers', async () => {
+    const kMarker = wrapper.findAllComponents(KMarker).at(0)
+    await kMarker.vm.$emit('marker-clicked', { marker: markers[0] })
     await flushPromises()
-    expect(wrapper.findAllComponents(KMap).length).toBe(1)
-    expect(wrapper.findAllComponents(KMarker).length).toBe(markers.length)
-    expect(wrapper.findAllComponents(GroupMarker).length).toBe(markers.length)
 
-    // add and remove some markers
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
+    expect(wrapper.emitted()['update:selectedMarkers'][0]).toEqual([[markers[0]]])
+  })
+
+  it('toggles the selection state on repeated clicks', async () => {
+    const kMarker = wrapper.findAllComponents(KMarker).at(0)
+    // Simulate clicking the marker three times
     for (let i = 0; i < 3; i++) {
-      await wrapper.setProps({ markers: markers.filter((e, idx) => idx !== i) })
+      await kMarker.vm.$emit('marker-clicked', { marker: markers[0] })
       await flushPromises()
-      expect(wrapper.findAllComponents(KMarker).length).toBe(markers.length - 1)
-      expect(wrapper.findAllComponents(GroupMarker).length).toBe(markers.length - 1)
     }
+
+    // Check if the toggle works correctly (should end up selected since it's an odd number of clicks)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
+    expect(wrapper.vm.localSelectedMarkers).toHaveLength(1)
+    expect(markers[0].click_count).toBe(3)
+  })
+
+  it('changes selected marker and verifies the update', async () => {
+    const kMarkers = wrapper.findAllComponents(KMarker)
+
+    // Select the first marker
+    await kMarkers.at(0).vm.$emit('marker-clicked', { marker: markers[0] })
+    await flushPromises()
+
+    // Select the second marker
+    await kMarkers.at(1).vm.$emit('marker-clicked', { marker: markers[1] })
+    await flushPromises()
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(true)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
+    expect(wrapper.emitted()['update:selectedMarkers'][1]).toEqual([[markers[1]]])
+
+    // Select the third marker
+    await kMarkers.at(2).vm.$emit('marker-clicked', { marker: markers[2] })
+    await flushPromises()
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(true)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
+    expect(wrapper.emitted()['update:selectedMarkers'][2]).toEqual([[markers[2]]])
+
+    // Select the fourth marker
+    await kMarkers.at(3).vm.$emit('marker-clicked', { marker: markers[1] })
+    await flushPromises()
+
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(true)
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
+    expect(wrapper.emitted()['update:selectedMarkers'][3]).toEqual([[markers[3]]])
+
+    // Select back to the first marker
+    await kMarkers.at(0).vm.$emit('marker-clicked', { marker: markers[0] })
+    await flushPromises()
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(true)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[1])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
+    expect(wrapper.emitted()['update:selectedMarkers'][0]).toEqual([[markers[0]]])
+
+    // Select back to the fourth marker
+    await kMarkers.at(1).vm.$emit('marker-clicked', { marker: markers[1] })
+    await flushPromises()
+
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[0])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[1])).toBe(true)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[2])).toBe(false)
+    expect(containsMarker(wrapper.vm.localSelectedMarkers, markers[3])).toBe(false)
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[0])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[2])
+    expect(wrapper.vm.localSelectedMarkers).not.toContain(markers[3])
+    expect(wrapper.emitted()['update:selectedMarkers'][1]).toEqual([[markers[1]]])
   })
 })

From 5b0ef19cd82a7d51d98334a2378fac66a72089be Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 18:49:55 -0400
Subject: [PATCH 04/10] Update Travis CI to build only specific branches

---
 .travis.yml | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 .travis.yml

diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..cc8698385
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,23 @@
+language: node_js
+node_js:
+  - "14"  # Specify the Node.js versions you want to test against
+  - "16"
+
+# Specify branches that should be built
+branches:
+  only:
+    - scofield_map_update
+
+# Define the script to run for tests
+script:
+  - npm install
+  - npm test
+
+# Optional: Configure notifications (email, Slack, etc.)
+notifications:
+  email:
+    recipients:
+      - your-email@example.com
+    on_success: change  # default: change
+    on_failure: always  # default: always
+

From 7204ccf4a3402a31d8d8ee9f5ae55f20504dd934 Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 19:03:31 -0400
Subject: [PATCH 05/10] Trigger Travis CI build

---
 some-file.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 some-file.txt

diff --git a/some-file.txt b/some-file.txt
new file mode 100644
index 000000000..a5eb7c1be
--- /dev/null
+++ b/some-file.txt
@@ -0,0 +1 @@
+// Trigger build

From 7fa3a71d90d28ebc5aeac0479726dbc5a7fee434 Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 19:10:47 -0400
Subject: [PATCH 06/10] Trigger Travis CI build

---
 .travis.yml   | 6 +++---
 some-file.txt | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index cc8698385..4d2c7030c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,17 +1,17 @@
 language: node_js
 node_js:
-  - "14"  # Specify the Node.js versions you want to test against
   - "16"
 
 # Specify branches that should be built
 branches:
   only:
+    - main
     - scofield_map_update
 
 # Define the script to run for tests
 script:
-  - npm install
-  - npm test
+  - yarn dev --frozen-lockfile
+  - yarn test
 
 # Optional: Configure notifications (email, Slack, etc.)
 notifications:
diff --git a/some-file.txt b/some-file.txt
index a5eb7c1be..f1ab353d0 100644
--- a/some-file.txt
+++ b/some-file.txt
@@ -1 +1,2 @@
 // Trigger build
+// Trigger build

From 8473fd15d7c99ad6fdd05deef264e89cacae94d3 Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 19:17:31 -0400
Subject: [PATCH 07/10] Trigger Travis CI build

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 4d2c7030c..2763229aa 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "16"
+  - "18"
 
 # Specify branches that should be built
 branches:

From 25efbf74b830952ba4f968f09a7252fe03e0f4cc Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 19:21:36 -0400
Subject: [PATCH 08/10] Trigger Travis CI build, update the package json to
 node >= 18

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b68a0bea1..df702ae4d 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,7 @@
     "workbox-precaching": "^7.0.0"
   },
   "engines": {
-    "node": ">= 16",
+    "node": ">= 18",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   },

From 563873cbc11fda43842683581176e6723ba78d8d Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 19:26:22 -0400
Subject: [PATCH 09/10] Trigger Travis CI build, update the package json to
 node >= 18

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index 2763229aa..e47ddb52a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,4 @@
+dist: focal
 language: node_js
 node_js:
   - "18"

From 0d0db87ebeaf19a028399bd2c1f8108d89b06a6a Mon Sep 17 00:00:00 2001
From: scofielddd <qiyuan@bu.edu>
Date: Wed, 17 Apr 2024 23:36:25 -0400
Subject: [PATCH 10/10] travis ci check

---
 .travis.yml | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index e47ddb52a..24c3fe470 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,14 +11,7 @@ branches:
 
 # Define the script to run for tests
 script:
-  - yarn dev --frozen-lockfile
+  - yarn --frozen-lockfile
   - yarn test
 
-# Optional: Configure notifications (email, Slack, etc.)
-notifications:
-  email:
-    recipients:
-      - your-email@example.com
-    on_success: change  # default: change
-    on_failure: always  # default: always