Merge pull request #276 from compute-tooling/bokeh-vers

Fix Bokeh 2.0 compatitibility bug

package.json

@@ -30,6 +30,7 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^4.3.5",
+    "@types/semver": "^7.1.0",
     "@types/yup": "^0.26.24",
     "axios": "^0.19.0",
     "bokehjs": "^1.3.4",
@@ -45,6 +46,7 @@
     "react-router-dom": "^4.3.1",
     "remarkable": "^1.7.1",
     "sass-loader": "^7.1.0",
+    "semver": "^7.1.3",
     "slate": "^0.57.1",
     "slate-history": "^0.57.1",
     "slate-react": "^0.57.1",

src/Simulation/Outputs.tsx

@@ -17,6 +17,8 @@ import API from "./API";
 import { NotifyOnCompletion } from "./notify";
 import { RolePerms } from "../roles";
 
+import { lt as semverlt } from "semver";
+
 interface OutputsProps {
   api: API;
   remoteSim?: Simulation<RemoteOutputs>;
@@ -35,7 +37,15 @@ const TableComponent: React.FC<{ output: TableOutput }> = ({ output }) => (
 
 const BokehComponent: React.FC<{ output: BokehOutput }> = ({ output }) => {
   // @ts-ignore
-  window.Bokeh.embed.embed_item(output.data, output.id);
+  let bokeh = window.Bokeh200;
+  // @ts-ignore
+  if (semverlt(output.data.doc.version, "2.0.0")) {
+    // @ts-ignore
+    bokeh = window.Bokeh140;
+  }
+  console.log("bokeh", 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>;
 };
 

templates/base.html

@@ -50,14 +50,6 @@
     <link rel="stylesheet" href="{% static 'css/stripe.css' %}" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <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>
     <meta property="og:site_name" content="Compute Studio" />
     {% if sim %}
     <meta property="og:type" content="website" />

templates/comp/inputs_form.html

@@ -4,5 +4,19 @@
   <div id="inputs-container"></div>
   <script src="{% static 'js/core.js' %}"></script>
   <script src="{% static 'js/sim.js' %}"></script>
-  {% endblock %}
-</div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js"></script>
+<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
+<script type="text/javascript">
+  var Bokeh140 = 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>
+{% endblock %}