pg_insights 0.3.2 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c0047e0a987820049e3fd9eb5b358df1c6a75fa50b5906c601080e3eb8473a5
-  data.tar.gz: 41c449fb98740eeaf782e0830f28192ef2a85f92a06aa30d268c3d34915d4d83
+  metadata.gz: ddf26a0084294d0b53c353cdab1af7754064251af9a395f57364bda181aee532
+  data.tar.gz: 8e30fe547411d3a2eb5b67d03dd96637bfb2bee59df96b1a4946a892f0de4e13
 SHA512:
-  metadata.gz: f3f5a1cc793a1fae11794e28e347717d55600e7204a6f0fe3530ecc5ddc9412a3685e2d793f2d5224d24d92b1fa0300f743c8019ce5b5c9a362c74b69233831c
-  data.tar.gz: f92a5dc042459af2a2e6ae00adcbc37d91d99c31c9c62861b54d3a6bd4bd68b3b4ac4dce27500da13acb88b53e772fc39dad937c8ab6df2c754253c29a2493e1
+  metadata.gz: f2bce9427d180b8d043536aad436ef7ab73067f389684f4fbbfb18a2cc6ad410dcbf89a074ebb1e7240d73263078d590986593f8728b03373bd66880cd62f72b
+  data.tar.gz: 18a82e1a0dc340f3bbeb8c74830f08614bea54bbe351f553274e192562e616d4dc2021f4b6e8d851ab072c55525f9be5367bb430e9aeb33eb69e3d9dd3c69e95

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

@@ -1,5 +1,4 @@
 
-
 // PG Insights JavaScript
 document.addEventListener('DOMContentLoaded', function() {
   const InsightsApp = {
@@ -23,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
@@ -43,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');
@@ -61,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();
@@ -76,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';
@@ -130,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     },
 
-    // Query validation
+
     validateQuery(sql) {
       if (!sql || !sql.trim()) {
         return { valid: false, message: "Please enter a SQL query" };
@@ -206,7 +244,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     },
 
-    // Query management
+
     clearQuery() {
       const textarea = document.querySelector('.sql-editor');
       if (textarea) {
@@ -252,7 +290,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     },
 
-    // Preview selected table
+
     previewTable(tableName) {
       if (!tableName) return;
       
@@ -262,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');
@@ -283,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());
       
@@ -358,7 +421,7 @@ document.addEventListener('DOMContentLoaded', function() {
       });
     },
 
-    // Event binding
+
     bindEvents() {
       const textarea = document.querySelector('.sql-editor');
       const executeBtn = document.getElementById('execute-btn');
@@ -366,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) {
@@ -400,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);
+    }
+  });
+});