From ea2eff6117bdd8eb553899b610d50ec11f5e0760 Mon Sep 17 00:00:00 2001
From: Stefano Mazzocchi <stefano@apache.org>
Date: Tue, 13 Apr 2010 06:40:33 +0000
Subject: [PATCH] transpose the scatterplot matrix (makes better use of space
 above the fold)

git-svn-id: http://google-refine.googlecode.com/svn/trunk@462 7d457c2a-affb-35e4-300a-418c747d4874
---
 .../scripts/dialogs/scatterplot-dialog.js      | 18 ++++++++++--------
 .../styles/dialogs/scatterplot-dialog.css      |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/scripts/dialogs/scatterplot-dialog.js b/src/main/webapp/scripts/dialogs/scatterplot-dialog.js
index 3bb698738..f1f4ff7b2 100644
--- a/src/main/webapp/scripts/dialogs/scatterplot-dialog.js
+++ b/src/main/webapp/scripts/dialogs/scatterplot-dialog.js
@@ -22,7 +22,7 @@ ScatterplotDialog.prototype._createDialog = function() {
     ).appendTo(frame);
         
     var html = $(
-        '<div class="grid-layout layout-normal layout-full"><table>' +
+        '<div class="grid-layout layout-normal"><table width="100%">' +
             '<tr>' +
                 '<td>' +
                     '<span class="clustering-dialog-controls">Plot type: <select bind="plotSelector">' +
@@ -136,15 +136,17 @@ ScatterplotDialog.prototype._renderMatrix = function() {
 
         for (var i = 0; i < columns.length; i++) {
             var tr = table.insertRow(table.rows.length);
-            for (var j = 0; j < i; j++) {
-                $(tr.insertCell(j)).append(createScatterplot(i,j));
-            }
-            
-            var tdColumnName = $(tr.insertCell(tr.cells.length));
+            var counter = 0;
+            var tdColumnName = $(tr.insertCell(counter++));
             tdColumnName
                 .text(columns[i].name)
-                .css("text-align", "left")
-                .attr("colspan", columns.length - i);
+                .css("text-align", "right")
+                .css("padding", "0em 0.5em")
+                .attr("colspan", i + 1);
+            for (var j = i + 1; j < columns.length; j++) {
+                $(tr.insertCell(counter++)).append(createScatterplot(i,j));
+            }
+            
         }
 
         var width = container.width();
diff --git a/src/main/webapp/styles/dialogs/scatterplot-dialog.css b/src/main/webapp/styles/dialogs/scatterplot-dialog.css
index eef84ad8f..971833360 100644
--- a/src/main/webapp/styles/dialogs/scatterplot-dialog.css
+++ b/src/main/webapp/styles/dialogs/scatterplot-dialog.css
@@ -1,6 +1,6 @@
 .scatterplot-dialog-table-container {
     height: 500px;
-    overflow: scroll;
+    overflow: auto;
     border: 1px solid #aaa;
 }