From 56f6bf00d82ea26b7fae4b34df85ea3055f1d85d Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Mon, 8 Jan 2024 11:04:45 +0200
Subject: [PATCH 1/2] add title

---
 app/page.tsx | 60 ++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 48096610..dcecd695 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<Graph>({ id: '', nodes: [], edges: [], categories: [] });
-  
+
   const echartRef = useRef<EChartsInstance | null>(null)
   const factor = useRef<number>(1)
 
@@ -36,8 +36,29 @@ export default function Home() {
         show: true,
         feature: {
           restore: {},
-          saveAsImage: {}
+          saveAsImage: {},
+
+          // Shows zoom in and zoom out custom buttons
+          dataZoom: {
+            show: true,
+            title: {
+              zoom: 'Zoom-In',
+              back: 'Zoom-Out'
+            },
+            onclick: function (chart: any, option: any, feature: any) {
+              if (feature.title.zoom == 'Zoom-In') {
+                handleZoomClick(1.1)
+              } else {
+                handleZoomClick(0.9)
+              }
+            },
+            yAxisIndex: false
+          },
+
+
         }
+        
+
       },
       series: [{
         type: 'graph',
@@ -46,9 +67,9 @@ 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,
         draggable: true,
@@ -56,12 +77,12 @@ export default function Home() {
         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,
@@ -69,7 +90,7 @@ export default function Home() {
           width: 0.3*currentFactor,
           opacity: 0.7
         },
-        // zoom: currentFactor
+        zoom: currentFactor
       }]
     }
   }
@@ -121,6 +142,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">
@@ -137,12 +171,12 @@ export default function Home() {
             <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)
                   }
                 }

From 4f54f7fc68c38e7307c12a0cfc05065d704609cd Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Mon, 8 Jan 2024 12:01:51 +0200
Subject: [PATCH 2/2] add zoom buttns to toolbox?

---
 app/page.tsx | 44 ++++++++++++++++++--------------------------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index dcecd695..95e5c2e7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -35,30 +35,26 @@ export default function Home() {
       toolbox: {
         show: true,
         feature: {
-          restore: {},
-          saveAsImage: {},
-
           // Shows zoom in and zoom out custom buttons
-          dataZoom: {
+          myZoomIn: {
             show: true,
-            title: {
-              zoom: 'Zoom-In',
-              back: 'Zoom-Out'
-            },
-            onclick: function (chart: any, option: any, feature: any) {
-              if (feature.title.zoom == 'Zoom-In') {
-                handleZoomClick(1.1)
-              } else {
-                handleZoomClick(0.9)
-              }
-            },
-            yAxisIndex: false
+            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: {},
         }
-        
-
       },
       series: [{
         type: 'graph',
@@ -71,7 +67,7 @@ export default function Home() {
         },
         symbolSize: 10,
         edgeSymbol: ['none', 'arrow'],
-        edgeSymbolSize: 0.8*currentFactor,
+        edgeSymbolSize: 0.8 * currentFactor,
         draggable: true,
         nodes: graph.nodes,
         edges: graph.edges,
@@ -87,7 +83,7 @@ export default function Home() {
         roam: true,
         autoCurveness: true,
         lineStyle: {
-          width: 0.3*currentFactor,
+          width: 0.3 * currentFactor,
           opacity: 0.7
         },
         zoom: currentFactor
@@ -164,10 +160,6 @@ 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%' }}