use graphs instead of trees

client/src/components/custom/AuthWrapper.tsx

@@ -1,27 +1,19 @@
-import { createContext } from "react";
 import { Outlet } from 'react-router-dom';
 import { RedirectToSignIn, SignedIn, SignedOut } from '@clerk/clerk-react';
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { useFetchUserQuery, UserTypeEnum } from "../../graphql/generated/graphql";
-
-export const IsAdminContext = createContext<boolean>(false)
 
 const AuthWrapper = () => {
-
-  const { data: user } = useFetchUserQuery()
-  const isAdmin = user?.fetchUser?.type === UserTypeEnum.Admin
-
   return (
-    <IsAdminContext.Provider value={isAdmin}>
-      <SignedIn>
-        <TooltipProvider>
+    <>
+    <SignedIn>
+      <TooltipProvider>
           <Outlet />
         </TooltipProvider>
       </SignedIn>
       <SignedOut>
         <RedirectToSignIn />
       </SignedOut>
-    </IsAdminContext.Provider>
+    </>
   )
 }
 

client/src/components/custom/tree/TreeVisualizer.tsx → client/src/components/custom/graph/GraphVisualizer.tsx

@@ -1,23 +1,29 @@
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import Graph from 'react-vis-network-graph';
 
-export type TreeNode = {
+export type Node = {
     id: string
     title?: string | null
-    parentId?: string | null
 }
 
-interface TreeVisualizerProps {
-    nodes: TreeNode[];
+export type Edge = {
+    startNodeId: string
+    endNodeId: string
 }
 
-export const TreeVisualizer: React.FC<TreeVisualizerProps> = ({ nodes }) => {
+interface GraphVisualizerProps {
+    nodes: Node[];
+    edges: Edge[];
+}
+
+export const GraphVisualizer: React.FC<GraphVisualizerProps> = ({ nodes, edges }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [key, setKey] = useState(0);
 
     const graphData = useMemo(() => {
         const uniqueNodes = new Map<string, { id: string; label: string }>();
-        const edges: { from: string; to: string }[] = [];
+        const uniqueEdges = new Set<string>();
+        const graphEdges: { from: string; to: string }[] = [];
         const duplicates: string[] = [];
 
         nodes.forEach(node => {
@@ -30,11 +36,15 @@ export const TreeVisualizer: React.FC<TreeVisualizerProps> = ({ nodes }) => {
                 id: node.id,
                 label: node.title || 'Untitled Node',
             });
+        });
 
-            if (node.parentId && uniqueNodes.has(node.parentId)) {
-                edges.push({
-                    from: node.parentId,
-                    to: node.id,
+        edges.forEach(edge => {
+            const edgeKey = `${edge.startNodeId}-${edge.endNodeId}`;
+            if (!uniqueEdges.has(edgeKey) && uniqueNodes.has(edge.startNodeId) && uniqueNodes.has(edge.endNodeId)) {
+                uniqueEdges.add(edgeKey);
+                graphEdges.push({
+                    from: edge.startNodeId,
+                    to: edge.endNodeId,
                 });
             }
         });
@@ -45,23 +55,41 @@ export const TreeVisualizer: React.FC<TreeVisualizerProps> = ({ nodes }) => {
 
         return {
             nodes: Array.from(uniqueNodes.values()),
-            edges: edges,
+            edges: graphEdges,
         };
-    }, [nodes]);
+    }, [nodes, edges]);
 
     const options = {
         layout: {
             hierarchical: {
-                enabled: true,
+                enabled: false,
                 direction: 'UD',
-                sortMethod: 'directed',
-            },
+                sortMethod: 'hubsize',
+                nodeSpacing: 200,
+                treeSpacing: 200,
+                blockShifting: true,
+                edgeMinimization: true,
+                parentCentralization: true,
+                levelSeparation: 150,
+            }
         },
         nodes: {
-            shape: 'circle',
+            shape: 'dot',
+            size: 10,
+        },
+        edges: {
+            smooth: {
+                type: 'continuous',
+            },
         },
         physics: {
-            enabled: false,
+            enabled: true,
+            stabilization: false,
+            barnesHut: {
+                gravitationalConstant: -80000,
+                springConstant: 0.001,
+                springLength: 200,
+            },
         },
     };
 

client/src/graphql/fragments.gql

@@ -1,66 +1,90 @@
 fragment User on User {
   id
-  type
   swarms {
-    ...Swarm
+    ...SwarmPreview
   }
-  memories {
-    ...Memory
+  informationGraphs {
+    ...InformationGraphPreview
   }
 }
 
-fragment Swarm on Swarm {
+fragment SwarmPreview on Swarm {
   id
   title
   goal
 }
 
-fragment SwarmData on SwarmData {
-  id
-  memoryNodes {
-    ...MemoryNode
-  }
+fragment Swarm on Swarm {
+  ...SwarmPreview
   chats {
-    ...Chat
+    ...ChatPreview
   }
-  actionNodes {
-    ...ActionNode
+  agentGraph {
+    ...AgentGraph
   }
-  actionMetadataNodes {
-    ...ActionMetadataNode
+  informationGraph {
+    ...InformationGraph
   }
 }
 
-fragment SwarmWithData on Swarm {
-  ...Swarm
-  data {
-    ...SwarmData
+fragment InformationGraphPreview on InformationGraph {
+  id
+  title
+}
+
+fragment InformationGraph on InformationGraph {
+  ...InformationGraphPreview
+  nodes {
+    ...InformationNode
+  }
+  edges {
+    ...InformationNodeEdge
   }
 }
 
-fragment Memory on Memory {
+fragment InformationNode on InformationNode {
   id
   title
-  memoryNodes {
-    ...MemoryNode
+}
+
+fragment InformationNodeEdge on InformationNodeEdge {
+  id
+  startNodeId
+  endNodeId
+}
+
+fragment AgentGraph on AgentGraph {
+  id
+  nodes {
+    ...AgentNode
+  }
+  edges {
+    ...AgentNodeEdge
   }
 }
 
-fragment Chat on Chat {
+fragment AgentNode on AgentNode {
   id
   title
 }
 
-fragment ChatData on ChatData {
-  messages {
-    ...Message
-  }
+fragment AgentNodeEdge on AgentNodeEdge {
+  id
+  type
+  startNodeId
+  endNodeId
 }
 
-fragment ChatWithData on Chat {
-  ...Chat
-  data {
-    ...ChatData
+fragment ChatPreview on Chat {
+  id
+  title
+  status
+}
+
+fragment Chat on Chat {
+  ...ChatPreview
+  messages {
+    ...Message
   }
 }
 
@@ -73,18 +97,42 @@ fragment Message on Message {
 fragment ActionNode on ActionNode {
   id
   title
-  parentId
+  description
 }
 
-fragment MemoryNode on MemoryNode {
+fragment ToolGraph on ToolGraph {
   id
-  title
-  parentId
+  nodes {
+    ...ToolNode
+  }
+  edges {
+    ...ToolNodeEdge
+  }
 }
 
-fragment ActionMetadataNode on ActionMetadataNode {
+fragment ToolNode on ToolNode {
   id
   title
-  parentId
-  description
+}
+
+fragment ToolNodeEdge on ToolNodeEdge {
+  id
+  startNodeId
+  endNodeId
+}
+
+fragment ActionGraph on ActionGraph {
+  id
+  nodes {
+    ...ActionNode
+  }
+  edges {
+    ...ActionNodeEdge
+  }
+}
+
+fragment ActionNodeEdge on ActionNodeEdge {
+  id
+  startNodeId
+  endNodeId
 }

client/src/graphql/queries.gql

@@ -1,18 +1,24 @@
 query FetchUser {
-  fetchUser {
+  user {
     ...User
   }
 }
 
 query FetchSwarm($swarmId: ID!) {
-  fetchSwarm(swarmId: $swarmId) {
-    ...SwarmWithData
+  swarm(id: $swarmId) {
+    ...Swarm
   }
 }
 
 query FetchChat($chatId: ID!) {
-  fetchChat(chatId: $chatId) {
-    ...ChatWithData
+  chat(id: $chatId) {
+    ...Chat
+  }
+}
+
+query FetchActionGraph {
+  actionGraph {
+    ...ActionGraph
   }
 }
 
@@ -24,9 +30,9 @@ mutation CreateSwarm($input: CreateSwarmRequest!) {
   }
 }
 
-mutation CreateMemory($input: CreateMemoryRequest!) {
-  memoryMutation {
-    createMemory(input: $input) {
+mutation CreateInformationGraph($input: CreateInformationGraphRequest!) {
+  informationGraphMutation {
+    createInformationGraph(input: $input) {
       ...User
     }
   }
@@ -35,7 +41,13 @@ mutation CreateMemory($input: CreateMemoryRequest!) {
 mutation SendMessage($input: SendMessageRequest!) {
   chatMutation {
     sendMessage(input: $input) {
-      ...ChatWithData
+      ...Chat
     }
   }
 }
+
+subscription MessageSent($chatId: ID!) {
+  messageSent(chatId: $chatId) {
+    ...Message
+  }
+}

client/src/hooks/fetchUser.ts

@@ -4,7 +4,7 @@ export function useFetchUser() {
   const { data, loading, error } = useFetchUserQuery();
 
   return {
-    user: data?.fetchUser,
+    user: data?.user,
     loading,
     error
   };

client/src/views/Chat/Chat.tsx

@@ -3,10 +3,10 @@ import { PanelRightOpen, PanelRightClose } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ChatContent } from "./ChatContent";
 import ChatSidebar from "@/views/Chat/ChatSidebar";
-import { SwarmWithDataFragment, useSendMessageMutation } from "@/graphql/generated/graphql";
+import { SwarmFragment, useSendMessageMutation } from "@/graphql/generated/graphql";
 
 export interface ChatProps {
-  swarm: SwarmWithDataFragment | undefined;
+  swarm: SwarmFragment | undefined;
   isDialogMode?: boolean;
   selectedChatId: string | null;
   setSelectedChatId: (value: string | null) => void;
@@ -17,7 +17,7 @@ export default function Chat({ swarm, isDialogMode, selectedChatId, setSelectedC
   const [sendMessage, { loading }] = useSendMessageMutation()
 
 
-  const chats = swarm?.data?.chats?.map((chat) => ({ value: chat.id, label: chat.title ?? chat.id })) ?? [];
+  const chats = swarm?.chats?.map((chat) => ({ value: chat.id, label: chat.title ?? chat.id })) ?? [];
 
   const onSendMessage = async (message: string) => {
     if (!selectedChatId) return;