question about custom models using Javascript

Hi all,

I want to use Bokeh to develop some new custom views for displaying
biological (genomic and genetic) maps. This will probably involve
custom Models as I am not sure the plotting interface has everything
we need.

I am interested in using Javascript instead of Coffeescript. Would
love to use ES2016/ESNext because that is what I am used to coding in.
Does Bokeh support ES2016? Does it transpile it down to ES2015?

Are there any examples available in Javascript like for example the
custom.coffee class which is here:

http://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html

Any warnings or caveats for developing in Js instead of Coffeescript?

Thanks & sorry for so many questions out of the blue :slight_smile:

Alex

Hi again, so I converted the custom.coffee from the user's guide to
javascript using "decaffeinate custom.coffee", which produced an
ES2016 file, custom.js.

When I run a bokeh script to use the new model, the compiler fails
with an exception like:

File ".../bokeh/util/compiler.py", line 263, in gen_custom_models_static
    raise CompilationError(compiled.error)
bokeh.util.compiler.CompilationError:
.../custom/custom.js:3:0:'import' and 'export' may appear only with
'sourceType: module'

That error sounds like it actually comes from ESLint and maybe is a
configuration issue or .eslintrc issue?

But then I did some exploring of the Bokeh source, where it looks like
the javascript code is not transpiled or bundled at all. Which is not
going to work because the import statements are going to fail if
there is no bundler at all:


https://github.com/bokeh/bokeh/blob/master/bokehjs/src/js/compile.coffee#L90

So I guess this means coffeescript is really the only option for
developing custom models. Please correct me if this is not true. Also
any feedback is welcome. Or if anyone has figured out how to get Babel
working in compile.coffee, that would be cool too know about as well.

Thanks,
Alex

Hi Alex,

I think it should be possible to use JS, CoffeeScript, or TypeScript, but the person who can best answer this does not normally check the mailing list (and is also on vacation). I'll point them at this tho, so hopefully they can chime in in the next week or so.

Thanks,

Bryan

···

On Nov 22, 2016, at 5:06 PM, Alex Rice <[email protected]> wrote:

Hi again, so I converted the custom.coffee from the user's guide to
javascript using "decaffeinate custom.coffee", which produced an
ES2016 file, custom.js.

When I run a bokeh script to use the new model, the compiler fails
with an exception like:

File ".../bokeh/util/compiler.py", line 263, in gen_custom_models_static
   raise CompilationError(compiled.error)
bokeh.util.compiler.CompilationError:
.../custom/custom.js:3:0:'import' and 'export' may appear only with
'sourceType: module'

That error sounds like it actually comes from ESLint and maybe is a
configuration issue or .eslintrc issue?
https://github.com/eslint/eslint/issues/5552

But then I did some exploring of the Bokeh source, where it looks like
the javascript code is not transpiled or bundled at all. Which is not
going to work because the import statements are going to fail if
there is no bundler at all:

https://github.com/bokeh/bokeh/blob/master/bokeh/util/compiler.py#L133
https://github.com/bokeh/bokeh/blob/master/bokehjs/src/js/compile.coffee#L90

So I guess this means coffeescript is really the only option for
developing custom models. Please correct me if this is not true. Also
any feedback is welcome. Or if anyone has figured out how to get Babel
working in compile.coffee, that would be cool too know about as well.

Thanks,
Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6Bvbfq303SfVvnkGG7qNPUTZNW5B075H%2Bq3%3Dum7iqSPQsQ%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Bryan et al, OK cool thanks for letting me know. I look forward to
any additional tips or info about writing custom models in Javascript.
I have nothing against coffeescript, on the contrary it looks pretty
great. Just don't want to learn another javascript dialect if I don't
strictly have to. :slight_smile:

···

On Tue, Nov 22, 2016 at 5:55 PM, Bryan Van de Ven <[email protected]> wrote:

Hi Alex,

I think it should be possible to use JS, CoffeeScript, or TypeScript, but the person who can best answer this does not normally check the mailing list (and is also on vacation). I'll point them at this tho, so hopefully they can chime in in the next week or so.

Thanks,

Bryan

On Nov 22, 2016, at 5:06 PM, Alex Rice <[email protected].com> wrote:

Hi again, so I converted the custom.coffee from the user's guide to
javascript using "decaffeinate custom.coffee", which produced an
ES2016 file, custom.js.

When I run a bokeh script to use the new model, the compiler fails
with an exception like:

File ".../bokeh/util/compiler.py", line 263, in gen_custom_models_static
   raise CompilationError(compiled.error)
bokeh.util.compiler.CompilationError:
.../custom/custom.js:3:0:'import' and 'export' may appear only with
'sourceType: module'

