feat: rewrite interactive table widget in Angular#17416
Draft
shuoweil wants to merge 63 commits into
Draft
Conversation
# 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
Contributor
There was a problem hiding this comment.
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>
…app/app.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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR Is under testing, it is not ready for review yet.
This PR rewrites the frontend implementation of the interactive
TableWidgetin 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:
bigframes/display/table_widget_angular.WidgetStateServiceto manage the widget's internal state (pages, sorting, column visibility) and synchronize updates with the Pythonanywidgetmodel.table_widget_angular.js, which is now loaded by the Python class.DataFrame._get_display_dfto_process_display_dfand refactored it to return both the processed display DataFrame and its metadata.html.pyto standardize representation rendering pipelines, enabling native rendering support for bothDataFrameandSeriesobjects.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.tests/js/table_widget_angular.test.js) to assert that multiple Angular widgets can bootstrap and render distinct model configurations concurrently.tests/unit/display/to conform to the new_process_display_dfinterface.Fixes #<505414691> 🦕