pg_insights 0.3.2 → 0.4.0

data/app/views/pg_insights/insights/_plan_tree.html.erb

@@ -0,0 +1,30 @@
+<div class="execution-plan-tree">
+  <% if plan_data.present? && plan_data.first %>
+    <% plan = plan_data.first['Plan'] %>
+    <% if plan %>
+      <div class="plan-node-tree">
+        <%= render_plan_node(plan, 0) %>
+      </div>
+    <% end %>
+    
+    <% if plan_data.first['Planning Time'] || plan_data.first['Execution Time'] %>
+      <div class="plan-timing">
+        <% if plan_data.first['Planning Time'] %>
+          <div class="timing-detail">Planning Time: <%= plan_data.first['Planning Time'] %> ms</div>
+        <% end %>
+        <% if plan_data.first['Execution Time'] %>
+          <div class="timing-detail">Execution Time: <%= plan_data.first['Execution Time'] %> ms</div>
+        <% end %>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="plan-error">
+      <p>Unable to parse execution plan data</p>
+      <% if plan_data.is_a?(Hash) && plan_data['error'] %>
+        <div class="error-detail"><%= plan_data['error'] %></div>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+
+ 

data/app/views/pg_insights/insights/_plan_tree_modern.html.erb

@@ -0,0 +1,12 @@
+<div class="plan-tree-modern">
+  <% if plan_data.is_a?(Array) && plan_data.first&.dig("Plan") %>
+    <%= render_plan_node_modern(plan_data.first["Plan"], 0) %>
+  <% elsif plan_data.is_a?(Hash) && plan_data["Plan"] %>
+    <%= render_plan_node_modern(plan_data["Plan"], 0) %>
+  <% else %>
+    <div class="plan-error">
+      <span class="error-icon">⚠️</span>
+      <span>Unable to parse execution plan data</span>
+    </div>
+  <% end %>
+</div> 

data/app/views/pg_insights/insights/_plan_view.html.erb

