Skip to content

Commit

Permalink
bug:56024 Fix the tooltips to work when the query plan viewer is embe…
Browse files Browse the repository at this point in the history 
…dded in another page
  • Loading branch information
@jpcs
jpcs committed Sep 24, 2021
1 parent 701c273 commit add473b
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 25 deletions.
3 changes: 0 additions & 3 deletions log.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,6 @@
</span>
</div>

</div>
<div id="tooltip" class="tooltip">

</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion show.xqy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ declare function local:makeHTML($out)
<body onload="qv_showPlan('#viewer', input);">
<div id="wrapper" class="full-height">
<div id="viewer">
<div id="tooltip" class="tooltip"><!-- --></div>
<!-- -->
</div>
</div>
</body>
Expand Down
26 changes: 13 additions & 13 deletions ui/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ table.node-inner-table > * > td:last-child {
/********************************************************************************/
/* Tooltip */

.tooltip {
.qvtooltip {
opacity: 0;
max-width: 500px;
position: absolute;
Expand All @@ -151,17 +151,17 @@ table.node-inner-table > * > td:last-child {
background:white;
border-radius: 10px;
pointer-events: none;
z-index: 5;
z-index: 1000;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.tooltip-main {
.qvtooltip-main {
border-radius: 10px;
border-collapse: collapse;
white-space: pre-wrap;
font-size: 1em;
}
.tooltip-main tbody> tr > * {
.qvtooltip-main tbody> tr > * {
border-bottom: 1px solid #B0B0B0;
text-align: right;
margin: 0px;
Expand All @@ -170,51 +170,51 @@ table.node-inner-table > * > td:last-child {
border-top-right-radius: 0px;
}

.tooltip-main tbody>tr:first-child > *:first-child {
.qvtooltip-main tbody>tr:first-child > *:first-child {
border-top-left-radius: 10px;
}
.tooltip-main tbody>tr:last-child > *:first-child {
.qvtooltip-main tbody>tr:last-child > *:first-child {
border-bottom: 0px;
border-bottom-left-radius: 10px;
}
.tooltip-main tbody>tr > th {
.qvtooltip-main tbody>tr > th {
background: #F0F0F0;
padding: 5px;
text-align: left;
}

.tooltip-main tbody > tr:last-child > * {
.qvtooltip-main tbody > tr:last-child > * {
border-bottom: 0px;
}

.tooltip-inner {
.qvtooltip-inner {
white-space: pre-wrap;
font-size: 1em;
padding: 0px;
border-spacing: 0px;
}

.tooltip-inner tbody> tr > *:first-child {
.qvtooltip-inner tbody> tr > *:first-child {
border-right: 1px solid #B0B0B0;
background:white;
text-align: left;
}


.tooltip-inner tbody > tr > *:last-child {
.qvtooltip-inner tbody > tr > *:last-child {

background:white;
text-align: right;
width:100%

}

.tooltip-inner tr > * {
.qvtooltip-inner tr > * {
border-bottom: 1px solid #B0B0B0;
border-left: 0px;
}

.tooltip-inner tbody > tr:last-child > *{
.qvtooltip-inner tbody > tr:last-child > *{
border-bottom: 0;
}

23 changes: 15 additions & 8 deletions ui/qv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ function qv_tooltipTableRow(table, key, value) {
else if(value!==null && typeof(value)==="object") {
var tr = table.append("tr");
if(key!==null) tr.append("th").text(key);
var table2 = tr.append("td").style("padding", "0px").append("table").attr("class","tooltip-inner").append("tbody");
var table2 = tr.append("td").style("padding", "0px").append("table").attr("class","qvtooltip-inner").append("tbody");
Object.keys(value).forEach((key) => qv_tooltipTableRow(table2,key,value[key]));
}
else {
Expand Down Expand Up @@ -321,7 +321,7 @@ function qv_tooltipContents(parent, data, doFilter) {
return data.hasOwnProperty(key);
};

var table = parent.append("table").attr("class","tooltip-main").append("tbody");
var table = parent.append("table").attr("class","qvtooltip-main").append("tbody");
var display = (key) => {
if (key != "costFunctionValues") {
qv_tooltipTableRow(table,key,data[key]);
Expand All @@ -333,20 +333,21 @@ function qv_tooltipContents(parent, data, doFilter) {
Object.keys(data).filter(seenFilter).forEach(display);
}
else if(data && (!Array.isArray(data) || data.length !== 0)) {
qv_tooltipTableRow(parent.append("table").attr("class","tooltip-main").append("tbody"),null,data);
qv_tooltipTableRow(parent.append("table").attr("class","qvtooltip-main").append("tbody"),null,data);
empty = false;
}
return !empty;
}

function qv_tooltipShow(event, data, doFilter) {

var boundaries = d3.select("body").node().getBoundingClientRect()
const pageWidth = document.body.scrollWidth;
const pageHeight = document.body.scrollHeight;

var x = Math.min (event.pageX + 28, boundaries.right-100)
var y = Math.min (event.pageY - 28, boundaries.bottom-50)
var x = Math.max(Math.min(event.pageX + 28, pageWidth-100),0)
var y = Math.max(Math.min(event.pageY - 28, pageHeight-50),0)

var tooltip = d3.select("#tooltip")
var tooltip = d3.select("#qvtooltip")
.style("left", x + "px")
.style("top", y + "px");
tooltip.html("");
Expand All @@ -356,7 +357,7 @@ function qv_tooltipShow(event, data, doFilter) {
}

function qv_tooltipHide(event) {
var tooltip = d3.select("#tooltip");
var tooltip = d3.select("#qvtooltip");
tooltip.transition()
.duration(500)
.style("opacity", 0);
Expand Down Expand Up @@ -832,6 +833,12 @@ function qv_showPlan(containerid, json) {
.attr("width", width)
.attr("height", height);

if(!d3.select('#qvtooltip').node()) {
d3.select("body").append('div')
.attr('id', 'qvtooltip')
.attr('class', 'qvtooltip');
}

// set up transform and zoom
var g = svg.append("g")
var zoom = d3.zoom()
Expand Down

0 comments on commit add473b

Please sign in to comment.