Merge pull request #1331 from FalkorDB/staging

Staging

Author: Naseem77

README.md

@@ -27,6 +27,9 @@ The search bar now indexes schema, nodes, and metadata. Results are ranked more
 #### Expanded Settings & User Controls  
 New options let you fine-tune database behavior, toggle visual preferences, and manage users without falling back to CLI tools.
 
+#### Node Style Customization  
+Customize the visual appearance of nodes per label. Select custom colors from a palette, adjust node sizes, and choose which property to display as the node caption. All customizations are saved per graph and persist across sessions.
+
 
 
 | ![image (4)](https://github.com/user-attachments/assets/658fa59f-5316-475c-8bd7-b26651e9902c) | ![FalkorDB browser 06-25](https://github.com/user-attachments/assets/ee907fa6-038c-462b-9240-456a2d2c2a99) |

app/api/graph/model.ts

@@ -52,6 +52,9 @@ const getSchemaValue = (value: string): string[] => {
   return [type, description, unique, required];
 };
 
+// Constant for empty display name
+export const EMPTY_DISPLAY_NAME: [string, string] = ['', ''];
+
 export type Node = NodeObject<{
   id: number;
   labels: string[];
@@ -123,16 +126,54 @@ export const DEFAULT_COLORS = [
   "hsl(180, 66%, 70%)",
 ];
 
+// Color palette for node customization
+export const STYLE_COLORS = [
+  // Reds & Pinks
+  "#FB7185", // Rose
+  "#F472B6", // Pink
+  // Oranges & Ambers
+  "#FB923C", // Orange
+  "#FBBF24", // Amber
+  // Yellows
+  "#FDE047", // Yellow
+  "#FDE68A", // Light Yellow
+  // Greens
+  "#86EFAC", // Green
+  "#6EE7B7", // Emerald
+  // Cyans & Teals
+  "#67E8F9", // Cyan
+  "#14B8A6", // Teal
+  // Blues
+  "#60A5FA", // Blue
+  "#818CF8", // Indigo
+  // Purples
+  "#C084FC", // Purple
+  "#E9D5FF", // Light Purple
+  // Grays
+  "#A3A3A3", // Gray
+  "#E5E5E5", // Light Gray
+];
+
+// Size options for node customization (relative to base NODE_SIZE)
+export const NODE_SIZE_OPTIONS = [0.5, 0.7, 0.85, 1, 1.15, 1.3, 1.5, 1.7, 2, 2.3, 2.6];
+
 export interface InfoLabel {
   name: string;
   color: string;
   show: boolean;
 }
 
+export interface LabelStyle {
+  customColor?: string; // Custom color override
+  customSize?: number; // Custom size multiplier (1 = default)
+  customCaption?: string; // Custom property to display as caption
+}
+
 export interface Label extends InfoLabel {
   elements: Node[];
   textWidth?: number;
   textHeight?: number;
+  style?: LabelStyle; // Style customization
 }
 
 export interface InfoRelationship {
@@ -754,7 +795,8 @@ export class Graph {
             (l) => this.labelsMap.get(l) || this.createLabel([l])[0]
           )
         );
-        node.color = label.color;
+        // Use custom color if available, otherwise use default label color
+        node.color = label.style?.customColor || label.color;
       });
 
     // remove empty category if there are no more empty nodes category
@@ -779,6 +821,9 @@ export class Graph {
           elements: [],
         };
 
+        // Load saved style from localStorage
+        Graph.loadLabelStyle(c);
+
         this.labelsMap.set(c.name, c);
         this.labels.push(c);
       }
@@ -791,6 +836,27 @@ export class Graph {
     });
   }
 
+  public static loadLabelStyle(label: Label): void {
+    if (typeof window === "undefined") return;
+
+    const storageKey = `labelStyle_${label.name}`;
+    const savedStyle = localStorage.getItem(storageKey);
+    
+    if (savedStyle) {
+      try {
+        const style = JSON.parse(savedStyle);
+        label.style = style;
+        
+        // Apply custom color if present
+        if (style.customColor) {
+          label.color = style.customColor;
+        }
+      } catch (e) {
+        // Ignore invalid JSON
+      }
+    }
+  }
+
   public createRelationship(relationship: string): Relationship {
     let l = this.relationshipsMap.get(relationship);
 
@@ -998,6 +1064,12 @@ export class Graph {
       const [emptyCategory] = this.createLabel([""], selectedElement);
       selectedElement.labels.push(emptyCategory.name);
       selectedElement.color = emptyCategory.color;
+    } else {
+      // Update node color to reflect the remaining label
+      const remainingLabel = this.LabelsMap.get(selectedElement.labels[0]);
+      if (remainingLabel) {
+        selectedElement.color = remainingLabel.color;
+      }
     }
   }
 
@@ -1057,6 +1129,9 @@ export class Graph {
 
     selectedElement.labels.push(label);
 
+    // Update node color to reflect the new label
+    selectedElement.color = category.color;
+
     return this.labels;
   }
 

app/components/ForceGraph.tsx

