Angular 14 + @bokeh/bokehjs@3

ddkn · November 14, 2022, 11:03pm

Hello everyone!

Firstly, awesome getting the Bokeh 3.0+ releases going, I was quite excited for that Made a new analysis tool in python with it!

So after my last post about Angular 10 + @bokeh/[email protected], which was working. I tried upgrading to @bokeh/bokehjs@3, thinking things should be relatively painless to get going since I figured out plotting working previously, however, this is not the case.

After running npx npm install @bokeh/bokehjs@3, and then ng serve I get the following Errors,

./node_modules/@bokeh/bokehjs/build/js/lib/core/ui_events.js:1:0-30 - Error: Module not found: Error: Can't resolve 'hammerjs' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/projections.js:1:0-35 - Error: Module not found: Error: Can't resolve 'proj4/lib/core' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/projections.js:2:0-40 - Error: Module not found: Error: Can't resolve 'proj4/lib/Proj' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/spatial.js:1:0-32 - Error: Module not found: Error: Can't resolve 'flatbush' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js:1:0-40 - Error: Module not found: Error: Can't resolve '@bokeh/numbro' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js:2:0-51 - Error: Module not found: Error: Can't resolve 'sprintf-js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js:3:0-26 - Error: Module not found: Error: Can't resolve 'timezone' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util'

./node_modules/@bokeh/bokehjs/build/js/lib/models/formatters/datetime_tick_formatter.js:9:0-26 - Error: Module not found: Error: Can't resolve 'timezone' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/formatters'

./node_modules/@bokeh/bokehjs/build/js/lib/models/formatters/numeral_tick_formatter.js:3:0-40 - Error: Module not found: Error: Can't resolve '@bokeh/numbro' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/formatters'

./node_modules/@bokeh/bokehjs/build/js/lib/models/glyphs/webgl/regl_wrap.js:1:0-30 - Error: Module not found: Error: Can't resolve 'regl' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/glyphs/webgl'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:1:0-53 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/mathjax.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:2:0-51 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/input/tex.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:3:0-54 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/input/mathml' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:5:0-52 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/output/svg.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:6:0-73 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/adaptors/browserAdaptor' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:7:0-71 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/handlers/html.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:8:0-71 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/input/tex/AllPackages.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

./node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js:9:0-63 - Error: Module not found: Error: Can't resolve 'mathjax-full/js/input/tex/FindTeX.js' in '/home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax'

Seems like there is some importing issues with the new bokeh, where I had solved most of them prior. I decided to ensure these packages were installed via,

npx npm install flatbush @bokeh/numbro timezone regl mathjax-full hammerjs proj4

Then having to manually restart npx ng serve, I got a compiling solution

npx ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files                                                                                      | Names         |  Raw Size
vendor.js                                                                                                | vendor        |   4.20 MB |
polyfills.js                                                                                             | polyfills     | 318.04 kB |
styles.css, styles.js                                                                                    | styles        | 210.59 kB |
runtime.js                                                                                               | runtime       |  12.62 kB |
main.js                                                                                                  | main          |   8.68 kB |

                                                                                                         | Initial Total |   4.74 MB

Lazy Chunk Files                                                                                         | Names         |  Raw Size
node_modules_bokeh_bokehjs_build_js_lib_models_text_mathjax_index_js.js                                  | mathjax       |   2.41 MB |
node_modules_bokeh_bokehjs_build_js_lib_models_glyphs_webgl_index_js.js                                  | glyphs-webgl  | 371.04 kB |
common.js                                                                                                | common        |  29.78 kB |
default-node_modules_bokeh_bokehjs_build_js_lib_models_glyphs_webgl_base_marker_js.js                    | glyphs-webgl  |  14.64 kB |
node_modules_bokeh_bokehjs_build_js_lib_models_glyphs_webgl_base_js-node_modules_bokeh_bokehj-68319f0.js | webgl-line_gl |  10.05 kB |
node_modules_bokeh_bokehjs_build_js_lib_models_glyphs_webgl_base_js-node_modules_bokeh_bokehj-68319f1.js | webgl-step    |  10.05 kB |

Build at: 2022-11-14T22:57:04.223Z - Hash: 9e61b6bb982864d1 - Time: 15095ms

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js depends on '@bokeh/numbro'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js depends on 'sprintf-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/core/util/templating.js depends on 'timezone'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/glyphs/webgl/regl_wrap.js depends on 'regl'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/adaptors/browserAdaptor'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/handlers/html.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/input/mathml'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/input/tex.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/input/tex/AllPackages.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/input/tex/FindTeX.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/mathjax.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /home/ddkn/prj/f14bk/node_modules/@bokeh/bokehjs/build/js/lib/models/text/mathjax/index.js depends on 'mathjax-full/js/output/svg.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Which seemed good, but unfortunately I got a blank screen when inspecting http://localhost:4200

