Merge pull request #1959 from OpenRefine/issue1943

Show reconciliation previews on hover of reconciliation candidates

main/webapp/modules/core/scripts/views/data-table/cell-ui.js

@@ -41,6 +41,23 @@ function DataTableCellUI(dataTableView, cell, rowIndex, cellIndex, td) {
   this._render();
 }
 
+DataTableCellUI.previewMatchedCells = true;
+
+(function() {
+   
+   $.ajax({
+     url: "command/core/get-preference?" + $.param({
+        name: "cell-ui.previewMatchedCells"
+     }),
+    success: function(data) {
+      if (data.value && data.value == "false") {
+        DataTableCellUI.previewMatchedCells = false;
+     }
+   },
+   dataType: "json",
+  });
+})();
+
 DataTableCellUI.prototype._render = function() {
   var self = this;
   var cell = this._cell;
@@ -108,6 +125,10 @@ DataTableCellUI.prototype._render = function() {
         a.attr("href", encodeURI(service.view.url.replace("{{id}}", match.id)));
       }
 
+      if (DataTableCellUI.previewMatchedCells) {
+        self._previewOnHover(service, match, a, a, false);
+      }
+
       $('<span> </span>').appendTo(divContent);
       $('<a href="javascript:{}"></a>')
       .text($.i18n('core-views/choose-match'))
@@ -125,18 +146,19 @@ DataTableCellUI.prototype._render = function() {
           var candidates = r.c;
           var renderCandidate = function(candidate, index) {
             var li = $('<div></div>').addClass("data-table-recon-candidate").appendTo(ul);
+            var liSpan = $('<span></span>').appendTo(li);
 
             $('<a href="javascript:{}">&nbsp;</a>')
             .addClass("data-table-recon-match-similar")
             .attr("title", $.i18n('core-views/match-all-cells'))
-            .appendTo(li).click(function(evt) {
+            .appendTo(liSpan).click(function(evt) {
               self._doMatchTopicToSimilarCells(candidate);
             });
 
             $('<a href="javascript:{}">&nbsp;</a>')
             .addClass("data-table-recon-match")
             .attr("title", $.i18n('core-views/match-this-cell') )
-            .appendTo(li).click(function(evt) {
+            .appendTo(liSpan).click(function(evt) {
               self._doMatchTopicToOneCell(candidate);
             });
 
@@ -144,26 +166,13 @@ DataTableCellUI.prototype._render = function() {
             .addClass("data-table-recon-topic")
             .attr("target", "_blank")
             .text(_.unescape(candidate.name)) // TODO: only use of _.unescape - consolidate
-            .appendTo(li);
+            .appendTo(liSpan);
 
             if ((service) && (service.view) && (service.view.url)) {
               a.attr("href", encodeURI(service.view.url.replace("{{id}}", candidate.id)));
             }
 
-            var preview = null;
-            if ((service) && (service.preview)) {
-              preview = service.preview;
-            }
-
-            if (preview) {
-              a.click(function(evt) {
-                if (!evt.metaKey && !evt.ctrlKey) {
-                  self._previewCandidateTopic(candidate, this, preview);
-                  evt.preventDefault();
-                  return false;
-                }
-              });
-            }
+            self._previewOnHover(service, candidate, liSpan.parent(), liSpan, true);
 
             var score;
             if (candidate.score < 1) {
@@ -171,7 +180,7 @@ DataTableCellUI.prototype._render = function() {
             } else {
               score = Math.round(candidate.score);
             }
-            $('<span></span>').addClass("data-table-recon-score").text("(" + score + ")").appendTo(li);
+            $('<span></span>').addClass("data-table-recon-score").text("(" + score + ")").appendTo(liSpan);
           };
 
           for (var i = 0; i < candidates.length; i++) {
@@ -431,24 +440,18 @@ DataTableCellUI.prototype._postProcessSeveralCells = function(command, params, b
   );
 };
 
-// TODO delete this
-DataTableCellUI.internalPreview = {
-  srchurl: 'https://www.googleapis.com/freebase/v1/search?filter=(all mid:${id})'
-    + '&output=(notable:/client/summary (description citation provenance) type)'
-    + '&key='+CustomSuggest.FREEBASE_API_KEY+'&callback=?',
-  imgurl : 'https://www.googleapis.com/freebase/v1/image${id}?maxwidth=75&errorid=/freebase/no_image_png&key='+CustomSuggest.FREEBASE_API_KEY,
-  width: 430,
-  height: 300
-};
-
-DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, preview) {
+DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, preview, showActions) {
   var self = this;
   var id = candidate.id;
-  var fakeMenu = MenuSystem.createMenu();
+  var fakeMenu = $('<div></div>')
+        .addClass("menu-container");
   fakeMenu
   .width(preview.width?preview.width:414)
-  .addClass('data-table-topic-popup')
+  .addClass('data-table-topic-popup');
+  if (showActions) {
+    fakeMenu
       .html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html"));
+  }
 
   if (preview && preview.url) { // Service has a preview URL associated with it
     var url = encodeURI(preview.url.replace("{{id}}", id));
@@ -457,20 +460,19 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
     .height(preview.height)
     .attr("src", url)
     .appendTo(fakeMenu);
-  } else { // Otherwise use our internal preview
-    var url = encodeURI(DataTableCellUI.internalPreview.srchurl.replace("\${id}", id));
-    $.ajax(url,{dataType:"jsonp"}).done(function(searchResponse) {
-      var data = searchResponse.result[0];
-      var html = $.suggest.suggest.create_flyout(data, preview.imgurl);
-      var container = $('<div></div>').css({fontSize:16}); // Suggest assumes this as a base font size
-      container.append(html);
-      fakeMenu.append(container);
-    });
+  } else {
+    return; // no preview service available
   }
 
-  MenuSystem.showMenu(fakeMenu, function(){});
   MenuSystem.positionMenuLeftRight(fakeMenu, $(elmt));
+  fakeMenu.appendTo(elmt);
 
+  var dismissMenu = function() {
+     fakeMenu.remove();
+     fakeMenu.unbind();  
+  };
+
+  if (showActions) {
     var elmts = DOM.bind(fakeMenu);
     
     elmts.matchButton.html($.i18n('core-views/match-cell'));
@@ -479,15 +481,42 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
     
     elmts.matchButton.click(function() {
         self._doMatchTopicToOneCell(candidate);
-    MenuSystem.dismissAll();
+        dismissMenu();
     });
     elmts.matchSimilarButton.click(function() {
         self._doMatchTopicToSimilarCells(candidate);
-    MenuSystem.dismissAll();
+        dismissMenu();
     });
     elmts.cancelButton.click(function() {
-    MenuSystem.dismissAll();
+        dismissMenu();
     });
+  }
+  return dismissMenu;
+};
+
+/**
+ * Sets up a preview widget to appear when hovering the given DOM element.
+ */
+DataTableCellUI.prototype._previewOnHover = function(service, candidate, hoverElement, coreElement, showActions) {
+    var self = this;
+    var preview = null;
+    if ((service) && (service.preview)) {
+        preview = service.preview;
+    }
+
+    if (preview) {
+        var dismissCallback = null;
+        hoverElement.hover(function(evt) {
+        if (!evt.metaKey && !evt.ctrlKey) {
+            dismissCallback = self._previewCandidateTopic(candidate, coreElement, preview, showActions);
+            evt.preventDefault();
+        }
+        }, function(evt) {
+        if(dismissCallback !== null) {
+            dismissCallback();
+        }
+        });
+    }
 };
 
 DataTableCellUI.prototype._startEdit = function(elmt) {

main/webapp/modules/core/styles/views/data-table-view.less

@@ -299,6 +299,13 @@ a.data-table-flag-off {
   .rounded_corners();
   }
 
+.data-table-topic-popup {
+  z-index: 1010;
+  position: fixed;
+  line-height: 1;
+  white-space: initial;
+  }
+ 
 .data-table-topic-popup-header {
   padding: 0 0 5px;
   }