Skip to content

Commit 4d20bab

Browse files
shuoweilshuoweil
authored
feat: set up Angular infrastructure for TableWidget (#16934)
Initialized an Angular workspace within bigframes/display/table_widget_angular and configured a custom build pipeline using esbuild to generate a single-file ESM output. This establishes the infrastructure required for the planned Angular hybrid approach for TableWidget. Verified at: screen/8uAnJEYQr9nx655 Fixes #<505414691> 🦕
1 parent 40c4014 commit 4d20bab

18 files changed

Lines changed: 15180 additions & 0 deletions

File tree

‎packages/bigframes/bigframes/display/table_widget_angular.js‎

Lines changed: 5155 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/bigframes/bigframes/display/table_widget_angular/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎packages/bigframes/bigframes/display/table_widget_angular/.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
!.vscode/mcp.json
30+
.history/*
31+
32+
# Miscellaneous
33+
/.angular/cache
34+
.sass-cache/
35+
/connect.lock
36+
/coverage
37+
/libpeerconnection.log
38+
testem.log
39+
/typings
40+
__screenshots__/
41+
42+
# System files
43+
.DS_Store
44+
Thumbs.db

‎packages/bigframes/bigframes/display/table_widget_angular/.prettierrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"printWidth": 100,
3+
"singleQuote": true,
4+
"overrides": [
5+
{
6+
"files": "*.html",
7+
"options": {
8+
"parser": "angular"
9+
}
10+
}
11+
]
12+
}

‎packages/bigframes/bigframes/display/table_widget_angular/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# TableWidgetAngular
2+
3+
This project is the Angular-based interactive Table Widget frontend for BigQuery DataFrames (``bigframes``). It is integrated into the Python backend using ``anywidget``.
4+
5+
## Getting Started
6+
7+
Ensure you have [Node.js](https://nodejs.org/) installed.
8+
9+
1. Install dependencies:
10+
```bash
11+
npm install
12+
```
13+
14+
2. Start the local development server:
15+
```bash
16+
npm run start
17+
```
18+
Navigate to `http://localhost:4200/`. The application will automatically reload when you modify the source files under `src/`.
19+
20+
## Development & Code Scaffolding
21+
22+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli). To generate a new component, directive, or service:
23+
```bash
24+
ng generate component component-name
25+
```
26+
27+
## Running Tests
28+
29+
To execute unit tests:
30+
```bash
31+
npm run test
32+
```
33+
34+
## Packaging for Python
35+
36+
Before testing the widget inside a Jupyter notebook or committing changes, compile the Angular app and bundle it so that the Python backend can load it:
37+
```bash
38+
npm run build:widget
39+
```
40+
41+
This command compiles the project in production mode and then triggers `bundle.js` (via `esbuild`) to bundle the browser artifacts into a single unified ES module file at `../table_widget_angular.js`.

‎packages/bigframes/bigframes/display/table_widget_angular/angular.json‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "npm"
6+
},
7+
"newProjectRoot": "projects",
8+
"projects": {
9+
"table-widget-angular": {
10+
"projectType": "application",
11+
"schematics": {},
12+
"root": "",
13+
"sourceRoot": "src",
14+
"prefix": "app",
15+
"architect": {
16+
"build": {
17+
"builder": "@angular/build:application",
18+
"options": {
19+
"browser": "src/main.ts",
20+
"tsConfig": "tsconfig.app.json",
21+
"assets": [
22+
{
23+
"glob": "**/*",
24+
"input": "public"
25+
}
26+
],
27+
"styles": [
28+
"src/styles.css"
29+
]
30+
},
31+
"configurations": {
32+
"production": {
33+
"budgets": [
34+
{
35+
"type": "initial",
36+
"maximumWarning": "500kB",
37+
"maximumError": "1MB"
38+
},
39+
{
40+
"type": "anyComponentStyle",
41+
"maximumWarning": "4kB",
42+
"maximumError": "8kB"
43+
}
44+
],
45+
"outputHashing": "all"
46+
},
47+
"development": {
48+
"optimization": false,
49+
"extractLicenses": false,
50+
"sourceMap": true
51+
}
52+
},
53+
"defaultConfiguration": "production"
54+
},
55+
"serve": {
56+
"builder": "@angular/build:dev-server",
57+
"configurations": {
58+
"production": {
59+
"buildTarget": "table-widget-angular:build:production"
60+
},
61+
"development": {
62+
"buildTarget": "table-widget-angular:build:development"
63+
}
64+
},
65+
"defaultConfiguration": "development"
66+
},
67+
"test": {
68+
"builder": "@angular/build:unit-test"
69+
}
70+
}
71+
}
72+
}
73+
}

‎packages/bigframes/bigframes/display/table_widget_angular/bundle.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
* Copyright 2026 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
const esbuild = require('esbuild');
18+
const path = require('path');
19+
20+
const banner = `/*
21+
* Copyright 2026 Google LLC
22+
*
23+
* Licensed under the Apache License, Version 2.0 (the "License");
24+
* you may not use this file except in compliance with the License.
25+
* You may obtain a copy of the License at
26+
*
27+
* http://www.apache.org/licenses/LICENSE-2.0
28+
*
29+
* Unless required by applicable law or agreed to in writing, software
30+
* distributed under the License is distributed on an "AS IS" BASIS,
31+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
32+
* See the License for the specific language governing permissions and
33+
* limitations under the License.
34+
*/
35+
`;
36+
37+
esbuild.build({
38+
entryPoints: [path.resolve(__dirname, 'dist/table-widget-angular/browser/main.js')],
39+
bundle: true,
40+
outfile: path.resolve(__dirname, '../table_widget_angular.js'),
41+
format: 'esm',
42+
logLevel: 'info',
43+
banner: {
44+
js: banner,
45+
},
46+
}).catch(() => process.exit(1));

0 commit comments

Comments
 (0)