From add473b0f9cbc94208d3021da50bbd86f7bc7d6e Mon Sep 17 00:00:00 2001 From: John Snelson Date: Fri, 24 Sep 2021 15:31:16 +0100 Subject: [PATCH] bug:56024 Fix the tooltips to work when the query plan viewer is embedded in another page --- log.html | 3 --- show.xqy | 2 +- ui/css/style.css | 26 +++++++++++++------------- ui/qv.js | 23 +++++++++++++++-------- 4 files changed, 29 insertions(+), 25 deletions(-) diff --git a/log.html b/log.html index c5919de..3043c45 100644 --- a/log.html +++ b/log.html @@ -50,9 +50,6 @@ - -
-
diff --git a/show.xqy b/show.xqy index 57562c2..57daa1c 100644 --- a/show.xqy +++ b/show.xqy @@ -34,7 +34,7 @@ declare function local:makeHTML($out)
-
+
diff --git a/ui/css/style.css b/ui/css/style.css index d1b1bee..6c40d82 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -140,7 +140,7 @@ table.node-inner-table > * > td:last-child { /********************************************************************************/ /* Tooltip */ -.tooltip { +.qvtooltip { opacity: 0; max-width: 500px; position: absolute; @@ -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; @@ -170,38 +170,38 @@ 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; @@ -209,12 +209,12 @@ table.node-inner-table > * > td:last-child { } -.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; } diff --git a/ui/qv.js b/ui/qv.js index 9bc62aa..6363207 100644 --- a/ui/qv.js +++ b/ui/qv.js @@ -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 { @@ -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]); @@ -333,7 +333,7 @@ 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; @@ -341,12 +341,13 @@ function qv_tooltipContents(parent, data, doFilter) { 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(""); @@ -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); @@ -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()