From 63a5c767e27b9595a680969d38b4726efd0b2218 Mon Sep 17 00:00:00 2001
From: Cyrus Hiatt <chiatt@fargeo.com>
Date: Mon, 25 Nov 2024 17:06:05 -0800
Subject: [PATCH 1/5] Track feature selection on click

---
 afrc/src/afrc/Search/SearchPage.vue                   |  3 +++
 .../components/InteractiveMap/InteractiveMap.vue      | 11 +++++++++++
 .../InteractiveMap/components/MapComponent.vue        | 11 ++++++++---
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index e0b02f5..a6b19b3 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -30,6 +30,7 @@ const showMap = ref(false);
 const basemaps: Ref<Basemap[]> = ref([]);
 const overlays: Ref<MapLayer[]> = ref([]);
 const sources: Ref<MapSource[]> = ref([]);
+const resultsSelected: Ref<string[]> = ref([]);
 const dataLoaded = ref(false);
 const toast = useToast();
 const { $gettext } = useGettext();
@@ -97,6 +98,7 @@ const doQuery = function () {
             console.log(data);
             searchResults.value = data.results.hits.hits;
             resultsCount.value = data.total_results;
+            resultsSelected.value = [];
         });
 
     // self.updateRequest = $.ajax({
@@ -223,6 +225,7 @@ onMounted(async () =>{
                 style="width: 100%; height: 100%"
             >
                 <InteractiveMap
+                    v-model="resultsSelected"
                     :basemaps="basemaps"
                     :overlays="overlays"
                     :sources="sources"
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
index d2f515c..8aa85f5 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -71,6 +71,8 @@ provide("overlays", props.overlays);
 provide("basemaps", props.basemaps);
 provide("selectedDrawnFeature", selectedDrawnFeature);
 
+let resultsSelected = defineModel();
+
 watch(
     () => props.basemaps,
     (updatedBasemaps) => {
@@ -84,6 +86,14 @@ watch(
     { deep: true, immediate: true },
 );
 
+watch(
+    () => resultsSelected,
+    (x) => {
+        console.log("resultsSelected", x);
+    },
+    { deep: true, immediate: true },
+);
+
 onMounted(async () => {
     await fetchSystemSettings();
 });
@@ -113,6 +123,7 @@ function updateSelectedDrawnFeature(feature: Feature) {
         style="display: flex; height: 100%; width: 100%"
     >
         <MapComponent
+            v-model="resultsSelected"
             :settings="settings"
             :basemap="basemap"
             :overlays="overlays"
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index 333dd94..d11c71c 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -88,6 +88,8 @@ const {
     drawnFeaturesBuffer,
 } = props;
 
+let resultsSelected = defineModel();
+
 const emits = defineEmits([
     "mapInitialized",
     "drawnFeatureSelected",
@@ -337,9 +339,7 @@ function addOverlayToMap(overlay: MapLayer) {
         }
     });
 
-    if (
-        overlay.maplayerid === "8914d88e-ac00-4140-a7d8-81893099b0ad" // Cultural Resource - Primary
-    ) {
+    if (overlay.maplayerid && resultsSelected) {
         resourceOverlaysClickHandlers[overlay.maplayerid] = function (
             e: MapMouseEvent,
         ) {
@@ -352,6 +352,11 @@ function addOverlayToMap(overlay: MapLayer) {
                 popupContainerRerenderKey.value += 1;
                 clickedCoordinates.value = [e.lngLat.lng, e.lngLat.lat];
                 clickedFeatures.value = features;
+                resultsSelected.value = [];
+                const uniqueResourceIds = new Set(features.map((feature) => feature.properties?.resourceinstanceid as string));
+                resultsSelected.value = Array.from(uniqueResourceIds);
+            } else {
+                resultsSelected.value = [];
             }
         };
 

From 705d5b6e767a54544c766dbd5b39308e5a41e2d7 Mon Sep 17 00:00:00 2001
From: Cyrus Hiatt <chiatt@fargeo.com>
Date: Tue, 26 Nov 2024 09:54:16 -0800
Subject: [PATCH 2/5] Replace v-model with provide/inject

---
 afrc/src/afrc/Search/SearchPage.vue                    |  5 +++--
 .../components/InteractiveMap/InteractiveMap.vue       | 10 ----------
 .../InteractiveMap/components/MapComponent.vue         |  4 ++--
 afrc/src/afrc/Search/components/SearchResultItem.vue   |  3 +++
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/afrc/src/afrc/Search/SearchPage.vue b/afrc/src/afrc/Search/SearchPage.vue
index a6b19b3..a754c2d 100644
--- a/afrc/src/afrc/Search/SearchPage.vue
+++ b/afrc/src/afrc/Search/SearchPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, provide } from "vue";
 import type { Ref } from "vue";
 import { useGettext } from "vue3-gettext";
 
@@ -35,6 +35,8 @@ const dataLoaded = ref(false);
 const toast = useToast();
 const { $gettext } = useGettext();
 
+provide("resultsSelected", resultsSelected);
+
 watch(queryString, () => {
     doQuery();
 });
@@ -225,7 +227,6 @@ onMounted(async () =>{
                 style="width: 100%; height: 100%"
             >
                 <InteractiveMap
-                    v-model="resultsSelected"
                     :basemaps="basemaps"
                     :overlays="overlays"
                     :sources="sources"
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
index 8aa85f5..6bcc9b8 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/InteractiveMap.vue
@@ -71,7 +71,6 @@ provide("overlays", props.overlays);
 provide("basemaps", props.basemaps);
 provide("selectedDrawnFeature", selectedDrawnFeature);
 
-let resultsSelected = defineModel();
 
 watch(
     () => props.basemaps,
@@ -86,14 +85,6 @@ watch(
     { deep: true, immediate: true },
 );
 
-watch(
-    () => resultsSelected,
-    (x) => {
-        console.log("resultsSelected", x);
-    },
-    { deep: true, immediate: true },
-);
-
 onMounted(async () => {
     await fetchSystemSettings();
 });
@@ -123,7 +114,6 @@ function updateSelectedDrawnFeature(feature: Feature) {
         style="display: flex; height: 100%; width: 100%"
     >
         <MapComponent
-            v-model="resultsSelected"
             :settings="settings"
             :basemap="basemap"
             :overlays="overlays"
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index d11c71c..8cb0b33 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, useTemplateRef, watch } from "vue";
+import { onMounted, ref, useTemplateRef, watch, inject } from "vue";
 
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 import maplibregl from "maplibre-gl";
@@ -88,7 +88,7 @@ const {
     drawnFeaturesBuffer,
 } = props;
 
-let resultsSelected = defineModel();
+let resultsSelected = inject("resultsSelected");
 
 const emits = defineEmits([
     "mapInitialized",
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index 8622a9d..c3dbb33 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import Button from "primevue/button";
+import { inject } from "vue";
+
+let resultsSelected = inject("resultsSelected");
 
 const props = defineProps({
     searchResult: {

From 2a61e7db1ea1b2e1bdce0a4f404d47bc38501ef9 Mon Sep 17 00:00:00 2001
From: Cyrus Hiatt <chiatt@fargeo.com>
Date: Tue, 26 Nov 2024 10:02:12 -0800
Subject: [PATCH 3/5] Highlight selected feature

---
 afrc/migrations/0001_initial.py               | 25 ++++++++++++----
 .../components/MapComponent.vue               | 29 +++++++++++++++++++
 .../Search/components/SearchResultItem.vue    | 17 ++++++++++-
 3 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/afrc/migrations/0001_initial.py b/afrc/migrations/0001_initial.py
index cf4fa24..61f8bdb 100644
--- a/afrc/migrations/0001_initial.py
+++ b/afrc/migrations/0001_initial.py
@@ -1447,9 +1447,14 @@ def add_map_layers(apps, schema_editor):
                             "==", "$type", "Point"
                         ]],
                         "paint": {
-                            "circle-radius": 6,
+                            "circle-radius": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                6,
+                                4
+                            ],
                             "circle-opacity": 1,
-                            "circle-color": "#00f"
+                            "circle-color": "#00f",
                         }
                     }, {
                         "id": "referencecollections-point",
@@ -1469,7 +1474,12 @@ def add_map_layers(apps, schema_editor):
                         "type": "line",
                         "paint": {
                             "line-color": "#00f",
-                            "line-width": 3
+                            "line-width": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                3,
+                                1
+                            ]
                         },
                         "layout": {
                             "line-cap": "round",
@@ -1483,7 +1493,12 @@ def add_map_layers(apps, schema_editor):
                         "type": "line",
                         "paint": {
                             "line-color": "#00f",
-                            "line-width": 3
+                            "line-width": [
+                                "case",
+                                ["boolean", ["feature-state", "selected"], False],
+                                3,
+                                1
+                            ],
                         },
                         "filter": [
                             "==",
@@ -1503,7 +1518,7 @@ def add_map_layers(apps, schema_editor):
                         "paint": {
                             "fill-color": "#00f",
                             "fill-opacity": 0.1,
-                            "fill-outline-color": "#0ff"
+                            "fill-outline-color": "#00f"
                         },
                         "filter": [
                             "==",
diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index 8cb0b33..2d00a5b 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -126,6 +126,13 @@ watch(
     { deep: true },
 );
 
+watch(
+    () => resultsSelected,
+    (selected) => {
+        updateFeatureSelection(selected);
+    }, {deep: true}
+);
+
 watch(
     () => drawnFeaturesBuffer,
     () => {
@@ -187,6 +194,28 @@ async function fitBoundsOfFeatures(features: FeatureCollection) {
     });
 }
 
+function updateFeatureSelection(selected: Ref<string[]>) {
+    const layers = []
+    overlays.forEach((overlay) => {
+        layers.push(...overlay.layerdefinitions.map(
+            (layerDefinition) => layerDefinition.id,
+        ));
+    });
+    const features = map.value!.queryRenderedFeatures({layers:layers});
+    features.forEach(feature => {
+        const featureSelected = selected.value.includes(feature.properties?.resourceinstanceid);
+        map.value.setFeatureState(
+            {
+                source: "referencecollections",
+                sourceLayer: "referencecollections",
+                id: feature.id,
+            },
+            { selected: featureSelected }
+        );
+    });
+}
+
+
 function addBufferLayer() {
     map.value!.addSource(BUFFER_LAYER_ID, {
         type: "geojson",
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index c3dbb33..df80f59 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -10,10 +10,21 @@ const props = defineProps({
         required: true,
     },
 });
+
+function selectResult(resourceid) {
+    resultsSelected.value = [resourceid];
+}
+
+function clearResult(e) {
+    resultsSelected.value = [];
+}
+
 </script>
 
 <template>
-    <section class="result">
+    <section class="result" :class="{ hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)}"
+            @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
+            @mouseleave="clearResult">
         <div class="image-placeholder">
             <img src="https://picsum.photos/160" />
         </div>
@@ -47,6 +58,10 @@ const props = defineProps({
     display: flex;
     flex-direction: row;
 }
+.result.hovered {
+    background-color: rgb(239 245 252);
+    border: 1px solid rgb(139 145 252);
+}
 .result .result-content {
     height: 10rem;
     overflow: hidden;

From 2e55c51473cd74a18cd417cde5eea4003dc6dda8 Mon Sep 17 00:00:00 2001
From: Cyrus Hiatt <chiatt@fargeo.com>
Date: Tue, 26 Nov 2024 11:07:27 -0800
Subject: [PATCH 4/5] Add array type

---
 .../components/InteractiveMap/components/MapComponent.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index 2d00a5b..a2a9d80 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -195,7 +195,7 @@ async function fitBoundsOfFeatures(features: FeatureCollection) {
 }
 
 function updateFeatureSelection(selected: Ref<string[]>) {
-    const layers = []
+    const layers: Array<string> = [];
     overlays.forEach((overlay) => {
         layers.push(...overlay.layerdefinitions.map(
             (layerDefinition) => layerDefinition.id,

From 3ab089ff44d6b5606ba4e45393d77027d28cf759 Mon Sep 17 00:00:00 2001
From: Cyrus Hiatt <chiatt@fargeo.com>
Date: Tue, 26 Nov 2024 11:52:18 -0800
Subject: [PATCH 5/5] Appease typescript linter

---
 .../InteractiveMap/components/MapComponent.vue |  8 +++++---
 .../Search/components/SearchResultItem.vue     | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
index a2a9d80..1a0facf 100644
--- a/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
+++ b/afrc/src/afrc/Search/components/InteractiveMap/components/MapComponent.vue
@@ -88,7 +88,7 @@ const {
     drawnFeaturesBuffer,
 } = props;
 
-let resultsSelected = inject("resultsSelected");
+let resultsSelected = inject("resultsSelected") as Ref<string[]>;
 
 const emits = defineEmits([
     "mapInitialized",
@@ -129,7 +129,9 @@ watch(
 watch(
     () => resultsSelected,
     (selected) => {
-        updateFeatureSelection(selected);
+        if (selected) {
+            updateFeatureSelection(selected as Ref<string[]>);
+        }
     }, {deep: true}
 );
 
@@ -204,7 +206,7 @@ function updateFeatureSelection(selected: Ref<string[]>) {
     const features = map.value!.queryRenderedFeatures({layers:layers});
     features.forEach(feature => {
         const featureSelected = selected.value.includes(feature.properties?.resourceinstanceid);
-        map.value.setFeatureState(
+        map.value!.setFeatureState(
             {
                 source: "referencecollections",
                 sourceLayer: "referencecollections",
diff --git a/afrc/src/afrc/Search/components/SearchResultItem.vue b/afrc/src/afrc/Search/components/SearchResultItem.vue
index df80f59..c7ec503 100644
--- a/afrc/src/afrc/Search/components/SearchResultItem.vue
+++ b/afrc/src/afrc/Search/components/SearchResultItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import Button from "primevue/button";
 import { inject } from "vue";
+import type { Ref } from "vue";
 
-let resultsSelected = inject("resultsSelected");
+const resultsSelected = inject("resultsSelected") as Ref<string[]>;
 
 const props = defineProps({
     searchResult: {
@@ -11,20 +12,25 @@ const props = defineProps({
     },
 });
 
-function selectResult(resourceid) {
+function selectResult(resourceid: string) {
     resultsSelected.value = [resourceid];
 }
 
-function clearResult(e) {
+function clearResult() {
     resultsSelected.value = [];
 }
 
 </script>
 
 <template>
-    <section class="result" :class="{ hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)}"
-            @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
-            @mouseleave="clearResult">
+    <section 
+        class="result" 
+        :class="{ 
+            hovered: resultsSelected.includes(searchResult._source.resourceinstanceid)
+        }"
+        @mouseenter="selectResult(searchResult._source.resourceinstanceid)" 
+        @mouseleave="clearResult"
+    >
         <div class="image-placeholder">
             <img src="https://picsum.photos/160" />
         </div>