extende_interactive.md

Enhanced version of ipywidgets.interactive

You can add any widget like figures, htmls and observe any trait not just value. See this example and interact with it on

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import plotly.graph_objects as go

def on_click(cdata,html):
    html.value = pd.DataFrame(cdata or {}).to_html(index=False)

def on_select(sdata, html):
    plt.scatter(sdata.get('xs',[]),sdata.get('ys',[]))
    html.value = slides.plt2html().value


@slides.interact(
    on_select,
    on_click,
    fig = slides.patched_plotly(go.FigureWidget()), 
    html = slides.as_html_widget('**Select Box/Lesso on figure traces**'),
    A = (1,10), omega = (0,20), phi = (0,10),
    sdata = {'fig':'selected'}, cdata = {'fig':'clicked'},
    app_layout={'left_sidebar':['A','omega','phi','html'], 'center': ['fig']},
    grid_css={'.left-sidebar':{'background':'whitesmoke'}}, 
    )
def plot(fig:go.FigureWidget, A, omega,phi): # adding type hint allows auto-completion inside function
    fig.data = []
    x = np.linspace(0,10,100)
    fig.add_trace(go.Scatter(x=x, y=A*np.sin(omega*x + phi), mode='lines+markers'))

Above code is equivalent to below. Although there are very few extra lines of code, but organization is too clear. Also, methods can acess additional attributes on class, which is not possible in above case.

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import plotly.graph_objects as go
from ipyslides.interaction import InteractBase, callback

class MyInteract(InteractBase):
    def _interactive_params(self):
        return dict( 
            fig = slides.patched_plotly(go.FigureWidget()), 
            html = slides.as_html_widget('**Select Box/Lesso on figure traces**'),
            A = (1,10), omega = (0,20), phi = (0,10),
            sdata = {'fig':'selected'}, cdata = {'fig':'clicked'},
        )

    @callback
    def on_click(self, cdata,html):
        html.value = pd.DataFrame(cdata or {}).to_html(index=False)
    
    @callback
    def on_select(self, sdata, html):
        plt.scatter(sdata.get('xs',[]),sdata.get('ys',[]))
        html.value = slides.plt2html().value

    @callback
    def plot(self, fig:go.FigureWidget, A, omega,phi): # adding type hint allows auto-completion inside function
        fig.data = []
        x = np.linspace(0,10,100)
        fig.add_trace(go.Scatter(x=x, y=A*np.sin(omega*x + phi), mode='lines+markers'))


MyInteract(
    app_layout={'left_sidebar':['A','omega','phi','html'], 'center': ['fig']},
    grid_css={'.left-sidebar':{'background':'whitesmoke'}},)

See in action on Binder

e-interactive.mp4