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.

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

Load multiple versions of Bokeh into a single web page #9812

Closed
hdoupe opened this issue Mar 23, 2020 · 4 comments · Fixed by #9846
Closed

Load multiple versions of Bokeh into a single web page #9812

hdoupe opened this issue Mar 23, 2020 · 4 comments · Fixed by #9846

Comments

@hdoupe
Copy link

hdoupe commented Mar 23, 2020

Is your feature request related to a problem? Please describe.

I maintain an open-source webapp [link] where you can run models and archive the results from your model runs. Many of the archived results are bokeh plots. I need a way to render archived Bokeh plots that were created with Bokeh version 1.4.0 or earlier, and I need to render new plots that are created with Bokeh 2.0. and newer.

Describe the solution you'd like

I would like a function that is similar to JQuery's noConflict() function for Bokeh that would work like the code in this Stack Overflow post:

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Describe alternatives you've considered
I've considered reformatting archived results to meet the new API, but this doesn't seem like a sustainable solution. What do I do for future breaking changes or if it is not possible to reformat the archived results to meet the new API?

Another option is to set the correct Bokeh version in the HTML template when it is rendered on the server side. However, since the JSON output objects take some time to download from cloud storage, they are loaded dynamically after the page is rendered. This means that I'd have to reload the page if the Bokeh version for the outputs is mismatched. This isn't the end of the world, but it is a little clunky.

I've also begun implementing a one-off, quick-fix solution for my project that looks like this:

  <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
  <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
  <script type="text/javascript">
    var Bokeh134 = window.Bokeh;
  </script>

  <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-2.0.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-2.0.0.min.js"></script>
  <script type="text/javascript">
    var Bokeh200 = window.Bokeh;
  </script>
const BokehComponent: React.FC<{ output: BokehOutput }> = ({ output }) => {
  // @ts-ignore
  let bokeh = window.Bokeh134;
  // @ts-ignore
  if (output.data.doc.version === "2.0.0") {
    // @ts-ignore
    bokeh = window.Bokeh200;
  }
  console.log(bokeh);
  // @ts-ignore
  bokeh.embed.embed_item(output.data, output.id);
  return <div id={output.id} data-root-id={output.id} className="bk-root"></div>;
};

Additional context
@bryevdv discussed this with me in this discourse thread and suggested that I open an issue.

Also, if the Bokeh project is interested in this feature, then I'd be happy to help implement it. Thanks in advance for taking a look at this.

@mattpap
Copy link
Contributor

mattpap commented Mar 23, 2020

This would be a useful feature, but this proposal would make it usable only from bokehjs. It would be better to have this work in general across all bokeh's embedding types. I've been contemplating a solution where only the first instance would store global.Bokeh and all instances would store global.Bokeh[version]. This would be done on bokeh's bundle logic level, and should cover all cases. Though it would be also good to provide a solution for users who repack bokehjs' bundles with webpack, etc.

@hdoupe
Copy link
Author

hdoupe commented Mar 23, 2020

@mattpap Thanks for your reply! So I can get up to speed, what are the other embedding types?

I've been contemplating a solution where only the first instance would store global.Bokeh and all instances would store global.Bokeh[version].

For my use case, does this mean that I could access version 2.0 at window.Bokeh["2.0.0"]? Would the additional bokeh instances store a reference to themselves at window.Bokeh["x.y.z"]?

This would be done on bokeh's bundle logic level, and should cover all cases.

I'm pretty new to javascript. Can you elaborate a little more on what it means to do this at the bundle level?

@mattpap
Copy link
Contributor

mattpap commented Mar 29, 2020

@hdoupe, there's a preview implementation available in PR #9846.

@mattpap mattpap modified the milestones: next, 2.1 Mar 29, 2020
@hdoupe
Copy link
Author

hdoupe commented Mar 31, 2020

Thanks @mattpap. I'm looking forward to testing this out!

@mattpap mattpap modified the milestones: 2.1, 2.0.2 Apr 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants