From c509dd3847ad042328d79fc73f73e37bcadc0dad Mon Sep 17 00:00:00 2001 From: Antonin Delpeuch Date: Tue, 19 Feb 2019 16:46:24 +0000 Subject: [PATCH] Show reconciliation previews on hover of reconciliation candidates and matches. Closes #1943. --- .../core/scripts/views/data-table/cell-ui.js | 89 ++++++++++--------- .../core/styles/views/data-table-view.less | 9 +- 2 files changed, 55 insertions(+), 43 deletions(-) diff --git a/main/webapp/modules/core/scripts/views/data-table/cell-ui.js b/main/webapp/modules/core/scripts/views/data-table/cell-ui.js index be5a9d29f..0f46677f9 100644 --- a/main/webapp/modules/core/scripts/views/data-table/cell-ui.js +++ b/main/webapp/modules/core/scripts/views/data-table/cell-ui.js @@ -108,6 +108,8 @@ DataTableCellUI.prototype._render = function() { a.attr("href", encodeURI(service.view.url.replace("{{id}}", match.id))); } + self._previewOnHover(service, match, a); + $(' ').appendTo(divContent); $('') .text($.i18n('core-views/choose-match')) @@ -125,18 +127,19 @@ DataTableCellUI.prototype._render = function() { var candidates = r.c; var renderCandidate = function(candidate, index) { var li = $('
').addClass("data-table-recon-candidate").appendTo(ul); + var liSpan = $('').appendTo(li); $(' ') .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); }); $(' ') .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 +147,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); var score; if (candidate.score < 1) { @@ -171,7 +161,7 @@ DataTableCellUI.prototype._render = function() { } else { score = Math.round(candidate.score); } - $('').addClass("data-table-recon-score").text("(" + score + ")").appendTo(li); + $('').addClass("data-table-recon-score").text("(" + score + ")").appendTo(liSpan); }; for (var i = 0; i < candidates.length; i++) { @@ -428,20 +418,11 @@ 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) { var self = this; var id = candidate.id; - var fakeMenu = MenuSystem.createMenu(); + var fakeMenu = $('
') + .addClass("menu-container"); fakeMenu .width(preview.width?preview.width:414) .addClass('data-table-topic-popup') @@ -454,19 +435,17 @@ 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 = $('
').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(); + }; var elmts = DOM.bind(fakeMenu); @@ -476,15 +455,41 @@ 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, element) { + var self = this; + var preview = null; + if ((service) && (service.preview)) { + preview = service.preview; + } + + if (preview) { + var dismissCallback = null; + element.hover(function(evt) { + if (!evt.metaKey && !evt.ctrlKey) { + dismissCallback = self._previewCandidateTopic(candidate, this, preview); + evt.preventDefault(); + } + }, function(evt) { + if(dismissCallback !== null) { + dismissCallback(); + } + }); + } }; DataTableCellUI.prototype._startEdit = function(elmt) { diff --git a/main/webapp/modules/core/styles/views/data-table-view.less b/main/webapp/modules/core/styles/views/data-table-view.less index da127748b..0469891dd 100644 --- a/main/webapp/modules/core/styles/views/data-table-view.less +++ b/main/webapp/modules/core/styles/views/data-table-view.less @@ -298,6 +298,13 @@ a.data-table-flag-off { padding: @padding_tight; .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; @@ -353,4 +360,4 @@ ul.sorting-dialog-blank-error-positions > li { margin: 2px; cursor: move; .rounded_corners(3px); - } \ No newline at end of file + }