Merge pull request #117 from qua-platform/feat/cytoscape-node-ordering

Improve Cytoscape node placement in graph
qua-platform · Dec 18, 2024 · b2698bd · b2698bd
2 parents 4fbc9b2 + 0cb6ffd
commit b2698bd
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 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: "breadthfirst",
-  fit: true,
-  directed: true,
-  padding: 30,
-  spacingFactor: 2.4,
+    name: "cose",
+    fit: true,
+    padding: 30,
+    spacingFactor: 1.5,
+    animate: true,
+    klay: {
+        direction: "RIGHT",
+    },
 };