SQL query SQL code preview as a popup on hover

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"

web/css/hoverMessage.css

@@ -0,0 +1,20 @@
+.hoverMessage {
+
+    box-sizing: border-box;
+    white-space: pre-line;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    border: 1px solid dimgray;
+    padding: .3em;
+
+}
+
+.hoverContainer {
+
+    position: fixed;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    padding: 20px;
+
+}

web/index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="css/joint.min.css"/>
     <link rel="stylesheet" href="css/methodCodeView.css"/>
     <link rel="stylesheet" href="css/settingsView.css"/>
+    <link rel="stylesheet" href="css/hoverMessage.css"/>
     <!-- endbuild -->
     <!-- build:js -->
     <script type="text/javascript" src="jsLib/joint.js"></script>
@@ -25,6 +26,7 @@
     <script type="text/javascript" src="js/ClassTree.js"></script>
     <script type="text/javascript" src="js/Source.js"></script>
     <script type="text/javascript" src="js/UI.js"></script>
+    <script type="text/javascript" src="js/HoverMessage.js"></script>
     <!-- endbuild -->
     <link id="favicon" rel="shortcut icon" href="#"/>
 </head>

web/js/ClassView.js

@@ -498,7 +498,8 @@ ClassView.prototype.createClassInstance = function (name, classMetaData) {
                 keyWordsArray.push(n);
                 arr.push({
                     text: n,
-                    icons: self.getPropertyIcons(qrs[n])
+                    icons: self.getPropertyIcons(qrs[n]),
+                    hover: qrs[n]["SqlQuery"]
                 });
             }
             return arr;
@@ -610,7 +611,7 @@ ClassView.prototype.confirmRender = function (data) {
         uml = joint.shapes.uml, relFrom, relTo,
         classes = {}, connector;
 
-    console.log(data);
+    console.log(data); // todo
     this.filterInherits(data);
 
     // Reset view and zoom again because it may cause visual damage to icons.
@@ -700,6 +701,8 @@ ClassView.prototype.confirmRender = function (data) {
         q.options.height/2 - Math.min(q.options.height/2 - 100, bb.height/2)
     );
 
+    this.onRendered();
+
 };
 
 ClassView.prototype.loadClass = function (className) {
@@ -947,4 +950,18 @@ ClassView.prototype.init = function () {
         return w;
     })();
 
+};
+
+ClassView.prototype.onRendered = function () {
+
+    [].slice.call(document.querySelectorAll(".line-hoverable")).forEach(function (el) {
+        var hm = new HoverMessage(el.getAttribute("hovertext"));
+        el.addEventListener("mouseover", function (e) {
+            hm.attach(e.pageX || e.clientX, e.pageY || e.clientY);
+        });
+        //el.addEventListener("mouseout", function () {
+        //    hm.detach();
+        //});
+    });
+
 };

web/js/HoverMessage.js

@@ -0,0 +1,37 @@
+var HoverMessage = function (text) {
+
+    var self = this;
+
+    this.element = document.createElement("div");
+    this.element.className = "hoverMessage";
+    this.element.textContent = text;
+    this.container = document.createElement("div");
+    this.container.className = "hoverContainer";
+    this.container.appendChild(this.element);
+
+    this.container.addEventListener("mouseout", function (event) {
+        var e = event.toElement || event.relatedTarget;
+        if (e.parentNode == this || e == this) return;
+        self.detach();
+    });
+
+};
+
+HoverMessage.prototype.attach = function (screenX, screenY) {
+
+    var e = this.container,
+        w = Math.min(400, window.innerWidth/2);
+    document.body.appendChild(e);
+    e.style.width = (w = Math.min(e.offsetWidth, window.innerWidth/2)) + "px";
+    e.style.top = (screenY - e.offsetHeight + 15) + "px";
+    e.style.left = Math.min(window.innerWidth - w - 10, screenX - w/2) + "px";
+
+};
+
+HoverMessage.prototype.detach = function () {
+
+    if (!this.element.parentNode) return;
+
+    this.container.parentNode.removeChild(this.container);
+
+};

web/js/Source.js

@@ -1,7 +1,7 @@
 var Source = function (cacheUMLExplorer) {
 
     this.URL = window.location.protocol + "//" + window.location.hostname + ":" +
-        57773/*build.replace:window.location.port*/ + "/UMLExplorer";
+        57776/*build.replace:window.location.port*/ + "/UMLExplorer";
 
     this.cue = cacheUMLExplorer;
 

web/jsLib/joint.js

@@ -17232,6 +17232,10 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
 					tspan.node.addEventListener("click", lines[i]["clickHandler"]);
 					tspan.addClass('line-clickable');
 				}
+				if (typeof lines[i]["hover"] === "string") {
+					tspan.addClass('line-hoverable');
+					tspan.node.setAttribute("hovertext", lines[i]["hover"]);
+				}
 
 		// Make sure the textContent is never empty. If it is, add an additional 
 		// space (an invisible character) so that following lines are correctly