pg_insights 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 202029a129c23bfda08834a7867975d0e985789e516dcccd24391e9798ef1f63
-  data.tar.gz: 6f72d9f5affa0bd332a2e14d1c609e46741ae87cbabcc70086ce6263d4c3954e
+  metadata.gz: 92152260b0987ce757b707833297038fee48d0dbebd8ea727012052eaa3ee6f2
+  data.tar.gz: 971daab4babe4ef099c544a3cf2bd0a7c64b332c6785a7b33dc9e90463f31b25
 SHA512:
-  metadata.gz: 2a934c35cbd99830313711b601a0b50de06da05aa09d1cd7c49de42bf37d816e224333c13b27d92da623070caadb433ed844789f00d8080804d16a9d36c2ce15
-  data.tar.gz: 892adeea3391c59f4932bfd1aa789523cfe7390cd8b91401e356bc2ac3a0a15ac54084c4eb9fb2fa662c5939c73c73fcb904881addbb9473d41d8e946d8157c1
+  metadata.gz: d562ca875f72512bd5f422a3eb87b835496c808b09282f7f6014ed39deaeeba5afc116f179a08e75a402e49014fff4c1872aabf52a2a693b3b7175eff09d86c7
+  data.tar.gz: d404b95da5502eb7b9a966f0b6eb43e59fb35c9e637f4b77d71d6a6cc06149430a7ce3d73cadc9c9375902bdec785191007cb5e95a9dd41641901d7dcc49484e

data/app/assets/javascripts/pg_insights/application.js

