From bdafde987bfe1033202354b91463650f4bd04125 Mon Sep 17 00:00:00 2001
From: aamanrebello <aamanrebello@gmail.com>
Date: Sun, 12 Jan 2025 14:15:13 +0000
Subject: [PATCH] Introduce zoom control with tentative UI

---
 calm-visualizer/src/App.tsx                   | 31 ++++++++++---------
 .../cytoscape-renderer/CytoscapeRenderer.tsx  | 22 +++++++++++--
 .../src/components/navbar/Navbar.css          |  8 +++++
 .../src/components/navbar/Navbar.tsx          | 28 +++++++++++++++--
 .../src/components/zoom-context.provider.tsx  | 28 +++++++++++++++++
 5 files changed, 98 insertions(+), 19 deletions(-)
 create mode 100644 calm-visualizer/src/components/navbar/Navbar.css
 create mode 100644 calm-visualizer/src/components/zoom-context.provider.tsx

diff --git a/calm-visualizer/src/App.tsx b/calm-visualizer/src/App.tsx
index e397a430..01155cb0 100644
--- a/calm-visualizer/src/App.tsx
+++ b/calm-visualizer/src/App.tsx
@@ -4,6 +4,7 @@ import Drawer from './components/drawer/Drawer';
 import Navbar from './components/navbar/Navbar';
 import { CALMInstantiation } from '../../shared/src/types';
 import React from 'react';
+import { ZoomProvider } from './components/zoom-context.provider';
 
 function App() {
     const [title, setTitle] = useState<string | undefined>(undefined);
@@ -21,20 +22,22 @@ function App() {
     }
 
     return (
-        <div className="h-screen flex flex-col">
-            <Navbar
-                handleUpload={handleFile}
-                isGraphRendered={instance ? true : false}
-                toggleNodeDesc={() => setNodeDescActive((isNodeDescActive) => !isNodeDescActive)}
-                toggleConnectionDesc={() => setConDescActive((isConDescActive) => !isConDescActive)}
-            />
-            <Drawer
-                isNodeDescActive={isNodeDescActive}
-                isConDescActive={isConDescActive}
-                calmInstance={instance}
-                title={title}
-            />
-        </div>
+        <ZoomProvider>
+            <div className="h-screen flex flex-col">
+                <Navbar
+                    handleUpload={handleFile}
+                    isGraphRendered={instance ? true : false}
+                    toggleNodeDesc={() => setNodeDescActive((isNodeDescActive) => !isNodeDescActive)}
+                    toggleConnectionDesc={() => setConDescActive((isConDescActive) => !isConDescActive)}
+                />
+                <Drawer
+                    isNodeDescActive={isNodeDescActive}
+                    isConDescActive={isConDescActive}
+                    calmInstance={instance}
+                    title={title}
+                />
+            </div>
+        </ZoomProvider>
     );
 }
 
