refactor: update dependencies and improve graph handling

api/graph.py

@@ -131,9 +131,17 @@ def __init__(self, name: str, branch: Optional[str] = None) -> None:
             # Normalize empty / None to DEFAULT_BRANCH so the stored
             # branch matches the key actually used by compose_graph_name.
             self.branch = branch or DEFAULT_BRANCH
-            self.name = compose_graph_name(self.project, self.branch)
+            self.db = create_falkordb()
+            # Legacy (pre-T17) graphs are stored under the bare project
+            # name. Prefer that existing graph over composing a new,
+            # empty ``code:{project}:{branch}`` key out from under it.
+            if branch in (None, "", DEFAULT_BRANCH) and name in self.db.list_graphs():
+                self.name = name
+            else:
+                self.name = compose_graph_name(self.project, self.branch)
 
-        self.db = create_falkordb()
+        if not hasattr(self, "db"):
+            self.db = create_falkordb()
         self.g = self.db.select_graph(self.name)
 
         # Initialize the backlog as disabled by default
@@ -832,12 +840,32 @@ def __init__(self, name: str, branch: Optional[str] = None) -> None:
         else:
             self.project = name
             self.branch = branch or DEFAULT_BRANCH
-            self.name = compose_graph_name(self.project, self.branch)
+            # Composition is deferred until ``graph_exists``/first query so
+            # we can prefer an existing legacy (pre-T17) bare graph over
+            # composing a new, empty ``code:{project}:{branch}`` key; see
+            # ``_resolve_name``.
+            self.name = name
+            self._needs_resolution = branch in (None, "", DEFAULT_BRANCH)
         self.db = _async_db()
         self.g = self.db.select_graph(self.name)
 
+    async def _resolve_name(self) -> None:
+        """Resolve a bare project name to its actual FalkorDB graph key.
+
+        Prefers an existing legacy graph (stored under the bare project
+        name) over composing a new ``code:{project}:{branch}`` key.
+        """
+        if not getattr(self, "_needs_resolution", False):
+            return
+        self._needs_resolution = False
+        graphs = await self.db.list_graphs()
+        if self.name not in graphs:
+            self.name = compose_graph_name(self.project, self.branch)
+            self.g = self.db.select_graph(self.name)
+
     async def graph_exists(self) -> bool:
         """Check if this graph exists, reusing the current connection."""
+        await self._resolve_name()
         graphs = await self.db.list_graphs()
         return self.name in graphs
 

app/package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@falkordb/canvas": "^0.0.44",
+    "@falkordb/canvas": "^0.2.5",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",

app/src/App.tsx

@@ -12,9 +12,10 @@ import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, Car
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
 import Input from './components/Input';
 import { Labels } from './components/labels';
-import { Toolbar } from './components/toolbar';
-import { cn, GraphRef, Message, Path, PathData, PathNode } from '@/lib/utils';
+import { Toolbar, ZoomControls } from './components/toolbar';
+import { cn, DEFAULT_BRANCH, GraphRef, Message, Path, PathData, PathNode, RepoOption } from '@/lib/utils';
 import type { GraphNode } from '@falkordb/canvas';
+import { convertToCanvasData } from './components/ForceGraph';
 import { Toaster } from '@/components/ui/toaster';
 import GTM from './GTM';
 import { Button } from '@/components/ui/button';
@@ -71,15 +72,16 @@ export default function App() {
   const [createURL, setCreateURL] = useState("")
   const [createOpen, setCreateOpen] = useState(false)
   const [tipOpen, setTipOpen] = useState(false)
-  const [options, setOptions] = useState<string[]>([]);
+  const [options, setOptions] = useState<RepoOption[]>([]);
   const [path, setPath] = useState<Path | undefined>();
   const [isSubmit, setIsSubmit] = useState<boolean>(false);
   const desktopChartRef = useRef<GraphRef["current"]>(null)
   const mobileChartRef = useRef<GraphRef["current"]>(null)
   const [menuOpen, setMenuOpen] = useState(false)
   const [chatOpen, setChatOpen] = useState(false)
   const [searchNode, setSearchNode] = useState<PathNode>({});
-  const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0)
+  const [animation, setAnimation] = useState(false)
+  const [manualDimmed, setManualDimmed] = useState<boolean>(true)
   const [optionsOpen, setOptionsOpen] = useState(false)
   const [messages, setMessages] = useState<Message[]>([]);
   const [query, setQuery] = useState('');