@@ -0,0 +1,159 @@
+<div id="plan-view" class="view-content"<%= ' style="display: none;"'.html_safe unless @execution_type == 'analyze' && !@result.present? %>>
+  <div class="analysis-dashboard">
+    <!-- Enhanced Plan Header with Rich Metrics -->
+    <div class="analysis-header">
+      <div class="metric-chips">
+        <div class="chip primary">
+          <span class="chip-label">Cost</span>
+          <span class="chip-value"><%= execution.query_cost&.round(1) || 'N/A' %></span>
+        </div>
+        <div class="chip success">
+          <span class="chip-label">Time</span>
+          <span class="chip-value"><%= execution.execution_time_ms ? "#{execution.execution_time_ms.round(1)}ms" : 'N/A' %></span>
+        </div>
+        <div class="chip info">
+          <span class="chip-label">Planning</span>
+          <span class="chip-value"><%= execution.planning_time_ms ? "#{execution.planning_time_ms.round(1)}ms" : 'N/A' %></span>
+        </div>
+        <% if execution.execution_plan.present? %>
+          <% plan_metrics = extract_rich_plan_metrics(execution) %>
+          <% if plan_metrics[:rows_returned] %>
+            <div class="chip secondary">
+              <span class="chip-label">Rows</span>
+              <span class="chip-value"><%= plan_metrics[:rows_returned] %></span>
+            </div>
+          <% end %>
+          <% if plan_metrics[:workers_launched] && plan_metrics[:workers_launched] > 0 %>
+            <div class="chip accent">
+              <span class="chip-label">Workers</span>
+              <span class="chip-value"><%= plan_metrics[:workers_launched] %></span>
+            </div>
+          <% end %>
+          <% if plan_metrics[:memory_usage_kb] && plan_metrics[:memory_usage_kb] > 0 %>
+            <div class="chip warning">
+              <span class="chip-label">Memory</span>
+              <span class="chip-value"><%= "#{plan_metrics[:memory_usage_kb]}KB" %></span>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+      <div class="execution-summary">
+        <span class="summary-text"><%= execution.plan_summary %></span>
+      </div>
+    </div>
+
+    <% if execution.execution_plan.present? %>
+      <!-- Rich Plan Analysis -->
+      <div class="plan-analysis-section">
+        <h4 class="section-title">Plan Analysis</h4>
+        <div class="plan-stats-grid" data-execution-id="<%= execution.id %>">
+          <% plan_metrics = extract_rich_plan_metrics(execution) %>
+          <div class="stat-card">
+            <div class="stat-content">
+              <div class="stat-value" id="plan-nodes-count"><%= plan_metrics[:node_count] || 'N/A' %></div>
+              <div class="stat-label">Plan Nodes</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-content">
+              <div class="stat-value" id="plan-scan-types"><%= plan_metrics[:scan_types]&.any? ? plan_metrics[:scan_types].join(', ') : 'N/A' %></div>
+              <div class="stat-label">Scan Types</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-content">
+              <div class="stat-value" id="plan-indexes-used"><%= plan_metrics[:index_usage]&.any? ? "#{plan_metrics[:index_usage].length} indexes" : 'None' %></div>
+              <div class="stat-label">Indexes Used</div>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-content">
+              <div class="stat-value" id="plan-efficiency" class="<%= score_css_class(calculate_plan_efficiency_score(plan_metrics)) %>"><%= calculate_plan_efficiency_score(plan_metrics) %></div>
+              <div class="stat-label">Efficiency</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Detailed Plan Breakdown -->
+      <div class="plan-breakdown-section">
+        <h4 class="section-title">Execution Details</h4>
+        <div class="plan-details-table" id="plan-details-table">
+          <div class="details-grid">
+            <div class="detail-item">
+              <span class="detail-label">Total Time</span>
+              <span class="detail-value"><%= execution.total_time_ms ? "#{execution.total_time_ms.round(1)}ms" : 'N/A' %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Planning Time</span>
+              <span class="detail-value"><%= execution.planning_time_ms ? "#{execution.planning_time_ms.round(1)}ms" : 'N/A' %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Execution Time</span>
+              <span class="detail-value"><%= execution.execution_time_ms ? "#{execution.execution_time_ms.round(1)}ms" : 'N/A' %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Rows Returned</span>
+              <span class="detail-value"><%= plan_metrics[:rows_returned] || 'N/A' %></span>
+            </div>
+            <div class="detail-item">
+              <span class="detail-label">Rows Scanned</span>
+              <span class="detail-value"><%= plan_metrics[:rows_scanned] ? number_with_delimiter(plan_metrics[:rows_scanned]) : 'N/A' %></span>
+            </div>
+            <% if plan_metrics[:memory_usage_kb] && plan_metrics[:memory_usage_kb] > 0 %>
+              <div class="detail-item">
+                <span class="detail-label">Peak Memory</span>
+                <span class="detail-value"><%= "#{plan_metrics[:memory_usage_kb]} KB" %></span>
+              </div>
+            <% end %>
+            <% if plan_metrics[:workers_launched] && plan_metrics[:workers_launched] > 0 %>
+              <div class="detail-item">
+                <span class="detail-label">Workers</span>
+                <span class="detail-value"><%= "#{plan_metrics[:workers_launched]}/#{plan_metrics[:workers_planned]}" %></span>
+              </div>
+            <% end %>
+            <% if plan_metrics[:sort_methods]&.any? %>
+              <div class="detail-item">
+                <span class="detail-label">Sort Methods</span>
+                <span class="detail-value"><%= plan_metrics[:sort_methods].join(', ') %></span>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <!-- Performance Issues & Recommendations -->
+      <div class="plan-insights-section">
+        <h4 class="section-title">Insights & Recommendations</h4>
+        <div class="plan-insights-grid">
+          <div class="insights-column">
+            <h5>🚨 Performance Issues</h5>
+            <ul id="plan-performance-issues" class="insight-list">
+              <%= render_plan_performance_issues(plan_metrics, execution) %>
+            </ul>
+          </div>
+          <div class="insights-column">
+            <h5>🔧 Optimization Opportunities</h5>
+            <ul id="plan-optimizations" class="insight-list">
+              <%= render_plan_optimizations(plan_metrics, execution) %>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- Visual Execution Plan -->
+      <div class="plan-visualization">
+        <h4 class="section-title">Visual Plan Tree</h4>
+        <div class="plan-flow">
+          <%= render "plan_nodes", plan_data: execution.execution_plan %>
+        </div>
+      </div>
+    <% else %>
+      <div class="analysis-empty">
+        <div class="empty-icon">🔍</div>
+        <div class="empty-message">No execution plan available</div>
+        <div class="empty-hint">Use "Analyze" button to generate execution plan</div>
+      </div>
+    <% end %>
+  </div>
+</div> 

