diff --git a/app/page.tsx b/app/page.tsx index 48096610..95e5c2e7 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,15 +6,15 @@ import ReactECharts, { EChartsInstance } from 'echarts-for-react'; import { useState, useRef } from 'react'; import { Chat } from './chat'; import { Graph, extractData } from './model'; -import { ZoomIn, ZoomOut } from 'lucide-react'; +import { Github, HomeIcon, ZoomIn, ZoomOut } from 'lucide-react'; import { toast } from '@/components/ui/use-toast'; -import { ToastAction } from '@/components/ui/toast'; +import Link from 'next/link'; export default function Home() { const [url, setURL] = useState('https://github.com/falkorDB/falkordb-py'); const [graph, setGraph] = useState({ id: '', nodes: [], edges: [], categories: [] }); - + const echartRef = useRef(null) const factor = useRef(1) @@ -35,8 +35,25 @@ export default function Home() { toolbox: { show: true, feature: { + // Shows zoom in and zoom out custom buttons + myZoomIn: { + show: true, + title: 'Zoom In', + icon: 'path://M19 11 C19 15.41 15.41 19 11 19 6.58 19 3 15.41 3 11 3 6.58 6.58 3 11 3 15.41 3 19 6.58 19 11 zM21 21 C19.55 19.55 18.09 18.09 16.64 16.64 M11 8 C11 10 11 12 11 14 M8 11 C10 11 12 11 14 11', + onclick: function () { + handleZoomClick(1.1) + } + }, + myZoomOut: { + show: true, + title: 'Zoom Out', + icon: 'path://M19 11 C19 15.41 15.41 19 11 19 6.58 19 3 15.41 3 11 3 6.58 6.58 3 11 3 15.41 3 19 6.58 19 11 zM21 21 C19.55 19.55 18.09 18.09 16.64 16.64 M8 11 C10 11 12 11 14 11', + onclick: function () { + handleZoomClick(0.9) + } + }, restore: {}, - saveAsImage: {} + saveAsImage: {}, } }, series: [{ @@ -46,30 +63,30 @@ export default function Home() { label: { show: true, position: 'inside', - fontSize: 2*currentFactor + fontSize: 2 * currentFactor }, - symbolSize: 10, + symbolSize: 10, edgeSymbol: ['none', 'arrow'], - edgeSymbolSize: 0.8*currentFactor, + edgeSymbolSize: 0.8 * currentFactor, draggable: true, nodes: graph.nodes, edges: graph.edges, categories: graph.categories, force: { - edgeLength: 40, - repulsion: 20, + edgeLength: 40, + repulsion: 20, gravity: 0.2, }, edgeLabel: { - fontSize: 2*currentFactor + fontSize: 2 * currentFactor }, roam: true, autoCurveness: true, lineStyle: { - width: 0.3*currentFactor, + width: 0.3 * currentFactor, opacity: 0.7 }, - // zoom: currentFactor + zoom: currentFactor }] } } @@ -121,6 +138,19 @@ export default function Home() { return (
+
+ + + +

+ Code Graph by FalkorDB +

+ +
@@ -130,19 +160,15 @@ export default function Home() {
-
- - -
{ + onChartReady={(e) => { echartRef.current = e }} onEvents={{ - graphRoam: (params:any) => { - if(params.zoom) { + graphRoam: (params: any) => { + if (params.zoom) { handleZoomClick(params.zoom) } }