Realtime Web Apps and Dashboards for Python and R

Overview

H2O Wave

Wave logo

PyPI - Downloads License PyPI Twitter Follow Contributor covenant

Realtime Web Apps and Dashboards for Python and R

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

New! Easily integrate AI/ML models into your apps using Wave ML for automatic machine learning.

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.

Responsive Layouts

Dashboard

Dashboard

Dashboard

Dashboard

Dashboard

Dashboard

Dashboard

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

Themes

Light Theme

Neon Theme

(Coming soon!)

Dark Theme

80+ components, 175+ examples

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

Components

Visualizations

License

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

Comments
  • fix: make

    fix: make "value" behavior consistent

    2022-01-04 16 46 57

    Task

    Prevent dropdown from setting the value back to its initial value on re-renders.

    Problem

    In our Dropdown component, we were creating a new options array on every re-render

    Solution

    Create a new options array when the new provided choices props contains different objects (deeply compare it using JSON.stringify)

    opened by aalencar 32
  • ui.table enhancements + redesign

    ui.table enhancements + redesign

    Table View

    image

    Features

    • Columns should be sortable
    • Should allow for 'badges' as part of field values
    • Should have hover over effect
    • Clicking on a row should be evented

    Note: don't need the "Action" column equivalent

    ui feature 
    opened by iamabhishekmathur 29
  • feat: annotator component #227

    feat: annotator component #227

    Introduces ui annotator that works similar to highlighter - user needs to first select a tag and then pick words that he wants to have highlighted.

    Implementation notes:

    • The general pattern is to split all the text strings into separate spans so that it is possible to determine start/end indeces and highlight the correct part. Also considered a simpler solution via replaceAll on string, but it would replace every occurrence in the text which may not be desired. Open for discussion

    The component a touch from a designer to look better.

    Demo:

    https://user-images.githubusercontent.com/64769322/114843836-83869a00-9dda-11eb-87f4-13ccc23ea8fc.mov

    Closes #227

    opened by mturoci 26
  • Toast notification alert message pop up

    Toast notification alert message pop up

    Features

    • Toast message should include prefix icon, text, button and close icon.
    • Toast message should be able to show background color state variations based on scenario (green, red, yellow, blue).
    • Toast message should have a time out.

    Design URL for specs : https://xd.adobe.com/view/809c4f44-9861-4f57-978a-e2d3515a426e-d5cf/screen/63ee7e10-a6aa-48a7-b9d9-fb78539eaf77/

    Toast notification pop up (success state)

    Toast notification ui feature 
    opened by shanaka-rajitha 22
  • Sankey plot

    Sankey plot

    Design

    image

    Design Link: https://xd.adobe.com/view/0790f950-abbd-41fa-b372-332295fd876f-52c3/screen/4ef1b0c3-50cc-4782-9400-193c438cdc41/

    Features

    • Ability to click on any of the parent/child components
    • After clicking, component should be highlighted and it should trigger an event (use case: event will be used as a filter for table values)
    • Thickness of the line should be proportionate to the % distribution to each child branch

    @shihan007

    ui feature plot 
    opened by iamabhishekmathur 22
  • feat: Article card #1027

    feat: Article card #1027

    image image image

    API to review:

    /** Create an article card for longer texts. */
    interface State {
      /** The card’s title, displayed at the top. */
      title: S
      /** The card's subtitle, displayed under the title. */
      subtitle?: S
      /** The card's caption, displayed under the subtitle. */
      caption?: S
      /** Markdown text. */
      content?: S
    }
    

    Used card-wide commands prop that is auto-added to every card and hid the rendered menu in top right corner. wdyt @lo5 ?

    Design notes:

    • Didn't implement image the dot separator. IIRC, @lo5 mentioned in his feedback he doesn't want it.
    • Couldn't really align title and toolbar as the design doesn't account for hover effects: image - what would be the best to do in this case? - cc @sandruparo @shihan007 @shanaka-rajitha

    Closes #1027

    opened by mturoci 19
  • Trigger for ui.checkbox and ui.toggle not triggered on unselect

    Trigger for ui.checkbox and ui.toggle not triggered on unselect

    Q SDK Version, OS Q 0.3.1 OS: macOS 10.15.6

    Actual behavior

    When using trigger=True on ui.checkbox and ui.toggle, selecting an option creates trigger with the component name in q.args. However, when an option is unselected, q.args is empty.

    Expected behavior

    Expected behavior is have the q.args with the name of the component that is unselected and the value to be False.

    Here is the log from my app. checking the checkbox created green_zone but unchecking it did not create any args

    initialized: True
    route: before:dashboard, now:None
    args:
    green_zone
    
    initialized: True
    route: before:dashboard, now:None
    args:
    
    
    ui bug 
    opened by srini-x 19
  • feat: Side panel. #898

    feat: Side panel. #898

    Current demo:

    https://user-images.githubusercontent.com/64769322/129548308-83eaab7d-58d5-4855-86f5-d300d2d5f3f3.mov

    @lo5

    • I added width prop as well which I think might be handy - same as dialog.
    • Added support for q.events on close - same as dialog.
    • Needs discussion: It might be a good idea to introduce a title prop as well.

    @sandruparo

    • As discussed, the designs need more work on colors. They are currently hardcoded and need to be themable instead.
    • Current implementation doesn't use any offsets (top, right, bottom). The proposed design has them, but these seem like random values (top 223px, right 50px, bottom 244px). There are 2 options we have here:
    1. Make the offset fixed - what is presented in the proposed design, but with reasonable values.
    2. Use percentage value. Please let me know which one to pick.

    Closes #898

    opened by mturoci 18
  • feat: Add clickable links for Table

    feat: Add clickable links for Table

    Proposed API

    Set data_type to 'link' and use Markdown notation [label](url)

     ui.table(
            name='table',
            columns=[
                ui.table_column(name='link', label='Link', data_type='link')
            ],
            rows=[
                ui.table_row(name='row1', cells=['[Wave](https://wave.h2o.ai/)'])
            ]
        )
    

    I tried to use ui.link as suggested by @mturoci but I didn't find a way to pass label to it because cells only accept strings. I wish I could do something like cells=[ui.link(label='my label', path='https://website.com')].

    /** Create a table row. */
    interface TableRow {
      /** An identifying name for this row. */
      name: Id
      /** The cells in this row (displayed left to right). */
      cells: S[]
    }
    
    opened by aalencar 16
  • Add text annotation component to API

    Add text annotation component to API

    Goal Create a component that allows users to highlight phrases in text content and annotate them.

    Intended use NER tagging. See https://prodi.gy/docs/named-entity-recognition#manual-patterns

    Specifics The component can have two major properties: tags: List[str] and content: str. The content (markdown allowed, like in ui.text()) is rendered as a block of text. The tags are rendered as clickable elements that tag the highlighted text.

    On submit, the component can send this array:

    [
       { text: 'Europe', tag: 'continent' }, 
       { text: 'fish and chips', tag: 'food' }, 
    ]
    

    TBD

    • What should we call this? ui.annotator()?
    • What should the UX be? Select tag first and then highlight text? Or vice-versa? Or something else?
    ui feature 
    opened by lo5 16
  • Fix: form visibility

    Fix: form visibility

    Moved the visibility handling logic to parent form component instead of dealing with it at component level.

    There was also a minor spacing issue - we applied marginTop: 0 to :not(:first-child) selector. The problem is, this selector looks at the DOM (hidden elements are still present in the DOM), not whether the element is visible or not. I managed to fix it via CSS.

    Closes #484 Closes #817

    opened by mturoci 14
  • feat: Forward inbound HTTP headers to the Wave app. #1704

    feat: Forward inbound HTTP headers to the Wave app. #1704

    Let's use this PR as a starting point for discussion. Once we agree on the implementation, the docs will be added as well.

    wdyt about the proposal in this PR @lo5 ? It's quite straightforward I would say.

    Closes #1704

    opened by mturoci 0
  • perf: Copy files instead of sending over HTTP if Wave app and Wave server are running on the same machine. #982

    perf: Copy files instead of sending over HTTP if Wave app and Wave server are running on the same machine. #982

    This is a rough proposal for further discussion. If approved, will finish the rest of the sync/async upload methods.

    Rationale: When uploading files, we send them over HTTP with serialization/deserialization overhead that slows the whole method. However, most of the Wave apps run both Wave server (waved) and Wave app on the same machine which means a simple file copy should be enough.

    Perf testing

    HTTPX 0.16.1 is the original version from the time of creating issue #982.

    | File size | HTTPX 0.16.1 | HTTPX 0.23.1 (latest) | cp (Mac) | |-----------|:-------------:|:---------------------:|:--------:| | 1GB | ~8.5s | ~4.3s | ~14ms | | 10 GB | 10min timeout | ~40s | ~10ms |

    Although we have public/private dirs, the concept of serving files and figuring out what is the correct URL can be troublesome for non-software engineering users so I would suggest keeping the current q.site.upload as is.

    This change would impact most (if not all) Wave users who use q.site.upload.

    Wdyt @lo5?

    Closes #982

    opened by mturoci 0
  • Notification bar isn't visible over the side panel

    Notification bar isn't visible over the side panel

    Wave SDK Version, OS

    Wave SDK: 0.24.1, Wave Daemon: 0.24.1, OS: MacOs

    Actual behavior

    Notification bar is not appeared over the side panel when the side panel is active. Only can see after side panel is closed.

    https://user-images.githubusercontent.com/12801761/207850330-e6533b71-3195-4bf3-a3f8-7ce912974f45.mov

    Expected behavior

    It's required to show notification bar over the side panel.

    Screenshot 2022-12-15 at 17 08 03

    Steps To Reproduce

    You can run the following code to create the issue:

    @app('/')
    async def serve(q: Q):
        if not q.client.initialized:
            # Create an empty meta_card to hold the notification bar
            q.page['meta'] = ui.meta_card(box='')
            # Display a button to show the notification bar
            q.page['form'] = ui.form_card(box='1 1 2 4', items=[
                ui.button(name="show_side_panel", label="Show side panel")
            ])
            q.client.initialized = True
    
        # Was the show_notification_bar button clicked?
        if q.args.show_notification_bar:
            # Create a notification bar
            q.page['meta'].notification_bar=ui.notification_bar(
                text='You can close me!',
                name="my_bar",
                # Get notified when the notification bar is dismissed.
                events=['dismissed'],
            )
        if q.args.show_side_panel:
            q.page["meta"].side_panel = ui.side_panel(
            title="",
            items=[ui.text("Side panel text"), ui.button(name='show_notification_bar', label='Show notification bar')],
            name="side_panel",
            events=["dismissed"],
            closable=True,
        )
    
        # Did we get events from the notification bar?
        if q.events.my_bar:
            # Was the notification bar dismissed?
            print("events triggered")
            if q.events.my_bar.dismissed:
                # Delete the notification bar
                print("dismissed")
                q.page['meta'].notification_bar = None
    
        if q.events.side_panel:
            if q.events.side_panel.dismissed:
                print("side panel dismissed")
                q.page["meta"].side_panel = None
    
        await q.page.save()
    
    ui bug good first issue 
    opened by senalw 1
  • Resolves Issue #1689: Adding filter count to column headers

    Resolves Issue #1689: Adding filter count to column headers

    This PR resolves issue #1689. When a filter is selected for a column that is instantiated with filterable=True, this feature will automatically add a number for how many filters are applied to that column. For 0 filters, no number will be shown; for more than 9 filters, '9+' will be shown.

    opened by SiddharthParatkar 0
  • Enable multiple OpenID authentication providers

    Enable multiple OpenID authentication providers

    Is your feature request related to a problem? Please describe

    Background: OpenID Connect (OIDC) is a standard protocol for authenticating users, and many common apps (Google, Facebook, ORCID, etc.) provide this service for other registered third-party apps to use. Users can confidently log in with their existing credentials to use the third-party, and the third-party app can be confident that an authenticated user is accessing its services.

    Current State: H2O Wave supports OIDC authentication with optional command line arguments passed to the waved server at startup. This enables Single Sign On functionality for the wave apps.

    Feature Upgrade: Apps often need to offer multiple OIDC sign-on options to users, because this increases the likelihood that the user has an account with one of the sign-on services. Enabling the developer to configure multiple OIDC options on the Wave server would provide this benefit to Wave apps, which is generally expected by web app users.

    Describe the solution you'd like

    Wave should provide a mechanism for deploying the server with multiple OIDC configurations.

    Because there are so many optional command line arguments needed, it might make sense to provide these in a configuration file rather than at the command line. In a config file, each OIDC configuration could be grouped and named. Then the app developer could inspect the available OIDC configurations, and offer some or all of those options to the user for authentication.

    The wave server might need some way of knowing which service to connect to for authentication, so perhaps then name of the OIDC configuration could be passed in the HTTP header or URL query?

    Ideally the OIDC service selected by the user gets stored at the User level, rather than at the App or Deployment (waved) level.

    Describe alternatives you've considered

    The alternatives currently available seem to be:

    1. Require all users to obtain an account with the single OIDC service selected by the Wave app developer. This limits the freedom of the user to use an existing account.
    2. Start a separate waved server instance for each OIDC option, then redirect user to that URL based on the OIDC option they select. This requires repetition of app services and the waved server, and logic complexity that extends outside the current app framework of Wave.
    3. Deploy an OIDC proxy that handles the logic of offering OIDC options and maintaining the state of authentication, thus providing only a single OIDC interface to Wave. This requires each developer to independently write an OIDC server and the logic for proxying to the underlying services.
    server feature 
    opened by pshafer-als 1