Does anyone have any ideas on what may be going on? I know Angluar isn’t most peoples thing here, but any help could be greatly appreciated.

Cheers,

ddkn · November 14, 2022, 11:18pm

So I found the offending line, however I get no error messages and unsure how to resolve it.

As in my post above I make a reference to my old project example where the code in question is this,

/* angular14/bokehdemo/src/app/plot/plot.component.ts */
import { Component, OnInit } from '@angular/core';
import * as Bokeh from '@bokeh/bokehjs/build/js/lib/api';

@Component({
  selector: 'app-plot',
  templateUrl: './plot.component.html',
  styleUrls: ['./plot.component.scss']
})
export class PlotComponent implements OnInit {

  constructor() { 
    const plt = Bokeh.Plotting;
    const la = Bokeh.LinAlg;
    
    let x = la.linspace(0, 10, 20);
    let y = x.map(function(v: number) { return v**2 });

    let source = new Bokeh.ColumnDataSource({
      data: {x: x, y: y}
    });
    
    let tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
    let p = plt.figure({title: "Test", tools: tools});
    
    let line = p.line(
      {field: 'x'},
      {field: 'y'},
      {source: source, linewidth: 2},
    );

    plt.show(p, '#bokeh-chart');
  }

  ngOnInit(): void {
  }

}

with this being the problematic line section,

let line = p.line(
      {field: 'x'},
      {field: 'y'},
      {source: source, linewidth: 2},
    );

Commenting it out, allows the plot to render, but I am unable to input data into the plot now

So a bit perplex on how to troubleshoot this. FYI this is running @bokeh/[email protected].

ddkn · November 14, 2022, 11:38pm

Well I am dumb. But hard for me to track initially. Turns out the error was me passing the option linewidth which should have been line_width. If there is an incorrect key it causes the whole Angular app to not respond correctly at all. The rest of the site should be able to render, but perhaps this is Angular related?

For example I pass the dictionary item “apple”, which shouldn’t exist.

line = p.line({field: x}, {field: y}, {source: source, apple: 3});

Obviously this crashes the app, and nothing is rendered anywhere (even elements outside of the scope of plotting). Passing the correct option,

line = p.line({field: x}, {field: y}, {source: source, line_width: 3});

allows the plot to work,

I went back and looked at my setup for @bokeh/[email protected] and the same issue happened there. Does anyone have a suggestion on how to handle this? I would have assumed the plot wouldn’t have rendered but the rest of the app should have worked.

Should I look at building an @bokeh/angular module or angular-bokehjs so that things could be handled? And have a nicer module for people to use, i.e. user friendly? Thoughts?

PS Even though I figured it out, hopefully this is useful to someone else who is having issues.

Bryan · November 15, 2022, 1:33am

@ddkn thanks for sharing your experience. I am extremely interested in developing BokehJS as a first-class front-end JS library, and not just a “backend” for Python Bokeh. Specifically related to this issue, I think there is an open issue about improving error reporting for BokehJS

I am a terrible front-end developer, and this is unlikely to change any time soon. Unfortunately, that means I am strongly disincentivized from doing these things myself, because there is just too high a risk that I devote a ton of time and end up making things that actual front-end devs would not find useful. I know @mateusz is also interested in this goal, but he is generally oversubscribed.

I think the #1 thing that could help advance BokehJS for front-end usage is if more experienced front-end developers decide to get involved. There’s lots of potential areas where even small contributions could be very valuable:

suggestions for convenience APIs or other Quality of Life improvements for front-end devs
adding new examples for different use/build cases, especially that can be maintained under CI
writing more docs for BokehJS

If you have the time and interest, we’d love to get help promoting BokehJS fixes and features and doc that help real front-end devs.

ddkn · November 15, 2022, 3:05pm

@Bryan Thanks for getting back!

I am extremely interested in developing BokehJS as a first-class front-end JS library, and not just a “backend” for Python Bokeh. Specifically related to this issue, I think there is an open issue about improving error reporting for BokehJS

I will take a look!

I am a terrible front-end developer, and this is unlikely to change any time soon.

I am not one either, but work has me transitioning to this position (just devouring books, haha), so I think I can be of some help. I love the tool and think both can be combined well python and frontend development.

