some network improvements

README.md

@@ -28,7 +28,7 @@ a generic djangobaseproject port of https://gitlab.com/acdh-oeaw/imafo/gens, cre
 * start dev-server `python manage.py runserver ---settings=djangobaseproject.settings.dev`
 * open http://127.0.0.1:8000/
 
-### use a db-dumpt
+### use a db-dump
 
 * get a dump
 * create a new postgres-db name e.g. `mmp`

archiv/endpoint_views.py

@@ -23,5 +23,5 @@ def render_to_response(self, context, **kwargs):
             df = graph_table(qs)
         else:
             df = graph_table(qs[:70])
-        data = create_graph(df, qs)
+        data = create_graph(df, KeyWord)
         return JsonResponse(data)

archiv/network_utils.py

@@ -1,5 +1,6 @@
 import pandas as pd
 
+from netvis.utils import as_node
 
 generic_property_table = [
     ('stichwort', 's'),
@@ -24,33 +25,27 @@ def graph_table(qs, prop_table=generic_property_table):
     return df
 
 
-def create_graph(df, qs):
+def create_graph(df, ItemClass):
+    app_name = ItemClass._meta.app_label
+    model_name = ItemClass._meta.model_name
+    all_ids = df[['s_id', 't_id']].values.tolist()
+    ids = list(set([item for sublist in all_ids for item in sublist]))
+    qs = ItemClass.objects.filter(id__in=ids)
     edges = []
     nodes = []
     for i, row in df.iterrows():
         edges.append(
             {
                 "id": i,
-                "source": row['s_id'],
-                "target": row['t_id'],
+                "source": f"{app_name}__{model_name}__{row['s_id']}",
+                "target": f"{app_name}__{model_name}__{row['t_id']}",
                 "type": 'e'
             }
         )
     for x in qs:
+        node = as_node(x)
         nodes.append(
-            {
-                "id": x.id,
-                "label": f"{x}",
-                "type": 'n'
-            }
-        )
-    for i, row in df.groupby(['t_id', 't']).size().reset_index(name="occ").iterrows():
-        nodes.append(
-            {
-                "id": row['t_id'],
-                "label": row['t'],
-                "type": 'n'
-            }
+            node
         )
     g_types = {
         "nodes": [

archiv/templates/archiv/generic_detail.html

@@ -1,14 +1,11 @@
 {% extends "webpage/base.html" %}
 {% load static %}
+{% load netvis_extras %}
 {% load webpage_extras %}
 {% block title %}{{ object.name }}{% endblock %}
 {% block scriptHeader %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-<script crossorigin src="https://unpkg.com/@acdh/network-visualization@latest/lib/network-visualization.umd.js"></script>
-<script src="{% static 'netvis/js/netvis.js' %}"></script>
+  <link rel="stylesheet" href="{% static 'netvis/css/netvis.css' %}" /> <!-- optional -->
+  {% load_netvis_js %}
 {% endblock %}
 {% block content %}
 <!-- <div class="container"> -->
@@ -137,9 +134,10 @@ <h2>
             </table>
         </div>
         <div class="col-md-6">
-          <div id="visualization" style="position: relative; height: 700px; background: #fafafa;"></div>
+          <div id="visualization"></div>
+          <script src="{% static 'netvis/js/netvis.js' %}"></script>
           <script type="text/javascript">
-            showGraph("{% url 'netvis:graph' app_name=app_name model_name=class_name|lower pk=object.id %}", "visualization")
+            showGraph("visualization", "{% url 'netvis:graph' app_name=app_name model_name=class_name|lower pk=object.id %}")
           </script>
       </div>
 

archiv/templates/archiv/keyword_list.html

@@ -2,19 +2,15 @@
 {% load static %}
 {% load django_tables2 %}
 {% load browsing_extras %}
-
+{% load netvis_extras %}
 
 {% load i18n %}
 {% load crispy_forms_field %}
 {% load crispy_forms_tags %}
 {% block title %} Browse {{ class_name }} {% endblock %}
 {% block scriptHeader %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/[email protected]/build/three.min.js"></script>
-<script crossorigin src="https://unpkg.com/@acdh/network-visualization@latest/lib/network-visualization.umd.js"></script>
-<script src="{% static 'netvis/js/netvis.js' %}"></script>
+<link rel="stylesheet" href="{% static 'netvis/css/netvis.css' %}" /> <!-- optional -->
+{% load_netvis_js %}
 {% endblock %}
 {% block content %}
 
@@ -264,27 +260,21 @@ <h4>{{ error_msg|safe }}</h4>
                     </div>
 
                 </div>
-                <div id="visualization" style="position: relative; height: 600px; background: #fafafa;"></div>
+                <div id="visualization"></div>
             </div>
         </div>
     </div>
 
 
 {% endblock %}
 {% block scripts2 %}
+<script src="{% static 'netvis/js/netvis.js' %}"></script>
 <script>
 
     const graph_endpoint = "{% url 'archiv:keyword_data' %}";
     const graph_params = window.location.search;
     const graph_url = `${graph_endpoint}${graph_params}`;
-    fetch(graph_url)
-        .then(response => response.json())
-        .then(data => ReactDOM.render(
-                React.createElement(NetworkVisualization.Visualization, {
-                    graph: data,
-                }),
-                document.getElementById('visualization')
-            ));
+    showGraph("visualization", graph_url)
 
 
   </script>

requirements.txt

@@ -1,6 +1,6 @@
 acdh-django-vocabs>=0.1.6
 acdh-django-browsing>=0.2.0
-acdh-django-netvis==2.0.0
+acdh-django-netvis==3.0.0
 Django>=3.1
 django-cors-headers==3.7.0
 django-mptt==0.11.0