From f06795f561274c96930b0b559986ca5c12ddc3a9 Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Thu, 2 Jan 2025 15:56:27 +0000
Subject: [PATCH] fix: enhance drill-down dialog with 'Load All Rows'
 functionality

---
 frontend/src2/charts/components/DrillDown.vue | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/frontend/src2/charts/components/DrillDown.vue b/frontend/src2/charts/components/DrillDown.vue
index 1d8bc384..a7dae735 100644
--- a/frontend/src2/charts/components/DrillDown.vue
+++ b/frontend/src2/charts/components/DrillDown.vue
@@ -62,6 +62,22 @@ function onSort(newSortOrder: Record<string, 'asc' | 'desc'>) {
 		drillDownQuery.value.execute()
 	}
 }
+
+function loadAllRows() {
+	if (drillDownQuery.value) {
+		drillDownQuery.value.addLimit(drillDownQuery.value.result.totalRowCount)
+		drillDownQuery.value
+			.execute()
+			.then(() => {
+				return drillDownQuery.value?.fetchResultCount()
+			})
+			.catch((error) => {
+				console.error('Failed to load all rows:', error)
+			})
+
+	}
+}
+
 </script>
 
 <template>
@@ -77,10 +93,21 @@ function onSort(newSortOrder: Record<string, 'asc' | 'desc'>) {
 					:show-filter-row="true" :sort-order="sortOrder" @sort="onSort"
 					:on-export="drillDownQuery ? drillDownQuery.downloadResults : undefined">
 					<template #footer-left>
-						<p class="tnum p-1 text-sm text-gray-600">
-							Showing {{ drillDownQuery.result.rows.length }} of
-							{{ drillDownQuery.result.totalRowCount }} rows
-						</p>
+						<div class="flex items-center justify-between p-1 gap-4">
+							<p class="tnum text-sm text-gray-600">
+								Showing {{ drillDownQuery.result.rows.length }} of
+								{{ drillDownQuery.result.totalRowCount }} rows
+							</p>
+							<Button
+							v-if="drillDownQuery.result.rows.length < drillDownQuery.result.totalRowCount"
+								:variant="'ghost'"
+								theme="gray"
+								size="sm"
+								label="Load All Rows"
+								@click="loadAllRows"
+							>
+							</Button>
+						</div>
 					</template>
 				</DataTable>
 			</div>