Releases(nightly)
Owner
H2O.ai
Fast Scalable Machine Learning For Smarter Applications
H2O.ai
Here I plotted data for the average test scores across schools and class sizes across school districts.

HW_02 Here I plotted data for the average test scores across schools and class sizes across school districts. Average Test Score by Race This graph re

7 Oct 27, 2021
Graphical display tools, to help students debug their class implementations in the Carcassonne family of projects

carcassonne_tools Graphical display tools, to help students debug their class implementations in the Carcassonne family of projects NOTE NOTE NOTE The

1 Nov 08, 2021
A simple python tool for explore your object detection dataset

A simple tool for explore your object detection dataset. The goal of this library is to provide simple and intuitive visualizations from your dataset and automatically find the best parameters for ge

GRADIANT - Centro Tecnolóxico de Telecomunicacións de Galicia 142 Dec 25, 2022
I'm doing Genuary, an aritifiacilly generated month to build code that make beautiful things

Genuary 2022 I'm doing Genuary, an aritifiacilly generated month to build code that make beautiful things. Every day there is a new prompt for making

Joaquín Feltes 1 Jan 10, 2022
Python histogram library - histograms as updateable, fully semantic objects with visualization tools. [P]ython [HYST]ograms.

physt P(i/y)thon h(i/y)stograms. Inspired (and based on) numpy.histogram, but designed for humans(TM) on steroids(TM). The goal is to unify different

