Merge pull request #74 from Sandeep-kumar-Ramesh/graph_visualization

Initial graph visualization
amosproj · May 28, 2024 · 3b09eee · 3b09eee
2 parents 1aa7a2d + 367ba58
commit 3b09eee
Show file tree

Hide file tree

Showing 10 changed files with 415 additions and 27 deletions.
diff --git a/Project/frontend/package-lock.json b/Project/frontend/package-lock.json
diff --git a/Project/frontend/package.json b/Project/frontend/package.json
@@ -10,10 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-sigma/core": "4.0.2",
     "filepond-plugin-file-validate-type": "^1.2.9",
+    "graphology": "*",
+    "loader-utils": "3.2.1",
+    "prop-types": "15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-filepond": "^7.1.2"
+    "react-filepond": "^7.1.2",
+    "react-router-dom": "^6.23.1",
+    "react-sigma": "*",
+    "sigma": "3.0.0-beta.16",
+    "@sigma/edge-curve":  "*"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

diff --git a/Project/frontend/src/components/App/index.css b/Project/frontend/src/components/App/index.css
@@ -1,8 +1,32 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ol, ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 body {
   background: white;
   color: black;
-
 }
+
 #root {
   max-width: 1280px;
   margin: 0 auto;
@@ -21,4 +45,5 @@ body {
   flex-direction: column;
   align-items: center;
   gap: 20px;
+  margin: 20px;
 }
diff --git a/Project/frontend/src/components/App/index.tsx b/Project/frontend/src/components/App/index.tsx
@@ -1,18 +1,28 @@
-import logo from "../../assets/team-logo.svg";
-import Upload from "../Upload";
-
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
 
+import Home from "../Home";
+import Graph from "../Graph";
 import "./index.css";
 
 function App() {
   return (
     <main className="main_wrapper">
-
-      <header>
-        <h2>AMOS Project SS24 - Knowledge Graph Extractor</h2>
-      </header>
-      <img className="logo" src={logo} alt="" />
-      <Upload />
+      <Router>
+        <Routes>
+          <Route
+            path="/"
+            element={<Home />}
+          />
+          <Route
+            path="/graph"
+            element={<Graph />}
+          />
+        </Routes>
+      </Router>
     </main>
   );
 }

diff --git a/Project/frontend/src/components/Graph/index.css b/Project/frontend/src/components/Graph/index.css
@@ -0,0 +1,11 @@
+.graph_container {
+  flex-direction: column;
+  gap: 50px;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.react-sigma-controls {
+  margin-right: -45%;
+}