Bug fixes to SpacePrez search interface

changelog.md

@@ -1,3 +1,12 @@
+## Change for 2023-04-27
+
+Updates to SpacePrez search
+- Area type defaults to Nearby for points and Contains for areas
+- Search button bug fixed
+- Search loading feedback
+- Updates to SPAQRL query to remove filters
+- Duplicate search request issue
+
 ## Changes for 2023-03-24
 
 Merge of map search changes for SpacePrez

src/components/ButtonGroup.vue

@@ -7,46 +7,72 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, type PropType, computed } from 'vue'
+import { ref, type PropType, computed, defineEmits, watch } from 'vue'
 
-  type Button = {
-    text: string
-    value: any
+type Button = {
+  text: string
+  value: any
+}
+
+const props = defineProps({
+  buttons: {
+    type: Array as PropType<Button[]>,
+    required: true
+  },
+  allowMultipleSelection: {
+    type: Boolean,
+    default: false
+  },
+  initialValue: {
+    type: String,
+    default: null
   }
+})
 
-  const props = defineProps({
-    buttons: {
-      type: Array as PropType<Button[]>,
-      required: true
-    },
-    allowMultipleSelection: {
-      type: Boolean,
-      default: false
-    }
-  })
-  const selectedButtons = ref<number[]>([])
-
-  function selectButton(index: number) {
-    if (props.allowMultipleSelection) {
-      const isSelected = selectedButtons.value.includes(index)
-
-      if (isSelected) {
-        selectedButtons.value = selectedButtons.value.filter(i => i !== index)
-      } else {
-        selectedButtons.value.push(index)
-      }
+const selectedButtons = ref<number[]>([])
+
+function selectButton(index: number) {
+  if (props.allowMultipleSelection) {
+    const isSelected = selectedButtons.value.includes(index)
+
+    if (isSelected) {
+      selectedButtons.value = selectedButtons.value.filter(i => i !== index)
     } else {
-      selectedButtons.value = [index]
+      selectedButtons.value.push(index)
     }
-    emit('change', selectedValues.value)
+  } else {
+    selectedButtons.value = [index]
   }
 
-  const selectedValues = computed(() => {
-    return selectedButtons.value.map(index => props.buttons[index].value)
-  })
+  emit('change', selectedValues.value)
+}
+
+const selectedValues = computed(() => {
+  return selectedButtons.value.map(index => props.buttons[index].value)
+})
 
-  const emit = defineEmits(['change'])
+const emit = defineEmits(['change'])
 
+if (props.initialValue) {
+  const initialValueIndex = props.buttons.findIndex(button => button.value === props.initialValue)
+  if (initialValueIndex >= 0) {
+    selectedButtons.value.push(initialValueIndex)
+  }
+}
+
+watch(() => props.initialValue, (newValue, oldValue) => {
+  if(newValue == '') {
+    return
+  }
+  const selectedIndex = props.buttons.findIndex(button => button.value == newValue)
+  const selectedValue = (selectedIndex >= 0 ? props.buttons[selectedIndex] : '')
+  if (newValue !== oldValue || newValue != selectedValue) {
+    const newSelectedIndex = props.buttons.findIndex(button => button.value === newValue)
+    if (newSelectedIndex >= 0) {
+      selectedButtons.value = [newSelectedIndex]
+    }
+  }
+})
 </script>
 
 <style scoped>
@@ -56,4 +82,4 @@
   justify-content: flex-start; /* center the buttons horizontally */
   gap: 10px; /* set the spacing between the buttons */
 }
-</style>
+</style>

src/components/search/SpacePrezSearchMap.vue

@@ -45,6 +45,7 @@ const radiusRef = ref(5)
 const limitRef = ref(10)
 const showQueryRef = ref(false)
 const sparqlQueryRef = ref('')
+const initialAreaTypeRef = ref(AreaTypes.Nearby)
 
 // to hold the wkt shape response from the map search
 const responseRef = ref<WKTResult[]>()
@@ -95,14 +96,25 @@ const updateSelection = async (selectedCoords:Coords, shapeType:ShapeTypes) => {
     //shapeTypeRef.value = selectedCoords.length == 0 ? ShapeTypes.None : (selectedCoords.length == 1 ? ShapeTypes.Point : ShapeTypes.Polygon)
     shapeTypeRef.value = shapeType
     coordsRef.value = selectedCoords
-    await performMapSearch()
+    // only search when we have shape type provided
+    if(shapeType != ShapeTypes.None) {
+        if(shapeType == ShapeTypes.Point) {
+            initialAreaTypeRef.value = AreaTypes.Nearby
+            areaTypeRef.value = AreaTypes.Nearby
+        } else {
+            initialAreaTypeRef.value = AreaTypes.Contains
+            areaTypeRef.value = AreaTypes.Contains
+        }
+        await performMapSearch()
+    }
 }
 
 // convert out areatypes into a list of options format to show as buttons
 const areaButtons = enumToOptions(AreaTypes)
 
 // triggered when a change of area type has been clicked
 const handleAreaButtonChange = async (values: AreaTypes[]) => {
+    initialAreaTypeRef.value = values[0]
     areaTypeRef.value = values[0]
     await performMapSearch()
 }
@@ -139,13 +151,13 @@ const toggleAllFeatures = async (datasetNode:DatasetTreeNode, checked:boolean) =
             <form action="" class="query-options">
                 <div class="query-option">
                     <h4 class="query-option-title">Search map selection</h4>
-                    <div class="btn sm outline">{{ shapeTypeRef }}</div>
+                    <div class="msg"><i class="fa-solid fa-play"></i> {{ shapeTypeRef }}</div>
                     <p />
                     <div v-if="shapeTypeRef == ShapeTypes.None">Select a point or rectangle on the map to begin</div>
                     <p />
-                    <ButtonGroup v-if="shapeTypeRef != ShapeTypes.None" @change="handleAreaButtonChange" :buttons="areaButtons" :allowMultipleSelection="false" />
+                    <ButtonGroup :initial-value="initialAreaTypeRef" v-if="shapeTypeRef != ShapeTypes.None" @change="handleAreaButtonChange" :buttons="areaButtons" :allowMultipleSelection="false" />
                     <div v-if="shapeTypeRef != ShapeTypes.None && areaTypeRef == AreaTypes.Nearby" style="padding-top:10px;font-size:0.7em">
-                        within <input class="small-input" v-model="radiusRef" /> km
+                        within <input class="small-input" v-model="radiusRef" @change="performMapSearch()" /> km
                     </div>
                     <p />
                 </div>
@@ -183,7 +195,7 @@ const toggleAllFeatures = async (datasetNode:DatasetTreeNode, checked:boolean) =
 
                 <span class="nowrap">Results limit: <input id="input-limit" class="space-right" @change="performMapSearch()" v-model="limitRef" /></span>
                 <span class="nowrap"><label class="space-right"><input v-model="showQueryRef" type="checkbox">Show query</label></span>
-                <button @click="performMapSearch" v-bind:disabled="shapeTypeRef == ShapeTypes.None" class="btn" type="submit">Search</button>
+                <button @click="performMapSearch()" v-bind:disabled="shapeTypeRef == ShapeTypes.None" class="btn" type="button">Search</button>
             </form>    
 
         </div>
@@ -194,25 +206,36 @@ const toggleAllFeatures = async (datasetNode:DatasetTreeNode, checked:boolean) =
                 :drawing-modes="['MARKER', 'POLYGON', 'RECTANGLE']"
                 @selectionUpdated="updateSelection" 
             />
-            <div v-if="mapSearch.data && mapSearch.data.length > 0">
-                <h3>Result set</h3>
-                <table>
-                    <thead>
-                        <th>Feature collection</th>
-                        <th>Label</th>
-                        <th>URI</th>
-                    </thead>
-                    <tbody>
-                        <tr v-for="result in mapSearch.data">
-                            <td>{{ result.fcLabel }}</td>
-                            <td>{{ result.label }}</td>
-                            <td><a v-bind:href="`${result.link}`">{{ result.uri }}</a></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>    
+            <div v-if="mapSearch.loading">
+                <h3>Loading...</h3>
+            </div>
             <div v-else>
-                <h3>No results</h3>
+                <div v-if="mapSearch.data && mapSearch.data.length > 0">
+                    <h3>Result set</h3>
+                    <table>
+                        <thead>
+                            <th>Feature collection</th>
+                            <th>Label</th>
+                            <th>URI</th>
+                        </thead>
+                        <tbody>
+                            <tr v-for="result in mapSearch.data">
+                                <td>{{ result.fcLabel }}</td>
+                                <td>{{ result.label }}</td>
+                                <td><a v-bind:href="`${result.link}`">{{ result.uri }}</a></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>    
+                <div v-else-if="mapSearch.error">
+                    <h3>Unable to search map</h3>
+                    <div class="error">
+                        {{ mapSearch.error }}
+                    </div>
+                </div>
+                <div v-else>
+                    <h3>No results</h3>
+                </div>
             </div>
         </div>
     </div>
@@ -289,6 +312,10 @@ table {
     width:3em;
 }
 
+.msg {
+    color: var(--primary);    
+}
+
 .nowrap {
     display:inline-block;
     white-space: nowrap;

src/stores/mapSearchStore.d.ts

@@ -7,5 +7,5 @@ export type WKTResult = {
     wkt: string
     fcLabel: string
     label: string
-    id: string
+    id?: string
 }

src/stores/mapSearchStore.ts

@@ -45,40 +45,35 @@ export const mapSearchStore = defineStore({
     async searchMap(query:string) {
         // make the API call to the SPARQL endpoint
         const url = `${this.apiBaseUrl}/s/sparql`
-        const response = await axios.get(url,  { headers: {"accept": "application/sparql-results+json"}, params: { query }})
-
-
         this.loading = true
         this.success = false
 
         try {
-
+          const response = await axios.get(url,  { headers: {"accept": "application/sparql-results+json"}, params: { query }})
           this.data = response.data.results.bindings.filter((item:any)=>item.fc_label?.value).map((item:any)=>{
             return {
               uri: item.f_uri.value,
               link: `${linkPrefix}${item.f_uri.value}`,
               wkt: item.wkt.value,
               fcLabel: item.fc_label?.value,
-              label: item.f_label.value,
-              id: item.o.value
+              label: item.f_label.value
             }
           })
+          // successfully processed
+          this.success = true
+          this.error = null
 
         } catch (error:any) {
-
           // set the error status
           this.error = error.message
+          this.data = []
           this.success = false
 
         } finally {
           // always set loading to complete
           this.loading = false
         }
 
-        // successfully processed
-        this.success = true
-        this.error = null
-
     }
 
   }

src/util/mapSearchHelper.ts

@@ -61,12 +61,9 @@ const featureCollectionQueryPart = (featureCollection:string, config: MapSearchC
 
 /** Constructs a SPARQL query for the SpacePrez map search */
 const mapSearchQuery = (featureCollectionsQueryPart:string, topoQueryPart:string, limit:number, config: MapSearchConfig) => `${mapSearchPrefixPart}
-SELECT ?f_uri ?wkt ?fc_label ?f_label ?p ?o
+SELECT ?f_uri ?wkt ?fc_label ?f_label
 WHERE {
     { ?f_uri geo:hasGeometry/geo:asWKT ?wkt;
-  		?p ?o.
-    VALUES ?p {<${config.props.fId}>}
-    FILTER(DATATYPE(?o)!=prez:slug)
     }
     ${featureCollectionsQueryPart}
     OPTIONAL {?f_uri <${config.props.fcLabel}> ?potential_label }