sage-rails 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed7edcaa26884623654d7ad0a2cd3eca12af0e9bb7053002a6df9f5da7f0951b
-  data.tar.gz: e82079453e9055fb342d1e40672139643f7efe84e036dfac121f98a8e7c7981c
+  metadata.gz: cdf45a19f9379935c65e7ee18b70a4cc2ce0df00b71fe13586c89ffe15180524
+  data.tar.gz: 86c1c3fda7b28206020da469995a5bcc6215c61b9249e60e0b121307b31ab66d
 SHA512:
-  metadata.gz: 8010a563e726d175637ef8d7312ba86ab375f260e09d8e8b7904554461a51f15c7d0b1eca9d0af05d7e7d8f8103375f414f2639e81f1f7b1bb45a0f502a8904d
-  data.tar.gz: 5762e832bea8af62b7e14060ac553f17f2c9122a8e60bbe5481a60fc6cb61e5bc2462503e7c68369b264a88cf29dd3d7deead45edb94c791a286883abaad828c
+  metadata.gz: 717576a4f348569e8610e9675132456b8d213156e666b930c1600e55c513583a05086e4d1082d4efc90ba7a7b3bccd76fbbde81b4e883c318fc94b3fe14a248c
+  data.tar.gz: c3c47a9212d72c6360a3cadcf2e4f20db07d16ad5fe9864faad84a95011ca164d251b0ad2df36e0c0e097e57d6549e9025f25061d000e3dcfa1974b659b9c6f6

data/README.md

