Merge branch 'main' into fix-create-graph

FalkorDB · Apr 21, 2024 · c425f82 · c425f82
2 parents 9ef48c9 + 90574b8
commit c425f82
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,13 @@
 [![Discord](https://img.shields.io/discord/1146782921294884966?style=flat-square)](https://discord.gg/6M4QwDXn2w)
 [![Workflow](https://github.com/FalkorDB/falkordb-browser/actions/workflows/nextjs.yml/badge.svg?branch=main)](https://github.com/FalkorDB/falkordb-browser/actions/workflows/nextjs.yml)
 
+# FalkorDB-Browser
+
+[![Try Free](https://img.shields.io/badge/Try%20Free-FalkorDB%20Cloud-FF8101?labelColor=FDE900&style=for-the-badge&link=https://app.falkordb.cloud)](https://app.falkordb.cloud)
+
 FalkorDB-Browser is a visualization UI for FalkorDB.
 
-To see a running demo check: https://browser.falkordb.com/
+To see a running demo, check: https://browser.falkordb.com/
 
 ![image](https://github.com/FalkorDB/falkordb-browser/assets/753206/51a81ef9-6bb2-40ce-ad9b-6381978c7562)
 

diff --git a/app/api/graph/[graph]/route.ts b/app/api/graph/[graph]/route.ts
@@ -83,7 +83,6 @@ export async function PATCH(request: NextRequest, { params }: { params: { graph:
         if (!newName) throw (new Error("Missing parameter 'newName'"))
 
         const data = await client.connection.renameNX(graphId, newName);
-        console.log(data);
 
         if (!data) throw (new Error(`${newName} already exists`))
 

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface Props {
@@ -17,9 +17,10 @@ const excludedProperties = new Set([
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function DataPanel({ object }: Props) {
     const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
-
+    const type = object.source ? "edge" : "node"
     return (
         <Table>
+            <TableCaption>{type} properties</TableCaption>
             <TableHeader>
                 <TableRow className={rowClass}>
                     <TableHead>Field</TableHead>
@@ -38,10 +39,10 @@ export default function DataPanel({ object }: Props) {
                                     const text = cellIndex === 1 ? JSON.parse(strCell) : strCell
                                     return (
                                         // eslint-disable-next-line react/no-array-index-key
-                                        <TableCell key={cellIndex}>
+                                        <TableCell className="max-w-10" key={cellIndex}>
                                             <TooltipProvider>
                                                 <Tooltip>
-                                                    <TooltipTrigger className="max-w-96 truncate">
+                                                    <TooltipTrigger className="w-full truncate" >
                                                         {text}
                                                     </TooltipTrigger>
                                                     <TooltipContent>

diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
@@ -1,4 +1,3 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { CircleDot, ZoomIn, ZoomOut } from "lucide-react";
 import { cn } from "@/lib/utils"
 
@@ -22,39 +21,25 @@ export default function Toolbar({ chartRef, className = "" }: {
     }
 
     return (
-        <TooltipProvider>
-            <ul className={cn("flex flex-row gap-2", className)}>
-                <li>
-                    <Tooltip>
-                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>
-                            <ZoomIn />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            <p>Zoom In</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </li>
-                <li>
-                    <Tooltip>
-                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}>
-                            <ZoomOut />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            <p>Zoom Out</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </li>
-                <li>
-                    <Tooltip>
-                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}>
-                            <CircleDot />
-                        </TooltipTrigger>
-                        <TooltipContent>
-                            <p>Center</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </li>
-            </ul>
-        </TooltipProvider>
+        <ul className={cn("flex flex-row gap-2", className)}>
+            <li>
+                <button title="Zoom In" type="button" className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>
+                    { /* eslint-disable jsx-a11y/control-has-associated-label */}
+                    < ZoomIn />
+                </button>
+            </li>
+            <li>
+                <button title="Zoom Out" type="button" className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}>
+                    { /* eslint-disable jsx-a11y/control-has-associated-label */}
+                    <ZoomOut />
+                </button>
+            </li>
+            <li>
+                <button title="Center" type="button" className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleCenterClick()}>
+                    { /* eslint-disable jsx-a11y/control-has-associated-label */}
+                    <CircleDot />
+                </button>
+            </li>
+        </ul>
     )
 }
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -12,7 +12,7 @@ import useScreenSize from "./useScreenSize";
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
 
   const { screenSize } = useScreenSize();
-  const isSmallScreen = screenSize === 'sm' || screenSize === 'xs'
+  const isSmallScreen = screenSize === 'sm' || screenSize === 'xs' || screenSize === 'md'
 
   const [isCollapsed, setCollapsed] = useState(isSmallScreen)
   const navPanel = useRef<ImperativePanelHandle>(null)
@@ -35,8 +35,8 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
       }
     }
   }
-  const panelSize = 9
-  const collapsedSize = 3
+  const panelSize = isSmallScreen ? 7 : 9 
+  const collapsedSize = isSmallScreen ? 7 : 3
 
   return (
     <SessionProvider>
@@ -51,7 +51,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
             minSize={panelSize}
             onCollapse={() => { setCollapsed(true) }}
             onExpand={() => { setCollapsed(false) }}>
-            <button type="button" className="fixed top-[50%] left-2" onClick={() => onExpand()}>
+            <button title={isCollapsed ? "open" : "close"} type="button" className="fixed top-[50%] left-2" onClick={() => onExpand()}>
               {isCollapsed ? <ChevronRight /> : <ChevronLeft />}
             </button>
             <Navbar collapsed={isCollapsed} />

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
@@ -49,7 +49,7 @@ export default function Navbar({ collapsed }: { collapsed: boolean }) {
   const [mounted, setMounted] = useState(false)
   const pathName = usePathname()
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
-  
+
   useEffect(() => {
     setMounted(true)
   }, [])
@@ -62,6 +62,7 @@ export default function Navbar({ collapsed }: { collapsed: boolean }) {
             // eslint-disable-next-line react/no-array-index-key
             <li key={index}>
               <Link
+                title={link.name}
                 className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? '' : 'text-blue-300')}
                 href={link.href} onClick={link.onClick}
               >
@@ -81,7 +82,7 @@ export default function Navbar({ collapsed }: { collapsed: boolean }) {
         <li key={0}>
           {
             mounted &&
-            <button type="button" className="flex flex-row items-center gap-2 underline underline-offset-2 text-blue-300" onClick={() => setTheme(darkmode ? "light" : "dark")}>
+            <button title="Theme" type="button" className="flex flex-row items-center gap-2 underline underline-offset-2 text-blue-300" onClick={() => setTheme(darkmode ? "light" : "dark")}>
               {
                 darkmode ? <Sun /> : <Moon />
               }