MB-71194 - Fix location and size of query plan tool tips

There were two related problems:

1) The tooltip vertical size could be unbounded, especially in the
case of "Project" nodes for queries with many explicitly specified
fields. The tooltip size could easily exceed the vertical size of the
window.

2) By default the tooltip's top left corner is the location where the
user clicked, even if that meant that much of the tooltip would be off
the bottom of the screen.

This fix adds scrollbars to the tooltip, and ensures that tooltip's
top is never so low as to cause the bottom of the tooltip to go off
the screen.

Change-Id: I25f9d63904c9de912c7b5455426571eab5b1295b
Reviewed-on: https://review.couchbase.org/c/query-ui/+/242542
Well-Formed: Restriction Checker
Reviewed-by: Eben Haber <eben@couchbase.com>
Tested-by: Eben Haber <eben@couchbase.com>

Author: ebenhaber

query-ui/angular-directives/qw.explain.viz.component.js

@@ -27,7 +27,7 @@ import { CommonModule }                     from '@angular/common';
 import _                                    from "lodash";
 
 import {select as d3Select,
-  event as d3Event}                         from "d3-selection";
+  event as d3Event, mouse as d3Mouse}       from "d3-selection";
 import {linkVertical as d3LinkVertical,
         linkHorizontal as d3LinkHorizontal} from "d3-shape";
 
@@ -95,6 +95,7 @@ class QwExplainViz extends MnLifeCycleHooksToStream {
     //console.log("Directive ngAfterInit, input: " + this.qwJsonDataTable2);
     outerElement = this.element.nativeElement.querySelector('.wb-results-explain');
     wrapperElement = this.element.nativeElement.querySelector('.wb-explain-d3-wrapper');
+    mainElement = window.document.querySelector('.main-content');
 
     // when used in the workbench, we get an observable tied to the current
     // query result
@@ -155,6 +156,7 @@ var queryService;
 var outerElement;
 var wrapperElement;
 var simpleTree; // underlying data
+var mainElement;
 
 function makeTree(element) {
   clearContent();
@@ -529,6 +531,11 @@ function makeTooltip(d) {
 
   // the tooltip is relative to the query plan div, so we need to know its offset.
   var outerBox = outerElement.getBoundingClientRect();
+  // tooltip is positioned absolutely, so compute location relative to top-level container
+  var mainBox = mainElement?.getBoundingClientRect() || [0,0,0,0];
+  var relativeTop = outerBox.top - mainBox.top;
+
+  var containerPadding = 8;
   // create the new tooltip
   var tooltip_div = d3Select(".wb-results-explain")
       .append("div")
@@ -538,14 +545,36 @@ function makeTooltip(d) {
   //  return tooltip_div.style("display", "none");
   //})
   ;
+  var mouseCoords = d3Mouse(mainElement);
+
+  var pointerX = mouseCoords[0];
+  var pointerY = mouseCoords[1];
 
   if (d.data.tooltip && d.data.tooltip.length > 0) {
+    var maxTooltipWidth = Math.max(200, outerBox.width - containerPadding * 2);
+    var maxTooltipHeight = Math.max(120, outerBox.height - containerPadding * 2);
+
     tooltip_div.transition().duration(300).style("display", "block");
-    var header_div = tooltip_div.append("div");
-    header_div.html('<a class="ui-dialog-titlebar-close modal-close" onclick="console.log(\"click\")"> X </a>');
     tooltip_div.html(d.data.tooltip)
-        .style("left", (d3Event.x - outerBox.left) + "px")
-        .style("top", (d3Event.y - outerElement.offsetTop/2) + "px");
+        .style("max-width", maxTooltipWidth + "px")
+        .style("max-height", maxTooltipHeight + "px")
+        .style("overflow", "auto");
+
+    // Place near the click point, then clamp inside the visible explain area.
+    var tooltipNode = tooltip_div.node();
+    var tooltipBox = tooltipNode ? tooltipNode.getBoundingClientRect() : null;
+    var tooltipWidth = tooltipBox ? tooltipBox.width : 0;
+    var tooltipHeight = tooltipBox ? tooltipBox.height : 0;
+    // don't allow bottom of tooltip to go off the panel
+    const maxTop = relativeTop + (outerBox.height - tooltipHeight);
+
+    var left = Math.max(containerPadding,
+      Math.min(pointerX, outerBox.width - tooltipWidth - containerPadding));
+    var top = pointerY < maxTop ? pointerY : maxTop;
+
+    tooltip_div
+      .style("left", left + "px")
+      .style("top", top + "px");
     }
 
   d3Event.stopPropagation();

query-ui/angular-directives/qw.explain.viz.template.html

@@ -38,14 +38,14 @@
         <em *ngFor="let f of data.analysis.fields">{{ f }}&nbsp;&nbsp;</em>
       </div>
 
-      <div class="column row flex-grow-half flex-right">
+      <div class="column row flex-grow-half flex-right margin-top-half">
         <span (click)="leftRight()" class="icon fa-caret-square-o-left wb-explain-plan-orient"  [ngClass]="{'wb-explain-plan-selected-orient' : orientIs(1)}" title="change plan direction"></span>
         <span (click)="rightLeft()" class="icon fa-caret-square-o-right wb-explain-plan-orient" [ngClass]="{'wb-explain-plan-selected-orient' : orientIs(3)}" title="change plan direction"></span>
         <span (click)="bottomTop()" class="icon fa-caret-square-o-down wb-explain-plan-orient"  [ngClass]="{'wb-explain-plan-selected-orient' : orientIs(4)}" title="change plan direction"></span>
         <span (click)="topDown()" class="icon fa-caret-square-o-up wb-explain-plan-orient" [ngClass]="{'wb-explain-plan-selected-orient' : orientIs(2)}" title="change plan direction"></span>
       </div>
 
-      <div class="column row flex-right">
+      <div class="column row flex-right margin-top-half">
         <span (click)="zoomIn()"  class="icon fa-search-minus wb-explain-plan-zoom" title="zoom out - or use scroll wheel"></span>
         <span (click)="zoomOut()" class="icon fa-search-plus wb-explain-plan-zoom" title="zoom in - or use scroll wheel"></span>
       </div>

query-ui/ui-current/query.css

@@ -168,8 +168,12 @@ textarea.ng-invalid-number {
 
 /* styles for D3-based query explain plan ---------------------------------- */
 .wb-explain-summary {
+  display: flex;
+  align-items: flex-start;
   font-size: .75rem;
   padding: .25rem 1rem;
+  max-height: 3rem;
+  overflow: clip;
 }
 .wb-explain-summary .column {
   flex-grow: 1;
@@ -186,7 +190,7 @@ textarea.ng-invalid-number {
 }
 .wb-explain-d3-wrapper, .wb-results-chart {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 3.5rem);
   position: relative;
   font-family: OpenSans;
 }
@@ -288,6 +292,8 @@ marker {
   border-top: solid .25rem #4287d6;
   box-shadow: 0px 5px 14px 2px rgba(0,0,0,0.14);
   min-width: 200px;
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
   z-index: 10;
 }
 .wb-explain-tooltip h5 {