Add support for Trigger and JIT stats in the graphical query plan viewer. Fixes #3397

web/pgadmin/misc/static/explain/css/explain.css

@@ -17,6 +17,24 @@
    opacity: 1;
 }
 
+.pg-explain-stats-area {
+  position: absolute;
+  top: 5px;
+  right: 25px;
+  opacity: 0.5;
+}
+
+.pg-explain-stats-btn {
+  top: 5px;
+  min-width: 25px;
+  border: 1px solid transparent;
+  pointer-events: none;
+}
+
+.pg-explain-stats-area:hover {
+  opacity: 1;
+}
+
 .explain-tooltip {
   display: table-cell;
   text-align: left;
@@ -37,8 +55,6 @@ td.explain-tooltip-val {
 
 .pgadmin-explain-tooltip {
   position: absolute;
-  padding:5px;
-  border: 1px solid white;
   opacity:0;
   color: cornsilk;
   background-color: #010125;
@@ -55,4 +71,4 @@ td.explain-tooltip-val {
   height: 100%;
   width: 100%;
   overflow: auto;
-}
+}

web/pgadmin/misc/static/explain/js/explain.js

@@ -1,7 +1,7 @@
 define('pgadmin.misc.explain', [
   'sources/url_for', 'jquery', 'underscore', 'underscore.string',
-  'sources/pgadmin', 'backbone', 'snapsvg',
-], function(url_for, $, _, S, pgAdmin, Backbone, Snap) {
+  'sources/pgadmin', 'backbone', 'snapsvg', 'explain_statistics',
+], function(url_for, $, _, S, pgAdmin, Backbone, Snap, StatisticsModel) {
 
   pgAdmin = pgAdmin || window.pgAdmin || {};
 
@@ -615,6 +615,9 @@ define('pgadmin.misc.explain', [
         });
         toolTipContainer.css('left', toolTipX);
         toolTipContainer.css('top', toolTipY);
+
+        $('.pgadmin-explain-tooltip').css('padding', '5px');
+        $('.pgadmin-explain-tooltip').css('border', '1px solid white');
       });
 
       // Remove tooltip when mouse is out from node's area
@@ -696,6 +699,7 @@ define('pgadmin.misc.explain', [
     },
     initialize: function() {
       this.set('Plan', new PlanModel());
+      this.set('Statistics', new StatisticsModel());
     },
 
     // Parse the JSON data and fetch its children plans
@@ -718,6 +722,17 @@ define('pgadmin.misc.explain', [
         delete data['Plan'];
       }
 
+      var statistics = this.get('Statistics');
+      if (data && 'JIT' in data) {
+        statistics.set('JIT', data['JIT']);
+        delete data ['JIT'];
+      }
+
+      if (data && 'Triggers' in data) {
+        statistics.set('Triggers', data['Triggers']);
+        delete data ['Triggers'];
+      }
+
       return data;
     },
     toJSON: function() {
@@ -745,6 +760,10 @@ define('pgadmin.misc.explain', [
       plan.draw(
         g, xpos, ypos, undefined, undefined, graphContainer, toolTipContainer
       );
+
+      //Set the Statistics as tooltip
+      var statistics = this.get('Statistics');
+      statistics.set_statistics(toolTipContainer);
     },
   });
 
@@ -784,6 +803,21 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-search-minus',
           }));
 
+      var statsArea = $('<div></div>', {
+        class: 'pg-explain-stats-area btn-group hidden',
+        role: 'group',
+      }).appendTo(container);
+
+      $('<button></button>', {
+        id: 'btn-explain-stats',
+        class: 'btn pg-explain-stats-btn badge',
+        title: 'Statistics',
+        tabindex: 0,
+      }).appendTo(statsArea).append(
+        $('<i></i>', {
+          class: 'fa fa-line-chart',
+        }));
+
       // Main div to be drawn all images on
       var planDiv = $('<div></div>', {
           class: 'pgadmin-explain-container',

web/pgadmin/misc/static/explain/js/explain_statistics.js

@@ -0,0 +1,90 @@
+import $ from 'jquery';
+import Backbone from 'backbone';
+
+// Backbone model for other statistics
+let StatisticsModel = Backbone.Model.extend({
+  defaults: {
+    JIT: [],
+    Triggers: [],
+  },
+
+  set_statistics: function(toolTipContainer) {
+    var jit_stats = this.get('JIT'),
+      triggers_stats = this.get('Triggers');
+
+    if (Object.keys(jit_stats).length > 0 ||
+        Object.keys(triggers_stats).length > 0) {
+      $('.pg-explain-stats-area').removeClass('hidden');
+    }
+
+    $('.pg-explain-stats-area').on('mouseover', () => {
+
+      // Empty the tooltip content if it has any and add new data
+      toolTipContainer.empty();
+      if (Object.keys(jit_stats).length == 0 &&
+        Object.keys(triggers_stats).length == 0) {
+        return;
+      }
+
+      var tooltip = $('<table></table>', {
+        class: 'pgadmin-tooltip-table',
+      }).appendTo(toolTipContainer);
+
+      if (Object.keys(jit_stats).length > 0){
+        tooltip.append('<tr><td class="label explain-tooltip">JIT:</td></tr>');
+        _.each(jit_stats, function(value, key) {
+          tooltip.append('<tr><td class="label explain-tooltip">&nbsp&nbsp'
+          + key + '</td><td class="label explain-tooltip-val">'
+          + value + '</td></tr>');
+        });
+      }
+
+      if (Object.keys(triggers_stats).length > 0){
+        tooltip.append('<tr><td class="label explain-tooltip">Triggers:</td></tr>');
+        _.each(triggers_stats, function(triggers, key_id) {
+          if (triggers instanceof Object) {
+            _.each(triggers, function(value, key) {
+              if (key === 'Trigger Name') {
+                tooltip.append('<tr><td class="label explain-tooltip">&nbsp;&nbsp;'
+                + key + '</td><td class="label explain-tooltip-val">'
+                + value + '</td></tr>');
+              } else {
+                tooltip.append('<tr><td class="label explain-tooltip">&nbsp;&nbsp;&nbsp;&nbsp;'
+                + key + '</td><td class="label explain-tooltip-val">'
+                + value + '</td></tr>');
+              }
+            });
+          }
+          else {
+            tooltip.append('<tr><td class="label explain-tooltip">&nbsp;&nbsp;'
+            + key_id + '</td><td class="label explain-tooltip-val">'
+            + triggers + '</td></tr>');
+          }
+        });
+      }
+
+      // Show toolTip at respective x,y coordinates
+      toolTipContainer.css({
+        'opacity': '0.8',
+        'left': '',
+        'right': '65px',
+        'top': '15px',
+      });
+
+      $('.pgadmin-explain-tooltip').css('padding', '5px');
+      $('.pgadmin-explain-tooltip').css('border', '1px solid white');
+    });
+
+    // Remove tooltip when mouse is out from node's area
+    $('.pg-explain-stats-area').on('mouseout', () => {
+      toolTipContainer.empty();
+      toolTipContainer.css({
+        'opacity': '0',
+        'left': 0,
+        'top': 0,
+      });
+    });
+  },
+});
+
+module.exports = StatisticsModel;