Skip to content

Commit d47f502

Browse files
gkorlandgkorland
authored
Merge pull request #342 from FalkorDB/fix-canvas
Fix #342 fix canvas component
2 parents 2a65193 + 17d8fd8 commit d47f502

9 files changed

Lines changed: 197 additions & 105 deletions

File tree

‎app/components/chat.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
99
import { TypeAnimation } from "react-type-animation";
1010
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
1111
import { prepareArg } from "../utils";
12+
import { NodeObject } from "react-force-graph-2d";
1213

1314
type PathData = {
1415
nodes: any[]
@@ -84,6 +85,7 @@ interface Props {
8485
isPathResponse: boolean | undefined
8586
setIsPathResponse: (isPathResponse: boolean | undefined) => void
8687
setData: Dispatch<SetStateAction<GraphData>>
88+
chartRef: any
8789
}
8890

8991
const SUGGESTIONS = [
@@ -105,7 +107,7 @@ const RemoveLastPath = (messages: Message[]) => {
105107
return messages
106108
}
107109

108-
export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData }: Props) {
110+
export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData, chartRef }: Props) {
109111

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

133135
if (!p) return
134-
135-
handelSetSelectedPath(p)
136+
handleSetSelectedPath(p)
136137
}, [selectedPathId])
137138

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

156-
const handelSetSelectedPath = (p: PathData) => {
157+
const handleSetSelectedPath = (p: PathData) => {
158+
const chart = chartRef.current
159+
160+
if (!chart) return
157161
setSelectedPath(prev => {
158162
if (prev) {
159163
if (isPathResponse && paths.some((path) => [...path.nodes, ...path.links].every((e: any) => [...prev.nodes, ...prev.links].some((e: any) => e.id === e.id)))) {
@@ -206,6 +210,9 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
206210
});
207211
}
208212
setData({ ...graph.Elements })
213+
setTimeout(() => {
214+
chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => p.nodes.some(node => node.id === n.id));
215+
}, 0)
209216
}
210217

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

264271
const handleSubmit = async () => {
272+
const chart = chartRef.current
273+
274+
if (!chart) return
275+
265276
setSelectedPath(undefined)
266277

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

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

427441
}
428-
handelSetSelectedPath(p)
442+
handleSetSelectedPath(p)
429443
}}
430444
>
431445
<p className="font-bold">#{i + 1}</p>

‎app/components/code-graph.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
1414
import dynamic from 'next/dynamic';
1515
import { Position } from "./graphView";
1616
import { prepareArg } from '../utils';
17+
import { NodeObject } from "react-force-graph-2d";
1718

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

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

@@ -208,38 +209,39 @@ export function CodeGraph({
208209
nodes.forEach((node) => {
209210
node.expand = expand
210211
})
211-
212+
212213
setSelectedObj(undefined)
213214
setData({ ...graph.Elements })
214215
}
215216

216-
const handelSearchSubmit = (node: any) => {
217-
const n = { name: node.properties.name, id: node.id }
218-
219-
let chartNode = graph.Elements.nodes.find(n => n.id == node.id)
220-
221-
if (!chartNode?.visible) {
222-
if (!chartNode) {
223-
chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
224-
} else {
225-
chartNode.visible = true
226-
setCooldownTicks(undefined)
227-
setCooldownTime(1000)
228-
}
229-
graph.visibleLinks(true, [chartNode.id])
230-
}
231-
232-
setSearchNode(n)
233-
setData({ ...graph.Elements })
234-
217+
const handleSearchSubmit = (node: any) => {
235218
const chart = chartRef.current
236-
219+
237220
if (chart) {
238-
chart.centerAt(chartNode.x, chartNode.y, 1000);
221+
const n = { name: node.properties.name, id: node.id }
222+
223+
let chartNode = graph.Elements.nodes.find(n => n.id == node.id)
224+
225+
if (!chartNode?.visible) {
226+
if (!chartNode) {
227+
chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
228+
} else {
229+
chartNode.visible = true
230+
setCooldownTicks(undefined)
231+
setCooldownTime(1000)
232+
}
233+
graph.visibleLinks(true, [chartNode!.id])
234+
setData({ ...graph.Elements })
235+
}
236+
237+
setSearchNode(n)
238+
setTimeout(() => {
239+
chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
240+
}, 0)
239241
}
240242
}
241243

242-
const handelRemove = (ids: number[]) => {
244+
const handleRemove = (ids: number[]) => {
243245
graph.Elements.nodes.forEach(node => {
244246
if (!ids.includes(node.id)) return
245247
node.visible = false
@@ -272,7 +274,7 @@ export function CodeGraph({
272274
value={searchNode.name}
273275
onValueChange={({ name }) => setSearchNode({ name })}
274276
icon={<Search />}
275-
handleSubmit={handelSearchSubmit}
277+
handleSubmit={handleSearchSubmit}
276278
node={searchNode}
277279
/>
278280
<Labels categories={graph.Categories} onClick={onCategoryClick} />
@@ -352,10 +354,10 @@ export function CodeGraph({
352354
setPath(path)
353355
setSelectedObj(undefined)
354356
}}
355-
handleRemove={handelRemove}
357+
handleRemove={handleRemove}
356358
position={position}
357359
url={url}
358-
handelExpand={handleExpand}
360+
handleExpand={handleExpand}
359361
parentRef={containerRef}
360362
/>
361363
<GraphView

‎app/components/elementMenu.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ interface Props {
1414
handleRemove: (nodes: number[]) => void;
1515
position: Position | undefined;
1616
url: string;
17-
handelExpand: (nodes: Node[], expand: boolean) => void;
17+
handleExpand: (nodes: Node[], expand: boolean) => void;
1818
parentRef: RefObject<HTMLDivElement>;
1919
}
2020

2121

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

@@ -68,13 +68,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
6868
</button>
6969
<button
7070
className="p-2"
71-
onClick={() => handelExpand(objects, true)}
71+
onClick={() => handleExpand(objects, true)}
7272
>
7373
<Maximize2 color="white" />
7474
</button>
7575
<button
7676
className="p-2"
77-
onClick={() => handelExpand(objects, false)}
77+
onClick={() => handleExpand(objects, false)}
7878
>
7979
<Minimize2 color="white" />
8080
</button>
@@ -114,13 +114,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
114114
</button>
115115
<button
116116
className="p-2"
117-
onClick={() => handelExpand([obj], true)}
117+
onClick={() => handleExpand([obj], true)}
118118
>
119119
<Maximize2 color="white" />
120120
</button>
121121
<button
122122
className="p-2"
123-
onClick={() => handelExpand([obj], false)}
123+
onClick={() => handleExpand([obj], false)}
124124
>
125125
<Minimize2 color="white" />
126126
</button>

0 commit comments

Comments
 (0)