set colors tool bar

FalkorDB · Jan 17, 2024 · 97831a2 · 97831a2
1 parent 7146997
commit 97831a2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 23 deletions.
diff --git a/app/graph/labels.tsx b/app/graph/labels.tsx
@@ -3,34 +3,31 @@ import { Category, getCategoryColors } from "./model";
 import { cn } from "@/lib/utils";
 import { MinusCircle, Palette, PlusCircle } from "lucide-react";
 import { useState } from "react";
+import { Button } from "@/components/ui/button";
 
 export function Labels(params: { categories: Category[], className?: string, onClick: (category: Category) => void }) {
 
     // fake stae to force reload
     const [reload, setReload] = useState(false)
 
     return (
-        <div className={cn("flex flex-row", params.className)} >
-            <TooltipProvider>
-                {params.categories.map((category) => {
-                    return (
-                        <Tooltip key={category.index}>
-                            <TooltipTrigger
-                                className={cn(`bg-${getCategoryColors(category.index)}-${category.show ? 500 : 200}`, "rounded-lg border border-gray-300 p-2")}
-                                onClick={() => {
-                                    params.onClick(category)
-                                    setReload(!reload)
-                                }}
-                            >
-                                {category.show ? <MinusCircle /> : <PlusCircle />}
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>{category.name}</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    )
-                })}
-            </TooltipProvider>
+        <div className={cn("flex flex-row gap-x-2", params.className)} >
+            {params.categories.map((category) => {
+                return (
+                    <div className="flex flex-row gap-x-2 items-center" key={category.index}>
+                        <Button
+                            className={cn(`bg-${getCategoryColors(category.index)}-${category.show ? 500 : 100}`, "rounded-lg border border-gray-300 p-2")}
+                            onClick={() => {
+                                params.onClick(category)
+                                setReload(!reload)
+                            }}
+                        >
+                            {category.show ? <MinusCircle /> : <PlusCircle />}
+                        </Button>
+                        <p>{category.name}</p>
+                    </div>
+                )
+            })}
         </div>
     )
 }
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
@@ -16,6 +16,22 @@ import { Labels } from "./labels";
 
 // The stylesheet for the graph
 const STYLESHEET: cytoscape.Stylesheet[] = [
+    {
+        selector: "core",
+        style: {
+            'active-bg-size': 0,  // hide gray circle when panning
+            // All of the following styles are meaningless and are specified
+            // to satisfy the linter...
+            'active-bg-color': 'blue',
+            'active-bg-opacity': 0.3,
+            "selection-box-border-color": 'blue',
+            "selection-box-border-width": 0,
+            "selection-box-opacity": 1,
+            "selection-box-color": 'blue',
+            "outside-texture-bg-color": 'blue',
+            "outside-texture-bg-opacity": 1,
+        },
+    },
     {
         selector: "node",
         style: {
@@ -25,9 +41,17 @@ const STYLESHEET: cytoscape.Stylesheet[] = [
             shape: "ellipse",
             height: 10,
             width: 10,
+            "border-width": 0.15,
+            "border-opacity": 0.5,
             "background-color": "data(color)",
             "font-size": "3",
-            "overlay-padding": "2px",
+            "overlay-padding": "1px",
+        },
+    },
+    {
+        selector: "node:active",
+        style: {
+            "overlay-opacity": 0,  // hide gray box around active node
         },
     },
     {

diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
@@ -22,7 +22,7 @@ export function Toolbar(params: {
     }
 
     return (
-        <div className={cn("flex flex-row", params.className)}>
+        <div className={cn("flex flex-row gap-x-2", params.className)}>
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger className="text-gray-600 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>