data/app/views/pg_insights/insights/_query_panel.html.erb

@@ -22,14 +22,15 @@
       </div>
 
       <div class="form-actions">
-        <%= f.submit "Execute", class: "btn btn-primary", id: "execute-btn" %>
+        <%= f.submit "Execute", class: "btn btn-primary", id: "execute-btn", name: "execute_button" %>
+        <%= f.submit "Analyze", class: "btn btn-info", id: "analyze-btn", name: "analyze_button" %>
         <button type="button" class="btn btn-secondary" onclick="clearQuery()">Clear</button>
       </div>
 
       <%= render "query_examples" %>
 
       <div class="query-info">
-        <small>SELECT only • 5s timeout • 1k row limit</small>
+        <small><%= query_info_text %></small>
       </div>
     <% end %>
   </div>

data/app/views/pg_insights/insights/_result.html.erb

@@ -1,9 +1,24 @@
-<% if @result.present? %>
+<% if @result.present? || @query_execution&.success? %>
   <div class="results-section">
     <%= render "results_info" %>
-    <%= render "chart_view" %>
-    <%= render "stats_view" %>
-    <%= render "table_view" %>
+    
+    <% if @result.present? %>
+      <%= render "chart_view" %>
+      <%= render "stats_view" %>
+      <%= render "table_view" %>
+    <% end %>
+    
+    <% if @query_execution&.includes_execution? && @query_execution.has_result_data? %>
+      <%= render "execution_table_view", execution: @query_execution %>
+    <% end %>
+    
+      <% if @query_execution&.has_plan_data? %>
+    <%= render "plan_view", execution: @query_execution %>
+    <%= render "perf_view", execution: @query_execution %>
+    <%= render "visual_view", execution: @query_execution %>
+  <% end %>
+  
+  <%= render "compare_view" %>
   </div>
 <% elsif flash.now[:alert] %>
   <div class="results-section">

data/app/views/pg_insights/insights/_results_info.html.erb

@@ -1,19 +1,43 @@
 <div class="results-info">
   <div class="results-meta">
-    <%= "#{@result.rows.size} records • #{@result.columns.size} columns" if @result %>
+    <% if @result.present? %>
+      <%= "#{@result.rows.size} records • #{@result.columns.size} columns" %>
+    <% elsif @query_execution&.success? && @query_execution.has_result_data? %>
+      <%= @query_execution.result_summary %>
+    <% elsif @query_execution&.success? && @query_execution.has_plan_data? %>
+      Analysis completed • <%= @query_execution.formatted_total_time %>
+    <% end %>
   </div>
 
   <div class="view-toggle">
