Polishing range slider facets' histograms.

Fixed scrolling bug in data table view.
Support range facets on for cell content as well.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@26 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project.js

@@ -45,7 +45,7 @@ function initializeUI() {
     tdLeft.setAttribute("width", "82%");
     tdRight.setAttribute("width", "18%");
     
-    ui.viewPanel = $('<div></div>').appendTo(tdLeft).css("width", tdLeft.offsetWidth + "px").css("overflow-x", "auto");
+    ui.viewPanel = $('<div></div>').appendTo(tdLeft);
     ui.facetPanel = $('<div></div>').appendTo(tdRight);
     ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
     ui.processPanel = $('<div></div>').addClass("process-panel").appendTo(document.body);

src/main/webapp/scripts/project/data-table-view.js

@@ -71,9 +71,11 @@ DataTableView.prototype.render = function() {
     /*
      *  Data table
      */
+    var tableDiv = $('<div></div>').addClass("data-table-container").css("width", container.width() + "px").appendTo(container);
+    
     var table = document.createElement("table");
     table.className = "data-table";
-    container.append(table);
+    tableDiv.append(table);
     
     var trHead = table.insertRow(0);
     
@@ -244,7 +246,7 @@ DataTableView.prototype._createMenuForColumnHeader = function(column, index, elm
             submenu: [
                 {   "heading" : "On Cell Content" },
                 {
-                    label: "Simple Facet",
+                    label: "Text Facet",
                     click: function() {
                         ui.browsingEngine.addFacet(
                             "list", 
@@ -257,7 +259,25 @@ DataTableView.prototype._createMenuForColumnHeader = function(column, index, elm
                     }
                 },
                 {
-                    label: "Custom Facet ...",
+                    label: "Numeric Facet",
+                    click: function() {
+                        ui.browsingEngine.addFacet(
+                            "range", 
+                            {
+                                "name" : column.headerLabel,
+                                "cellIndex" : column.cellIndex, 
+                                "expression" : "value",
+                                "mode" : "range",
+                                "min" : 0,
+                                "max" : 1
+                            },
+                            {
+                            }
+                        );
+                    }
+                },
+                {
+                    label: "Custom Text Facet ...",
                     click: function() {
                         var expression = window.prompt("Enter expression", 'value');
                         if (expression != null) {

src/main/webapp/scripts/project/range-facet.js

@@ -178,9 +178,13 @@ RangeFacet.prototype.render = function() {
         
         this._histogramDiv.empty().show();
         $('<img />').attr("src", 
-            "http://chart.apis.google.com/chart?cht=ls&chs=" + 
-            this._histogramDiv[0].offsetWidth + 
-            "x50&chd=t:" + a.join(",")
+            "http://chart.apis.google.com/chart?" + [
+                "cht=ls",
+                "chs=" + this._histogramDiv[0].offsetWidth + "x50",
+                "chm=o,ff6600,0,-1,3",
+                "chls=0",
+                "chd=t:" + a.join(",")
+            ].join("&")
         ).appendTo(this._histogramDiv);
     }
     

src/main/webapp/styles/project.css

@@ -1,3 +1,8 @@
+.data-table-container {
+    border: 1px solid #ccc;
+    overflow-x: auto;
+}
+
 table.data-table td {
     padding: 2px 5px;
 }