netvis working in production mode as well

.dockerignore

@@ -9,4 +9,89 @@ media/uploads/*.rdf
 media/uploads/*.ttl
 .secret
 .env
-.docker
+.docker
+.coverage
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+node_modules
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py

README.md

@@ -18,4 +18,11 @@ maybe in future also with PMB CRUD included
 
 ## set up new instance
 
-in order to avoid errors on a new instance you'll need to set an environment variable `PMB_NEW=whatever`. After you run the inital `python manage.py migrate` you should `unset PMB_NEW`
+in order to avoid errors on a new instance you'll need to set an environment variable `PMB_NEW=whatever`. After you run the inital `python manage.py migrate` you should `unset PMB_NEW`
+
+
+## vite
+
+* bundling js-code (used for network-vis) is not part of the docker-setup
+* for development make sure the vite-dev-server is running `pnpm run vite`
+* for building new bundle, run `pn run build`

dumper/templates/dumper/network.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% load static %}
+{% load django_vite %}
+
+{% block title %}Vite{% endblock %}
+{% block scripts %}
+{% vite_hmr_client %}
+{% vite_asset 'js/main.js' %}
+{% endblock scripts %}
+
+{% block content %}
+  <div class="container pt-4">
+    <h1 class="display-3 text-center">Netzwerk aller Verbindungen</h1>
+    <div class="d-flex justify-content-center">
+      <div class="alert alert-warning d-flex align-items-center" role="alert">
+        <div>
+          Hierbei handelt es sich nur um ein Proof of Concept
+        </div>
+      </div>
+    </div>
+
+    <div class="d-flex justify-content-center" id="spinner">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Lade die Netzwerkdaten...</span>
+      </div>
+    </div>
+
+    <div id="app"></div>
+  </div>
+{% endblock %}

dumper/urls.py

@@ -7,7 +7,7 @@
 urlpatterns = [
     path("", views.HomePageView.as_view(), name="home"),
     path("about/", views.AboutView.as_view(), name="about"),
-    path("vite/", views.ViteView.as_view(), name="vite"),
+    path("network/", views.NetworkView.as_view(), name="network"),
     path("export/", views.ExportView.as_view(), name="export"),
     path("imprint/", views.ImprintView.as_view(), name="imprint"),
     path("login/", views.user_login, name="user_login"),

dumper/views.py

@@ -26,8 +26,8 @@ class ExportView(TemplateView):
     template_name = "dumper/export.html"
 
 
-class ViteView(TemplateView):
-    template_name = "dumper/vite.html"
+class NetworkView(TemplateView):
+    template_name = "dumper/network.html"
 
 
 class ImprintView(TemplateView):

package.json

@@ -11,6 +11,7 @@
     "vite": "^5.1.4"
   },
   "dependencies": {
-    "@cosmograph/cosmograph": "^1.3.1"
+    "@cosmograph/cosmograph": "^1.3.1",
+    "d3": "^7.8.5"
   }
 }

pmb/settings.py

@@ -142,6 +142,7 @@
 
 STATICFILES_DIRS = [
     BASE_DIR / "static",
+    BASE_DIR / "static" / "vite",
 ]
 # Internationalization
 # https://docs.djangoproject.com/en/3.2/topics/i18n/
@@ -303,8 +304,5 @@
 }
 
 DJANGO_VITE = {
-    "default": {
-        "dev_mode": VITE_DEV,
-        "manifest_path": "static/dist/manifest.info"
-    }
+    "default": {"dev_mode": VITE_DEV, "manifest_path": "static/vite/manifest.info"}
 }

pmb/urls.py

@@ -6,12 +6,21 @@
 from apis_core.apis_entities import resolver_views
 
 
-urlpatterns = [
-    path("apis/", include("apis_core.urls", namespace="apis")),
-    path("normdata/", include("normdata.urls", namespace="normdata")),
-    path("admin/", admin.site.urls),
-    path("arche/", include("archemd.urls", namespace="archemd")),
-    path("uri/", resolver_views.uri_resolver, name="uri-resolver"),
-    path("entity/<int:pk>/", resolver_views.entity_resolver, name="entity-resolver"),
-    path("", include("dumper.urls", namespace="dumper")),
-] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+urlpatterns = (
+    [
+        path("apis/", include("apis_core.urls", namespace="apis")),
+        path("normdata/", include("normdata.urls", namespace="normdata")),
+        path("admin/", admin.site.urls),
+        path("arche/", include("archemd.urls", namespace="archemd")),
+        path("uri/", resolver_views.uri_resolver, name="uri-resolver"),
+        path(
+            "entity/<int:pk>/", resolver_views.entity_resolver, name="entity-resolver"
+        ),
+        path("", include("dumper.urls", namespace="dumper")),
+    ]
+    # + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+    # + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+)
+
+if settings.DEBUG:
+    urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

static/src/js/main.js

@@ -1,28 +1,32 @@
 import { Cosmograph, CosmographSearch } from '@cosmograph/cosmograph'
 import * as d3 from 'd3';
 
-const edge_csv = "http://127.0.0.1:8000/static/src/edges.csv";
-const node_csv = "http://127.0.0.1:8000/static/src/nodes.csv";
+const edge_csv = "/media/edges.csv";
+const node_csv = "/media/nodes.csv";
 
 const edge_promis = d3.csv(edge_csv);
 const node_promis = d3.csv(node_csv);
+const spinnerNode = document.getElementById("spinner");
+const canvas = document.createElement("div");
+    canvas.style.height = "800px"
 
 Promise.all([edge_promis, node_promis]).then(([edge_data, node_data]) => {
     const links = edge_data.map(d => ({
         source: parseInt(d.source),
         target: parseInt(d.target) // Convert string to number if needed
     }));
-    console.log(links[0])
+
 
     const nodes = node_data.map(d => ({
         id: parseInt(d.id),
         label: d.label,
         color: d.color
     }))
-    console.log(nodes[0])
+
     const appNode = document.getElementById("app")
-    const canvas = document.createElement("div");
-    canvas.style.height = "800px"
+
+    // remove spinner
+    spinnerNode.style.visibility = "hidden";
     appNode.appendChild(canvas);
     const searchContainer = document.createElement('div')
     appNode.appendChild(searchContainer);

static/vite/manifest.info

@@ -0,0 +1,17 @@
+{
+  "_browser-Co2CjrBv.js": {
+    "file": "browser-Co2CjrBv.js",
+    "isDynamicEntry": true,
+    "imports": [
+      "js/main.js"
+    ]
+  },
+  "js/main.js": {
+    "file": "main-BgjuSik3.js",
+    "src": "js/main.js",
+    "isEntry": true,
+    "dynamicImports": [
+      "_browser-Co2CjrBv.js"
+    ]
+  }
+}

vite.config.js

@@ -16,7 +16,7 @@ module.exports = {
     extensions: ['.js', '.json'],
   },
   build: {
-    outDir: resolve('./static/dist'),
+    outDir: resolve('./static/vite'),
     assetsDir: '',
     manifest: "manifest.info",
     emptyOutDir: true,