That error sounds like it actually comes from ESLint and maybe is a
configuration issue or .eslintrc issue?
https://github.com/eslint/eslint/issues/5552

But then I did some exploring of the Bokeh source, where it looks like
the javascript code is not transpiled or bundled at all. Which is not
going to work because the import statements are going to fail if
there is no bundler at all:

https://github.com/bokeh/bokeh/blob/master/bokeh/util/compiler.py#L133
https://github.com/bokeh/bokeh/blob/master/bokehjs/src/js/compile.coffee#L90

So I guess this means coffeescript is really the only option for
developing custom models. Please correct me if this is not true. Also
any feedback is welcome. Or if anyone has figured out how to get Babel
working in compile.coffee, that would be cool too know about as well.

Thanks,
Alex

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6Bvbfq303SfVvnkGG7qNPUTZNW5B075H%2Bq3%3Dum7iqSPQsQ%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6B8D4CEC-BC26-41D8-B9B9-C963DFE26DAF%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi,

···

On Wed, Nov 23, 2016 at 12:06 AM, Alex Rice [email protected] wrote:

Hi again, so I converted the custom.coffee from the user’s guide to

javascript using “decaffeinate custom.coffee”, which produced an

ES2016 file, custom.js.

When I run a bokeh script to use the new model, the compiler fails

with an exception like:

File “…/bokeh/util/compiler.py”, line 263, in gen_custom_models_static

raise CompilationError(compiled.error)

bokeh.util.compiler.CompilationError:

…/custom/custom.js:3:0:‘import’ and ‘export’ may appear only with

‘sourceType: module’

That error sounds like it actually comes from ESLint and maybe is a

configuration issue or .eslintrc issue?

https://github.com/eslint/eslint/issues/5552

But then I did some exploring of the Bokeh source, where it looks like

the javascript code is not transpiled or bundled at all. Which is not

going to work because the import statements are going to fail if

there is no bundler at all:

https://github.com/bokeh/bokeh/blob/master/bokeh/util/compiler.py#L133

https://github.com/bokeh/bokeh/blob/master/bokehjs/src/js/compile.coffee#L90

So I guess this means coffeescript is really the only option for

developing custom models. Please correct me if this is not true. Also

any feedback is welcome. Or if anyone has figured out how to get Babel

working in compile.coffee, that would be cool too know about as well.

JavaScript and ES2015 and parts of ES2017 are handled together with TypeScript. This is because TypeScript is an extension of ECMAScript, so we can compile everything with one compiler. Adding Babel is an option, however Babel is huge (binary-wise) and generates code I don’t like. We also compile CoffeeScript this way as well. i.e. CoffeeScript gets compiled down to mixed ES5/ES2015 and then compiled once again with TypeScript, down to ES5.

It would be useful to know the generated “decaffeinated” code to explain why compilation fails. Maybe imports/exports are wrapped somehow and that won’t be allowed by TypeScript compiler (CoffeeScript code must must be compiled with “bare” option).

Mateusz

Thanks,

Alex

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CACmK6Bvbfq303SfVvnkGG7qNPUTZNW5B075H%2Bq3%3Dum7iqSPQsQ%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Mateusz, Thanks for the info- this makes sense. I put the output
from decaffeinate into a gist

If you can spot why it wont compile, that would be awesome. Or if you
can point me to any other custom models using Js instead of
Coffeescript?

Best regards,
Alex

···

On Wed, Nov 30, 2016 at 7:12 AM, Mateusz Paprocki <[email protected]> wrote:

JavaScript and ES2015 and parts of ES2017 are handled together with
TypeScript. This is because TypeScript is an extension of ECMAScript, so we
can compile everything with one compiler. Adding Babel is an option, however
Babel is huge (binary-wise) and generates code I don't like. We also compile
CoffeeScript this way as well. i.e. CoffeeScript gets compiled down to mixed
ES5/ES2015 and then compiled once again with TypeScript, down to ES5.

It would be useful to know the generated "decaffeinated" code to explain why
compilation fails. Maybe imports/exports are wrapped somehow and that won't
be allowed by TypeScript compiler (CoffeeScript code must must be compiled
with "bare" option).

Mateusz

Hi all,

I am still unable to create a custom model with javascript code. Here
is exactly what i am doing, and how it is failing. Aside: can anyone
share an example of a bokeh custom model implemented with javascript
code, which also works with the latest -dev release?

1) installed latest dev release per Mateusz advice:

$ conda list bokeh
# packages in environment at /Users/agr/miniconda3/envs/cmap2:
bokeh 0.12.4dev6 py_1 bokeh/channel/dev

2) Used current example code suggested by Mateusz and I also confirmed
this coffeescript model works fine for me in my environment:

https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py

