Improvements to graph visualization

qua-platform · Dec 18, 2024 · 0cb6ffd · 0cb6ffd
1 parent 89c30ee
commit 0cb6ffd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.14",
     "@types/cytoscape": "^3.21.7",
+    "@types/cytoscape-klay": "^3.1.4",
     "@types/jsonpath": "^0.2.4",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.67",
@@ -76,6 +77,7 @@
     "css-hot-loader": "1.4.4",
     "css-loader": "^6.10.0",
     "cytoscape": "^3.30.2",
+    "cytoscape-klay": "^3.1.4",
     "dotenv-webpack": "^8.0.1",
     "file-loader": "^6.2.0",
     "flexlayout-react": "0.7.15",

diff --git a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx
@@ -4,7 +4,9 @@ import { CytoscapeLayout } from "./config/Cytoscape";
 
 import styles from "./CytoscapeGraph.module.scss";
 import { useGraphContext } from "../../context/GraphContext";
+import klay from "cytoscape-klay";
 
+cytoscape.use(klay);
 cytoscape.warnings(false);
 
 interface IProps {
@@ -43,7 +45,7 @@ export default function CytoscapeGraph({ elements, onNodeClick }: IProps) {
     {
       selector: "edge",
       style: {
-        width: 3,
+        width: 5,
         "line-color": "#cbc4c4",
         "target-arrow-color": "#cbc4c4",
         "target-arrow-shape": "triangle",

diff --git a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts
@@ -1,7 +1,10 @@
 export const CytoscapeLayout = {
-    name: "grid",
+    name: "cose",
     fit: true,
     padding: 30,
     spacingFactor: 1.5,
     animate: true,
+    klay: {
+        direction: "RIGHT",
+    },
 };