Skip to content

Commit cacb58d

Browse files
Anchel123Anchel123
authored
Merge pull request #245 from FalkorDB/fix-collapsed
Fix # 244 collapse don't work as expected
2 parents 02d5fc6 + 8369d88 commit cacb58d

File tree

4 files changed

+166
-165
lines changed

4 files changed

+166
-165
lines changed

‎app/components/code-graph.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import Combobox from "./combobox";
1313
import { toast } from '@/components/ui/use-toast';
1414
import { Path, PathNode } from '../page';
1515
import Input from './Input';
16-
import CommitList from './commitList';
16+
// import CommitList from './commitList';
1717
import { Checkbox } from '@/components/ui/checkbox';
1818

1919
interface Props {
@@ -263,7 +263,7 @@ export function CodeGraph({
263263
const type = "category" in element.data
264264

265265
if (element.data.expand) {
266-
deleteNeighbors([element.data], chart)
266+
deleteNeighbors([element.data] as Node[], chart)
267267
}
268268

269269
graph.Elements.splice(index, 1);
@@ -316,8 +316,6 @@ export function CodeGraph({
316316
deleteNeighbors([node], chart);
317317
}
318318

319-
const element = chart.elements(`#${node.id}`)
320-
element.data('expand', expand)
321319
graphNode.data.expand = expand
322320

323321
setSelectedObj(undefined)
@@ -344,20 +342,21 @@ export function CodeGraph({
344342
chart.add(elements);
345343
chart.elements().layout(LAYOUT).run();
346344
} else {
347-
const deleteNodes = nodes.filter(n => n.expand === true)
345+
const deleteNodes = graph.Elements.filter(n => n.data.expand === true && nodes.some(e => e.id === n.data.id))
346+
347+
debugger
348+
348349
if (deleteNodes.length > 0) {
349-
deleteNeighbors(deleteNodes, chart);
350+
deleteNeighbors(deleteNodes.map(n => n.data) as Node[], chart);
350351
chart.elements().layout(LAYOUT).run();
351352
}
352353
}
353354

354355
nodes.forEach((node) => {
355356
const graphNode = graph.Elements.find(e => e.data.id === node.id)
356-
const element = chart.elements(`#${node.id}`)
357357

358358
if (!graphNode) return
359359

360-
element.data("expand", expand)
361360
graphNode.data.expand = expand
362361
})
363362

@@ -481,11 +480,7 @@ export function CodeGraph({
481480
position={position}
482481
url={url}
483482
handelExpand={(nodes, expand) => {
484-
if (nodes && expand !== undefined) {
485-
handleExpand(nodes, expand)
486-
} else {
487-
handleDoubleTap()
488-
}
483+
handleExpand(nodes, expand)
489484
}}
490485
parentWidth={containerWidth}
491486
/>

‎app/components/commitList.tsx‎

Lines changed: 144 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,144 @@
1-
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
2-
import { toast } from "@/components/ui/use-toast"
3-
import { cn } from "@/lib/utils"
4-
import cytoscape from "cytoscape"
5-
import { ChevronLeft, ChevronRight } from "lucide-react"
6-
import { Dispatch, MutableRefObject, SetStateAction, useState } from "react"
7-
import { Graph } from "./model"
8-
import { LAYOUT } from "./code-graph"
9-
10-
interface Props {
11-
commits: any[]
12-
currentCommit: number
13-
setCurrentCommit: Dispatch<SetStateAction<number>>
14-
commitIndex: number
15-
setCommitIndex: Dispatch<SetStateAction<number>>
16-
graph: Graph,
17-
chartRef: MutableRefObject<cytoscape.Core | null>
18-
}
19-
20-
const COMMIT_LIMIT = 7
21-
22-
export default function CommitList({ commitIndex, commits, currentCommit, setCommitIndex, setCurrentCommit, graph, chartRef }: Props) {
23-
24-
const [commitChanges, setCommitChanges] = useState<any>()
25-
26-
const handelCommitChange = async (commit: any) => {
27-
const chart = chartRef.current
28-
29-
if (!chart) return
30-
31-
const result = await fetch(`api/repo/${graph.Id}/commit`, {
32-
method: 'POST',
33-
})
34-
35-
if (!result.ok) {
36-
toast({
37-
title: "Uh oh! Something went wrong",
38-
description: (await result.text()),
39-
})
40-
return
41-
}
42-
43-
const json = await result.json()
44-
45-
json.result.deletions.nodes.forEach((e: any) => {
46-
chart.remove(`#${e.id}`)
47-
graph.NodesMap.delete(e.id)
48-
graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
49-
})
50-
51-
json.result.deletions.edges.forEach((e: any) => {
52-
chart.remove(`#_${e.id}`)
53-
graph.EdgesMap.delete(e.id)
54-
graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
55-
})
56-
57-
const additionsIds = chart.add(graph.extend(json.result.additions))
58-
.filter((e) => e.isNode()).style({ "border-color": "pink", "border-width": 2, "border-opacity": 1 })
59-
.map((e) => e.id())!
60-
61-
const g = Graph.empty()
62-
g.extend(json.result.modifications)
63-
64-
const modifiedIds = g.Elements.map((e) => {
65-
const graphElement = graph.Elements.find((el) => el.data.id === e.data.id)
66-
graphElement.data = e.data
67-
68-
if ("category" in e.data) {
69-
chart.$(`#${e.data.id}`).data(e.data).style({ "border-color": "blue", "border-width": 2, "border-opacity": 1 })
70-
}
71-
72-
return e.data.id
73-
})
74-
75-
chart.layout(LAYOUT).run()
76-
77-
setCommitChanges({ additionsIds, modifiedIds })
78-
setCurrentCommit(commit.hash)
79-
}
80-
81-
return (
82-
<footer className='bg-gray-200 flex border border-gray-300 rounded-b-md'>
83-
<button
84-
className='p-4 border-r border-gray-300'
85-
onClick={() => {
86-
setCommitIndex(prev => prev - 1)
87-
}}
88-
disabled={commitIndex - COMMIT_LIMIT === 0}
89-
>
90-
{
91-
commitIndex - COMMIT_LIMIT !== 0 ?
92-
<ChevronLeft />
93-
: <div className='h-6 w-6' />
94-
}
95-
</button>
96-
<ul className='w-1 grow flex p-3 justify-between gap-4'>
97-
{
98-
commits.slice(commitIndex - COMMIT_LIMIT, commitIndex).map((commit: any) => {
99-
const date = new Date(commit.date * 1000)
100-
const month = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}`
101-
const hour = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
102-
return (
103-
<HoverCard
104-
key={commit.hash}
105-
>
106-
<HoverCardTrigger asChild>
107-
<li
108-
className={cn(currentCommit === commit.hash && "bg-white", "grow p-1 rounded-md")}
109-
>
110-
<button
111-
className='w-full flex items-center justify-center gap-2'
112-
onClick={() => handelCommitChange(commit)}
113-
>
114-
<p title={month}>{month}</p>
115-
<p className='text-gray-400' title='hour'>{hour}</p>
116-
</button>
117-
</li>
118-
</HoverCardTrigger>
119-
<HoverCardContent className='bg-[#F9F9F9] flex flex-col gap-2 p-4 w-fit max-w-[70%]'>
120-
<h1 className='text-bold'>{commit.author}</h1>
121-
<p>{commit.message}</p>
122-
<p className='text-[#7D7D7D] truncate' title={commit.hash}>{commit.hash}</p>
123-
</HoverCardContent>
124-
</HoverCard>
125-
)
126-
})
127-
}
128-
</ul>
129-
<button
130-
className='p-4 border-l border-gray-300'
131-
onClick={() => {
132-
setCommitIndex(prev => prev + 1)
133-
}}
134-
disabled={commitIndex === commits.length}
135-
>
136-
{
137-
commitIndex !== commits.length ?
138-
<ChevronRight />
139-
: <div className='h-6 w-6' />
140-
}
141-
</button>
142-
</footer>
143-
)
144-
}
1+
// import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
2+
// import { toast } from "@/components/ui/use-toast"
3+
// import { cn } from "@/lib/utils"
4+
// import cytoscape from "cytoscape"
5+
// import { ChevronLeft, ChevronRight } from "lucide-react"
6+
// import { Dispatch, MutableRefObject, SetStateAction, useState } from "react"
7+
// import { Graph } from "./model"
8+
// import { LAYOUT } from "./code-graph"
9+
10+
// interface Props {
11+
// commits: any[]
12+
// currentCommit: number
13+
// setCurrentCommit: Dispatch<SetStateAction<number>>
14+
// commitIndex: number
15+
// setCommitIndex: Dispatch<SetStateAction<number>>
16+
// graph: Graph,
17+
// chartRef: MutableRefObject<cytoscape.Core | null>
18+
// }
19+
20+
// const COMMIT_LIMIT = 7
21+
22+
// export default function CommitList({ commitIndex, commits, currentCommit, setCommitIndex, setCurrentCommit, graph, chartRef }: Props) {
23+
24+
// const [commitChanges, setCommitChanges] = useState<any>()
25+
26+
// const handelCommitChange = async (commit: any) => {
27+
// const chart = chartRef.current
28+
29+
// if (!chart) return
30+
31+
// const result = await fetch(`api/repo/${graph.Id}/?type=switchCommit`, {
32+
// method: 'POST',
33+
// })
34+
35+
// if (!result.ok) {
36+
// toast({
37+
// title: "Uh oh! Something went wrong",
38+
// description: (await result.text()),
39+
// })
40+
// return
41+
// }
42+
43+
// const json = await result.json()
44+
45+
// json.result.deletions.nodes.forEach((e: any) => {
46+
// chart.remove(`#${e.id}`)
47+
// graph.NodesMap.delete(e.id)
48+
// graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
49+
// })
50+
51+
// json.result.deletions.edges.forEach((e: any) => {
52+
// chart.remove(`#_${e.id}`)
53+
// graph.EdgesMap.delete(e.id)
54+
// graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
55+
// })
56+
57+
// const additionsIds = chart.add(graph.extend(json.result.additions))
58+
// .filter((e) => e.isNode()).style({ "border-color": "pink", "border-width": 2, "border-opacity": 1 })
59+
// .map((e) => e.id())!
60+
61+
// const g = Graph.empty()
62+
// g.extend(json.result.modifications)
63+
64+
// const modifiedIds = g.Elements.map((e) => {
65+
// const graphElement = graph.Elements.find((el) => el.data.id === e.data.id)
66+
// graphElement.data = e.data
67+
68+
// if ("category" in e.data) {
69+
// chart.$(`#${e.data.id}`).data(e.data).style({ "border-color": "blue", "border-width": 2, "border-opacity": 1 })
70+
// }
71+
72+
// return e.data.id
73+
// })
74+
75+
// chart.layout(LAYOUT).run()
76+
77+
// setCommitChanges({ additionsIds, modifiedIds })
78+
// setCurrentCommit(commit.hash)
79+
// }
80+
81+
// return (
82+
// <footer className='bg-gray-200 flex border border-gray-300 rounded-b-md'>
83+
// <button
84+
// className='p-4 border-r border-gray-300'
85+
// onClick={() => {
86+
// setCommitIndex(prev => prev - 1)
87+
// }}
88+
// disabled={commitIndex - COMMIT_LIMIT === 0}
89+
// >
90+
// {
91+
// commitIndex - COMMIT_LIMIT !== 0 ?
92+
// <ChevronLeft />
93+
// : <div className='h-6 w-6' />
94+
// }
95+
// </button>
96+
// <ul className='w-1 grow flex p-3 justify-between gap-4'>
97+
// {
98+
// commits.slice(commitIndex - COMMIT_LIMIT, commitIndex).map((commit: any) => {
99+
// const date = new Date(commit.date * 1000)
100+
// const month = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}`
101+
// const hour = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
102+
// return (
103+
// <HoverCard
104+
// key={commit.hash}
105+
// >
106+
// <HoverCardTrigger asChild>
107+
// <li
108+
// className={cn(currentCommit === commit.hash && "bg-white", "grow p-1 rounded-md")}
109+
// >
110+
// <button
111+
// className='w-full flex items-center justify-center gap-2'
112+
// onClick={() => handelCommitChange(commit)}
113+
// >
114+
// <p title={month}>{month}</p>
115+
// <p className='text-gray-400' title='hour'>{hour}</p>
116+
// </button>
117+
// </li>
118+
// </HoverCardTrigger>
119+
// <HoverCardContent className='bg-[#F9F9F9] flex flex-col gap-2 p-4 w-fit max-w-[70%]'>
120+
// <h1 className='text-bold'>{commit.author}</h1>
121+
// <p>{commit.message}</p>
122+
// <p className='text-[#7D7D7D] truncate' title={commit.hash}>{commit.hash}</p>
123+
// </HoverCardContent>
124+
// </HoverCard>
125+
// )
126+
// })
127+
// }
128+
// </ul>
129+
// <button
130+
// className='p-4 border-l border-gray-300'
131+
// onClick={() => {
132+
// setCommitIndex(prev => prev + 1)
133+
// }}
134+
// disabled={commitIndex === commits.length}
135+
// >
136+
// {
137+
// commitIndex !== commits.length ?
138+
// <ChevronRight />
139+
// : <div className='h-6 w-6' />
140+
// }
141+
// </button>
142+
// </footer>
143+
// )
144+
// }

‎app/components/elementMenu.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface Props {
1414
handelRemove: (nodes: number[]) => void;
1515
position: Position | undefined;
1616
url: string;
17-
handelExpand: (nodes?: Node[], expand?: boolean) => void;
17+
handelExpand: (nodes: Node[], expand: boolean) => void;
1818
parentWidth: number;
1919
}
2020

@@ -114,13 +114,15 @@ export default function ElementMenu({ obj, objects, setPath, handelRemove, posit
114114
</button>
115115
<button
116116
className="p-2"
117-
onClick={() => handelExpand()}
117+
onClick={() => handelExpand([obj], true)}
118118
>
119-
{
120-
obj.expand ?
121-
<Minimize2 color="white" />
122-
: <Maximize2 color="white" />
123-
}
119+
<Maximize2 color="white" />
120+
</button>
121+
<button
122+
className="p-2"
123+
onClick={() => handelExpand([obj], false)}
124+
>
125+
<Minimize2 color="white" />
124126
</button>
125127
</>
126128
}

0 commit comments

Comments
 (0)