add the ability to browse the values of a particular cluster

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

src/main/webapp/scripts/dialogs/clustering-dialog.js

@@ -154,6 +154,20 @@ ClusteringDialog.prototype._renderTable = function(clusters) {
             $(tr.insertCell(0)).text(cluster.choices.length);
             
             $(tr.insertCell(1)).text(cluster.rowCount);
+
+            var facet = {
+                "c": {
+                    "type":"list",
+                    "name": self._columnName,
+                    "columnName": self._columnName,
+                    "expression":"value"
+                },
+                "o":{
+                    "sort":"name"
+                },
+                "s":[
+                ]
+            };
             
             var ul = $('<ul></ul>');
             var choices = cluster.choices;
@@ -169,9 +183,36 @@ ClusteringDialog.prototype._renderTable = function(clusters) {
                 }).appendTo(li);
                 $('<span></span>').text("(" + choice.c + " rows)").addClass("clustering-dialog-entry-count").appendTo(li);
                 rowCount += choice.c;
+                facet.s[c] = {
+                    "v": {
+                        "v":choice.v,
+                        "l":choice.v
+                    }
+                };
                 li.appendTo(ul);
             }
-            $(tr.insertCell(2)).append(ul);
+            
+            var params = [
+                "project=" + escape(theProject.id),
+                "ui=" + escape(JSON.stringify({
+                    "facets" : [ facet ]
+                }))
+            ];
+            var url = "project.html?" + params.join("&");
+                            
+            var div = $('<div></div>').addClass("clustering-dialog-value-focus");
+            
+            var browseLink = $('<a target="_new" title="Browse only these values">Browse this cluster</a>')
+                .addClass("clustering-dialog-browse-focus")
+                .attr("href",url)
+                .css("visibility","hidden")
+                .appendTo(div);
+
+            $(tr.insertCell(2))
+                .mouseenter(function() { browseLink.css("visibility", "visible"); })
+                .mouseleave(function() { browseLink.css("visibility", "hidden"); })
+                .append(ul)
+                .append(div);
             
             var editCheck = $('<input type="checkbox" />')
                 .change(function() {

src/main/webapp/styles/dialogs/clustering-dialog.css

@@ -35,6 +35,10 @@ table.clustering-dialog-entry-table a {
 	text-decoration: none;
 }
 
+table.clustering-dialog-entry-table ul {
+	margin: 1em 0em 0em 0em;
+}
+
 table.clustering-dialog-entry-table a:hover {
 	text-decoration: underline
 }
@@ -69,4 +73,13 @@ table.clustering-dialog-entry-table a:hover {
 .clustering-dialog-facet-selection {
     text-align: center;
     color: #888;
-}
+}
+
+.clustering-dialog-value-focus {
+	text-align: right;
+    font-size: 80%;
+}
+.clustering-dialog-value-focus a {
+    text-decoration: none;
+    visibility: hidden;
+}