works in dev mode at least

pmb/settings.py

@@ -14,8 +14,10 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 if os.environ.get("DEBUG"):
     DEBUG = True
+    VITE_DEV = True
 else:
     DEBUG = False
+    VITE_DEV = False
 
 ALLOWED_HOSTS = ["*"]
 FIXTURE_DIRS = [os.path.join(BASE_DIR, "fixtures")]
@@ -300,4 +302,9 @@
     },
 }
 
-DJANGO_VITE = {"default": {"dev_mode": True}}
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": VITE_DEV,
+        "manifest_path": "static/dist/manifest.info"
+    }
+}

requirements.txt

@@ -11,6 +11,7 @@ django-crispy-forms
 django-extensions
 django-model-utils
 django-tables2
+django-vite>=3.0.3,<4
 djangorestframework
 pandas
 pylobid

static/src/js/main.js

@@ -1,4 +1,4 @@
-import { Cosmograph } from '@cosmograph/cosmograph'
+import { Cosmograph, CosmographSearch } from '@cosmograph/cosmograph'
 import * as d3 from 'd3';
 
 const edge_csv = "http://127.0.0.1:8000/static/src/edges.csv";
@@ -24,12 +24,18 @@ Promise.all([edge_promis, node_promis]).then(([edge_data, node_data]) => {
     const canvas = document.createElement("div");
     canvas.style.height = "800px"
     appNode.appendChild(canvas);
+    const searchContainer = document.createElement('div')
+    appNode.appendChild(searchContainer);
     const config = {
         nodeColor: d => d.color,
+        nodeLabelAccessor: d => d.label,
+        nodeLabelColor: "white",
+        hoveredNodeLabelColor: "white",
         linkWidth: 2
     }
     const cosmograph = new Cosmograph(canvas, config)
+    const search = new CosmographSearch(cosmograph, searchContainer)
     cosmograph.setData(nodes, links)
-    console.log(cosmograph)
+    search.setData(nodes)
 })
 

vite.config.js

@@ -18,16 +18,13 @@ module.exports = {
   build: {
     outDir: resolve('./static/dist'),
     assetsDir: '',
-    manifest: true,
+    manifest: "manifest.info",
     emptyOutDir: true,
     target: 'es2015',
     rollupOptions: {
       input: {
         main: resolve('./static/src/js/main.js'),
       },
-      output: {
-        chunkFileNames: undefined,
-      },
     },
   },
 };