Merge pull request #3 from desilinguist/latest-firefox

Update dependencies and use Chrome as the primary browser
desilinguist · Sep 18, 2015 · 961bda5 · 961bda5
2 parents bbc9612 + c11d913
commit 961bda5
Show file tree

Hide file tree

Showing 7 changed files with 385 additions and 500 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,7 @@
 # ibleu
 A visual and interactive scoring environment for machine translation systems.
 
-
-##### NOTE: Requires the latest version of Firefox (v4 or higher at least)
+##### NOTE: Currently requires the latest version of Chrome (v45+). 
 
 ## Introduction
 
@@ -91,16 +90,12 @@ on your end. To prevent tokenization, you can check the 'Do not tokenize' checkb
 **NOTE**: this may lead to BLEU scores that are different from those produced by the 
 official BLEU script since you are no longer using the default bleu tokenization. 
 
-#### Why only Mozilla Firefox and only the latest version?
-This tool relies on the latest versions of HTML (HTML5), Javascript (v1.8) and CSS (CSS2/CSS3) 
-and Firefox currently provides the best implementation of these technologies on all three major 
-platforms (Mac, Windows and Linux).
+#### Why only Google Chrome and only the latest version?
+This tool relies on the latest standards for HTML, Javascript and CSS and Chrome currently provides the best implementation of these technologies on all three major platforms (Mac, Windows and Linux). The tool might also work on Firefox (and older versions certainly used to) but I have been having issues with the recent versions of Firefox (v40 and higher) on OS X, for some reason. So, Google Chrome is recommended. Please file an issue if you have problems with Chrome.
 
 #### What third party libraries is ibleu using?
