async def display_tab(q):
q.page[f'example_{q.client.tab}'] = ui.markup_card(
box='1 2 4 3',
title=q.client.tab.upper(),
content='\n'.join([''.join([q.client.tab] * 10) for _ in range(50)])
)
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['meta'] = ui.meta_card(
box='',
# Load Sigma.js
scripts=[
ui.script(
path=
'https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js'
)
],
# Call Javascript to render our graph using Sigma.js.
script=ui.inline_script(
content=render_graph,
# Ensure that Sigma.js is available before running our script.
requires=['sigma'],
# Ensure that the 'graph' element is available before running our script.
targets=['graph']))
# Add a placeholder named 'graph' to house our rendered graph.
q.page['vis'] = ui.markup_card(
box='1 1 6 8',
title='Select a node',
content='<div id="graph" style="width: 800px; height: 500px;"/>')
# Add another card to display which node was selected.
q.page['details'] = ui.markdown_card(
box='1 9 6 1',
title='',
content='The selected node will be displayed here.',
)
q.client.initialized = True
else:
if q.events.graph:
selected_node = q.events.graph.node_clicked
if selected_node:
q.page[
'details'].content = f'You clicked on node {selected_node}'
await q.page.save()
def add_markdown(box, key, value):
return ui.markup_card(
box=box,
title=key,
content=value,
)
# Serialize the plot as JSON.
# See https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#json-items
plot_id = 'my_plot'
plot_data = json.dumps(json_item(plot, plot_id))
page = site['/demo']
page['meta'] = ui.meta_card(
box='',
# Import Bokeh Javascript libraries from CDN
scripts=[ui.script(path=f) for f in CDN.js_files],
# Execute custom Javascript
script=ui.inline_script(
# Call Bakeh's renderer using Javascript
content=f'Bokeh.embed.embed_item({plot_data});',
# Ensure that the Bokeh Javascript library is available
requires=['Bokeh'],
# Ensure that the target HTML container element is available
targets=[plot_id],
),
)
# Create a HTML container element to hold our plot.
page['example'] = ui.markup_card(
box='1 1 5 8',
title='',
content=f'<div id="{plot_id}"></div>',
)
page.save()
# Markup
# Use a #markup card to display formatted content using #HTML.
# ---
from h2o_wave import site, ui
page = site['/demo']
menu = '''
<ol>
<li>Spam</li>
<li>Ham</li>
<li>Eggs</li>
</ol>
'''
page['example'] = ui.markup_card(
box='1 1 2 2',
title='Menu',
content=menu,
)
page.save()
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True
# Create a plot
x = [random() for x in range(500)]
y = [random() for y in range(500)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400,
plot_height=400,
tools="lasso_select",
title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(plot_width=400,
plot_height=400,
x_range=(0, 1),
y_range=(0, 1),
tools="",
title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)
s1.selected.js_on_change(
'indices',
CustomJS(args=dict(s1=s1, s2=s2),
code="""
var indices = cb_obj.indices;
var d1 = s1.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (var i = 0; i < indices.length; i++) {
d2['x'].push(d1['x'][indices[i]])
d2['y'].push(d1['y'][indices[i]])
}
s2.change.emit();
// Send the selected indices to the Wave app via an event.
// Here,
// - The first argument, 'the_plot', is some name to uniquely identify the source of the event.
// - The second argument, 'selected', is some name to uniquely identify the type of event.
// - The third argument is any arbitrary data to be sent as part of the event.
// Ordinarily, we would just call wave.emit('the_plot', 'selected', indices), but this particular
// example triggers events every time the indices change (which is several times per second),
// so we use a 'debounced' version of 'emit()' that waits for a second before emitting an event.
// Here, 'emit_debounced()' is not part of the Wave API, but custom-built for this example - see
// the inline_script's 'content' below.
emit_debounced('the_plot', 'selected', indices);
// The indices will be accessible to the Wave app using 'q.events.the_plot.selected'.
"""))
layout = row(p1, p2)
# Serialize the plot as JSON.
# See https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#json-items
plot_id = 'my_plot'
plot_data = json.dumps(json_item(layout, plot_id))
q.page['meta'] = ui.meta_card(
box='',
# Import Bokeh Javascript libraries from CDN
scripts=[ui.script(path=f) for f in CDN.js_files],
# Execute custom Javascript
script=ui.inline_script(
# The inline script does two things:
content=f'''
// 1. Create a debounced version of `wave.emit()` and make it accessible to Bokeh's event handler.
// window.emit_debounced() is the name of new, debounced (calmer) version of wave.emit() that waits
// for 1000ms before emitting an event.
window.emit_debounced=window.wave.debounce(1000, window.wave.emit);
// 2. Make Bokeh render the plot.
Bokeh.embed.embed_item({plot_data});
''',
# Ensure that the Bokeh Javascript library is loaded
requires=['Bokeh'],
# Ensure that the target HTML container element is available
targets=[plot_id],
),
)
q.page['plot'] = ui.markup_card(
box='1 1 6 6',
title='',
content=f'<div id="{plot_id}"></div>',
)
q.page['details'] = ui.markdown_card(
box='1 7 6 2',
title='Selected Marks',
content='Nothing selected.',
)
else:
if q.events.the_plot.selected:
q.page[
'details'].content = f'You selected {q.events.the_plot.selected}'
await q.page.save()
# Meta / Stylesheet
# Load external CSS resources if needed.
# ---
from h2o_wave import site, ui
page = site['/demo']
# Add a placeholder.
page['example'] = ui.markup_card(
box='1 1 2 2',
title='This button should have Bootstrap styles.',
content='<button type="button" class="btn btn-primary">Primary</button>',
)
page['meta'] = ui.meta_card(
box='',
# Load external stylesheet.
stylesheets=[
ui.stylesheet(
path=
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'
)
])
page.save()
easing: "easeOutExpo",
duration: 950,
delay: (el, i) => 70*i
}).add({
targets: '.anim',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
'''
# Add a placeholder for the animation.
page['example'] = ui.markup_card(
box='1 1 10 8',
title='Animation',
content=html,
)
# Add the script to the page.
page['meta'] = ui.meta_card(
box='',
# Load anime.js
scripts=[ui.script(path='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js')],
script=ui.inline_script(
# The Javascript code for this script.
content=script,
# Execute this script only if the 'anime' library is available.
requires=['anime'],
# Execute this script only if the 'animation' element is available.
targets=['animation'],