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
Matplotlib colormaps from the yt project !

cmyt Matplotlib colormaps from the yt project ! Colormaps overview The following colormaps, as well as their respective reversed (*_r) versions are av

The yt project 5 Sep 16, 2022
Python Data. Leaflet.js Maps.

folium Python Data, Leaflet.js Maps folium builds on the data wrangling strengths of the Python ecosystem and the mapping strengths of the Leaflet.js

6k Jan 02, 2023
3D-Lorenz-Attractor-simulation-with-python

3D-Lorenz-Attractor-simulation-with-python Animação 3D da trajetória do Atrator de Lorenz, implementada em Python usando o método de Runge-Kutta de 4ª

Hevenicio Silva 17 Dec 08, 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 python script and steps to display locations of peers connected to qbittorrent

A python script (along with instructions) to display the locations of all the peers your qBittorrent client is connected to in a Grafana worldmap dash

62 Dec 07, 2022
An XLSX spreadsheet renderer for Django REST Framework.

drf-renderer-xlsx provides an XLSX renderer for Django REST Framework. It uses OpenPyXL to create the spreadsheet and returns the data.

The Wharton School 166 Dec 01, 2022
eoplatform is a Python package that aims to simplify Remote Sensing Earth Observation by providing actionable information on a wide swath of RS platforms and provide a simple API for downloading and visualizing RS imagery

An Earth Observation Platform Earth Observation made easy. Report Bug | Request Feature About eoplatform is a Python package that aims to simplify Rem

Matthew Tralka 4 Aug 11, 2022
Generate SVG (dark/light) images visualizing (private/public) GitHub repo statistics for profile/website.

Generate daily updated visualizations of GitHub user and repository statistics from the GitHub API using GitHub Actions for any combination of private and public repositories, whether owned or contri

Adam Ross 2 Dec 16, 2022
Moscow DEG 2021 elections plots

Построение графиков на основе публичных данных о ДЭГ в Москве в 2021г. Описание Скрипты в данном репозитории позволяют собственноручно построить графи

9 Jul 15, 2022
Smoking Simulation is an app to simulate the spreading of smokers and non-smokers, their interactions and population during certain amount of time.

Smoking Simulation is an app to simulate the spreading of smokers and non-smokers, their interactions and population during certain

Bohdan Ruban 5 Nov 08, 2022
:small_red_triangle: Ternary plotting library for python with matplotlib

python-ternary This is a plotting library for use with matplotlib to make ternary plots plots in the two dimensional simplex projected onto a two dime

Marc 611 Dec 29, 2022
A small script written in Python3 that generates a visual representation of the Mandelbrot set.

Mandelbrot Set Generator A small script written in Python3 that generates a visual representation of the Mandelbrot set. Abstract The colors in the ou

1 Dec 28, 2021
The Metabolomics Integrator (MINT) is a post-processing tool for liquid chromatography-mass spectrometry (LCMS) based metabolomics.

MINT (Metabolomics Integrator) The Metabolomics Integrator (MINT) is a post-processing tool for liquid chromatography-mass spectrometry (LCMS) based m

Sören Wacker 0 May 04, 2022
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
Frbmclust - Clusterize FRB profiles using hierarchical clustering, plot corresponding parameters distributions

frbmclust Getting Started Clusterize FRB profiles using hierarchical clustering,

3 May 06, 2022
HiPlot makes understanding high dimensional data easy

HiPlot - High dimensional Interactive Plotting HiPlot is a lightweight interactive visualization tool to help AI researchers discover correlations and

Facebook Research 2.4k Jan 04, 2023
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
Boltzmann visualization - Visualize the Boltzmann distribution for simple quantum models of molecular motion

Boltzmann visualization - Visualize the Boltzmann distribution for simple quantum models of molecular motion

1 Jan 22, 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
This is a web application to visualize various famous technical indicators and stocks tickers from user

Visualizing Technical Indicators Using Python and Plotly. Currently facing issues hosting the application on heroku. As soon as I am able to I'll like

4 Aug 04, 2022