Merge pull request #6 from longcipher/fix/frontend

dynamic import for Sigma and graphology

Author: Ryxune

frontend/biome.json

@@ -105,7 +105,8 @@
   },
   "javascript": {
     "formatter": {
-      "quoteStyle": "double"
+      "quoteStyle": "double",
+      "lineEnding": "lf"
     }
   }
 }

frontend/src/app/page.js

@@ -77,10 +77,10 @@ export default function Home() {
 
   return (
     <div className="flex flex-col h-screen gap-4 p-4">
-      <nav className="flex gap-4">
+      {/* <nav className="flex gap-4">
         <a className="rounded transition-colors flex items-center justify-center bg-cpurple gap-2 hover:bg-[#AB47BC] dark:hover:bg-[#ccc] h-10 px-8 py-4">
           <i className="iconfont icon-pause" />
-          {/* <i className="iconfont icon-playfill"></i> */}
+          <i className="iconfont icon-playfill"></i>
         </a>
         <div className="flex gap-1">
           <a className="rounded transition-colors flex items-center justify-center bg-cblue gap-2 hover:bg-[#42A5F5] dark:hover:bg-[#ccc] h-10 px-8 py-4">
@@ -90,7 +90,7 @@ export default function Home() {
             <i className="iconfont icon-you" />
           </a>
         </div>
-      </nav>
+      </nav> */}
       <main className="flex-1 flex flex-col rounded border-2 border-orange-500">
         <div className="bg-blue-100 font-600 px-4 py-2 text-lg">
           Block: {blockNumber}

frontend/src/components/Graph.js

@@ -1,53 +1,70 @@
-import { Graph } from "graphology";
+import dynamic from "next/dynamic";
 import React, { useEffect, useRef } from "react";
-import Sigma from "sigma";
-
-const GraphComponent = ({ graphData }) => {
-  const containerRef = useRef(null);
-  const sigmaInstanceRef = useRef(null);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      const graph = new Graph();
-      for (const node of graphData.nodes) {
-        graph.addNode(node.id, { ...node });
-      }
-      for (const edge of graphData.edges) {
-        graph.addEdge(edge.source, edge.target, { ...edge });
-      }
-      sigmaInstanceRef.current = new Sigma(graph, containerRef.current);
-    }
-
-    return () => {
-      sigmaInstanceRef.current?.kill();
-    };
-  }, [graphData]);
-
-  useEffect(() => {
-    const container = containerRef.current;
-
-    if (container) {
-      const resizeObserver = new ResizeObserver(() => {
-        sigmaInstanceRef.current?.refresh();
-      });
-
-      resizeObserver.observe(container);
-
-      return () => {
-        resizeObserver.disconnect();
+
+// Dynamically import Sigma, ensuring it only loads on the client side
+const GraphComponent = dynamic(
+  () =>
+    import("sigma").then((Sigma) => {
+      return ({ graphData }) => {
+        const containerRef = useRef(null);
+        const sigmaInstanceRef = useRef(null);
+
+        useEffect(() => {
+          if (containerRef.current) {
+            const { Graph } = require("graphology"); // Dynamically import graphology on the client side
+            const graph = new Graph();
+
+            // Add nodes and edges to the graph
+            for (const node of graphData.nodes) {
+              graph.addNode(node.id, { ...node });
+            }
+            for (const edge of graphData.edges) {
+              graph.addEdge(edge.source, edge.target, { ...edge });
+            }
+
+            // Initialize Sigma instance
+            sigmaInstanceRef.current = new Sigma.default(
+              graph,
+              containerRef.current,
+            );
+          }
+
+          // Clean up the Sigma instance on component unmount
+          return () => {
+            sigmaInstanceRef.current?.kill();
+          };
+        }, [graphData]);
+
+        useEffect(() => {
+          const container = containerRef.current;
+
+          if (container) {
+            const resizeObserver = new ResizeObserver(() => {
+              sigmaInstanceRef.current?.refresh();
+            });
+
+            // Observe container resizing to refresh the Sigma instance
+            resizeObserver.observe(container);
+
+            // Disconnect the ResizeObserver on cleanup
+            return () => {
+              resizeObserver.disconnect();
+            };
+          }
+        }, []);
+
+        return (
+          <div
+            ref={containerRef}
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        );
       };
-    }
-  }, []);
-
-  return (
-    <div
-      ref={containerRef}
-      style={{
-        width: "100%",
-        height: "100%",
-      }}
-    />
-  );
-};
+    }),
+  { ssr: false }, // Disable SSR
+);
 
 export default GraphComponent;