Archived Bokeh plots and upgrades

Community Support
1

Hi,

I maintain an open-source webapp [link] that hosts archived bokeh plots. The plots are stored as JSON and then rendered in the browser. I’m running into some problems rendering plots that were made with Bokeh 1.3.* and new plots made with Bokeh 2.0.

Has anyone tried to load multiple versions of Bokeh in a browser? That way I could select the client side Bokeh version that corresponds to the archived Bokeh JSON data.

Also if anyone else has run into this problem and has a better solution, I’d love to hear it.

Thanks in advance for your help! And thank you for creating and maintaining Bokeh!

Best,
Hank

2

I am afraid I don’t know that there is any established way to load multiple Bokeh versions in to the same page at once. It might be that new development is required to support this kind of usage (so a GH issue to discuss would be reasonable), but I don’t know that there is anything that could be done in the future that might help things already past.

Depending on the specific situation, it may make more sense to simply try and convert the old JSON to compatible with newer versions.

3

Thanks for your reply @Bryan! I will look into converting the old data. I’ve had to do that before, and while it was messy and complicated, it worked very well. Before I go down that path, I’m curious if it’s possible to implement something like JQuery’s noConflict() function. An ideal scenario is an API that looks kind of like the code in this SO 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>

I understand that this is a bit of a niche use case, and I am happy to try to implement it in userland.

4

@hdoupe It seems like it could be useful, but is also a matter of resources. If it’s something you can assist with that’d certainly help make it a reality. I’d suggest making a GitHub issue to discuss.

5

Ok, thanks @bryan. I’m happy to open an issue to discuss this further. I was able to load two bokeh versions 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>

and then when the output is rendered, the bokeh package corresponding to the output’s version is used to render it:

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>;
};
1 Like