blazer 3.4.0 → 3.5.0

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

@@ -2,10 +2,10 @@
 
 <div class="topbar">
   <div class="container">
-    <div class="row" style="padding-top: 13px;">
+    <div class="row name-row">
       <div class="col-sm-9">
         <%= render partial: "blazer/nav" %>
-        <h3 style="line-height: 34px; display: inline; margin-left: 5px;">
+        <h3 class="name-header">
           <%= @dashboard.name %>
         </h3>
       </div>
@@ -16,10 +16,10 @@
   </div>
 </div>
 
-<div style="margin-bottom: 60px;"></div>
+<div class="topbar-margin"></div>
 
 <% if @data_sources.any? { |ds| ds.cache_mode != "off" } %>
-  <p class="text-muted" style="float: right;">
+  <p class="text-muted pull-right">
     Some queries may be cached
     <%= link_to "Refresh", refresh_dashboard_path(@dashboard, params: variable_params(@dashboard)), method: :post %>
   </p>
@@ -34,20 +34,27 @@
 <% @queries.each_with_index do |query, i| %>
   <div class="chart-container">
     <h4><%= link_to query.friendly_name, query_path(query, params: variable_params(query)), target: "_blank" %></h4>
-    <div id="chart-<%= i %>" class="chart">
+    <%= tag.div id: "chart-#{i}", class: "chart" do %>
       <p class="text-muted">Loading...</p>
-    </div>
+    <% end %>
   </div>
+  <% run_data = {statement: query.statement, query_id: query.id, data_source: query.data_source, variables: variable_params(query), only_chart: true} %>
+  <% run_data.merge!(cohort_period: params[:cohort_period]) if params[:cohort_period] %>
   <%= javascript_tag nonce: true do %>
-    <% data = {statement: query.statement, query_id: query.id, data_source: query.data_source, variables: variable_params(query), only_chart: true} %>
-    <% data.merge!(cohort_period: params[:cohort_period]) if params[:cohort_period] %>
-    <%= blazer_js_var "data", data %>
-
-    runQuery(data, function (data) {
-      $("#chart-<%= i %>").html(data)
-      $("#chart-<%= i %> table").stupidtable(stupidtableCustomSettings)
-    }, function (message) {
-      $("#chart-<%= i %>").addClass("query-error").html(message)
-    });
+    (function () {
+      <%= blazer_js_var "chartId", "chart-#{i}" %>
+      <%= blazer_js_var "runData", run_data %>
+      const chart = document.getElementById(chartId)
+      runQuery(runData, function (data) {
+        renderResults(chart, data)
+        const table = chart.querySelector("table")
+        if (table) {
+          tablesort(table)
+        }
+      }, function (message) {
+        chart.classList.add("query-error")
+        chart.textContent = message
+      })
+    })()
   <% end %>
 <% end %>

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

@@ -1,5 +1,5 @@
 <% if @cached_at || @just_cached %>
-  <p class="text-muted" style="float: right;">
+  <p class="text-muted pull-right">
     <% if @cached_at %>
       Cached <%= time_ago_in_words(@cached_at, include_seconds: true) %> ago
     <% elsif params[:query_id] %>

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

@@ -0,0 +1,8 @@
+<% chart_id = SecureRandom.hex %>
+<%= tag.div id: chart_id, style: "height: 300px;" %>
+<%= javascript_tag nonce: true do %>
+  (function () {
+    <%= blazer_js_var "chart", {type: type, id: chart_id, data: data, options: options} %>
+    new Chartkick[chart.type](chart.id, chart.data, chart.options);
+  })()
+<% end %>

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

@@ -4,29 +4,29 @@
 
 <% @variable_params = @query.persisted? ? variable_params(@query) : nested_variable_params(@query) %>
 
-<div id="app" v-cloak>
+<div id="app" class="hide">
   <%= form_for @query, url: (@query.persisted? ? query_path(@query, params: @variable_params) : queries_path(params: @variable_params)), html: {autocomplete: "off"} do |f| %>
     <div class="row">
       <div id="statement-box" class="col-xs-8">
         <div class= "form-group">
           <%= f.hidden_field :statement %>
           <div id="editor-container">
