SQL Tooltip Above Nodes

CHANGELOG.md

@@ -31,9 +31,11 @@
   `Column` datatypes are properly visualized. Scatter Plot can display points of
   different color, shape and size, all as defined by the data within the
   `Table`.
-- [`onHide callback for visualizations][1383]. JavaScript visualizations can now
-  implement a method `onHide()` that will be called whenever the visualization
-  is hidden or closed on screen.
+- [`onHide` callback for visualizations][1383]. JavaScript visualizations can
+  now implement a method `onHide()` that will be called whenever the
+  visualization is hidden or closed on screen.
+- [Tooltip for SQL Visualization][1414]. The tooltip for SQL Visualization is
+  now correctly displayed over other nodes.
 
 <br/>![Bug Fixes](/docs/assets/tags/bug_fixes.svg)
 

src/rust/ide/view/graph-editor/src/builtin/visualization/java_script/sql.js

@@ -13,6 +13,9 @@ const customSqlTypePrefix = 'Standard.Database.Data.Sql.Sql_Type.'
 /** Specifies opacity of interpolation background color. */
 const interpolationBacgroundOpacity = 0.3
 
+/** A regular expression for parsing CSS transforms. */
+const matrixRegex = /matrix(3d)?\(.*?\)/
+
 /** The CSS styles for the visualization. */
 const visualizationStyle = `
     <style>
@@ -80,15 +83,15 @@ loadScript('https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-forma
  * interpolated query parameters.
  */
 class SqlVisualization extends Visualization {
-    // TODO Change the type below once #837 is done:
-    // 'Standard.Database.Data.Table.Table | Standard.Database.Data.Column.Column'
     static inputType = 'Standard.Database.Data.Table.Table | Standard.Database.Data.Column.Column'
     static label = 'SQL Query'
 
     constructor(api) {
         super(api)
         this.setPreprocessorModule('Standard.Visualization.Sql.Visualization')
         this.setPreprocessorCode(`x -> here.prepare_visualization x`)
+
+        this.tooltip = null
     }
 
     onDataReceived(data) {
@@ -126,7 +129,9 @@ class SqlVisualization extends Visualization {
         containers.scrollable.innerHTML = visHtml
         this.dom.appendChild(parentContainer)
 
-        const tooltip = new Tooltip(parentContainer)
+        const tooltipParent = document.querySelector('#root > .scene > .front > .view_projection')
+        const tooltip = new Tooltip(tooltipParent)
+        this.tooltip = tooltip
         const baseMismatches = this.dom.getElementsByClassName('mismatch')
         const extendedMismatchAreas = this.dom.getElementsByClassName('mismatch-mouse-area')
         setupMouseInteractionForMismatches(tooltip, baseMismatches)
@@ -142,6 +147,7 @@ class SqlVisualization extends Visualization {
         while (this.dom.firstChild) {
             this.dom.removeChild(this.dom.lastChild)
         }
+        this.removeTooltip()
     }
 
     /**
@@ -170,6 +176,18 @@ class SqlVisualization extends Visualization {
         }
     }
 
+    onHide() {
+        this.removeTooltip()
+    }
+
+    /** Removes the tooltip element, if it has been created. */
+    removeTooltip() {
+        if (this.tooltip !== null) {
+            this.tooltip.destroy()
+            this.tooltip = null
+        }
+    }
+
     setSize(size) {
         this.dom.setAttributeNS(null, 'width', size[0])
         this.dom.setAttributeNS(null, 'height', size[1])
@@ -372,6 +390,10 @@ class Tooltip {
      * ignored.
      */
     hide(actor) {
+        if (this.tooltip == null) {
+            console.log('hide called on destroyed tooltip')
+            return
+        }
         if (this.tooltipOwner === null || this.tooltipOwner == actor) {
             this.tooltipOwner = null
             this.tooltip.style.opacity = 0
@@ -384,6 +406,11 @@ class Tooltip {
      * Tooltip content is specified by the `message` which can include arbitrary HTML.
      */
     show(actor, message) {
+        if (this.tooltip == null) {
+            console.log('show called on destroyed tooltip')
+            return
+        }
+
         this.tooltipOwner = actor
         this.tooltip.innerHTML = message
         this.tooltip.style.opacity = 1
@@ -393,7 +420,7 @@ class Tooltip {
         const scrollElement = codeContainer.parentElement
 
         const scrollOffsetX = scrollElement.scrollLeft
-        const scrollOffsetY = scrollElement.scrollTop + scrollElement.offsetHeight
+        const scrollOffsetY = scrollElement.scrollTop
 
         const interpolantOffsetX = interpolantContainer.offsetLeft
         const interpolantOffsetY = interpolantContainer.offsetTop
@@ -402,11 +429,36 @@ class Tooltip {
         const belowPadding = 3
         const belowOffset = interpolantContainer.offsetHeight + belowPadding
 
-        const x = interpolantOffsetX - scrollOffsetX + centeringOffset
-        const y = interpolantOffsetY - scrollOffsetY + belowOffset
+        const visualization = actor.closest('.visualization')
+        const visMatrix = getMatrix(visualization)
+
+        const x = visMatrix.m41 + interpolantOffsetX - scrollOffsetX + centeringOffset
+        const y = visMatrix.m42 + interpolantOffsetY - scrollOffsetY + belowOffset
 
         this.tooltip.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
     }
+
+    /** Removes the element itself.
+     *
+     * The tooltip instance is not usable after this has been called.
+     */
+    destroy() {
+        this.tooltipOwner = null
+        if (this.tooltip == null) {
+            console.log('destroy called twice on a tooltip')
+            return
+        }
+        this.tooltip.remove()
+        this.tooltip = null
+    }
+}
+
+/** A helper function that returns a parsed CSS transformation matrix for a given element. */
+function getMatrix(element) {
+    const transform = window.getComputedStyle(element).transform
+    const matrixString = transform.match(matrixRegex)[0]
+    const matrix = new DOMMatrix(matrixString)
+    return matrix
 }
 
 /**

src/rust/ide/view/graph-editor/src/component/visualization/foreign/java_script/instance.rs

@@ -173,9 +173,9 @@ impl InstanceModel {
         display_object.add_child(root_node.display_object());
         let on_hide                       = get_method(&object.as_ref(), method::ON_HIDE).ok();
         if let Some(f) = on_hide {
+            let object_clone = object.clone();
             display_object.set_on_hide(move |_| {
-                let context = &JsValue::NULL;
-                let _       = f.call0(context);
+                let _       = f.call0(&object_clone);
             });
         }
         Ok(InstanceModel{object,on_data_received,set_size,root_node,logger,preprocessor_change,