iteration over timeline zoom and pagination

lezhnev74 · Jan 11, 2024 · 8f9d9f5 · 8f9d9f5
1 parent 1221921
commit 8f9d9f5
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 15 deletions.
diff --git a/ui/htmx_controller.go b/ui/htmx_controller.go
@@ -275,9 +275,19 @@ func (hc *HtmxController) putResultsPage(
 		PagePrevExists = false
 	}
 
+	var fromMilli, toMilli int64
+	if from != nil {
+		fromMilli = from.UnixMilli()
+	}
+	if to != nil {
+		toMilli = to.UnixMilli()
+	}
+
 	PageData := fiber.Map{
 		// query:
-		"QueryId": queryId,
+		"QueryId":   queryId,
+		"FromMilli": fromMilli,
+		"ToMilli":   toMilli,
 		// results:
 		"PageSize":        pageSize,
 		"Pages":           pages,

diff --git a/ui/web_templates/fragments/pagination.gohtml b/ui/web_templates/fragments/pagination.gohtml
@@ -16,7 +16,7 @@
                     <li
                             class="page-item {{if .PagePrevExists}}{{else}}disabled{{end}}"
                             {{if .PagePrevExists}}
-                                hx-get="/cmd/page/?queryId={{.QueryId}}&page={{.PagePrev}}"
+                                hx-get="/cmd/page/?queryId={{.QueryId}}&page={{.PagePrev}}{{if .FromMilli}}&from={{.FromMilli}}{{end}}{{if .ToMilli}}&to={{.ToMilli}}{{end}}"
                             {{end}}
                     >
                         <a class="page-link" href="#">Previous</a>
@@ -29,7 +29,7 @@
                     <li
                             class="page-item {{if .PageNextExists}}{{else}}disabled{{end}}"
                             {{if .PageNextExists}}
-                                hx-get="/cmd/page/?queryId={{.QueryId}}&page={{.PageNext}}"
+                                hx-get="/cmd/page/?queryId={{.QueryId}}&page={{.PageNext}}{{if .FromMilli}}&from={{.FromMilli}}{{end}}{{if .ToMilli}}&to={{.ToMilli}}{{end}}"
                             {{end}}
                     >
                         <a class="page-link" href="#">Next</a>
@@ -46,7 +46,7 @@
                                 class="form-select"
                                 name="pagesize"
                                 id="pagesize"
-                                hx-get="/cmd/page/?queryId={{.QueryId}}&page=0"
+                                hx-get="/cmd/page/?queryId={{.QueryId}}{{if .FromMilli}}&from={{.FromMilli}}{{end}}{{if .ToMilli}}&to={{.ToMilli}}{{end}}"
                         >
                             <option value="10">10</option>
                             <option value="100">100</option>

diff --git a/ui/web_templates/fragments/search_form.gohtml b/ui/web_templates/fragments/search_form.gohtml
@@ -149,6 +149,11 @@
 
         // pre-process dates before sending:
         document.body.addEventListener('htmx:configRequest', function (evt) {
+            if(evt.detail.path != "/cmd/new") {
+                // only provide the below attribute for the form requests
+                return
+            }
+
             if ($("#query_from_input").val()) {
                 evt.detail.parameters['From'] = $("#query_from_input").val()
             }

diff --git a/ui/web_templates/fragments/timeline.gohtml b/ui/web_templates/fragments/timeline.gohtml
@@ -1,7 +1,8 @@
 <div style="height:150px;position: relative;">
     <canvas id="plot"></canvas>
     <div style="text-align: right;">
-        <a href="#" class="text-muted" style="" id="plot_reset">reset zoom</a>
+        Mouse wheel to zoom.
+        <a href="#" class="text-muted" style="" id="plot_reset">Reset Zoom</a>
     </div>
 </div>
 <script>
@@ -22,7 +23,6 @@
             chart.stop(); // make sure animations are not running
             chart.update('none'); // <-- UPDATE
 
-
             if (!shouldNotRefreshResults) {
                 // Reload the results in the main area with the new query scope:
                 url = "/cmd/page";
@@ -91,6 +91,10 @@
             y: {
                 type: 'linear',
                 position: 'left',
+                ticks: {
+                    beginAtZero: true,
+                    callback: function(value) {if (value % 1 === 0) {return value;}}
+                }
             },
         };
         const zoomOptions = {
@@ -116,11 +120,9 @@
                     borderColor: "#000",
                     backgroundColor: "#000",
                     hoverBackgroundColor: "#999999",
-                    minBarLength: 5,
-                    // barThickness: 'flex', // 4
+                    minBarLength: 10,
+                    barThickness: 'flex',
                     maxBarThickness: 6,
-                    // categoryPercentage: 1.0,
-                    // barPercentage: 0.7,
                     grouped: true,
                     data: [],
                 }]
@@ -155,7 +157,6 @@
         $(window).resize(function () {
             var width = $("#plot").parent().width();
             var height = $("#plot").parent().height();
-            console.log(width);
             c.resize(width, height);
         });
 

diff --git a/ui/web_templates/home.gohtml b/ui/web_templates/home.gohtml
@@ -4,7 +4,14 @@
         {{/* load the page */}}
         <div
                 hx-get="/cmd/page?queryId={{.QueryId}}&page={{.Page}}&freshLoad=1"
-                hx-trigger="load">
+                hx-trigger="load delay:1s">
+        </div>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col">
+                    <b>Loading messages...</b>
+                </div>
+            </div>
         </div>
     {{else if .Queries}}
         {{template "fragments/query_list" .Queries}}

diff --git a/ui/web_templates/theme.gohtml b/ui/web_templates/theme.gohtml
@@ -139,16 +139,15 @@
     document.body.addEventListener('htmx:configRequest', function (evt) {
         // default pagesize if not given (load from the localstorage)
         if (!evt.detail.parameters.hasOwnProperty("pagesize")) {
-            console.log(evt)
             evt.detail.parameters["pagesize"] = localStorage.getItem("pagesize") || "100";
         }
     });
 
     htmx.on("htmx:beforeRequest", function(){
-        $("#load").show();
+        $("title").html($("title").html() + ' Loading...')
     });
     htmx.on("htmx:afterRequest", function(){
-        $("#load").hide();
+        $("title").html($("title").html().replace(/ Loading...$/, ''))
     });
 </script>
 </body>