lazy load the sparklines....

o19s · Apr 10, 2024 · 7d33d52 · 7d33d52
1 parent 9d5a040
commit 7d33d52
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 156 deletions.
diff --git a/Gemfile b/Gemfile
@@ -23,6 +23,7 @@ gem 'devise_invitable', '~> 2.0'
 # Had no luck with js/svg approach ;-(
 gem 'font-awesome-sass'
 gem 'gabba'
+gem 'importmap-rails', '~> 2.0'
 gem 'intercom-rails'
 gem 'jbuilder', '~> 2.7'
 gem 'jquery-rails'
@@ -50,6 +51,7 @@ gem 'sassc-rails', '~> 2.1'
 gem 'sidekiq'
 gem 'terser'
 gem 'thor'
+gem 'turbo-rails', '~> 2.0', '>= 2.0.5'
 gem 'vega', '~> 0.3.0'
 
 group :development, :test do
@@ -88,7 +90,3 @@ group :test do
   gem 'capybara'
   gem 'selenium-webdriver'
 end
-
-gem 'importmap-rails', '~> 2.0'
-
-gem 'turbo-rails', '~> 2.0', '>= 2.0.5'
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
@@ -66,4 +66,8 @@ def show
   # rubocop:enable Metrics/MethodLength
   # rubocop:enable Metrics/CyclomaticComplexity
   # rubocop:enable Metrics/PerceivedComplexity
+
+  def sparklines
+    render layout: false
+  end
 end
diff --git a/app/views/home/show.html.erb b/app/views/home/show.html.erb
@@ -20,159 +20,60 @@ https://getbootstrap.com/docs/5.2/examples/navbars-offcanvas/# for example of of
 </div>
 
 <% if @cases.empty? && @most_recent_books.empty?  %>
-<div class="container my-5">
-  <div class="p-5 text-center bg-body-tertiary rounded-3">
-    <h1 class="text-body-emphasis">Welcome to Quepid!</h1>
-    <p class="col-lg-8 mx-auto fs-5 text-muted">
-      We're so excited that you are embarking on the journey to improving search quality!   There is so much to explore in Quepid.   However a good place to start is to create your first relevancy case using our demo datasets.
-    </p>
-    <div class="d-inline-flex gap-2 mb-5">
-      <%= button_to "Create Your First Relevancy Case", case_new_path, method: :get, class: 'd-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill' %>
+  <div class="container my-5">
+    <div class="p-5 text-center bg-body-tertiary rounded-3">
+      <h1 class="text-body-emphasis">Welcome to Quepid!</h1>
+      <p class="col-lg-8 mx-auto fs-5 text-muted">
+        We're so excited that you are embarking on the journey to improving search quality!   There is so much to explore in Quepid.   However a good place to start is to create your first relevancy case using our demo datasets.
+      </p>
+      <div class="d-inline-flex gap-2 mb-5">
+        <%= button_to "Create Your First Relevancy Case", case_new_path, method: :get, class: 'd-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill' %>
+      </div>
     </div>
   </div>
-</div>
 <% else %>
