Realtime Web Apps and Dashboards for Python and R

Related tags

Data Visualizationvisualizationpythonapprdashboardrealtimewebapp
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
GitHub Repository https://wave.h2o.ai
Interactive Dashboard for Visualizing OSM Data Change

Dashboard and intuitive data downloader for more interactive experience with interpreting osm change data.

1 Feb 20, 2022
Movies-chart - A CLI app gets the top 250 movies of all time from imdb.com and the top 100 movies from rottentomatoes.com

movies-chart This CLI app gets the top 250 movies of all time from imdb.com and

3 Feb 17, 2022
erdantic is a simple tool for drawing entity relationship diagrams (ERDs) for Python data model classes

erdantic is a simple tool for drawing entity relationship diagrams (ERDs) for Python data model classes. Diagrams are rendered using the venerable Graphviz library.

DrivenData 129 Jan 04, 2023
Make visual music sheets for thatskygame (graphical representations of the Sky keyboard)

sky-python-music-sheet-maker This program lets you make visual music sheets for Sky: Children of the Light. It will ask you a few questions, and does

21 Aug 26, 2022
Visualization ideas for data science

Nuance I use Nuance to curate varied visualization thoughts during my data scientist career. It is not yet a package but a list of small ideas. Welcom

Li Jiangchun 16 Nov 03, 2022
Application for viewing pokemon regional variants.

Pokemon Regional Variants Application Application for viewing pokemon regional variants. Run The Source Code Download Python https://www.python.org/do

Michael J Bailey 4 Oct 08, 2021
An open-source plotting library for statistical data.

Lets-Plot Lets-Plot is an open-source plotting library for statistical data. It is implemented using the Kotlin programming language. The design of Le

JetBrains 820 Jan 06, 2023
JupyterHub extension for ContainDS Dashboards

ContainDS Dashboards for JupyterHub A Dashboard publishing solution for Data Science teams to share results with decision makers. Run a private on-pre

Ideonate 179 Nov 29, 2022
Collection of data visualizing projects through Tableau, Data Wrapper, and Power BI

Data-Visualization-Projects Collection of data visualizing projects through Tableau, Data Wrapper, and Power BI Indigenous-Brands-Social-Movements Pyt

Jinwoo(Roy) Yoon 1 Feb 05, 2022
This is my favourite function - the Rastrigin function.

This is my favourite function - the Rastrigin function. What sparked my curiosity and interest in the function was its complexity in terms of many local optimum points, which makes it particularly in

1 Dec 27, 2021
Complex heatmaps are efficient to visualize associations between different sources of data sets and reveal potential patterns.

Make Complex Heatmaps Complex heatmaps are efficient to visualize associations between different sources of data sets and reveal potential patterns. H

Zuguang Gu 973 Jan 09, 2023
Generate visualizations of GitHub user and repository statistics using GitHub Actions.

GitHub Stats Visualization Generate visualizations of GitHub user and repository statistics using GitHub Actions. This project is currently a work-in-

JoelImgu 3 Dec 14, 2022
A guide for using Bootstrap 5 classes in Dash Bootstrap Components V1

dash-bootstrap-cheatsheet This handy interactive cheatsheet makes it easy to use the Bootstrap 5 classes with your Dash app made with the latest versi

10 Dec 22, 2022
Automatically Visualize any dataset, any size with a single line of code. Created by Ram Seshadri. Collaborators Welcome. Permission Granted upon Request.

AutoViz Automatically Visualize any dataset, any size with a single line of code. AutoViz performs automatic visualization of any dataset with one lin

AutoViz and Auto_ViML 1k Jan 02, 2023
Sci palettes for matplotlib/seaborn

sci palettes for matplotlib/seaborn Installation python3 -m pip install sci-palettes Usage import seaborn as sns import matplotlib.pyplot as plt impor

Qingdong Su 2 Jun 07, 2022
Interactive plotting for Pandas using Vega-Lite

pdvega: Vega-Lite plotting for Pandas Dataframes pdvega is a library that allows you to quickly create interactive Vega-Lite plots from Pandas datafra

Altair 342 Oct 26, 2022
A napari plugin for visualising and interacting with electron cryotomograms.

napari-tomoslice A napari plugin for visualising and interacting with electron cryotomograms. Installation You can install napari-tomoslice via pip: p

3 Jan 03, 2023
Python implementation of the Density Line Chart by Moritz & Fisher.

PyDLC - Density Line Charts with Python Python implementation of the Density Line Chart (Moritz & Fisher, 2018) to visualize large collections of time

Charles L. Bérubé 10 Jan 06, 2023
A simple code for plotting figure, colorbar, and cropping with python

Python Plotting Tools This repository provides a python code to generate figures (e.g., curves and barcharts) that can be used in the paper to show th

Guanying Chen 134 Jan 02, 2023
Debugging, monitoring and visualization for Python Machine Learning and Data Science

Welcome to TensorWatch TensorWatch is a debugging and visualization tool designed for data science, deep learning and reinforcement learning from Micr

Microsoft 3.3k Dec 27, 2022