@@ -53,6 +53,14 @@ After installation, run the migrations:
 $ rails db:migrate
 ```
 
+### Sprockets
+
+If using sprockets, add this line to your app/javascript/application.js file:
+```js
+import "sage/application";
+```
+
+
 ## LLM Configuration
 
 Sage supports both Anthropic Claude and OpenAI models for SQL generation. Configure your preferred AI service in `config/initializers/sage.rb`:

data/app/assets/javascripts/sage/controllers/query_toggle_controller.js

@@ -2,21 +2,65 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["content", "icon"]
+  static values = {
+    storageKey: { type: String, default: "sage_query_sql_visibility" }
+  }
+
+  connect() {
+    // Load saved visibility state from localStorage
+    this.loadVisibilityState()
+  }
 
   toggle() {
     try {
       const content = this.contentTarget
       const icon = this.iconTarget
-      
-      if (content.style.display === "none") {
-        content.style.display = "block"
-        icon.textContent = "visibility_off"
+
+      const isHidden = window.getComputedStyle(content).display === "none"
+
+      if (isHidden) {
+        this.showContent()
       } else {
-        content.style.display = "none"
-        icon.textContent = "visibility"
+        this.hideContent()
       }
     } catch (error) {
       console.error("Error in toggle:", error)
     }
   }
+
+  showContent() {
+    this.contentTarget.style.display = "block"
+    this.iconTarget.textContent = "visibility_off"
+    this.saveVisibilityState(true)
+  }
+
+  hideContent() {
+    this.contentTarget.style.display = "none"
+    this.iconTarget.textContent = "visibility"
+    this.saveVisibilityState(false)
+  }
+
+  saveVisibilityState(isVisible) {
+    try {
+      localStorage.setItem(this.storageKeyValue, JSON.stringify(isVisible))
+    } catch (error) {
+      console.error("Error saving visibility state:", error)
+    }
+  }
+
+  loadVisibilityState() {
+    try {
+      const savedState = localStorage.getItem(this.storageKeyValue)
+      if (savedState !== null) {
+        const isVisible = JSON.parse(savedState)
+        if (isVisible) {
+          this.showContent()
+        } else {
+          this.hideContent()
+        }
+      }
+    } catch (error) {
+      console.error("Error loading visibility state:", error)
+    }
+  }
 }

data/app/controllers/sage/queries_controller.rb

@@ -140,8 +140,9 @@ module Sage
       @query ||= Blazer::Query.find_by(id: params[:query_id]) if params[:query_id]
 
       # use query data source when present
-      data_source = @query.data_source if @query && @query.data_source
+      data_source = @query.data_source if @query && @query.data_source.present?
       data_source ||= params[:data_source]
+      data_source ||= "main" # Fallback to main data source
       @data_source = Blazer.data_sources[data_source]
 
       # Prefer params statement over query's saved statement (for live editing)

data/app/javascript/sage/application.js

@@ -0,0 +1,16 @@
+// Sage Stimulus controllers initialization
+// This file is loaded via importmap and registers all Sage controllers with the host app's Stimulus instance
+
+import { registerControllers } from "sage"
+
+// Wait for the host app's Stimulus to be available
+if (window.Stimulus) {
+  registerControllers(window.Stimulus)
+} else {
+  // If Stimulus isn't ready yet, wait for it
+  document.addEventListener('DOMContentLoaded', () => {
+    if (window.Stimulus) {
+      registerControllers(window.Stimulus)
+    }
+  })
+}

data/app/javascript/sage/controllers/query_toggle_controller.js

@@ -2,23 +2,65 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["content", "icon"]
+  static values = {
+    storageKey: { type: String, default: "sage_query_sql_visibility" }
+  }
+
+  connect() {
+    // Load saved visibility state from localStorage
+    this.loadVisibilityState()
+  }
 
   toggle() {
     try {
       const content = this.contentTarget
       const icon = this.iconTarget
-      
+
       const isHidden = window.getComputedStyle(content).display === "none"
-      
+
       if (isHidden) {
-        content.style.display = "block"
-        icon.textContent = "visibility_off"
+        this.showContent()
       } else {
-        content.style.display = "none"
-        icon.textContent = "visibility"
+        this.hideContent()
       }
     } catch (error) {
       console.error("Error in toggle:", error)
     }
   }
+
+  showContent() {
+    this.contentTarget.style.display = "block"
+    this.iconTarget.textContent = "visibility_off"
+    this.saveVisibilityState(true)
+  }
+
+  hideContent() {
+    this.contentTarget.style.display = "none"
+    this.iconTarget.textContent = "visibility"
+    this.saveVisibilityState(false)
+  }
+
+  saveVisibilityState(isVisible) {
+    try {
+      localStorage.setItem(this.storageKeyValue, JSON.stringify(isVisible))
+    } catch (error) {
+      console.error("Error saving visibility state:", error)
+    }
+  }
+
+  loadVisibilityState() {
+    try {
+      const savedState = localStorage.getItem(this.storageKeyValue)
+      if (savedState !== null) {
+        const isVisible = JSON.parse(savedState)
+        if (isVisible) {
+          this.showContent()
+        } else {
+          this.hideContent()
+        }
+      }
+    } catch (error) {
+      console.error("Error loading visibility state:", error)
+    }
+  }
 }

data/app/javascript/sage.js

@@ -5,7 +5,7 @@ import SelectController from "sage/controllers/select_controller"
 import DashboardController from "sage/controllers/dashboard_controller"
 import ReverseInfiniteScrollController from "sage/controllers/reverse_infinite_scroll_controller"
 import VariablesController from "sage/controllers/variables_controller"
-import QueryToggleController from "sage/controllers/query_toggle_controller.js"
+import QueryToggleController from "sage/controllers/query_toggle_controller"
 
 // Export all Sage controllers for manual registration
 export { SearchController, ClipboardController, SelectController, DashboardController, ReverseInfiniteScrollController, VariablesController, QueryToggleController }

data/app/views/layouts/sage/application.html.erb

@@ -13,7 +13,7 @@
       <%= javascript_include_tag "blazer/jquery", "blazer/rails-ujs", "blazer/stupidtable", "blazer/stupidtable-custom-settings", "blazer/jquery.stickytableheaders", "blazer/selectize", "blazer/highlight.min", "blazer/moment", "blazer/moment-timezone-with-data", "blazer/daterangepicker", "blazer/chart.umd", "blazer/chartjs-adapter-date-fns.bundle", "blazer/chartkick", "blazer/mapkick.bundle", "blazer/ace/ace", "blazer/ace/ext-language_tools", "blazer/ace/theme-twilight", "blazer/ace/mode-sql", "blazer/ace/snippets/text", "blazer/ace/snippets/sql", "blazer/Sortable", "blazer/vue.global.prod", "blazer/routes", "blazer/queries", "blazer/fuzzysearch", nonce: true %>
     <% elsif defined?(Sprockets) %>
       <%= stylesheet_link_tag "sage/application", "blazer/selectize", "blazer/daterangepicker" %>
-      <%= javascript_include_tag "blazer/jquery", "blazer/rails-ujs", "blazer/stupidtable", "blazer/stupidtable-custom-settings", "blazer/jquery.stickytableheaders", "blazer/selectize", "blazer/highlight.min", "blazer/moment", "blazer/moment-timezone-with-data", "blazer/daterangepicker", "blazer/chart.umd", "blazer/chartjs-adapter-date-fns.bundle", "blazer/chartkick", "blazer/mapkick.bundle", "blazer/ace/ace", "blazer/ace/ext-language_tools", "blazer/ace/theme-twilight", "blazer/ace/mode-sql", "blazer/ace/snippets/text", "blazer/ace/snippets/sql", "blazer/Sortable", "blazer/vue.global.prod", "blazer/routes", "blazer/queries", "blazer/fuzzysearch", "sage/application", nonce: true %>
+      <%= javascript_include_tag "blazer/jquery", "blazer/rails-ujs", "blazer/stupidtable", "blazer/stupidtable-custom-settings", "blazer/jquery.stickytableheaders", "blazer/selectize", "blazer/highlight.min", "blazer/moment", "blazer/moment-timezone-with-data", "blazer/daterangepicker", "blazer/chart.umd", "blazer/chartjs-adapter-date-fns.bundle", "blazer/chartkick", "blazer/mapkick.bundle", "blazer/ace/ace", "blazer/ace/ext-language_tools", "blazer/ace/theme-twilight", "blazer/ace/mode-sql", "blazer/ace/snippets/text", "blazer/ace/snippets/sql", "blazer/Sortable", "blazer/vue.global.prod", "blazer/routes", "blazer/queries", "blazer/fuzzysearch", nonce: true %>
     <% else %>
       <%= stylesheet_link_tag "sage/application" %>
       <%= javascript_importmap_tags %>

data/app/views/sage/queries/_new_form.html.erb

@@ -10,36 +10,38 @@
 
 <% @variable_params = @query.persisted? ? variable_params(@query) : nested_variable_params(@query) %>
 
-<%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off", class: ""} do |f| %>
+<!-- Hidden Run button form outside the main form -->
+<%= form_with url: (defined?(sage) && sage.respond_to?(:run_queries_path) ? sage.run_queries_path : run_queries_path), method: :post, local: false, html: {id: 'run-query-form', style: "display: none;"} do |f| %>
+  <%= f.hidden_field :statement, id: 'run_query_statement' %>
+  <%= f.hidden_field :query_id, value: @query.id %>
+  <%= f.hidden_field :data_source, value: @query.data_source || Blazer.data_sources.keys.first %>
+<% end %>
+
+<%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off", class: "", id: 'query-form'} do |f| %>
   <div class="grid" style='margin-top: 0px'>
     <div class="s10">
       <div class="field label border">
         <%= f.text_field :name %>
         <%= f.label :name, class: (@query.name.present? ? "active" : "") %>
       </div>
-      
+
       <div class="field textarea label border">
         <%= f.text_area :description, style: "height: 145px; resize: vertical;" %>
         <%= f.label :description, "Description (Optional)", class: (@query.description.present? ? "active" : "") %>
       </div>
-      
+
       <%= f.hidden_field :statement, id: 'query_statement_form' %>
     </div>
-    
+
     <div class="s2">
       <nav style="display: flex; flex-direction: column; gap: 12px; padding-left: 8px;">
         <button type='button' onclick="formatSQL()" class="button secondary" title="Format SQL">
           <i>auto_fix_high</i>
         </button>
-        
-        <%= form_with url: (defined?(sage) && sage.respond_to?(:run_queries_path) ? sage.run_queries_path : run_queries_path), method: :post, local: false, style: "margin: 0;" do |f| %>
-          <%= f.hidden_field :statement, id: 'run_query_statement' %>
-          <%= f.hidden_field :query_id, value: @query.id %>
-          <%= f.hidden_field :data_source, value: @query.data_source || Blazer.data_sources.keys.first %>
-          <button type='submit' class="button primary" title="Run Query">
-            <i>play_arrow</i>
-          </button>
-        <% end %>
+
+        <button type='button' onclick="document.getElementById('run-query-form').requestSubmit()" class="button primary" title="Run Query">
+          <i>play_arrow</i>
+        </button>
 
         <button type="submit" name="commit" value="<%= @query.persisted? ? "Update" : "Create" %>" class="button primary" title="<%= @query.persisted? ? "Update" : "Create" %>">
           <i><%= @query.persisted? ? "save" : "add" %></i>

data/app/views/sage/queries/_run.html.erb

@@ -33,7 +33,7 @@
   <% else %>
     <% unless @only_chart %>
       <%= render partial: "caching" %>
-      <p class="text-muted" style="margin-bottom: 10px;">
+      <p class="text-muted" style="margin-top: <%= @rows.any? ? '0' : '40px' %>; margin-bottom: 10px;">
       <% if @row_limit && @rows.size > @row_limit %>
         First
         <% @rows = @rows.first(@row_limit) %>
@@ -225,8 +225,8 @@
         <% end %>
       </div>
     <% end %>
-  <% elsif @only_chart %>
-    <p class="text-muted">No rows</p>
+    <% elsif @only_chart %>
+      <p class="text-muted">No rows</p>
+    <% end %>
   <% end %>
 <% end %>
-<% end %>

data/app/views/sage/queries/show.html.erb

@@ -35,14 +35,25 @@
     <span>Statement</span>
     <i class="material-icons" data-sage--query-toggle-target="icon" data-action="click->sage--query-toggle#toggle" style="cursor: pointer; font-size: 18px; opacity: 0.6;">visibility_off</i>
   </div>
-  
-  <pre id="code" data-sage--query-toggle-target="content"><code><%= @statement.try(:display_statement) || @query.statement %></code></pre>
+
+  <% statement_display = begin
+       @statement.try(:display_statement) if @statement&.statement.present?
+     rescue => e
+       Rails.logger.error("Error displaying statement: #{e.message}")
+       nil
+     end %>
+
+  <pre id="code" data-sage--query-toggle-target="content"><code><%= statement_display || @query.statement || "-- No SQL statement defined --" %></code></pre>
 </div>
 
-<% if @success %>
+<% if @success && @query.statement.present? && @query.data_source.present? %>
   <%= turbo_frame_tag dom_id(@query, 'results'), src: run_query_path(@query.id, from_show: true, variables: variable_params(@query)) do  %>
     loading...
   <% end %>
+<% elsif @query.statement.blank? %>
+  <div class="padding center-align">
+    <p class="secondary-text">No SQL statement to execute. <%= link_to "Edit this query", edit_query_path(@query) %> to add a statement.</p>
+  </div>
 <% end %>
 
 <%= javascript_tag nonce: true do %>

data/config/importmap.rb

@@ -8,6 +8,9 @@ pin "sage/controllers/reverse_infinite_scroll_controller", to: "sage/controllers
 pin "sage/controllers/variables_controller", to: "sage/controllers/variables_controller.js"
 pin "sage/controllers/query_toggle_controller", to: "sage/controllers/query_toggle_controller.js"
 
+# External dependencies
+pin "debounce", to: "https://ga.jspm.io/npm:debounce@2.0.0/index.js"
+
 # Don't pin common libraries - let the host app handle them
 # pin "@hotwired/stimulus", to: "stimulus.min.js"
 # pin "@hotwired/turbo-rails", to: "turbo.min.js"

data/lib/sage/version.rb

@@ -1,3 +1,3 @@
 module Sage
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sage-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Nathan Jones
@@ -169,6 +169,7 @@ files:
 - app/helpers/sage/queries_helper.rb
 - app/javascript/controllers/element_removal_controller.js
 - app/javascript/sage.js
+- app/javascript/sage/application.js
 - app/javascript/sage/controllers/clipboard_controller.js
 - app/javascript/sage/controllers/dashboard_controller.js
 - app/javascript/sage/controllers/query_toggle_controller.js