@@ -1,7 +1,3 @@
-//= require chartkick
-//= require Chart.bundle
-//= require_tree .
-
 
 // PG Insights JavaScript
 document.addEventListener('DOMContentLoaded', function() {
@@ -26,6 +22,45 @@ document.addEventListener('DOMContentLoaded', function() {
       this.validateInitialQuery();
       this.setupQueryExamples();
       this.loadTableNames();
+      this.initializeAnalysisViews();
+    },
+    
+    // Initialize analysis views if present
+    initializeAnalysisViews() {
+      const planView = document.getElementById('plan-view');
+      const perfView = document.getElementById('perf-view');
+      const planTab = document.querySelector('[data-view="plan"]');
+      
+      if (planView && planTab && planView.style.display !== 'none') {
+        // Plan view is visible, make sure the tab is properly activated
+        this.activateAnalysisTab('plan');
+      }
+    },
+    
+    // Activate analysis tab
+    activateAnalysisTab(viewType) {
+      const allTabs = document.querySelectorAll('.toggle-btn');
+      const targetTab = document.querySelector(`[data-view="${viewType}"]`);
+      
+      if (targetTab) {
+        allTabs.forEach(tab => tab.classList.remove('active'));
+        targetTab.classList.add('active');
+        
+        const allViews = document.querySelectorAll('.view-content');
+        allViews.forEach(view => view.style.display = 'none');
+        
+        const targetView = document.getElementById(`${viewType}-view`);
+        if (targetView) {
+          targetView.style.display = 'block';
+          
+          // Initialize PEV2 if switching to visual view
+          if (viewType === 'visual' && typeof window.initPEV2 !== 'undefined') {
+            setTimeout(() => {
+              window.initPEV2();
+            }, 100);
+          }
+        }
+      }
     },
 
     // Load queries from data attribute
@@ -46,7 +81,7 @@ document.addEventListener('DOMContentLoaded', function() {
       // Keep this for backward compatibility if needed elsewhere
     },
 
-    // Copy current query functionality
+    
     copyCurrentQuery() {
       const textarea = document.querySelector('.sql-editor');
       const btn = document.querySelector('.btn-icon.btn-copy');
@@ -64,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     },
 
-    // Save or Update the current query
+
     saveCurrentQuery() {
       const textarea = document.querySelector('.sql-editor');
       const sql = textarea?.value.trim();
@@ -79,7 +114,7 @@ document.addEventListener('DOMContentLoaded', function() {
         name = prompt("Enter a name for this new saved query:");
       }
 
-      if (!name) return; // User cancelled prompt
+      if (!name) return;
 
       const method = isUpdate ? 'PATCH' : 'POST';
       const url = isUpdate ? `/pg_insights/queries/${this.currentQueryState.id}` : '/pg_insights/queries';
@@ -133,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     },
 
-    // Query validation
+
     validateQuery(sql) {
       if (!sql || !sql.trim()) {
         return { valid: false, message: "Please enter a SQL query" };
@@ -209,7 +244,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     },
 
-    // Query management
+
     clearQuery() {
       const textarea = document.querySelector('.sql-editor');
       if (textarea) {
@@ -255,7 +290,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     },
 
-    // Preview selected table
+
     previewTable(tableName) {
       if (!tableName) return;
       
@@ -265,12 +300,8 @@ document.addEventListener('DOMContentLoaded', function() {
       if (textarea) {
         textarea.value = sql;
         
-        // Validate the query
         this.validateAndUpdateUI(sql);
-        
-        // Auto-resize textarea
-        textarea.style.height = 'auto';
-        textarea.style.height = Math.max(160, textarea.scrollHeight) + 'px';
+        this.resizeTextarea(textarea);
         
         // Auto-execute the query
         const executeBtn = document.getElementById('execute-btn');
@@ -286,6 +317,35 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     },
 
+    resizeTextarea(textarea) {
+      if (!textarea) return;
+
+      const formContent = textarea.closest('.form-content');
+      if (!formContent) {
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.max(160, Math.min(400, textarea.scrollHeight)) + 'px';
+        return;
+      }
+
+      const formContentStyle = window.getComputedStyle(formContent);
+      const formContentHeight = parseInt(formContentStyle.height);
+      const formContentPadding = parseInt(formContentStyle.paddingTop) + parseInt(formContentStyle.paddingBottom);
+      const availableHeight = formContentHeight - formContentPadding;
+
+      const minHeight = 160;
+      const maxHeight = Math.min(400, Math.max(minHeight, availableHeight - 20));
+
+      textarea.style.height = 'auto';
+      const idealHeight = Math.max(minHeight, Math.min(maxHeight, textarea.scrollHeight));
+      textarea.style.height = idealHeight + 'px';
+
+      if (textarea.scrollHeight > maxHeight) {
+        textarea.style.overflowY = 'auto';
+      } else {
+        textarea.style.overflowY = 'hidden';
+      }
+    },
+
     loadQueryById(queryId) {
       const query = this.config.queries.find(q => q.id.toString() === queryId.toString());
       
@@ -361,7 +421,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     },
 
-    // Event binding
+
     bindEvents() {
       const textarea = document.querySelector('.sql-editor');
       const executeBtn = document.getElementById('execute-btn');
@@ -369,24 +429,20 @@ document.addEventListener('DOMContentLoaded', function() {
       // Real-time validation on input
       if (textarea) {
         textarea.addEventListener('input', () => {
-          // Auto-resize
-          textarea.style.height = 'auto';
-          textarea.style.height = Math.max(160, textarea.scrollHeight) + 'px';
-
-          // Instant validation
+          this.resizeTextarea(textarea);
           this.validateAndUpdateUI(textarea.value);
         });
 
-        // Validation on paste
+
         textarea.addEventListener('paste', () => {
-          // Small delay to let paste complete
           setTimeout(() => {
             this.validateAndUpdateUI(textarea.value);
+            this.resizeTextarea(textarea);
           }, 10);
         });
       }
 
-      // Prevent form submission if button is disabled
+
       if (executeBtn) {
         executeBtn.addEventListener('click', (event) => {
           if (executeBtn.disabled) {
@@ -403,6 +459,17 @@ document.addEventListener('DOMContentLoaded', function() {
       window.clearQuery = () => this.clearQuery();
       window.copyCurrentQuery = () => this.copyCurrentQuery();
       window.saveCurrentQuery = () => this.saveCurrentQuery();
+      
+      // Listen for form submissions and trigger history refresh
+      const form = document.querySelector('.insights-container form');
+      if (form) {
+        form.addEventListener('submit', () => {
+          // Delay to allow the analysis to complete
+          setTimeout(() => {
+            document.dispatchEvent(new CustomEvent('analysisCompleted'));
+          }, 2000);
+        });
+      }
 
       // Table preview dropdown
       const tableSelect = document.getElementById('table-preview-select');

data/app/assets/javascripts/pg_insights/plan_performance.js

@@ -0,0 +1,53 @@
+// Enhanced Plan and Performance Views JavaScript - Simplified
+document.addEventListener('DOMContentLoaded', function() {
+  const PlanPerformanceEnhancer = {
+    init() {
+      // Apply score-based CSS classes to any remaining elements
+      this.applyScoreClasses();
+    },
+
+    applyScoreClasses() {
+      // Find elements that contain score text and apply appropriate classes
+      const scoreElements = document.querySelectorAll('.stat-value, .metric-score, .kpi-value');
+      
+      scoreElements.forEach(element => {
+        const text = element.textContent.toLowerCase().trim();
+        let cssClass = '';
+        
+        switch(text) {
+          case 'excellent':
+            cssClass = 'score-excellent';
+            break;
+          case 'good':
+            cssClass = 'score-good';
+            break;
+          case 'fair':
+            cssClass = 'score-fair';
+            break;
+          case 'poor':
+            cssClass = 'score-poor';
+            break;
+          case 'none':
+            cssClass = 'score-none';
+            break;
+        }
+        
+        if (cssClass) {
+          element.classList.add(cssClass);
+        }
+      });
+    }
+  };
+
+  // Initialize enhanced views
+  PlanPerformanceEnhancer.init();
+
+  // Re-initialize when views are switched
+  document.addEventListener('click', function(e) {
+    if (e.target.matches('.toggle-btn[data-view="plan"]')) {
+      setTimeout(() => PlanPerformanceEnhancer.applyScoreClasses(), 100);
+    } else if (e.target.matches('.toggle-btn[data-view="perf"]')) {
+      setTimeout(() => PlanPerformanceEnhancer.applyScoreClasses(), 100);
+    }
+  });
+});