Merge pull request #115 from arthur-schnitzler/main

Map
acdh-oeaw · Dec 10, 2024 · c368cfa · c368cfa
2 parents 38a46f3 + 3cb4840
commit c368cfa
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 32 deletions.
diff --git a/fixtures/network.json b/fixtures/network.json
diff --git a/network/templates/network/map.html b/network/templates/network/map.html
@@ -14,8 +14,10 @@
 <div class="container-fluid pt-3">
     <h1 class="display-3 text-center">Beziehungen zu Orten</h1>
     <div id="mapcontainer" class="p-4">
-        <div id="legend"></div>
         <div id="map"></div>
+        <div id="legend" class="text-center pt-3">
+            <h2>gewählte Filterparameter</h2>
+        </div>
     </div>
 </div>
 <span id="url" class="visually-hidden" aria-hidden="true">{% url 'network:geojson' %}{% querystring %}</span>
@@ -32,7 +34,22 @@ <h1 class="display-3 text-center">Beziehungen zu Orten</h1>
         })
         .then(data => {
             var map = L.map('map')
-            console.log(data["metadata"])
+            const legendDiv = document.getElementById('legend');
+            const dl = document.createElement('dl'); // Create the <dl> element
+
+            data.metadata.query_params.forEach(param => {
+                for (const [key, value] of Object.entries(param)) {
+                    const dt = document.createElement('dt'); // Create the <dt> element
+                    dt.textContent = key;
+                    const dd = document.createElement('dd'); // Create the <dd> element
+                    dd.textContent = value;
+
+                    dl.appendChild(dt); // Append <dt> to <dl>
+                    dl.appendChild(dd); // Append <dd> to <dl>
+                }
+            });
+
+            legendDiv.appendChild(dl);
             var OSMBaseLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 19,
                 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@@ -79,7 +96,7 @@ <h1 class="display-3 text-center">Beziehungen zu Orten</h1>
                 blur: 10,
                 maxZoom: 17,
                 max: 0.7,
-                gradient: {0: 'white', 0.5: 'lime', 1: 'red'},
+                gradient: { 0: 'white', 0.5: 'lime', 1: 'red' },
 
             });
 

diff --git a/network/templates/network/network.html b/network/templates/network/network.html
@@ -17,13 +17,15 @@ <h1 class="display-3 text-center">Netzwerk</h1>
 
   <div class="row">
     <div class="col-md-2 pt-5">
-      <h2 class="text-center">Legende</h2>
+      <h2 class="text-center" >Legende</h2>
       <div class="d-grid gap-2 col-8 mx-auto pt-3">
         <ul class="list-unstyled text-center">
           {% for x in model_list %}
           <li class="fs-5"><i class="{{ x.icon }}"></i> {{ x.name }}</span>
             {% endfor %}
         </ul>
+        <h3>Filterparameter</h3>
+        <div id="legend" class="text-center"></div>
       </div>
       <div class="d-grid gap-2 col-6 mx-auto pt-3">
         <button class="btn btn-primary" type="button" id="pause">Pause</button>
@@ -36,6 +38,7 @@ <h2 class="text-center">Legende</h2>
   </div>
 
   <div id="timeline"></div>
+  <span id="url" class="visually-hidden" aria-hidden="true">{% url 'network:data' %}{% querystring %}</span>
 </div>
 
 {% endblock %}

diff --git a/network/tests.py b/network/tests.py
@@ -28,3 +28,13 @@ def test_02_edge_list_view(self):
         url = reverse("network:edges_browse")
         response = client.get(url)
         self.assertEqual(response.status_code, 200)
+
+    def test_03_map_view(self):
+        url = reverse("network:map")
+        response = client.get(url)
+        self.assertEqual(response.status_code, 200)
+
+    def test_04_geojson_view(self):
+        url = reverse("network:map")
+        response = client.get(url)
+        self.assertEqual(response.status_code, 200)
diff --git a/network/urls.py b/network/urls.py
@@ -1,5 +1,11 @@
 from django.urls import path
