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

Jump to bottom

Centering difference between panel and raw bokeh models #19

Closed
jlstevens opened this issue Sep 4, 2018 · 0 comments
Closed

Centering difference between panel and raw bokeh models #19

jlstevens opened this issue Sep 4, 2018 · 0 comments

Comments

@jlstevens
Copy link
Contributor

This issue seems to happen when using templates. Here is a small app composed of three files to demonstrate the issue by toggling self.use_panel in CenteringApp (a zip of the three files can be found here):

Run the app with python launch.py:

launch.py:

from dashboard import CenteringApp

if __name__ == '__main__':
    from bokeh.server.server import Server
    server = Server({
        '/center': CenteringApp(name = 'Weird centering')()})
    server.start()

    server.io_loop.add_callback(server.show, "/center")
    server.io_loop.start()

else:
    print("Run dashboard using 'python launch.py'")

dashboard.py (note holoviews isn't actually relevant here and could be stripped out too):

import panel
import os
import param

from jinja2 import Environment, FileSystemLoader

from bokeh.application.handlers import FunctionHandler
from bokeh.application import Application
from bokeh.models import Div

import holoviews as hv

renderer = hv.renderer('bokeh')
renderer.mode='server'

class App(object):
    """
    Mixin class to handle boilerplate necessary to turn holoviews
    objects into Bokeh applications.
    """

    name = 'Dashboard'

    def load_template(self, **params):
        appindex = os.path.join('.', 'index.html')
        env = Environment(loader=FileSystemLoader(os.path.dirname(appindex)))
        self.template = env.get_template('index.html')

    def apply_theming(self, doc):
        doc._template = self.template

    def doc_handler(self, doc):
        """
        Callback passed to the Bokeh FunctionHandler.
        """
        viewable = self.viewable(doc)
        if isinstance(viewable, hv.Dimensioned):
            doc = renderer.server_doc(viewable, doc=doc)
        else:
            doc.add_root(viewable)

        doc.title = self.name
        return doc

    def __call__(self):
        """
        Call to return a Bokeh Application to serve.
        """
        return Application(FunctionHandler(self.doc_handler))


class CenteringApp(param.Parameterized, App):

    def __init__(self, **params):
        super(CenteringApp, self).__init__(**params)
        self.load_template()

        self.use_panel = False # Change this
        text = "Should be in the center" * 8
        self.text = "<div style='text-align:left'>{text}.</div>".format(text=text)

    def viewable(self, doc=None):
        self.apply_theming(doc)
        if self.use_panel:
            obj = panel.Pane(Div(text=self.text, width=1300))
            return obj._get_root(doc)
        else:
            obj = Div(text=self.text, width=1300)
            return obj

And finally index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        {{ bokeh_css }}
        {{ bokeh_js }}
        <style>
          html {
            width: 100%;
            height: 100%;
          }
          body {
            width: 100%;
            height: 100%;
            margin: auto;
          }
        </style>

        <style>
/* body background */
body {
  background-color: white;
  margin: 0px;
}

        </style>
    </head>

<body>
  <div title="alt text test" class="topnav" style='padding-top: 2em;padding-right: 2em'>
      <h1 id="title">&nbsp;Centering issue</h1>
  </div>
  <center>
    <div>
        {{ plot_div }}
        {{ plot_script }}
    </div>
  </center>
</body>

</html>

Using the raw bokeh model (self.use_panel=False):

image

Using panel (self.use_panel=True):

image

I would expect these two to look the same. I know I shouldn't be using the <center> tag (and will try specifying it with CSS shortly) in the template but I doubt that is the issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jlstevens @philippjfr