feat: rewrite interactive table widget in Angular by shuoweil · Pull Request #17416 · googleapis/google-cloud-python

shuoweil · 2026-06-10T21:54:26Z

This PR rewrites the frontend implementation of the interactive TableWidget in Angular, replacing the legacy vanilla JS version (table_widget.js). This enables more structured state management and paves the way for future UI improvements.

Key Changes:

Angular Frontend Rewrite:
- Created a new Angular application workspace under bigframes/display/table_widget_angular.
- Introduced WidgetStateService to manage the widget's internal state (pages, sorting, column visibility) and synchronize updates with the Python anywidget model.
- Rewrote the template, CSS variables (including VS Code dark mode support), pagination controls, and column sorting handlers as Angular components.
- Compiled and bundled the Angular workspace into the single distribution file table_widget_angular.js, which is now loaded by the Python class.
Backend Refactoring:
- Renamed DataFrame._get_display_df to _process_display_df and refactored it to return both the processed display DataFrame and its metadata.
- Updated html.py to standardize representation rendering pipelines, enabling native rendering support for both DataFrame and Series objects.
Robust Multi-Instance Bootstrapping:
- Configured the Angular bootstrap sequence to use createApplication() and manually attach each component instance to its local widget container (el). This prevents rendering conflicts and state bleeding when rendering multiple widgets on the same notebook page.
Testing:
- Added a frontend test suite (tests/js/table_widget_angular.test.js) to assert that multiple Angular widgets can bootstrap and render distinct model configurations concurrently.
- Updated Python backend unit tests under tests/unit/display/ to conform to the new _process_display_df interface.

Verified at: go/scrcast/NTkzNjEzNzYyNDM1NDgxNnw4NTI0NjA5My1iMA
screen/4NJKSkYEjoYjpxA

Fixes #<505414691> 🦕

…dget rendering

# Conflicts: # packages/bigframes/bigframes/display/table_widget_angular.js # packages/bigframes/bigframes/display/table_widget_angular/README.md # packages/bigframes/bigframes/display/table_widget_angular/src/app/app.spec.ts # packages/bigframes/bigframes/display/table_widget_angular/src/app/app.ts

…' into shuowei-angular-rewrite-core

# Conflicts: # packages/bigframes/bigframes/core/events.py # packages/bigframes/bigframes/core/utils.py # packages/bigframes/bigframes/session/__init__.py # packages/bigframes/bigframes/session/_io/bigquery/__init__.py # packages/bigframes/tests/unit/display/test_anywidget.py # packages/bigframes/tests/unit/session/test_read_gbq_colab.py

gemini-code-assist

Code Review

This pull request transitions the interactive Table Widget frontend for BigQuery DataFrames to a compiled Angular hybrid bundle using anywidget, updating the Python backend to support this integration. Key feedback identifies critical issues, including a missing import of Series in html.py that will cause a runtime NameError, and a bug in the Angular component where extracting column names via textContent includes appended sort indicators, breaking sorting on subsequent clicks. Additionally, it is recommended to remove the initializeHeight logic to let CSS handle the container height dynamically, and to immediately reset the local page signal to 0 in WidgetStateService.setPageSize for UI consistency.

…app/widget-state.service.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

…app/app.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

GarrettWu · 2026-06-12T21:34:37Z

Is this a feat or refactor?

If it is only "rewriting", then refactor.

GarrettWu · 2026-06-12T21:40:01Z

            )
            df = df.assign(**{col: df[col]._apply_unary_op(op) for col in json_cols})
-        return df
+        return df, []


what's the purpose of returning an empty list and then drop it?

GarrettWu · 2026-06-12T21:41:06Z

        )

-    def _get_display_df(self) -> DataFrame:
+    def _process_display_df(self) -> tuple[DataFrame, list[str]]:


don't quite get the meaning of renaming the function.

Though the original name wasn't representative, "process" is more vague than "get".

GarrettWu · 2026-06-12T21:44:10Z

-   npm install
-   ```
+```bash
+ng serve


Does it need any setup to be able to run ng command?

shuoweil added 30 commits May 4, 2026 23:18

feat: set up Angular infrastructure for TableWidget

88fcf76

