code refactor

Author: shuoweil

.github/workflows/js-tests.yml

@@ -0,0 +1,20 @@
+name: js-tests
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+    - name: Install modules
+      working-directory: ./tests/js
+      run: npm install
+    - name: Run tests
+      working-directory: ./tests/js
+      run: npm test

bigframes/display/table_widget.css

@@ -28,7 +28,10 @@
 	align-items: center;
 	display: flex;
 	font-size: 0.8rem;
-	padding-top: 8px;
+	justify-content: space-between;
+	padding: 8px;
+	font-family:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
 .bigframes-widget .footer > * {
@@ -44,6 +47,14 @@
 	padding: 4px;
 }
 
+.bigframes-widget .page-indicator {
+	margin: 0 8px;
+}
+
+.bigframes-widget .row-count {
+	margin: 0 8px;
+}
+
 .bigframes-widget .page-size {
 	align-items: center;
 	display: flex;
@@ -52,6 +63,10 @@
 	justify-content: end;
 }
 
+.bigframes-widget .page-size label {
+	margin-right: 8px;
+}
+
 .bigframes-widget table {
 	border-collapse: collapse;
 	text-align: left;
@@ -91,4 +106,9 @@
 	font-family:
 		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 	font-size: 14px;
+	padding: 8px;
+	margin-bottom: 8px;
+	border: 1px solid red;
+	border-radius: 4px;
+	background-color: #ffebee;
 }

bigframes/display/table_widget.js

@@ -43,46 +43,34 @@ function render({ model, el }) {
 	// Add error message container at the top
 	const errorContainer = document.createElement("div");
 	errorContainer.classList.add("error-message");
-	errorContainer.style.display = "none";
-	errorContainer.style.color = "red";
-	errorContainer.style.padding = "8px";
-	errorContainer.style.marginBottom = "8px";
-	errorContainer.style.border = "1px solid red";
-	errorContainer.style.borderRadius = "4px";
-	errorContainer.style.backgroundColor = "#ffebee";
 
 	const tableContainer = document.createElement("div");
-	const footer = document.createElement("div");
-
-	// Footer styles
-	footer.style.display = "flex";
-	footer.style.justifyContent = "space-between";
-	footer.style.alignItems = "center";
-	footer.style.padding = "8px";
-	footer.style.fontFamily =
-		'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+	tableContainer.classList.add("table-container");
+	const footer = document.createElement("footer");
+	footer.classList.add("footer");
 
 	// Pagination controls
 	const paginationContainer = document.createElement("div");
+	paginationContainer.classList.add("pagination");
 	const prevPage = document.createElement("button");
 	const pageIndicator = document.createElement("span");
+	pageIndicator.classList.add("page-indicator");
 	const nextPage = document.createElement("button");
 	const rowCountLabel = document.createElement("span");
+	rowCountLabel.classList.add("row-count");
 
 	// Page size controls
 	const pageSizeContainer = document.createElement("div");
+	pageSizeContainer.classList.add("page-size");
 	const pageSizeLabel = document.createElement("label");
 	const pageSizeInput = document.createElement("select");
 
 	prevPage.textContent = "<";
 	nextPage.textContent = ">";
 	pageSizeLabel.textContent = "Page size:";
-	pageSizeLabel.style.marginRight = "8px";
-	pageIndicator.style.margin = "0 8px";
-	rowCountLabel.style.margin = "0 8px";
 
 	// Page size options
-	const pageSizes = [10, 20, 50, 100, 200, 500, 1000];
+	const pageSizes = [10, 25, 50, 100];
 	for (const size of pageSizes) {
 		const option = document.createElement("option");
 		option.value = size;

notebooks/dataframes/anywidget_mode.ipynb

@@ -157,7 +157,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "030f0b706a17487288677d33b6921a8e",
+       "model_id": "f0f1cc04e1564a6ab4ba39935aebd11a",
        "version_major": 2,
        "version_minor": 1
       },
@@ -189,7 +189,7 @@
    "id": "sorting-intro",
    "metadata": {},
    "source": [
-    "### Sorting by Column\n",
+    "### Sorting by Single-Column\n",
     "You can sort the table by clicking on the headers of columns that have orderable data types (like numbers, strings, and dates). Non-orderable columns (like arrays or structs) do not have sorting controls.\n",
     "\n",
     "**Sorting indicators (▲, ▼) are always visible for sorted columns. The unsorted indicator (●) is only visible when you hover over an unsorted column header.** The sorting control cycles through three states:\n",
@@ -255,7 +255,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "2fe252168e4249e5a694579e49f04065",
+       "model_id": "bed78e341154486bb49841ce12a0af93",
        "version_major": 2,
        "version_minor": 1
       },
@@ -369,7 +369,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "cc4d4dffe00a4f44b7cbcfdea440cc5a",
+       "model_id": "357c732c110e44fa9efe3e512da61638",
        "version_major": 2,
        "version_minor": 1
       },
@@ -409,8 +409,7 @@
      "data": {
       "text/html": [
        "✅ Completed. \n",
-       "    Query processed 85.9 kB in 15 seconds of slot time.\n",
-       "    Query processed 85.9 kB in 15 seconds of slot time.\n",
+       "    Query processed 85.9 kB in 14 seconds of slot time.\n",
        "    "
       ],
       "text/plain": [
@@ -457,7 +456,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7f9f40cf56ec4c30a2f1f52d0e825633",
+       "model_id": "af87c96ce359412a99b5eabbc1b9d137",
        "version_major": 2,
        "version_minor": 1
       },

tests/unit/session/test_clients.py

@@ -180,7 +180,11 @@ def test_user_agent_not_in_vscode(monkeypatch):
 
 
 @mock.patch.dict(os.environ, {"VSCODE_PID": "12345"}, clear=True)
-def test_user_agent_in_vscode(monkeypatch):
+@mock.patch(
+    "bigframes.session.environment.is_vscode_google_cloud_code_extension_installed",
+    return_value=False,
+)
+def test_user_agent_in_vscode(mock_is_installed, monkeypatch):
     monkeypatch_client_constructors(monkeypatch)
     provider = create_clients_provider()
     assert_clients_w_user_agent(provider, "vscode")