From 7f35a9a4593d946f626cea8c56e4568a7a7fe0d7 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kly@kly.no>
Date: Sat, 12 Mar 2016 21:42:55 +0000
Subject: NMSjs: Massive rework of map drawing

Still half-way done, but it's looking better.

Confirmed working right now: Comment spotter and disco.
---
 web/nms.gathering.org/index.html | 196 +--------------------------------------
 1 file changed, 1 insertion(+), 195 deletions(-)

(limited to 'web/nms.gathering.org/index.html')

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index b5ef88e..f2776e8 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -70,16 +70,12 @@
 		<li class="divider"> </li>
 		<li class="dropdown-header">View</li>
 		<li><a href="#" onclick="toggleNightMode()">Toggle Night Mode</a></li>
-		<li><a href="#" onclick="showBlurBox()">Tweak Night Mode blur</a></li>
-		<li><a href="#" onclick='showLayer("layerVisibility");'>Set layer visibility</a></li>
 		<li class="divider"> </li>
 		<li class="dropdown-header">Map scale</li>
 		<li><a href="#"><label id="scaler-text" for='scaler'></label><input type="range" id="scaler" name="points" min="0.2" max="3" step="0.01" onchange="scaleChange()" /></a></li>
 		<li class="divider"> </li>
 		<li class="dropdown-header">Help</li>
-		<li><a href="#" onclick="toggleLayer('aboutData');">About TG15 data</a></li>
 	  	<li><a href="#" onclick="toggleLayer('aboutBox');" >About NMS</a></li>
-	  	<li><a href="#" onclick="toggleLayer('aboutPerformance');" >About Performance</a></li>
 	  	<li><a href="#" onclick="toggleLayer('aboutKeybindings');" >Keyboard Shortcuts</a></li>
 		<li><a onclick="showTimerDebug(); hideSwitch();" style="cursor: pointer;" >Debug timers</a></li>
 	      </ul>
@@ -107,113 +103,6 @@
 
       <div class="row-fluid">
 	<div class="span12">
-	  <div id="aboutData" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
-	    <div id="abotData" class="panel panel-default">
-	      <div class="panel-heading">
-		<h3 class="panel-title">About the TG15 data
-		  <button type="button" class="close" aria-label="Close" onclick="document.getElementById('aboutData').style.display = 'none';" style="float: right">
-		    <span aria-hidden="true">&times;</span>
-		  </button>
-		</h3>
-	      </div>
-	      <div class="panel-body">
-		<p>The data you see from The Gathering 2015 will seem
-		"broken up". This is not because we don't have data from
-		the first day, but because the backend was re-written on
-		day 1/2 and this web app only uses the new API.</p>
-		<p>NMS was set up on March 30th (Monday). Data started
-		pouring in on the same day. </p>
-		<p>Ping data is available for the entire event with 1
-		second resolution. We "lost" data from the 30th because we
-		re-inserted the switches (We have the ping data, but not
-		the mapping between switch ID number and actual
-		switch).</p>
-		<p>DHCP data is available only for the last detected DHCP
-		ack (no history, except extensive text-based logs)</p>
-		<p>Uplink status is available for most of the event, but
-		not exposed here. We only expose traffic-based uplink state
-		here, which, again, is based on the new API.</p>
-		<p>Traffic status was temporarily bugged, but is available
-		from late on day 2.</p>
-		<p>Temperature data is available from day 2.</p>
-		<p>Plans are being made to ensure that we don't have gaps
-		like these in the future.</p>
-		<p>It is also worth mentioning that things like switch
-		positions are not logged historically, so you see the final
-		position on the map.</p>
-	      </div>
-	    </div>
-	  </div>
-	  <div id="aboutPerformance" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
-	    <div class="panel panel-default">
-	      <div class="panel-heading">
-		<h3 class="panel-title">Performance
-		  <button type="button" class="close" aria-label="Close" onclick="document.getElementById('aboutPerformance').style.display = 'none';" style="float: right">
-		    <span aria-hidden="true">&times;</span>
-		  </button>
-		</h3>
-	      </div>
-	      <table class="table">
-		<tr>
-		  <td>Outstanding AJAX requests</td>
-		  <td id="outstandingAJAX"></td>
-		</tr>
-		<tr>
-		  <td>Overflowed AJAX requests</td>
-		  <td id="overflowAJAX"></td>
-		</tr>
-	      </table>
-	      <div class="panel-body">
-		<p>NMS performance is surprisingly complex. It's split into
-		several parts and dealt with differently.</p>
-		<p>Poller performance is a matter of efficiently collecting
-		data and is mostly handled in the Perl code (and ensuring
-		we use sensible database schemas).</p>
-		<p>Backend performance for the GUI is mostly about not
-		killing the database server. We do NOT try to protect
-		against malicious clients directly, since this is a
-		management system not public-facing, but Varnish is used to
-		cache requests. To be able to do that properly, we need use
-		absolute time when reviewing past events (so "2015-04-02
-		17:30:00", not "2 hours ago"). We've also tried to minimize
-		the stupidity in the queries. There's still work to be done
-		here, though, as we need to split up a few large backend
-		requests (port-state.pl).</p>
-		<p>Front-end performance is mostly about drawing things
-		sensibly and not completely bombing the memory usage. And
-		about gracefully handling slow backends  This will affect
-		you. For example, if you are reviewing past events and the
-		DB is struggling, we'll simply skip a backend request if we
-		have too many outstanding requests, that means you may jump
-		from "17:00" to "18:30" instead of going through
-		"17:30" and "18:00" too. This is working as intended. It
-		also means that you can happily spam the forward/backward
-		keyboard bindings to jump 18 hours forward: You'll overflow
-		the extra AJAX requests for individual requests, but you'll
-		land at the right time when you let go. But there could be
-		a 1 second delay (or more if the backend really struggles)
-		since you'll have to rely on the periodic backend requests
-		instead of the explicit ones triggered on hitting a
-		button.</p>
-		<p>Note that the counters on top are updated on a timer,
-		but this timer is set up at the same time as everything
-		else, which means that it's likely to update at the same
-		time as we fire off AJAX requests, so the 'outstanding ajax
-		requests' counter might either show almost constantly 3 or
-		0 depending on what timer happens to fire first. This does
-		NOT mean that NMS has 3 requests all the time, just that
-		we're checking right after we fire off AJAX requests every
-		time.</p>
-		<p>NMS also tries to handle drawing OK, which is why things
-		are split into different HTML5 canvases. Blur and text are
-		particularly expensive, but there's no reason to re-paint
-		that all the time, etc).</p>
-		<p>The basic performance experiments are done on TG15 data
-		using a laptop and a VM with 6GB of memory, so it should
-		hold up quite well on "proper" hardware.</p>
-	      </div>
-	    </div>
-	  </div>
 	  <div id="aboutKeybindings" class="col-md-4" style="position: absolute; display:none; z-index: 130;">
 	    <div class="panel panel-default">
 	      <div class="panel-heading">
