Staging

app/api/graph/model.ts

@@ -1,9 +1,33 @@
+/* eslint-disable one-var */
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { EdgeDataDefinition, NodeDataDefinition } from 'cytoscape';
 import { LinkObject, NodeObject } from 'react-force-graph-2d';
 
+const getSchemaValue = (value: string): string[] => {
+    let unique, required, type, description
+    if (value.includes("!")) {
+        value = value.replace("!", "")
+        unique = "true"
+    } else {
+        unique = "false"
+    }
+    if (value.includes("*")) {
+        value = value.replace("*", "")
+        required = "true"
+    } else {
+        required = "false"
+    }
+    if (value.includes("-")) {
+        [type, description] = value.split("-")
+    } else {
+        type = "string"
+        description = ""
+    }
+    return [type, description, unique, required]
+}
+
 export type Node = NodeObject<{
     id: number,
     category: string[],
@@ -209,14 +233,14 @@ export class Graph {
         return new Graph(graphName || "", [], [], { nodes: [], links: [] }, new Map<string, Category>(), new Map<string, Category>(), new Map<number, Node>(), new Map<number, Link>(), colors)
     }
 
-    public static create(id: string, results: any, colors?: string[]): Graph {
+    public static create(id: string, results: { data: Data, metadata: any[] }, isCollapsed: boolean, isSchema: boolean, colors?: string[],): Graph {
         const graph = Graph.empty(undefined, colors)
-        graph.extend(results)
+        graph.extend(results, isCollapsed, isSchema)
         graph.id = id
         return graph
     }
 
-    public extendNode(cell: NodeCell, collapsed = false) {
+    public extendNode(cell: NodeCell, collapsed: boolean, isSchema: boolean) {
         // check if category already exists in categories
         const categories = this.createCategory(cell.labels.length === 0 ? [""] : cell.labels)
         // check if node already exists in nodes or fake node was created
@@ -233,7 +257,7 @@ export class Graph {
                 data: {}
             }
             Object.entries(cell.properties).forEach(([key, value]) => {
-                node.data[key] = value as string;
+                node.data[key] = isSchema ? getSchemaValue(value) : value;
             });
             this.nodesMap.set(cell.id, node)
             this.elements.nodes.push(node)
@@ -248,7 +272,7 @@ export class Graph {
             currentNode.expand = false
             currentNode.collapsed = collapsed
             Object.entries(cell.properties).forEach(([key, value]) => {
-                currentNode.data[key] = value as string;
+                currentNode.data[key] = isSchema ? getSchemaValue(value) : value;
             });
 
             // remove empty category if there are no more empty nodes category
@@ -272,9 +296,8 @@ export class Graph {
         return currentNode
     }
 
-    public extendEdge(cell: LinkCell, collapsed = false) {
+    public extendEdge(cell: LinkCell, collapsed: boolean, isSchema: boolean) {
         const label = this.createLabel(cell.relationshipType)
-
         const currentEdge = this.linksMap.get(cell.id)
 
         if (!currentEdge) {
@@ -369,7 +392,7 @@ export class Graph {
             }
 
             Object.entries(cell.properties).forEach(([key, value]) => {
-                link.data[key] = value as string;
+                link.data[key] = isSchema ? getSchemaValue(value) : value;
             });
 
             this.linksMap.set(cell.id, link)
@@ -381,7 +404,7 @@ export class Graph {
         return currentEdge
     }
 
-    public extend(results: { data: Data, metadata: any[] }, collapsed = false): (Node | Link)[] {
+    public extend(results: { data: Data, metadata: any[] }, collapsed = false, isSchema = false): (Node | Link)[] {
         const newElements: (Node | Link)[] = []
         const data = results?.data
 
@@ -399,15 +422,15 @@ export class Graph {
                 if (cell instanceof Object) {
                     if (cell.nodes) {
                         cell.nodes.forEach((node: any) => {
-                            newElements.push(this.extendNode(node, collapsed))
+                            newElements.push(this.extendNode(node, collapsed, isSchema))
                         })
                         cell.edges.forEach((edge: any) => {
-                            newElements.push(this.extendEdge(edge, collapsed))
+                            newElements.push(this.extendEdge(edge, collapsed, isSchema))
                         })
                     } else if (cell.relationshipType) {
-                        newElements.push(this.extendEdge(cell, collapsed))
+                        newElements.push(this.extendEdge(cell, collapsed, isSchema))
                     } else if (cell.labels) {
-                        newElements.push(this.extendNode(cell, collapsed))
+                        newElements.push(this.extendNode(cell, collapsed, isSchema))
                     }
                 }
             })

app/components/EditorComponent.tsx

@@ -78,7 +78,7 @@ const KEYWORDS = [
     "ORDER BY",
     "SKIP",
     "LIMIT",
-    "MARGE",
+    "MERGE",
     "DELETE",
     "SET",
     "WITH",
@@ -357,6 +357,8 @@ export default function EditorComponent({ currentQuery, historyQueries, setCurre
         if (!graph.Id || (!monacoInstance && !monacoI)) return
         const m = monacoI || monacoInstance
         const sug: Suggestions = getEmptySuggestions()
+
+        sugProvider?.dispose()
 
         await Promise.all([
             addLabelsSuggestions(sug.labels),
@@ -463,20 +465,16 @@ export default function EditorComponent({ currentQuery, historyQueries, setCurre
         run()
     }, [graph])
 
-
-    useEffect(() => {
-        getSuggestions()
-    }, [graph.Id])
-
     useEffect(() => {
         const interval = setInterval(() => {
             getSuggestions()
         }, 5000)
 
         return () => {
             clearInterval(interval)
+            sugProvider?.dispose()
         }
-    }, [])
+    }, [graph.Id])
 
     const handleEditorWillMount = (monacoI: Monaco) => {
         monacoI.languages.setMonarchTokensProvider('custom-language', {
@@ -557,7 +555,6 @@ export default function EditorComponent({ currentQuery, historyQueries, setCurre
             updatePlaceholderVisibility();
         });
 
-        // Initial check
         updatePlaceholderVisibility();
 
         setMonacoInstance(monacoI)
@@ -572,7 +569,7 @@ export default function EditorComponent({ currentQuery, historyQueries, setCurre
             setBlur(false)
         })
 
-        const isFirstLine = e.createContextKey('isFirstLine', false as boolean);
+        const isFirstLine = e.createContextKey<boolean>('isFirstLine', true);
 
         // Update the context key value based on the cursor position
         e.onDidChangeCursorPosition(() => {

app/components/ForceGraph.tsx

@@ -24,7 +24,6 @@ interface Props {
     type?: "schema" | "graph"
     isAddElement?: boolean
     setSelectedNodes?: Dispatch<SetStateAction<[Node | undefined, Node | undefined]>>
-    isCollapsed: boolean
 }
 
 const NODE_SIZE = 6
@@ -43,7 +42,6 @@ export default function ForceGraph({
     type = "graph",
     isAddElement = false,
     setSelectedNodes,
-    isCollapsed
 }: Props) {
 
     const [parentWidth, setParentWidth] = useState<number>(0)
@@ -60,10 +58,26 @@ export default function ForceGraph({
     }, [chartRef, data.links.length, data.nodes.length])
 
     useEffect(() => {
-        if (!parentRef.current) return
-        setParentWidth(parentRef.current.clientWidth)
-        setParentHeight(parentRef.current.clientHeight)
-    }, [parentRef.current?.clientWidth, parentRef.current?.clientHeight, isCollapsed])
+        const handleResize = () => {
+            if (!parentRef.current) return
+            setParentWidth(parentRef.current.clientWidth)
+            setParentHeight(parentRef.current.clientHeight)
+        }
+
+        handleResize()
+
+        const resizeObserver = new ResizeObserver(handleResize)
+        if (parentRef.current) {
+            resizeObserver.observe(parentRef.current)
+        }
+
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+            resizeObserver.disconnect()
+            window.removeEventListener('resize', handleResize)
+        }
+    }, [])
 
     const onFetchNode = async (node: Node) => {
         const result = await securedFetch(`/api/graph/${graph.Id}/${node.id}`, {

app/graph/GraphView.tsx

@@ -21,10 +21,7 @@ import Button from "../components/ui/Button";
 import TableView from "./TableView";
 
 const ForceGraph = dynamic(() => import("../components/ForceGraph"), { ssr: false });
-
-const EditorComponent = dynamic(() => import("../components/EditorComponent"), {
-    ssr: false
-})
+const EditorComponent = dynamic(() => import("../components/EditorComponent"), {ssr: false})
 
 function GraphView({ graph, selectedElement, setSelectedElement, runQuery, historyQuery, historyQueries, fetchCount, session }: {
     graph: Graph
@@ -278,7 +275,7 @@ function GraphView({ graph, selectedElement, setSelectedElement, runQuery, histo
                                     title={!maximize ? "Maximize" : "Minimize"}
                                     onClick={() => setMaximize(prev => !prev)}
                                 >
-                                    {maximize ? <Maximize2 /> : <Minimize2 />}
+                                    {!maximize ? <Maximize2 /> : <Minimize2 />}
                                 </Button>
                                 <div className="z-10 absolute top-4 left-4 flex items-center gap-2 pointer-events-none">
                                     {cooldownTicks === undefined ? <Play size={20} /> : <Pause size={20} />}
@@ -292,7 +289,6 @@ function GraphView({ graph, selectedElement, setSelectedElement, runQuery, histo
                                     />
                                 </div>
                                 <ForceGraph
-                                    isCollapsed={isCollapsed}
                                     graph={graph}
                                     chartRef={chartRef}
                                     data={data}

app/graph/Selector.tsx

@@ -84,7 +84,7 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
 
             const json = await result.json()
             if (json.result) {
-                setSchema(Graph.create(name, json.result))
+                setSchema(Graph.create(name, json.result, false, true))
             }
         }
         onChange(name)

app/graph/View.tsx

@@ -19,8 +19,10 @@ export default function View({ graph, setGraph, selectedValue }: {
     const [editable, setEditable] = useState<string>("")
 
     const handlePreferencesChange = (colors?: string[]) => {
-        setGraph(Graph.create(graph.Id, { data: graph.Data, metadata: graph.Metadata }, colors || colorsArr))
-        if (colors) return
+        setGraph(Graph.create(graph.Id, { data: graph.Data, metadata: graph.Metadata }, false, true, colors || colorsArr))
+        if (colors) {
+            localStorage.removeItem(graph.Id)
+        }
         localStorage.setItem(graph.Id, JSON.stringify(colorsArr));
     }
 
@@ -40,9 +42,9 @@ export default function View({ graph, setGraph, selectedValue }: {
             className="w-[30%] h-[50%]"
             title="Preferences"
         >
-            <div className="h-full flex flex-col gap-8">
+            <div className="h-full flex flex-col gap-8 overflow-hidden">
                 <p className="text-xl">Legends</p>
-                <ul className="flex flex-col gap-4 overflow-auto">
+                <ul className="flex flex-col gap-4 p-2 overflow-auto">
                     {
                         colorsArr.map((c, i) => (
                             <li onMouseEnter={() => setHover(c)} onMouseLeave={(() => setHover(""))} key={c} className={cn(`flex gap-8 items-center`)}>
@@ -154,7 +156,7 @@ export default function View({ graph, setGraph, selectedValue }: {
                         <RotateCcw />
                     </Button>
                     <Button
-                        disabled={graph.Colors.filter((c, i) => c === colorsArr[i]).length === colorsArr.length && DEFAULT_COLORS.length === colorsArr.length}
+                        disabled={graph.Colors.every((c) => colorsArr.some(color => color === c)) && graph.Colors.length === colorsArr.length}
                         variant="Primary"
                         label="Apply"
                         onClick={() => handlePreferencesChange()}

app/graph/page.tsx

@@ -87,7 +87,7 @@ export default function Page() {
         const queryArr = queries.some(q => q.text === query) ? queries : [...queries, { text: query, metadata: result.metadata }]
         setQueries(queryArr)
         localStorage.setItem("query history", JSON.stringify(queryArr))
-        const g = Graph.create(graphName, result, graph.Colors)
+        const g = Graph.create(graphName, result, false, false, graph.Colors)
         setGraph(g)
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -100,7 +100,7 @@ export default function Page() {
         const queryArr = queries.some(q => q.text === query) ? queries : [...queries, { text: query, metadata: result.metadata }]
         setQueries(queryArr)
         localStorage.setItem("query history", JSON.stringify(queryArr))
-        setGraph(Graph.create(graphName, result))
+        setGraph(Graph.create(graphName, result, false, false, graph.Colors))
         setHistoryQuery(query)
         setQueriesOpen(false)
     }

app/schema/SchemaCreateElement.tsx

@@ -63,7 +63,7 @@ export default function SchemaCreateElement({ onCreate, onExpand, selectedNodes,
 
   const handleSetAttribute = (isUndo: boolean, att?: [string, string[]]) => {
     const newAtt = att || attribute
-    
+
     if (!newAtt[0] || newAtt[1].some((v) => !v)) {
       toast({
         title: "Error",
@@ -194,7 +194,7 @@ export default function SchemaCreateElement({ onCreate, onExpand, selectedNodes,
               />
           }
         </div>
-        <p className="flex text-white">{attributes.length} Attributes</p>
+        <p className="font-medium text-xl"><span className="text-primary">{attributes.length}</span> Attributes</p>
       </div>
       <div className="w-full h-1 grow flex flex-col justify-between items-start font-medium">
         <Table>

app/schema/SchemaDataPanel.tsx

@@ -143,7 +143,7 @@ export default function SchemaDataPanel({ obj, onExpand, onSetAttributes, onRemo
                     </Button>
                     <p>{label}</p>
                 </div>
-                <p className="flex text-white">{attributes.length} Attributes</p>
+                <p className="font-medium text-xl"><span className="text-primary">{attributes.length}</span> Attributes</p>
             </div>
             <Table parentClassName="grow">
                 <TableHeader>

app/schema/SchemaView.tsx

@@ -28,10 +28,19 @@ interface Props {
 }
 
 const getCreateQuery = (type: boolean, selectedNodes: [Node, Node], attributes: [string, string[]][], label?: string) => {
+    const formateAttributes: [string, string][] = attributes.map((att) => {
+        const [key, [t, d, u, r]] = att
+        let val = `${t}`
+        if (u === "true") val += "!"
+        if (r === "true") val += "*"
+        if (d) val += `-${d}`
+        return [key, val]
+    })
+
     if (type) {
-        return `CREATE (n${label ? `:${label}` : ""}${attributes?.length > 0 ? ` {${attributes.map(([k, [t, d, u, r]]) => `${k}: ["${t}", "${d}", "${u}", "${r}"]`).join(",")}}` : ""}) RETURN n`
+        return `CREATE (n${label ? `:${label}` : ""}${formateAttributes?.length > 0 ? ` {${formateAttributes.map(([k, v]) => `${k}: "${v}"`).join(",")}}` : ""}) RETURN n`
     }
-    return `MATCH (a), (b) WHERE ID(a) = ${selectedNodes[0].id} AND ID(b) = ${selectedNodes[1].id} CREATE (a)-[e${label ? `:${label}` : ""}${attributes?.length > 0 ? ` {${attributes.map(([k, [t, d, u, un]]) => `${k}: ["${t}", "${d}", "${u}", "${un}"]`).join(",")}}` : ""}]->(b) RETURN e`
+    return `MATCH (a), (b) WHERE ID(a) = ${selectedNodes[0].id} AND ID(b) = ${selectedNodes[1].id} CREATE (a)-[e${label ? `:${label}` : ""}${formateAttributes?.length > 0 ? ` {${formateAttributes.map(([k, v]) => `${k}: "${v}"`).join(",")}}` : ""}]->(b) RETURN e`
 }
 
 export default function SchemaView({ schema, fetchCount, session }: Props) {
@@ -292,10 +301,10 @@ export default function SchemaView({ schema, fetchCount, session }: Props) {
             const json = await result.json()
 
             if (isAddEntity) {
-                schema.extendNode(json.result.data[0].n)
+                schema.extendNode(json.result.data[0].n, false, true)
                 setIsAddEntity(false)
             } else {
-                schema.extendEdge(json.result.data[0].e, true)
+                schema.extendEdge(json.result.data[0].e, false, true)
                 setIsAddRelation(false)
             }
 
@@ -337,7 +346,7 @@ export default function SchemaView({ schema, fetchCount, session }: Props) {
                         }}
                         onDeleteElement={handleDeleteElement}
                         chartRef={chartRef}
-                        addDisabled={session?.user.role === "Read-Only"}
+                        addDisabled={session?.user.role === "Read-Only" || !schema.Id}
                     />
                     {
                         isCollapsed &&
@@ -374,7 +383,6 @@ export default function SchemaView({ schema, fetchCount, session }: Props) {
                         />
                     </div>
                     <ForceGraph
-                        isCollapsed={isCollapsed}
                         chartRef={chartRef}
                         data={data}
                         graph={schema}