IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed an issue where tooltip data are not displaying on downloaded graphical explain plan. Fixes #6840

Browse Source
This commit is contained in:
Pradip Parkale 2021-12-06 20:07:11 +05:30 committed by Akshay Joshi
parent f8cb62180e
commit c7a49490a2
2 changed files with 71 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en_US/release_notes_6_3.rst
View File

@ -23,6 +23,7 @@ Housekeeping
Bug fixes
*********
| `Issue #6840 <https://redmine.postgresql.org/issues/6840>`_ - Fixed an issue where tooltip data are not displaying on downloaded graphical explain plan.
| `Issue #6906 <https://redmine.postgresql.org/issues/6906>`_ - Fixed an issue where referenced table drop-down should be disabled in foreign key -> columns after one row is added.
| `Issue #6955 <https://redmine.postgresql.org/issues/6955>`_ - Ensure that sort order should be maintained when renaming a server group.
| `Issue #6963 <https://redmine.postgresql.org/issues/6963>`_ - Ensure that the user should be allowed to set the schema of an extension while creating it.

72
web/pgadmin/misc/static/explain/js/explain.js
View File

@ -937,7 +937,7 @@ define('pgadmin.misc.explain', [
drawImage: function(
g, image_content, currentXpos, currentYpos, graphContainer,
toolTipContainer
toolTipContainer, downloadSVG=false
) {
// Draw the actual image for current node
var image = g.image(
@ -955,6 +955,73 @@ define('pgadmin.misc.explain', [
// Draw tooltip
var image_data = this.toJSON(),
nodeLabel = this.getLabel();
if (downloadSVG) {
var title = '<title>';
_.each(image_data, function (value, key) {
if (
key !== 'image' &&
key !== 'Plans' &&
key !== 'level' &&
key !== 'image' &&
key !== 'image_text' &&
key !== 'xpos' &&
key !== 'ypos' &&
key !== 'width' &&
key !== 'height'
) {
title += `${key}: ${value}\n`;
}
});
title += '</title>';
image.append(Snap.parse(title));
image.mouseover(() => {
// Empty the tooltip content if it has any and add new data
let toolTipBody = toolTipContainer.find('.details-body');
let toolTipTitle = toolTipContainer.find('.details-title');
toolTipTitle.text(nodeLabel);
toolTipBody.empty();
// Remove the title content so that we can show our custom build tooltips.
image.node.textContent = '';
var tooltipTable = $(`
<table class='pgadmin-tooltip-table table table-bordered table-noouter-border table-bottom-border table-hover'>
<tbody></tbody>
</table>`).appendTo(toolTipBody);
var tooltip = tooltipTable.find('tbody');
_.each(image_data, function (value, key) {
if (
key !== 'image' &&
key !== 'Plans' &&
key !== 'level' &&
key !== 'image' &&
key !== 'image_text' &&
key !== 'xpos' &&
key !== 'ypos' &&
key !== 'width' &&
key !== 'height'
) {
key = _.escape(key);
value = _.escape(value);
tooltip.append(`
<tr>
<td class='label explain-tooltip'>${key}</td>
<td class='label explain-tooltip-val'>${value}</td>
</tr>
`);
}
});
toolTipContainer.removeClass('d-none');
toolTipBody.scrollTop(0);
});
}
image.click(() => {
// Empty the tooltip content if it has any and add new data
let toolTipBody = toolTipContainer.find('.details-body');
@ -1033,10 +1100,11 @@ define('pgadmin.misc.explain', [
var onSVGLoaded = function(data) {
var svg_image = Snap();
svg_image.append(data);
var downloadSVG = true;
that.drawImage(
g, svg_image.toDataURL(), startX, startY, graphContainer,
toolTipContainer
toolTipContainer, downloadSVG
);
// This attribute is required to download the file as SVG image.