[tor-commits] [atlas/master] Adds a permalink button to the map view (Fixes: #24869)

[irl at torproject.org]

commit 1a28b6ec9a9996bc5f18ab634ac16bcb08cc1367
Author: Iain R. Learmonth <irl at fsfe.org>
Date:   Fri Jan 12 07:55:05 2018 +0000

    Adds a permalink button to the map view (Fixes: #24869)
---
 js/router.js                 |  5 +++--
 js/views/aggregate/map.js    |  6 +++++-
 templates/aggregate/map.html | 13 +++++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/js/router.js b/js/router.js
index 6428622..aafef60 100644
--- a/js/router.js
+++ b/js/router.js
@@ -21,7 +21,7 @@ define([
         'toprelays': 'showTopRelays',
         'aggregate/:aType(/:query)': 'aggregateSearch',
         'aggregate(/:aType)/': 'emptyAggregateSearch',
-        'map(/:query)': 'aggregateMap',
+        'map(_:property)(/:query)': 'aggregateMap',
     	// Default
     	'*actions': 'defaultAction'
     },
@@ -116,7 +116,7 @@ define([
       });
     },
     // Perform an aggregate search
-    aggregateMap: function(query){
+    aggregateMap: function(property, query){
         $(".breadcrumb").html("<li><a href=\"https://metrics.torproject.org/\">Home</a></li><li><a href=\"https://metrics.torproject.org/services.html\">Services</a></li><li><a href=\"#\">Relay Search</a></li><li class=\"active\">Map view" + ((query) ? " for " + query : "") + "</li>");
 
         $("#content").hide();
@@ -124,6 +124,7 @@ define([
         $(".progress").show();
 
         aggregateMapView.collection.aType = "cc";
+        aggregateMapView.mapProperty = (property) ? property : "consensus_weight_fraction";
 
         if (query) {
           query = query.trim();
diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js
index 2141783..d7411b4 100644
--- a/js/views/aggregate/map.js
+++ b/js/views/aggregate/map.js
@@ -30,7 +30,6 @@ define([
     },
     plot: function() {
       $('input[name="aggregate-property"]').prop('disabled', true);
-
       var aggregate_property = $('input[name="aggregate-property"]:checked').val();
       var aggregates = this.collection.models;
       var explanations = this.explanations;
@@ -236,6 +235,7 @@ define([
       document.title = "Relay Search";
       var compiledTemplate = _.template(aggregateMapTemplate)
       this.$el.html(compiledTemplate({query: query,
+                                     mapProperty: this.mapProperty,
                                      aggregates: this.collection.models,
                                      countries: CountryCodes,
                                      error: this.error,
@@ -252,6 +252,10 @@ define([
         $('#save_svg').bind('click', function(){
           thisView.save();
         });
+        $('#permalink').bind('click', function(){
+          aggregate_property = $('input[name="aggregate-property"]:checked').val();
+          window.location.hash = "#map_" + aggregate_property + ((query) ? "/" + query : "");
+        });
       } else {
         $('#no-svg').show();
       }
diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html
index 96716b6..c36a226 100644
--- a/templates/aggregate/map.html
+++ b/templates/aggregate/map.html
@@ -51,15 +51,16 @@
    <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>
-     <label class="radio-inline"><input type="radio" name="aggregate-property" value="advertised_bandwidth"> Advertised Bandwidth</label>
-     <label class="radio-inline"><input type="radio" name="aggregate-property" value="consensus_weight_to_bandwidth"> Consensus Weight to Bandwidth Ratio</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="consensus_weight_fraction"<% if (mapProperty == "consensus_weight_fraction") { %> checked="checked"<% } %>> Consensus Weight</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="guard_probability"<% if (mapProperty == "guard_probability") { %> checked="checked"<% } %>> Guard Probability</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="middle_probability"<% if (mapProperty == "middle_probability") { %> checked="checked"<% } %>> Middle Probability</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="exit_probability"<% if (mapProperty == "exit_probability") { %> checked="checked"<% } %>> Exit Probability</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="advertised_bandwidth"<% if (mapProperty == "advertised_bandwidth") { %> checked="checked"<% } %>> Advertised Bandwidth</label>
+     <label class="radio-inline"><input type="radio" name="aggregate-property" value="consensus_weight_to_bandwidth"<% if (mapProperty == "consensus_weight_to_bandwidth") { %> checked="checked"<% } %>> Consensus Weight to Bandwidth Ratio</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>
+   <a class="btn btn-secondary" id="permalink">Permalink</a>
    </div>
    </div>
 <% } %>