-    <button type="button" class="toggle-btn active" data-view="table">
-      <span class="toggle-icon">📊</span> Table
-    </button>
-    <% if should_show_chart?(@result) %>
-      <button type="button" class="toggle-btn" data-view="chart">
-        <span class="toggle-icon">📈</span> Chart
+    <% if @result.present? || (@query_execution&.includes_execution? && @query_execution.has_result_data?) %>
+      <button type="button" class="toggle-btn<%= ' active' if @result.present? || (@query_execution&.includes_execution? && !@query_execution.has_plan_data?) %>" data-view="table">
+        <span class="toggle-icon">📊</span> Table
+      </button>
+      <% if @result && should_show_chart?(@result) %>
+        <button type="button" class="toggle-btn" data-view="chart">
+          <span class="toggle-icon">📈</span> Chart
+        </button>
+      <% end %>
+      <button type="button" class="toggle-btn" data-view="stats">
+        <span class="toggle-icon">📋</span> Stats
+      </button>
+    <% end %>
+    
+    <% if @query_execution&.has_plan_data? %>
+      <button type="button" class="toggle-btn<%= ' active' if @execution_type == 'analyze' && !(@result.present?) %>" data-view="plan">
+        <span class="toggle-icon">🔍</span> Plan
+      </button>
+      <button type="button" class="toggle-btn" data-view="perf">
+        <span class="toggle-icon">⏱️</span> Perf
+      </button>
+      <button type="button" class="toggle-btn" data-view="visual">
+        <span class="toggle-icon">🌳</span> Visual
       </button>
     <% end %>
-    <button type="button" class="toggle-btn" data-view="stats">
-      <span class="toggle-icon">📋</span> Stats
+    
+    <button type="button" id="compare-tab" class="toggle-btn disabled" data-view="compare" title="Select 2 queries from history to compare">
+      <span class="toggle-icon">⚖️</span> Compare
     </button>
   </div>
 </div>

data/app/views/pg_insights/insights/_results_info_empty.html.erb

@@ -0,0 +1,10 @@
+<div class="results-info">
+  <div class="results-meta">
+    <span>Ready to Query</span>
+  </div>
+  <div class="view-toggle">
+    <button type="button" id="compare-tab" class="toggle-btn disabled" data-view="compare" title="Select 2 queries from history to compare">
+      <span class="toggle-icon">⚖️</span> Compare
+    </button>
+  </div>
+</div> 

data/app/views/pg_insights/insights/_results_panel.html.erb

@@ -1,13 +1,11 @@
 <div class="results-panel">
-  <% if @result.nil? %>
-    <div class="empty-results">
-      <div class="empty-content">
-        <div class="empty-icon">📊</div>
-        <h3>Ready to Query</h3>
-        <p>Enter a SELECT query on the left and click Execute to see results here.</p>
-      </div>
-    </div>
-  <% else %>
+  <% if @result.present? || @query_execution&.success? %>
     <%= render "result" %>
+  <% else %>
+      <div class="results-section">
+      <%= render "results_info_empty" %>
+      <%= render "empty_state" %>
+      <%= render "compare_view" %>
+    </div>
   <% end %>
 </div>

data/app/views/pg_insights/insights/_results_table.html.erb

@@ -1,7 +1,6 @@
 <div class="table-wrapper">
   <div id="tableScroll" class="table-scroll" tabindex="0">
     <table id="resultsTable" class="results-table">
-      <!-- Sticky Header -->
       <thead class="sticky-header">
         <tr>
           <th class="row-num">#</th>
@@ -15,8 +14,6 @@
           <% end %>
         </tr>
       </thead>
-
-      <!-- Table Body -->
       <tbody>
         <% @result.rows.each_with_index do |row, row_index| %>
           <tr class="<%= 'even-row' if row_index.even? %>">
@@ -33,8 +30,6 @@
       </tbody>
     </table>
   </div>
-
-  <!-- Scroll Indicators -->
   <div id="scrollIndicatorH" class="scroll-indicator scroll-indicator-horizontal">
     <div id="scrollThumbH" class="scroll-thumb"></div>
   </div>

data/app/views/pg_insights/insights/_visual_view.html.erb

