fix: auto rotate gaph shape

cognee-frontend/src/app/(graph)/CrewAITrigger.tsx

@@ -70,6 +70,7 @@ export default function CrewAITrigger({ onData, onActivity }: CrewAITriggerProps
       }
     };
 
+    onData(null);
     setIsCrewAIRunning(true);
 
     return fetch("/v1/crewai/run", {
@@ -82,7 +83,6 @@ export default function CrewAITrigger({ onData, onActivity }: CrewAITriggerProps
       .then(response => response.json())
       .then(() => {
         onActivity([{ id: uuid4(), timestamp: Date.now(), activity: "Hiring crew agents made a decision" }]);
-        onData(null);
       })
       .catch(() => {
         onActivity([{ id: uuid4(), timestamp: Date.now(), activity: "Hiring crew agents had problems while executing" }]);
@@ -96,9 +96,6 @@ export default function CrewAITrigger({ onData, onActivity }: CrewAITriggerProps
   return (
     <form className="w-full flex flex-col gap-4" onSubmit={handleRunCrewAI}>
       <h1 className="text-2xl text-white">Cognee HR Crew Demo</h1>
-      <p className="text-white mb-4">
-        Cognee can help you build AI memory from any data. Here you can see how AI Agents can use cognee to compare two GitHub contributors.
-      </p>
       <div className="flex flex-row gap-2">
         <div className="flex flex-col w-full flex-1/2">
           <label className="block mb-1 text-white" htmlFor="username1">GitHub username</label>
@@ -109,7 +106,7 @@ export default function CrewAITrigger({ onData, onActivity }: CrewAITriggerProps
           <Input name="username2" type="text" placeholder="Github Username" required defaultValue="lxobr" />
         </div>
       </div>
-      <CTAButton type="submit" className="whitespace-nowrap">
+      <CTAButton type="submit" disabled={isCrewAIRunning} className="whitespace-nowrap">
         Start HR Crew Research
         {isCrewAIRunning && <LoadingIndicator />}
       </CTAButton>

cognee-frontend/src/app/(graph)/GraphControls.tsx

@@ -2,14 +2,18 @@
 
 import { v4 as uuid4 } from "uuid";
 import classNames from "classnames";
-import { NodeObject } from "react-force-graph-2d";
-import { ChangeEvent, useEffect, useImperativeHandle, useState } from "react";
+import { NodeObject, LinkObject } from "react-force-graph-2d";
+import { ChangeEvent, useEffect, useImperativeHandle, useRef, useState } from "react";
 
 import { DeleteIcon } from "@/ui/Icons";
 import { FeedbackForm } from "@/ui/Partials";
 import { CTAButton, Input, NeutralButton, Select } from "@/ui/elements";
 
 interface GraphControlsProps {
+  data?: {
+    nodes: NodeObject[];
+    links: LinkObject[];
+  };
   isAddNodeFormOpen: boolean;
   ref: React.RefObject<GraphControlsAPI>;
   onFitIntoView: () => void;
@@ -37,7 +41,30 @@ const formatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "short", timeSty
 
 const DEFAULT_GRAPH_SHAPE = "lr";
 
-export default function GraphControls({ isAddNodeFormOpen, onGraphShapeChange, onFitIntoView, ref }: GraphControlsProps) {
+const GRAPH_SHAPES = [{
+  value: "none",
+  label: "None",
+}, {
+  value: "td",
+  label: "Top-down",
+}, {
+  value: "bu",
+  label: "Bottom-up",
+}, {
+  value: "lr",
+  label: "Left-right",
+}, {
+  value: "rl",
+  label: "Right-left",
+}, {
+  value: "radialin",
+  label: "Radial-in",
+}, {
+  value: "radialout",
+  label: "Radial-out",
+}];
+
+export default function GraphControls({ data, isAddNodeFormOpen, onGraphShapeChange, onFitIntoView, ref }: GraphControlsProps) {
   const [selectedNode, setSelectedNode] = useState<NodeObject | null>(null);
   const [nodeProperties, setNodeProperties] = useState<NodeProperty[]>([]);
   const [newProperty, setNewProperty] = useState<NodeProperty>({
@@ -79,15 +106,51 @@ export default function GraphControls({ isAddNodeFormOpen, onGraphShapeChange, o
   const [selectedTab, setSelectedTab] = useState("nodeDetails");
 
   const handleGraphShapeControl = (event: ChangeEvent<HTMLSelectElement>) => {
+    setIsAuthShapeChangeEnabled(false);
     onGraphShapeChange(event.target.value);
   };
 
+  const [isAuthShapeChangeEnabled, setIsAuthShapeChangeEnabled] = useState(true);
+  const shapeChangeTimeout = useRef<number | null>();
+  
   useEffect(() => {
     onGraphShapeChange(DEFAULT_GRAPH_SHAPE);
+
+    const graphShapesNum = GRAPH_SHAPES.length;
+
+    function switchShape(shapeIndex: number) {
+      if (!isAuthShapeChangeEnabled || !data) {
+        if (shapeChangeTimeout.current) {
+          clearTimeout(shapeChangeTimeout.current);
+          shapeChangeTimeout.current = null;
+        }
+
+        return;
+      }
+
+      shapeChangeTimeout.current = setTimeout(() => {
+        const newValue = GRAPH_SHAPES[shapeIndex].value;
+        onGraphShapeChange(newValue);
+        const graphShapeSelectElement = document.getElementById("graph-shape-select") as HTMLSelectElement;
+        graphShapeSelectElement.value = newValue;
+
+        switchShape((shapeIndex + 1) % graphShapesNum);
+      }, 5000) as unknown as number;
+    };
+
+    switchShape(0);
+
     setTimeout(() => {
       onFitIntoView();
     }, 500);
-  }, [onFitIntoView, onGraphShapeChange]);
+
+    return () => {
+      if (shapeChangeTimeout.current) {
+        clearTimeout(shapeChangeTimeout.current);
+        shapeChangeTimeout.current = null;
+      }
+    };
+  }, [data, isAuthShapeChangeEnabled, onFitIntoView, onGraphShapeChange]);
 
   return (
     <>
@@ -105,14 +168,10 @@ export default function GraphControls({ isAddNodeFormOpen, onGraphShapeChange, o
           <>
             <div className="w-full flex flex-row gap-2 items-center mb-4">
               <label className="text-gray-300 whitespace-nowrap flex-1/5">Graph Shape:</label>
-              <Select defaultValue={DEFAULT_GRAPH_SHAPE} onChange={handleGraphShapeControl} className="flex-2/5">
-                <option value="none">None</option>
-                <option value="td">Top-down</option>
-                <option value="bu">Bottom-up</option>
-                <option value="lr">Left-right</option>
-                <option value="rl">Right-left</option>
-                <option value="radialin">Radial-in</option>
-                <option value="radialout">Radial-out</option>
+              <Select defaultValue={DEFAULT_GRAPH_SHAPE} onChange={handleGraphShapeControl} id="graph-shape-select" className="flex-2/5">
+                {GRAPH_SHAPES.map((shape) => (
+                  <option key={shape.value} value={shape.value}>{shape.label}</option>
+                ))}
               </Select>
               <NeutralButton onClick={onFitIntoView} className="flex-2/5 whitespace-nowrap">Fit Graph into View</NeutralButton>
             </div>

cognee-frontend/src/app/(graph)/GraphView.tsx

@@ -87,6 +87,7 @@ export default function GraphView() {
         <div className="absolute top-2 right-2 flex flex-col gap-2 items-end">
           <div className="bg-gray-500 pt-4 pr-4 pb-4 pl-4 rounded-md w-110">
             <GraphControls
+              data={data}
               ref={graphControls as MutableRefObject<GraphControlsAPI>}
               isAddNodeFormOpen={isAddNodeFormOpen}
               onFitIntoView={() => graphRef.current!.zoomToFit(1000, 50)}