Using node packages in bokeh callbacks

Hi all,
In a TypeScript callback I am trying to use mongoose (installed via npm) to connect to a database and I get an error “RuntimeError: no such module: mongoose”.

Is there any work-around to support node packages, like e.g. by moving some .js files to bokeh import directory?

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

CODE ="""
import {div, empty} from “core/dom”
import * as p from “core/properties”
import {LayoutDOM, LayoutDOMView} from “models/layouts/layout_dom”

import mongoose from “mongoose”
console.log(mongoose.Document)

export class CustomView extends LayoutDOMView {
initialize(options) {
super.initialize(options)
this.render()
this.connect(this.model.slider.change, () => this.render())
}
render() {
empty(this.el)
this.el.appendChild(div({
style: {
‘padding’: ‘2px’,
‘color’: ‘#b88d8e’,
‘background-color’: ‘#2a3153’,
},
}, ${this.model.text}: ${this.model.slider.value}))
}
}
export class Custom extends LayoutDOM {
default_view = CustomView
type = “Custom”
}

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

from bokeh.util.compiler import TypeScript
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Slider

class Custom(LayoutDOM):
implementation = TypeScript(CODE)
text = String(default=“Custom text”)
slider = Instance(Slider)

slider = Slider(start=0, end=10, step=0.1, value=0, title=“value”)
custom = Custom(text=“Special Slider Display”, slider=slider)
layout = column(slider, custom)
show(layout)

``

Hi again,
Does anybody know if it is possible to extend the BokehJS with typescript or javascript packages installed via node ?

···

On Saturday, November 17, 2018 at 2:45:48 PM UTC+1, tony halik wrote:

Hi all,
In a TypeScript callback I am trying to use mongoose (installed via npm) to connect to a database and I get an error “RuntimeError: no such module: mongoose”.

Is there any work-around to support node packages, like e.g. by moving some .js files to bokeh import directory?

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

CODE ="""
import {div, empty} from “core/dom”
import * as p from “core/properties”
import {LayoutDOM, LayoutDOMView} from “models/layouts/layout_dom”

import mongoose from “mongoose”
console.log(mongoose.Document)

export class CustomView extends LayoutDOMView {
initialize(options) {
super.initialize(options)
this.render()
this.connect(this.model.slider.change, () => this.render())
}
render() {
empty(this.el)
this.el.appendChild(div({
style: {
‘padding’: ‘2px’,
‘color’: ‘#b88d8e’,
‘background-color’: ‘#2a3153’,
},
}, ${this.model.text}: ${this.model.slider.value}))
}
}
export class Custom extends LayoutDOM {
default_view = CustomView
type = “Custom”
}

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

from bokeh.util.compiler import TypeScript
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Slider

class Custom(LayoutDOM):
implementation = TypeScript(CODE)
text = String(default=“Custom text”)
slider = Instance(Slider)

slider = Slider(start=0, end=10, step=0.1, value=0, title=“value”)
custom = Custom(text=“Special Slider Display”, slider=slider)
layout = column(slider, custom)
show(layout)

``

Hi,

Hi all,
In a TypeScript callback I am trying to use mongoose (installed via npm) to connect to a database and I get an error “RuntimeError: no such module: mongoose”.

Is there any work-around to support node packages, like e.g. by moving some .js files to bokeh import directory?

currently resolution of npm packages is not supported (tough, on the flip side, you can install npm packages with bokeh). You can try to treat the npm package as if it was part of the custom model’s source code, but with complex packages this will be tedious at best (e.g. you will have to bring mongoose’s dependencies and their dependencies in manually). Currently the best approach is to include external libraries as independent bundles and then invoke them using globals. Support for npm packages is supposed to be added, but can’t say when exactly this will happen.

Mateusz

···

On Sat, Nov 17, 2018 at 2:45 PM [email protected] wrote:

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

CODE ="""
import {div, empty} from “core/dom”
import * as p from “core/properties”
import {LayoutDOM, LayoutDOMView} from “models/layouts/layout_dom”

import mongoose from “mongoose”
console.log(mongoose.Document)

export class CustomView extends LayoutDOMView {
initialize(options) {
super.initialize(options)
this.render()
this.connect(this.model.slider.change, () => this.render())
}
render() {
empty(this.el)
this.el.appendChild(div({
style: {
‘padding’: ‘2px’,
‘color’: ‘#b88d8e’,
‘background-color’: ‘#2a3153’,
},
}, ${this.model.text}: ${this.model.slider.value}))
}
}
export class Custom extends LayoutDOM {
default_view = CustomView
type = “Custom”
}

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

from bokeh.util.compiler import TypeScript
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Slider

class Custom(LayoutDOM):
implementation = TypeScript(CODE)
text = String(default=“Custom text”)
slider = Instance(Slider)

slider = Slider(start=0, end=10, step=0.1, value=0, title=“value”)
custom = Custom(text=“Special Slider Display”, slider=slider)
layout = column(slider, custom)
show(layout)

``

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/8cd68346-bc9e-4113-9726-c9b3f6c3ab03%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks. I complied mongoose with webpack to include it in the html template using jinja2 but I found out that mongoose will not work in the browser.
It only runs on the server while I was targeting a SPA based only on javascript callbacks.
I will look for different solution and come back to this.

···

On Saturday, November 17, 2018 at 2:45:48 PM UTC+1, tony halik wrote:

Hi all,
In a TypeScript callback I am trying to use mongoose (installed via npm) to connect to a database and I get an error “RuntimeError: no such module: mongoose”.

Is there any work-around to support node packages, like e.g. by moving some .js files to bokeh import directory?

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

CODE ="""
import {div, empty} from “core/dom”
import * as p from “core/properties”
import {LayoutDOM, LayoutDOMView} from “models/layouts/layout_dom”

import mongoose from “mongoose”
console.log(mongoose.Document)

export class CustomView extends LayoutDOMView {
initialize(options) {
super.initialize(options)
this.render()
this.connect(this.model.slider.change, () => this.render())
}
render() {
empty(this.el)
this.el.appendChild(div({
style: {
‘padding’: ‘2px’,
‘color’: ‘#b88d8e’,
‘background-color’: ‘#2a3153’,
},
}, ${this.model.text}: ${this.model.slider.value}))
}
}
export class Custom extends LayoutDOM {
default_view = CustomView
type = “Custom”
}

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

from bokeh.util.compiler import TypeScript
from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Slider

class Custom(LayoutDOM):
implementation = TypeScript(CODE)
text = String(default=“Custom text”)
slider = Instance(Slider)

slider = Slider(start=0, end=10, step=0.1, value=0, title=“value”)
custom = Custom(text=“Special Slider Display”, slider=slider)
layout = column(slider, custom)
show(layout)

``