-I used two third party libraries for this project. The first is [jquery](http://jquery.com/), a fantastic 
-Javascript library that makes interacting with the DOM extremely easy. The second is [highcharts](http://www.highcharts.com), 
-a very powerful charting/graphic library that works with query. For older versions of iBLEU, I was using 
-[flot](http://flot.googlecode.com), a different charting library but was not as nice as high charts. 
+I used two third party libraries for this project. The first is [jquery](http://jquery.com/), a fantastic Javascript library that makes interacting with the DOM extremely easy. The second is [highcharts](http://www.highcharts.com), 
+a very powerful charting/graphic library that works with query. For older versions of iBLEU, I was using [flot](http://flot.googlecode.com), a different charting library but was not as nice as high charts. 
 
 #### Why use Google Translate and/or Bing Translator?
 Google and Bing currently have the best *publicly available* statistical machine translation systems and so it's only natural to want to compare against them as a benchmark. Obviously, the publicly available translation systems may be different from the respective research translation system that folks in the MT community are generally familiar with but they are useful benchmarks nonetheless. 

diff --git a/bleu.css b/bleu.css
@@ -42,7 +42,7 @@ table#bleuTable caption {
     font-size: 14px;
 }
 
-div.hider { 
+div.hider {
     font-size: 12px;
     text-align: right;
     margin: 4px;
@@ -65,10 +65,12 @@ td#segDetailHeader {
 
 td#segDetailID, td#segDetailRef0, td#segDetailRef1, td#segDetailRef2, td#segDetailRef3, td#segDetailHyp, td#segDetailSrc, td#segDetailEngineTrans {
 	font-size: 14px;
-    font-family: consolas, courier, fixed, monospace;	
+    font-family: consolas, courier, fixed, monospace;
 	text-align: left;
 	padding: 5px;
 }
 
-a.jslink:visited { color: #0000FF;}
+a.jslink:visited {
+    color: #0000FF;
+}
 
diff --git a/bleu.html b/bleu.html
@@ -7,7 +7,6 @@
 <title>iBLEU: Interactive BLEU Scoring</title>
 <script src="js/bleu.js" type="text/javascript"></script>
 <script src="js/jquery.js" type="text/javascript"></script>
-<script src="js/jquery.flot.js" type="text/javascript"></script>
 <script src="js/utils.js" type="text/javascript"></script>
 <script src="js/lcs.js" type="text/javascript"></script>
 <script src="js/highcharts.js" type="text/javascript"></script>
@@ -318,7 +317,7 @@
 
   $('html, body').animate({
     scrollTop: $("#segDetailContainer").offset().top
-  }, 1000);
+  }, 500);
 }
 
 
@@ -402,6 +401,7 @@
         pointwidth = 2;
         clickCallback = { click: showLargerPlot };
         showXTicks = false;
+        showXLabels = false;
         YTickInterval = 0.5;
         XTickWidth = 0;
         pointClickCallback = { legendItemClick : function(event) { return false; }, };
@@ -413,17 +413,14 @@
         showAnimation = true;
         pointwidth = null;
         clickCallback = { };
-        showXTicks = true;
+        showXTicks = false;
+        showXLabels = true;
         YTickInterval = 0.2;
-        XTickWidth = null;
+        XTickWidth = 0;
         pointClickCallback = { legendItemClick : function(event) { return false; }, click : showSegDetails};
         pointCursor = 'pointer';
     }
 
-    if (yscores.length > 35) {
-      showXTicks = false;
-    }
-
     chart = new Highcharts.Chart({
         chart: {
             renderTo: plotdiv,
@@ -439,7 +436,7 @@
             tickWidth: XTickWidth,
             categories: xticks,
             labels: {
-                enabled: showXTicks
+                enabled: showXLabels
             }
         },
         yAxis: {
@@ -457,11 +454,6 @@
             }
         },
         legend: {
-            // align: 'right',
-            // verticalAlign: 'top',
-            // x: 0,
-            // y: 10,
-            // floating: true,
             enabled: showLegend
         },
         plotOptions: {
@@ -629,7 +621,7 @@
     $('#segDetailContainer').html("");
     $('html, body').animate({
         scrollTop: $("#bleuSegPlotContainer").offset().top
-    }, 1000);
+    }, 500);
 
 }
 
@@ -654,16 +646,12 @@
     $('#bleuScoreDiv').html("");
     $('#bleuTableDiv').html("");
     $('bleuDetailContainer').hide();
-    //$('#bleuDetailContainer').css('border','none');
 
     // Hide the bleu plots
     $('#bleuSegPlot').html("");
     $('#bleuDocPlotsContainer').hide();
     $('#bleuSegPlotContainer').hide();
 
-    // Clear any stray tooltips
-    // $("#tooltip").remove();
-
     // Hide any segment details
     $('#segDetailContainer').html("");
 
@@ -969,31 +957,31 @@
                 }
             }
 
-      // clear everything else
-      $('#bleuSegPlot').html("");
-      $('#bleuDocPlotsContainer').html("");
-      $('#bleuDocPlotsContainer').hide();
-      $('#bleuSegPlotContainer').hide();
-      $('#segDetailContainer').html("");
-      allDocPlots = [];
-
-      var scores = [];
-      var brevities = [];
-      var precisions = [];
-      var sysids = [];
-      var srclang = srcSets.length > 0 ? srcSets[0].srclang : undefined;
-
-      // Compute the bleu scores for the first system ...
-      scontainer = scoreSystem(tstSets[0], refSets);
-      for (sysid in scontainer.bleuObjects) {
-        var bo = scontainer.bleuObjects[sysid];
-          scores.push(bo.computeBLEU());
-          brevities.push(bo.brevity);
-          precisions.push(bo.precisions[4]);
-          sysids.push(sysid);
-      }
+            // clear everything else
+            $('#bleuSegPlot').html("");
+            $('#bleuDocPlotsContainer').html("");
+            $('#bleuDocPlotsContainer').hide();
+            $('#bleuSegPlotContainer').hide();
+            $('#segDetailContainer').html("");
+            allDocPlots = [];
+
+            var scores = [];
+            var brevities = [];
+            var precisions = [];
+            var sysids = [];
+            var srclang = srcSets.length > 0 ? srcSets[0].srclang : undefined;
+
+            // Compute the bleu scores for the first system ...
+            scontainer = scoreSystem(tstSets[0], refSets);
+            for (sysid in scontainer.bleuObjects) {
+            var bo = scontainer.bleuObjects[sysid];
+                scores.push(bo.computeBLEU());
+                brevities.push(bo.brevity);
+                precisions.push(bo.precisions[4]);
+                sysids.push(sysid);
+            }
 
