Beautify buttons and tables

Author: shuoweil

.pre-commit-config.yaml

@@ -46,4 +46,4 @@ repos:
     rev: v2.0.2
     hooks:
     -   id: biome-check
-        files: '\.js$'
+        files: '\.(js|css)$'

bigframes/display/anywidget.py

@@ -62,8 +62,9 @@ def __init__(self, dataframe: bigframes.dataframe.DataFrame):
         super().__init__()
         self._dataframe = dataframe
 
-        # respect display options
-        self.page_size = bigframes.options.display.max_rows
+        # respect display options for initial page size
+        initial_page_size = bigframes.options.display.max_rows
+        self.page_size = initial_page_size
 
         # Initialize data fetching attributes.
         self._batches = dataframe.to_pandas_batches(page_size=self.page_size)
@@ -91,6 +92,11 @@ def _esm(self):
         """Load JavaScript code from external file."""
         return resources.read_text(bigframes.display, "table_widget.js")
 
+    @functools.cached_property
+    def _css(self):
+        """Load CSS code from external file."""
+        return resources.read_text(bigframes.display, "table_widget.css")
+
     page = traitlets.Int(0).tag(sync=True)
     page_size = traitlets.Int(25).tag(sync=True)
     row_count = traitlets.Int(0).tag(sync=True)
@@ -115,6 +121,23 @@ def _validate_page(self, proposal: Dict[str, Any]):
         # Clamp the proposed value to the valid range [0, max_page].
         return max(0, min(value, max_page))
 
