Merge pull request #20 from athuler/New-Tree-Rendering-Methods

Button Update

Author: athuler

index.php

@@ -105,10 +105,21 @@ function gtag(){dataLayer.push(arguments);}
 
 	<div id="controls">
 		<div class="btn-group">
+			<button class="control-btn" onclick="centerOnStart(window.firstVideoId, window.cy)">
+				<i class="bi bi-house"></i> Go to Start
+			</button>
+			<button class="control-btn" onclick="changeLayout('breadthfirst', window.cy, window.firstVideoId)">
+				<i class="bi bi-diagram-2"></i> Tree Layout
+			</button>
+			<button class="control-btn" onclick="changeLayout('cose', window.cy, window.firstVideoId)">
+				<i class="bi bi-node-plus"></i> Bubble Layout
+			</button>
+			<a href="download.php"><button class="control-btn">
+				<i class="bi bi-download"></i> Download</button>
+			</a>
+			<!-- <button class="control-btn" onclick="changeLayout('circle', window.cy, window.firstVideoId)">Circle Layout</button> -->
 			<!-- <button class="control-btn" onclick="resetView(window.cy, window.firstVideoId)"><i class="bi bi-arrows-angle-contract"></i> Reset View</button> -->
 			<!-- <button class="control-btn" onclick="fitToScreen(window.cy)"><i class="bi bi-fullscreen"></i> Fit All</button> -->
-			<button class="control-btn" onclick="centerOnStart(window.firstVideoId, window.cy)"><i class="bi bi-house"></i> Go to Start</button>
-			<a href="download.php"><button class="control-btn"><i class="bi bi-download"></i> Download</button></a>
 		</div>
 
 		<div class="legend">
@@ -129,20 +140,12 @@ function gtag(){dataLayer.push(arguments);}
 				<span>End</span>
 			</div>
 		</div>
-
-		<div class="btn-group">
-			<button class="control-btn" onclick="changeLayout('breadthfirst', window.cy, window.firstVideoId)">
-				<i class="bi bi-diagram-2"></i> Tree Layout
-			</button>
-			<button class="control-btn" onclick="changeLayout('cose', window.cy, window.firstVideoId)">
-				Force Layout
-			</button>
-			<!-- <button class="control-btn" onclick="changeLayout('circle', window.cy, window.firstVideoId)">Circle Layout</button> -->
-		</div>
 	</div>
 
+	<!-- Diagram -->
 	<div id="cy"></div>
 
+	<!-- Info Panel -->
 	<div id="info-panel">
 		<span class="close-btn" onclick="closeInfoPanel()">&times;</span>
 		<h3 id="info-video-id">Video Info</h3>