Merge branch 'staging' into fix

FalkorDB · Sep 10, 2024 · ff76ed5 · ff76ed5
2 parents 95bb949 + 01bfee7
commit ff76ed5
Show file tree

Hide file tree

Showing 16 changed files with 362 additions and 125 deletions.
diff --git a/app/api/graph/model.ts b/app/api/graph/model.ts
@@ -1,5 +1,14 @@
 import { EdgeDataDefinition, ElementDefinition, NodeDataDefinition } from 'cytoscape';
 
+export const DEFAULT_COLORS = [
+    "#7167F6",
+    "#ED70B1",
+    "#EF8759",
+    "#99E4E5",
+    "#F2EB47",
+    "#89D86D"
+]
+
 export interface Query {
     text: string
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,23 +21,6 @@ export interface Category {
     show: boolean,
 }
 
-const COLORS_ORDER_NAME = [
-    "blue",
-    "pink",
-    "orange",
-    "aqua",
-    "yellow",
-    "green"
-]
-
-const COLORS_ORDER_VALUE = [
-    "#7167F6",
-    "#ED70B1",
-    "#EF8759",
-    "#99E4E5",
-    "#F2EB47",
-    "#89D86D"
-]
 
 const NODE_RESERVED_KEYS = ["parent", "id", "position"]
 const NODE_ALTERNATIVE_RESERVED_KEYS = ["_parent_", "_id_", "_position_"]
@@ -52,20 +44,6 @@ function edgeSafeKey(key: string): string {
     return EDGE_ALTERNATIVE_RESERVED_KEYS[index];
 }
 
-export function getCategoryColorValue(index = 0): string {
-    return COLORS_ORDER_VALUE[index % COLORS_ORDER_VALUE.length]
-}
-
-export function getCategoryColorName(index = 0): string {
-    return COLORS_ORDER_NAME[index % COLORS_ORDER_NAME.length]
-}
-
-export function getCategoryColorNameFromValue(colorValue: string): string {
-    const colorIndex = COLORS_ORDER_VALUE.findIndex((c) => c === colorValue)
-
-    return COLORS_ORDER_NAME[colorIndex % COLORS_ORDER_NAME.length]
-}
-
 export interface ExtractedData {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data: any[][],
@@ -93,7 +71,7 @@ export class Graph {
     private categoriesMap: Map<string, Category>;
 
     private categoriesColorIndex: number = 0;
-    
+
     private labelsMap: Map<string, Category>;
 
     private labelsColorIndex: number = 0;
@@ -102,8 +80,10 @@ export class Graph {
 
     private edgesMap: Map<number, EdgeDataDefinition>;
 
+    private COLORS_ORDER_VALUE: string[] = []
+
     private constructor(id: string, categories: Category[], labels: Category[], elements: ElementDefinition[],
-        categoriesMap: Map<string, Category>, labelsMap: Map<string, Category>, nodesMap: Map<number, NodeDataDefinition>, edgesMap: Map<number, EdgeDataDefinition>) {
+        categoriesMap: Map<string, Category>, labelsMap: Map<string, Category>, nodesMap: Map<number, NodeDataDefinition>, edgesMap: Map<number, EdgeDataDefinition>, colors?: string[]) {
         this.id = id;
         this.columns = [];
         this.data = [];
@@ -114,6 +94,14 @@ export class Graph {
         this.labelsMap = labelsMap;
         this.nodesMap = nodesMap;
         this.edgesMap = edgesMap;
+        this.COLORS_ORDER_VALUE = colors || [
+            "#7167F6",
+            "#ED70B1",
+            "#EF8759",
+            "#99E4E5",
+            "#F2EB47",
+            "#89D86D"
+        ]
     }
 
     get Id(): string {
@@ -169,13 +157,21 @@ export class Graph {
         return this.data;
     }
 
-    public static empty(): Graph {
-        return new Graph("", [], [], [], new Map<string, Category>(), new Map<string, Category>(), new Map<number, NodeDataDefinition>(), new Map<number, EdgeDataDefinition>())
+    get Colors(): string[] {
+        return this.COLORS_ORDER_VALUE;
+    }
+
+    set Colors(colors: string[]) {
+        this.COLORS_ORDER_VALUE = colors;
+    }
+
+    public static empty(graphName?: string, colors?: string[]): Graph {
+        return new Graph(graphName || "", [], [], [], new Map<string, Category>(), new Map<string, Category>(), new Map<number, NodeDataDefinition>(), new Map<number, EdgeDataDefinition>(), colors)
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    public static create(id: string, results: any): Graph {
-        const graph = Graph.empty()
+    public static create(id: string, results: any, colors?: string[]): Graph {
+        const graph = Graph.empty(undefined, colors)
         graph.extend(results)
         graph.id = id
         return graph
@@ -194,7 +190,7 @@ export class Graph {
                 id: cell.id.toString(),
                 name: cell.id.toString(),
                 category: category.name,
-                color: getCategoryColorValue(category.index),
+                color: this.getCategoryColorValue(category.index),
             }
             Object.entries(cell.properties).forEach(([key, value]) => {
                 node[nodeSafeKey(key)] = value as string;
@@ -209,7 +205,7 @@ export class Graph {
             currentNode.id = cell.id.toString();
             currentNode.name = cell.id.toString();
             currentNode.category = category.name;
-            currentNode.color = getCategoryColorValue(category.index)
+            currentNode.color = this.getCategoryColorValue(category.index)
             Object.entries(cell.properties).forEach(([key, value]) => {
                 currentNode[nodeSafeKey(key)] = value as string;
             });
@@ -232,7 +228,7 @@ export class Graph {
                 source: sourceId,
                 target: destinationId,
                 label: cell.relationshipType,
-                color: getCategoryColorValue(label.index),
+                color: this.getCategoryColorValue(label.index),
             }
             Object.entries(cell.properties).forEach(([key, value]) => {
                 edge[edgeSafeKey(key)] = value as string;
@@ -246,7 +242,7 @@ export class Graph {
                     id: cell.sourceId.toString(),
                     name: cell.sourceId.toString(),
                     category: "",
-                    color: getCategoryColorValue()
+                    color: this.getCategoryColorValue()
                 }
                 this.nodesMap.set(cell.sourceId, source)
                 this.elements.push({ data: source })
@@ -258,7 +254,7 @@ export class Graph {
                     id: cell.destinationId.toString(),
                     name: cell.destinationId.toString(),
                     category: "",
-                    color: getCategoryColorValue()
+                    color: this.getCategoryColorValue()
                 }
                 this.nodesMap.set(cell.destinationId, destination)
                 this.elements.push({ data: destination })
@@ -272,11 +268,13 @@ export class Graph {
     public extend(results: any): ElementDefinition[] {
         const newElements: ElementDefinition[] = []
 
-        if (results?.data?.length) {
-            if (results.data[0] instanceof Object) {
-                this.columns = Object.keys(results.data[0])
+        const data = results?.data
+        if (data?.length) {
+            if (data[0] instanceof Object) {
+                this.columns = Object.keys(data[0])
             }
-            this.data = results.data
+
+            this.data = data
         }
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -333,13 +331,13 @@ export class Graph {
             this.categoriesMap.set(c.name, c)
             this.categories.push(c)
         }
-        
+
         return c
     }
-    
+
     public createLabel(category: string): Category {
         let l = this.labelsMap.get(category)
-        
+
         if (!l) {
             l = { name: category, index: this.labelsColorIndex, show: true }
             this.labelsColorIndex += 1
@@ -349,4 +347,8 @@ export class Graph {
 
         return l
     }
+
+    public getCategoryColorValue(index = 0): string {
+        return this.COLORS_ORDER_VALUE[index % this.COLORS_ORDER_VALUE.length]
+    }
 }
diff --git a/app/components/CloseDialog.tsx b/app/components/CloseDialog.tsx
@@ -16,7 +16,7 @@ export default function CloseDialog({ className, label, variant, icon, ...props
     return (
         <DialogClose asChild >
             <Button
-                icon={icon || !label ? <X /> : undefined}
+                icon={icon || (!label ? <X /> : undefined)}
                 className={cn("", className)}
                 variant={variant}
                 label={label}

diff --git a/app/globals.css b/app/globals.css
@@ -26,15 +26,25 @@
 }
 
 @layer components {
+
+    .hide-scrollbar {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
 
+    .hide-scrollbar {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
     .Page {
         @apply h-full w-full flex flex-col bg-background;
     }
 
     .LandingPage {
         background: linear-gradient(180deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
     }
-    
+
     .LoginForm {
         background: linear-gradient(180deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
         color: white;
@@ -73,6 +83,15 @@
     }
 }
 
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+
+}
 
 @font-face {
     font-family: 'Obviously Narrow';

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
@@ -448,7 +448,7 @@ const GraphView = forwardRef(({ graph, runQuery, historyQuery, fetchCount }: {
             <ResizablePanel
                 className={cn("flex flex-col gap-8", !isCollapsed && "mr-8")}
                 defaultSize={100}
-            >     
+            >
                 {
                     !maximize &&
                     <Dialog>
@@ -536,6 +536,7 @@ const GraphView = forwardRef(({ graph, runQuery, historyQuery, fetchCount }: {
                                 icon={<Minimize2 />}
                                 title="Minimize"
                                 onClick={() => setMaximize(false)}
+                                onKeyDown={(e) => e.code === "Escape" && setMaximize(false)}
                             />
                     }
                     <CytoscapeComponent
@@ -565,8 +566,8 @@ const GraphView = forwardRef(({ graph, runQuery, historyQuery, fetchCount }: {
                     {
                         (graph.Categories.length > 0 || graph.Labels.length > 0) &&
                         <>
-                            <Labels className="left-2" categories={graph.Categories} onClick={onCategoryClick} label="Labels" />
-                            <Labels className="right-2 text-end" categories={graph.Labels} onClick={onLabelClick} label="RelationshipTypes" />
+                            <Labels className="left-2" categories={graph.Categories} onClick={onCategoryClick} label="Labels" graph={graph} />
+                            <Labels className="right-2 text-end" categories={graph.Labels} onClick={onLabelClick} label="RelationshipTypes" graph={graph}/>
                         </>
                     }
                 </div>

diff --git a/app/graph/Selector.tsx b/app/graph/Selector.tsx
@@ -13,15 +13,18 @@ import DialogComponent from "../components/DialogComponent";
 import Button from "../components/ui/Button";
 import Duplicate from "./Duplicate";
 import SchemaView from "../schema/SchemaView";
+import View from "./View";
 
-export default function Selector({ onChange, graphName, queries, runQuery, edgesCount, nodesCount }: {
+export default function Selector({ onChange, graphName, queries, runQuery, edgesCount, nodesCount, setGraph, graph }: {
     /* eslint-disable react/require-default-props */
     onChange: (selectedGraphName: string) => void
     graphName: string
     runQuery?: (query: string, setQueriesOpen: (open: boolean) => void) => Promise<void>
     queries?: Query[]
     edgesCount: number
     nodesCount: number
+    setGraph: (graph: Graph) => void
+    graph: Graph
 }) {
 
     const [options, setOptions] = useState<string[]>([]);
@@ -143,6 +146,7 @@ export default function Selector({ onChange, graphName, queries, runQuery, edges
                         }}
                         selectedValue={selectedValue}
                     />
+                    <View setGraph={setGraph} graph={graph} selectedValue={selectedValue} />
                 </div >
             </div >
             <div className={cn("bg-[#2C2C4C] flex gap-4 justify-between items-center p-4 rounded-xl min-h-14", !selectedValue && "justify-end")}>