Skip to content

Commit 21bcf2a

Browse files
swilly22swilly22
authored
Merge pull request #16 from FalkorDB/loading
add loading graph indication
2 parents e86e6b3 + a20cf54 commit 21bcf2a

3 files changed

Lines changed: 86 additions & 48 deletions

File tree

‎app/components/code-graph.tsx‎

Lines changed: 69 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { GraphContext } from "./provider";
1212

1313
import cytoscape from 'cytoscape';
1414
import fcose from 'cytoscape-fcose';
15+
import { Skeleton } from "@/components/ui/skeleton";
1516

1617
const LIMITED_MODE = process.env.NEXT_PUBLIC_MODE?.toLowerCase() === 'limited';
1718

@@ -162,54 +163,74 @@ export function CodeGraph(parmas: { onFetchGraph: (url: string) => void, onFetch
162163
</form>
163164
</header>
164165
<main className="h-full w-full">
165-
<div className="flex flex-row" >
166-
<TooltipProvider>
167-
<Tooltip>
168-
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}><ZoomIn /></TooltipTrigger>
169-
<TooltipContent>
170-
<p>Zoom In</p>
171-
</TooltipContent>
172-
</Tooltip>
173-
<Tooltip>
174-
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}><ZoomOut /></TooltipTrigger>
175-
<TooltipContent>
176-
<p>Zoom Out</p>
177-
</TooltipContent>
178-
</Tooltip>
179-
<Tooltip>
180-
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}><CircleDot /></TooltipTrigger>
181-
<TooltipContent>
182-
<p>Center</p>
183-
</TooltipContent>
184-
</Tooltip>
185-
</TooltipProvider>
186-
</div>
187-
{graph.Id &&
188-
<CytoscapeComponent
189-
cy={(cy) => {
190-
chartRef.current = cy
191-
192-
// Make sure no previous listeners are attached
193-
cy.removeAllListeners();
194-
195-
// Listen to the click event on nodes for expanding the node
196-
cy.on('dbltap', 'node', async function (evt) {
197-
var node: Node = evt.target.json().data;
198-
let elements = await parmas.onFetchNode(node);
199-
//cy.add(elements).layout(LAYOUT).run()
200-
201-
// adjust entire graph.
202-
if (elements.length > 0) {
203-
cy.add(elements);
204-
cy.elements().layout(LAYOUT).run();
205-
}
206-
});
207-
}}
208-
stylesheet={STYLESHEET}
209-
elements={graph.Elements}
210-
layout={LAYOUT}
211-
className="w-full h-full"
212-
/>
166+
{graph.Id ?
167+
(
168+
<>
169+
<div className="flex flex-row" >
170+
<TooltipProvider>
171+
<Tooltip>
172+
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}><ZoomIn /></TooltipTrigger>
173+
<TooltipContent>
174+
<p>Zoom In</p>
175+
</TooltipContent>
176+
</Tooltip>
177+
<Tooltip>
178+
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}><ZoomOut /></TooltipTrigger>
179+
<TooltipContent>
180+
<p>Zoom Out</p>
181+
</TooltipContent>
182+
</Tooltip>
183+
<Tooltip>
184+
<TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}><CircleDot /></TooltipTrigger>
185+
<TooltipContent>
186+
<p>Center</p>
187+
</TooltipContent>
188+
</Tooltip>
189+
</TooltipProvider>
190+
</div>
191+
192+
<CytoscapeComponent
193+
cy={(cy) => {
194+
chartRef.current = cy
195+
196+
// Make sure no previous listeners are attached
197+
cy.removeAllListeners();
198+
199+
// Listen to the click event on nodes for expanding the node
200+
cy.on('dbltap', 'node', async function (evt) {
201+
var node: Node = evt.target.json().data;
202+
let elements = await parmas.onFetchNode(node);
203+
//cy.add(elements).layout(LAYOUT).run()
204+
205+
// adjust entire graph.
206+
if (elements.length > 0) {
207+
cy.add(elements);
208+
cy.elements().layout(LAYOUT).run();
209+
}
210+
});
211+
}}
212+
stylesheet={STYLESHEET}
213+
elements={graph.Elements}
214+
layout={LAYOUT}
215+
className="w-full h-full"
216+
/>
217+
</>
218+
) :
219+
(
220+
<div className="flex flex-col items-center justify-center h-full space-y-4">
221+
<div className="text-gray-600 text-4xl ">
222+
Loading Repository Graph...
223+
</div>
224+
<div className="flex items-center justify-center space-x-4">
225+
<Skeleton className="h-12 w-12 rounded-full bg-gray-600" />
226+
<div className="space-y-2">
227+
<Skeleton className="h-4 w-[250px] bg-gray-600" />
228+
<Skeleton className="h-4 w-[200px] bg-gray-600" />
229+
</div>
230+
</div>
231+
232+
</div>
233+
)
213234
}
214235
</main>
215236
</>

‎app/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export default function Home() {
2020
value = 'https://github.com/falkorDB/falkordb-py';
2121
}
2222

23+
setGraph(Graph.empty())
24+
2325
// Send the user query to the server to fetch a repo graph
2426
fetch('/api/repo', {
2527
method: 'POST',

‎components/ui/skeleton.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { cn } from "@/lib/utils"
2+
3+
function Skeleton({
4+
className,
5+
...props
6+
}: React.HTMLAttributes<HTMLDivElement>) {
7+
return (
8+
<div
9+
className={cn("animate-pulse rounded-md bg-muted", className)}
10+
{...props}
11+
/>
12+
)
13+
}
14+
15+
export { Skeleton }

0 commit comments

Comments
 (0)