Jan Pipek 120 Dec 08, 2022
Data visualization electromagnetic spectrum

Datenvisualisierung-Elektromagnetischen-Spektrum Anhand des Moduls matplotlib sollen die Daten des elektromagnetischen Spektrums dargestellt werden. D

Pulsar 1 Sep 01, 2022
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 50k Jan 06, 2023
Voilà, install macOS on ANY Computer! This is really and magic easiest way!

OSX-PROXMOX - Run macOS on ANY Computer - AMD & Intel Install Proxmox VE v7.02 - Next, Next & Finish (NNF). Open Proxmox Web Console - Datacenter N

Gabriel Luchina 654 Jan 09, 2023
basemap - Plot on map projections (with coastlines and political boundaries) using matplotlib.

Basemap Plot on map projections (with coastlines and political boundaries) using matplotlib. ⚠️ Warning: this package is being deprecated in favour of

Matplotlib Developers 706 Dec 28, 2022
Keir&'s Visualizing Data on Life Expectancy

Keir's Visualizing Data on Life Expectancy Below is information on life expectancy in the United States from 1900-2017. You will also find information

9 Jun 06, 2022
Realtime Viewer Mandelbrot set with Python and Taichi (cpu, opengl, cuda, vulkan, metal)

Mandelbrot-set-Realtime-Viewer- Realtime Viewer Mandelbrot set with Python and Taichi (cpu, opengl, cuda, vulkan, metal) Control: "WASD" - movement, "