diff --git a/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx b/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx
index 87b7bf9d..54f84ca6 100644
--- a/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx
+++ b/calm-visualizer/src/components/cytoscape-renderer/CytoscapeRenderer.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import './cytoscape.css';
-import { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import cytoscape, { Core, EdgeSingular, NodeSingular } from 'cytoscape';
 import nodeHtmlLabel from 'cytoscape-node-html-label';
 import nodeEdgeHtmlLabel from 'cytoscape-node-edge-html-label';
@@ -8,6 +8,7 @@ import coseBilkent from 'cytoscape-cose-bilkent';
 import expandCollapse from 'cytoscape-expand-collapse';
 import fcose from 'cytoscape-fcose';
 import Sidebar from '../sidebar/Sidebar';
+import { ZoomContext } from '../zoom-context.provider';
 
 //Make some information available on tooltip hover
 
@@ -86,11 +87,17 @@ const CytoscapeRenderer = ({
 }: Props) => {
     const cyRef = useRef<HTMLDivElement>(null);
     const [cy, setCy] = useState<Core | null>(null);
+    const { zoomLevel, updateZoom } = useContext(ZoomContext);
     const [selectedNode, setSelectedNode] = useState<Node['data'] | null>(null);
     const [selectedEdge, setSelectedEdge] = useState<Edge['data'] | null>(null);
 
     useEffect(() => {
         if (cy) {
+            //Ensure cytoscape zoom and context state are synchronised
+            if(cy.zoom() !== zoomLevel) {
+                updateZoom(cy.zoom());
+            }
+
             (cy as any).nodeHtmlLabel([
                 {
                     query: '.node',
@@ -124,6 +131,8 @@ const CytoscapeRenderer = ({
                 setSelectedEdge(edge?.data()); // Update state with the clicked node's data
             });
 
+            cy.on('zoom', () => updateZoom(cy.zoom()));
+
             return () => {
                 cy.destroy();
             };
@@ -166,11 +175,18 @@ const CytoscapeRenderer = ({
         );
     }, [nodes, edges]); // Re-render on cy, nodes or edges change
 
+    useEffect(() => {
+        //Ensure cytoscape zoom and context state are synchronised
+        if(cy?.zoom() !== zoomLevel) {
+            cy?.zoom(zoomLevel);
+        }
+    }, [zoomLevel])
+
     return (
         <div className="relative flex m-auto border">
             {title && (
-                <div className="graph-title absolute m-5 bg-primary-content shadow-md">
-                    <span className="text-m">Architecture: {title}</span>
+                <div className="graph-title absolute m-5 bg-gray-100 shadow-md">
+                    <span className="text-m">Architecture: {title}</span>    
                 </div>
             )}
             <div
diff --git a/calm-visualizer/src/components/navbar/Navbar.css b/calm-visualizer/src/components/navbar/Navbar.css
new file mode 100644
index 00000000..00848c1f
--- /dev/null
+++ b/calm-visualizer/src/components/navbar/Navbar.css
@@ -0,0 +1,8 @@
+.zoom-button {
+    border: solid;
+    border-width: 1px;
+}
+
+.zoom-button:hover {
+    background-color: aliceblue;
+}
\ No newline at end of file
diff --git a/calm-visualizer/src/components/navbar/Navbar.tsx b/calm-visualizer/src/components/navbar/Navbar.tsx
index 43c5dc86..e8995c96 100644
--- a/calm-visualizer/src/components/navbar/Navbar.tsx
+++ b/calm-visualizer/src/components/navbar/Navbar.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import './Navbar.css'
+import React, { useContext } from 'react';
+import { ZoomContext } from '../zoom-context.provider';
 
 interface NavbarProps {
     handleUpload: (instanceFile: File) => void;
@@ -16,6 +18,23 @@ function Navbar({
     const upload = (file: File) => {
         handleUpload(file);
     };
+    const { zoomLevel, updateZoom } = useContext(ZoomContext);
+
+    function zoomIn() {
+        //Obtain percentage as integer
+        const currentPercentageZoom = Math.round(zoomLevel*100);
+        //Add 10% to the zoom or round to upper 10% interval
+        const newPercentageZoom = Math.floor(currentPercentageZoom/10)*10 + 10;
+        updateZoom(newPercentageZoom/100);
+    }
+
+    function zoomOut() {
+        //Obtain percentage as integer
+        const currentPercentageZoom = Math.round(zoomLevel*100);
+        //Subtract 10% from the zoom or round to lower 10% interval - but not less than zero
+        const newPercentageZoom = Math.max(Math.ceil(currentPercentageZoom/10)*10 - 10, 0);
+        updateZoom(newPercentageZoom/100);
+    }
 
     return (
         <div className="navbar bg-base-300">
@@ -51,8 +70,13 @@ function Navbar({
 
                 {isGraphRendered && (
                     <>
-                        <div className="divider divider-horizontal"></div>
+                        <div className="divider divider-horizontal"></div>  
                         <div className="toggles menu-horizontal">
+                            <div className="label">
+                                <span className="label label-text">Zoom: {(zoomLevel*100).toFixed(0)}%</span>
+                                <button className='ms-1 ps-2 pe-2 zoom-button' onClick={zoomIn}>+</button>
+                                <button className='ms-1 ps-2 pe-2 zoom-button' onClick={zoomOut}>-</button>
+                            </div> 
                             <label className="label cursor-pointer">
                                 <span className="label label-text">Connection Descriptions</span>
                                 <input
diff --git a/calm-visualizer/src/components/zoom-context.provider.tsx b/calm-visualizer/src/components/zoom-context.provider.tsx
new file mode 100644
index 00000000..d3de268d
--- /dev/null
+++ b/calm-visualizer/src/components/zoom-context.provider.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useState } from 'react';
+
+type ZoomContextProps = {
+    zoomLevel: number,
+    updateZoom: (newZoomLevel: number) => void
+}
+
+type ZoomProviderProps = { children: React.ReactNode; };
+
+const ZoomContext = createContext<ZoomContextProps>({
+    zoomLevel: 1, updateZoom: () => {}
+});
+
+const ZoomProvider = ({children}: ZoomProviderProps) => {
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const updateZoom = (newZoomLevel: number) => {
+    setZoomLevel(newZoomLevel);
+  };
+
+  return (
+    <ZoomContext.Provider value={{ zoomLevel, updateZoom }}>
+      {children}
+    </ZoomContext.Provider>
+  );
+};
+
+export { ZoomContext, ZoomProvider };
\ No newline at end of file