use selected grpah for query

app/api/query/route.tsx → app/api/graph/[graph]/route.tsx

@@ -1,12 +1,11 @@
 import authOptions from '@/app/api/auth/[...nextauth]/options';
 import { getServerSession } from "next-auth/next"
 import { NextResponse } from "next/server";
-import dataSource from '../db/appDataSource';
-import { UserEntity } from '../models/entities';
+import dataSource from '../../db/appDataSource';
+import { UserEntity } from '../../models/entities';
 import { createClient, Graph } from 'redis';
 
-
-export async function GET(request: Request) {
+export async function GET(request: Request, { params }: { params: { graph: string } }) {
 
  const session = await getServerSession(authOptions)
 
@@ -27,7 +26,7 @@ export async function GET(request: Request) {
  url: `redis://:${user?.db_password}@${user?.db_host}:${user?.db_port}`
  }).connect();
 
- const graph = new Graph(client, 'graph');
+ const graph = new Graph(client, params.graph);
 
  const {searchParams} = new URL(request.url);
  let q = searchParams.get('q')?.toString() || ""

app/components/combobox.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import * as React from "react"
+import {useState, Dispatch, SetStateAction} from "react"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
@@ -23,9 +23,8 @@ export interface Option {
  label: string
 }
 
-export function Combobox(props: { title: string, options: Option[] }) {
- const [open, setOpen] = React.useState(false)
- const [value, setValue] = React.useState("")
+export function Combobox(props: { title: string, options: Option[], selectedValue: string|null, setSelectedValue: Dispatch<SetStateAction<null>>}) {
+ const [open, setOpen] = useState(false)
 
  return (
  <Popover open={open} onOpenChange={setOpen}>
@@ -36,8 +35,8 @@ export function Combobox(props: { title: string, options: Option[] }) {
  aria-expanded={open}
  className="w-[200px] justify-between"
  >
- {value
- ? props.options.find((option) => option.value === value)?.label
+ {props.selectedValue
+ ? props.options.find((option) => option.value === props.selectedValue)?.label
  : props.title}
  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
  </Button>
@@ -51,14 +50,14 @@ export function Combobox(props: { title: string, options: Option[] }) {
  <CommandItem
  key={option.value}
  onSelect={(currentValue) => {
- setValue(currentValue === value ? "" : currentValue)
+ props.setSelectedValue(currentValue === props.selectedValue ? "" : currentValue)
  setOpen(false)
  }}
  >
  <Check
  className={cn(
  "mr-2 h-4 w-4",
- value === option.value ? "opacity-100" : "opacity-0"
+ props.selectedValue === option.value ? "opacity-100" : "opacity-0"
  )}
  />
  {option.label}

app/contacts/page.tsx

@@ -6,7 +6,7 @@ export default function Page() {
  return (
  <div className="flex flex-col items-center justify-center min-h-screen py-2">
  <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
- <div className="space-y-8">
+ <div className="space-y-8 p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-gray-300">
  <div className="space-y-2">
  <h2 className="text-3xl font-bold">Contact Us</h2>
  <p className="text-zinc-500 dark:text-zinc-400">Connect with us on your preferred platform</p>

app/sandbox/CypherInput.tsx

@@ -36,7 +36,7 @@ function isValidCypher(query: string) {
 }
 
 // A component that renders an input box for Cypher queries
-export function CypherInput(props: { graphs: string[], onSubmit: (query: string) => Promise<any> }) {
+export function CypherInput(props: { graphs: string[], onSubmit: (graph: string, query: string) => Promise<any> }) {
 
  const [results, setResults] = useState<any[]>([]);
 
@@ -45,6 +45,7 @@ export function CypherInput(props: { graphs: string[], onSubmit: (query: string)
 
  // A state variable that stores the validation result
  const [valid, setValid] = useState(true);
+ const [selectedValue, setSelectedValue] = useState(null);
 
  const options = props.graphs.map((graph) => {
  return {label: graph, value: graph}
@@ -69,15 +70,14 @@ export function CypherInput(props: { graphs: string[], onSubmit: (query: string)
 
  // If the query is valid, pass it to the parent component as a prop
  if (valid) {
- let newResults = await props.onSubmit(query);
+ let newResults = await props.onSubmit(selectedValue?? "falkordb", query);
  setResults(newResults.data?? [])
  }
  }
-
  // Return the JSX element that renders the input box and a submit button
  return (
  <>
- <Combobox options={options} title={"Select Graph..."}/>
+ <Combobox options={options} title={"Select Graph..."} selectedValue={selectedValue} setSelectedValue={setSelectedValue}/>
  <form className="flex items-center py-4 space-x-4" onSubmit={handleSubmit}>
  <Label htmlFor="cypher">Query:</Label>
  <Input type="text" id="cypher" name="cypher" value={query} onChange={handleChange} />

app/sandbox/DatabaseDetails.tsx

@@ -12,7 +12,7 @@ export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void
  <>
  <Dialog>
  <DialogTrigger>
- <Button className="rounded-full bg-blue-600 p-2 text-slate-50">Delete Sandbox</Button>
+ <Button className="rounded-full bg-blue-600 p-2 text-slate-50 m-2">Delete Sandbox</Button>
  </DialogTrigger>
  <DialogContent>
  <DialogHeader>

app/sandbox/DatabaseLine.tsx

@@ -17,7 +17,7 @@ export function DatabaseLine(props: { label: string, value: string }) {
 
  return (
  <div>{props.label}: <Button className="bg-transparent text-blue-600 p-2 hover:text-slate-50" onClick={copyToClipboard}>
- {props.value}&ensp; 
+ {props.value}&ensp;
  <svg
  className=" h-4 w-4"
  fill="none"

app/sandbox/page.tsx

@@ -80,8 +80,8 @@ export default function Page() {
  })
  }
 
- async function sendQuery(query: string) {
- let result = await fetch(`/api/query?q=${query}`, {
+ async function sendQuery(graph: string, query: string) {
+ let result = await fetch(`/api/graph/${graph}?q=${query}`, {
  method: 'GET',
  headers: {
  'Content-Type': 'application/json'
@@ -103,10 +103,10 @@ export default function Page() {
  return (
  <div className="flex flex-col items-center justify-center min-h-screen py-4">
  <main className="flex flex-col flex-1 m-4">
- <div className="bg-white dark:bg-gray-800 shadow p-4 m-2">
+ <div className="p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-gray-300 m-2">
  <DatabaseDetails sandbox={sandbox} onDelete={deleteSandbox} />
  </div>
- <div className="bg-white dark:bg-gray-800 shadow p-4 m-2">
+ <div className="p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-gray-300 m-2">
  <CypherInput graphs={["falkordb", "graph2"]} onSubmit={sendQuery} />
  </div>
  </main>