Skip to content

Commit e90b48c

Browse files
Anchel123Anchel123
committed
fix create path
1 parent 6c09607 commit e90b48c

File tree

2 files changed

+57
-21
lines changed

2 files changed

+57
-21
lines changed

‎app/components/Input.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
3333
}, [open])
3434

3535
useEffect(() => {
36+
if (!graph.Id) return
37+
3638
let isLastRequest = true
3739
const timeout = setTimeout(async () => {
3840

@@ -75,7 +77,7 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
7577
clearTimeout(timeout)
7678
isLastRequest = false
7779
}
78-
}, [value])
80+
}, [value, graph.Id])
7981

8082
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
8183
const container = containerRef.current

‎app/components/chat.tsx‎

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ interface Message {
6969
type: MessageTypes;
7070
text?: string;
7171
paths?: { nodes: any[], edges: any[] }[];
72+
graphName?: string;
7273
}
7374

7475
interface Props {
@@ -125,6 +126,11 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
125126

126127
const isSendMessage = messages.some(m => m.type === MessageTypes.Pending) || (messages.some(m => m.text === "Please select a starting point and the end point. Select or press relevant item on the graph") && !messages.some(m => m.type === MessageTypes.Path))
127128

129+
useEffect(() => {
130+
setSelectedPath(undefined)
131+
setIsPathResponse(false)
132+
}, [graph.Id])
133+
128134
useEffect(() => {
129135
const p = paths.find((path) => [...path.edges, ...path.nodes].some((e: any) => e.id === selectedPathId))
130136

@@ -202,14 +208,29 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
202208
})
203209
chart.elements().filter(el => [...p.nodes, ...p.edges].some(e => e.id == el.id())).layout(LAYOUT).run();
204210
} else {
205-
chart.elements().filter(el => [...p.nodes, ...p.edges].some(e => e.id == el.id())).forEach(el => {
206-
if (el.id() == p.nodes[0].id || el.id() == p.nodes[p.nodes.length - 1].id) {
207-
el.removeStyle().style(SELECTED_PATH_NODE_STYLE);
208-
} else if (el.isNode()) {
209-
el.removeStyle().style(PATH_NODE_STYLE);
211+
const elements: any = { nodes: [], edges: [] };
212+
213+
[...p.nodes, ...p.edges].forEach(e => {
214+
let element = chart.elements(`#${e.id}`)
215+
if (element.length === 0) {
216+
debugger
217+
const type = "src_node" in e
218+
e = type ? { ...e, id: e.id.slice(1) } : e
219+
type
220+
? elements.edges.push(e)
221+
: elements.nodes.push(e)
222+
}
223+
})
224+
225+
chart.add(graph.extend(elements))
226+
chart.elements().filter((e) => [...p.nodes, ...p.edges].some((el) => el.id == e.id())).forEach((e) => {
227+
if (e.id() == p.nodes[0].id || e.id() == p.nodes[p.nodes.length - 1].id) {
228+
e.removeStyle().style(SELECTED_PATH_NODE_STYLE);
229+
} else if (e.isNode()) {
230+
e.removeStyle().style(PATH_NODE_STYLE);
210231
}
211-
if (el.isEdge()) {
212-
el.removeStyle().style(SELECTED_PATH_EDGE_STYLE);
232+
if (e.isEdge()) {
233+
e.removeStyle().style(SELECTED_PATH_EDGE_STYLE);
213234
}
214235
}).layout(LAYOUT).run();
215236
}
@@ -329,7 +350,7 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
329350
});
330351
elements.layout(LAYOUT).run()
331352
setPaths(formattedPaths)
332-
setMessages((prev) => [...RemoveLastPath(prev), { type: MessageTypes.PathResponse, paths: formattedPaths }]);
353+
setMessages((prev) => [...RemoveLastPath(prev), { type: MessageTypes.PathResponse, paths: formattedPaths, graphName: graph.Id }]);
333354
setPath(undefined)
334355
setIsPathResponse(true)
335356
}
@@ -433,22 +454,35 @@ export function Chat({ repo, path, setPath, graph, chartRef, selectedPathId, isP
433454
message.paths.map((p, i: number) => (
434455
<button
435456
key={i}
436-
className={cn("flex text-wrap border p-2 gap-2 rounded-md", p.nodes.length === selectedPath?.nodes.length && selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) && "border-[#FF66B3] bg-[#FFF0F7]")}
457+
className={cn(
458+
"flex text-wrap border p-2 gap-2 rounded-md",
459+
p.nodes.length === selectedPath?.nodes.length &&
460+
selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) && "border-[#FF66B3] bg-[#FFF0F7]",
461+
message.graphName !== graph.Id && "opacity-50 bg-gray-200"
462+
)}
463+
title={message.graphName !== graph.Id ? `Move to graph ${message.graphName} to use this path` : undefined}
464+
disabled={message.graphName !== graph.Id}
437465
onClick={() => {
438-
if (p.nodes.length === selectedPath?.nodes.length && selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id))) return
439-
handleSetSelectedPath(p)
440-
setIsPath(true)
466+
if (message.graphName !== graph.Id) {
467+
toast({
468+
title: "Path Disabled",
469+
description: "The path is disabled because it is not from this graph.",
470+
});
471+
return;
472+
}
473+
if (p.nodes.length === selectedPath?.nodes.length &&
474+
selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id))) return;
475+
handleSetSelectedPath(p);
476+
setIsPath(true);
441477
}}
442478
>
443-
<p className="font-bold">#{i}</p>
479+
<p className="font-bold">#{i + 1}</p>
444480
<div className="flex flex-wrap">
445-
{
446-
p.nodes.map((node: any, j: number) => (
447-
<span key={j} className={cn((j === 0 || j === p.nodes.length - 1) && "font-bold")}>
448-
{` - ${node.properties.name}`}
449-
</span>
450-
))
451-
}
481+
{p.nodes.map((node: any, j: number) => (
482+
<span key={j} className={cn((j === 0 || j === p.nodes.length - 1) && "font-bold")}>
483+
{` - ${node.properties.name}`}
484+
</span>
485+
))}
452486
</div>
453487
</button>
454488
))

0 commit comments

Comments
 (0)