@@ -140,7 +142,7 @@ export default function App() {
 
     const graphName = createURL.split('/').pop()!
 
-    setOptions(prev => [...prev, graphName])
+    setOptions(prev => [...prev, { project: graphName, branch: DEFAULT_BRANCH, graph: graphName }])
     setSelectedValue(graphName)
     setCreateURL("")
     setCreateOpen(false)
@@ -174,8 +176,6 @@ export default function App() {
       const g = Graph.create(json.entities, graphName)
       setGraph(g)
 
-      if (cooldownTicks === 0) setCooldownTicks(-1)
-
       setIsPathResponse(false)
       chatPanel.current?.expand()
       // @ts-ignore
@@ -225,34 +225,10 @@ export default function App() {
         if (!chartNode) {
           chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
 
-          if (cooldownTicks === 0) setCooldownTicks(-1)
-
           setZoomedNodes([chartNode])
           graph.visibleLinks(true, [chartNode!.id])
 
-          const currentData = canvas.getGraphData()
-
-          const { dataToGraphData } = await import('@falkordb/canvas')
-          const graphNode = dataToGraphData({
-            nodes: [{
-              color: chartNode.color,
-              id: chartNode.id,
-              labels: [chartNode.category],
-              visible: chartNode.visible,
-              data: {
-                ...chartNode.data,
-                isPath: chartNode.isPath,
-                isPathSelected: chartNode.isPathSelected,
-              }
-            }], links: []
-          }).nodes[0]
-
-          if (graphNode) {
-            currentData.nodes.push(graphNode)
-          }
-
-          canvas.setGraphData(currentData)
-
+          canvas.setGraphData(convertToCanvasData(graph.Elements))
 
           setTimeout(() => {
             canvas.zoomToFit(4, (n: GraphNode) => n.id === chartNode!.id)
@@ -265,22 +241,7 @@ export default function App() {
         chartNode.visible = true
         graph.visibleLinks(true, [chartNode!.id])
 
-        const currentData = canvas.getGraphData()
-
-        const graphNode = currentData.nodes.find(n => n.id === chartNode!.id)
-        if (graphNode) {
-          graphNode.visible = true
-        }
-
-        currentData.links.forEach(canvasLink => {
-          const appLink = graph.LinksMap.get(canvasLink.id)
-
-          if (appLink) {
-            canvasLink.visible = appLink.visible
-          }
-        })
-
-        canvas.setGraphData(currentData)
+        canvas.setGraphData(convertToCanvasData(graph.Elements))
       }
 
       setTimeout(() => {
@@ -306,27 +267,18 @@ export default function App() {
 
     graph.visibleLinks(show)
 
-    const currentData = canvas.getGraphData();
-
-    currentData.nodes.forEach(canvasNode => {
-      const appNode = graph.NodesMap.get(canvasNode.id);
-
-      if (appNode) {
-        canvasNode.visible = appNode.visible;
-      }
-    });
-
-    currentData.links.forEach(canvasLink => {
-      const appLink = graph.LinksMap.get(canvasLink.id);
-
-      if (appLink) {
-        canvasLink.visible = appLink.visible;
-      }
-    });
-
-    canvas.setGraphData(currentData);
+    // setGraphData doesn't update visible for existing nodes — mutate canvas nodes directly
+    const canvasData = canvas.getGraphData()
+    canvasData.nodes.forEach((canvasNode: { id: number, visible: boolean }) => {
+      const appNode = graph.NodesMap.get(canvasNode.id)
+      if (appNode) canvasNode.visible = appNode.visible
+    })
+    canvasData.links.forEach((canvasLink: { id: number, visible: boolean }) => {
+      const appLink = graph.LinksMap.get(canvasLink.id)
+      if (appLink) canvasLink.visible = appLink.visible
+    })
+    canvas.refresh()
 
-    setCooldownTicks(cooldownTicks === undefined ? undefined : -1);
     setHasHiddenElements(graph.getElements().some(element => !element.visible));
   }
 
@@ -538,8 +490,10 @@ export default function App() {
                   handleSearchSubmit={(node) => handleSearchSubmit(node, desktopChartRef)}
                   searchNode={searchNode}
                   setSearchNode={setSearchNode}
-                  cooldownTicks={cooldownTicks}
-                  setCooldownTicks={setCooldownTicks}
+                  animation={animation}
+                  setAnimation={setAnimation}
+                  manualDimmed={manualDimmed}
+                  setManualDimmed={setManualDimmed}
                   onCategoryClick={(name, show) => onCategoryClick(name, show, desktopChartRef)}
                   handleDownloadImage={handleDownloadImage}
                   zoomedNodes={zoomedNodes}
@@ -574,7 +528,6 @@ export default function App() {
                   setIsPathResponse={setIsPathResponse}
                   paths={paths}
                   setPaths={setPaths}
-                  setCooldownTicks={setCooldownTicks}
                 />
               </Panel>
             </PanelGroup>
@@ -665,8 +618,10 @@ export default function App() {
                 handleSearchSubmit={(node) => handleSearchSubmit(node, mobileChartRef)}
                 setSearchNode={setSearchNode}
                 searchNode={searchNode}
-                cooldownTicks={cooldownTicks}
-                setCooldownTicks={setCooldownTicks}
+                animation={animation}
+                setAnimation={setAnimation}
+                manualDimmed={manualDimmed}
+                setManualDimmed={setManualDimmed}
                 onCategoryClick={(name, show) => onCategoryClick(name, show, mobileChartRef)}
                 handleDownloadImage={handleDownloadImage}
                 zoomedNodes={zoomedNodes}
@@ -705,7 +660,6 @@ export default function App() {
                         setChatOpen={setChatOpen}
                         paths={paths}
                         setPaths={setPaths}
-                        setCooldownTicks={setCooldownTicks}
                       />
                     </DrawerContent>
                   </Drawer>
@@ -720,11 +674,10 @@ export default function App() {
                         <DrawerTitle />
                         <DrawerDescription />
                       </VisuallyHidden>
-                      <Toolbar
-                        className='bg-transparent absolute -top-14 left-0 w-full justify-between px-6'
+                      {/* Zoom controls floating above the drawer handle */}
+                      <ZoomControls
+                        className='bg-transparent absolute -top-14 left-0 w-full justify-center px-6'
                         canvasRef={mobileChartRef}
-                        setCooldownTicks={setCooldownTicks}
-                        cooldownTicks={cooldownTicks}
                       />
                       <Input
                         className='border-2 border-border'
@@ -735,15 +688,16 @@ export default function App() {
                         node={searchNode}
                       />
                       <Labels categories={graph.Categories} onClick={(name, show) => onCategoryClick(name, show, mobileChartRef)} />
-                      <div className='flex flex-col gap-2 items-center'>
-                        <button
-                          className='control-button'
-                          onClick={handleDownloadImage}
-                        >
-                          <Download size={30} />
-                        </button>
-                        <p className=''>Take Screenshot</p>
-                      </div>
+                      {/* Options controls inside the drawer, below search */}
+                      <Toolbar
+                        hideZoom
+                        className='w-full justify-center'
+                        canvasRef={mobileChartRef}
+                        animation={animation}
+                        setAnimation={setAnimation}
+                        manualDimmed={manualDimmed}
+                        setManualDimmed={setManualDimmed}
+                      />
                     </DrawerContent>
                   </Drawer>
                 </div>