-            <div id="editor" :style="{ height: editorHeight }"><%= @query.statement %></div>
+            <div id="editor"><%= @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>
+            <a id="docs-link" target="_blank" style="margin-left: 40px;">Docs</a>
+            <a id="schema-link" target="_blank" style="margin-left: 40px;">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>
-          <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>
+          <a id="run-button" class="btn btn-info" style="vertical-align: top; width: 70px;">Run</a>
+          <a id="cancel-button" class="btn btn-danger hide" style="vertical-align: top; width: 70px;">Cancel</a>
         </div>
       </div>
       <div class="col-xs-4">
@@ -63,8 +63,8 @@
   <% end %>
 
   <div id="results">
-    <p class="text-muted" v-if="running">Loading...</p>
-    <div id="results-html" v-if="!running" :class="{ 'query-error': error }"></div>
+    <p id="loading" class="text-muted hide">Loading...</p>
+    <div id="results-html"></div>
   </div>
 </div>
 
@@ -72,184 +72,157 @@
   <%= blazer_js_var "variableParams", @variable_params %>
   <%= blazer_js_var "previewStatement", Blazer.data_sources.to_h { |k, v| [k, (v.preview_statement rescue "")] } %>
 
-  var app = Vue.createApp({
-    data: function() {
-      return {
-        running: false,
-        results: "",
-        error: false,
-        dataSource: "",
-        selectize: null,
-        editorHeight: "180px"
-      }
-    },
-    computed: {
-      schemaPath: function() {
-        return Routes.schema_queries_path({data_source: this.dataSource})
-      },
-      docsPath: function() {
-        return Routes.docs_queries_path({data_source: this.dataSource})
-      }
-    },
-    methods: {
-      run: function(e) {
-        this.running = true
-        this.results = ""
-        this.error = false
-        cancelAllQueries()
-
-        var data = {statement: this.getSQL(), data_source: $("#query_data_source").val(), variables: variableParams}
-
-        var _this = this
-
-        runQuery(data, function (data) {
-          _this.running = false
-          _this.showResults(data)
-
-          errorLine = _this.getErrorLine()
-          if (errorLine) {
-            editor.getSession().addGutterDecoration(errorLine - 1, "error")
-            editor.scrollToLine(errorLine, true, true, function () {})
-            editor.gotoLine(errorLine, 0, true)
-            editor.focus()
-          }
-        }, function (data) {
-          _this.running = false
-          _this.error = true
-          _this.showResults(data)
-        })
-      },
-      cancel: function(e) {
-        this.running = false
-        cancelAllQueries()
-      },
-      updateDataSource: function(dataSource) {
-        this.dataSource = dataSource
-        var selectize = this.selectize
-        selectize.clearOptions()
+  const app = document.getElementById("app")
+  const statement = document.getElementById("query_statement")
+  const docsLink = document.getElementById("docs-link")
+  const schemaLink = document.getElementById("schema-link")
+  const tableSelect = document.getElementById("table_names")
+  const dsSelect = document.getElementById("query_data_source")
+  const runButton = document.getElementById("run-button")
+  const cancelButton = document.getElementById("cancel-button")
+  const results = document.getElementById("results-html")
+  const loading = document.getElementById("loading")
+  let editor
+  let tablesXhr
+
+  function getSQL() {
+    const selectedText = editor.getSelectedText()
+    const text = selectedText.length < 10 ? editor.getValue() : selectedText
+    return text.replace(/\n/g, "\r\n")
+  }
+
+  function startRunning() {
+    hide(runButton)
+    results.replaceChildren()
+    results.classList.remove("query-error")
+    hide(results)
+    show(cancelButton)
+    show(loading)
+  }
+
+  function stopRunning() {
+    hide(cancelButton)
+    hide(loading)
+    show(runButton)
+    show(results)
+  }
+
+  function run(e) {
+    startRunning()
+    cancelAllQueries()
+
+    const runData = {statement: getSQL(), data_source: dsSelect.value, variables: variableParams}
+
+    runQuery(runData, function (data) {
+      stopRunning()
+      renderResults(results, data)
+    }, function (message) {
+      stopRunning()
+      results.classList.add("query-error")
+      results.textContent = message
+    })
+  }
+
+  function cancel(e) {
+    stopRunning()
+    cancelAllQueries()
+  }
+
+  function updateDataSource() {
+    const dataSource = dsSelect.value
+
+    docsLink.setAttribute("href", Routes.docs_queries_path({data_source: dataSource}))
+    schemaLink.setAttribute("href", Routes.schema_queries_path({data_source: dataSource}))
+
+    tableSelect.tomselect.clearOptions()
+
+    if (tablesXhr) {
+      tablesXhr.abort()
+    }
 
-        if (this.tablesXhr) {
-          this.tablesXhr.abort()
-        }
+    tablesXhr = new AbortController()
 
-        this.tablesXhr = $.getJSON(Routes.tables_queries_path({data_source: this.dataSource}), function(data) {
-          var newOptions = []
-          for (var i = 0; i < data.length; i++) {
-            var table = data[i]
-            if (typeof table === "object") {
-              newOptions.push({text: table.table, value: table.value})
-            } else {
-              newOptions.push({text: table, value: table})
-            }
-          }
-          selectize.clearOptions()
-          selectize.addOption(newOptions)
-          selectize.refreshOptions(false)
-        })
-      },
-      showEditor: function() {
-        var _this = this
-
-        editor = ace.edit("editor")
-        editor.setTheme("ace/theme/twilight")
-        editor.getSession().setMode("ace/mode/sql")
-        editor.setOptions({
-          enableBasicAutocompletion: false,
-          enableSnippets: false,
-          enableLiveAutocompletion: false,
-          highlightActiveLine: false,
-          fontSize: 12,
-          minLines: 10
-        })
-        editor.renderer.setShowGutter(true)
-        editor.renderer.setPrintMarginColumn(false)
-        editor.renderer.setPadding(10)
-        editor.getSession().setUseWrapMode(true)
-        editor.commands.addCommand({
-          name: "run",
-          bindKey: {win: "Ctrl-Enter",  mac: "Command-Enter"},
-          exec: function(editor) {
-            _this.run()
-          },
-          readOnly: false // false if this command should not apply in readOnly mode
-        })
-        // fix command+L
-        editor.commands.removeCommands(["gotoline", "find"])
-
-        this.editor = editor
-
-        editor.getSession().on("change", function () {
-          $("#query_statement").val(editor.getValue())
-          _this.adjustHeight()
-        })
-        this.adjustHeight()
-        editor.focus()
-      },
-      adjustHeight: function() {
-        // https://stackoverflow.com/questions/11584061/
-        var editor = this.editor
-        var lines = editor.getSession().getScreenLength()
-        if (lines < 9) {
-          lines = 9
+    getJSON(Routes.tables_queries_path({data_source: dataSource}), function (data) {
+      const newOptions = []
+      for (const table of data) {
+        if (typeof table === "object") {
+          newOptions.push({text: table.table, value: table.value})
+        } else {
+          newOptions.push({text: table, value: table})
         }
+      }
+      tableSelect.tomselect.clearOptions()
+      tableSelect.tomselect.addOption(newOptions)
+      tableSelect.tomselect.refreshOptions(false)
+    }, tablesXhr)
+  }
+
+  function adjustHeight() {
+    // https://stackoverflow.com/questions/11584061/
+    let lines = editor.getSession().getScreenLength()
+    if (lines < 9) {
+      lines = 9
+    }
 
-        this.editorHeight = ((lines + 1) * 16).toString() + "px"
-
-        Vue.nextTick(function () {
-          editor.resize()
-        })
-      },
-      getSQL: function() {
-        var selectedText = editor.getSelectedText()
-        var text = selectedText.length < 10 ? editor.getValue() : selectedText
-        return text.replace(/\n/g, "\r\n")
-      },
-      getErrorLine: function() {
-        var editor = this.editor
-        var errorLine = this.results.substring(0, 100).includes("alert-danger") && /LINE (\d+)/g.exec(this.results)
-
-        if (errorLine) {
-          errorLine = parseInt(errorLine[1], 10)
-          if (editor.getSelectedText().length >= 10) {
-            errorLine += editor.getSelectionRange().start.row
-          }
-          return errorLine
-        }
+    editor.container.style.height = ((lines + 1) * 16).toString() + "px"
+    editor.resize()
+  }
+
+  function showEditor() {
+    editor = ace.edit("editor")
+    editor.setTheme("ace/theme/twilight")
+    editor.getSession().setMode("ace/mode/sql")
+    editor.setOptions({
+      enableBasicAutocompletion: false,
+      enableSnippets: false,
+      enableLiveAutocompletion: false,
+      highlightActiveLine: false,
+      fontSize: 12,
+      minLines: 10
+    })
+    editor.renderer.setShowGutter(true)
+    editor.renderer.setPrintMarginColumn(false)
+    editor.renderer.setPadding(10)
+    editor.getSession().setUseWrapMode(true)
+    editor.commands.addCommand({
+      name: "run",
+      bindKey: {win: "Ctrl-Enter",  mac: "Command-Enter"},
+      exec: function (editor) {
+        run()
       },
-      showResults(data) {
-        // can't do it the Vue way due to script tags in results
-        // this.results = data
+      readOnly: false // false if this command should not apply in readOnly mode
+    })
+    // fix command+L
+    editor.commands.removeCommands(["gotoline", "find"])
+
+    editor.getSession().on("change", function () {
+      statement.value = editor.getValue()
+      adjustHeight()
+    })
+    adjustHeight()
+    editor.focus()
+  }
+
+  runButton.addEventListener("click", run)
+  cancelButton.addEventListener("click", cancel)
+
+  new TomSelect(tableSelect, {
+    onChange: function (table) {
+      editor.setValue(previewStatement[dsSelect.value].replace("{table}", table), 1)
+      run()
+      this.clear(true)
+      this.blur()
+    }
+  })
 
-        Vue.nextTick(function () {
-          $("#results-html").html(data)
-        })
-      }
-    },
-    mounted: function() {
-      var _this = this
-
-      var $select = $("#table_names").selectize({})
-      var selectize = $select[0].selectize
-      selectize.on("change", function(val) {
-        editor.setValue(previewStatement[_this.dataSource].replace("{table}", val), 1)
-        _this.run()
-        selectize.clear(true)
-        selectize.blur()
-      })
-      this.selectize = selectize
-
-      this.updateDataSource($("#query_data_source").val())
-
-      var $dsSelect = $("#query_data_source").selectize({})
-      var dsSelectize = $dsSelect[0].selectize
-      dsSelectize.on("change", function(val) {
-        _this.updateDataSource(val)
-        dsSelectize.blur()
-      })
-
-      this.showEditor()
+  new TomSelect(dsSelect, {
+    onChange: function() {
+      updateDataSource()
+      this.blur()
     }
   })
-  app.config.compilerOptions.whitespace = "preserve"
-  app.mount("#app")
+
+  updateDataSource()
+  showEditor()
+  show(app)
 <% end %>

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

@@ -0,0 +1,8 @@
+<% map_id = SecureRandom.hex %>
+<%= tag.div id: map_id, style: "height: #{@only_chart ? 300 : 500}px;" %>
+<%= javascript_tag nonce: true do %>
+  (function () {
+    <%= blazer_js_var "map", {type: type, id: map_id, data: data, options: options} %>
+    new Mapkick[map.type](map.id, map.data, map.options);
+  })()
+<% end %>

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

@@ -9,7 +9,7 @@
 <% if @smart_variables.any? %>
   <p>Use these variable names to get a dropdown of values.</p>
 
-  <table class="table" style="max-width: 500px;">
+  <table class="table docs-table">
     <thead>
       <tr>
         <th>Variable</th>
@@ -34,10 +34,10 @@
 <% if @linked_columns.any? %>
   <p>Use these column names to link results to other pages.</p>
 
-  <table class="table" style="max-width: 500px;">
+  <table class="table docs-table">
     <thead>
       <tr>
-        <th style="width: 20%;">Name</th>
+        <th class="first-header">Name</th>
         <th>URL</th>
       </tr>
     </thead>
@@ -61,7 +61,7 @@
 <% if @smart_columns.any? %>
   <p>Use these column names to show additional data.</p>
 
-  <table class="table" style="max-width: 500px;">
+  <table class="table docs-table">
     <thead>
       <tr>
         <th>Name</th>
@@ -83,10 +83,10 @@
 
 <p>Use specific combinations of column types to generate charts.</p>
 
-<table class="table" style="max-width: 500px;">
+<table class="table docs-table">
   <thead>
     <tr>
-      <th style="width: 20%;">Chart</th>
+      <th class="first-header">Chart</th>
       <th>Column Types</th>
     </tr>
   </thead>

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

@@ -1,2 +1,3 @@
 <% blazer_title "Edit - #{@query.name}" %>
+
 <%= render partial: "form" %>