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
A Scheil-Gulliver simulation tool using pycalphad.

scheil A Scheil-Gulliver simulation tool using pycalphad. import matplotlib.pyplot as plt from pycalphad import Database, variables as v from scheil i

pycalphad 6 Dec 10, 2021
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
Statistical data visualization using matplotlib

seaborn: statistical data visualization Seaborn is a Python visualization library based on matplotlib. It provides a high-level interface for drawing

Michael Waskom 10.2k Dec 30, 2022
This project is an Algorithm Visualizer where a user can visualize algorithms like Bubble Sort, Merge Sort, Quick Sort, Selection Sort, Linear Search and Binary Search.

Algo_Visualizer This project is an Algorithm Visualizer where a user can visualize common algorithms like "Bubble Sort", "Merge Sort", "Quick Sort", "

Rahul 4 Feb 07, 2022
A streamlit component for bi-directional communication with bokeh plots.

Streamlit Bokeh Events A streamlit component for bi-directional communication with bokeh plots. Its just a workaround till streamlit team releases sup

Ashish Shukla 123 Dec 25, 2022
Create 3d loss surface visualizations, with optimizer path. Issues welcome!

MLVTK A loss surface visualization tool Simple feed-forward network trained on chess data, using elu activation and Adam optimizer Simple feed-forward

7 Dec 21, 2022
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
Quickly and accurately render even the largest data.

Turn even the largest data into images, accurately Build Status Coverage Latest dev release Latest release Docs Support What is it? Datashader is a da

HoloViz 2.9k Dec 28, 2022
Main repository for Vispy

VisPy: interactive scientific visualization in Python Main website: http://vispy.org VisPy is a high-performance interactive 2D/3D data visualization

vispy 3k Jan 03, 2023
Declarative statistical visualization library for Python

Altair http://altair-viz.github.io Altair is a declarative statistical visualization library for Python. With Altair, you can spend more time understa

Altair 8k Jan 05, 2023
A tool for creating SVG timelines from simple JSON input.

A tool for creating SVG timelines from simple JSON input.

Jason Reisman 432 Dec 30, 2022
An adaptable Snakemake workflow which uses GATKs best practice recommendations to perform germline mutation calling starting with BAM files

Germline Mutation Calling This Snakemake workflow follows the GATK best-practice recommandations to call small germline variants. The pipeline require

12 Dec 24, 2022
A simple agent-based model used to teach the basics of OOP in my lectures

Pydemic A simple agent-based model of a pandemic. This is used to teach basic principles of object-oriented programming to master students. It is not

Fabien Maussion 2 Jun 08, 2022
The implementation of the paper "HIST: A Graph-based Framework for Stock Trend Forecasting via Mining Concept-Oriented Shared Information".

The HIST framework for stock trend forecasting The implementation of the paper "HIST: A Graph-based Framework for Stock Trend Forecasting via Mining C

Wentao Xu 111 Jan 03, 2023
These data visualizations were created for my introductory computer science course using Python

Homework 2: Matplotlib and Data Visualization Overview These data visualizations were created for my introductory computer science course using Python

Sophia Huang 12 Oct 20, 2022
This is a place where I'm playing around with pandas to analyze data in a csv/excel file.

pandas-csv-excel-analysis This is a place where I'm playing around with pandas to analyze data in a csv/excel file. 0-start A very simple cheat sheet

Chuqin 3 Oct 05, 2022
A gui application to visualize various sorting algorithms using pure python.

Sorting Algorithm Visualizer A gui application to visualize various sorting algorithms using pure python. Language : Python 3 Libraries required Tkint

Rajarshi Banerjee 19 Nov 30, 2022
visualize_ML is a python package made to visualize some of the steps involved while dealing with a Machine Learning problem

visualize_ML visualize_ML is a python package made to visualize some of the steps involved while dealing with a Machine Learning problem. It is build

Ayush Singh 164 Dec 12, 2022
A high performance implementation of HDBSCAN clustering. http://hdbscan.readthedocs.io/en/latest/

HDBSCAN Now a part of scikit-learn-contrib HDBSCAN - Hierarchical Density-Based Spatial Clustering of Applications with Noise. Performs DBSCAN over va

Leland McInnes 91 Dec 29, 2022
Visualizations of some specific solutions of different differential equations.

Diff_sims Visualizations of some specific solutions of different differential equations. Heat Equation in 1 Dimension (A very beautiful and elegant ex

2 Jan 13, 2022