-<div class="row">
-    <div class="col-12 col-xl-8 mb-4 mb-lg-0">
-      <div class="card">
-          <h5 class="card-header">Cases</h5>
-          <div class="card-body">
-              <div class="table-responsive">
-                  <table class="table">
-                      <thead>
-                        <tr>
-                          <th scope="col">ID</th>
-                          <th scope="col">Name</th>
-                          <th scope="col"># of Queries</th>
-                          <th scope="col">Last Score</th>
-                          <th scope="col">Last Run</th>
-                          <th scope="col">Last Run By</th>
-                          <th scope="col"></th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <%= render partial: "case", collection: @cases, as: :kase %>
-                      </tbody>
-                    </table>
-              </div>
-              <%= link_to 'View all', cases_path(), class: 'btn btn-block btn-light', role: 'button' %>
-
-          </div>
-      </div>      
-    </div>
-    <div class="col-12 col-xl-4">
-      <% if true == false # disable%>
-      <% @grouped_cases.keys[0..2].each do |key| %>
-      <%= render partial: "grouped_cases", locals: {grouped_cases_name: key, grouped_cases: @grouped_cases[key]}%>
-      <% end %>
-      <% end %>
-                    
-    </div>
-</div>
+  <div class="row">
+      <div class="col-12 col-xl-8 mb-4 mb-lg-0">
+        <div class="card">
+            <h5 class="card-header">Cases</h5>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table">
+                        <thead>
+                          <tr>
+                            <th scope="col">ID</th>
+                            <th scope="col">Name</th>
+                            <th scope="col"># of Queries</th>
+                            <th scope="col">Last Score</th>
+                            <th scope="col">Last Run</th>
+                            <th scope="col">Last Run By</th>
+                            <th scope="col"></th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <%= render partial: "case", collection: @cases, as: :kase %>
+                        </tbody>
+                      </table>
+                </div>
+                <%= link_to 'View all', cases_path(), class: 'btn btn-block btn-light', role: 'button' %>
+                
+            </div>
+        </div>      
+      </div>
+      <div class="col-12 col-xl-4">
+        <% if true == false # disable%>
+        <% @grouped_cases.keys[0..2].each do |key| %>
+        <%= render partial: "grouped_cases", locals: {grouped_cases_name: key, grouped_cases: @grouped_cases[key]}%>
+        <% end %>
+        <% end %>
+                      
+      </div>
+  </div>
 <% end %>
 
 <hr/>
