[tor-commits] [atlas/master] Adds map options panel

[irl at torproject.org]

commit 966321690a124e50e55ae83bab27e53b78529a94
Author: Iain R. Learmonth <irl at fsfe.org>
Date:   Sat Dec 2 18:12:03 2017 +0000

    Adds map options panel
---
 css/atlas.css                |  8 ++++++-
 js/router.js                 |  1 -
 js/views/aggregate/map.js    | 53 +++++++++++++++++++++++++++-----------------
 templates/aggregate/map.html | 13 ++++++++++-
 4 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/css/atlas.css b/css/atlas.css
index 3fd9cdb..89a1def 100644
--- a/css/atlas.css
+++ b/css/atlas.css
@@ -52,7 +52,7 @@ span.flags {
     background: #ff1515;
 }
 
-#home-search, #home-aggregate-search, #home-advanced-search {
+#home-search, #home-aggregate-search, #home-advanced-search, #map-radio-buttons {
     padding: 0;
     margin: 0 0 10px 0;
     width: 100%;
@@ -92,3 +92,9 @@ td a {
     width: 120px;
     display: inline;
 }
+
+label.radio-inline {
+    display: inline !important;
+    width: auto;
+}
+
diff --git a/js/router.js b/js/router.js
index 8a73620..6428622 100644
--- a/js/router.js
+++ b/js/router.js
@@ -124,7 +124,6 @@ define([
         $(".progress").show();
 
         aggregateMapView.collection.aType = "cc";
-        aggregateMapView.aggregateType = "consensus_weight_fraction";
 
         if (query) {
           query = query.trim();
diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js
index d8d7ec0..f585e33 100644
--- a/js/views/aggregate/map.js
+++ b/js/views/aggregate/map.js
@@ -17,17 +17,8 @@ define([
     initialize: function() {
       this.collection = new aggregatesCollection;
     },
-    render: function(query){
-      document.title = "Relay Search";
-      var compiledTemplate = _.template(aggregateMapTemplate)
-      this.$el.html(compiledTemplate({query: query,
-                                     aggregates: this.collection.models,
-                                     countries: CountryCodes,
-                                     error: this.error,
-                                     relaysPublished: this.relaysPublished,
-                                     bridgesPublished: this.bridgesPublished}));
-
-      var aggregate_type = this.aggregateType;
+    plot: function() {
+      var aggregate_property = $('input[name="aggregate-property"]:checked').val();
       var aggregates = this.collection.models;
 
       var m_width = $("#container").width();
@@ -41,11 +32,11 @@ define([
       var path = d3.geo.path()
         .projection(projection);
 
+      $("#aggregate-map").html("");
+
       var svg = d3.select("#aggregate-map").append("svg")
         .attr("preserveAspectRatio", "xMidYMid")
         .attr("viewBox", "0 0 " + width + " " + height)
-        .attr("width", m_width)
-        .attr("height", m_width * height / width);
 
       svg.append("rect")
         .attr("class", "background")
@@ -58,13 +49,13 @@ define([
 
       var maximum_value = 0;
       _.each(aggregates, function(aggregate) {
-        if (aggregate[aggregate_type] > maximum_value) maximum_value = aggregate[aggregate_type];
+        if (aggregate[aggregate_property] > maximum_value) maximum_value = aggregate[aggregate_property];
       });
 
-      var getCountryAggregate = function(code, aggregate_type) {
+      var getCountryAggregate = function(code, aggregate_property) {
         var found = 0;
         _.each(aggregates, function(aggregate) {
-          if (aggregate.country.toUpperCase() == code) found = aggregate[aggregate_type];
+          if (aggregate.country.toUpperCase() == code) found = aggregate[aggregate_property];
         });
 
         return (found == 0) ? found : Math.sqrt(found/maximum_value);
@@ -94,7 +85,7 @@ define([
         .enter()
           .append("path")
             .attr("id", function(d) { return d.id; })
-            .style("fill-opacity", function(d) { return getCountryAggregate(d.id, aggregate_type); })
+            .style("fill-opacity", function(d) { return getCountryAggregate(d.id, aggregate_property); })
             .attr("d", path)
           .append("svg:title")
             .text( function(d) { return d.id; });
@@ -125,13 +116,35 @@ define([
           .text("" + (Math.pow(i,2)* maximum_value*100).toFixed(3) + "%");
       }
 
+     });
+    },
+    save: function() {
       /* Encode SVG image for download link. */
       html = d3.select("#aggregate-map")
         .node()
         .innerHTML;
-      d3.select("#save_svg")
-        .attr("href", "data:image/svg+xml;base64," + btoa(html));
-     });
+      window.open("data:image/svg+xml;base64," + btoa(html), "SaveSVG");
+    },
+    render: function(query){
+      document.title = "Relay Search";
+      var compiledTemplate = _.template(aggregateMapTemplate)
+      this.$el.html(compiledTemplate({query: query,
+                                     aggregates: this.collection.models,
+                                     countries: CountryCodes,
+                                     error: this.error,
+                                     relaysPublished: this.relaysPublished,
+                                     bridgesPublished: this.bridgesPublished}));
+
+      this.plot();
+
+      var thisView = this;
+
+      $('input[name="aggregate-property"]').bind('change', function(){
+        thisView.plot();
+      });
+      $('#save_svg').bind('click', function(){
+        thisView.save();
+      });
     },
     renderError: function(){
       var compiledTemplate = _.template(aggregateSearchTemplate);
diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html
index 19efd66..1beac01 100644
--- a/templates/aggregate/map.html
+++ b/templates/aggregate/map.html
@@ -36,5 +36,16 @@
     <% } %>
 <% } else { %>
    <div id="aggregate-map"></div>
-   <a id="save_svg">Save Graph</a>
+   <div class="panel panel-default">
+   <div class="panel-body">
+   <form id="map-radio-buttons">
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="consensus_weight_fraction" checked="checked"> Consensus Weight</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="guard_probability"> Guard Probability</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="middle_probability"> Middle Probability</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="exit_probability"> Exit Probability</label>
+   </form>
+   <a class="btn btn-primary" href="#aggregate/cc<%= (query) ? "/" + query : "" %>">View Table</a>
+   <a class="btn btn-secondary" id="save_svg">Save Map</a>
+   </div>
+   </div>
 <% } %>