From 93e94e8192a33beebc39f349ec8cd226e175dfe1 Mon Sep 17 00:00:00 2001
From: Matt Curtis <matt@obscu.ro>
Date: Fri, 3 Nov 2023 17:17:43 +0000
Subject: [PATCH] ObscuroScan: server oldest batches first

---
 go/common/query_types.go                      |  1 +
 go/host/db/batches.go                         | 23 +++++++++++--------
 .../frontend/src/components/BatchDataGrid.vue | 21 +++++++----------
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/go/common/query_types.go b/go/common/query_types.go
index 229346d6db..596a4e4341 100644
--- a/go/common/query_types.go
+++ b/go/common/query_types.go
@@ -38,6 +38,7 @@ type PublicTransaction struct {
 
 type PublicBatch struct {
 	BatchHeader
+	TxHashes []TxHash `json:"txHashes"`
 }
 
 type PublicBlock struct {
diff --git a/go/host/db/batches.go b/go/host/db/batches.go
index 8562903af3..876dad0d63 100644
--- a/go/host/db/batches.go
+++ b/go/host/db/batches.go
@@ -132,25 +132,30 @@ func (db *DB) GetBatchBySequenceNumber(sequenceNumber *big.Int) (*common.ExtBatc
 	return db.GetBatch(*batchHash)
 }
 
-// GetBatchListing returns BatchListingResponse given a pagination
+// GetBatchListing returns latest BatchListingResponse given a pagination. For example, page 0, size 10 will return the
+// latest 10 batches.
 // todo change this when the db changes - this is not super performant
 func (db *DB) GetBatchListing(pagination *common.QueryPagination) (*common.BatchListingResponse, error) {
-	// fetch requested batches
+	// fetch the total batches so we can paginate
+	header, err := db.GetHeadBatchHeader()
+	if err != nil {
+		return nil, err
+	}
+
+	batchesFrom := header.SequencerOrderNo.Uint64() - pagination.Offset
+
 	var batches []common.PublicBatch
-	for i := pagination.Offset; i < pagination.Offset+uint64(pagination.Size); i++ {
+	// fetch requested batches - looping backwards from the latest batch subtracting any pagination offset
+	// (e.g. front-end showing latest batches first, page 3 of size 10 would be skipping the 30 most recent batches)
+	for i := batchesFrom; i > batchesFrom-uint64(pagination.Size); i-- {
 		extBatch, err := db.GetBatchBySequenceNumber(big.NewInt(int64(i)))
 		if err != nil && !errors.Is(err, errutil.ErrNotFound) {
 			return nil, err
 		}
 		if extBatch != nil {
-			batches = append(batches, common.PublicBatch{BatchHeader: *extBatch.Header})
+			batches = append(batches, common.PublicBatch{BatchHeader: *extBatch.Header, TxHashes: extBatch.TxHashes})
 		}
 	}
-	// fetch the total batches so we can paginate
-	header, err := db.GetHeadBatchHeader()
-	if err != nil {
-		return nil, err
-	}
 
 	return &common.BatchListingResponse{
 		BatchesData: batches,
diff --git a/tools/obscuroscan_v2/frontend/src/components/BatchDataGrid.vue b/tools/obscuroscan_v2/frontend/src/components/BatchDataGrid.vue
index 8685406799..608db99a57 100644
--- a/tools/obscuroscan_v2/frontend/src/components/BatchDataGrid.vue
+++ b/tools/obscuroscan_v2/frontend/src/components/BatchDataGrid.vue
@@ -18,7 +18,8 @@
           <Timestamp :unixTimestampSeconds="Number(scope.row.timestamp)" />
         </template>
       </el-table-column>
-      <el-table-column prop="l1Proof" label="Included in Rollup"/>
+      <el-table-column label="No. Transactions" :formatter="function(row) { return row.txHashes ? row.txHashes.length : 0; }" width="180" />
+      <el-table-column prop="l1Proof" label="L1 block"/>
     </el-table>
     <el-pagination
         @size-change="handleSizeChange"
@@ -47,14 +48,9 @@ export default {
   setup() {
     const store = useBatchStore()
 
-    // Start polling when the component is mounted
+    // Reload batch data onMount
     onMounted(() => {
-      store.startPolling()
-    })
-
-    // Ensure to stop polling when component is destroyed or deactivated
-    onUnmounted(() => {
-      store.stopPolling()
+      store.fetch()
     })
 
     return {
@@ -80,21 +76,20 @@ export default {
       const store = useBatchStore()
       store.size = newSize
       store.offset = (this.currentPage - 1) * store.size
+      // reload data
+      store.fetch()
     },
     // Called when the current page is changed
     handleCurrentChange(newPage) {
       const store = useBatchStore()
       this.currentPage = newPage
       store.offset = (newPage - 1) * store.size
+      // reload data
+      store.fetch()
     },
     toggleWindow(data) {
       this.$refs.batchInfoWindowRef.displayData(data.hash);
     },
-  },
-  computed: {
-    tableRowClassName() {
-      return "hover"
-    }
   }
 }
 </script>