Merge pull request #28 from OpenGeoscience/vector-metadata-searching

VectorFeature Search

Author: BryonLewis

client/src/MapStore.ts

@@ -11,6 +11,7 @@ import {
   NetCDFData,
   NetCDFLayer,
   RasterMapLayer,
+  SearchableVectorData,
   VectorFeatureTableGraph,
   VectorMapLayer,
 } from './types';
@@ -23,7 +24,7 @@ async function isVectorBaseMapAvailable(vectorMapUrl: string) {
   return Number(resp.headers.get('content-length') ?? 0) > 0 && resp.status === 200;
 }
 
-type SideBarCard = 'indicators' | 'charts';
+type SideBarCard = 'indicators' | 'charts' | 'searchableVectors';
 
 export default class MapStore {
   public static osmBaseMap = ref<'none' | 'osm-raster' | 'osm-vector'>('osm-raster');
@@ -127,6 +128,22 @@ export default class MapStore {
     MapStore.mapLayerFeatureColorMapping.value = {};
   };
 
+  // Searchable Vector Features
+
+  public static mapLayerVectorSearchable = computed(() => {
+    const foundMapLayerSearchable: { name: string, id: number; searchSettings: SearchableVectorData }[] = [];
+    MapStore.selectedVectorMapLayers.value.forEach((item) => {
+      if (item.default_style.searchableVectorFeatureData) {
+        foundMapLayerSearchable.push({
+          name: item.name,
+          id: item.id,
+          searchSettings: item.default_style.searchableVectorFeatureData,
+        });
+      }
+    });
+    return foundMapLayerSearchable;
+  });
+
   // ToolTips
   public static toolTipMenuOpen = ref(false);
 
@@ -203,9 +220,6 @@ export default class MapStore {
     };
   };
 
-  // Charts
-  public static chartsOpen = ref(false);
-
   // SideBar Cards
   public static activeSideBarCard: Ref<undefined | SideBarCard> = ref(undefined);
 
@@ -218,6 +232,10 @@ export default class MapStore {
         charts: {
           name: 'Chart', width: 650, icon: 'mdi-chart-bar', enabled: false, key: 'charts',
         },
+        searchableVectors: {
+          name: 'Search Vector Features', width: 300, icon: 'mdi-map-search-outline', enabled: false, key: 'searchableVectors',
+        },
+
       },
     );
 

client/src/api/UVDATApi.ts

