display metric in query box

diffir/measure/qrels.py

@@ -35,4 +35,6 @@ def _query_differences(self, run1, run2, *args, **kwargs):
         eval_run_2 = evaluator.evaluate(run2)
         query_ids = eval_run_1.keys() & eval_run_2.keys()
         query_ids = sorted(query_ids, key=lambda x: abs(eval_run_1[x][metric] - eval_run_2[x][metric]), reverse=True)
-        return query_ids[:topk]
+        query_ids = query_ids[:topk]
+        id2diff = {x:abs(eval_run_1[x][metric] - eval_run_2[x][metric]) for x in query_ids}
+        return query_ids, id2diff, metric

diffir/measure/unsupervised.py

@@ -120,4 +120,6 @@ def _query_differences(self, run1, run2, *args, **kwargs):
                 raise ValueError("Metric {} not supported for the measure {}".format(self.config["metric"], self.module_name))
             id2measure[qid] = tau
         qids = sorted(qids, key=lambda x: id2measure[x])
-        return qids[:topk]
+        qids = qids[:topk]
+        id2measure = {idx: id2measure[idx] for idx in qids}
+        return qids, id2measure, metric

diffir/run.py

@@ -93,7 +93,7 @@ class MainTask(ModuleBase):
         Dependency(key="weight", module="weight", name="exactmatch"),
     ]
 
-    def create_query_objects(self, run_1, run_2, qids, dataset):
+    def create_query_objects(self, run_1, run_2, qids, qid2diff, metric_name, dataset):
         """
         TODO: Need a better name
         This method takes in 2 runs and a set of qids, and constructs a dict for each qid (format specified below)
@@ -138,6 +138,7 @@ def create_query_objects(self, run_1, run_2, qids, dataset):
             )
 
             fields = query._asdict()
+            fields["metric"]={"name": metric_name, "value": qid2diff[query.query_id]}
             qrels_for_query = qrels.get(query.query_id, {})
             run_1_for_query = []
             for rank, (doc_id, score) in enumerate(run_1[query.query_id].items()):
@@ -312,9 +313,9 @@ def json(self, run_1_fn, run_2_fn=None):
         # TODO: handle the case without qrels
         assert dataset.has_queries()
 
-        diff_queries = self.measure.query_differences(run_1, run_2, dataset=dataset)
+        diff_queries, qid2diff, metric_name = self.measure.query_differences(run_1, run_2, dataset=dataset)
         # _logger.info(diff_queries)
-        diff_query_objects = self.create_query_objects(run_1, run_2, diff_queries, dataset)
+        diff_query_objects = self.create_query_objects(run_1, run_2, diff_queries, qid2diff, metric_name, dataset)
         doc_objects = self.create_doc_objects(diff_query_objects, dataset)
 
         return json.dumps(

diffir/templates/template.html

@@ -8,6 +8,7 @@
     href="https://previews.123rf.com/images/antonshaparenko/antonshaparenko2003/antonshaparenko200300235/143437440-information-retrieval-icon-simple-element-from-business-intelligence-collection-filled-information-r.jpg">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
     integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
   <title>diffir: IR model comparision</title>
   <style>
     .card {
@@ -188,7 +189,7 @@ <h6 class="text-white">Contact</h6>
   </header>
   <div class="container">
     <div class="input-group" style="padding-top: 50px; padding-bottom: 10px; background-color: white;">
-      <select id="Queries" class="custom-select"></select>
+      <select id="Queries" data-width="100%" data-style="border" data-container="body"></select>
     </div>
     <div id="query-container" class="sticky-top" style="background-color: white;">
       <div style="position:relative">
@@ -231,6 +232,7 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
     crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
   <script type="text/javascript">
     var data = ${ data };
   </script>
@@ -396,6 +398,7 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
 
     function selectQuery() {
       var $select = $('#Queries');
+      $select.selectpicker();
       var query_id = $select.val();
       var query = data.queries.filter(query => query.fields.query_id === query_id);
       mergedWeights = query[0].mergedWeights
@@ -405,6 +408,9 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
       if (query.length > 0) {
         query = query[0];
         $.each(query.fields, function (fname, fvalue) {
+          if (fname == "metric"){
+            fvalue = fvalue.name +": " + fvalue.value;
+          }
           $('<tr></tr>')
             .append($('<th></th>').text(fname))
             .append($('<td></td>').text(fvalue))
@@ -551,7 +557,7 @@ <h6 id="Run2Name" style="text-align: center;"></h6>
         }
       });
       $.each(data.queries, function (_, query) {
-        $('<option>').attr('value', query['fields']['query_id']).text(query.fields[queryDisplayField]).appendTo($select);
+        $('<option>').attr('value', query['fields']['query_id']).attr('data-subtext', query.fields.metric.name+':'+query.fields.metric.value).text(query.fields[queryDisplayField]).appendTo($select);
       });
       $select.change(selectQuery).change();
       $(document).on('mouseenter', '.card', onCardEnter);