rails_pulse 0.1.1 → 0.1.3

data/app/views/rails_pulse/components/_metric_card.html.erb

@@ -1,22 +1,45 @@
 <%
-  @component_data ||= {}
-  id ||= @component_data[:id]
-  context ||= @component_data[:context]
-  title ||= @component_data[:title]
-  summary ||= @component_data[:summary]
-  line_chart_data ||= @component_data[:line_chart_data]
-  trend_icon ||= @component_data[:trend_icon]
-  trend_amount ||= @component_data[:trend_amount]
-  trend_text ||= @component_data[:trend_text]
+  # Use the passed data object directly
+  id = data[:id]
+  context = data[:context]
+  title = data[:title]
+  summary = data[:summary]
+  line_chart_data = data[:line_chart_data]
+  trend_icon = data[:trend_icon]
+  trend_amount = data[:trend_amount]
+  trend_text = data[:trend_text]
 %>
-<div class="grid-item" data-controller="rails-pulse--chart">
+<div class="grid-item" data-controller="rails-pulse--chart" id="<%= id %>">
   <%= render 'rails_pulse/components/panel', { title: title, card_classes: 'card-compact' } do %>
-    <div class="row mbs-2" style="height: 50px; margin-bottom: 0;">
+    <div class="row mbs-2" style="--columns: 2; align-items: center; margin-bottom: 0;">
       <div class="grid-item">
         <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
       </div>
       <div class="grid-item">
-        <%= line_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
+        <div class="chart-container chart-container--slim">
+          <%
+            # Match chart color to trending icon - use hex equivalents of CSS variables
+            # These colors match the badge colors exactly
+            chart_color = case trend_icon
+            when "trending-up"
+              "#dc2626" # equivalent to --red-600 (negative trend)
+            when "trending-down"
+              "#16a34a" # equivalent to --green-600 (positive trend)
+            else
+              "#ffc91f" # equivalent to --zinc-900 (neutral/primary)
+            end
+
+            chart_options = sparkline_chart_options.deep_merge(
+              color: [chart_color],
+              series: {
+                itemStyle: {
+                  color: chart_color
+                }
+              }
+            )
+          %>
+          <%= bar_chart line_chart_data, height: "100%", options: chart_options %>
+        </div>
       </div>
     </div>
     <div class="mbs-2" style="height: 10px;">
@@ -30,25 +53,11 @@
           end
       %>
       <div class="flex items-center justify-between">
-        <span class="badge <%= badge %> p-0">
+        <span class="badge <%= badge %> badge--trend p-0">
           <%= rails_pulse_icon trend_icon, height: "15px", width: "15px", class: "mie-2" %>
-          <%= trend_amount %>
+          <span class="badge__trend-amount"><%= trend_amount %></span>
           <p class="mis-2 text-subtle text-xs"><%= trend_text %></p>
         </span>
-        <%
-          refresh_path = rails_pulse.cache_path(id: id, context: context, refresh: true)
-          cached_iso = @cached_at ? @cached_at.iso8601 : nil
-        %>
-        <%= link_to refresh_path,
-            data: {
-              controller: "rails-pulse--timezone",
-              rails_pulse__timezone_target_frame_value: "#{id}_card",
-              rails_pulse__timezone_cached_at_value: cached_iso,
-              turbo_frame: "#{id}_card",
-              turbo_prefetch: "false"
-            } do %>
-          <%= rails_pulse_icon 'refresh-cw', height: "15px", width: "15px" %>
-        <% end %>
       </div>
     </div>
   <% end %>

data/app/views/rails_pulse/components/_panel.html.erb

@@ -15,7 +15,7 @@
       <% end %>
       <div class="flex gap items-center">
         <% if help_heading %>
-          <div data-controller="rails-pulse--popover" data-rails-pulse--popover-placement-value="bottom-end">
+          <div data-controller="rails-pulse--popover" data-rails-pulse--popover-placement-value="bottom-start">
             <a href="#"
               data-rails-pulse--popover-target="button"
               data-action="rails-pulse--popover#toggle"

data/app/views/rails_pulse/components/_sparkline_stats.html.erb