@@ -21,6 +21,8 @@ import {
   PropertySummary,
   RasterData,
   RasterMapLayer,
+  SearchableVectorDataRequest,
+  SearchableVectorFeatureResponse,
   SimulationType,
   TableSummary,
   VectorMapLayer,
@@ -568,8 +570,9 @@ export default class UVdatApi {
   public static async filterOnMetadata(
     metdataFilters: Record<string, string[]>,
     search?: string,
+    bbox?: string,
   ): Promise<{ id: number, type: AbstractMapLayer['type'], matches: string[], name: string }[]> {
-    return (await UVdatApi.apiClient.post('metadata-filters/filter_layers/', { filters: metdataFilters, search })).data;
+    return (await UVdatApi.apiClient.post('metadata-filters/filter_layers/', { filters: metdataFilters, search, bbox })).data;
   }
 
   public static async getMapLayerList(
@@ -583,4 +586,8 @@ export default class UVdatApi {
 
     return (await UVdatApi.apiClient.get('/map-layers/', { params })).data;
   }
+
+  public static async searchVectorFeatures(requestData: SearchableVectorDataRequest): Promise<SearchableVectorFeatureResponse[]> {
+    return (await UVdatApi.apiClient.post('/map-layers/search-features/', requestData)).data;
+  }
 }

client/src/components/Charts/Charts.vue

@@ -38,7 +38,6 @@ export default defineComponent({
     );
     const enabledMapPanels: Ref<number[]> = ref([]);
     const enabledChartPanels: Ref<Record<number, number[]>> = ref({});
-    const chartVisible = computed(() => MapStore.chartsOpen.value);
     const addingEditingChart = ref(false);
     const editingChart: Ref<CustomChart | null> = ref(null);
     const editingChartIndex = ref(-1);
@@ -119,7 +118,6 @@ export default defineComponent({
       }
     };
     return {
-      chartVisible,
       proMode: MapStore.proMode,
       configuredChartsByMap,
       addingEditingChart,

client/src/components/LayerConfig.vue

@@ -113,7 +113,6 @@ export default defineComponent({
       </v-col>
 
       <v-col
-        v-if="proMode"
         title="Deselect"
         cols="1"
       >

client/src/components/Map.vue

@@ -237,7 +237,7 @@ export default defineComponent({
     watch(
       MapStore.hoveredFeatures,
       () => {
-        if (map.value && MapStore.mapLayerFeatureGraphsVisible.value) {
+        if (map.value && (MapStore.mapLayerFeatureGraphsVisible.value || MapStore.activeSideBarCard.value === 'searchableVectors')) {
           updateSelected(map.value);
         }
       },

client/src/components/MetadataLayerFilter/MetadataLayerFilter.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
 import {
-  defineComponent, onMounted, ref, watch,
+  defineComponent, onMounted, onUnmounted, ref, watch,
 } from 'vue';
 import * as d3 from 'd3';
 import UVdatApi from '../../api/UVDATApi';
 import MapStore from '../../MapStore';
 import { AbstractMapLayer } from '../../types';
-import { toggleLayerSelection } from '../../map/mapLayers';
+import { getStringBBox, internalMap, toggleLayerSelection } from '../../map/mapLayers';
 
 export default defineComponent({
   name: 'MetadataLayerFilter',
@@ -17,6 +17,7 @@ export default defineComponent({
     const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
     const search = ref('');
     const showFilters = ref(false); // Toggle filter visibility
+    const filterBBox = ref(false);
 
     onMounted(async () => {
       metadataFilters.value = await UVdatApi.getMetadataFilters();
@@ -25,11 +26,48 @@ export default defineComponent({
       });
     });
 
+    const updateFilter = async () => {
+      let bbox: string | undefined;
+      if (filterBBox.value) {
+        bbox = getStringBBox();
+      }
+      const result = await UVdatApi.filterOnMetadata(selectedFilters.value, search.value, bbox);
+      filteredLayers.value = result;
+    };
+
+    let movementTimeout: NodeJS.Timeout | null = null;
+    const onMapMoveEnd = () => {
+      if (movementTimeout) clearTimeout(movementTimeout);
+      movementTimeout = setTimeout(updateFilter, 500);
+    };
+
+    const onMapMove = () => {
+      if (movementTimeout) {
+        clearTimeout(movementTimeout);
+      }
+    };
+
+    watch(filterBBox, () => {
+      if (filterBBox.value && internalMap.value) {
+        internalMap.value.on('moveend', onMapMoveEnd);
+        internalMap.value.on('move', onMapMove);
+      } else if (internalMap.value) {
+        internalMap.value.off('moveend', onMapMoveEnd);
+        internalMap.value.off('move', onMapMove);
+      }
+      updateFilter();
+    });
+
+    onUnmounted(() => {
+      if (internalMap.value) {
+        internalMap.value.off('moveend', onMapMoveEnd);
+        internalMap.value.off('move', onMapMove);
+      }
+    });
     watch(
       [selectedFilters, search],
       async () => {
-        const result = await UVdatApi.filterOnMetadata(selectedFilters.value, search.value);
-        filteredLayers.value = result;
+        updateFilter();
       },
       { deep: true },
     );
@@ -71,6 +109,7 @@ export default defineComponent({
       toggleFilterLayerSelection,
       search,
       showFilters,
+      filterBBox,
     };
   },
 });
@@ -88,9 +127,20 @@ export default defineComponent({
         clearable
         prepend-inner-icon="mdi-magnify"
       />
-      <v-icon icon :color="showFilters ? 'primary' : ''" @click="showFilters = !showFilters">
-        {{ showFilters ? 'mdi-filter' : 'mdi-filter' }}
-      </v-icon>
+      <v-tooltip text="Filter by current Map View">
+        <template #activator="{ props }">
+          <v-icon :color="filterBBox ? 'primary' : ''" v-bind="props" @click="filterBBox = !filterBBox">
+            mdi-vector-square
+          </v-icon>
+        </template>
+      </v-tooltip>
+      <v-tooltip text="View metadata filters">
+        <template #activator="{ props }">
+          <v-icon :color="showFilters ? 'primary' : ''" v-bind="props" @click="showFilters = !showFilters">
+            mdi-filter
+          </v-icon>
+        </template>
+      </v-tooltip>
     </v-row>
 
     <!-- Selected Filters as Chips (Shown when filters are hidden) -->

client/src/components/PropertiesConfig.vue

@@ -6,13 +6,15 @@ import AvailableProperties from './Metadata/AvailableProperties.vue';
 import MetadataSettings from './Metadata/MetadataSettings.vue';
 import SelectedFeatureChartCard from './Metadata/SelectedFeatureChartCard.vue';
 import TableSummary from './TabularData/TableSummary.vue';
+import VectorFeatureSearch from './VectorFeatureSearch/Editor/VectorFeatureSearchEditor.vue';
 
 export default defineComponent({
   components: {
     AvailableProperties,
     MetadataSettings,
     SelectedFeatureChartCard,
     TableSummary,
+    VectorFeatureSearch,
   },
   props: {
     layerId: {
@@ -21,7 +23,9 @@ export default defineComponent({
     },
   },
   setup() {
-    const tab: Ref<'availableProperties' | 'settings' | 'charts' | 'tabularData'> = ref('availableProperties');
+    const tab: Ref<
+    'availableProperties' | 'settings' | 'charts' | 'tabularData' | 'SearchableVectorData'
+    > = ref('availableProperties');
 
     return {
       tab,
@@ -88,13 +92,28 @@ export default defineComponent({
         </v-icon>
       </template>
     </v-tooltip>
+    <v-tooltip text="Searchable Vector Data">
+      <template #activator="{ props }">
+        <v-icon
+          class="icon-center"
+          :class="{ 'selected-tab': tab === 'SearchableVectorData' }"
+          v-bind="props"
+          color="primary"
+          size="x-small"
+          @click="tab = 'SearchableVectorData'"
+        >
+          mdi-map-search-outline
+        </v-icon>
+      </template>
+    </v-tooltip>
 
     <v-spacer />
   </v-row>
   <AvailableProperties v-if="tab === 'availableProperties'" :layer-id="layerId" />
   <MetadataSettings v-else-if="tab === 'settings'" :layer-id="layerId" />
   <SelectedFeatureChartCard v-else-if="tab === 'charts'" :layer-id="layerId" />
   <TableSummary v-else-if="tab === 'tabularData'" :layer-id="layerId" />
+  <VectorFeatureSearch v-else-if="tab === 'SearchableVectorData'" :layer-id="layerId" />
 </template>
 
 <style scoped>