@@ -6,11 +6,11 @@
 
 import { Dispatch, SetStateAction, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
 import ForceGraph2D from "react-force-graph-2d"
-import { securedFetch, GraphRef, handleZoomToFit, getTheme, Tab, ViewportState, getNodeDisplayText } from "@/lib/utils"
+import { securedFetch, GraphRef, handleZoomToFit, getTheme, Tab, ViewportState, getNodeDisplayText, getContrastTextColor } from "@/lib/utils"
 import { useToast } from "@/components/ui/use-toast"
 import * as d3 from "d3"
 import { useTheme } from "next-themes"
-import { Link, Node, Relationship, Graph, getLabelWithFewestElements, GraphData } from "../api/graph/model"
+import { Link, Node, Relationship, Graph, getLabelWithFewestElements, GraphData, EMPTY_DISPLAY_NAME } from "../api/graph/model"
 import { BrowserSettingsContext, IndicatorContext } from "./provider"
 import Spinning from "./ui/spinning"
 
@@ -294,10 +294,12 @@ export default function ForceGraph({
                 });
         }
 
-        // Add collision force to prevent node overlap (scale radius by node degree)
+        // Add collision force to prevent node overlap (scale radius by node degree and custom size)
         chartRef.current.d3Force('collision', d3.forceCollide((node: Node) => {
             const degree = nodeDegreeMap.get(node.id) || 0;
-            return COLLISION_BASE_RADIUS + Math.sqrt(degree) * HIGH_DEGREE_PADDING;
+            const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
+            const customSize = label.style?.customSize || 1;
+            return (COLLISION_BASE_RADIUS * customSize) + Math.sqrt(degree) * HIGH_DEGREE_PADDING;
         }).strength(COLLISION_STRENGTH).iterations(2));
 
         // Center force to keep graph centered
@@ -324,7 +326,8 @@ export default function ForceGraph({
     // Clear cached display names when displayTextPriority changes
     useEffect(() => {
         data.nodes.forEach(node => {
-            node.displayName = ['', ''];
+            // eslint-disable-next-line no-param-reassign
+            node.displayName = [...EMPTY_DISPLAY_NAME];
         });
         // Force a re-render by reheating the simulation
         if (chartRef.current) {
@@ -441,9 +444,14 @@ export default function ForceGraph({
                 nodeLabel={(node) => type === "graph" ? handleGetNodeDisplayText(node) : node.labels[0]}
                 graphData={data}
                 nodeRelSize={NODE_SIZE}
-                nodeCanvasObjectMode={() => 'after'}
+                nodeVal={(node) => {
+                    // Return the square of customSize because library uses Math.sqrt(nodeVal)
+                    const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
+                    const customSize = label.style?.customSize || 1;
+                    return customSize * customSize; // Squared because library will sqrt it
+                }}
+                nodeCanvasObjectMode={() => 'replace'}
                 linkCanvasObjectMode={() => 'after'}
-                linkDirectionalArrowRelPos={1}
                 linkDirectionalArrowLength={(link) => {
                     let length = 0;
 
@@ -453,6 +461,7 @@ export default function ForceGraph({
 
                     return length;
                 }}
+                linkDirectionalArrowRelPos={1}
                 linkDirectionalArrowColor={(link) => link.color}
                 linkWidth={(link) => isLinkSelected(link) ? 2 : 1}
                 nodeCanvasObject={(node, ctx) => {
@@ -462,17 +471,26 @@ export default function ForceGraph({
                         node.y = 0
                     }
 
+                    // Get label style customization
+                    const label = getLabelWithFewestElements(node.labels.map(l => graph.LabelsMap.get(l) || graph.createLabel([l])[0]));
+                    const customSize = label.style?.customSize || 1;
+                    const nodeSize = NODE_SIZE * customSize;
+
+                    // Draw the node circle with custom color and size
+                    ctx.fillStyle = node.color;
+                    ctx.beginPath();
+                    ctx.arc(node.x, node.y, nodeSize, 0, 2 * Math.PI, false);
+                    ctx.fill();
+
+                    // Draw the border
                     ctx.lineWidth = ((selectedElements.length > 0 && selectedElements.some(el => el.id === node.id && !el.source)))
                         || (hoverElement && !hoverElement.source && hoverElement.id === node.id)
                         ? 1.5 : 0.5
                     ctx.strokeStyle = foreground;
-
-                    ctx.beginPath();
-                    ctx.arc(node.x, node.y, NODE_SIZE, 0, 2 * Math.PI, false);
                     ctx.stroke();
-                    ctx.fill();
 
-                    ctx.fillStyle = 'black';
+                    // Set text color based on node background color for better contrast
+                    ctx.fillStyle = getContrastTextColor(node.color);
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
                     ctx.font = `400 2px SofiaSans`;
@@ -485,13 +503,27 @@ export default function ForceGraph({
                         let text = '';
 
                         if (type === "graph") {
-                            text = handleGetNodeDisplayText(node);
+                            // Check if label has custom caption property
+                            const customCaption = label.style?.customCaption;
+                            if (customCaption) {
+                                if (customCaption === "Description") {
+                                    text = handleGetNodeDisplayText(node);
+                                } else if (customCaption === "id") {
+                                    text = String(node.id);
+                                } else if (node.data[customCaption]) {
+                                    text = String(node.data[customCaption]);
+                                } else {
+                                    text = handleGetNodeDisplayText(node);
+                                }
+                            } else {
+                                text = handleGetNodeDisplayText(node);
+                            }
                         } else {
-                            text = getLabelWithFewestElements(node.labels.map(label => graph.LabelsMap.get(label) || graph.createLabel([label])[0])).name;
+                            text = label.name;
                         }
 
                         // Calculate text wrapping for circular node
-                        const textRadius = NODE_SIZE - PADDING / 2; // Leave some padding inside the circle
+                        const textRadius = nodeSize - PADDING / 2; // Leave some padding inside the circle
                         [line1, line2] = wrapTextForCircularNode(ctx, text, textRadius);
 
                         // Cache the result