+    @traitlets.validate("page_size")
+    def _validate_page_size(self, proposal: Dict[str, Any]):
+        """Validate page size to ensure it's positive and reasonable.
+        Args:
+            proposal: A dictionary from the traitlets library containing the
+                proposed change. The new value is in proposal["value"].
+        """
+        value = proposal["value"]
+
+        # Ensure page size is positive and within reasonable bounds
+        if value <= 0:
+            return self.page_size  # Keep current value
+
+        # Cap at reasonable maximum to prevent performance issues
+        max_page_size = 1000
+        return min(value, max_page_size)
+
     def _get_next_batch(self) -> bool:
         """
         Gets the next batch of data from the generator and appends to cache.
@@ -148,6 +171,13 @@ def _cached_data(self) -> pd.DataFrame:
             return pd.DataFrame(columns=self._dataframe.columns)
         return pd.concat(self._cached_batches, ignore_index=True)
 
+    def _reset_batches_for_new_page_size(self):
+        """Reset the batch iterator when page size changes."""
+        self._batches = self._dataframe.to_pandas_batches(page_size=self.page_size)
+        self._cached_batches = []
+        self._batch_iter = None
+        self._all_data_loaded = False
+
     def _set_table_html(self):
         """Sets the current html data based on the current page and page size."""
         start = self.page * self.page_size
@@ -174,6 +204,18 @@ def _set_table_html(self):
         )
 
     @traitlets.observe("page")
-    def _page_changed(self, change):
+    def _page_changed(self, _change: Dict[str, Any]):
         """Handler for when the page number is changed from the frontend."""
         self._set_table_html()
+
+    @traitlets.observe("page_size")
+    def _page_size_changed(self, _change: Dict[str, Any]):
+        """Handler for when the page size is changed from the frontend."""
+        # Reset the page to 0 when page size changes to avoid invalid page states
+        self.page = 0
+
+        # Reset batches to use new page size for future data fetching
+        self._reset_batches_for_new_page_size()
+
+        # Update the table display
+        self._set_table_html()

bigframes/display/table_widget.js

@@ -22,6 +22,7 @@ const ModelProperty = {
 };
 
 const Event = {
+	CHANGE: "change",
 	CHANGE_TABLE_HTML: `change:${ModelProperty.TABLE_HTML}`,
 	CLICK: "click",
 };
@@ -34,29 +35,59 @@ const Event = {
  * }} options
  */
 function render({ model, el }) {
+	// Structure
 	const container = document.createElement("div");
-	container.innerHTML = model.get(ModelProperty.TABLE_HTML);
-
-	const buttonContainer = document.createElement("div");
+	const tableContainer = document.createElement("div");
+	const footer = document.createElement("div");
+	// Total rows label
+	const rowCountLabel = document.createElement("div");
+	// Pagination controls
+	const paginationContainer = document.createElement("div");
 	const prevPage = document.createElement("button");
-	const label = document.createElement("span");
+	const paginationLabel = document.createElement("span");
 	const nextPage = document.createElement("button");
+	// Page size controls
+	const pageSizeContainer = document.createElement("div");
+	const pageSizeLabel = document.createElement("label");
+	const pageSizeSelect = document.createElement("select");
+
+	tableContainer.classList.add("table-container");
+	footer.classList.add("footer");
+	paginationContainer.classList.add("pagination");
+	pageSizeContainer.classList.add("page-size");
 
 	prevPage.type = "button";
 	nextPage.type = "button";
 	prevPage.textContent = "Prev";
 	nextPage.textContent = "Next";
 
+	pageSizeLabel.textContent = "Page Size";
+	for (const size of [10, 25, 50, 100]) {
+		const option = document.createElement("option");
+		option.value = size;
+		option.textContent = size;
+		if (size === model.get(ModelProperty.PAGE_SIZE)) {
+			option.selected = true;
+		}
+		pageSizeSelect.appendChild(option);
+	}
+
 	/** Updates the button states and page label based on the model. */
 	function updateButtonStates() {
+		const rowCount = model.get(ModelProperty.ROW_COUNT);
+		rowCountLabel.textContent = `${rowCount.toLocaleString()} total rows`;
+
 		const totalPages = Math.ceil(
 			model.get(ModelProperty.ROW_COUNT) / model.get(ModelProperty.PAGE_SIZE),
 		);
 		const currentPage = model.get(ModelProperty.PAGE);
 
-		label.textContent = `Page ${currentPage + 1} of ${totalPages}`;
+		paginationLabel.textContent = `Page ${currentPage + 1} of ${totalPages}`;
 		prevPage.disabled = currentPage === 0;
 		nextPage.disabled = currentPage >= totalPages - 1;
+
+		// Update page size selector
+		pageSizeSelect.value = model.get(ModelProperty.PAGE_SIZE);
 	}
 
 	/**
@@ -72,24 +103,48 @@ function render({ model, el }) {
 		}
 	}
 
-	prevPage.addEventListener(Event.CLICK, () => handlePageChange(-1));
-	nextPage.addEventListener(Event.CLICK, () => handlePageChange(1));
+	/** Handles the page_size in the model.
+	 * @param {number} size - new size to set
+	 */
+	function handlePageSizeChange(size) {
+		const currentSize = model.get(ModelProperty.PAGE_SIZE);
+		if (size !== currentSize) {
+			model.set(ModelProperty.PAGE_SIZE, size);
+			model.save_changes();
+		}
+	}
 
-	model.on(Event.CHANGE_TABLE_HTML, () => {
+	/** Updates the HTML in the table container **/
+	function handleTableHTMLChange() {
 		// Note: Using innerHTML can be a security risk if the content is
 		// user-generated. Ensure 'table_html' is properly sanitized.
-		container.innerHTML = model.get(ModelProperty.TABLE_HTML);
+		tableContainer.innerHTML = model.get(ModelProperty.TABLE_HTML);
 		updateButtonStates();
+	}
+
+	prevPage.addEventListener(Event.CLICK, () => handlePageChange(-1));
+	nextPage.addEventListener(Event.CLICK, () => handlePageChange(1));
+	pageSizeSelect.addEventListener(Event.CHANGE, (e) => {
+		const newSize = Number(e.target.value);
+		if (newSize) {
+			handlePageSizeChange(newSize);
+		}
 	});
+	model.on(Event.CHANGE_TABLE_HTML, handleTableHTMLChange);
 
 	// Initial setup
-	updateButtonStates();
-
-	buttonContainer.appendChild(prevPage);
-	buttonContainer.appendChild(label);
-	buttonContainer.appendChild(nextPage);
+	paginationContainer.appendChild(prevPage);
+	paginationContainer.appendChild(paginationLabel);
+	paginationContainer.appendChild(nextPage);
+	pageSizeContainer.appendChild(pageSizeLabel);
+	pageSizeContainer.appendChild(pageSizeSelect);
+	footer.appendChild(rowCountLabel);
+	footer.appendChild(paginationContainer);
+	footer.appendChild(pageSizeContainer);
+	container.appendChild(tableContainer);
+	container.appendChild(footer);
 	el.appendChild(container);
-	el.appendChild(buttonContainer);
+	handleTableHTMLChange();
 }
 
 export default { render };

owlbot.py

@@ -107,6 +107,13 @@
     "recursive-include bigframes *.json *.proto *.js py.typed",
 )
 
+# Include JavaScript and CSS files for display widgets
+assert 1 == s.replace(  # MANIFEST.in
+    ["MANIFEST.in"],
+    re.escape("recursive-include bigframes *.json *.proto *.js py.typed"),
+    "recursive-include bigframes *.json *.proto *.js *.css py.typed",
+)
+
 # Fixup the documentation.
 assert 1 == s.replace(  # docs/conf.py
     ["docs/conf.py"],