@@ -408,28 +297,6 @@
 	      </div>
 	    </div>
 	  </div>
-	  <div id="blurManic" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
-	    <div class="panel-heading">
-	      <h1 class="panel-title">Blur tweaks
-		<button type="button" class="close" aria-labe="Close" onclick="document.getElementById('blurManic').style.display = 'none';" style="float: right;">
-		  <span aria-hidden="true">&times;</span>
-		</button>
-	      </h1>
-	    </div>
-	    <div class="panel-body">
-	      <div class="form">
-		<div class="form-group">
-		  <label for="shadowBlur">Blur strength</label>
-		  <input type="number" id="shadowBlur" class="form-control">
-		</div>
-		<div class="form-group">
-		  <label for="shadowColor">Blur color</label>
-		  <input type="color" id="shadowColor" class="form-control">
-		</div>
-		<button type="button" class="btn btn-default" onclick="applyBlur();">Apply</button>
-	      </div>
-	    </div>
-	  </div>
 	</div>
 	<div id="debugTimers" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
 	  <div class="panel-heading">
@@ -447,68 +314,6 @@
 	  </div>
 	  <table id="timerTable"> </table>
 	</div>
-	<div id="layerVisibility" class="panel panel-default" style="display: none; position: absolute; z-index: 100;">
-	  <div class="panel-heading">
-	    <h1 class="panel-title">Set layer visibility
-	      <button type="button" class="close" aria-labe="Close" onclick="document.getElementById('layerVisibility').style.display = 'none';" style="float: right;">
-		<span aria-hidden="true">&times;</span>
-	      </button>
-	    </h1>
-	  </div>
-	  <div class="panel-body">
-	    <table id="visibilityTable" class="table">
-	      <tr>
-		<td>Background</td>
-		<td>
-		  <button onclick='hideLayer("bgCanvas");'>Hide</button>
-		  <button onclick='showLayer("bgCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>Linknets</td>
-		<td>
-		  <button onclick='hideLayer("linkCanvas");'>Hide</button>
-		  <button onclick='showLayer("linkCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>Blur</td>
-		<td>
-		  <button onclick='hideLayer("blurCanvas");'>Hide</button>
-		  <button onclick='showLayer("blurCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>Switches</td>
-		<td>
-		  <button onclick='hideLayer("switchCanvas");'>Hide</button>
-		  <button onclick='showLayer("switchCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>Text</td>
-		<td>
-		  <button onclick='hideLayer("textCanvas");'>Hide</button>
-		  <button onclick='showLayer("textCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>TextInfo</td>
-		<td>
-		  <button onclick='hideLayer("textInfoCanvas");'>Hide</button>
-		  <button onclick='showLayer("textInfoCanvas");'>Show</button>
-		</td>
-	      </tr>
-	      <tr>
-		<td>Timestamp</td>
-		<td>
-		  <button onclick='hideLayer("topCanvas");'>Hide</button>
-		  <button onclick='showLayer("topCanvas");'>Show</button>
-		</td>
-	      </tr>
-	    </table>
-	  </div>
-	</div>
 
 	<canvas id="bgCanvas" width="1920" height="1032" style="position: absolute; z-index: 1;"> </canvas>
 	<canvas id="linkCanvas" width="1920" height="1032" style="position: absolute; z-index: 10;"> </canvas>
@@ -527,6 +332,7 @@
     <script src="js/jquery.min.js" type="text/javascript"></script>
     <script src="js/bootstrap.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="js/nms-data.js"></script>
+    <script type="text/javascript" src="js/nms-map.js"></script>
     <script type="text/javascript" src="js/nms.js"></script>
     <script type="text/javascript" src="js/nms-color-util.js"></script>
     <script type="text/javascript" src="js/nms-map-handlers.js"></script>
-- 
cgit v1.2.3