feat: implement DOM sanitization in Angular bridge

2393021

feat: address code review comments and add license headers

49b7977

test: test pre-commit hook after noxfile fix

2b6a9fb

Merge branch 'main' into shuowei-angular

b959885

Alphabetize CSS declarations in app.ts

1e0990f

feat: add callback parameter to _read_gbq_colab

d3bf48c

Merge branch 'main' into shuowei-filter-execution-history

4258639

feat: support execution history filtering by events and job_ids

7574f22

Merge branch 'main' into shuowei-filter-execution-history

eccd236

feat: support automatic per-cell execution history filtering

d2eea39

format code

21d5dd8

fix: avoid mutating extra_query_labels in place

97c7260

format code

f080dda

fix: update pre-commit config to use ruff

4bd2735

Merge branch 'main' into shuowei-filter-execution-history

9dd03ed

fix mypy

dcae615

Merge branch 'main' into shuowei-filter-execution-history

eb548b6

feat: universal per-cell execution history filtering

7db1330

format code

da6682c

revert .pre-commit-config.yaml to old black/flake8 config

0ef9216

Merge branch 'main' into shuowei-angular

2e3de3d

chore: clean up angular boilerplate and add copyright headers

3cc2770

Merge branch 'main' into shuowei-angular

65dce43

feat: rewrite TableWidget core in Angular

c31f5a5

fix(display): cast JSON and nested struct columns to string for anywi…

3b4f7d7

…dget rendering

format code

cef1518

Merge branch 'main' into shuowei-angular-rewrite-core

efe189d

opt(display): batch df.assign calls for json display serialization

5282e6d

format code

b3c5577

shuoweil added 12 commits May 26, 2026 21:51

address pr review comments on execution history

eb3934b

format code

ee477b8

Merge remote-tracking branch 'origin/shuowei-filter-execution-history…

b6ae358

…' into shuowei-angular-rewrite-core

Fix Angular bootstrap by providing zoneless change detection

4d9a145

Merge branch 'main' into shuowei-angular-rewrite-core

da8dffb

fix: use createApplication to bootstrap widget on element

6a82838

docs: rerun notebook

973bdac

test: add unit test for angular widget bootstrap

e93a7a7

Merge branch 'main' into shuowei-angular-rewrite-core

b3e2220

test: clean up redundant comments in test

a18e7be

shuoweil self-assigned this Jun 10, 2026

shuoweil requested review from a team as code owners June 10, 2026 21:54

shuoweil requested review from GarrettWu and removed request for a team June 10, 2026 21:54

shuoweil marked this pull request as draft June 10, 2026 21:54

gemini-code-assist Bot reviewed Jun 10, 2026

View reviewed changes

shuoweil and others added 8 commits June 10, 2026 15:02

Update packages/bigframes/bigframes/display/table_widget_angular/src/…

7e663e8

…app/widget-state.service.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Update packages/bigframes/bigframes/display/table_widget_angular/src/…

3ac7567

…app/app.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Update packages/bigframes/bigframes/display/table_widget_angular/src/…

bb539ca

…app/app.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Update packages/bigframes/bigframes/display/table_widget_angular/src/…

fcea30a

…app/app.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

fix: address table widget angular code review comments

9adb442

Merge branch 'main' into shuowei-angular-rewrite-core

80fc691

format

a55af3e

style: format table widget angular and tests to 80-char limit

07c77fe

shuoweil marked this pull request as ready for review June 12, 2026 18:31

GarrettWu reviewed Jun 12, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: rewrite interactive table widget in Angular#17416

feat: rewrite interactive table widget in Angular#17416
shuoweil wants to merge 63 commits into
mainfrom
shuowei-angular-rewrite-core

shuoweil commented Jun 10, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GarrettWu commented Jun 12, 2026

Uh oh!

GarrettWu Jun 12, 2026

Uh oh!

GarrettWu Jun 12, 2026

Uh oh!

GarrettWu Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

shuoweil commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Changes:

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GarrettWu commented Jun 12, 2026

Uh oh!

GarrettWu Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

GarrettWu Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

GarrettWu Jun 12, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

shuoweil commented Jun 10, 2026 •

edited

Loading