Merge pull request #3 from FalkorDB/buttons

Buttons
FalkorDB · Jan 8, 2024 · 0de98f6 · 0de98f6
2 parents 698f307 + 4f54f7f
commit 0de98f6
Showing 1 changed file with 45 additions and 19 deletions.
diff --git 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<Graph>({ id: '', nodes: [], edges: [], categories: [] });
-  
+
   const echartRef = useRef<EChartsInstance | null>(null)
   const factor = useRef<number>(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 (
     <main className="h-screen p-8">
+      <header className="flex items-center justify-between p-4 border">
+        <Link href="https://www.falkordb.com" target='_blank'>
+          <HomeIcon className="h-6 w-6" />
+        </Link>
+        <h1 className='font-extrabold'>
+          Code Graph by <Link href="https://www.falkordb.com">FalkorDB</Link>
+        </h1>
+        <nav className="space-x-4">
+          <Link className="text-gray-600 hover:text-gray-900" href="https://github.com/FalkorDB/code-graph" target='_blank'>
+            <Github />
+          </Link>
+        </nav>
+      </header>
       <div className="w-full flex flex-row h-full">
         <section className="flex flex-col w-4/6 border">
           <header className="border p-4">
@@ -130,19 +160,15 @@ export default function Home() {
             </form>
           </header>
           <main className="h-full">
-            <div className="flex flex-row" >
-              <Button className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300" variant="ghost" onClick={() => handleZoomClick(1.1)}><ZoomIn /></Button>
-              <Button className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300" variant="ghost" onClick={() => handleZoomClick(0.9)}><ZoomOut /></Button>
-            </div>
             <ReactECharts
               option={getOptions(graph)}
               style={{ height: '100%', width: '100%' }}
-              onChartReady={(e) => { 
+              onChartReady={(e) => {
                 echartRef.current = e
               }}
               onEvents={{
-                graphRoam: (params:any) => {
-                  if(params.zoom) {
+                graphRoam: (params: any) => {
+                  if (params.zoom) {
                     handleZoomClick(params.zoom)
                   }
                 }