For example, researchers can build, or prototype a tool that they can use for a company project etc… and since it is possible on python (something they are familiar with), you know you can do it on the front end interface. This is my intended use case, where we have access to REST data. Except now, a front end person can take advantage of all the widgets etc… from material/bootstrap or foundation (to name a few).

We are looking at migrating away from our current plotting tools that have some idiosyncrasies that are aggravating users. Since we have a large research division it make sense to use a plotting framework tailored for it, or one that can be familiar to data exploration.

suggestions for convenience APIs or other Quality of Life improvements for front-end devs

One obvious one is that @bokeh/bokehjs, does not pull in the dependencies I mentioned above… looking at npmjs you can see they are not listed.

npx npm install flatbush @bokeh/numbro timezone regl mathjax-full hammerjs proj4 choices.js

I think having some framework packages (Angular and React at least), would help workflow for those users would increase numbers and eyes. I was reading last night into building a wrapper for Angular.

adding new examples for different use/build cases, especially that can be maintained under CI

writing more docs for BokehJS

All of this sounds great!

I would love to help out. You guys have been helpful with my problems. I will be a bit slow, as I am finishing grad school and part time developing, but this part can line up with my work since it is related.

Would I be able to post issues on the github bokeh repo? As I see bokehjs is coupled into that project.

Aside question, does bokeh have access to transitions for changing axes limits and reloading data? Just curious.

Bryan · November 15, 2022, 4:48pm

@ddkn Yes definitely post BokehJS issues on the main Bokeh repo. It’s a monorepo that supports both parts of the project. Especially this, which I was not aware, would be a great start:

ddkn:

One obvious one is that @bokeh/bokehjs, does not pull in the dependencies I mentioned above… looking at npmjs you can see they are not listed.
npx npm install flatbush @bokeh/numbro timezone regl mathjax-full hammerjs proj4 choices.jsnpx npm install flatbush @bokeh/numbro timezone regl mathjax-full hammerjs proj4 choices.js

Aside question, does bokeh have access to transitions for changing axes limits and reloading data? Just curious.

By transitions do you mean automatically animated interpolation between “old” and “new” states? There was a very old issue about that, but only a handful of people have ever asked much about it. Since it would be a non-trivial amount of work and there was not much interest, it has never been pursued to date.

ddkn · November 15, 2022, 6:02pm

Yes definitely post BokehJS issues on the main Bokeh repo

Alright I started with two!

By transitions do you mean automatically animated interpolation between “old” and “new” states?

Basically yes, while I don’t care about that feature, some users like seeing transitions (maybe a way to mask updates happening). We were working with highcharts initially, but it has some annoyances that don’t respect setting figure parameters – from a users perspective on an interface – and this is a known issue it seems, which is bad when generating report figures, especially when you need to tailor plots.

I haven’t probed anyone at work if they care about that feature, but I think a working plot system that does what you tell it is more valuable at the moment.

Bryan · November 15, 2022, 8:10pm

So FWIW alot of the complexity for adding “tweening” would have comes from handling the general case involving the Bokeh server (i.e., what happens if a server update comes in during the middle of an animation). If the scope is restricted to just BokehJS then I think things become quite a but simpler. I think we could consider a BokehJS API for kicking off these animations. Maybe in the future some consideration for accommodating the “python side” could be built on top, but I actually think most of the demand for this feature would be from JS users so that seems like a good place to start. Please feel free to open a GH issue about a JS (only) API for tweening.

ddkn · November 17, 2022, 10:49am

Ah yes interesting point. I think having it as an option that is default disabled for python makes sense, opting to enable (once it works on the js side). Might make sense to have it an opt in option on both sides actually, since you could be getting updates quickly on the web side as well. But yes I think the demand could be from the JS devs. I think other priorities such as ease of use to get people on it are more important, so you have more JS devs to help out with a solution possibly.

Bryan · November 17, 2022, 5:41pm

@ddkn More or less, in this case I was proposing that there are really two levels of API: one a purely JS function API for performing animations, and the second a Python/JS Bokeh model, e.g. AnimationSchedule that would be for representing an animation schedule across runtimes. The Bokeh model would use the pure JS function API to implement itself. My suggestion is just that we can add the pure JS API first, even if we aren’t ready to develop the Bokeh model portion yet.

I think other priorities such as ease of use to get people on it are more important, so you have more JS devs to help out with a solution possibly.

I do agree with this 100%

system · February 15, 2023, 5:41pm

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.