finery 3.0.1 → 3.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a40d95bfaaec38b95bad08470391cd99a51a83fe31644fc72cf513b6ac0b69f
-  data.tar.gz: e0e41fd7197e9f4a14b288f253bb865ce97cc85a4937b5f2e64112468fe1940b
+  metadata.gz: 581c9c47c4c0b79536e441a4d4471fe021dfb782988a397e4ce781436cabe9fb
+  data.tar.gz: f5cf561aaff9f8362b28a28217b01b5591ce73b90d0c1eb7cd54dd67d51c8590
 SHA512:
-  metadata.gz: 6df58aa1566ca58dbb5f0fcfdae18ba56657a1fdba72a87a4e77e1415cef15852efb2522703939870906523fb099e28849d4788a6a8ef6eb1e9f6f90fe1f1645
-  data.tar.gz: a4e647be9599ba0869f71be477f3829de5d6e26e266f879b9b5f37ddf740af7404a90801b06b68d427c18f5450a610371cbb16a6170c666d220902d35716073c
+  metadata.gz: 07b7c9c15a2d9a433c2d0b4d45faeba9d2d7ea5c64fcd06b7099f8b849e2aa0e385b026b9198051230efa8c5fe15c0f368a43d3d0fc0319f7df3c6ce2a756f00
+  data.tar.gz: 8a4f16b2080bbc21071068bd93995c08255a0aac0dd3a72ea58fb1f51e0935580c36ede132d0617b8ce6163420f84d1a898b61d05c265e1ddf71d0784b342873

data/README.md

@@ -53,7 +53,7 @@ gem "finery"
 Run:
 
 ```sh
-rails generate finery:install
+rails generate blazer:install
 rails db:migrate
 ```
 
