Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #342 fix canvas component #342

Merged
merged 10 commits into from
Jan 22, 2025
+197 −105
Merged

Fix #342 fix canvas component #342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
995742f
check for multi edges on create instead per render
Anchel123 Jan 1, 2025
3cf7586
commit
Anchel123 Jan 6, 2025
bde842e
commit
Anchel123 Jan 6, 2025
6efd861
expand only on the seconde click
Anchel123 Jan 8, 2025
9e2cf1f
fix zoom on search and in path
Anchel123 Jan 8, 2025
1737651
commit
Anchel123 Jan 19, 2025
bed88d3
commit
Anchel123 Jan 20, 2025
95518d4
commit
Anchel123 Jan 20, 2025
8e5dc72
fix test errors
Naseem77 Jan 21, 2025
17d8fd8
Remove 'spin' animation from config
gkorland Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions app/components/chat.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading