Debugging Tool for Hot Topics

app/assets/javascripts/discourse/controllers/list_topics_controller.js

@@ -7,7 +7,8 @@
   @module Discourse
 **/
 Discourse.ListTopicsController = Discourse.ObjectController.extend({
-  needs: ['list', 'composer'],
+  needs: ['list', 'composer', 'modal'],
+
   // If we're changing our channel
   previousChannel: null,
 
@@ -50,6 +51,14 @@ Discourse.ListTopicsController = Discourse.ObjectController.extend({
     topic.toggleStar();
   },
 
+  // Show rank details
+  showRankDetails: function(topic) {
+    var modalController = this.get('controllers.modal');
+    if (modalController) {
+      modalController.show(Discourse.TopicRankDetailsView.create({ topic: topic }));
+    }
+  },
+
   createTopic: function() {
     this.get('controllers.list').createTopic();
   },

app/assets/javascripts/discourse/helpers/application_helpers.js

@@ -180,6 +180,30 @@ Handlebars.registerHelper('editDate', function(property, options) {
   }
 });
 
+/**
+  Displays a percentile based on a `percent_rank` field
+
+  @method percentile
+  @for Ember.Handlebars
+**/
+Ember.Handlebars.registerHelper('percentile', function(property, options) {
+  var percentile = Ember.Handlebars.get(this, property, options);
+  return Math.round((1.0 - percentile) * 100)
+});
+
+/**
+  Displays a float nicely
+
+  @method float
+  @for Ember.Handlebars
+**/
+Ember.Handlebars.registerHelper('float', function(property, options) {
+  var x = Ember.Handlebars.get(this, property, options);
+  if (!x) return "0";
+  if (Math.round(x) === x) return x;
+  return x.toFixed(3)
+});
+
 /**
   Display logic for numbers.
 

app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars

@@ -17,7 +17,12 @@
       {{#if unseen}}
         <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
       {{/if}}
+
+      {{#if rank_details}}
+        <i class='icon icon-beaker score' {{action showRankDetails this}} title='{{i18n rank_details.show}}'></i>
+      {{/if}}
   </td>
+
   <td class='category'>
     {{categoryLink category}}
   </td>

app/assets/javascripts/discourse/templates/modal/topic_rank_details.js.handlebars

@@ -0,0 +1,46 @@
+{{#with view.topic.rank_details}}
+  <div class="modal-body">
+
+    <!-- Note this isn't translated because it's a debugging tool for a feature
+         that is not complete yet. We will probably rip this out altogether -->
+
+    <table class='table'>
+      <tr>
+        <td>hot topic type</td>
+        <td>
+          {{hot_topic_type}}
+        </td>
+      </tr>
+      <tr>
+        <td>random bias</td>
+        <td>{{float random_bias}}</td>
+      </tr>
+      <tr>
+        <td>random multiplier</td>
+        <td>{{float random_multiplier}}</td>
+      </tr>
+      <tr>
+        <td>days ago bias</td>
+        <td>{{float days_ago_bias}}</td>
+      </tr>
+      <tr>
+        <td>days ago multiplier</td>
+        <td>{{float days_ago_multiplier}}</td>
+      </tr>
+      <tr>
+        <td>ranking formula</td>
+        <td>
+          <p>= (random_bias * random_multiplier) +<br/>
+             (days_ago_bias * days_ago_multiplier)</p>
+          <p>= ({{float random_bias}} * {{float random_multiplier}}) + ({{float days_ago_bias}} * {{float days_ago_multiplier}})</p>
+        </td>
+      </tr>
+      <tr>
+        <td>ranking score</td>
+        <td><b>{{float ranking_score}}</b></td>
+      </tr>
+
+    </table>
+
+  </div>
+{{/with}}

app/assets/javascripts/discourse/views/modal/topic_rank_details_view.js

@@ -0,0 +1,13 @@
+/**
+  A modal view for displaying the ranking details of a topic
+
+  @class TopicRankDetailsView
+  @extends Discourse.ModalBodyView
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.TopicRankDetailsView = Discourse.ModalBodyView.extend({
+  templateName: 'modal/topic_rank_details',
+  title: Em.String.i18n('rank_details.title')
+
+});

app/assets/stylesheets/application/modal.css.scss

@@ -151,6 +151,8 @@
     .archetype-option {
       margin-bottom: 20px;
     }
+
+
   }
   .password-confirmation {
     display: none;

app/assets/stylesheets/application/topic-list.css.scss

@@ -97,7 +97,20 @@
   .main-link {
     width: 515px;
     font-size: 16px;
+
+    &:hover i.score {
+      display: inline-block;
+    }
+
+    i.score {
+      color: green;
+      cursor: pointer;
+      display: none;
+    }
   }
+
+
+
   @include medium-width {
     .main-link {
       width: 400px;