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
PanGraphViewer -- show panenome graph in an easy way

PanGraphViewer -- show panenome graph in an easy way Table of Contents Versions and dependences Desktop-based panGraphViewer Library installation for

16 Dec 17, 2022
Python code for solving 3D structural problems using the finite element method

3DFEM Python 3D finite element code This python code allows for solving 3D structural problems using the finite element method. New features will be a

Rémi Capillon 6 Sep 29, 2022
Typical: Fast, simple, & correct data-validation using Python 3 typing.

typical: Python's Typing Toolkit Introduction Typical is a library devoted to runtime analysis, inference, validation, and enforcement of Python types

Sean 171 Jan 02, 2023
Tidy data structures, summaries, and visualisations for missing data

naniar naniar provides principled, tidy ways to summarise, visualise, and manipulate missing data with minimal deviations from the workflows in ggplot

Nicholas Tierney 611 Dec 22, 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
HW 02 for CS40 - matplotlib practice

HW 02 for CS40 - matplotlib practice project instructions https://github.com/mikeizbicki/cmc-csci040/tree/2021fall/hw_02 Drake Lyric Analysis Bar Char

13 Oct 27, 2021
Python script to generate a visualization of various sorting algorithms, image or video.

sorting_algo_visualizer Python script to generate a visualization of various sorting algorithms, image or video.

146 Nov 12, 2022
Generate a roam research like Network Graph view from your Notion pages.

Notion Graph View Export Notion pages to a Roam Research like graph view.

Steve Sun 214 Jan 07, 2023
Browse Dash docsets inside emacs

Helm Dash What's it This package uses Dash docsets inside emacs to browse documentation. Here's an article explaining the basic usage of it. It doesn'

504 Dec 15, 2022
Visualize tensors in a plain Python REPL using Sparklines

Visualize tensors in a plain Python REPL using Sparklines

Shawn Presser 43 Sep 03, 2022
Python package to visualize and cluster partial dependence.

partial_dependence A python library for plotting partial dependence patterns of machine learning classifiers. The technique is a black box approach to

NYU Visualization Lab 25 Nov 14, 2022
Sprint planner considering JIRA issues and google calendar meetings schedule.

Sprint planner Sprint planner is a Python script for planning your Jira tasks based on your calendar availability. Installation Use the package manage

Apptension 2 Dec 05, 2021
MPL Plotter is a Matplotlib based Python plotting library built with the goal of delivering publication-quality plots concisely.

MPL Plotter is a Matplotlib based Python plotting library built with the goal of delivering publication-quality plots concisely.

Antonio López Rivera 162 Nov 11, 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
A small collection of tools made by me, that you can use to visualize atomic orbitals in both 2D and 3D in different aspects.

Orbitals in Python A small collection of tools made by me, that you can use to visualize atomic orbitals in both 2D and 3D in different aspects, and o

Prakrisht Dahiya 1 Nov 25, 2021
Sentiment Analysis application created with Python and Dash, hosted at socialsentiment.net

Social Sentiment Dash Application Live-streaming sentiment analysis application created with Python and Dash, hosted at SocialSentiment.net. Dash Tuto

Harrison 456 Dec 25, 2022
Profile and test to gain insights into the performance of your beautiful Python code

Profile and test to gain insights into the performance of your beautiful Python code View Demo - Report Bug - Request Feature QuickPotato in a nutshel

Joey Hendricks 138 Dec 06, 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
Statistics and Visualization of acceptance rate, main keyword of CVPR 2021 accepted papers for the main Computer Vision conference (CVPR)

Statistics and Visualization of acceptance rate, main keyword of CVPR 2021 accepted papers for the main Computer Vision conference (CVPR)

Hoseong Lee 78 Aug 23, 2022
Create Badges with stats of Scratch User, Project and Studio. Use those badges in Github readmes, etc.

Scratch-Stats-Badge Create customized Badges with stats of Scratch User, Studio or Project. Use those badges in Github readmes, etc. Examples Document

Siddhesh Chavan 5 Aug 28, 2022