@@ -0,0 +1,212 @@
+<div id="visual-view" class="view-content" style="display: none;">
+  <div class="visual-plan-container">
+    <!-- PEV2 Vue App Container with scoped Bootstrap -->
+    <div id="pev2-app" class="pev2-bootstrap-scope">
+      <div class="loading-container">
+        <div class="loading-spinner"></div>
+        <p class="loading-text">Loading execution plan visualization...</p>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    // Dynamic dependency loader
+    window.loadPEV2Dependencies = function() {
+      return new Promise((resolve, reject) => {
+        // Check if already loaded
+        if (window.pev2DependenciesLoaded) {
+          resolve();
+          return;
+        }
+        
+        let loadedCount = 0;
+        const totalDependencies = 3; // CSS, Vue, PEV2
+        
+        function checkComplete() {
+          loadedCount++;
+          if (loadedCount === totalDependencies) {
+            window.pev2DependenciesLoaded = true;
+            resolve();
+          }
+        }
+        
+        // Load Bootstrap CSS with scoping
+        const bootstrapCSS = document.createElement('link');
+        bootstrapCSS.rel = 'stylesheet';
+        bootstrapCSS.href = 'https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css';
+        bootstrapCSS.onload = () => {
+          // Add PEV2 CSS
+          const pev2CSS = document.createElement('link');
+          pev2CSS.rel = 'stylesheet';
+          pev2CSS.href = 'https://unpkg.com/pev2/dist/pev2.css';
+          pev2CSS.onload = checkComplete;
+          pev2CSS.onerror = reject;
+          document.head.appendChild(pev2CSS);
+        };
+        bootstrapCSS.onerror = reject;
+        document.head.appendChild(bootstrapCSS);
+        
+        // Load Vue.js
+        const vueScript = document.createElement('script');
+        vueScript.src = 'https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js';
+        vueScript.onload = checkComplete;
+        vueScript.onerror = reject;
+        document.head.appendChild(vueScript);
+        
+        // Load PEV2
+        const pev2Script = document.createElement('script');
+        pev2Script.src = 'https://unpkg.com/pev2/dist/pev2.umd.js';
+        pev2Script.onload = checkComplete;
+        pev2Script.onerror = reject;
+        document.head.appendChild(pev2Script);
+      });
+    };
+    
+    // Initialize PEV2 after dependencies are loaded
+    window.initPEV2 = function() {
+      if (window.pev2Initialized) {
+        return; // Already initialized
+      }
+      
+      // Show loading state
+      document.getElementById('pev2-app').innerHTML = `
+        <div class="d-flex align-items-center justify-content-center" style="height: 500px;">
+          <div class="text-center">
+            <div class="spinner-border text-primary mb-3" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="text-muted">Loading dependencies...</p>
+          </div>
+        </div>
+      `;
+      
+      // Load dependencies dynamically
+      window.loadPEV2Dependencies()
+        .then(() => {
+          if (!window.Vue || !window.pev2) {
+            throw new Error('Dependencies failed to load properly');
+          }
+          
+          const { createApp } = Vue;
+          
+          // Get the execution plan data as JavaScript object
+          const executionData = <%= raw(@query_execution.execution_plan.to_json) if @query_execution&.execution_plan.present? %> || null;
+          const queryText = <%= raw(@query_execution.sql_text.to_json) if @query_execution&.sql_text.present? %> || '';
+          
+          // PEV2 expects the plan as a JSON string
+          let planSource = '{}';
+          if (executionData && Array.isArray(executionData) && executionData.length > 0) {
+            planSource = JSON.stringify(executionData[0]);
+          } else if (executionData && typeof executionData === 'object') {
+            planSource = JSON.stringify(executionData);
+          }
+          
+          console.log('PEV2 Plan Source:', planSource);
+          
+          // Create Vue app with scoped container
+          const app = createApp({
+            data() {
+              return {
+                plan: planSource,
+                queryText: queryText
+              }
+            },
+            template: `
+              <div class="d-flex flex-column vh-100">
+                <pev2 :plan-source="plan" :plan-query="queryText" />
+              </div>
+            `
+          });
+          
+          app.component('pev2', pev2.Plan);
+          app.mount('#pev2-app');
+          window.pev2Initialized = true;
+          
+        })
+        .catch(error => {
+          console.error('Error loading PEV2 dependencies:', error);
+          document.getElementById('pev2-app').innerHTML = `
+            <div class="alert alert-danger m-4">
+              <h5>❌ Failed to load execution plan visualization</h5>
+              <p>Could not load the required dependencies (Vue.js, PEV2). This could be due to:</p>
+              <ul>
+                <li>Network connectivity issues</li>
+                <li>CDN service unavailable</li>
+                <li>Browser security settings</li>
+              </ul>
+              <p><strong>Alternative:</strong> Use the <strong>Plan</strong> or <strong>Perf</strong> tabs for execution plan analysis.</p>
+              <details>
+                <summary>Technical Details</summary>
+                <code>${error.message}</code>
+              </details>
+            </div>
+          `;
+        });
+    };
+  </script>
+  
+  <!-- Scoped CSS to prevent Bootstrap conflicts -->
+  <style>
+    /* Scope Bootstrap styles to only affect PEV2 container */
+    .pev2-bootstrap-scope {
+      /* Isolate Bootstrap styles */
+      all: initial;
+      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    }
+    
+    .pev2-bootstrap-scope * {
+      box-sizing: border-box;
+    }
+    
+    /* Custom loading styles */
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 500px;
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      margin: 16px;
+    }
+    
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #e9ecef;
+      border-left: 4px solid #007bff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-bottom: 16px;
+    }
+    
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    
+    .loading-text {
+      color: #6c757d;
+      font-size: 14px;
+      margin: 0;
+    }
+    
+    /* Ensure visual view takes full height */
+    #visual-view {
+      padding: 0;
+    }
+    
+    .visual-plan-container {
+      width: 100%;
+      height: 100%;
+      min-height: 500px;
+    }
+    
+    #pev2-app {
+      width: 100%;
+      height: 100%;
+      background: white;
+    }
+  </style>
+</div> 

