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()
async def display_progress_bar(q: Q, form, seconds: int): for i in range(seconds): progress_value = (i + 1.0) / seconds form.items = [ ui.progress( label='Downloading the interwebs...', caption=f'{int(progress_value * 100)}%', value=progress_value, ) ] await q.page.save() await q.sleep(1)
def form_training_progress(q: Q): # display when model training is in progress return [ ui.text(content=DATASET_TEXT), ui.dropdown(name='dai_instance_id', label='Select Driverless AI instance', value=q.client.dai_instance_id, choices=q.client.choices_dai_instances, required=True), ui.buttons(items=[ ui.button(name='train', label='Train', primary=True, disabled=True), ui.button(name='predict', label='Predict', primary=True, disabled=True) ]), ui.progress(label='Training in progress...', caption='This can take a few minutes...'), ui.text(content=q.client.model_details) ]
async def initialize_app(q: Q): # Inputs for the app, Should be read from a config file walmart_train_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_train.csv" walmart_predictions_s3 = "s3://h2o-benchmark/walmart-sales-forecasting/walmart_test_preds.csv" walmart_train = './walmart_train.csv' walmart_predictions = './walmart_test_preds.csv' # Setup UI elements on the page q.page['meta'] = ui.meta_card(box='', title='H2O Wave - Sales Forecasting') q.page['title'] = ui.header_card( box='1 1 12 1', title='Sales Forecasting', subtitle='Exploring historic demand and forecasts for supply chain optimization', icon='GiftBox', icon_color='#ffe600', ) q.page['loading'] = ui.form_card( box='4 4 6 1', items=[ui.progress(label='Downloading sales data from AWS S3 ...', caption='')] ) await q.page.save() # Download input data from S3 train = download_file_from_s3(walmart_train_s3, walmart_train, overwrite=False) if train is None or not os.path.isfile(train): sys.exit(1) pred = download_file_from_s3(walmart_predictions_s3, walmart_predictions, overwrite=False) if pred is None or not os.path.isfile(pred): sys.exit(1) q.page['loading'].items[0].progress.label = 'Processing sales data ...' await q.page.save() # Create default UserInputs and SalesData q.app.user_inputs = UserInputs() q.app.user_inputs.reset() q.app.sales_data = SalesData(walmart_train, walmart_predictions) plot_data = q.app.sales_data.get_plot_data(**asdict(q.app.user_inputs)) del q.page['loading'] q.page['sidebar'] = ui.form_card( box='1 2 3 9', items=get_user_input_items(q.app.sales_data, q.app.user_inputs) ) await draw_weekly_sales_plot(q, plot_data)
async def serve(q: Q): if q.args.start: q.page['form'] = ui.form_card(box='1 1 -1 -1', 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: message = await q.run(blocking_function, seconds) q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)]) await q.page.save() else: q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')]) await q.page.save()
def get_user_input_items(sales_data, user_inputs, progress=False): return [ ui.text_l('**Select Area of Interest**'), ui.dropdown( name='stores', label='Store IDs', values=[str(x) for x in user_inputs.stores], choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.stores_unique], tooltip='Select the Stores to include in the prediction', trigger=True, ), ui.text_xs('⠀'), ui.dropdown( name='departments', label='Product IDs', values=[str(x) for x in user_inputs.departments], choices=[ui.choice(name=str(x), label=str(x)) for x in sales_data.departments_unique], tooltip='Select the Products to include in the prediction', trigger=True, ), ui.frame(content=' ', height="40px"), ui.text_l('**Generate Sales Forecast**'), ui.slider( name='n_forecast_weeks', label='Number of Weeks', min=0, max=len(sales_data.prediction_dates) - 1, step=1, value=user_inputs.n_forecast_weeks, trigger=True, tooltip='Select the number of weeks into the future to predict' ), ui.text_xs('⠀'), ui.button( name='reset', label='Reset', primary=True, tooltip='Click to reset all values to defaults' ), ui.text_xs('⠀'), ui.progress(label='', caption='', visible=progress), ]
def get_user_input_items(sales_data, user_inputs, progress=False): return [ ui.text_l('**Prediction Configuration**'), ui.dropdown( name='stores', label='Store IDs', values=[str(x) for x in user_inputs.stores], choices=[ ui.choice(name=str(x), label=str(x)) for x in sales_data.stores_unique ], trigger=True, ), ui.dropdown( name='departments', label='Product IDs', values=[str(x) for x in user_inputs.departments], choices=[ ui.choice(name=str(x), label=str(x)) for x in sales_data.departments_unique ], trigger=True, ), ui.slider( name='n_forecast_weeks', label='Weeks to predict', min=0, max=len(sales_data.prediction_dates) - 1, step=1, value=user_inputs.n_forecast_weeks, trigger=True, ), ui.button(name='reset', label='Reset', primary=True, tooltip='Click to reset all values to defaults'), ui.progress(label='', caption='', visible=progress), ]
async def serve(q: Q): q.page['example'] = ui.form_card(box='1 1 4 10', items=[ ui.text_xl(content='Extra-large text, for headings.'), ui.text_l(content='Large text, for sub-headings.'), ui.text_m(content='Body text, for paragraphs and other content.'), ui.text_s(content='Small text, for small print.'), ui.text_xs(content='Extra-small text, for really small print.'), ui.separator(label='A separator sections forms'), ui.progress(label='A progress bar'), ui.progress(label='A progress bar'), ui.message_bar(type='success', text='Message bar'), ui.textbox(name='textbox', label='Textbox'), ui.label(label='Checkboxes'), ui.checkbox(name='checkbox1', label='A checkbox'), ui.checkbox(name='checkbox1', label='Another checkbox'), ui.checkbox(name='checkbox1', label='Yet another checkbox'), 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.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[ ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam'] ]), ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']), ui.slider(name='slider', label='Slider'), ui.range_slider(name='range_slider', label='Range slider', max=99), ui.spinbox(name='spinbox', label='Spinbox'), ui.date_picker(name='date_picker', label='Date picker'), ui.color_picker(name='color_picker', label='Color picker'), ui.buttons([ ui.button(name='primary_button', label='Primary', primary=True), ui.button(name='standard_button', label='Standard'), ui.button(name='standard_disabled_button', label='Standard', disabled=True), ]), ui.file_upload(name='file_upload', label='File upload'), ui.table(name='table', columns=[ ui.table_column(name='col1', label='Column 1'), ui.table_column(name='col2', label='Column 2'), ], rows=[ ui.table_row(name='row1', cells=['Text A', 'Text B']), ui.table_row(name='row2', cells=['Text C', 'Text D']), ui.table_row(name='row3', cells=['Text E', 'Text F']), ]), ui.link(label='Link'), ui.tabs(name='tabs', items=[ ui.tab(name='email', label='Mail', icon='Mail'), ui.tab(name='events', label='Events', icon='Calendar'), ui.tab(name='spam', label='Spam'), ]), ui.expander(name='expander', label='Expander'), ui.frame(path='https://example.com'), ui.markup(content=html), ui.template( content=menu, data=pack(dict(dishes=[ dict(name='Spam', price='$2.00'), dict(name='Ham', price='$3.45'), dict(name='Eggs', price='$1.75'), ])) ), ui.picker(name='picker', label='Picker', choices=[ ui.choice('choice1', label='Choice 1'), ui.choice('choice2', label='Choice 2'), ui.choice('choice3', label='Choice 3'), ]), ui.stepper(name='stepper', items=[ ui.step(label='Step 1', icon='MailLowImportance'), ui.step(label='Step 2', icon='TaskManagerMirrored'), ui.step(label='Step 3', icon='Cafe'), ]), ui.visualization( plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]), data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True), ), ui.vega_visualization( specification=spec, data=data(fields=["a", "b"], rows=[ ["A", rnd()], ["B", rnd()], ["C", rnd()], ["D", rnd()], ["E", rnd()], ["F", rnd()], ["G", rnd()], ["H", rnd()], ["I", rnd()] ], pack=True), ), ui.button(name='show_inputs', label='Submit', primary=True), ]) await q.page.save()
# Form / Progress / Updating # Update a #progress bar's completion status periodically. # #form # --- import time from h2o_wave import site, ui page = site['/demo'] page['example'] = ui.form_card(box='1 1 4 -1', items=[ ui.progress(label='Basic Progress'), ]) page.save() for i in range(1, 11): time.sleep(1) page['example'].items = [ ui.progress(label='Basic Progress', caption=f'{i * 10}% complete', value=i / 10), ] # This will work, too: # page['example'].items[0].progress.value = i/10 page.save()
# Form / Progress # Use a #progress bar to indicate completion status of an operation. # #form # --- from h2o_wave import site, ui page = site['/demo'] page['example'] = ui.form_card(box='1 1 4 -1', items=[ ui.progress(label='Indeterminate Progress', caption='Goes on forever'), ui.progress( label='Standard Progress', caption='Downloading the interwebs...', value=0.25), ]) page.save()
async def serve(q: Q): if not q.client.initialized: image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260' f = FakeCategoricalSeries() q.client.primary = '#000000' q.client.page = '#e2e2e2' q.client.card = '#ffffff' q.client.text = '#000000' q.page['meta'] = ui.meta_card( box='', theme='custom', layouts=[ ui.layout(breakpoint='xs', zones=[ ui.zone('header'), ui.zone('content', direction=ui.ZoneDirection.ROW, zones=[ ui.zone('colors', size='340px'), ui.zone('preview') ]), ui.zone('footer') ]) ]) q.page['header'] = ui.header_card(box='header', title='Theme generator', subtitle='Color your app easily', icon='Color', icon_color='$card') q.page['form'] = ui.form_card(box='colors', items=[ ui.color_picker( name='primary', label='Primary', trigger=True, alpha=False, inline=True, value=q.client.primary), ui.color_picker(name='text', label='Text', trigger=True, alpha=False, inline=True, value=q.client.text), ui.color_picker(name='card', label='Card', trigger=True, alpha=False, inline=True, value=q.client.card), ui.color_picker(name='page', label='Page', trigger=True, alpha=False, inline=True, value=q.client.page), ui.text_xl('Check contrast'), get_contrast('text', 'card', q), get_contrast('card', 'primary', q), get_contrast('text', 'page', q), get_contrast('page', 'primary', q), ui.text_xl('Copy code'), ui.frame(content=get_theme_code(q), height='180px'), ]) q.page['sample'] = ui.form_card( box='preview', items=[ ui.text_xl(content='Sample App to show colors'), ui.progress(label='A progress bar'), ui.inline([ ui.checkbox(name='checkbox1', label='A checkbox', value=True), ui.checkbox(name='checkbox2', label='Another checkbox'), ui.checkbox(name='checkbox3', label='Yet another checkbox'), ui.toggle(name='toggle', label='Toggle', value=True), ]), ui.inline([ ui.date_picker(name='date_picker', label='Date picker'), ui.picker(name='picker', label='Picker', choices=[ ui.choice('choice1', label='Choice 1'), ui.choice('choice2', label='Choice 2'), ui.choice('choice3', label='Choice 3'), ]), ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']), ui.persona(title='John Doe', subtitle='Data Scientist', size='s', image=image), ]), ui.slider(name='slider', label='Slider', value=70), ui.link(label='Link'), ui.inline(justify='between', items=[ ui.stepper(name='stepper', width='500px', items=[ ui.step(label='Step 1', icon='MailLowImportance'), ui.step( label='Step 2', icon='TaskManagerMirrored'), ui.step(label='Step 3', icon='Cafe'), ]), ui.tabs(name='menu', value='email', items=[ ui.tab(name='email', label='Mail', icon='Mail'), ui.tab(name='events', label='Events', icon='Calendar'), ui.tab(name='spam', label='Spam'), ]), ]), ui.inline(items=[ ui.table( name='table', width='50%', columns=[ ui.table_column( name='name', label='Name', min_width='80px'), ui.table_column(name='surname', label='Surname', filterable=True), ui.table_column(name='age', label='Age', sortable=True), ui.table_column( name='progress', label='Progress', cell_type=ui.progress_table_cell_type( color='$themePrimary')), ], rows=[ ui.table_row(name='row1', cells=['John', 'Doe', '25', '0.90']), ui.table_row(name='row2', cells=['Ann', 'Doe', '35', '0.75']), ui.table_row( name='row3', cells=['Casey', 'Smith', '40', '0.33']), ], height='330px', ), ui.visualization( width='50%', plot=ui.plot([ ui.mark(type='interval', x='=product', y='=price', y_min=0) ]), data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(20)]], pack=True), ), ]), ui.buttons([ ui.button(name='primary_button', label='Primary', primary=True), ui.button(name='standard_button', label='Standard'), ui.button(name='standard_disabled_button', label='Disabled', disabled=True), ui.button(name='icon_button', icon='Heart', caption='Tooltip text'), ]), ]) q.page['footer'] = ui.footer_card( box='footer', caption='(c) 2021 H2O.ai. All rights reserved.') q.client.themes = [ ui.theme(name='custom', text=q.client.text, card=q.client.card, page=q.client.page, primary=q.client.primary) ] q.client.initialized = True if q.args.primary: q.client.themes[0].primary = q.args.primary q.client.primary = q.args.primary if q.args.text: q.client.themes[0].text = q.args.text q.client.text = q.args.text if q.args.card: q.client.themes[0].card = q.args.card q.client.card = q.args.card if q.args.page: q.client.themes[0].page = q.args.page q.client.page = q.args.page q.page['meta'].themes = q.client.themes q.page['form'].items[5] = get_contrast('text', 'card', q) q.page['form'].items[6] = get_contrast('card', 'primary', q) q.page['form'].items[7] = get_contrast('text', 'page', q) q.page['form'].items[8] = get_contrast('page', 'primary', q) q.page['form'].items[10].frame.content = get_theme_code(q) await q.page.save()