@@ -763,7 +763,6 @@ data_sources:
     # optional settings
     ssl_verify: true # false by default
 ```
->>>>>>> 41a6b49 (Added support for ClickHouse)
 
 ### Druid
 

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

@@ -5,7 +5,7 @@
 //= require ./stupidtable
 //= require ./stupidtable-custom-settings
 //= require ./jquery.stickytableheaders
-//= require ./selectize
+//= require selectize.min
 //= require ./highlight.min
 //= require ./moment
 //= require ./moment-timezone-with-data
@@ -17,7 +17,7 @@
 //= require ./chartjs-plugin-annotation.min
 //= require ./ace
 //= require ./Sortable
-//= require ./bootstrap
+//= require bootstrap.bundle.min
 //= require ./vue.global.prod
 //= require ./routes
 //= require ./queries

data/app/assets/javascripts/blazer/controllers/application.js.erb

@@ -0,0 +1,2 @@
+import { Application, Controller } from "<%= javascript_url "stimulus.min" %>"
+window.Stimulus = Application.start()

data/app/assets/javascripts/blazer/controllers/index.js

@@ -7,5 +7,7 @@
 //= require ./code_controller
 //= require ./datepicker_controller
 //= require ./daterangepicker_controller
+//= require ./more_controller
+//= require ./navbar_padding_controller
 //= require ./selectize_controller
 //= require ./unsaved_controller

data/app/assets/javascripts/blazer/controllers/more_controller.js

@@ -0,0 +1,13 @@
+Stimulus.register("more", class extends Controller {
+  static targets = [ "field", "show" ]
+
+  connect() {
+    this.fieldTargets.forEach((e) => { e.style.display = "none" })
+    this.showTarget.classList.remove("d-none")
+  }
+
+  show(event) {
+    this.fieldTargets.forEach((e) => { e.style.display = "block" })
+    this.showTarget.classList.add("d-none")
+  }
+})

data/app/assets/javascripts/blazer/controllers/navbar_padding_controller.js

@@ -0,0 +1,7 @@
+Stimulus.register("navbar-padding", class extends Controller {
+  static targets = [ "navbar" ]
+
+  connect() {
+    this.element.style.paddingTop = (this.navbarTarget.clientHeight || 0) + "px"
+  }
+})

data/app/assets/stylesheets/blazer/application.css

@@ -1,20 +1,26 @@
 /*
- *= require ./bootstrap-sprockets
- *= require ./bootstrap
- *= require ./selectize
+ *= require bootstrap.min
+ *= require selectize.bootstrap5
  *= require ./github
  *= require ./daterangepicker
  *= require_self
  */
 
+.hide {
+  display: none !important;
+}
+
 pre {
   border: none;
   border-radius: 0;
 }
 
-body {
-  padding-top: 15px;
-  padding-bottom: 15px;
+.text-pre-line {
+  white-space: pre-line;
+}
+
+body.with-navbar {
+  padding-top: 3.5rem;
 }
 
 table.results-table {
@@ -52,7 +58,11 @@ input.search:focus {
   outline: none;
 }
 
-.form-inline .selectize-control, .text-right .selectize-control {
+.selectize-control {
+  min-width: 10em;
+}
+
+.text-right .selectize-control {
   display: inline-block;
   vertical-align: middle;
   margin-left: 5px;
@@ -157,26 +167,10 @@ input.search:focus {
   background-color: #fff;
 }
 
-.glyphicon-remove {
-  cursor: pointer;
-  color: #d9534f;
-  display: none;
-  float: right;
-  margin-top: 3px;
-}
-
-.list-group li:hover .glyphicon-remove {
-  display: inline;
-}
-
-.list-group {
+#queries.list-group {
   cursor: move;
 }
 
-#header a.active {
-  color: #999;
-}
-
 [v-cloak] {
   display: none;
 }
@@ -197,34 +191,6 @@ input.search:focus {
   color: red;
 }
 
-.small-form {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 400px;
-}
-
-.alert {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-h1, h2, h3, h4, p, hr, .table, .navbar, #header, .alert, .form-group {
-  margin-top: 0;
-  margin-bottom: 15px;
-}
-
-.double-margin, .chart-container {
-  margin-bottom: 30px;
-}
-
-h1 {
-  font-size: 24px;
-}
-
-h2 {
-  font-size: 20px;
-}
-
 .schema-table {
   max-width: 500px;
 }

data/app/controllers/blazer/base_controller.rb

@@ -103,6 +103,7 @@ module Blazer
     end
 
     def variable_params(resource, var_params = nil)
+      return {} unless resource.present?
       permitted_keys = resource.variables
       var_params ||= request.query_parameters
       var_params.slice(*permitted_keys)

data/app/controllers/blazer/queries_controller.rb

@@ -61,6 +61,7 @@ module Blazer
     def show
       @statement = @query.statement_object
       @success = process_vars(@statement)
+      @data_sources = [Blazer.data_sources[@query.data_source]]
 
       @smart_vars = {}
       @sql_errors = []
@@ -273,7 +274,7 @@ module Blazer
           raise Error, @error if @error && Rails.env.test?
 
           data = csv_data(@columns, @rows, @data_source)
-          query_params = variable_params.select { |k| @query.variables.include?(k) }
+          query_params = variable_params(@query).select { |k| @query.variables.include?(k) }
           name = @query.try(:name).presence || "query"
           filename = "#{name}-#{query_params.to_query}".parameterize + ".csv"
           send_data data, type: "text/csv; charset=utf-8", disposition: "attachment", filename: filename

data/app/helpers/blazer/base_helper.rb

@@ -36,6 +36,12 @@ module Blazer
       k.nil? ? "null" : k.to_s
     end
 
+    def blazer_var_default?(key)
+      value = request.query_parameters[key]
+      return true if value.to_s == ""
+      return true if @data_sources.any? { |source| source.variable_defaults[key].to_s == value.to_s }
+    end
+
     def blazer_format_annotations(annotations)
       return [] unless annotations.is_a?(Array)
       sorted = annotations.sort_by { |annotation| annotation[:min_date] }

data/app/views/blazer/_navbar.html.erb

@@ -0,0 +1,40 @@
+<nav class="navbar navbar-expand-md fixed-top bg-body-tertiary" data-navbar-padding-target="navbar">
+  <div class="container">
+    <div class="d-flex flex-nowrap mw-100">
+      <span class="navbar-brand d-none d-sm-inline">Finery</span>
+      <button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <span class="navbar-brand d-sm-none text-truncate"><%= blazer_title || "Finery" %></span>
+    </div>
+    <div class="collapse navbar-collapse" id="navbarCollapse">
+      <ul class="navbar-nav me-auto mb-2 mb-md-0">
+        <li class="nav-item">
+          <%= link_to "Home", blazer.root_path, class: "nav-link" %>
+        </li>
+        <li class="nav-item">
+          <%= link_to "Checks", blazer.checks_path, class: "nav-link" %>
+        </li>
+        <% if Blazer.uploads? %>
+          <li class="nav-item">
+            <%= link_to "Uploads", blazer.uploads_path, class: "nav-link" %>
+          </li>
+        <% end %>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+            New
+          </a>
+          <ul class="dropdown-menu">
+            <li><%= link_to "Query", blazer.new_query_path, class: "dropdown-item" %></li>
+            <li><%= link_to "Dashboard", blazer.new_dashboard_path, class: "dropdown-item" %></li>
+            <li><%= link_to "Check", blazer.new_check_path(query_id: @query&.id), class: "dropdown-item" %></li>
+            <% if Blazer.uploads? %>
+              <%= link_to "Upload", blazer.new_upload_path, class: "dropdown-item" %>
+            <% end %>
+          </ul>
+        </li>
+      </ul>
+      <%= yield(:nav) %>
+    </div>
+  </div>
+</nav>

data/app/views/blazer/_variables.html.erb

@@ -3,7 +3,7 @@
   <script>
     <%= blazer_js_var "timeZone", Blazer.time_zone.tzinfo.name %>
   </script>
-  <form id="bind" method="get" action="<%= action %>" class="form-inline" style="margin-bottom: 15px;" data-controller="autosubmit" data-action="change->autosubmit#call">
+  <form id="bind" method="get" action="<%= action %>" class="form-inline row g-3" style="margin-bottom: 15px;" data-controller="autosubmit more" data-action="change->autosubmit#call">
     <% date_vars = ["start_time", "end_time"] %>
     <% if (date_vars - @bind_vars).empty? %>
       <% @bind_vars = @bind_vars - date_vars %>
@@ -12,19 +12,17 @@
     <% end %>
 
     <% @bind_vars.each_with_index do |var, i| %>
-      <div class="form-group">
-      <%= label_tag var, var %>
-      <% if (data = @smart_vars[var]) %>
-        <%= select_tag var, options_for_select([[nil, nil]] + data, selected: var_params[var]), data: { controller: "selectize" }, style: "margin-right: 20px; width: 200px; display: none;" %>
+      <div class="col-12 col-md-2" <% if blazer_var_default?(var) %>data-more-target="field"<% end %>>
+      <%= label_tag var, var, class: "form-label" %>
+      <% if @smart_vars.key? var %>
+        <%= select_tag var, options_for_select(@smart_vars[var], var_params[var]), include_blank: true, data: { controller: "selectize" }, class: "form-select" %>
       <% elsif var.end_with?("_at") || var == "start_time" || var == "end_time" %>
-
-        <div class="selectize-control single" style="width: 200px;">
-          <div id="<%= var %>-select" class="selectize-input" style="display: inline-block;" data-controller="datepicker">
+        <div class="selectize-control single">
+          <div id="<%= var %>-select" class="selectize-input" data-controller="datepicker">
             <%= hidden_field_tag var, var_params[var], data: { datepicker_target: "input" }  %>
             <span data-datepicker-target="span">Select a date</span>
           </div>
         </div>
-
       <% else %>
         <%= text_field_tag var, var_params[var], autofocus: i == 0 && !var.end_with?("_at") && !var_params[var], class: "form-control" %>
       <% end %>
@@ -36,14 +34,20 @@
         <%= hidden_field_tag var, var_params[var] %>
       <% end %>
 
-      <%= label_tag nil, date_vars.join(" & ") %>
-      <div class="selectize-control single" style="width: 300px;">
+      <div class="selectize-control single col-12 col-md-4">
+      <%= label_tag nil, date_vars.join(" & "), class: "form-label" %>
         <div id="reportrange" class="selectize-input" style="display: inline-block;" data-controller="daterangepicker">
           <span>Select a time range</span>
         </div>
       </div>
     <% end %>
 
-    <input type="submit" class="btn btn-success" value="Run" style="vertical-align: top;" />
+    <div class="col-12 col-md-2 d-flex align-items-end d-none" data-more-target="show">
+      <button type="button" class="btn btn-info" data-action="more#show:prevent">More filters</button>
+    </div>
+
+    <div class="col-12">
+      <input type="submit" class="btn btn-success col-12 col-md-1 offset-md-11" value="Run">
+    </div>
   </form>
 <% end %>

data/app/views/blazer/checks/_form.html.erb

@@ -7,7 +7,7 @@
     <div class="alert alert-danger"><%= @check.errors.full_messages.first %></div>
   <% end %>
 
-  <div class="form-group">
+  <div class="form-group mb-3">
     <%= f.label :query_id, "Query" %>
     <div class="hide">
       <%= f.select :query_id, [], {include_blank: true} %>
@@ -21,7 +21,7 @@
   </div>
 
   <% if @check.respond_to?(:check_type) %>
-    <div class="form-group">
+    <div class="form-group mb-3">
       <%= f.label :check_type, "Alert if" %>
       <div class="hide">
         <% check_options = [["Any results (bad data)", "bad_data"], ["No results (missing data)", "missing_data"]] %>
@@ -33,7 +33,7 @@
       </script>
     </div>
   <% elsif @check.respond_to?(:invert) %>
-    <div class="form-group">
+    <div class="form-group mb-3">
       <%= f.label :invert, "Fails if" %>
       <div class="hide">
         <%= f.select :invert, [["Any results (bad data)", false], ["No results (missing data)", true]] %>
@@ -45,7 +45,7 @@
   <% end %>
 
   <% if @check.respond_to?(:schedule) && Blazer.check_schedules %>
-    <div class="form-group">
+    <div class="form-group mb-3">
       <%= f.label :schedule, "Run every" %>
       <div class="hide">
         <%= f.select :schedule, Blazer.check_schedules.map { |v| [v, v] } %>
@@ -56,13 +56,13 @@
     </div>
   <% end %>
 
-  <div class="form-group">
+  <div class="form-group mb-3">
     <%= f.label :emails %>
     <%= f.text_field :emails, placeholder: "Optional, comma separated", class: "form-control" %>
   </div>
 
   <% if Blazer.slack? %>
-    <div class="form-group">
+    <div class="form-group mb-3">
       <%= f.label :slack_channels %>
       <%= f.text_field :slack_channels, placeholder: "Optional, comma separated", class: "form-control" %>
     </div>

data/app/views/blazer/checks/index.html.erb

@@ -1,25 +1,6 @@
 <% blazer_title "Checks" %>
 
 <div id="header">
-  <div class="pull-right" style="line-height: 34px;">
-    <div class="btn-group">
-      <%= link_to "New Check", new_check_path, class: "btn btn-info" %>
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        <span class="caret"></span>
-        <span class="sr-only">Toggle Dropdown</span>
-      </button>
-      <ul class="dropdown-menu">
-        <li><%= link_to "Home", root_path %></li>
-        <% if Blazer.uploads? %>
-          <li><%= link_to "Uploads", uploads_path %></li>
-        <% end %>
-        <li role="separator" class="divider"></li>
-        <li><%= link_to "New Query", new_query_path %></li>
-        <li><%= link_to "New Dashboard", new_dashboard_path %></li>
-      </ul>
-    </div>
-  </div>
-
   <input id="search" type="text" placeholder="Start typing a query or state" style="width: 300px; display: inline-block;" class="search form-control" />
 </div>
 

data/app/views/blazer/dashboards/_form.html.erb

@@ -3,21 +3,23 @@
     <div class="alert alert-danger"><%= @dashboard.errors.full_messages.first %></div>
   <% end %>
 
-  <div class="form-group">
+  <div class="form-group mb-3">
     <%= f.label :name %>
     <%= f.text_field :name, class: "form-control" %>
   </div>
-  <div class="form-group" v-show="queries.length">
+  <div class="form-group mb-3" v-show="queries.length">
     <%= f.label :charts %>
     <ul id="queries" class="list-group">
-      <li class="list-group-item" v-for="(query, index) in queries" :key="query.id" v-cloak>
-        <span class="glyphicon glyphicon-remove" aria-hidden="true" v-on:click="remove(index)"></span>
+      <li class="list-group-item d-flex justify-content-between align-items-center" v-for="(query, index) in queries" :key="query.id" v-cloak>
         {{ query.name }}
+        <button class="btn btn-sm btn-danger" v-on:click="remove(index)">
+          remove
+        </button>
         <input type="hidden" name="query_ids[]" :value="query.id">
       </li>
     </ul>
   </div>
-  <div class="form-group" v-cloak>
+  <div class="form-group mb-3" v-cloak>
     <%= f.label :query_id, "Add Chart" %>
     <%= select_tag :query_id, nil, {include_blank: true, placeholder: "Select chart"} %>
   </div>

data/app/views/blazer/dashboards/show.html.erb

@@ -1,22 +1,11 @@
 <% blazer_title @dashboard.name %>
-
-<div class="topbar">
-  <div class="container">
-    <div class="row" style="padding-top: 13px;">
-      <div class="col-sm-9">
-        <%= render partial: "blazer/nav" %>
-        <h3 style="line-height: 34px; display: inline; margin-left: 5px;">
-          <%= @dashboard.name %>
-        </h3>
-      </div>
-      <div class="col-sm-3 text-right">
-        <%= link_to "Edit", edit_dashboard_path(@dashboard, params: variable_params(@dashboard)), class: "btn btn-info" %>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div style="margin-bottom: 60px;"></div>
+<% content_for :nav do %>
+  <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+    <li class="nav-item">
+      <%= link_to "Edit", blazer.edit_dashboard_path(@dashboard, params: variable_params(@dashboard)), class: "nav-link" %>
+    </li>
+  </ul>
+<% end %>
 
 <% if @data_sources.any? { |ds| ds.cache_mode != "off" } %>
   <p class="text-muted" style="float: right;">

data/app/views/blazer/queries/_form.html.erb

@@ -7,38 +7,44 @@
 <div id="app" v-cloak>
   <%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off"}, data: { controller: "unsaved", action: "unsaved#clear input->unsaved#set" } do |f| %>
     <div class="row">
-      <div id="statement-box" class="col-xs-8">
+      <div id="statement-box" class="col-8">
         <div class= "form-group">
           <%= f.hidden_field :statement %>
           <div id="editor-container">
             <div id="editor" :style="{ height: editorHeight }"><%= @query.statement %></div>
           </div>
         </div>
-        <div class="form-group text-right" style="margin-bottom: 8px;">
-          <div class="pull-left" style="margin-top: 8px;">
-            <%= link_to "Back", :back %>
-            <a :href="docsPath" target="_blank" style="margin-left: 40px;">Docs</a>
-            <a :href="schemaPath" target="_blank" style="margin-left: 40px;">Schema</a>
+        <div class="form-group d-flex justify-content-between my-2">
+          <div>
+            <%= link_to "Back", :back, class: "me-2" %>
+            <a :href="docsPath" target="_blank" class="m-2">Docs</a>
+            <a :href="schemaPath" target="_blank" class="m-2">Schema</a>
           </div>
 
-          <%= f.select :data_source, Blazer.data_sources.map { |_, ds| [ds.name, ds.id] }, {}, class: ("hide" if Blazer.data_sources.size <= 1), style: "width: 140px;" %>
-          <div id="tables" style="display: inline-block; width: 250px; margin-right: 10px;">
-            <select id="table_names" style="width: 240px;" placeholder="Preview table"></select>
+          <div class="row">
+            <div class="col">
+              <%= f.select :data_source, Blazer.data_sources.map { |_, ds| [ds.name, ds.id] }, {}, class: ("hide" if Blazer.data_sources.size <= 1) %>
+            </div>
+            <div class="col">
+              <select id="table_names" placeholder="Preview table"></select>
+            </div>
           </div>
+        </div>
+        <div class="form-group">
           <a v-on:click="run" v-if="!running" class="btn btn-info" style="vertical-align: top; width: 70px;">Run</a>
           <a v-on:click="cancel" v-if="running" class="btn btn-danger" style="vertical-align: top; width: 70px;">Cancel</a>
         </div>
       </div>
-      <div class="col-xs-4">
-        <div class="form-group">
+      <div class="col-4">
+        <div class="form-group mb-3">
           <%= f.label :name %>
           <%= f.text_field :name, class: "form-control" %>
         </div>
-        <div class="form-group">
+        <div class="form-group mb-3">
           <%= f.label :description %>
           <%= f.text_area :description, placeholder: "Optional", style: "height: 80px;", class: "form-control" %>
         </div>
-        <div class="form-group text-right">
+        <div class="form-group text-end mb-3">
           <%= f.submit "For Enter Press", class: "hide" %>
           <% if @query.persisted? %>
             <%= link_to "Delete", query_path(@query), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>

data/app/views/blazer/queries/home.html.erb

@@ -1,35 +1,22 @@
 <div id="queries">
-  <div id="header">
-    <div class="pull-right" style="line-height: 34px;">
-      <% if blazer_user %>
-        <%= link_to "All", root_path, class: !params[:filter] ? "active" : nil, style: "margin-right: 40px;" %>
-
-        <% if Blazer.audit %>
-          <%= link_to "Viewed", root_path(filter: "viewed"), class: params[:filter] == "viewed" ? "active" : nil, style: "margin-right: 40px;" %>
-        <% end %>
-
-        <%= link_to "Mine", root_path(filter: "mine"), class: params[:filter] == "mine" ? "active" : nil, style: "margin-right: 40px;" %>
+  <ul class="nav nav-pills d-flex flex-column flex-sm-row mb-3">
+    <li class="text-start flex-fill">
+    <input type="text" v-model="searchTerm" placeholder="Start typing a query, dashboard, or person" autofocus class="search form-control flex-fill align-self-stretch" />
+    </li>
+    <% if blazer_user %>
+      <li class="nav-item">
+        <%= link_to "All", blazer.root_path, class: { "nav-link": true, active: !params[:filter] } %>
+      </li>
+      <% if Blazer.audit %>
+        <li class="nav-item">
+          <%= link_to "Viewed", blazer.root_path(filter: "viewed"), class: { "nav-link": true, active: params[:filter] == "viewed" } %>
+        </li>
       <% end %>
-
-      <div class="btn-group">
-        <%= link_to "New Query", new_query_path, class: "btn btn-info" %>
-        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <span class="caret"></span>
-          <span class="sr-only">Toggle Dropdown</span>
-        </button>
-        <ul class="dropdown-menu">
-          <li><%= link_to "Checks", checks_path %></li>
-          <% if Blazer.uploads? %>
-            <li><%= link_to "Uploads", uploads_path %></li>
-          <% end %>
-          <li role="separator" class="divider"></li>
-          <li><%= link_to "New Dashboard", new_dashboard_path %></li>
-          <li><%= link_to "New Check", new_check_path %></li>
-        </ul>
-      </div>
-    </div>
-    <input type="text" v-model="searchTerm" placeholder="Start typing a query, dashboard, or person" style="width: 300px; display: inline-block;" v-focus class="search form-control" />
-  </div>
+      <li class="nav-item">
+        <%= link_to "Mine", blazer.root_path(filter: "mine"), class: { "nav-link": true, active: params[:filter] == "mine" } %>
+      </li>
+    <% end %>
+  </ul>
 
   <table class="table">
     <thead>

data/app/views/blazer/queries/run.html.erb

@@ -131,7 +131,7 @@
 
     <% unless @only_chart && !@no_chart %>
       <% header_width = 100 / @columns.size.to_f %>
-      <div class="results-container">
+      <div class="results-container overflow-x-scroll">
         <% if @columns == ["QUERY PLAN"] %>
           <pre><code><%= @rows.map { |r| r[0] }.join("\n") %></code></pre>
         <% elsif @columns == ["PLAN"] && @data_source.adapter == "druid" %>