Alaminfix #50 add graphs list

app/components/combobox.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { useState, Dispatch, createRef } from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Separator } from "@/components/ui/separator"
+import { Input } from "@/components/ui/input"
+
+
+/* eslint-disable react/require-default-props */
+interface ComboboxProps {
+  className?: string,
+  type?: string,
+  options: string[],
+  addOption?: Dispatch<string>|null,
+  selectedValue: string,
+  setSelectedValue: Dispatch<string>
+}
+
+export default function Combobox({ className='', type='', options, addOption=null, selectedValue, setSelectedValue }: ComboboxProps) {
+  const [open, setOpen] = useState(false)
+  const inputRef = createRef<HTMLInputElement>()
+
+  // read the text in the create input box and add it to the list of options
+  const onAddOption = () => {
+    setOpen(false)
+    if (!inputRef.current?.value) {
+      return
+    }
+    if (addOption) {
+      addOption(inputRef.current.value)
+    }
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Enter") {
+      onAddOption();
+    }
+  }
+
+  const entityType = type ?? ""
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={`w-[200px] justify-between ${className} `}
+        >
+          {selectedValue
+            ? options.find((option) => option === selectedValue)
+            : `Select ${entityType}...`}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {options.map((option) => (
+              <CommandItem
+                key={option}
+                onSelect={(currentValue) => {
+                  if (currentValue !== selectedValue) {
+                    setSelectedValue(currentValue)
+                  }
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    selectedValue === option ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {option}
+              </CommandItem>
+            ))}
+            <Separator orientation="horizontal" />
+
+            {addOption &&
+              <Dialog>
+                <DialogTrigger>
+                  <CommandItem>Create new {entityType}...</CommandItem>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Create a new {entityType}?</DialogTitle>
+                    <DialogDescription>
+                      <Input type="text" ref={inputRef} id="create" name="create" onKeyDown={handleKeyDown} placeholder={`${entityType} name ...`} />
+                    </DialogDescription>
+                  </DialogHeader>
+                  <Button className="p-4" type="submit" onClick={onAddOption}>Create</Button>
+                </DialogContent>
+              </Dialog>
+            }
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

app/details/DatabaseLine.tsx

@@ -3,7 +3,14 @@ import { useToast } from "@/components/ui/use-toast"
 import { Copy, Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 
-export default function DatabaseLine({ label, value, masked }: { label: string, value: string, masked?: string }) {
+/* eslint-disable react/require-default-props */
+interface DatabaseLineProps {
+    label: string,
+    value: string,
+    masked?: string,
+}
+
+export default function DatabaseLine({ label, value, masked='' }: DatabaseLineProps) {
 
     const { toast } = useToast()
     const [showPassword, setShowPassword] = useState(false);
@@ -47,8 +54,3 @@ export default function DatabaseLine({ label, value, masked }: { label: string,
         </div>
     );
 }
-
-
-DatabaseLine.defaultProps = {
-    masked: ''
-}

app/graph/GraphList.tsx

@@ -0,0 +1,45 @@
+import { useState, useEffect, Dispatch, SetStateAction } from 'react';
+import { useToast } from "@/components/ui/use-toast" 
+import Combobox from '../components/combobox';
+
+// A component that renders an input box for Cypher queries
+export default function GraphsList({onSelectedGraph}: { onSelectedGraph: Dispatch<SetStateAction<string>> }) {
+
+    const [graphs, setGraphs] = useState<string[]>([]);
+    const [selectedGraph, setSelectedGraph] = useState("");
+    const { toast } = useToast()
+    useEffect(() => {
+        fetch('/api/graph', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then((result) => {
+                if (result.status < 300) {
+                    return result.json()
+                }
+                toast({
+                    title: "Error",
+                    description: result.text(),
+                })
+                return { result: [] }
+            }).then((result) => {
+                setGraphs(result.result.graphs ?? [])
+            })
+    }, [toast])
+
+    const setSelectedValue = (graph: string) => {
+        setSelectedGraph(graph)
+        onSelectedGraph(graph)
+    }
+
+    const setOptions = (newGraph: string) => {
+        setGraphs((prevGraphs: string[]) => [...prevGraphs, newGraph]);
+        setSelectedValue(graphs[graphs.length - 1])
+    }
+
+    return (
+        <Combobox type="Graph" options={graphs} addOption={setOptions} selectedValue={selectedGraph} setSelectedValue={setSelectedValue} />
+    )
+}

app/graph/page.tsx

@@ -80,7 +80,6 @@ const LAYOUT = {
 }
 
 export default function Page() {
-
     const [graph, setGraph] = useState(Graph.empty());
 
     // A reference to the chart container to allowing zooming and editing

app/graph/query.tsx

@@ -3,6 +3,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
+import GraphsList from "./GraphList";
 
 
 export class QueryState {
@@ -17,7 +18,6 @@ export function Query({ onSubmit, onQueryUpdate, className = "" }: {
     onQueryUpdate: (state: QueryState) => void,
     className: string
 }) {
-
     const [query, setQuery] = useState('');
     const [graphName, setGraphName] = useState('');
 
@@ -28,8 +28,7 @@ export function Query({ onSubmit, onQueryUpdate, className = "" }: {
             className={cn("items-center flex flex-row space-x-3", className)}
             onSubmit={onSubmit}>
             <Label htmlFor="query" className="text">Query</Label>
-            <Input id="graph" className="border-gray-500 w-2/12"
-                placeholder="Enter Graph name" type="text" onChange={(event)=>setGraphName(event.target.value)} />
+            <GraphsList onSelectedGraph={setGraphName} />
             <Input id="query" className="border-gray-500 w-8/12"
                 placeholder="MATCH (n)-[e]-() RETURN n,e limit 100" type="text" onChange={(event)=>setQuery(event.target.value)} />
             <Button type="submit">Run</Button>

components/ui/command.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}