Merge pull request #155 from FalkorDB/highlights

fix #56 Highlights
FalkorDB · Apr 9, 2024 · dad1e87 · dad1e87
2 parents 676f8f9 + ce61910
commit dad1e87
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 15 deletions.
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
@@ -58,11 +58,11 @@ export default function Page() {
         event.preventDefault();
         const state = queryState.current;
         if (!state) {
-            return
+            return false
         }
 
         // Proposed abstraction for improved modularity
-        if (!validateGraphSelection(state.graphName)) return;
+        if (!validateGraphSelection(state.graphName)) return false;
 
         const q = state.query.trim() || "MATCH (n) OPTIONAL MATCH (n)-[e]-(m) RETURN n,e,m limit 100";
 
@@ -80,7 +80,7 @@ export default function Page() {
             if (result.status >= 400 && result.status < 500) {
                 signOut({ callbackUrl: '/login' })
             }
-            return
+            return false
         }
 
         const json = await result.json()
@@ -90,6 +90,7 @@ export default function Page() {
         setShowGraph(!!newGraph.Categories && newGraph.Categories.length > 0)
         setShowData(!!newGraph.Data && newGraph.Data.length > 0)
         graphView.current?.expand(newGraph.Elements)
+        return true
     }
 
     return (

diff --git a/app/graph/query.tsx b/app/graph/query.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
@@ -8,9 +7,9 @@ import { Menu, Search, Trash2 } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import Editor from "@monaco-editor/react";
 import GraphsList from "./GraphList";
 
-
 export class QueryState {
     constructor(
         public query: string,
@@ -19,7 +18,7 @@ export class QueryState {
 }
 
 export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }: {
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void,
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<boolean>,
     onQueryUpdate: (state: QueryState) => void,
     onDeleteGraph: () => void,
     className: string
@@ -53,18 +52,27 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }
     return (
         <form
             className={cn("flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0", className)}
-            onSubmit={onSubmit}>
+            onSubmit={(e) => onSubmit(e)}>
             <div className="items-center flex flex-row space-x-3">
                 <Label htmlFor="query" className="text">Query</Label>
                 <GraphsList onDelete={onDelete} onSelectedGraph={setGraphName} />
             </div>
             <div className="flex flex-row space-x-3 w-full md:w-8/12 items-center">
-                <Input
-                    id="query"
-                    className="border-gray-500 w-full"
-                    placeholder="MATCH (n) OPTIONAL MATCH (n)-[e]-(m) RETURN n,e,m limit 100"
-                    type="text"
-                    onChange={(event) => setQuery(event.target.value)}
+                <Editor
+                    value={query}
+                    onChange={(val) => val && setQuery(val)}
+                    theme="vs-dark"
+                    language="cypher"
+                    options={{
+                        suggest: {
+                            showKeywords: true,
+                        },
+                        minimap: { enabled: false },
+                        wordWrap: "on",
+                        lineNumbers: "off",
+                        lineHeight: 40,
+                        fontSize: 30,
+                    }}
                 />
                 <TooltipProvider>
                     <Tooltip>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "-": "^0.0.1",
     "@hookform/resolvers": "^3.3.4",
+    "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -42,6 +43,7 @@
     "falkordb": "beta",
     "lodash": "^4.17.21",
     "lucide-react": "^0.301.0",
+    "monaco-editor": "^0.47.0",
     "next": "14.1.0",
     "next-auth": "^4.24.5",
     "next-themes": "^0.2.1",