Angular + BokehJS with Tonado based Bokeh Server with holoviz extension

Community Support
1

Hello i am working on big data visualization project. We have a single page Angular frontend, and a few web services under reverse proxy nginx.
My case consists of create web service for plotting part of big data and transmit it to frontend side for embed to html.
On backend side i used holoviz extension (Data Stream and decimating data) for plotting and BokehServer implementation.
Also, i have extra pattern path as client side of bokeh server wherein use server_document function for return script to frontend throught nginx.
But i don’t want to use eval on frontend side, my code seems like a hack, it’s not cool. Is it possible to create the client side Bokeh using BokehJS under Angular?
I found ClientConnection and ClientSession classes in sources, but i can’t understand how used it.

My code now:

backend

import holoviews as hv
from holoviews.streams import Buffer
from holoviews import opts
from holoviews.operation import decimate
from holoviews.operation.datashader import datashade
import pandas as pd
import panel as pn

hv.extension('bokeh')

class IndexHandler(SessionMixin, RequestHandler):

    def get(self):
    	# seems like a hack!!!
    	# can i move this code to front-end BokehJS?
    	args = {}
        script = server_document('http://localhost:5002/bkapp', relative_urls=True, arguments=args)
        hostname = socket.gethostname()
        local_ip = socket.gethostbyname(hostname)
        script = script.replace('localhost:5002', local_ip+':80')
        self.write(script)

def bkapp(doc):
    args = doc.session_context.request.arguments
    df = pd.DataFrame()
    bf = Buffer(df, index=False, length=df.size)
    points = hv.DynamicMap(hv.Points, streams=[bf])
    points.opts(opts.Points(tools=['tap, zoom_in, zoom_out'], shared_axes=False))
    plotter = decimate(points)
    view = pn.Column()
    view.append(plotter)
    view.server_doc(doc=doc)
    return doc


server = Server({'/bkapp': Application(FunctionHandler(bkapp))},
                extra_patterns=[('/', IndexHandler)],
                port=5002, use_xheaders=True,
                db=SQLAlchemy(url=database_uri))
server.start()

frontend

this.bokehService.getScript()
.then(data => {
    /* Piece of... */
    this.script = this.sanitizer.bypassSecurityTrustHtml(data);
    const text = data.split('\n');
    text.splice(0, 2);
    text.splice(text.length - 1, 3);
    this.text = text.join('\n');
    eval(this.text);
});