@@ -1,10 +1,8 @@
-<div class="row mbs-2" style="height: 50px; margin-bottom: 0;">
-  <div class="grid-item">
-    <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
-  </div>
-  <div class="grid-item">
-    <%= line_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
-  </div>
+<div class="mbs-2">
+  <h4 class="text-xl mbs-1 font-bold"><%= summary %></h4>
+</div>
+<div class="chart-container chart-container--slim">
+  <%= bar_chart line_chart_data, height: "100%", options: sparkline_chart_options %>
 </div>
 <div>
   <span class="badge badge--<%= trend_direction == "down" ? "positive" : "negative" %>-inverse p-0">

data/app/views/rails_pulse/components/_table_head.html.erb

@@ -8,10 +8,15 @@
           <% sort_params = {} %>
           <% sort_params[:zoom_start_time] = @zoom_start if @zoom_start.present? %>
           <% sort_params[:zoom_end_time] = @zoom_end if @zoom_end.present? %>
+          <% sort_params[:selected_column_time] = params[:selected_column_time] if params[:selected_column_time].present? %>
           <%= sort_link @ransack_query, column[:field], column[:label],
             sort_params.merge(
               class: "flex items-center",
-              data: { turbo_prefetch: "false", turbo_action: "replace" }
+              data: {
+                turbo_prefetch: "false",
+                turbo_frame: "index_table",
+                action: "click->rails-pulse--table-sort#updateUrl"
+              }
             ) %>
         <% end %>
       </th>

data/app/views/rails_pulse/dashboard/index.html.erb

@@ -1,64 +1,82 @@
 <div class="row">
-  <%= cached_component(component: "metric_card", id: "average_response_times", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "percentile_response_times", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "request_count_totals", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "error_rate_per_route", class: "grid-item block") %>
+  <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @average_query_times_metric_card } %>
+  <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @percentile_response_times_metric_card } %>
+  <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @request_count_totals_metric_card } %>
+  <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @error_rate_per_route_metric_card } %>
 </div>
 
 <div class="row">
-  <div class="grid-item" style="height:300px">
-    <%= cached_component(
-      component: "panel",
-      id: "dashboard_average_response_time",
-      card_classes: 'b-full',
+  <div class="grid-item">
+    <%= render 'rails_pulse/components/panel', {
       title: 'Average Response Time',
+      card_classes: 'b-full',
       help_heading: 'Average Response Time',
       help_text: 'This panel measures the average server-side response time in milliseconds for all HTTP requests processed by your application. This is the time it takes from the server receiving a request until the request is returned to the client in milliseconds.',
-      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
-      refresh_action: true,
-      content_partial: 'rails_pulse/dashboard/charts/bar_chart')
-    %>
+      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }]
+    } do %>
+      <% if @average_response_time_chart_data.present? %>
+        <div class="chart-container chart-container--slim">
+          <%= bar_chart(
+            @average_response_time_chart_data,
+            code: false,
+            id: "dashboard_average_response_time_chart",
+            height: "100%",
+            options: bar_chart_options(
+              units: "ms"
+            )
+          ) %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 
   <div class="grid-item">
-    <%= cached_component(
-      component: "panel",
-      id: "dashboard_p95_response_time",
-      card_classes: 'b-full',
+    <%= render 'rails_pulse/components/panel', {
       title: 'Query Performance',
+      card_classes: 'b-full',
       help_heading: 'Query Performance',
       help_text: 'This panel measures the 95th percentile response time in milliseconds for queries in your application. This represents the query performance below which 95% of queries fall, indicating the upper-bound performance for most database operations.',
-      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
-      refresh_action: true,
-      content_partial: 'rails_pulse/dashboard/charts/bar_chart')
-    %>
+      actions: [{ url: queries_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }]
+    } do %>
+      <% if @p95_response_time_chart_data.present? %>
+        <div class="chart-container chart-container--slim">
+          <%= bar_chart(
+            @p95_response_time_chart_data,
+            code: false,
+            id: "dashboard_p95_response_time_chart",
+            height: "100%",
+            options: bar_chart_options(
+              units: "ms"
+            )
+          ) %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 </div>
 
 <div class="row">
   <div class="grid-item">