-<div id="vis"></div>
-
- <script type="text/javascript">
-   var yourVlSpec = {
-     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-     "data": {
-       "url": "<%= analytics_sparkline_vega_data_path format: :csv %>",
-       "name": "dataset",
-       "format": {"type": "csv"}
-     },
-     "facet": {
-       "row": {
-         "field": "state",
-         "sort": {
-           "field": "positiveIncrease",
-           "op": "average",
-           "order": "descending"
-         }
-       }
-     },
-     "spec": {
-       "transform": [
-         {
-           "calculate": "datetime(slice(datum.date,0,4), slice(datum.date,4,6),[slice(datum.date,6,8)])",
-           "as": "__date"
-         }
-       ],
-       "height": 20,
-       "layer": [
-         {
-           "mark": {"type": "area"},
-           "encoding": {
-             "x": {
-               "field": "__date",
-               "type": "temporal",
-               "timeUnit": "monthdatehoursminutes",
-               "axis": {
-                 "title": null,
-                 "orient": "top",
-                 "domain": false,
-                 "ticks": false,
-                 "labels": false,
-                 "grid": false
-               }
-             },
-             "y": {
-               "field": "positiveIncrease",
-               "aggregate": "sum",
-               "type": "quantitative",
-               "axis": {
-                 "title": null,
-                 "domain": false,
-                 "labels": false,
-                 "ticks": false,
-                 "grid": false
-               }
-             }
-           }
-         },
-         {
-           "mark": {"type": "text", "align": "right", "dx": -120},
-           "encoding": {
-             "text": {
-               "aggregate": {"argmax": "__date"},
-               "field": "positiveIncrease",
-               "format": ",.0f",
-               "type": "quantitative"
-             }
-           }
-         },
-         {
-           "mark": {"type": "text", "align": "right", "dx": -180},
-           "encoding": {
-             "text": {
-               "aggregate": {"argmax": "__date"},
-               "field": "positive",
-               "format": ",.0f",
-               "type": "quantitative"
-             }
-           }
-         }
-       ]
-     },
-     "resolve": {"scale": {"y": "independent"}},
-     "config": {
-       "view": {"stroke": "transparent"},
-       "header": {
-         "title": null,
-         "labelAngle": 0,
-         "labelAlign": "left",
-         "labelFontSize": 12,
-         "labelFont": "Arial"
-       },
-       "text": {"font": "Arial", "fontSize": 12},
-       "facet": {"spacing": 1},
-       "area": {
-         "interpolate": "monotone",
-         "line": {"color": "red", "strokeWidth": 1, "interpolate": "monotone"},
-         "fill": "#faa"
-       }
-     }
-   };
-   vegaEmbed('#vis', yourVlSpec);
- </script>
+<turbo-frame id="sparklines_tray" src="/home/sparklines">
+  <div class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</turbo-frame>
diff --git a/app/views/home/sparklines.html.erb b/app/views/home/sparklines.html.erb
@@ -0,0 +1,106 @@
+<turbo-frame id="sparklines_tray">
+<div id="vis"></div>
+
+ <script type="text/javascript">
+   var yourVlSpec = {
+     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+     "data": {
+       "url": "<%= analytics_sparkline_vega_data_path format: :csv %>",
+       "name": "dataset",
+       "format": {"type": "csv"}
+     },
+     "facet": {
+       "row": {
+         "field": "state",
+         "sort": {
+           "field": "positiveIncrease",
+           "op": "average",
+           "order": "descending"
+         }
+       }
+     },
+     "spec": {
+       "transform": [
+         {
+           "calculate": "datetime(slice(datum.date,0,4), slice(datum.date,4,6),[slice(datum.date,6,8)])",
+           "as": "__date"
+         }
+       ],
+       "height": 20,
+       "layer": [
+         {
+           "mark": {"type": "area"},
+           "encoding": {
+             "x": {
+               "field": "__date",
+               "type": "temporal",
+               "timeUnit": "monthdatehoursminutes",
+               "axis": {
+                 "title": null,
+                 "orient": "top",
+                 "domain": false,
+                 "ticks": false,
+                 "labels": false,
+                 "grid": false
+               }
+             },
+             "y": {
+               "field": "positiveIncrease",
+               "aggregate": "sum",
+               "type": "quantitative",
+               "axis": {
+                 "title": null,
+                 "domain": false,
+                 "labels": false,
+                 "ticks": false,
+                 "grid": false
+               }
+             }
+           }
+         },
+         {
+           "mark": {"type": "text", "align": "right", "dx": -120},
+           "encoding": {
+             "text": {
+               "aggregate": {"argmax": "__date"},
+               "field": "positiveIncrease",
+               "format": ",.0f",
+               "type": "quantitative"
+             }
+           }
+         },
+         {
+           "mark": {"type": "text", "align": "right", "dx": -180},
+           "encoding": {
+             "text": {
+               "aggregate": {"argmax": "__date"},
+               "field": "positive",
+               "format": ",.0f",
+               "type": "quantitative"
+             }
+           }
+         }
+       ]
+     },
+     "resolve": {"scale": {"y": "independent"}},
+     "config": {
+       "view": {"stroke": "transparent"},
+       "header": {
+         "title": null,
+         "labelAngle": 0,
+         "labelAlign": "left",
+         "labelFontSize": 12,
+         "labelFont": "Arial"
+       },
+       "text": {"font": "Arial", "fontSize": 12},
+       "facet": {"spacing": 1},
+       "area": {
+         "interpolate": "monotone",
+         "line": {"color": "red", "strokeWidth": 1, "interpolate": "monotone"},
+         "fill": "#faa"
+       }
+     }
+   };
+   vegaEmbed('#vis', yourVlSpec);
+ </script>
+</turbo-frame>
diff --git a/config/routes.rb b/config/routes.rb
@@ -4,9 +4,9 @@
 
 # rubocop:disable Metrics/BlockLength
 Rails.application.routes.draw do
-  # get 'home/show'
   apipie
   root 'home#show'
+  get 'home/sparklines', to: 'home#sparklines'
 
   get 'proxy/fetch'
   post 'proxy/fetch'

diff --git a/db/schema.rb b/db/schema.rb