h2oai / wave

Realtime Web Apps and Dashboards for Python and R

H2O Wave

Realtime Web Apps and Dashboards for Python and R

New! R Language API Build and control Wave dashboards using R!

H2O Wave is a software stack for building beautiful, low-latency, realtime, browser-based applications and dashboards entirely in Python/R without using HTML, Javascript, or CSS.

H2O Wave excels at capturing information from multiple sources and broadcasting them live over the web, letting you build and deploy realtime analytics with dramatically less effort.

• Download / How to install
• Documentation: Getting Started / Widgets / Gallery and Examples / Python API
• Developing
• Discuss / Support / Q&A / Ideas
• Report a problem
• Blog / @h2o_wave

Live demos

• Wave Tour - 200+ interactive examples.
• Wave University - Learn Wave basics interactively.
• Wave Theme Generator - Create your color theme.

Responsive Layouts

Code: https://github.com/h2oai/wave/tree/main/py/demo

Themes

(Coming soon!)

80+ components, 250+ examples

More at https://wave.h2o.ai/docs/examples

License

H2O Wave is licensed under the Apache License 2.0. See LICENSE for more information.

wave's Issues

Live-coding app

Goal
Demonstrate the simplicity of developing apps for the Q platform (RAD).
Not intended to be pushed as the primary way of developing apps.

Implementation
Split-screen app. Code on LHS, preview on RHS. Similar to tour.py.
Saving code reloads/re-runs app and updates preview.

win32: asyncio sigint trap failure

Via @dipplestix

listen() fails on win32:

Traceback (most recent call last):
  File "examples/tour.py", line 204, in <module>
    listen('/tour', main)
  File "C:\Users\Chris\Downloads\qd-0.1.4-windows-amd64\venv\lib\site-packages\h2o_q\server.py", line 192, in listen
    el.add_signal_handler(signal.SIGINT, stop_server.set_result, None)
  File "C:\Users\Chris\Anaconda3\lib\asyncio\events.py", line 540, in add_signal_handler
    raise NotImplementedError
NotImplementedError

Notes
python/asyncio#407
SO

Add DetailsList and GroupedList UI components to UI API

Must-have for any app that requires master-detail views.

Add mechanism to auto-increment or decrement sliders periodically.

Via @FelixArokia:

TBD: should this be a part of the existing slider, or a new component?

Support event-handing for plots

Goal

Allow apps to respond to selection/highlighting events in the native vis.

Prepare repo for open sourcing

A few things that in my opinion should be done before making this repo public:

• Setup a CI pipeline. Despite the fact we use company-wise Jenkins, it is most of the time busy. I would prefer to have something always ready so we can run our tests on each PR. I have found CI providers with completely free tier for public repos - e.g. Travis CI (there can be others suitable as well of course).
• Contribution / developer guide.
• Setup git hooks to run tests related to staged files on commit - enforcing at least some unit tests to run before pushing.
• Custom tslint rules to keep consistency since the codebase has a pretty specific style e.g. someVariableB for boxed vars, using const just once and separate variables with , instead of multiple lines starting with const etc.
• IDE support - common editorconfig, vs-code plugin suggestions for this project etc.

@lo5 @geomodular Let's use this issue as a starting point for a discussion.

Make search+vis a UI component in Wave

Goal
Apps that need ad-hoc search on CH tables need to be able to easily add this functionality to their pages.

Percentage doesn't look right in safari

Q SDK Version, OS

qd-0.1.4-darwin-amd64

Actual behavior

In Safari

Expected behavior

In Chrome

Steps To Reproduce

This is one of the items in the tour: Stat / Gauge / Tall

Add Range Slider to UI API

e.g. something like https://refreshless.com/nouislider/ (used by materialize) or https://github.com/IonDen/ion.rangeSlider (used by shiny) - there might be others.

Via @FelixArokia

Add mechanism to render header/page-level components without card chrome

Page-level components look clunky when they have card borders/shadow.
Better to look flush with the page itself.

via @sairaamv

Allow prefixes to URL

