Skip to content

Commit

Permalink
Merge pull request #342 from FalkorDB/fix-canvas
Browse files Browse the repository at this point in the history 
Fix #342 fix canvas component
  • Loading branch information
@gkorland
gkorland authored Jan 22, 2025
2 parents 2a65193 + 17d8fd8 commit d47f502
Show file tree
Hide file tree
Showing 9 changed files with 197 additions and 105 deletions.
24 changes: 19 additions & 5 deletions app/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
import { TypeAnimation } from "react-type-animation";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { prepareArg } from "../utils";
import { NodeObject } from "react-force-graph-2d";

type PathData = {
nodes: any[]
Expand Down Expand Up @@ -84,6 +85,7 @@ interface Props {
isPathResponse: boolean | undefined
setIsPathResponse: (isPathResponse: boolean | undefined) => void
setData: Dispatch<SetStateAction<GraphData>>
chartRef: any
}

const SUGGESTIONS = [
Expand All @@ -105,7 +107,7 @@ const RemoveLastPath = (messages: Message[]) => {
return messages
}

export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData }: Props) {
export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData, chartRef }: Props) {

// Holds the messages in the chat
const [messages, setMessages] = useState<Message[]>([]);
Expand All @@ -131,8 +133,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
const p = paths.find((path) => [...path.links, ...path.nodes].some((e: any) => e.id === selectedPathId))

if (!p) return

handelSetSelectedPath(p)
handleSetSelectedPath(p)
}, [selectedPathId])

// Scroll to the bottom of the chat on new message
Expand All @@ -153,7 +154,10 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
setPaths([])
}, [isPathResponse])

const handelSetSelectedPath = (p: PathData) => {
const handleSetSelectedPath = (p: PathData) => {
const chart = chartRef.current

if (!chart) return
setSelectedPath(prev => {
if (prev) {
if (isPathResponse && paths.some((path) => [...path.nodes, ...path.links].every((e: any) => [...prev.nodes, ...prev.links].some((e: any) => e.id === e.id)))) {
Expand Down Expand Up @@ -206,6 +210,9 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
});
}
setData({ ...graph.Elements })
setTimeout(() => {
chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => p.nodes.some(node => node.id === n.id));
}, 0)
}

// A function that handles the change event of the url input box
Expand Down Expand Up @@ -262,6 +269,10 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
}

const handleSubmit = async () => {
const chart = chartRef.current

if (!chart) return

setSelectedPath(undefined)

if (!path?.start?.id || !path.end?.id) return
Expand Down Expand Up @@ -297,6 +308,9 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
setPath(undefined)
setIsPathResponse(true)
setData({ ...graph.Elements })
setTimeout(() => {
chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => formattedPaths.some(p => p.nodes.some(node => node.id === n.id)));
}, 0)
}

const getTip = (disabled = false) =>
Expand Down Expand Up @@ -425,7 +439,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
setIsPathResponse(undefined)

}
handelSetSelectedPath(p)
handleSetSelectedPath(p)
}}
>
<p className="font-bold">#{i + 1}</p>
Expand Down
56 changes: 29 additions & 27 deletions app/components/code-graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
import dynamic from 'next/dynamic';
import { Position } from "./graphView";
import { prepareArg } from '../utils';
import { NodeObject } from "react-force-graph-2d";

const GraphView = dynamic(() => import('./graphView'));

Expand Down Expand Up @@ -81,7 +82,7 @@ export function CodeGraph({
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Delete') {
if (selectedObj && selectedObjects.length === 0) return
handelRemove([...selectedObjects.map(obj => obj.id), selectedObj?.id].filter(id => id !== undefined));
handleRemove([...selectedObjects.map(obj => obj.id), selectedObj?.id].filter(id => id !== undefined));
}
};

Expand Down Expand Up @@ -208,38 +209,39 @@ export function CodeGraph({
nodes.forEach((node) => {
node.expand = expand
})

setSelectedObj(undefined)
setData({ ...graph.Elements })
}

const handelSearchSubmit = (node: any) => {
const n = { name: node.properties.name, id: node.id }

let chartNode = graph.Elements.nodes.find(n => n.id == node.id)

if (!chartNode?.visible) {
if (!chartNode) {
chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
} else {
chartNode.visible = true
setCooldownTicks(undefined)
setCooldownTime(1000)
}
graph.visibleLinks(true, [chartNode.id])
}

setSearchNode(n)
setData({ ...graph.Elements })

const handleSearchSubmit = (node: any) => {
const chart = chartRef.current

if (chart) {
chart.centerAt(chartNode.x, chartNode.y, 1000);
const n = { name: node.properties.name, id: node.id }

let chartNode = graph.Elements.nodes.find(n => n.id == node.id)

if (!chartNode?.visible) {
if (!chartNode) {
chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
} else {
chartNode.visible = true
setCooldownTicks(undefined)
setCooldownTime(1000)
}
graph.visibleLinks(true, [chartNode!.id])
setData({ ...graph.Elements })
}

setSearchNode(n)
setTimeout(() => {
chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
}, 0)
}
}

const handelRemove = (ids: number[]) => {
const handleRemove = (ids: number[]) => {
graph.Elements.nodes.forEach(node => {
if (!ids.includes(node.id)) return
node.visible = false
Expand Down Expand Up @@ -272,7 +274,7 @@ export function CodeGraph({
value={searchNode.name}
onValueChange={({ name }) => setSearchNode({ name })}
icon={<Search />}
handleSubmit={handelSearchSubmit}
handleSubmit={handleSearchSubmit}
node={searchNode}
/>
<Labels categories={graph.Categories} onClick={onCategoryClick} />
Expand Down Expand Up @@ -352,10 +354,10 @@ export function CodeGraph({
setPath(path)
setSelectedObj(undefined)
}}
handleRemove={handelRemove}
handleRemove={handleRemove}
position={position}
url={url}
handelExpand={handleExpand}
handleExpand={handleExpand}
parentRef={containerRef}
/>
<GraphView
Expand Down
12 changes: 6 additions & 6 deletions app/components/elementMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ interface Props {
handleRemove: (nodes: number[]) => void;
position: Position | undefined;
url: string;
handelExpand: (nodes: Node[], expand: boolean) => void;
handleExpand: (nodes: Node[], expand: boolean) => void;
parentRef: RefObject<HTMLDivElement>;
}


export default function ElementMenu({ obj, objects, setPath, handleRemove, position, url, handelExpand, parentRef }: Props) {
export default function ElementMenu({ obj, objects, setPath, handleRemove, position, url, handleExpand, parentRef }: Props) {
const [currentObj, setCurrentObj] = useState<Node>();
const [containerWidth, setContainerWidth] = useState(0);

Expand Down Expand Up @@ -68,13 +68,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
</button>
<button
className="p-2"
onClick={() => handelExpand(objects, true)}
onClick={() => handleExpand(objects, true)}
>
<Maximize2 color="white" />
</button>
<button
className="p-2"
onClick={() => handelExpand(objects, false)}
onClick={() => handleExpand(objects, false)}
>
<Minimize2 color="white" />
</button>
Expand Down Expand Up @@ -114,13 +114,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
</button>
<button
className="p-2"
onClick={() => handelExpand([obj], true)}
onClick={() => handleExpand([obj], true)}
>
<Maximize2 color="white" />
</button>
<button
className="p-2"
onClick={() => handelExpand([obj], false)}
onClick={() => handleExpand([obj], false)}
>
<Minimize2 color="white" />
</button>
Expand Down
Loading

0 comments on commit d47f502

Please sign in to comment.