From 01bea539a060bad70c7f464dc23953371433449a Mon Sep 17 00:00:00 2001
From: YuanhuanO <yuanhuandeng@brandeis.edu>
Date: Wed, 12 Jun 2024 16:54:10 -0400
Subject: [PATCH] pagination position fixed under the dashboard

---
 daisen/static/dist/index.html  |  4 ++--
 daisen/static/src/css/app.css  | 15 +++++++++++----
 daisen/static/src/dashboard.ts | 17 ++++++++++++-----
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/daisen/static/dist/index.html b/daisen/static/dist/index.html
index 44479fb..faafed3 100644
--- a/daisen/static/dist/index.html
+++ b/daisen/static/dist/index.html
@@ -59,13 +59,13 @@
 
       <div class="main-body">
         <div id="inner-container"></div>
+        <div id="page-btn-container"></div>
       </div>
 
       <div class="status-bar">
         <div id="mouse-time"></div>
       </div>
+      <div id="page-btn-container"></div>
     </div>
-
-    
   </body>
 </html>
diff --git a/daisen/static/src/css/app.css b/daisen/static/src/css/app.css
index 683ade3..329548d 100644
--- a/daisen/static/src/css/app.css
+++ b/daisen/static/src/css/app.css
@@ -29,16 +29,23 @@ body {
 }
 
 .pagination-container {
-  position: fixed;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  color:#2c7bb6
+  justify-content: center;
+  color:#2c7bb6;
+  margin-top: 0px;
+  margin-bottom: 40px;
+  position: relative;
+  width: 100%;
+}
+
+.canvas-container {
+  position: relative;
+  width: 100%;
 }
 
 .page-info {
   margin-left: 10px;
-  margin-bottom: -10px;
 }
 
 .burger-menu {
diff --git a/daisen/static/src/dashboard.ts b/daisen/static/src/dashboard.ts
index cb2fbbe..c1b5b95 100644
--- a/daisen/static/src/dashboard.ts
+++ b/daisen/static/src/dashboard.ts
@@ -100,8 +100,13 @@ class Dashboard {
       } else {
         this._toolBar.style.display = 'none';
       }
+      const paginationContainer = this._canvas.querySelector('.pagination-container') as HTMLElement;
+      if (paginationContainer) {
+        paginationContainer.style.left = '50%';
+        paginationContainer.style.transform = 'translateX(-50%)';
+      }
       this._resize();
-    }, 200));
+    }, 200)); 
 
     this._addZoomResetButton(this._toolBar);
     this._addFilterUI(this._toolBar);
@@ -171,6 +176,7 @@ class Dashboard {
   }
 
   _widgetHeight(): number {
+    this._resetNumRowCol();
     const numGap = this._numRow + 1;
     const marginTop = 5;
     const gapSpace = numGap * marginTop;
@@ -467,10 +473,10 @@ class Dashboard {
     paginationContainer.classList.add("pagination-container");
     paginationContainer.appendChild(nav);
     paginationContainer.appendChild(pageInfo);
-
-    this._pageBtnContainer.innerHTML = "";
-    this._pageBtnContainer.appendChild(paginationContainer);
-
+    if (this._canvas.querySelector('.pagination-container')) {
+      this._canvas.removeChild(this._canvas.querySelector('.pagination-container'));
+    }
+    this._canvas.appendChild(paginationContainer);
     this._addPageButtons(ul);
   }
 
@@ -643,6 +649,7 @@ class Dashboard {
 
       widget.render(true);
     });
+    this._addPaginationControl();
   }
 
 }