feat: use visjs

Author: tristan-f-r

web/package.json

@@ -12,9 +12,12 @@
   "dependencies": {
     "@fontsource-variable/noto-sans": "^5.2.10",
     "astro": "^5.16.6",
-    "cytoscape": "^3.33.1",
     "dayjs": "^1.11.19",
     "medium-zoom": "^1.1.0",
     "sass": "^1.97.1"
+  },
+  "devDependencies": {
+    "vis-data": "^8.0.3",
+    "vis-network": "^10.0.2"
   }
 }

web/pnpm-lock.yaml

@@ -7,11 +7,12 @@ interface Props {
 
 const { interactome } = Astro.props;
 
-const noHeaderInteractome = interactome.trim().split("\n").slice(1).join("\n")
+const noHeaderInteractomeArray = interactome.trim().split("\n").slice(1)
+const noHeaderInteractome = (noHeaderInteractomeArray.length > 200 ? "BIG" : noHeaderInteractomeArray.join("\n"))
 ---
 
 <style>
-    #cytoscapeVisualizer {
+    #visjsVisualizer {
         width: 100%;
         border: 1px solid gray;
         margin-bottom: 1rem;
@@ -27,10 +28,10 @@ const noHeaderInteractome = interactome.trim().split("\n").slice(1).join("\n")
     }
 </style>
 
-<div data-interactome={noHeaderInteractome} id="cytoscapeVisualizer">
+<div data-interactome={noHeaderInteractome} id="visjsVisualizer">
     {
         noHeaderInteractome === '' ? <p>There is nothing to visualize.</p> :
-        <p id="cytoscapeSizeWarning" hidden>
+        <p id="visjsSizeWarning" hidden>
             There are over 200 edges in this graph. Visualizing it may lag your machine, and 
             may also not be visually meaningful. If you do want to see this
             data visualized, using the local Cytoscape analyzer SPRAS has may

web/src/components/Visualization.astro

@@ -1,32 +1,33 @@
 <script>
-    import cytoscape from 'cytoscape';
+    import { Network } from 'vis-network/esnext';
+    import { DataSet } from 'vis-data/peer'
 
-    const cytoscapeContainer = document.querySelector<HTMLDivElement>("#cytoscapeVisualizer")!;
-    const cytoscapeSizeWarning = document.querySelector<HTMLParagraphElement>("#cytoscapeSizeWarning")!
+    const visjsContainer = document.querySelector<HTMLDivElement>("#visjsVisualizer")!;
+    const visjsSizeWarning = document.querySelector<HTMLParagraphElement>("#visjsSizeWarning")!
 
-    const interactome = cytoscapeContainer.dataset.interactome as string;
-    const interactomeLines: string[] = interactome.split("\n").filter(line => line.trim() !== '');
-    const edges = interactomeLines.map(line => line.split("\t"))
-
-    function produceCytoscape() {
+    function produceCytoscape(edges: string[][]) {
         const nodes = [...new Set(edges.map(edge => [edge[0], edge[1]]).flat())]
 
-        cytoscape({
-            container: cytoscapeContainer,
-            elements: {
-                nodes: nodes.map(node => ({ data: { id: node }})),
-                edges: edges.map(([source, target, rank, dir]) => ({ data: { id: `${source}-${target}`, source, target }}))
-            },
-            layout: {
-                name: 'grid',
-                rows: 5
-            }
-        });
-    }
+        // TODO: not the best thing to run on the client
+        const e = edges.map(([a, b]) => ({ from: nodes.findIndex(n => n == a), to: nodes.findIndex(n => n == b) }))
 
-    if (edges.length > 200) {
-        cytoscapeSizeWarning.hidden = false;
+        new Network(visjsContainer, {
+            nodes: new DataSet(nodes.map((node, i) => ({ id: i + 1, label: node }))),
+            edges: new DataSet(e as any[]) // TODO: badly typed?
+        }, {});
+    }
+    
+    const interactome = visjsContainer.dataset.interactome as string;
+    if (interactome.trim() == 'BIG') {
+        visjsSizeWarning.hidden = false;
     } else {
-        produceCytoscape();
+        const interactomeLines: string[] = interactome.split("\n").filter(line => line.trim() !== '');
+        const edges = interactomeLines.map(line => line.split("\t"))
+
+        if (edges.length > 200) {
+            visjsSizeWarning.hidden = false;
+        } else {
+            produceCytoscape(edges);
+        }
     }
 </script>