From da43b5e8bd6d8956736668a3cc3713086248ba94 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Sun, 14 Apr 2024 10:38:08 +0300 Subject: [PATCH 01/19] add more style --- app/graph/GraphView.tsx | 37 ++++++--- app/graph/query.tsx | 94 +++++++--------------- app/providers.tsx | 10 ++- components/custom/navbar.tsx | 147 +++++++++++++++-------------------- 4 files changed, 122 insertions(+), 166 deletions(-) diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index 2b54a9e3..9fa39933 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -98,17 +98,15 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const [selectedObject, setSelectedObject] = useState(null); - const [isOpen, setIsOpen] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(true); // A reference to the chart container to allowing zooming and editing const chartRef = useRef(null) const dataPanel = useRef(null) useEffect(() => { - if (isOpen) { - dataPanel.current?.expand() - } else dataPanel.current?.collapse() - }, [isOpen]) + chartRef.current?.maxZoom() + }, [chartRef.current]) useImperativeHandle(ref, () => ({ expand: (elements: ElementDefinition[]) => { @@ -121,6 +119,16 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { } })) + const onExpand = () => { + if (dataPanel.current) { + if (dataPanel.current.isCollapsed()) { + dataPanel.current.expand() + } else { + dataPanel.current.collapse() + } + } + } + // Send the user query to the server to expand a node async function onFetchNode(node: NodeDataDefinition) { const result = await fetch(`/api/graph/${graph.Id}/${node.id}`, { @@ -177,7 +185,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { const handleTap = (evt: EventObject) => { const object = evt.target.json().data; setSelectedObject(object); - setIsOpen(true); + dataPanel.current?.expand() } return ( @@ -212,13 +220,22 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { { selectedObject && - } { - isOpen && - + { setIsCollapsed(true) }} + onExpand={() => { setIsCollapsed(false) }} + collapsible + defaultSize={selectedObject ? 20 : 0} + className="bg-gray-100 dark:bg-gray-800" + > {selectedObject && } } diff --git a/app/graph/query.tsx b/app/graph/query.tsx index 5825afdf..789f58aa 100644 --- a/app/graph/query.tsx +++ b/app/graph/query.tsx @@ -54,74 +54,36 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" } return (
-
- - -
-
- (val || val === "") && setQuery(val)} - theme={`${darkmode ? "vs-dark" : "light"}`} - language="cypher" - options={{ - suggest: { - showKeywords: true, - }, - minimap: { enabled: false }, - wordWrap: "on", - lineNumbers: "off", - lineHeight: 40, - fontSize: 30, - }} - /> - - - - - - -

Run Query

- - - - - - - - - - Actions - - {graphName && - - - - Delete graph - - - } - - - - - Are you absolutely sure you? - - Are you absolutely sure you want to delete {graphName}? - - - - Cancel - handleDelete()}>Delete - - - -
+ + (val || val === "") && setQuery(val)} + theme={`${darkmode ? "vs-dark" : "light"}`} + language="cypher" + options={{ + suggest: { + showKeywords: true, + }, + minimap: { enabled: false }, + wordWrap: "on", + lineNumbers: "off", + lineHeight: 40, + fontSize: 30, + }} + /> + + + + + + +

Run Query

+ + + ) } \ No newline at end of file diff --git a/app/providers.tsx b/app/providers.tsx index f95b8421..8e50e461 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -1,12 +1,13 @@ "use client"; -import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; +import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; import { SessionProvider } from "next-auth/react"; import { ThemeProvider } from 'next-themes' import { useEffect, useRef, useState } from "react"; import { ImperativePanelHandle } from "react-resizable-panels"; import Navbar from "@/components/custom/navbar"; import useScreenSize from "./useScreenSize"; +import { ChevronLeft, ChevronRight } from "lucide-react"; export default function NextAuthProvider({ children }: { children: React.ReactNode }) { @@ -25,7 +26,6 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo } }, [isSmallScreen]) - const onExpand = () => { if (navPanel.current) { if (navPanel.current.isCollapsed()) { @@ -51,9 +51,11 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo minSize={panelSize} onCollapse={() => { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}> - + +
- {children} diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index 1d408728..bf288686 100644 --- a/components/custom/navbar.tsx +++ b/components/custom/navbar.tsx @@ -46,7 +46,7 @@ const linksDown: LinkDefinition[] = [ }, ] -export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, onExpand: () => void }) { +export default function Navbar({ collapsed }: { collapsed: boolean }) { const { status } = useSession() const { theme, setTheme, systemTheme } = useTheme() const [mounted, setMounted] = useState(false) @@ -65,97 +65,72 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark") return ( - ) } \ No newline at end of file From 9e246506d2ca272c0dcaa86e512e0146e73bb2ca Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Sun, 14 Apr 2024 11:07:17 +0300 Subject: [PATCH 02/19] fix lint --- app/graph/GraphView.tsx | 28 +++++++++++++--------------- app/graph/query.tsx | 25 +------------------------ app/providers.tsx | 4 ++-- components/custom/navbar.tsx | 23 ++++++++++++----------- 4 files changed, 28 insertions(+), 52 deletions(-) diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index 9fa39933..863c778b 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -224,21 +224,19 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { {!isCollapsed ? : } } - { - { setIsCollapsed(true) }} - onExpand={() => { setIsCollapsed(false) }} - collapsible - defaultSize={selectedObject ? 20 : 0} - className="bg-gray-100 dark:bg-gray-800" - > - {selectedObject && } - - } + { setIsCollapsed(true) }} + onExpand={() => { setIsCollapsed(false) }} + collapsible + defaultSize={selectedObject ? 20 : 0} + className="bg-gray-100 dark:bg-gray-800" + > + {selectedObject && } + ) }); diff --git a/app/graph/query.tsx b/app/graph/query.tsx index 789f58aa..df311960 100644 --- a/app/graph/query.tsx +++ b/app/graph/query.tsx @@ -1,11 +1,7 @@ -import { Button } from "@/components/ui/button"; -import { Label } from "@/components/ui/label"; import { cn } from "@/lib/utils"; import { useState } from "react"; -import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; -import { Menu, Play, Trash2 } from "lucide-react"; +import { Play } 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 { useTheme } from "next-themes"; @@ -33,25 +29,6 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" } onQueryUpdate(new QueryState(query, graphName)) - const handleDelete = () => { - fetch(`/api/graph/${encodeURIComponent(graphName)}`, { - method: 'DELETE', - }).then(res => res.json()).then((data) => { - toast({ - title: "Delete graph", - description: data.message, - }) - setOnDelete(prev => !prev) - setGraphName('') - onDeleteGraph() - }).catch(err => { - toast({ - title: "Error", - description: (err as Error).message, - }) - }) - } - return (
{ setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}> - diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index bf288686..18ffff47 100644 --- a/components/custom/navbar.tsx +++ b/components/custom/navbar.tsx @@ -1,16 +1,14 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Activity, Info, LogOut, Menu, Settings, Waypoints } from "lucide-react"; +import { Activity, Info, LogOut, Waypoints } from "lucide-react"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useEffect, useState } from "react"; import { useTheme } from "next-themes"; import { usePathname } from "next/navigation"; import { cn } from "@/lib/utils" -import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"; import { Switch } from "../ui/switch"; import { Label } from "../ui/label"; import GithubMark from "./GithubMark"; -import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu"; export interface LinkDefinition { name: string, @@ -65,7 +63,7 @@ export default function Navbar({ collapsed }: { collapsed: boolean }) { const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark") return ( -