3) Hand-converted the coffee-script to javascript (I suspect I could
have made an error here as I don't know coffeescript very well yet).
Here is the python and javascript code I am using now

Now Bokeh builds with no errors or warnings, but just fails at
runtime. Here is the Bokeh runtime error, in my browser, when I run
"python custom_app.py "

Model `Custom' does not exists. The problem may be two fold. Either a model was requested that's available in an extra bundle, e.g. a widget, or a custom model was requested, but it wasn't registered before first usage.

Thanks for any assistance you can provide!

Alex Rice // National Center for Genome Resources <[email protected]>

···

On Thu, Dec 1, 2016 at 11:53 AM, Mateusz Paprocki <[email protected]> wrote:

Hi,

On Wed, Nov 30, 2016 at 8:15 PM, Alex Rice <[email protected]> wrote:

Hi Mateusz,

As you suggest, changing the implementation of Custom class to:

from bokeh.util.compiler import JavaScript
...
__implementation__ = JavaScript('custom.js')

it now compiles, where it was erring before. So that is solved. But it
fails at runtime, as you suggest.

> Module `Custom' does not exists. The problem may be two fold. Either a
> model was requested that's available in an extra bundle, e.g. a widget, or a
> custom model was requested, but it wasn't registered before first usage.

What would be the solution for that? Sorry I am not sure what you mean
about having an older version of custom.js, or the imports and exports
being all wrong, because the custom.coffee works fine using bokeh
0.12.3, but then running decaffeinate custom.coffee > and running the
custom.js results in the runtime error.

Custom model handling is different between 0.12.3 and master (0.12.4-dev).
Looking at your two first E-mails, it seems that you are mixing example code
from 0.12.3 with bokeh 0.12.4-dev. That's not going to work. I suggest
starting with [1] (which is the same code, just updated with new-style
imports and exports).

[1]
https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py

Mateusz

Thanks,
Alex

On Wed, Nov 30, 2016 at 11:57 AM, Mateusz Paprocki >> <[email protected]> wrote:
> Hi,
>
> On Wed, Nov 30, 2016 at 7:22 PM, Alex Rice <[email protected]> wrote:
>>
>> Hi Mateusz, Thanks for the info- this makes sense. I put the output
>> from decaffeinate into a gist
>>
>> https://gist.github.com/guidorice/df557a0e12f0d3b6831799c8ff44eae7
>>
>> If you can spot why it wont compile, that would be awesome. Or if you
>> can point me to any other custom models using Js instead of
>> Coffeescript?
>
>
> This code does compile. It will fail at runtime, but that's a different
> thing. Maybe the problem is in how you include the implementation within
> a
> model? Instead having:
>
> class Custom(LayoutDOM):
> __implementation__ = CODE
>
> you should have
>
> from bokeh.util.compiler import JavaScript
>
> class Custom(LayoutDOM):
> __implementation__ = JavaScript(CODE)
>
> The earlier is just convenience for the default language (CoffeeScript).
>
> The code will fail at runtime, because imports and exports are all
> wrong.
> This may be due to using some older version of custom.js, e.g. mixing
> old
> documentation with new code. Note that custom models changed a lot since
> last release.
>
> Mateusz
>
>>
>> Best regards,
>> Alex
>>
>> On Wed, Nov 30, 2016 at 7:12 AM, Mateusz Paprocki >> >> <[email protected]> wrote:
>>
>> > JavaScript and ES2015 and parts of ES2017 are handled together with
>> > TypeScript. This is because TypeScript is an extension of ECMAScript,
>> > so
>> > we
>> > can compile everything with one compiler. Adding Babel is an option,
>> > however
>> > Babel is huge (binary-wise) and generates code I don't like. We also
>> > compile
>> > CoffeeScript this way as well. i.e. CoffeeScript gets compiled down
>> > to
>> > mixed
>> > ES5/ES2015 and then compiled once again with TypeScript, down to ES5.
>> >
>> > It would be useful to know the generated "decaffeinated" code to
>> > explain
>> > why
>> > compilation fails. Maybe imports/exports are wrapped somehow and that
>> > won't
>> > be allowed by TypeScript compiler (CoffeeScript code must must be
>> > compiled
>> > with "bare" option).
>> >
>> > Mateusz
>> >
>
>

Hi Mateusz, Thanks so much for catching those errors. There is one
final piece that is not working with the custom model, that is the
backbone template on line 15 of custom.js. I tried both of these

      this.$el.html("<h1>#{ @model.text }: #{ @model.slider.value }</h1>");

      this.$el.html("<h1>#{ this.model.text }: #{
this.model.slider.value }</h1>");

It is not interpolating the strings into the template, just displays
as literally
"#{ @model.text }: #{ @model.slider.value }".

BTW re: decaffeinate, it actually was thwarting me- with an error I
was unable to figure out

$ decaffeinate custom.coffee

custom.coffee → custom.js

/usr/local/lib/node_modules/decaffeinate/node_modules/repeating/index.js:10

throw new TypeError('Expected `count` to be a positive finite number');

^

···

On Mon, Dec 5, 2016 at 11:26 AM, Mateusz Paprocki <[email protected]> wrote:

Hi,

On Mon, Dec 5, 2016 at 6:10 PM, Alex Rice <[email protected]> wrote:

Hi all,

I am still unable to create a custom model with javascript code. Here
is exactly what i am doing, and how it is failing. Aside: can anyone
share an example of a bokeh custom model implemented with javascript
code, which also works with the latest -dev release?

1) installed latest dev release per Mateusz advice:

$ conda list bokeh
# packages in environment at /Users/agr/miniconda3/envs/cmap2:
bokeh 0.12.4dev6 py_1
bokeh/channel/dev

2) Used current example code suggested by Mateusz and I also confirmed
this coffeescript model works fine for me in my environment:

https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py

3) Hand-converted the coffee-script to javascript (I suspect I could
have made an error here as I don't know coffeescript very well yet).
Here is the python and javascript code I am using now

https://gist.github.com/guidorice/ee9ec2f5bd3a67e504bf9b564c533871

This translation has several errors, most notably static initialization of
Custom class is wrong. I suggest going back to decaffeinate, as it did good
job translating CoffeeScript. Previously any errors were due to using older
code as the basis, so it should work fine now (should, because decaffeinate
has some issues, but hopefully you're not going to hit them). This is
how Custom class should look like:

export class Custom extends LayoutDOM {}

Custom.prototype.default_view = CustomView;
Custom.prototype.type = "Custom";

Custom.define({
  text: [ p.String ],
  slider: [ p.Any ]
});

Note that this may be implemented differently, but there is no direct
syntactic equivalent (as far as I know).

Now Bokeh builds with no errors or warnings, but just fails at
runtime. Here is the Bokeh runtime error, in my browser, when I run
"python custom_app.py "

> Model `Custom' does not exists. The problem may be two fold. Either a
> model was requested that's available in an extra bundle, e.g. a widget, or a
> custom model was requested, but it wasn't registered before first usage.

This is because of this line:

  __implementation__ = JavaScript('custom.js')

It should be changed to:

  __implementation__ = FromFile('custom.js')

JavaScript() is meant to indicate that inline code is JavaScript, as we
otherwise can't deduce that. With external code, extensions are used to
determine the language.

Mateusz

Thanks for any assistance you can provide!

Alex Rice // National Center for Genome Resources <[email protected]>

On Thu, Dec 1, 2016 at 11:53 AM, Mateusz Paprocki >> <[email protected]> wrote:
> Hi,
>
> On Wed, Nov 30, 2016 at 8:15 PM, Alex Rice <[email protected]> wrote:
>>
>> Hi Mateusz,
>>
>> As you suggest, changing the implementation of Custom class to:
>>
>> from bokeh.util.compiler import JavaScript
>> ...
>> __implementation__ = JavaScript('custom.js')
>>
>> it now compiles, where it was erring before. So that is solved. But it
>> fails at runtime, as you suggest.
>>
>> > Module `Custom' does not exists. The problem may be two fold. Either
>> > a
>> > model was requested that's available in an extra bundle, e.g. a
>> > widget, or a
>> > custom model was requested, but it wasn't registered before first
>> > usage.
>>
>> What would be the solution for that? Sorry I am not sure what you mean
>> about having an older version of custom.js, or the imports and exports
>> being all wrong, because the custom.coffee works fine using bokeh
>> 0.12.3, but then running decaffeinate custom.coffee > and running the
>> custom.js results in the runtime error.
>
>
> Custom model handling is different between 0.12.3 and master
> (0.12.4-dev).
> Looking at your two first E-mails, it seems that you are mixing example
> code
> from 0.12.3 with bokeh 0.12.4-dev. That's not going to work. I suggest
> starting with [1] (which is the same code, just updated with new-style
> imports and exports).
>
> [1]
>
> https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py
>
> Mateusz
>
>>
>>
>> Thanks,
>> Alex
>>
>> On Wed, Nov 30, 2016 at 11:57 AM, Mateusz Paprocki >> >> <[email protected]> wrote:
>> > Hi,
>> >
>> > On Wed, Nov 30, 2016 at 7:22 PM, Alex Rice <[email protected]> >> >> > wrote:
>> >>
>> >> Hi Mateusz, Thanks for the info- this makes sense. I put the output
>> >> from decaffeinate into a gist
>> >>
>> >> https://gist.github.com/guidorice/df557a0e12f0d3b6831799c8ff44eae7
>> >>
>> >> If you can spot why it wont compile, that would be awesome. Or if
>> >> you
>> >> can point me to any other custom models using Js instead of
>> >> Coffeescript?
>> >
>> >
>> > This code does compile. It will fail at runtime, but that's a
>> > different
>> > thing. Maybe the problem is in how you include the implementation
>> > within
>> > a
>> > model? Instead having:
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = CODE
>> >
>> > you should have
>> >
>> > from bokeh.util.compiler import JavaScript
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = JavaScript(CODE)
>> >
>> > The earlier is just convenience for the default language
>> > (CoffeeScript).
>> >
>> > The code will fail at runtime, because imports and exports are all
>> > wrong.
>> > This may be due to using some older version of custom.js, e.g. mixing
>> > old
>> > documentation with new code. Note that custom models changed a lot
>> > since
>> > last release.
>> >
>> > Mateusz
>> >
>> >>
>> >> Best regards,
>> >> Alex
>> >>
>> >> On Wed, Nov 30, 2016 at 7:12 AM, Mateusz Paprocki >> >> >> <[email protected]> wrote:
>> >>
>> >> > JavaScript and ES2015 and parts of ES2017 are handled together
>> >> > with
>> >> > TypeScript. This is because TypeScript is an extension of
>> >> > ECMAScript,
>> >> > so
>> >> > we
>> >> > can compile everything with one compiler. Adding Babel is an
>> >> > option,
>> >> > however
>> >> > Babel is huge (binary-wise) and generates code I don't like. We
>> >> > also
>> >> > compile
>> >> > CoffeeScript this way as well. i.e. CoffeeScript gets compiled
>> >> > down
>> >> > to
>> >> > mixed
>> >> > ES5/ES2015 and then compiled once again with TypeScript, down to
>> >> > ES5.
>> >> >
>> >> > It would be useful to know the generated "decaffeinated" code to
>> >> > explain
>> >> > why
>> >> > compilation fails. Maybe imports/exports are wrapped somehow and
>> >> > that
>> >> > won't
>> >> > be allowed by TypeScript compiler (CoffeeScript code must must be
>> >> > compiled
>> >> > with "bare" option).
>> >> >
>> >> > Mateusz
>> >> >
>> >
>> >
>
>

Converted to be a JS template literal, it should be something like this:

      this.el\.html\(\`&lt;h1&gt;{model.text}: ${model.slider.value}</h1>`);

But that breaks the model loading. Typescript doesn't like the
backticks, apparently because at runtime I get:

Bokeh Error: model is not defined

···

On Mon, Dec 5, 2016 at 11:43 AM, Alex Rice <[email protected]> wrote:

Hi Mateusz, Thanks so much for catching those errors. There is one
final piece that is not working with the custom model, that is the
backbone template on line 15 of custom.js. I tried both of these

      this.$el.html("<h1>#{ @model.text }: #{ @model.slider.value }</h1>");

      this.$el.html("<h1>#{ this.model.text }: #{
this.model.slider.value }</h1>");

It is not interpolating the strings into the template, just displays
as literally
"#{ @model.text }: #{ @model.slider.value }".

BTW re: decaffeinate, it actually was thwarting me- with an error I
was unable to figure out

$ decaffeinate custom.coffee

custom.coffee → custom.js

/usr/local/lib/node_modules/decaffeinate/node_modules/repeating/index.js:10

throw new TypeError('Expected `count` to be a positive finite number');

^

On Mon, Dec 5, 2016 at 11:26 AM, Mateusz Paprocki > <[email protected]> wrote:

Hi,

On Mon, Dec 5, 2016 at 6:10 PM, Alex Rice <[email protected]> wrote:

Hi all,

I am still unable to create a custom model with javascript code. Here
is exactly what i am doing, and how it is failing. Aside: can anyone
share an example of a bokeh custom model implemented with javascript
code, which also works with the latest -dev release?

1) installed latest dev release per Mateusz advice:

$ conda list bokeh
# packages in environment at /Users/agr/miniconda3/envs/cmap2:
bokeh 0.12.4dev6 py_1
bokeh/channel/dev

2) Used current example code suggested by Mateusz and I also confirmed
this coffeescript model works fine for me in my environment:

https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py

3) Hand-converted the coffee-script to javascript (I suspect I could
have made an error here as I don't know coffeescript very well yet).
Here is the python and javascript code I am using now

https://gist.github.com/guidorice/ee9ec2f5bd3a67e504bf9b564c533871

This translation has several errors, most notably static initialization of
Custom class is wrong. I suggest going back to decaffeinate, as it did good
job translating CoffeeScript. Previously any errors were due to using older
code as the basis, so it should work fine now (should, because decaffeinate
has some issues, but hopefully you're not going to hit them). This is
how Custom class should look like:

export class Custom extends LayoutDOM {}

Custom.prototype.default_view = CustomView;
Custom.prototype.type = "Custom";

Custom.define({
  text: [ p.String ],
  slider: [ p.Any ]
});

Note that this may be implemented differently, but there is no direct
syntactic equivalent (as far as I know).

Now Bokeh builds with no errors or warnings, but just fails at
runtime. Here is the Bokeh runtime error, in my browser, when I run
"python custom_app.py "

> Model `Custom' does not exists. The problem may be two fold. Either a
> model was requested that's available in an extra bundle, e.g. a widget, or a
> custom model was requested, but it wasn't registered before first usage.

This is because of this line:

  __implementation__ = JavaScript('custom.js')

It should be changed to:

  __implementation__ = FromFile('custom.js')

JavaScript() is meant to indicate that inline code is JavaScript, as we
otherwise can't deduce that. With external code, extensions are used to
determine the language.

Mateusz

Thanks for any assistance you can provide!

Alex Rice // National Center for Genome Resources <[email protected]>

On Thu, Dec 1, 2016 at 11:53 AM, Mateusz Paprocki >>> <[email protected]> wrote:
> Hi,
>
> On Wed, Nov 30, 2016 at 8:15 PM, Alex Rice <[email protected]> wrote:
>>
>> Hi Mateusz,
>>
>> As you suggest, changing the implementation of Custom class to:
>>
>> from bokeh.util.compiler import JavaScript
>> ...
>> __implementation__ = JavaScript('custom.js')
>>
>> it now compiles, where it was erring before. So that is solved. But it
>> fails at runtime, as you suggest.
>>
>> > Module `Custom' does not exists. The problem may be two fold. Either
>> > a
>> > model was requested that's available in an extra bundle, e.g. a
>> > widget, or a
>> > custom model was requested, but it wasn't registered before first
>> > usage.
>>
>> What would be the solution for that? Sorry I am not sure what you mean
>> about having an older version of custom.js, or the imports and exports
>> being all wrong, because the custom.coffee works fine using bokeh
>> 0.12.3, but then running decaffeinate custom.coffee > and running the
>> custom.js results in the runtime error.
>
>
> Custom model handling is different between 0.12.3 and master
> (0.12.4-dev).
> Looking at your two first E-mails, it seems that you are mixing example
> code
> from 0.12.3 with bokeh 0.12.4-dev. That's not going to work. I suggest
> starting with [1] (which is the same code, just updated with new-style
> imports and exports).
>
> [1]
>
> https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py
>
> Mateusz
>
>>
>>
>> Thanks,
>> Alex
>>
>> On Wed, Nov 30, 2016 at 11:57 AM, Mateusz Paprocki >>> >> <[email protected].io> wrote:
>> > Hi,
>> >
>> > On Wed, Nov 30, 2016 at 7:22 PM, Alex Rice <[email protected]> >>> >> > wrote:
>> >>
>> >> Hi Mateusz, Thanks for the info- this makes sense. I put the output
>> >> from decaffeinate into a gist
>> >>
>> >> https://gist.github.com/guidorice/df557a0e12f0d3b6831799c8ff44eae7
>> >>
>> >> If you can spot why it wont compile, that would be awesome. Or if
>> >> you
>> >> can point me to any other custom models using Js instead of
>> >> Coffeescript?
>> >
>> >
>> > This code does compile. It will fail at runtime, but that's a
>> > different
>> > thing. Maybe the problem is in how you include the implementation
>> > within
>> > a
>> > model? Instead having:
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = CODE
>> >
>> > you should have
>> >
>> > from bokeh.util.compiler import JavaScript
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = JavaScript(CODE)
>> >
>> > The earlier is just convenience for the default language
>> > (CoffeeScript).
>> >
>> > The code will fail at runtime, because imports and exports are all
>> > wrong.
>> > This may be due to using some older version of custom.js, e.g. mixing
>> > old
>> > documentation with new code. Note that custom models changed a lot
>> > since
>> > last release.
>> >
>> > Mateusz
>> >
>> >>
>> >> Best regards,
>> >> Alex
>> >>
>> >> On Wed, Nov 30, 2016 at 7:12 AM, Mateusz Paprocki >>> >> >> <[email protected]> wrote:
>> >>
>> >> > JavaScript and ES2015 and parts of ES2017 are handled together
>> >> > with
>> >> > TypeScript. This is because TypeScript is an extension of
>> >> > ECMAScript,
>> >> > so
>> >> > we
>> >> > can compile everything with one compiler. Adding Babel is an
>> >> > option,
>> >> > however
>> >> > Babel is huge (binary-wise) and generates code I don't like. We
>> >> > also
>> >> > compile
>> >> > CoffeeScript this way as well. i.e. CoffeeScript gets compiled
>> >> > down
>> >> > to
>> >> > mixed
>> >> > ES5/ES2015 and then compiled once again with TypeScript, down to
>> >> > ES5.
>> >> >
>> >> > It would be useful to know the generated "decaffeinated" code to
>> >> > explain
>> >> > why
>> >> > compilation fails. Maybe imports/exports are wrapped somehow and
>> >> > that
>> >> > won't
>> >> > be allowed by TypeScript compiler (CoffeeScript code must must be
>> >> > compiled
>> >> > with "bare" option).
>> >> >
>> >> > Mateusz
>> >> >
>> >
>> >
>
>

Sorry for the noise... This works!

      this.el\.html\(\`&lt;h1&gt;{this.model.text}: ${this.model.slider.value}</h1>`);

The updated Gist is here, for posterity!

Thanks so much Mateusz and everyone for the assist.

···

On Mon, Dec 5, 2016 at 12:16 PM, Alex Rice <[email protected]> wrote:

Converted to be a JS template literal, it should be something like this:

      this.el\.html\(\`&lt;h1&gt;{model.text}: ${model.slider.value}</h1>`);

But that breaks the model loading. Typescript doesn't like the
backticks, apparently because at runtime I get:

Bokeh Error: model is not defined

On Mon, Dec 5, 2016 at 11:43 AM, Alex Rice <[email protected]> wrote:

Hi Mateusz, Thanks so much for catching those errors. There is one
final piece that is not working with the custom model, that is the
backbone template on line 15 of custom.js. I tried both of these

      this.$el.html("<h1>#{ @model.text }: #{ @model.slider.value }</h1>");

      this.$el.html("<h1>#{ this.model.text }: #{
this.model.slider.value }</h1>");

It is not interpolating the strings into the template, just displays
as literally
"#{ @model.text }: #{ @model.slider.value }".

BTW re: decaffeinate, it actually was thwarting me- with an error I
was unable to figure out

$ decaffeinate custom.coffee

custom.coffee → custom.js

/usr/local/lib/node_modules/decaffeinate/node_modules/repeating/index.js:10

throw new TypeError('Expected `count` to be a positive finite number');

^

On Mon, Dec 5, 2016 at 11:26 AM, Mateusz Paprocki >> <[email protected]> wrote:

Hi,

On Mon, Dec 5, 2016 at 6:10 PM, Alex Rice <[email protected]> wrote:

Hi all,

I am still unable to create a custom model with javascript code. Here
is exactly what i am doing, and how it is failing. Aside: can anyone
share an example of a bokeh custom model implemented with javascript
code, which also works with the latest -dev release?

1) installed latest dev release per Mateusz advice:

$ conda list bokeh
# packages in environment at /Users/agr/miniconda3/envs/cmap2:
bokeh 0.12.4dev6 py_1
bokeh/channel/dev

2) Used current example code suggested by Mateusz and I also confirmed
this coffeescript model works fine for me in my environment:

https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py

3) Hand-converted the coffee-script to javascript (I suspect I could
have made an error here as I don't know coffeescript very well yet).
Here is the python and javascript code I am using now

https://gist.github.com/guidorice/ee9ec2f5bd3a67e504bf9b564c533871

This translation has several errors, most notably static initialization of
Custom class is wrong. I suggest going back to decaffeinate, as it did good
job translating CoffeeScript. Previously any errors were due to using older
code as the basis, so it should work fine now (should, because decaffeinate
has some issues, but hopefully you're not going to hit them). This is
how Custom class should look like:

export class Custom extends LayoutDOM {}

Custom.prototype.default_view = CustomView;
Custom.prototype.type = "Custom";

Custom.define({
  text: [ p.String ],
  slider: [ p.Any ]
});

Note that this may be implemented differently, but there is no direct
syntactic equivalent (as far as I know).

Now Bokeh builds with no errors or warnings, but just fails at
runtime. Here is the Bokeh runtime error, in my browser, when I run
"python custom_app.py "

> Model `Custom' does not exists. The problem may be two fold. Either a
> model was requested that's available in an extra bundle, e.g. a widget, or a
> custom model was requested, but it wasn't registered before first usage.

This is because of this line:

  __implementation__ = JavaScript('custom.js')

It should be changed to:

  __implementation__ = FromFile('custom.js')

JavaScript() is meant to indicate that inline code is JavaScript, as we
otherwise can't deduce that. With external code, extensions are used to
determine the language.

Mateusz

Thanks for any assistance you can provide!

Alex Rice // National Center for Genome Resources <[email protected]>

On Thu, Dec 1, 2016 at 11:53 AM, Mateusz Paprocki >>>> <[email protected]> wrote:
> Hi,
>
> On Wed, Nov 30, 2016 at 8:15 PM, Alex Rice <[email protected]> wrote:
>>
>> Hi Mateusz,
>>
>> As you suggest, changing the implementation of Custom class to:
>>
>> from bokeh.util.compiler import JavaScript
>> ...
>> __implementation__ = JavaScript('custom.js')
>>
>> it now compiles, where it was erring before. So that is solved. But it
>> fails at runtime, as you suggest.
>>
>> > Module `Custom' does not exists. The problem may be two fold. Either
>> > a
>> > model was requested that's available in an extra bundle, e.g. a
>> > widget, or a
>> > custom model was requested, but it wasn't registered before first
>> > usage.
>>
>> What would be the solution for that? Sorry I am not sure what you mean
>> about having an older version of custom.js, or the imports and exports
>> being all wrong, because the custom.coffee works fine using bokeh
>> 0.12.3, but then running decaffeinate custom.coffee > and running the
>> custom.js results in the runtime error.
>
>
> Custom model handling is different between 0.12.3 and master
> (0.12.4-dev).
> Looking at your two first E-mails, it seems that you are mixing example
> code
> from 0.12.3 with bokeh 0.12.4-dev. That's not going to work. I suggest
> starting with [1] (which is the same code, just updated with new-style
> imports and exports).
>
> [1]
>
> https://github.com/bokeh/bokeh/blob/master/sphinx/source/docs/user_guide/examples/extensions_putting_together.py
>
> Mateusz
>
>>
>>
>> Thanks,
>> Alex
>>
>> On Wed, Nov 30, 2016 at 11:57 AM, Mateusz Paprocki >>>> >> <[email protected]> wrote:
>> > Hi,
>> >
>> > On Wed, Nov 30, 2016 at 7:22 PM, Alex Rice <[email protected]> >>>> >> > wrote:
>> >>
>> >> Hi Mateusz, Thanks for the info- this makes sense. I put the output
>> >> from decaffeinate into a gist
>> >>
>> >> https://gist.github.com/guidorice/df557a0e12f0d3b6831799c8ff44eae7
>> >>
>> >> If you can spot why it wont compile, that would be awesome. Or if
>> >> you
>> >> can point me to any other custom models using Js instead of
>> >> Coffeescript?
>> >
>> >
>> > This code does compile. It will fail at runtime, but that's a
>> > different
>> > thing. Maybe the problem is in how you include the implementation
>> > within
>> > a
>> > model? Instead having:
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = CODE
>> >
>> > you should have
>> >
>> > from bokeh.util.compiler import JavaScript
>> >
>> > class Custom(LayoutDOM):
>> > __implementation__ = JavaScript(CODE)
>> >
>> > The earlier is just convenience for the default language
>> > (CoffeeScript).
>> >
>> > The code will fail at runtime, because imports and exports are all
>> > wrong.
>> > This may be due to using some older version of custom.js, e.g. mixing
>> > old
>> > documentation with new code. Note that custom models changed a lot
>> > since
>> > last release.
>> >
>> > Mateusz
>> >
>> >>
>> >> Best regards,
>> >> Alex
>> >>
>> >> On Wed, Nov 30, 2016 at 7:12 AM, Mateusz Paprocki >>>> >> >> <[email protected]> wrote:
>> >>
>> >> > JavaScript and ES2015 and parts of ES2017 are handled together
>> >> > with
>> >> > TypeScript. This is because TypeScript is an extension of
>> >> > ECMAScript,
>> >> > so
>> >> > we
>> >> > can compile everything with one compiler. Adding Babel is an
>> >> > option,
>> >> > however
>> >> > Babel is huge (binary-wise) and generates code I don't like. We
>> >> > also
>> >> > compile
>> >> > CoffeeScript this way as well. i.e. CoffeeScript gets compiled
>> >> > down
>> >> > to
>> >> > mixed
>> >> > ES5/ES2015 and then compiled once again with TypeScript, down to
>> >> > ES5.
>> >> >
>> >> > It would be useful to know the generated "decaffeinated" code to
>> >> > explain
>> >> > why
>> >> > compilation fails. Maybe imports/exports are wrapped somehow and
>> >> > that
>> >> > won't
>> >> > be allowed by TypeScript compiler (CoffeeScript code must must be
>> >> > compiled
>> >> > with "bare" option).
>> >> >
>> >> > Mateusz
>> >> >
>> >
>> >
>
>