move to fcose layout

app/graph/page.tsx

@@ -2,6 +2,8 @@
 
 import { toast } from "@/components/ui/use-toast";
 import CytoscapeComponent from 'react-cytoscapejs'
+import cytoscape from 'cytoscape';
+import fcose from 'cytoscape-fcose';
 import { useRef, useState } from "react";
 import { Node, Graph, Category, getCategoryColorName } from "./model";
 import { signOut } from "next-auth/react";
@@ -11,6 +13,8 @@ import { Labels } from "./labels";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
+cytoscape.use( fcose );
+
 // The stylesheet for the graph
 const STYLESHEET: cytoscape.Stylesheet[] = [
     {
@@ -70,10 +74,9 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
 ]
 
 const LAYOUT = {
-    name: "cose",
+    name: "fcose",
     fit: true,
     padding: 30,
-    avoidOverlap: true,
 }
 
 export default function Page() {
@@ -203,7 +206,7 @@ export default function Page() {
                                         </TableBody>
                                     </Table>
                                 </TabsContent>
-                                <TabsContent value="graph" className="grow w-full">
+                                                                <TabsContent value="graph" className="grow w-full">
                                     <div className="h-full flex flex-col">
                                         <div className="grid grid-cols-6">
                                             <Toolbar className="col-start-1 justify-start" chartRef={chartRef} />

package.json

@@ -20,6 +20,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cytoscape": "^3.28.1",
+    "cytoscape-fcose": "^2.2.0",
     "falkordb": "^5.0.1",
     "lucide-react": "^0.301.0",
     "next": "14.0.4",
@@ -35,6 +36,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/cytoscape-fcose": "^2.2.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-cytoscapejs": "^1.2.5",