data/app/views/pg_insights/insights/index.html.erb

@@ -1,5 +1,8 @@
 
 <div class="insights-container" data-queries="<%= @insight_queries.to_json %>">
   <%= render "query_panel" %>
-  <%= render "results_panel" %>
+  <div class="results-section-wrapper">
+    <%= render "history_bar" %>
+    <%= render "results_panel" %>
+  </div>
 </div>

data/app/views/pg_insights/timeline/compare.html.erb

@@ -120,7 +120,7 @@
             <div class="panel-header">
               <h3>📊 Key Metrics</h3>
             </div>
-            <div class="metrics-table">
+            <div class="timeline-metrics-table">
               <% if @performance_comparison && @performance_comparison[:metrics] %>
                 <% @performance_comparison[:metrics].each do |metric, data| %>
                   <div class="metric-row">
@@ -529,8 +529,8 @@
   border-radius: 4px;
 }
 
-/* Metrics Table */
-.metrics-table {
+/* Timeline Metrics Table */
+.timeline-metrics-table {
   padding: var(--space-md);
 }
 

data/config/routes.rb

@@ -4,6 +4,12 @@ PgInsights::Engine.routes.draw do
   post "/", to: "insights#index"
   get :table_names, to: "insights#table_names"
 
+  # Query analysis endpoints
+  post :analyze, to: "insights#analyze"
+  get "execution/:id", to: "insights#execution_status", as: :execution_status
+  get :query_history, to: "insights#query_history", defaults: { format: :json }
+  post :compare, to: "insights#compare", defaults: { format: :json }
+
   resources :queries, only: [ :create, :update, :destroy ]
 
   get :health, to: "health#index"