Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix imports of @bokeh/bokehjs #23

Merged
merged 1 commit into from
Feb 6, 2025
Merged

Fix imports of @bokeh/bokehjs #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 9 additions & 37 deletions ci/typescript/create_vanilla_webpack.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,51 +97,23 @@ rm temp.json
# 9. Add BokehJS dependency
npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz

# 10. tsconfig.json needs workaround for @bokehjs paths
cat > temp.json << EOF
{
"compilerOptions": {
"paths": {
"@bokehjs/*": ["./node_modules/@bokeh/bokehjs/build/js/lib/*"]
}
}
}
EOF
npx json-merger --output tsconfig.json --pretty tsconfig.json temp.json
rm temp.json

# 11. webpack.config.ts needs workaround to resolve @bokehjs alias
# TODO: use proper ts parser to parse, add new code, write back out
head -13 webpack.config.ts > temp.ts
cat >> temp.ts << EOF
resolve: {
alias: {
"@bokehjs": path.resolve(__dirname, "node_modules/@bokeh/bokehjs/build/js/lib/")
}
},
EOF
tail -9 webpack.config.ts >> temp.ts
mv temp.ts webpack.config.ts

# 12. Replace src/index.ts with code to create BokehJS plot
# 10. Replace src/index.ts with code to create BokehJS plot
cat > src/index.ts << EOF
import { Column, ColumnDataSource, version } from "@bokehjs/bokeh";
import { figure, show } from "@bokehjs/api/plotting";
import { Button } from "@bokehjs/models/widgets";
import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", version);
console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(target_id: string) {
const source = new ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

const plot = figure({
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});

const button = new Button({label: "Click me to add a point", button_type: "primary"});
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
Expand All @@ -151,14 +123,14 @@ function create_bokehjs_plot(target_id: string) {
}
button.on_click(button_callback);

const column = new Column({children: [plot, button], sizing_mode: "stretch_width"});
show(column, target_id);
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
Bokeh.Plotting.show(column, target_id);
}

create_bokehjs_plot("#target");
EOF

# 13. Rebuild and serve
# 11. Rebuild and serve
npm install
npm run build
#npm run serve
42 changes: 9 additions & 33 deletions typescript/vanilla_webpack/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,48 +103,24 @@
npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz
```

10. `tsconfig.json` needs workaround for `@bokehjs` paths, added to the `compilerOptions` section:

```json
"compilerOptions": {
"paths": {
"@bokehjs/*": ["./node_modules/@bokeh/bokehjs/build/js/lib/*"]
}
}
```

11. `webpack.config.ts` needs workaround to resolve `@bokehjs` alias also, added to the top-level of the `config`:

```typescript
const config: webpack.Configuration = {
resolve: {
alias: {
"@bokehjs": path.resolve(__dirname, "node_modules/@bokeh/bokehjs/build/js/lib/")
}
},
}
````

12. Remove contents of `src/index.ts` and replace with code to create BokehJS plot:
10. Remove contents of `src/index.ts` and replace with code to create BokehJS plot:

```typescript
import { Column, ColumnDataSource, version } from "@bokehjs/bokeh";
import { figure, show } from "@bokehjs/api/plotting";
import { Button } from "@bokehjs/models/widgets";
import * as Bokeh from "@bokeh/bokehjs";

console.info("BokehJS version:", version);
console.info("BokehJS version:", Bokeh.version);

function create_bokehjs_plot(target_id: string) {
const source = new ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});

const plot = figure({
const plot = Bokeh.Plotting.figure({
title: "Example BokehJS plot", height: 500, width: 500,
x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
});

plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});

const button = new Button({label: "Click me to add a point", button_type: "primary"});
const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
function button_callback() {
const data = source.data as any;
data.x.push(Math.random());
Expand All @@ -154,14 +130,14 @@
}
button.on_click(button_callback);

const column = new Column({children: [plot, button], sizing_mode: "stretch_width"});
show(column, target_id);
const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
Bokeh.Plotting.show(column, target_id);
}

create_bokehjs_plot("#target");
```

13. Rebuild and serve
11. Rebuild and serve

```bash
npm install
Expand Down