22 Oct 31, 2022
Resources for teaching & learning practical data visualization with python.

Practical Data Visualization with Python Overview All views expressed on this site are my own and do not represent the opinions of any entity with whi

Paul Jeffries 98 Sep 24, 2022
Python & Julia port of codes in excellent R books

X4DS This repo is a collection of Python & Julia port of codes in the following excellent R books: An Introduction to Statistical Learning (ISLR) Stat

Gitony 5 Jun 21, 2022
Create matplotlib visualizations from the command-line

MatplotCLI Create matplotlib visualizations from the command-line MatplotCLI is a simple utility to quickly create plots from the command-line, levera

Daniel Moura 46 Dec 16, 2022
Getting started with Python, Dash and Plot.ly for the Data Dashboards team

data_dashboards Getting started with Python, Dash and Plot.ly for the Data Dashboards team Getting started MacOS users: # Install the pyenv version ma

Department for Levelling Up, Housing and Communities 1 Nov 08, 2021
Mattia Ficarelli 2 Mar 29, 2022
patchwork for matplotlib

patchworklib patchwork for matplotlib test code Preparation of example plots import seaborn as sns import numpy as np import pandas as pd #Bri

Mori Hideto 185 Jan 06, 2023
Data Analysis: Data Visualization of Airlines

Data Analysis: Data Visualization of Airlines Anderson Cruz | London-UK | Linkedin | Nowa Capital Project: Traffic Airlines Airline Reporting Carrier

Anderson Cruz 1 Feb 10, 2022
Runtime analysis of code with plotting

Runtime analysis of code with plotting A quick comparison among Python, Cython, and the C languages A Programming Assignment regarding the Programming

Cena Ashoori 2 Dec 24, 2021
Example scripts for generating plots of Bohemian matrices

Bohemian Eigenvalue Plotting Examples This repository contains examples of generating plots of Bohemian eigenvalues. The examples in this repository a

Bohemian Matrices 5 Nov 12, 2022