Compute record indices and render them instead of row indices.

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

src/main/java/com/metaweb/gridworks/model/Project.java

@@ -81,6 +81,7 @@ public class Project implements Serializable {
 			lastNonBlankRowsByGroup[i] = -1;
 		}
 		
+		int recordIndex = 0;
 		for (int r = 0; r < rows.size(); r++) {
 			Row row = rows.get(r);
 			row.contextRowSlots = null;
@@ -109,6 +110,7 @@ public class Project implements Serializable {
 			}
 			
 			if (row.contextRowSlots != null) {
+				row.recordIndex = -1;
 				row.contextRows = new ArrayList<Integer>();
 				for (int index : row.contextRowSlots) {
 					if (index >= 0) {
@@ -116,6 +118,8 @@ public class Project implements Serializable {
 					}
 				}
 				Collections.sort(row.contextRows);
+			} else {
+				row.recordIndex = recordIndex++;
 			}
 		}
 	}

src/main/java/com/metaweb/gridworks/model/Row.java

@@ -18,6 +18,7 @@ public class Row implements Serializable, HasFields, Jsonizable {
 	public boolean		       starred;
 	final public List<Cell>    cells;
 	
+	transient public int			recordIndex; // -1 for rows that are not main record rows
 	transient public List<Integer> 	contextRows;
 	transient public int[] 			contextRowSlots;
 	transient public int[] 			contextCellSlots;
@@ -123,6 +124,10 @@ public class Row implements Serializable, HasFields, Jsonizable {
 		}
 		writer.endArray();
 		
+		if (recordIndex >= 0) {
+			writer.key("j"); writer.value(recordIndex);
+		}
+		
 		if (options.containsKey("rowIndex")) {
 			writer.key("i"); writer.value(options.get("rowIndex"));
 		}

src/main/webapp/scripts/project/data-table-cell-ui.js

@@ -11,26 +11,27 @@ function DataTableCellUI(dataTableView, cell, rowIndex, cellIndex, td) {
 DataTableCellUI.prototype._render = function() {
     var self = this;
     var cell = this._cell;
-    var td = this._td;
     
-    $(td).empty();
+    $(this._td).empty();
+    var divContent = $('<div></div>').appendTo(this._td);
     
     if (cell == null || cell.v == null) {
+        $(divContent).html("&nbsp;");
         // TODO: content editing UI
         return;
     }
     
     if (!("r" in cell) || cell.r == null) {
-        $(td).html(cell.v);
+        $(divContent).html(cell.v);
     } else {
         var r = cell.r;
         if (r.j == "new") {
-            $(td).html(cell.v + " (new topic)");
+            $(divContent).html(cell.v + " (new topic)");
             
-            $('<span> </span>').appendTo(td);
+            $('<span> </span>').appendTo(divContent);
             $('<a href="javascript:{}">re-match</a>')
                 .addClass("data-table-recon-action")
-                .appendTo(td).click(function(evt) {
+                .appendTo(divContent).click(function(evt) {
                     self._doRematch();
                 });
         } else if (r.j == "matched" && "m" in r && r.m != null) {
@@ -39,26 +40,26 @@ DataTableCellUI.prototype._render = function() {
                 .attr("href", "http://www.freebase.com/view" + match.id)
                 .attr("target", "_blank")
                 .text(match.name)
-                .appendTo(td);
+                .appendTo(divContent);
                 
-            $('<span> </span>').appendTo(td);
+            $('<span> </span>').appendTo(divContent);
             $('<a href="javascript:{}">re-match</a>')
                 .addClass("data-table-recon-action")
-                .appendTo(td).click(function(evt) {
+                .appendTo(divContent).click(function(evt) {
                     self._doRematch();
                 });
         } else {
-            $(td).html(cell.v);
+            $(divContent).html(cell.v);
-            $('<span> </span>').appendTo(td);
+            $('<span> </span>').appendTo(divContent);
             $('<a href="javascript:{}">mark as new</a>')
                 .addClass("data-table-recon-action")
-                .appendTo(td).click(function(evt) {
+                .appendTo(divContent).click(function(evt) {
                     self._doMarkAsNew();
                 });
             
             if (this._dataTableView._showRecon && "c" in r && r.c.length > 0) {
                 var candidates = r.c;
-                var ul = $('<ul></ul>').addClass("data-table-recon-candidates").appendTo(td);
+                var ul = $('<ul></ul>').addClass("data-table-recon-candidates").appendTo(divContent);
                 var renderCandidate = function(candidate, index) {
                     var li = $('<li></li>').appendTo(ul);
                     $('<a></a>')

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

@@ -79,11 +79,16 @@ DataTableView.prototype.render = function() {
      *  Data Table
      *============================================================
      */
-    var tableDiv = $('<div></div>').addClass("data-table-container").css("width", container.width() + "px").appendTo(container);
+    var tableDiv = $('<div></div>')
+        .addClass("data-table-container")
+        .css("width", container.width() + "px")
+        .appendTo(container);
     
     var table = document.createElement("table");
-    table.className = "data-table";
+    $(table)
-    tableDiv.append(table);
+        .attr("cellspacing", "0")
+        .addClass("data-table")
+        .appendTo(tableDiv);
     
     var columns = theProject.columnModel.columns;
     var columnGroups = theProject.columnModel.columnGroups;
@@ -192,19 +197,28 @@ DataTableView.prototype.render = function() {
      */
     
     var rows = theProject.rowModel.rows;
+    var even = true;
     for (var r = 0; r < rows.length; r++) {
         var row = rows[r];
         var cells = row.cells;
         
         var tr = table.insertRow(table.rows.length);
-        tr.className = (r % 2) == 1 ? "odd" : "even";
+        
+        var td = tr.insertCell(tr.cells.length);
+        if ("j" in row) {
+            even = !even;
+            
+            $(tr).addClass("record");
+            $('<div></div>').html((row.j + 1) + ".").appendTo(td);
+        } else {
+            $('<div></div>').html("&nbsp;").appendTo(td);
+        }
         
         if ("contextual" in row && row.contextual) {
             $(tr).addClass("contextual");
         }
         
-        var td = tr.insertCell(tr.cells.length);
+        $(tr).addClass(even ? "even" : "odd");
-        $(td).html((row.i + 1) + ".");
         
         for (var i = 0; i < columns.length; i++) {
             var column = columns[i];

src/main/webapp/styles/data-table-view.css

@@ -3,19 +3,28 @@
     overflow-x: auto;
 }
 
-table.data-table td {
+table.data-table {
+}
+
+table.data-table > tbody > tr > td {
     padding: 2px 5px;
+    border-top: 1px solid white;
+    border-right: 1px solid white;
 }
 
-table.data-table tr.odd {
+table.data-table > tbody > tr.odd > td {
+    border-top: 1px solid #ddd;
 }
 
-table.data-table tr.even {
+table.data-table > tbody > tr.even > td {
-    background: #eee;
+    background: #ddd;
 }
 
-table.data-table tr.contextual {
+table.data-table > tbody > tr.contextual > td > div {
-    opacity: 0.2;
+    opacity: 0.3;
+}
+
+table.data-table > tbody > tr.record.contextual > td {
 }
 
 table.data-table td.column-header {