From af7d7d61afdff8c942c32401c1a83ad13f311839 Mon Sep 17 00:00:00 2001
From: Hrushikesh Sahasrabuddhe <hrushikesh_s@berkeley.edu>
Date: Thu, 26 Mar 2026 12:03:55 -0700
Subject: [PATCH] Add "Go to page" navigation in FireWorks web GUI pagination

Add direct page navigation input to FireWorks web GUI for "Workflows" and "Fireworks" views
---
 fireworks/flask_site/templates/fw_state.html | 39 ++++++++++++++++++-
 fireworks/flask_site/templates/wf_state.html | 40 +++++++++++++++++++-
 2 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/fireworks/flask_site/templates/fw_state.html b/fireworks/flask_site/templates/fw_state.html
index 365521b3c..8b7f6953e 100644
--- a/fireworks/flask_site/templates/fw_state.html
+++ b/fireworks/flask_site/templates/fw_state.html
@@ -37,6 +37,43 @@ <h3 class="text-center">{{ '{:,}'.format(fw_count) }} {{ state|lower }} Firework
     {% endfor %}
 </table>
 
-{{ pagination.links|safe }}
+<div style="margin-top: 15px;">
+    {{ pagination.links|safe }}
+</div>
+
+<form method="get" style="margin-top: 10px;" onsubmit="return gotoPage(this);">
+    <label for="page-input-fw">Go to page:</label>
+    <input
+        type="number"
+        id="page-input-fw"
+        name="page"
+        min="1"
+        max="{{ pagination.pages }}"
+        required
+        style="width: 100px;"
+    >
+    <button type="submit">Go</button>
+    <span style="margin-left: 8px; color: #666;">
+        of {{ pagination.pages }}
+    </span>
+</form>
+
+<script>
+function gotoPage(form) {
+    const input = form.page;
+    const page = parseInt(input.value, 10);
+    const maxPage = {{ pagination.pages }};
+
+    if (isNaN(page) || page < 1 || page > maxPage) {
+        alert("Please enter a page number between 1 and " + maxPage + ".");
+        return false;
+    }
+
+    const url = new URL(window.location.href);
+    url.searchParams.set("page", page);
+    window.location.href = url.toString();
+    return false;
+}
+</script>
 
 {% endblock %}
diff --git a/fireworks/flask_site/templates/wf_state.html b/fireworks/flask_site/templates/wf_state.html
index a54e517f3..7a390c907 100644
--- a/fireworks/flask_site/templates/wf_state.html
+++ b/fireworks/flask_site/templates/wf_state.html
@@ -35,6 +35,44 @@ <h3 class="text-center">{{ '{:,}'.format(wf_count) }} {{ state|lower }} Workflow
         </tr>
     {% endfor %}
 </table>
-{{ pagination.links|safe }}
+
+<div style="margin-top: 15px;">
+    {{ pagination.links|safe }}
+</div>
+
+<form method="get" style="margin-top: 10px;" onsubmit="return gotoPage(this);">
+    <label for="page-input-wf">Go to page:</label>
+    <input
+        type="number"
+        id="page-input-wf"
+        name="page"
+        min="1"
+        max="{{ pagination.pages }}"
+        required
+        style="width: 100px;"
+    >
+    <button type="submit">Go</button>
+    <span style="margin-left: 8px; color: #666;">
+        of {{ pagination.pages }}
+    </span>
+</form>
+
+<script>
+function gotoPage(form) {
+    const input = form.page;
+    const page = parseInt(input.value, 10);
+    const maxPage = {{ pagination.pages }};
+
+    if (isNaN(page) || page < 1 || page > maxPage) {
+        alert("Please enter a page number between 1 and " + maxPage + ".");
+        return false;
+    }
+
+    const url = new URL(window.location.href);
+    url.searchParams.set("page", page);
+    window.location.href = url.toString();
+    return false;
+}
+</script>
 
 {% endblock %}