-    <%= cached_component(
-      component: "panel",
-      id: "dashboard_slow_routes",
+    <%= render 'rails_pulse/components/panel', {
       title: 'Slowest Routes This Week',
       help_heading: 'Slowest Routes',
-      help_text: 'This panel shows the slowest routes in your application this week compared to last week, including average response time, week-over-week change, and total request count.',
-      refresh_action: true,
-      content_partial: 'rails_pulse/dashboard/tables/standard_table',
-      class: "table-container")
-    %>
+      help_text: 'This panel shows the slowest routes in your application this week, including average response time and total request count.',
+      actions: [{ url: routes_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
+      card_classes: 'table-container'
+    } do %>
+      <%= render 'rails_pulse/components/table', table_data: @slow_routes_table_data %>
+    <% end %>
   </div>
 
   <div class="grid-item">
-    <%= cached_component(
-      component: "panel",
-      id: "dashboard_slow_queries",
+    <%= render 'rails_pulse/components/panel', {
       title: 'Slowest Queries This Week',
-      help_heading: 'Slowest Queries',
+      help_heading: 'Slowest Queries', 
       help_text: 'This panel shows the slowest database queries in your application this week, including average execution time and when they were last seen.',
-      refresh_action: true,
-      content_partial: 'rails_pulse/dashboard/tables/standard_table',
-      class: "table-container")
-    %>
+      actions: [{ url: queries_path, icon: 'external-link', title: 'View details', data: { turbo_frame: '_top' } }],
+      card_classes: 'table-container'
+    } do %>
+      <%= render 'rails_pulse/components/table', table_data: @slow_queries_table_data %>
+    <% end %>
   </div>
 </div>

data/app/views/rails_pulse/operations/show.html.erb

@@ -4,23 +4,25 @@
 
 <div class="card">
   <%= turbo_frame_tag "operation_#{@operation.id}_details" do %>
+    <% if @operation.operation_type == "sql" %>
+      <div class="mbe-4">
+        <%= render 'rails_pulse/components/code_panel', { value: @operation.label } %>
+      </div>
+    <% end %>
+
     <dl class="descriptive-list">
-      <dt>
-        <% if @operation.operation_type == "sql" %>
-          Query
-        <% elsif ["template", "partial", "layout", "collection"].include?(@operation.operation_type) %>
-          View Render
-        <% else %>
-          <%= html_escape(@operation.label) %>
-        <% end %>
-      </dt>
-      <dd>
-        <% if @operation.operation_type == "sql" %>
-          <%= render 'rails_pulse/components/code_panel', { value: @operation.label } %>
-        <% else %>
+      <% if @operation.operation_type != "sql" %>
+        <dt>
+          <% if ["template", "partial", "layout", "collection"].include?(@operation.operation_type) %>
+            View Render
+          <% else %>
+            <%= html_escape(@operation.label) %>
+          <% end %>
+        </dt>
+        <dd>
           <%= html_escape(@operation.label) %>
-        <% end %>
-      </dd>
+        </dd>
+      <% end %>
 
       <dt>Operation Type</dt>
       <dd><pre><%= @operation.operation_type %></pre></dd>

data/app/views/rails_pulse/queries/_analysis_error.html.erb

@@ -0,0 +1,15 @@
+<div class="panel panel--danger">
+  <div>
+    <h3 class="text-sm bold">Analysis Failed</h3>
+    <p class="text-sm mt-1">
+      <%= error_message %>
+    </p>
+    <div class="mt-3">
+      <%= button_to analyze_query_path(query), method: :post,
+          data: { turbo_frame: "query_analysis" },
+          class: "btn btn--sm" do %>
+        Try Again
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/rails_pulse/queries/_analysis_prompt.html.erb

@@ -0,0 +1,27 @@
+<div class="center py-4">
+  <h3 class="text-lg mb-2">Analyze Query Performance</h3>
+  <p class="mb-4">
+    Get detailed insights about this query's performance, potential issues, and optimization suggestions.
+  </p>
+
+  <% if query.has_recent_operations? %>
+    <%= button_to analyze_query_path(query), method: :post,
+        data: { turbo_frame: "query_analysis" },
+        class: "btn btn--primary" do %>
+      Analyze Query
+    <% end %>
+
+    <p class="text-sm mt-2">
+      Analysis will examine recent executions and provide performance insights.
+    </p>
+  <% else %>
+    <div class="badge badge--warning p-3 mt-3">
+      <div>
+        <h4 class="text-sm bold">No Recent Data Available</h4>
+        <p class="text-sm mt-1">
+          This query hasn't been executed recently. Analysis requires recent execution data to provide meaningful insights.
+        </p>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/rails_pulse/queries/_analysis_results.html.erb

@@ -0,0 +1,87 @@
+<div class="row">
+  <div>
+    <!-- Query Characteristics -->
+    <% if query.query_stats.present? %>
+      <h5>Query Characteristics</h5>
+      <dl class="descriptive-list mbs-4">
+        <dt>Last Analyzed</dt>
+        <dd><%= time_ago_in_words(query.analyzed_at) %></dd>
+        <dt>Query Type</dt>
+        <dd><%= query.query_stats['query_type'] %></dd>
+        <dt>Tables</dt>
+        <dd><%= query.query_stats['table_count'] || 0 %></dd>
+        <dt>Joins</dt>
+        <dd><%= query.query_stats['join_count'] || 0 %></dd>
+        <dt>Complexity Score</dt>
+        <dd><%= query.query_stats['estimated_complexity'] || 0 %></dd>
+        <dt>Has LIMIT</dt>
+        <dd><%= query.query_stats['has_limit'] ? 'Yes' : 'No' %></dd>
+        <dt>Has ORDER BY</dt>
+        <dd><%= query.query_stats['has_order_by'] ? 'Yes' : 'No' %></dd>
+        <dt>Has GROUP BY</dt>
+        <dd><%= query.query_stats['has_group_by'] ? 'Yes' : 'No' %></dd>
+        <dt>Has Subqueries</dt>
+        <dd><%= query.query_stats['has_subqueries'] ? 'Yes' : 'No' %></dd>
+      </dl>
+    <% end %>
+  </div>
+
+  <div>
+    <!-- Execution Analysis -->
+    <% if query.backtrace_analysis.present? %>
+      <h5>Execution Analysis</h5>
+      <dl class="descriptive-list mbs-4">
+        <dt>Total Executions</dt>
+        <dd><%= query.backtrace_analysis['total_executions'] || 0 %></dd>
+        <dt>Unique Locations</dt>
+        <dd><%= query.backtrace_analysis['unique_locations'] || 0 %></dd>
+        <dt>Execution Frequency</dt>
+        <dd><%= query.backtrace_analysis['execution_frequency'] || 0 %>/hour</dd>
+        <dt>Most Common Location</dt>
+        <dd><code><%= query.backtrace_analysis['most_common_location']['location'] || 'N/A' %></code></dd>
+        <dt>N+1 Pattern Detected</dt>
+        <dd>
+          <% if query.backtrace_analysis['potential_n_plus_one'] %>
+            Yes
+          <% else %>
+            No
+          <% end %>
+        </dd>
+      </dl>
+    <% end %>
+  </div>
+</div>
+
+<!-- Issues Summary -->
+<% if query.issues.present? && query.issues.any? %>
+  <div class="panel panel--danger mb-4">
+    <h3 class="text-lg bold mb-3">Issues Detected</h3>
+    <ul>
+      <% query.issues.each do |issue| %>
+        <li><%= issue['description'] %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+
+<!-- Suggestions -->
+<% if query.suggestions.present? && query.suggestions.any? %>
+  <div class="panel panel--info mb-4">
+    <h3 class="text-lg bold mb-3">Optimization Suggestions</h3>
+    <ul>
+      <% query.suggestions.each do |suggestion| %>
+        <li>
+          <%= suggestion['action'] %>.
+          <%= suggestion['benefit'] if suggestion['benefit'].present? %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>
+
+<!-- EXPLAIN Plan -->
+<% if query.explain_plan.present? %>
+  <%= render 'rails_pulse/components/panel', title: 'Execution Plan' do %>
+    <pre class="text-sm"><%= query.explain_plan %></pre>
+  <% end %>
+<% end %>

data/app/views/rails_pulse/queries/_analysis_section.html.erb

@@ -0,0 +1,39 @@
+<%
+  analyze_actions = []
+  analyze_actions << {
+    url: analyze_query_path(query),
+    title: query.analyzed? ? "Re-analyze query" : "Analyze query performance",
+    icon: "refresh-cw",
+    data: {
+      turbo_method: "post",
+      turbo_frame: "query_analysis"
+    }
+  }
+%>
+
+<%= render 'rails_pulse/components/panel', {
+  title: 'Query Analysis',
+  actions: analyze_actions
+} do %>
+  <% if local_assigns[:error_message] %>
+    <%= render 'rails_pulse/queries/analysis_error', error_message: error_message, query: query %>
+  <% elsif query.analyzed? %>
+    <%= render 'rails_pulse/queries/analysis_results', query: query %>
+  <% else %>
+    <div class="flex items-center justify-center pbs-12 pbe-12 pis-6 pie-6 mb-8">
+      <div class="flex items-center gap">
+        <div class="shrink-0">
+          <img src="<%= asset_path('search.svg') %>" class="w-48 h-48" alt="No data available" />
+        </div>
+        <div class="text-subtle pis-8">
+          <p class="text-lg font-semibold mbe-2">Analyze Query Performance</p>
+          <% if query.has_recent_operations? %>
+            <p class="text-sm mbe-2"> Get detailed insights about this query's performance, potential issues, and optimization suggestions. </p>
+          <% else %>
+            <p class="text-sm mbe-2">No recent data available for analysis</p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/rails_pulse/queries/_show_table.html.erb

@@ -1,9 +1,9 @@
 <% columns = [
-  { field: :occurred_at, label: 'Occurred At', class: 'w-auto' },
+  { field: :occurred_at, label: 'Timestamp', class: 'w-auto' },
   { field: :duration, label: 'Duration', class: 'w-32'}
 ] %>
 
-<table class="table mbs-4">
+<table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>

data/app/views/rails_pulse/queries/_table.html.erb

@@ -1,28 +1,26 @@
 <% columns = [
   { field: :normalized_sql, label: 'Query', class: 'w-auto' },
-  { field: :execution_count, label: 'Executions', class: 'w-24' },
-  { field: :average_query_time_ms, label: 'Avg Time', class: 'w-24' },
-  { field: :total_time_consumed, label: 'Total Time', class: 'w-28' },
-  { field: :performance_status, label: 'Status', class: 'w-16' },
-  { field: :occurred_at, label: 'Last Seen', class: 'w-32' }
+  { field: :execution_count_sort, label: 'Executions', class: 'w-24' },
+  { field: :avg_duration_sort, label: 'Avg Time', class: 'w-24' },
+  { field: :total_time_consumed_sort, label: 'Total Time', class: 'w-28' },
+  { field: :performance_status, label: 'Status', class: 'w-16', sortable: false }
 ] %>
 
-<table class="table mbs-4">
+<table class="table mbs-4" data-controller="rails-pulse--table-sort">
   <%= render "rails_pulse/components/table_head", columns: columns %>
 
   <tbody>
-    <% @table_data.each do |query| %>
+    <% @table_data.each do |summary| %>
       <tr>
         <td class="whitespace-nowrap">
           <div>
-            <%= link_to html_escape(truncate_sql(query.normalized_sql)), query_path(query), data: { turbo_frame: '_top', } %>
+            <%= link_to html_escape(truncate_sql(summary.normalized_sql)), query_path(summary.query_id), data: { turbo_frame: '_top', } %>
           </div>
         </td>
-        <td class="whitespace-nowrap"><%= number_with_delimiter query.execution_count %></td>
-        <td class="whitespace-nowrap"><%= query.average_query_time_ms.to_i %> ms</td>
-        <td class="whitespace-nowrap"><%= number_with_delimiter query.total_time_consumed.to_i %> ms</td>
-        <td class="whitespace-nowrap text-center"><%= query_status_indicator(query.average_query_time_ms) %></td>
-        <td class="whitespace-nowrap"><%= human_readable_occurred_at(query.occurred_at) if query.occurred_at %></td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter summary.execution_count %></td>
+        <td class="whitespace-nowrap"><%= summary.avg_duration.to_i %> ms</td>
+        <td class="whitespace-nowrap"><%= number_with_delimiter summary.total_time_consumed.to_i %> ms</td>
+        <td class="whitespace-nowrap text-center"><%= query_status_indicator(summary.avg_duration) %></td>
       </tr>
     <% end %>
   </tbody>

data/app/views/rails_pulse/queries/index.html.erb

@@ -1,37 +1,37 @@
 <%= render 'rails_pulse/components/breadcrumbs' %>
 
-<div class="row">
-  <%= cached_component(component: "metric_card", id: "average_response_times", context: "routes", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "percentile_response_times", context: "routes", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "request_count_totals", context: "routes", class: "grid-item block") %>
-  <%= cached_component(component: "metric_card", id: "error_rate_per_route", context: "routes", class: "grid-item block") %>
-</div>
+<% unless turbo_frame_request? %>
+  <div class="row">
+    <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @average_query_times_metric_card } %>
+    <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @percentile_query_times_metric_card } %>
+    <%= render 'rails_pulse/components/metric_card', { class: "grid-item block", data: @execution_rate_metric_card } %>
+  </div>
+<% end %>
 
 <div