Currently, when an app gets started, we expect that users will access the app via a path like /app// .
We’re rewriting the index path to update the references for the JS & CSS resources (ie, everything that comes from /static in Qd) to point to /app//static, and we proxy that directory to Qd. For the JS resources, we’re rewriting the websocket path from /_s to /app//ws. We’re also translating the websocket messages to rewrite /app/ to the route the app is currently listening on. We’re planning on adding a field to the toml file that allows developers to specify the route they’re using so we can do the correct proxy. We also rewrite /_f references to /app//_f.
It’s not ideal for us, particularly since the string sub can translate innocent code that breaks the page (we're already seeing this in some situations). We were wondering if it may be possible to have Qd know that it’s being loaded from a different path (using something like https://muffinman.io/react-router-subfolder-on-server/) that would allow us to avoid doing the translation.
Another option would be to serve apps from a subdomain, ie, .q8s.h2o.ai, and then it’s like it’s running from local. The concern is that this makes deployment on prem and local testing more difficult (but not impossible)

What we'd like to be able to do:
Allow the browser to fetch /app/<uuid>, and have the app function, and all we need to do is proxy /app/<uuid> to the container without any rewrites.

The HTML base page for the react app has a hardcoded path for /static where it loads the JS resources from, and the JS resources contain a hardcoded path to the websocket (/_s). Once the websocket connection is established, the browser sends its location to Qd. We can pass this path ahead of time as an environment variable when we launch the container so that the Qd knows to expect it and allow the app to load on the different path.

Apps might need to know about the prefix as well (ie, if they create a link to somewhere else in the app, they may need to know), so an API may be needed for this purpose.

We're open to other suggestions as well

Support tooltips for ui.text() / markdown elements

Background

The insights team is currently using <span title='...'>...</span> to display tooltips. These are OS tooltips, and don't support rich content or improved usability like that of the Fabric callout

Goal
Devise a mechanism that allows portions of content withing the body of ui.text() to be annotated with tooltip content.

Related to h2oai/q#637

Notes
Let's discuss alternatives/approaches before this is implemented. The tricky bit here is that ui.text() accepts markdown, and the body of the markdown needs to support multiple annotations. Preferably, let's not use HTML annotations because HTML is annoying.

Improve empty state of default pages

Via @srini-x -

Address empty state when qd is launched, maybe display content/tutorials at localhost:5555 landing page.

Handle numpy / ndarray types during json-marshaling

Via @goldentom42

Traceback (most recent call last):
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/server.py", line 138, in _serve
    await _server.handle(q)
  File "qd_drift.py", line 45, in main
    await display_drift_detection_screen(q)
  File "qd_drift.py", line 138, in display_drift_detection_screen
    v1.data = first_data
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 219, in __setattr__
    getattr(self, PAGE)._track(_set_op(self, key, _dump(value)))
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 189, in _dump
    return [_dump(x) for x in xs]
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 189, in <listcomp>
    return [_dump(x) for x in xs]
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 189, in _dump
    return [_dump(x) for x in xs]
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 189, in <listcomp>
    return [_dump(x) for x in xs]
  File "/Users/ogrellier/Q/q-drift/h2o_q_drift/venv/lib/python3.7/site-packages/telesync/core.py", line 193, in _dump
    return xs.dump()
TypeError: dump() takes exactly 1 argument (0 given)

cc @sairaamv - this looks similar to the error you ran into.

Make sure all components have data-test attribute

As discussed on last meeting about testing qd apps.

Block UI while waiting for app backend to respond

Goal
Prevent unhandled app errors due to double-submission.

Notarize OSX binary before release

https://developer.apple.com/developer-id/

via @gaborfodor, @mmalohlava

Browser test framework

Migrate Cypress wrapper to standalone apps.

Possible bug with automatic label placement

via @goldentom42

Before/after:

Third party components for SDK

Via @srini-x:

Allow community-contributed components that include both front-end and backend implementation.
e.g. Export to PDF, Download chart as PNG, Share on Twitter, etc.

Add CLI command to package app for standalone use

Goal
q package . should package the application into an archive X.
X should be self-sufficient - maybe a zip archive containing a readme indicating system requirements followed by how to execute the app. Fewer the commands, the better.

PDF export API

Goal

Allow downloading/exporting dashboards as PDFs

Add examples for realtime graphical UIs

Event API

Add mechanism to handle secondary events emitted from UI components. Blocks #19

Add trigger attribute to ui.textbox()

via @ashrith

Trigger attribute on dropdowns fire unconditionally across a page

Via @FelixArokia

async def main_page(q: Q):
    q.page['main_title'] = ui.form_card(box = '4 1 5 1', items = [
                                    ui.text_xl("This is the main page"),
    ])
    store_choices = [ui.choice('Store_1', 'Store_1'), ui.choice('Store_2', 'Store_2')]
    selected_store = 'Store_1'
    q.page['store_dropdown_card'] = ui.form_card(box = '2 2 2 1', items = [
        ui.dropdown(name='arg_store_dropdown', label='Select Store', value=selected_store,
                    required=True, choices=store_choices, trigger=True),
    ])
    item_choices = [ui.choice('Item_1', 'Item_1'), ui.choice('Item_2', 'Item_2')]
    selected_item = 'Item_1'
    q.page['item_dropdown_card'] = ui.form_card(box='8 2 2 1', items = [
        ui.dropdown(name='arg_item_dropdown', label='Select Item', value=selected_item,
                    required=True, choices=item_choices, trigger=True),
    ])
    if q.args.arg_store_dropdown:
        q.page['store_trigger'] = ui.form_card(box = '1 4 10 1', items = [
        ui.text_xl("Store drop down was selected. SUCCESS STORE"),])
    if q.args.arg_item_dropdown:
        q.page['item_trigger'] = ui.form_card(box = '1 6 10 1', items = [
        ui.text_xl("Item drop down was selected. SUCCESS ITEM"),])
    await q.page.save()
listen("/trigger_working", main_page)

Add CLI to qd executable

• Integrate https://github.com/jawher/mow.cli or cobra
• Get q deploy . functional

Support responsive layouts

As discussed at the last meeting, there is a need to support mobile devices as well.

Possible solution inspired by Bootstrap and Bulma: Allow user to specify grid based on CSS screen size breakpoints e.g.:

• box_lg (for large screens)
• box_md (for medium screens)
• box_sm (for small screens)
• box_xs (for extra small screens)

This way we would get rid of endless responsive layout bug fixes and throw the burden on developers. This would also allow for better flexibility from dev perspective and doesn't require that much work for us.

Let's use this issue as a starting point for a discussion.

@lo5 @geomodular

Allow ui.plot(), ui.vega_plot() and ui.frame() in form cards

To provide backward compatibility for notebooks (q-insights).

Hard-code synthetic data in examples

The use of Fake* data generators make the plotting examples harder to decipher.
Simplify by hard-coding data in the body of the examples.

Theming API

Let's tackle this in two phases:

1. No user-specified themes
2. User-specified themes

For phase 1, we'll ship with the three themes that already exist, and the theme can be specified using a theme: str attribute on the meta_card.

When a theme is specified, the UI should use that theme.

Let's discuss and agree on an approach on a branch.

Add mapbox component

Via @sairaamv

Support alternate layout systems

In an earlier version, the grid was automatically resized to fit the browser width, but was removed because mouse handling in visualization libs breaks.

The only fool-proof solution for preserving fidelity seems to be to avoid using the full grid, OR providing an API to initialize pages with an alternate grid system.

Page-level visualization cross-filtering

Plot API: x_title broken

via @tkmaker

x_title axis labelling does not work for native plots

Add mechanism to stack cards (automatic 1d layout)

Via @sairaamv

Plot API: Add options to control axis ticks

Via @goldentom42

Add support for OIDC login

The qd server by default does not authenticate users - anyone can access any content.

Goal
Enable an optional mode where all users are authenticated.

• Add command line flags or env vars that enable authentication, with additional parameters for client id, secret, endpoint, etc.
• Once authenticated, set the q.auth: Expando with the subject's details.

DAI Model Dashboard App Generator

Motivation
DAI -> Q Integration

Goal
Allow users to easily play with DAI model predictions using Q.

Implementation
Author Python module to generate a Q app.
Input: Model input/output variables, data types, ranges/classes.
Output: App package

Deployment
The Python module can be integrated with the DAI codebase.

Intended use:

1. User builds model.
2. User clicks 'Export Q app' somewhere on the UI.
3. User runs app using Q.

Notes
Via @tomott12345:
https://0xdata.atlassian.net/wiki/spaces/SE/pages/1276149769/Qlik+Integration+with+Driverless+AI

Add component for top level header + nav combo

(Consistent to all apps)
via @sairaamv

Implement ability to add custom style sheets per page

Add support for R language

Goal
Allow developing apps and dashboards in R; feature-parity with Python API.

Phases

• Initial qgen UI API scaffolding.
• Initial support for scripts (not apps), bundled as an R package that can be installed without CRAN (R CMD INSTALL?).
• Port 5-10 examples from Python to R.
• Use examples to refine API design.
• Ship support for scripts (dashboards only): #612
• API improvements #773
• Plan support for apps.
• Implement R apps

Documentation and examples - Q3 2020

(Blanket issue)

Migrate test framework

Goals

• Migrate test framework.
• Provide an easy way to launch tests.

Provide pre-defined layout templates for various use cases.

Via @srini-x, @tkmaker, @ashrith

Goal
Ship sample layouts with the lib so that authors can quickly pick one they like and tweak it.
Example: https://semantic-ui.com/usage/layout.html#pages

Notes

• This might help with look/feel consistency across apps as well.
• Explore initializing apps using CLI: q init my_app --layout simple_responsive.

Add progress indicator component

Typical usage: wizard-like apps that need to display step-wise completion.

https://www.google.com/search?q=vertical+wizard+progress+indicator+ux&tbm=isch

Add select/deselect-all to multivalued dropdown.

Via @psinger

Point-and-click dashboard/plot control

Data table component

via @FelixArokia

We need a slick data table component.

Similar to the one in Shiny:

• https://shiny.rstudio.com/gallery/basic-datatable.html
• https://shiny.rstudio.com/gallery/datatables-demo.html
• https://shiny.rstudio.com/gallery/datatables-options.html

Add examples for vector graphics API