-from network.views import EdgeListViews, network_data, NetworkView, edges_as_geojson, MapView
+from network.views import (
+    EdgeListViews,
+    network_data,
+    NetworkView,
+    edges_as_geojson,
+    MapView,
+)
 
 
 app_name = "network"

diff --git a/network/views.py b/network/views.py
@@ -57,6 +57,7 @@ class EdgeListViews(GenericListView):
 
 
 def edges_as_geojson(request):
+    query_params = request.GET
     values_list = [x.name for x in Edge._meta.get_fields()]
     qs = (
         Edge.objects.filter(edge_kind__icontains="place")
@@ -76,10 +77,14 @@ def edges_as_geojson(request):
     )
     data = df_to_geojson_vect(df, ["label", "edge_id"])
     data["metadata"] = {"number of objects": len(df)}
+    data["metadata"]["query_params"] = [
+        {key: value} for key, value in query_params.items()
+    ]
     return JsonResponse(data=data)
 
 
 def network_data(request):
+    query_params = request.GET
     values_list = [x.name for x in Edge._meta.get_fields()]
     qs = EdgeListFilter(request.GET, queryset=Edge.objects.all()).qs
     items = list(qs.values_list(*values_list))
@@ -146,5 +151,8 @@ def network_data(request):
             },
             axis=1,
         ).tolist()
+        data["metadata"] = {
+            "query_params": [{key: value} for key, value in query_params.items()]
+        }
         response = JsonResponse(data)
         return response
diff --git a/static/src/js/main.js b/static/src/js/main.js
@@ -4,12 +4,27 @@ import { getSpaceSize, COLORS } from "./lib.js";
 async function init() {
   const spinnerNode = document.getElementById("spinner");
   const canvas = document.getElementById("canvas");
-  const queryString = window.location.search;
-  const url = `/network/csv/${queryString}`;
+  const url = document.getElementById("url").textContent;
 
   try {
     const res = await fetch(url);
     const data = await res.json();
+    const legendDiv = document.getElementById("legend");
+    const dl = document.createElement("dl"); // Create the <dl> element
+
+    data.metadata.query_params.forEach((param) => {
+      for (const [key, value] of Object.entries(param)) {
+        if (key === "format") continue; 
+        const dt = document.createElement("dt"); // Create the <dt> element
+        dt.textContent = key;
+        const dd = document.createElement("dd"); // Create the <dd> element
+        dd.textContent = value;
+
+        dl.appendChild(dt); // Append <dt> to <dl>
+        dl.appendChild(dd); // Append <dd> to <dl>
+      }
+    });
+    legendDiv.appendChild(dl);
 
     const links = data["edges"].map((d) => ({
       source: parseInt(d.s),
@@ -96,8 +111,6 @@ async function init() {
       graph.fitView();
     }
     document.getElementById("fit-view")?.addEventListener("click", fitView);
-
-
   } catch (error) {
     console.error("Failed to fetch data:", error);
     alertNode.textContent = "Failed to load data. Please try again later.";

diff --git a/static/vite/browser-BZ3PU18-.js → static/vite/browser-BGn5R0Jx.js b/static/vite/browser-BZ3PU18-.js → static/vite/browser-BGn5R0Jx.js
diff --git a/static/vite/main-BNPWSvXn.js → static/vite/main-CoZdyr1w.js b/static/vite/main-BNPWSvXn.js → static/vite/main-CoZdyr1w.js
diff --git a/static/vite/manifest.info b/static/vite/manifest.info
@@ -1,19 +1,19 @@
 {
-  "_browser-BZ3PU18-.js": {
-    "file": "browser-BZ3PU18-.js",
+  "_browser-BGn5R0Jx.js": {
+    "file": "browser-BGn5R0Jx.js",
     "name": "browser",
     "isDynamicEntry": true,
     "imports": [
       "js/main.js"
     ]
   },
   "js/main.js": {
-    "file": "main-BNPWSvXn.js",
+    "file": "main-CoZdyr1w.js",
     "name": "main",
     "src": "js/main.js",
     "isEntry": true,
     "dynamicImports": [
-      "_browser-BZ3PU18-.js"
+      "_browser-BGn5R0Jx.js"
     ]
   }
 }