-        // .. and the second system, if available
+            // .. and the second system, if available
             if (tstSets[1] != undefined) {
                 scontainer2 = scoreSystem(tstSets[1], refSets);
                 for (sysid in scontainer2.bleuObjects) {
@@ -1005,7 +993,6 @@
                 }
             }
 
-
             // Show BLEU details (with details table hidden) if there is
             // only one system but if there are two, then show the scores
             // side by side and NO table.
@@ -1017,7 +1004,7 @@
             else {
                 showScore(scores[0], precisions[0], brevities[0], sysids[0], srclang, refSets.length);
                 showTable(bo.individualNgramScores, bo.cumulativeNgramScores);
-                $('#bleuTable').find('tbody').css('display', 'none');
+                $('#bleuTable').hide();
                 $('#bleuDetailContainer').css('border', '1px solid');
             }
 
@@ -1053,13 +1040,13 @@
 
                 var seriesLabel;
                 var plotLabel;
-                        var idLabel;
+                var idLabel;
 
                 // Make all the document plots
                 for (var i=0; i < numDocuments; i++) {
 
-                        // Create a label for the plot
-                        idLabel = ("00" + i).slice(-3); // pad with two leading zeros
+                    // Create a label for the plot
+                    idLabel = ("00" + i).slice(-3); // pad with two leading zeros
 
                     // render the plot placeholder
                     $('#bleuDocPlotsContainer').append('<div class="docplot" id="docPlot' + idLabel + '" style="width:200px; height:100px; display:inline-block; margin: 10px; white-space:nowrap;"</div>');
@@ -1073,7 +1060,7 @@
 
                     // Create a non-legend label for the plot
                     plotLabel = 'Document ' + (i+1) + ' (' + docPlotLabels[i][1] + ')';
-                        idLabel = ("00" + i).slice(-3); // pad with two leading zeros
+                    idLabel = ("00" + i).slice(-3); // pad with two leading zeros
                     $('#docPlot' + idLabel).append('<span id="docPlotLabel' + i + '" style="font-size: 11px; margin: 0px auto;">' + plotLabel + '</span>');
                 }
             }
@@ -1130,9 +1117,9 @@
             $(this).html('Hide Form');
         }
     });
-    $('a#tableHider').live('click', function(e) {
+    $('body').on('click', 'a#tableHider', function(e) {
         e.preventDefault();
-        $('#bleuTable').find('tbody').toggle();
+        $('#bleuTable').toggle();
         if ($(this).html() == 'Show') {
             $(this).html('Hide');
         }
@@ -1141,7 +1128,7 @@
         }
     });
 
-      $('a#engineTranslate').live('click', function(e) {
+      $('body').on('click', 'a#engineTranslate', function(e) {
         e.preventDefault();
         var engineName = $('input[name=comparisonEngine]:checked').val();
         if (engineName == "Google") {
@@ -1170,7 +1157,7 @@
         }
         $('html, body').animate({
             scrollTop: $("tr#segDetailEngine").offset().top
-        }, 1000);
+        }, 500);
     });
 });
 </script>

diff --git a/js/bleu.js b/js/bleu.js
@@ -157,7 +157,9 @@ function Words2Ngrams(words) {
                 ngram_counts[ngram]++;
             }
             else {
-				if (ngram == "watch") { alert(ngram); }
+				if (ngram == "watch") {
+                    alert(ngram);
+                }
                 ngram_counts[ngram] = 1;
             }
         }