Skip to content

Commit b0f051c

Browse files
shuoweilshuoweil
committed
bug fix to display table in notebook
1 parent 688ec48 commit b0f051c

File tree

3 files changed

+22
-23
lines changed

3 files changed

+22
-23
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ coverage.xml
5858

5959
# System test environment variables.
6060
system_tests/local_test_setup
61+
tests/js/node_modules/
6162

6263
# Make sure a generated file isn't accidentally committed.
6364
pylintrc

‎bigframes/display/table_widget.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ const Event = {
3636
* @param {{ model: any, el: HTMLElement }} props - The widget properties.
3737
* @param {Document} doc - The document object to use for creating elements.
3838
*/
39-
function render({ model, el }, doc) {
39+
function render({ model, el }) {
4040
// Main container with a unique class for CSS scoping
4141
el.classList.add("bigframes-widget");
4242

4343
// Add error message container at the top
44-
const errorContainer = doc.createElement("div");
44+
const errorContainer = document.createElement("div");
4545
errorContainer.classList.add("error-message");
4646
errorContainer.style.display = "none";
4747
errorContainer.style.color = "red";
@@ -51,8 +51,8 @@ function render({ model, el }, doc) {
5151
errorContainer.style.borderRadius = "4px";
5252
errorContainer.style.backgroundColor = "#ffebee";
5353

54-
const tableContainer = doc.createElement("div");
55-
const footer = doc.createElement("div");
54+
const tableContainer = document.createElement("div");
55+
const footer = document.createElement("div");
5656

5757
// Footer styles
5858
footer.style.display = "flex";
@@ -63,16 +63,16 @@ function render({ model, el }, doc) {
6363
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
6464

6565
// Pagination controls
66-
const paginationContainer = doc.createElement("div");
67-
const prevPage = doc.createElement("button");
68-
const pageIndicator = doc.createElement("span");
69-
const nextPage = doc.createElement("button");
70-
const rowCountLabel = doc.createElement("span");
66+
const paginationContainer = document.createElement("div");
67+
const prevPage = document.createElement("button");
68+
const pageIndicator = document.createElement("span");
69+
const nextPage = document.createElement("button");
70+
const rowCountLabel = document.createElement("span");
7171

7272
// Page size controls
73-
const pageSizeContainer = doc.createElement("div");
74-
const pageSizeLabel = doc.createElement("label");
75-
const pageSizeInput = doc.createElement("select");
73+
const pageSizeContainer = document.createElement("div");
74+
const pageSizeLabel = document.createElement("label");
75+
const pageSizeInput = document.createElement("select");
7676

7777
prevPage.textContent = "<";
7878
nextPage.textContent = ">";
@@ -84,7 +84,7 @@ function render({ model, el }, doc) {
8484
// Page size options
8585
const pageSizes = [10, 20, 50, 100, 200, 500, 1000];
8686
for (const size of pageSizes) {
87-
const option = doc.createElement("option");
87+
const option = document.createElement("option");
8888
option.value = size;
8989
option.textContent = size;
9090
if (size === model.get(ModelProperty.PAGE_SIZE)) {
@@ -158,7 +158,7 @@ function render({ model, el }, doc) {
158158
header.style.cursor = "pointer";
159159

160160
// Create a span for the indicator
161-
const indicatorSpan = doc.createElement("span");
161+
const indicatorSpan = document.createElement("span");
162162
indicatorSpan.classList.add("sort-indicator");
163163
indicatorSpan.style.paddingLeft = "5px";
164164

‎tests/js/table_widget.test.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,11 @@ describe("TableWidget", () => {
2121
let model;
2222
let el;
2323
let render;
24-
let dom;
2524

2625
beforeEach(async () => {
2726
jest.resetModules();
28-
dom = new JSDOM("<!DOCTYPE html><div></div>");
29-
global.document = dom.window.document;
30-
el = dom.window.document.querySelector("div");
27+
document.body.innerHTML = "<div></div>";
28+
el = document.body.querySelector("div");
3129

3230
const tableWidget = (
3331
await import("../../bigframes/display/table_widget.js")
@@ -68,7 +66,7 @@ describe("TableWidget", () => {
6866
return null;
6967
});
7068

71-
render({ model, el }, dom.window.document);
69+
render({ model, el });
7270

7371
expect(el.classList.contains("bigframes-widget")).toBe(true);
7472
expect(el.querySelector(".error-message")).not.toBeNull();
@@ -91,7 +89,7 @@ describe("TableWidget", () => {
9189
return null;
9290
});
9391

94-
render({ model, el }, dom.window.document);
92+
render({ model, el });
9593

9694
// Manually trigger the table_html change handler
9795
const tableHtmlChangeHandler = model.on.mock.calls.find(
@@ -125,7 +123,7 @@ describe("TableWidget", () => {
125123
return null;
126124
});
127125

128-
render({ model, el }, dom.window.document);
126+
render({ model, el });
129127

130128
// Manually trigger the table_html change handler
131129
const tableHtmlChangeHandler = model.on.mock.calls.find(
@@ -158,7 +156,7 @@ describe("TableWidget", () => {
158156
return null;
159157
});
160158

161-
render({ model, el }, dom.window.document);
159+
render({ model, el });
162160

163161
// Manually trigger the table_html change handler
164162
const tableHtmlChangeHandler = model.on.mock.calls.find(
@@ -192,7 +190,7 @@ describe("TableWidget", () => {
192190
return null;
193191
});
194192

195-
render({ model, el }, dom.window.document);
193+
render({ model, el });
196194

197195
// Manually trigger the table_html change handler
198196
const tableHtmlChangeHandler = model.on.mock.calls.find(

0 commit comments

Comments
 (0)