Merge pull request #484 from ananyag309/branch

added gtranslator to graph visualizer page
sakeel-103 · Oct 30, 2024 · 3af90b0 · 3af90b0
2 parents 63dd816 + 8c2bbe2
commit 3af90b0
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 0 deletions.
diff --git a/src/app/components/Graphs/acyclicgraph.html b/src/app/components/Graphs/acyclicgraph.html
@@ -104,6 +104,13 @@
         #backToTop:hover {
             background-color: #7a7a7a;
         }
+
+        .gtranslate_wrapper {
+            position: fixed; /* Fixed position */
+            bottom: 20px; /* Distance from the bottom */
+            left: 20px; /* Distance from the left */
+            z-index: 1000; /* Ensure it appears above other elements */
+        }
     </style>
 </head>
 
@@ -141,6 +148,17 @@ <h2>Interactive Acyclic Graph</h2>
 
     <button id="backToTop" onclick="scrollToTop()">Back to Top</button>
 
+    <div class="gtranslate_wrapper">
+        <script>
+            window.gtranslateSettings = {
+                "default_language": "en",
+                "detect_browser_language": true,
+                "wrapper_selector": ".gtranslate_wrapper"
+            };
+        </script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+    </div>
+
     <script>
         const graphContainer = d3.select('#graphContainer');
         const width = graphContainer.node().clientWidth;

diff --git a/src/app/components/Graphs/directedgraph.html b/src/app/components/Graphs/directedgraph.html
@@ -105,6 +105,8 @@
             background-color: #7a7a7a;
         }
     </style>
+
+
 </head>
 
 <body>
@@ -142,6 +144,12 @@ <h2>Interactive Directed Graph</h2>
 
     <button id="backToTop" onclick="scrollToTop()">Back to Top</button>
 
+    <div style="position: fixed; left: 20px; bottom: 20px; z-index: 1000;">
+        <div class="gtranslate_wrapper"></div>
+        <script>window.gtranslateSettings = {"default_language":"en", "detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+    </div>
+
     <script>
         const graphContainer = d3.select('#graphContainer');
         const width = graphContainer.node().clientWidth;

diff --git a/src/app/components/Graphs/tree.html b/src/app/components/Graphs/tree.html
@@ -103,6 +103,14 @@
         .back-to-top:hover {
             background-color: #7a7a7a;
         }
+
+
+        .gtranslate_wrapper {
+            position: fixed; /* Fixed position */
+            bottom: 20px; /* Distance from the bottom */
+            left: 20px; /* Distance from the left */
+            z-index: 1000; /* Ensure it appears above other elements */
+        }
     </style>
 </head>
 
@@ -141,6 +149,17 @@ <h2>Interactive Tree Visualization</h2>
 
     <button class="back-to-top" onclick="scrollToTop()">Back to Top</button>
 
+    <div class="gtranslate_wrapper">
+        <script>
+            window.gtranslateSettings = {
+                "default_language": "en",
+                "detect_browser_language": true,
+                "wrapper_selector": ".gtranslate_wrapper"
+            };
+        </script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+    </div>
+
     <script>
         const treeContainer = d3.select('#treeContainer');
         const width = treeContainer.node().clientWidth;

diff --git a/src/app/components/Graphs/undirectedgraph.html b/src/app/components/Graphs/undirectedgraph.html
@@ -103,6 +103,15 @@
         #backToTop:hover {
             background-color: #7a7a7a;
         }
+
+
+        .gtranslate_wrapper {
+            position: fixed; /* Fixed position */
+            bottom: 20px; /* Distance from the bottom */
+            left: 20px; /* Distance from the left */
+            z-index: 1000; /* Ensure it appears above other elements */
+        }
+
     </style>
 </head>
 
@@ -141,6 +150,17 @@ <h2>Interactive Undirected Graph</h2>
 
     <button id="backToTop" onclick="scrollToTop()">Back to Top</button>
 
+    <div class="gtranslate_wrapper">
+        <script>
+            window.gtranslateSettings = {
+                "default_language": "en",
+                "detect_browser_language": true,
+                "wrapper_selector": ".gtranslate_wrapper"
+            };
+        </script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+    </div>
+
     <script>
         const graphContainer = d3.select('#graphContainer');
         const width = graphContainer.node().clientWidth;

diff --git a/src/app/components/Graphs/weightedgraph.html b/src/app/components/Graphs/weightedgraph.html
@@ -108,6 +108,14 @@
         #backToTop:hover {
             background-color: #7a7a7a;
         }
+
+
+        .gtranslate_wrapper {
+            position: fixed; /* Fixed position */
+            bottom: 20px; /* Distance from the bottom */
+            left: 20px; /* Distance from the left */
+            z-index: 1000; /* Ensure it appears above other elements */
+        }
     </style>
 </head>
 
@@ -143,6 +151,17 @@ <h2>Interactive Weighted Graph</h2>
 
     <button id="backToTop" onclick="scrollToTop()">Back to Top</button>
 
+    <div class="gtranslate_wrapper">
+        <script>
+            window.gtranslateSettings = {
+                "default_language": "en",
+                "detect_browser_language": true,
+                "wrapper_selector": ".gtranslate_wrapper"
+            };
+        </script>
+        <script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
+    </div>
+
     <script>
         const graphContainer = d3.select('#graphContainer');
         const width = graphContainer.node().clientWidth;