refactor: rewrite interactive table widget in Angular (#17416)

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:
1. **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.
2. **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.
3. **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.
4. **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> 🦕

---------

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

Author: shuoweil

packages/bigframes/bigframes/dataframe.py

@@ -819,7 +819,7 @@ def __repr__(self) -> str:
             column_count=len(self.columns),
         )
 
-    def _get_display_df(self) -> DataFrame:
+    def _prepare_display_df(self) -> DataFrame:
         """Process ObjectRef and JSON/nested JSON columns for display."""
         df = self
         # Arrow/Pandas to_pandas_batches does not support raw JSON/nested JSON

packages/bigframes/bigframes/display/anywidget.py

@@ -175,8 +175,8 @@ def _on_initial_load_complete(self, change: dict[str, Any]):
 
     @functools.cached_property
     def _esm(self):
-        """Load JavaScript code from external file."""
-        return resources.read_text(bigframes.display, "table_widget.js")
+        """Load JavaScript code from the compiled Angular hybrid bundle."""
+        return resources.read_text(bigframes.display, "table_widget_angular.js")
 
     @functools.cached_property
     def _css(self):

packages/bigframes/bigframes/display/html.py

@@ -30,7 +30,6 @@
 import bigframes.formatting_helpers as formatter
 from bigframes._config import display_options, options
 from bigframes.display import plaintext
-from bigframes.series import Series
 
 if typing.TYPE_CHECKING:
     import bigframes.dataframe
@@ -192,9 +191,11 @@ def create_html_representation(
     total_columns: int,
 ) -> str:
     """Create an HTML representation of the DataFrame or Series."""
+    import bigframes.series
+
     opts = options.display
     with display_options.pandas_repr(opts):
-        if isinstance(obj, Series):
+        if isinstance(obj, bigframes.series.Series):
             pd_series = pandas_df.iloc[:, 0]
             try:
                 html_string = pd_series._repr_html_()
@@ -216,7 +217,9 @@ def create_html_representation(
 def _get_obj_metadata(
     obj: Union[bigframes.dataframe.DataFrame, bigframes.series.Series],
 ) -> tuple[bool, bool]:
-    is_series = isinstance(obj, Series)
+    import bigframes.series
+
+    is_series = isinstance(obj, bigframes.series.Series)
     if is_series:
         has_index = len(obj._block.index_columns) > 0
     else:
@@ -233,9 +236,15 @@ def get_anywidget_bundle(
     Helper method to create and return the anywidget mimebundle.
     This function encapsulates the logic for anywidget display.
     """
+    import bigframes.series
     from bigframes import display
 
-    df = obj._get_display_df()
+    if isinstance(obj, bigframes.series.Series):
+        df = obj.to_frame()
+    else:
+        df = obj
+
+    df = df._prepare_display_df()
 
     widget = display.TableWidget(df)
     widget_repr_result = widget._repr_mimebundle_(include=include, exclude=exclude)
@@ -283,8 +292,15 @@ def repr_mimebundle_deferred(
 def repr_mimebundle_head(
     obj: Union[bigframes.dataframe.DataFrame, bigframes.series.Series],
 ) -> dict[str, str]:
+    import bigframes.series
+
     opts = options.display
-    df = obj._get_display_df()
+    if isinstance(obj, bigframes.series.Series):
+        df = obj.to_frame()
+    else:
+        df = obj
+
+    df = df._prepare_display_df()
     pandas_df, row_count, query_job = df._block.retrieve_repr_request_results(
         opts.max_rows
     )