async def serve(q: Q):
if q.args.start:
q.page['form'] = ui.form_card(box='1 1 12 10',
items=[ui.progress('Running...')])
await q.page.save()
seconds = random.randint(1, 6)
# DON'T DO THIS!
# This will make your app unresponsive for some time:
# message = blocking_function(seconds)
# Do this instead:
with concurrent.futures.ThreadPoolExecutor() as pool:
message = await q.exec(pool, blocking_function, seconds)
# You can also pass a ProcessPoolExecutor, like this:
# with concurrent.futures.ProcessPoolExecutor() as pool:
# message = await q.exec(pool, blocking_function, seconds)
q.page['form'] = ui.form_card(box='1 1 12 10',
items=[ui.message_bar('info', message)])
await q.page.save()
else:
q.page['form'] = ui.form_card(
box='1 1 12 10', items=[ui.button(name='start', label='Start')])
await q.page.save()
def render_content_changes(q: Q):
q.page['sidebar'] = ui.form_card(
box='1 2 2 8',
items=[
ui.separator('Button Counting'),
ui.text(
f'This button has been **clicked in this browser session {q.client.count}** times!'
),
ui.text(
f'This button has been **clicked by you {q.user.count}** times!'
),
ui.text(f'This button has been **clicked {q.app.count}** times!'),
ui.buttons([ui.button(name='button', label='Click Me!')],
justify='center')
])
q.page['content'] = ui.form_card(
box='3 2 9 8',
items=[
ui.tabs(name='header_tabs',
value=q.client.tab,
items=[
ui.tab(name=t.lower(), label=t)
for t in ['Home', 'Learn More', 'Contact Us']
]),
ui.frame(
content=
f'This is the {q.client.tab} section, it is still in development.'
)
])
def show_profile(q: Q):
del q.page["content"]
q.page['search'] = ui.form_card(
box=config.boxes['search'],
items=[
ui.text_xl("Customer Profiles from Model Predictions"),
ui.picker(name="customers",
label="Customer Phone Number",
choices=phone_choices,
max_choices=1,
values=q.args.customers,
trigger=True)
])
if not q.args.customers:
cleanup_pages(q)
q.page["empty_profile_page"] = ui.form_card(
box=config.boxes["empty_profile_page"],
items=[
ui.text_xl(
"To see the analysis results, you need to choose a phone number first."
)
])
else:
del q.page["empty_profile_page"]
df = pd.read_csv(config.testing_data_url)
cust_phone_no = int(q.args.customers[0])
q.client.selected_customer_index = int(
df[df[config.id_column] == cust_phone_no].index[0])
populate_churn_plots(q)
populate_customer_churn_stats(cust_phone_no, df, q)
async def serve(q: Q):
q.page['basic-stepper'] = ui.form_card(box='1 1 4 1',
items=[
ui.stepper(
name='basic-stepper',
items=[
ui.step(label='Step 1'),
ui.step(label='Step 2'),
ui.step(label='Step 3'),
])
])
q.page['icon-stepper'] = ui.form_card(
box='1 2 4 1',
items=[
ui.stepper(name='icon-stepper',
items=[
ui.step(label='Step 1', icon='MailLowImportance'),
ui.step(label='Step 2', icon='TaskManagerMirrored'),
ui.step(label='Step 3', icon='Cafe'),
])
])
q.page['almost-done-stepper'] = ui.form_card(
box='1 3 4 1',
items=[
ui.stepper(name='almost-done-stepper',
items=[
ui.step(label='Step 1', done=True),
ui.step(label='Step 2', done=True),
ui.step(label='Step 3'),
])
])
await q.page.save()
async def serve(q: Q):
if 'file_upload' in q.args:
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.text(f'file_upload={q.args.file_upload}'),
ui.button(name='show_upload', label='Back', primary=True),
])
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.file_upload(name='file_upload', label='Upload!', multiple=True,
file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)
]
)
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'spinbox={q.args.spinbox}'),
ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.spinbox(name='spinbox',
label='Standard spinbox',
min=0,
max=100,
step=10,
value=30),
ui.spinbox(name='spinbox_disabled',
label='Disabled spinbox',
min=0,
max=100,
step=10,
value=30,
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
# Set up up the page at /stats
stats_page.drop() # Clear any existing page
stats_page['example'] = ui.wide_gauge_stat_card(
box='1 1 2 1',
title='Stats',
value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',
aux_value='={{intl percent style="percent" minimum_fraction_digits=2 maximum_fraction_digits=2}}',
plot_color='$red',
progress=0,
data=dict(price=0, percent=0),
)
await stats_page.save()
# Set up this app's UI
q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[
ui.frame(path='/stats', height='110px'),
ui.button(name='toggle', label='Start updates', primary=True),
])
await q.page.save()
q.client.initialized = True
if q.args.toggle:
global update_stats
update_stats = not update_stats
q.page['form'].items[1].button.label = 'Stop updates' if update_stats else 'Start updates'
await q.page.save()
await update_stats_page(q, stats_page)
async def get_inputs(q: Q):
q.page['main'] = ui.form_card(
box="1 2 8 5",
items=[
ui.text_xl('Enter your text input for generation:'),
ui.textbox(name="input_text",
label='',
value=q.app.input_text,
multiline=True),
ui.separator(),
ui.slider(
name="num_words_to_generate",
label=
"Maximum number of words to generate (including input text)",
min=5,
max=50,
step=1,
value=q.app.num_words_to_generate
if q.app.num_words_to_generate else 12,
),
ui.separator(),
ui.buttons([
ui.button(name="generate_text", label='Generate',
primary=True),
])
])
async def serve(q: Q):
if '#' in q.args:
hash_ = q.args['#']
q.page['nav'] = ui.form_card(box='1 1 2 5', items=[
ui.text(f'#={hash_}'),
ui.button(name='show_nav', label='Back', primary=True),
])
else:
q.page['nav'] = ui.nav_card(
box='1 1 2 5',
value='#menu/spam',
items=[
ui.nav_group('Menu', items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast', label='Toast', disabled=True),
]),
ui.nav_group('Help', items=[
ui.nav_item(name='#about', label='About', icon='Info'),
ui.nav_item(name='#support', label='Support', icon='Help'),
])
],
)
await q.page.save()
async def serve(q: Q):
if q.args.tall_article:
q.page['example'] = ui.form_card(box='1 1 4 6',
items=[
ui.button(name='back',
label='Go back',
primary=True),
])
else:
q.page['example'] = ui.tall_article_preview_card(
box='1 1 4 6',
title='Tall article preview',
subtitle='Click the card',
value='$19',
name='tall_article',
image=
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', # noqa
content=content,
items=[
ui.buttons(items=[
ui.button(name='like', label='Like'),
ui.button(name='comment', label='Comment'),
ui.button(name='share', label='Share'),
]),
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'swatch={q.args.swatch}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10',
items=[
ui.color_picker(
name='swatch',
label='Pick a swatch',
choices=[
'#011627',
'#2EC4B6',
'#E71D36',
'#FF9F1C',
'#50514F',
'#F25F5C',
'#FFE066',
'#247BA0',
'#70C1B3',
'#FDFFFC',
]),
ui.button(name='show_inputs',
label='Submit',
primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'date={q.args.date}'),
ui.text(f'date_placeholder={q.args.date_placeholder}'),
ui.text(f'date_disabled={q.args.date_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.date_picker(name='date',
label='Standard date picker',
value='2017-10-19'),
ui.date_picker(name='date_placeholder',
label='Date picker with placeholder',
placeholder='Pick a date'),
ui.date_picker(name='date_disabled',
label='Disabled date picker',
value='2017-10-19',
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.annotator:
q.page['example'].items = [
ui.text(f'annotator={q.args.annotator}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.text_annotator(
name='annotator',
title='Select text to annotate',
tags=[
ui.text_annotator_tag(name='p',
label='Person',
color='#F1CBCB'),
ui.text_annotator_tag(name='o',
label='Org',
color='#CAEACA'),
],
items=[
ui.text_annotator_item(text='Killer Mike', tag='p'),
ui.text_annotator_item(
text=' is a member, of the hip hop supergroup '
), # no tag
ui.text_annotator_item(text='Run the Jewels', tag='o'),
],
),
ui.button(name='submit', label='Submit', primary=True)
])
await q.page.save()
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
ui.label('Pig Latin'),
ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 11 10', items=[
ui.button(name='show_side_panel', label='Order donuts', primary=True)
])
q.client.initialized = True
else:
if q.args.show_side_panel:
q.page['meta'].side_panel = ui.side_panel(title='Welcome to store', items=[
ui.text('Donuts cost $1.99. Proceed?'),
ui.buttons([ui.button(name='next_step', label='Next', primary=True)])
])
elif q.args.next_step:
q.page['meta'].side_panel.items = [
ui.text('You will be charged $1.99. Proceed?'),
ui.buttons([
ui.button(name='cancel', label='Back to safety'),
ui.button(name='submit', label='Place order', primary=True),
])
]
elif q.args.submit:
q.page['example'].items = [ui.message_bar('success', 'Order placed!')]
q.page['meta'].side_panel = None
elif q.args.cancel:
q.page['example'].items = [ui.message_bar('info', 'Order canceled!')]
q.page['meta'].side_panel = None
await q.page.save()
async def render_customer_selector(q: Q):
clear_page(q)
columns = [
ui.table_column(name=column,
label=column,
sortable=True,
searchable=True)
for column in q.app.customer_df.columns
]
rows = [
ui.table_row(name=str(index), cells=row.tolist())
for index, row in q.app.customer_df.applymap(str).iterrows()
]
q.client.cards.add('customer_table')
q.page['customer_table'] = ui.form_card(
box='customer_table',
items=[
ui.message_bar(text='Click "Status" to review a customer',
type='info'),
ui.table(
name='customer_table',
columns=columns,
rows=rows,
groupable=True,
multiple=False,
)
])
async def start_new_game(q: Q):
q.client.game = Game(q.user.player.player_id)
q.user.player.games[q.client.game.game_id] = q.client.game
q.page['starting_game'] = ui.form_card(
box='4 4 3 3',
items=[
ui.text_l('I am thinking of a number between 1 and 100'),
ui.text_m('can you guess what it is?'),
ui.text_xs('Рађ'),
ui.slider(
name='guess',
label='your guess',
min=1,
max=100,
value=100,
trigger=True,
),
ui.text_xs('Рађ'),
ui.buttons(
items=[
ui.button(name='quit_game', label='Quit', primary=True)
],
justify='center',
),
],
)
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['controls'] = ui.form_card(
box='1 1 2 2',
items=[
ui.text_xl('This is normal theme'),
ui.button(name='change',
label='Change to see neon theme',
primary=True)
])
q.client.current_theme = 'light'
q.client.initialized = True
meta = q.page['meta']
controls = q.page['controls']
if q.args.change and q.client.current_theme != 'neon':
meta.theme = 'neon'
q.client.current_theme = 'neon'
controls.items[0].text_xl.content = 'This is Neon theme!'
controls.items[1].button.label = 'Back to normal'
elif q.args.change:
meta.theme = 'light'
q.client.current_theme = 'light'
controls.items[0].text_xl.content = 'This is normal theme'
controls.items[1].button.label = 'Change to see neon theme'
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True
q.page['nav'] = ui.markdown_card(
box='1 1 4 2',
title='Menu',
content=
'[Spam](#menu/spam) / [Ham](#menu/ham) / [Eggs](#menu/eggs) / [About](#about)',
)
q.page['blurb'] = ui.markdown_card(
box='1 3 4 2',
title='Description',
content='Welcome to our store!',
)
q.page['cart'] = ui.form_card(
box='1 5 4 2',
title='Cart',
items=[
ui.text('Your cart is empty!'),
ui.buttons([
ui.button(name=buy_now.__name__,
label='Buy Now!',
primary=True),
ui.button(name='empty_cart', label='Clear cart'),
])
],
)
await q.page.save()
else:
await handle_on(q)
def render_customer_details_table(q: Q, df, row):
q.page.add(
'risk_table_row',
ui.form_card(box='risk_table_selected',
items=[
ui.table(name='risk_table_row',
columns=[
ui.table_column(name="attribute",
label="Attribute",
sortable=False,
searchable=False,
max_width='100'),
ui.table_column(name="value",
label="Value",
sortable=False,
searchable=False,
max_width='100')
],
rows=get_transformed_df_rows(
q, df.loc[[row]]),
groupable=False,
resettable=False,
multiple=False,
height='100%')
]))
async def serve(q: Q):
hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)
if not q.client.initialized:
q.page['curve'] = ui.graphics_card(
box='1 1 4 6',
view_box='0 0 300 300',
width='100%',
height='100%',
scene=g.scene(hilbert_curve=g.path(
d=hilbert_curve, fill='none', stroke='#333')),
)
q.page['form'] = ui.form_card(
box='1 7 4 1',
items=[
ui.slider(name='depth',
label='Play with this Hilbert curve!',
min=1,
max=6,
value=5,
trigger=True),
],
)
q.client.initialized = True
else:
g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'combobox={q.args.combobox}'),
ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
ui.text(f'combobox_error={q.args.combobox_error}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.combobox(name='combobox',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices),
ui.combobox(name='combobox_disabled',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices,
disabled=True),
ui.combobox(name='combobox_error',
label='Enter or choose a color',
placeholder='Color...',
value='Blue',
choices=combobox_choices,
error='This combobox has an error!'),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
links = q.args.user_files
if links:
items = [ui.text_xl('Files uploaded!')]
for link in links:
local_path = await q.site.download(link, '.')
#
# The file is now available locally; process the file.
# To keep this example simple, we just read the file size.
#
size = os.path.getsize(local_path)
items.append(
ui.link(label=f'{os.path.basename(link)} ({size} bytes)',
download=True,
path=link))
# Clean up
os.remove(local_path)
items.append(ui.button(name='back', label='Back', primary=True))
q.page['example'].items = items
else:
q.page['example'] = ui.form_card(box='1 1 4 10',
items=[
ui.text_xl('Upload some files'),
ui.file_upload(name='user_files',
label='Upload',
multiple=True),
])
await q.page.save()
async def show_issue(q: Q, issue_id: str):
issue = issue_lookup[issue_id]
issue.views += 1
q.client.active_issue_id = issue_id
q.page['form'] = ui.form_card(
box='1 1 4 -1',
items=[
ui.text_xl(f'Issue {issue.id}'),
ui.text(issue.text),
ui.text_xs(f'({issue.views} views)'),
ui.buttons([
ui.button(
name='close_issue'
if issue.status == 'Open' else 'reopen_issue',
label="Close Issue"
if issue.status == 'Open' else "Reopen Issue",
primary=True,
),
ui.button(name='back', label='Back'),
]),
])
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['form'] = ui.form_card(
box='1 1 -1 11',
items=[
ui.textbox(name='search',
label='Search',
placeholder='Enter a keyword...',
trigger=True),
ui.table(name='issues',
columns=[
ui.table_column(name=name, label=name)
for name in column_names
],
rows=df_to_rows(addresses))
])
q.client.initialized = True
else:
items = q.page['form'].items
search_box = items[0].textbox
table = items[1].table
term: str = q.args.search
term = term.strip() if term else ''
search_box.value = term
table.rows = df_to_rows(
search_df(addresses, term) if len(term) else addresses)
await q.page.save()
async def serve(q: Q):
if q.client.plot_added: # Have we already added a plot?
example = q.page['example']
if q.args.to_log_scale:
# Change to log scale
example.items[0].text_l.content = 'Plot (Log Scale)'
example.items[0].text_l.commands = [linear_scale_command]
example.items[1].vega_visualization.specification = spec_log_scale
else:
# Change to linear scale
example.items[0].text_l.content = 'Plot (Linear Scale)'
example.items[0].text_l.commands = [log_scale_command]
example.items[
1].vega_visualization.specification = spec_linear_scale
else: # Add a new plot
q.page['example'] = ui.form_card(
box='1 1 2 8',
items=[
ui.text_l(content='Plot (Linear Scale)',
commands=[log_scale_command]),
ui.vega_visualization(specification=spec_linear_scale,
data=plot_data,
height='300px'),
],
)
# Flag to indicate that we've added a plot
q.client.plot_added = True
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'range_slider={q.args.range_slider}'),
ui.text(f'range_slider_step={q.args.range_slider_step}'),
ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(
box='1 1 4 10',
items=[
ui.range_slider(name='range_slider', label='Default slider'),
ui.range_slider(name='range_slider_step',
label='Step slider',
min=0,
max=1000,
step=100,
min_value=0,
max_value=100),
ui.range_slider(name='range_slider_disabled',
label='Disabled slider',
min=0,
max=100,
step=10,
min_value=0,
max_value=70,
disabled=True),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
async def serve(q: Q):
if q.args.info_card:
q.page['example'] = ui.form_card(box='1 1 4 5',
items=[
ui.button(name='back',
label='Back',
primary=True),
])
else:
q.page['example'] = ui.wide_info_card(
box='1 1 4 5',
name='info_card',
title='Info Card',
subtitle='Subtitle',
caption='''
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere
necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus
ratione voluptate pariatur cupiditate, quidem quaerat sapiente exercitationem in omnis nulla
maiores consequatur dolores illo inventore quae obcaecati culpa totam corporis! Repudiandae, nostrum repellendus.
''',
category='Category',
label='Click me',
image=
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' # noqa
)
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='', theme='neon')
q.page['controls'] = ui.form_card(box='1 1 2 8', items=[
ui.text_xl('Form'),
ui.textbox(name='textbox', label='Textbox'),
ui.toggle(name='toggle', label='Toggle'),
ui.choice_group(name='choice_group', label='Choice group', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.checklist(name='checklist', label='Checklist', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Dropdown', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.slider(name='slider', label='Slider'),
ui.button(name='toggle_theme', label='Toggle Theme', primary=True)
])
q.client.theme = 'default'
q.client.initialized = True
meta = q.page['meta']
if q.args.toggle_theme:
meta.theme = q.client.theme = 'neon' if q.client.theme == 'default' else 'default'
await q.page.save()
async def serve(q: Q):
if q.args.show_inputs:
q.page['example'].items = [
ui.text(f'dropdown={q.args.dropdown}'),
ui.text(f'dropdown_multi={q.args.dropdown_multi}'),
ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10',
items=[
ui.dropdown(name='dropdown',
label='Pick one',
value='B',
required=True,
choices=choices),
ui.dropdown(name='dropdown_multi',
label='Pick multiple',
values=['B', 'D'],
required=True,
choices=choices),
ui.dropdown(
name='dropdown_disabled',
label='Pick one (Disabled)',
value='B',
choices=choices,
disabled=True),
ui.button(name='show_inputs',
label='Submit',
primary=True),
])
await q.page.save()
