From 5e4e52a10941c83b54da730ed51fc982f44f8ac8 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 10 Jul 2023 15:41:14 +0200
Subject: [PATCH] fix(frontend): Fix graph view when mulitple graphs are
 displayed (#1821)

* fix(frontend): Fix graph view when mulitple graphs are displayed

* fix(frontend): use id
---
 .../graph/svelvet/container/views/GraphView.svelte   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
index 0739dd0963..a0c16d86f6 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
@@ -75,7 +75,7 @@
 	onMount(() => {
 		// actualizes the d3 instance
 
-		const nodes = d3.select(`.zoomable`).call(d3Zoom).on('dblclick.zoom', null)
+		const nodes = d3.select(`#zoomable-${canvasId}`).call(d3Zoom).on('dblclick.zoom', null)
 
 		if (!scroll) {
 			;[nodes].forEach((d3Instance) => {
@@ -87,14 +87,14 @@
 			})
 		}
 
-		d3.select('#zoom_in').on('click', function () {
+		d3.select(`#zoom_in_${canvasId}`).on('click', function () {
 			try {
 				d3Zoom.scaleBy(nodes.transition().duration(250), 1.4)
 			} catch (e) {
 				console.log('error', e)
 			}
 		})
-		d3.select('#zoom_out').on('click', function () {
+		d3.select(`#zoom_out_${canvasId}`).on('click', function () {
 			try {
 				d3Zoom.scaleBy(nodes.transition().duration(250), 0.714)
 			} catch (e) {
@@ -123,7 +123,7 @@
 	}
 </script>
 
-<div class="zoomable">
+<div class="zoomable" id={`zoomable-${canvasId}`}>
 	<!-- This is the container that holds GraphView and we have disabled right click functionality to prevent a sticking behavior -->
 	<div id="graphview-container">
 		<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
@@ -211,10 +211,10 @@
 {/if}
 
 <div id="buttons">
-	<button title="Zoom In" id="zoom_in">
+	<button title="Zoom In" id={`zoom_in_${canvasId}`}>
 		<Plus size="14" class="flex justify-start m-1" />
 	</button>
-	<button title="Zoom Out" id="zoom_out">
+	<button title="Zoom Out" id={`zoom_out_${canvasId}`}>
 		<Minus size="14" class="flex justify-start m-1" />
 	</button>