#!/usr/bin/env python
# coding: utf-8

# # Bokeh working in JupyterLite May 9 2023
# 
# To get started, went to https://jupyterlite.readthedocs.io/en/latest/ in Google Chrome and right-clicked on the 'Lab' button and **perhaps** chose to 'Open Link in Incognito Window'. (Opening in an incognito window **usually** makes it so that it won't open my old, **busy** 'session' on Jupyterlite and include all the old stuff I made. Essentially it **often** results in a 'fresh session'. I find though it isn't always fresh if you been using incognito mode recently. You can also just start it in a browser you don't often use to get a 'fresh sesion'. )
# 
# Also will work in JupyterLite started by going to [JupyterLite GitHub Pages Deployment Demo/template](https://github.com/jupyterlite/demo) and clicking on `https://jupyterlite.github.io/demo` below 'Try it in your browser'.
# 
# Then dragged in this notebook to the file navigation pane on the left and stepped through running the cells.

# ### Using JupyterLite generate the tutorial plot in a self-contained, **separate** HTML file 
# 
# This is based primarily on [the 'First steps 1: Creating a line chart' page in 'First steps' section of the Bokeh documentation](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html). You may also wish to look at the first half of [the 'First steps 7: Displaying and exporting' page of the 'First steps' in the Bokeh documentation](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_7.html), which is entitled **'Creating a standalone HTML file'** as I feel it adds more context to the initial route the first step uses.
# 

# In[1]:


get_ipython().run_line_magic('pip', 'install bokeh')
get_ipython().run_line_magic('pip', 'install xyzservices')
get_ipython().run_line_magic('pip', 'install pandas')


# In[2]:


# based on https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html and 
# `output_file()` code used under 'Creating Line Plots' at https://www.datacamp.com/tutorial/Introduction-to-bokeh-tutorial
from bokeh.plotting import figure, show
from bokeh.io import output_notebook, output_file, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)


# save the result
output_file('line_plot.html')

# show the results - THIS WILL THROW AN ERROR IN JUPYTERLITE MAY 2023 BUT IT WILL ALLOW THE `output_file()` function to run. INEXPLICABLY THE THE `output_file()` function WON'T RUN WITHOUT IT!
show(p)


# Note that **the `show(p)` is important here** even though it throws an error (`ImportError: cannot import name 'window' from 'js' (unknown location)`) as of May 2023.   
# I found that without that `show(p)` line attempting to execute itself,the `output_file()` function **won't execute and save the HTML version of the output**.  
# (You can prove this to yourself easily. Remove `show(p)` and change the file name to save to something unique. Run it and you'll never see the new name of the HTML made. Put it back and it will work.
# 
# This I suppose is consistent with the text of step number 6 on the ['First steps 1: Creating a line chart' page in 'First steps' section of the Bokeh documentation](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html), "Finally, use the show() function to generate your graph and open a web browser to display the generated HTML file."

# **Examine the HTML produced**
# 
# Now open `line_plot1.html` in the file navgiator and toggle to trust the HTML in the upper left of it by clicking on 'Trust HTML', and **then** it should show the bokeh plot.
# 
# Try the tools on the right of the plot. You'll see it is 'interactive' in the sense you can click on the 'Pan' icon (like an intersection of two lines with arrows at the ends) to the upper right side of the plot and click and drag to change the center. Or you can click on the 'Wheel Zoom' icon (like a cartoon eye (?) to the left of a magnifying glass looking) and then use the middle scroll functionality on a mouse to zoom in or out.

# In[4]:


pwd


# ### Show the same plot directly in the JupyterLite notebook
# 
# We'll use `output_notebook()`, covered [here](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_7.html#displaying-in-a-jupyter-notebook) in the section of 'Displaying in a Jupyter notebook
# ' in the second half of [the 'First steps 7: Displaying and exporting' page of the 'First steps' in the Bokeh documentation](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_7.html).

# In[ ]:


# I'm repeating this from above here because those who have used this notebook before may want to skip right to this section and need 
# to do the set-up. Having it close by will make it easier.
get_ipython().run_line_magic('pip', 'install bokeh')
get_ipython().run_line_magic('pip', 'install xyzservices')
get_ipython().run_line_magic('pip', 'install pandas')


# In[5]:


# based on https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_1.html and 
# `output_file()` code used under 'Creating Line Plots' at https://www.datacamp.com/tutorial/Introduction-to-bokeh-tutorial
from bokeh.plotting import figure, show
from bokeh.io import output_notebook, output_file, show

# prepare some data
x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

# create a new plot with a title and axis labels
p = figure(title="Simple line example", x_axis_label="x", y_axis_label="y")

