Add map visualization using Vega

backend/visualization/tasks.py

@@ -1,7 +1,7 @@
 from celery import chord, group, shared_task
 from django.conf import settings
 from visualization import wordcloud, ngram, term_frequency
-from es import download as es_download
+from es import download as es_download, search as es_search
 from api.api_query import api_query_to_es_query
 
 @shared_task()
@@ -23,7 +23,42 @@ def get_geo_data(request_json):
     es_query = api_query_to_es_query(request_json, corpus_name)
     list_of_documents, _ = es_download.scroll(
         corpus_name, es_query, source_includes=['id', geo_field])
-    return list_of_documents
+
+    # Convert documents to GeoJSON features
+    geojson_features = []
+    for doc in list_of_documents:
+        if doc['_source'][geo_field] is not None:
+            feature = {
+                "type": "Feature",
+                "geometry": {
+                    "type": "Point",
+                    "coordinates": doc['_source'][geo_field]['coordinates']
+                },
+                "properties": {
+                    "id": doc['_source']['id']
+                }
+            }
+            geojson_features.append(feature)
+
+    return geojson_features
+
+
+@shared_task()
+def get_geo_centroid(request_json):
+    corpus_name = request_json['corpus']
+    geo_field = request_json['field']
+    query_model = {
+        "aggs": {
+            "center": {
+                "geo_centroid": {
+                    "field": geo_field
+                }
+            }
+        }
+    }
+    result = es_search.search(corpus_name, query_model, size=0)
+    return es_search.aggregation_results(result)['center']
+
 
 @shared_task
 def get_ngram_data_bin(**kwargs):

backend/visualization/urls.py

@@ -4,6 +4,7 @@
 urlpatterns = [
     path('wordcloud', WordcloudView.as_view()),
     path('geo', MapView.as_view()),
+    path('geo_centroid', MapCentroidView.as_view()),
     path('ngram', NgramView.as_view()),
     path('date_term_frequency', DateTermFrequencyView.as_view()),
     path('aggregate_term_frequency', AggregateTermFrequencyView.as_view()),

backend/visualization/views.py

@@ -57,6 +57,22 @@ def post(self, request, *args, **kwargs):
             raise APIException(detail='could not generate geo data')
 
 
+class MapCentroidView(APIView):
+    '''
+    Retrieve the centroid of a field in a corpus.
+    '''
+
+    permission_classes = [IsAuthenticated, CanSearchCorpus, CanSearchTags]
+
+    def post(self, request, *args, **kwargs):
+        check_json_keys(request, ['corpus', 'field'])
+        try:
+            center = tasks.get_geo_centroid(request.data)
+            return Response(center)
+        except Exception as e:
+            logger.error(e)
+            raise APIException(detail='could not retrieve geo centroid')
+
 class NgramView(APIView):
     '''
     Schedule a task to retrieve ngrams containing the search term

frontend/package.json

@@ -59,6 +59,9 @@
     "terser-webpack-plugin": "^5.3.0",
     "tslib": "^2.0.0",
     "typescript": "5.4.3",
+    "vega": "^5.30.0",
+    "vega-embed": "^6.26.0",
+    "vega-lite": "^5.19.0",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {

frontend/src/app/models/search-results.ts

@@ -26,8 +26,18 @@ export interface MostFrequentWordsResult {
 
 
 export interface GeoDocument {
-    id: string;
-    coordinates: {
+    type: string; // e.g. 'Feature'
+    geometry: {
+        type: string; // e.g. 'Point'
+        coordinates: [number, number]; // [longitude, latitude]
+    };
+    properties: {
+        id: string;
+    };
+}
+
+export interface GeoLocation {
+    location: {
         lat: number;
         lon: number;
     };

frontend/src/app/services/api.service.ts

@@ -16,6 +16,7 @@ import {
     FieldCoverage,
     FoundDocument,
     GeoDocument,
+    GeoLocation,
     LimitedResultsDownloadParameters,
     MostFrequentWordsResult,
     NGramRequestParameters,
@@ -151,6 +152,11 @@ export class ApiService {
         return this.http.post<GeoDocument[]>(url, data).toPromise();
     }
 
+    public geoCentroid(data: any): Promise<GeoLocation> {
+        const url = this.apiRoute(this.visApiURL, 'geo_centroid');
+        return this.http.post<GeoLocation>(url, data).toPromise();
+    }
+
     public ngramTasks(data: NGramRequestParameters): Promise<TaskResult> {
         const url = this.apiRoute(this.visApiURL, 'ngram');
         return this.http.post<TaskResult>(url, data).toPromise();

frontend/src/app/services/visualization.service.ts

@@ -4,6 +4,7 @@ import {
     Corpus,
     DateTermFrequencyParameters,
     GeoDocument,
+    GeoLocation,
     MostFrequentWordsResult,
     NGramRequestParameters,
     NgramParameters,
@@ -46,6 +47,14 @@ export class VisualizationService {
         });
     }
 
+    public async getGeoCentroid(fieldName: string, corpus: Corpus):
+    Promise<GeoLocation> {
+    return this.apiService.geoCentroid({
+        corpus: corpus.name,
+        field: fieldName,
+    });
+}
+
     public makeAggregateTermFrequencyParameters(
         corpus: Corpus, queryModel: QueryModel, fieldName: string, bins: {fieldValue: string|number; size: number}[],
     ): AggregateTermFrequencyParameters {

frontend/src/app/visualization/map/map.component.html

@@ -1,2 +1,3 @@
-<p>Map component</p>
-<div>{{ results | json }}</div>
+<div class="map-container">
+    <div #vegaMap></div>
+</div>