From 8d3c3dda4eaadfb14bfadc11e47a99ed5584926a Mon Sep 17 00:00:00 2001
From: zcemycl <lyc010197@gmail.com>
Date: Thu, 1 Aug 2024 01:35:12 +0100
Subject: [PATCH] update neo4j frontend

---
 .../docker/neo4j/frontend/src/app/globals.css |  5 ++
 .../docker/neo4j/frontend/src/app/page.tsx    | 84 ++++++++++++++++++-
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/src/containers/docker/neo4j/frontend/src/app/globals.css b/src/containers/docker/neo4j/frontend/src/app/globals.css
index b5c61c9..6af69bd 100644
--- a/src/containers/docker/neo4j/frontend/src/app/globals.css
+++ b/src/containers/docker/neo4j/frontend/src/app/globals.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+#viz {
+  width: 900px;
+  height: 700px;
+}
diff --git a/src/containers/docker/neo4j/frontend/src/app/page.tsx b/src/containers/docker/neo4j/frontend/src/app/page.tsx
index 1153841..24007dc 100644
--- a/src/containers/docker/neo4j/frontend/src/app/page.tsx
+++ b/src/containers/docker/neo4j/frontend/src/app/page.tsx
@@ -1,12 +1,88 @@
 "use client";
 import { useEffect, useState } from "react";
-import NeoVis from "neovis.js";
+import NeoVis, { NeovisConfig, NeoVisEvents } from "neovis.js";
 
 export default function Home() {
+  const [vis, setVis] = useState<any>(null);
+
+  useEffect(() => {
+    const draw = () => {
+      const config: NeovisConfig = {
+        containerId: "viz",
+        neo4j: {
+          serverUrl: "bolt://localhost:7687",
+          serverPassword: "password",
+          serverUser: "neo4j",
+        },
+        visConfig: {
+          nodes: {
+            shape: "dot",
+            borderWidth: 1.5,
+            color: {
+              background: "lightgray",
+              border: "gray",
+              highlight: {
+                border: "#a42a04",
+                background: "lightgray",
+              },
+            },
+            font: {
+              strokeWidth: 7.5,
+            },
+          },
+          edges: {
+            arrows: { to: { enabled: true } },
+          },
+          physics: {
+            enabled: true,
+            // use the forceAtlas2Based solver to compute node positions
+            solver: "forceAtlas2Based",
+            forceAtlas2Based: {
+              gravitationalConstant: -75,
+            },
+            repulsion: {
+              centralGravity: 0.01,
+              springLength: 200,
+            },
+          },
+          interaction: { multiselect: true }, // allows for multi-select using a long press or cmd-click
+          layout: { randomSeed: 1337 },
+        },
+        labels: {
+          Product: {
+            label: "name",
+          },
+          Keyword: {
+            label: "name",
+          },
+        },
+        relationships: {
+          CONTAINS: {
+            // label: "CONTAINS",
+            [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
+              function: {
+                label: (edge: { type: any }) => edge.type,
+              },
+            },
+          },
+        },
+        initialCypher:
+          "MATCH (p:Product)-[c:CONTAINS]->(k:Keyword) RETURN p,k,c LIMIT 25",
+      };
+      const viz = new NeoVis(config);
+      viz.render();
+      setVis(viz);
+    };
+    draw();
+  }, []);
+
   return (
-    <section className="bg-slate-700 min-w-full min-h-screen text-white">
-      <div className="container flex flex-between items-center py-24 px-5 content-start space-x-1">
-        <h1>Hello World</h1>
+    <section
+      className="bg-slate-700 min-w-full min-h-screen
+      text-white p-5"
+    >
+      <div className="flex items-center content-center align-middle flex-row justify-center">
+        <div id="viz" className="border border-white bg-white"></div>
       </div>
     </section>
   );