# add a line renderer with legend and line thickness
p.line(x, y, legend_label="Temp.", line_width=2)


# set where to show the result
output_notebook()

# show the results
show(p)


# Note that above code seems to work to show the plot in the notebook output here even though it throws an error (`ImportError: cannot import name 'window' from 'js' (unknown location)`) as of May 2023. And it seems to have the typical 'interactive' features covered next. 
# 
# **Use the tools on the right of the plot to explore.**
# 
# You'll see the plot shown above in this notebook is 'interactive' in the sense you can click on the 'Pan' icon (like an intersection of two lines with arrows at the ends) to the upper right side of the plot and click and drag to change the center. Or you can click on the 'Wheel Zoom' icon (like a cartoon eye (?) to the left of a magnifying glass looking) and then use the middle scroll functionality on a mouse to zoom in or out.

# ## Expanding to add widgets
# 
# This section is based on above and ['First steps 9: Using widgets' page in the Bokeh documentation](https://docs.bokeh.org/en/latest/docs/first_steps/first_steps_9.html).
# 
# **I'd strongly advise restarting the kernel and running the `%pip install` commands in the next cell.**  
# This will set things up fresh. Otherwise, once you issue `output_notebook()` it will continue to also show the plots inline in the notebook and that isn't how this section was meant to be begun. And note that if you don't run the `%pip install` commands below you'll see errors, like `ModuleNotFoundError: No module named 'xyzservices'`.

# In[2]:


# I'm repeating this from above here because those who have used this notebook before may want to skip right to this section and need 
# to do the set-up. Having it close by will make it easier.
get_ipython().run_line_magic('pip', 'install bokeh')
get_ipython().run_line_magic('pip', 'install xyzservices')
get_ipython().run_line_magic('pip', 'install pandas')


# In[3]:


from bokeh.layouts import layout
from bokeh.models import Div, RangeSlider, Spinner
from bokeh.plotting import figure, show
from bokeh.io import output_file

# prepare some data
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]

# create plot with circle glyphs
p = figure(x_range=(1, 9), width=500, height=250)
points = p.circle(x=x, y=y, size=30, fill_color="#21a7df")

# set up textarea (div)
div = Div(
    text="""
          <p>Select the circle's size using this control element:</p>
          """,
    width=200,
    height=30,
)

# set up spinner
spinner = Spinner(
    title="Circle size",
    low=0,
    high=60,
    step=5,
    value=points.glyph.size,
    width=200,
)
spinner.js_link("value", points.glyph, "size")

# set up RangeSlider
range_slider = RangeSlider(
    title="Adjust x-axis range",
    start=0,
    end=10,
    step=1,
    value=(p.x_range.start, p.x_range.end),
)
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)

# create layout
layout = layout(
    [
        [div, spinner],
        [range_slider],
        [p],
    ]
)


# set where to show the result
output_file('widgets_example.html')

# show the results
show(layout)


# (As of May 2023: like above ,the caveat about the error that makes no difference is in effect.)
# 
# Like the firstion section, you'll open the standalone HTML file from the file navigator and toggle to trust the HTML in the upper left of it by clicking on 'Trust HTML', and **then** it should show the bokeh plot. 
# 
# Note there are widgets to control the look of elements of the bokeh plot.
# 
# Running the next cell will show the same thing in line in the notebook.

# In[4]:


from bokeh.layouts import layout
from bokeh.models import Div, RangeSlider, Spinner
from bokeh.plotting import figure, show
from bokeh.io import output_notebook

# prepare some data
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y = [4, 5, 5, 7, 2, 6, 4, 9, 1, 3]

# create plot with circle glyphs
p = figure(x_range=(1, 9), width=500, height=250)
points = p.circle(x=x, y=y, size=30, fill_color="#21a7df")

# set up textarea (div)
div = Div(
    text="""
          <p>Select the circle's size using this control element:</p>
          """,
    width=200,
    height=30,
)

# set up spinner
spinner = Spinner(
    title="Circle size",
    low=0,
    high=60,
    step=5,
    value=points.glyph.size,
    width=200,
)
spinner.js_link("value", points.glyph, "size")

# set up RangeSlider
range_slider = RangeSlider(
    title="Adjust x-axis range",
    start=0,
    end=10,
    step=1,
    value=(p.x_range.start, p.x_range.end),
)
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)

# create layout
layout = layout(
    [
        [div, spinner],
        [range_slider],
        [p],
    ]
)


# set where to show the result
output_notebook()

# show the results
show(layout)


# (As of May 2023: like above ,the caveat about the error that makes no difference is in effect.)