-  class="row"
   data-controller="rails-pulse--index"
   data-rails-pulse--index-chart-id-value="average_query_times_chart"
 >
-  <div class="grid-item">
-    <%= render 'rails_pulse/components/panel', { title: 'Average Query Time', } do %>
-      <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4" do |form| %>
-        <div class="flex items-center grow gap">
-          <%= form.select :occurred_at_range,
-            RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
-            { selected: @selected_time_range },
-            { class: "input" }
-          %>
-          <%= form.select :duration,
-            duration_options(:query),
-            { selected: @selected_response_range },
-            { class: "input" }
-          %>
-          <%= link_to "Reset", queries_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
-          <%= form.submit "Search", class: "btn show@sm" %>
-        </div>
-      <% end %>
+  <%= render 'rails_pulse/components/panel', { title: 'Average Query Time', } do %>
+    <%= search_form_for @ransack_query, url: queries_path, class: "flex items-center justify-between gap mb-4" do |form| %>
+      <div class="flex items-center grow gap">
+        <%= form.select :period_start_range,
+          RailsPulse::QueriesController::TIME_RANGE_OPTIONS,
+          { selected: @selected_time_range },
+          { class: "input" }
+        %>
+        <%= form.select :avg_duration,
+          duration_options(:query),
+          { selected: @selected_response_range },
+          { class: "input" }
+        %>
+        <%= link_to "Reset", queries_path, class: "btn btn--borderless show@md" if params.has_key?(:q) %>
+        <%= form.submit "Search", class: "btn show@sm" %>
+      </div>
+    <% end %>
 
-      <% if @chart_data.present? %>
+    <% if @has_data %>
+      <% if @chart_data && @chart_data.values.any? { |v| v > 0 } %>
         <div
           class="chart-container chart-container--slim"
           data-rails-pulse--index-target="chart"
@@ -56,9 +56,13 @@
         </div>
       <% end %>
 
-      <%= turbo_frame_tag :queries_index_table, data: { rails_pulse__index_target: "indexTable" } do %>
+      <%= turbo_frame_tag :index_table, data: { rails_pulse__index_target: "indexTable" } do %>
         <%= render 'rails_pulse/queries/table' %>
       <% end %>
+    <% else %>
+      <%= render 'rails_pulse/components/empty_state',
+          title: 'No query data found for the selected filters.',
+          description: 'Try adjusting your time range or filters to see results.' %>
     <% end %>
-  </div>
+  <% end %>
 </div>