Fix bokeh widgets by adding in side effects to package json (streamli…

…t#7441)

e2e/scripts/st_bokeh_chart.py → e2e_playwright/st_bokeh_chart.py

@@ -12,6 +12,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+import numpy as np
+from bokeh.layouts import column, row
+from bokeh.models import ColumnDataSource, CustomJS, Slider
 from bokeh.plotting import figure
 
 import streamlit as st
@@ -38,3 +41,38 @@
 
 with col2:
     st.bokeh_chart(right_chart, use_container_width=True)
+
+x = np.linspace(0, 10, 500)
+y = np.sin(x)
+
+source = ColumnDataSource(data=dict(x=x, y=y))
+
+plot = figure(y_range=(-10, 10), width=400, height=400)
+
+plot.line("x", "y", source=source, line_width=3, line_alpha=0.6)
+
+amp = Slider(start=0.1, end=10, value=1, step=0.1, title="Amplitude")
+freq = Slider(start=0.1, end=10, value=1, step=0.1, title="Frequency")
+phase = Slider(start=-6.4, end=6.4, value=0, step=0.1, title="Phase")
+offset = Slider(start=-9, end=9, value=0, step=0.1, title="Offset")
+
+callback = CustomJS(
+    args=dict(source=source, amp=amp, freq=freq, phase=phase, offset=offset),
+    code="""
+    const A = amp.value
+    const k = freq.value
+    const phi = phase.value
+    const B = offset.value
+
+    const x = source.data.x
+    const y = Array.from(x, (x) => B + A*Math.sin(k*x+phi))
+    source.data = { x, y }
+""",
+)
+
+amp.js_on_change("value", callback)
+freq.js_on_change("value", callback)
+phase.js_on_change("value", callback)
+offset.js_on_change("value", callback)
+
+st.bokeh_chart(row(plot, column(amp, freq, phase, offset)))

e2e_playwright/st_bokeh_chart_test.py

@@ -0,0 +1,28 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+
+def test_bokeh_chart(themed_app: Page):
+    """Test that st.bokeh_chart renders correctly."""
+    bokeh_chart_elements = themed_app.locator("[data-testid=stBokehChart]")
+    expect(bokeh_chart_elements).to_have_count(4)
+
+    expect(bokeh_chart_elements.nth(0).locator("canvas").nth(0)).to_be_visible()
+    expect(bokeh_chart_elements.nth(1).locator("canvas").nth(0)).to_be_visible()
+    expect(bokeh_chart_elements.nth(2).locator("canvas").nth(0)).to_be_visible()
+
+    # show a bokeh slider
+    expect(bokeh_chart_elements.nth(3).locator("canvas").nth(0)).to_be_visible()

frontend/lib/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": ["**/vendor/bokeh/**"],
   "files": [
     "dist"
   ],

frontend/lib/src/vendor/bokeh/bokeh-api-2.4.3.esm.min.d.ts

@@ -0,0 +1,5 @@
+// Including this polyfill type declaration prevents typescript checker from
+// parsing bokeh-api-2.4.3 JS source file that has TS deems invalid (\u2118)
+// https://mothereff.in/js-variables
+declare const plugin;
+export default plugin;

frontend/lib/src/vendor/bokeh/bokeh-gl-2.4.3.esm.min.d.ts

@@ -0,0 +1,5 @@
+// Including this polyfill type declaration prevents typescript checker from
+// parsing bokeh-gl-2.4.3 JS source file that has TS deems invalid (\u2118)
+// https://mothereff.in/js-variables
+declare const plugin;
+export default plugin;

frontend/lib/src/vendor/bokeh/bokeh-tables-2.4.3.esm.min.d.ts

@@ -0,0 +1,5 @@
+// Including this polyfill type declaration prevents typescript checker from
+// parsing bokeh-tables-2.4.3 JS source file that has TS deems invalid (\u2118)
+// https://mothereff.in/js-variables
+declare const plugin;
+export default plugin;

frontend/lib/src/vendor/bokeh/bokeh-widgets-2.4.3.esm.min.d.ts

@@ -0,0 +1,5 @@
+// Including this polyfill type declaration prevents typescript checker from
+// parsing bokeh-widgets-2.4.3 JS source file that has TS deems invalid (\u2118)
+// https://mothereff.in/js-variables
+declare const plugin;
+export default plugin;