Merge pull request #117 from h2oai/emp-churn-step-by-step

Employee Churn step by step Apps

.gitignore

@@ -135,4 +135,5 @@ dmypy.json
 *.iml
 *.wave
 *.state
-out
+out
+.DS_Store

README.md

@@ -52,6 +52,19 @@ Follow the instructions [here](https://wave.h2o.ai/docs/installation) to downloa
 
 
 
+### [Employee Churn - Step by Step Training Apps](emp-churn-step-by-step/README.md)
+
+**Details:** These are a collection of self-contained applications that showcase the development of an Employee Churn application. Each application introduces additional components and progressively enhances the application with appropriate design patterns:
+
+- Debugging
+- Updating the content of cards without recreating them
+- Switching between multiple layouts using menu tabs
+
+
+
+
+
+
 ## FAQs
 While trying to run any of the apps particularly on Windows terminal, below are given some common errors and their fixes:
 

emp-churn-step-by-step/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+./src/.DS_Store

emp-churn-step-by-step/README.md

@@ -0,0 +1,82 @@
+# Getting Started with H2O Wave
+
+This project was bootstrapped with `wave init` command.
+
+## Running the app
+
+Make sure you have activated a Python virtual environment with `h2o-wave` installed.
+
+If you haven't created a python env yet, simply run the following command (assuming Python 3.7 is installed properly).
+
+For MacOS / Linux:
+
+```sh
+python3 -m venv venv
+source venv/bin/activate
+pip install h2o-wave
+```
+
+For Windows:
+
+```sh
+python3 -m venv venv
+venv\Scripts\activate.bat
+pip install h2o-wave
+```
+
+Once the virtual environment is setup and active, run:
+
+```sh
+# To run first example
+wave run app1.py
+
+# To run thelast example App
+wave run app13.py
+```
+
+Which will start a Wave app at <http://localhost:10101>.
+
+
+
+## Application topics
+
+This is is the set of applications (from app1 to app13) which demonstrate how to develop Wave application step by step. Each step adds additional functionality.
+
+List of training Apps:
+
+- `app1` through `app8` - step by step development of Employee Churn dashboard
+- `app9` - adding debugging and logging
+- `app10 `- refactoring app9 to refresh content only when there is a change due to user interaction. In the previous steps we have re-drawn cards every time there was a change
+- `app11` - This app is the same as `app10`, but it pulls data from Delta Lake storage.
+- `app12` - This app adds pagination logic to `app10`.
+- `app13` - This app adds tabs and tab switching to `app12`. Cards are recreated only when tab switching is detected.
+
+
+
+## Interactive Wave University examples
+
+If you don't feel like going through the docs because you are more of a hands-on person, you can try our Wave University app.
+
+Within your activated virtual environment, run:
+
+```sh
+wave learn
+```
+
+
+
+The command requires `h2o_wave_university` to be installed. To do that, run:
+
+```sh
+pip install h2o_wave_university
+```
+
+
+
+Wave University documentation link: https://wave.h2o.ai/docs/getting-started#interactive-learning 
+
+
+
+## Learn More
+
+To learn more about H2O Wave, check out the [docs](https://wave.h2o.ai/).

emp-churn-step-by-step/app.toml

@@ -0,0 +1,8 @@
+[App]
+Name = "ai.h2o.q.training-app"
+Version = "0.0.3"
+Title = "Wave Training App"
+Description = "Create your own Wave App in steps."
+
+[Runtime]
+Module = "src.app13"

emp-churn-step-by-step/requirements.txt

@@ -0,0 +1 @@
+h2o-wave==0.24.0

emp-churn-step-by-step/src/app1.py

@@ -0,0 +1,88 @@
+# Step 1
+# Setting Up Layout:Header, main page and footer
+# ---
+from h2o_wave import main, app, Q, ui, on, handle_on, data
+
+
+@app('/')
+async def serve(q: Q):
+    # First time a browser comes to the app
+    if not q.client.initialized:
+        await init(q)
+        q.client.initialized = True
+
+    # Other browser interactions
+    await handle_on(q)
+    await q.page.save()
+
+
+async def init(q: Q) -> None:
+    q.client.cards = set()
+    q.client.dark_mode = False
+    # First we define the layout of the page
+    # The layout contains the header, footer and the main content
+    # To place content into the layout, we use zones and cards
+    # Zones are like containers that hold cards
+    # Cards are like the content that we want to display
+    # We can have multiple zones and cards in a layout
+    # We can also have multiple layouts
+    # Here we define a single layout with 3 zones: header, content and footer
+    # The content zone is further divided into 2 zones: horizontal and vertical
+    # The horizontal zone is for the cards that contain static content: main factors impacting Employee Churn
+    # and the histogram of model predictions
+    #
+    # The vertical zone is for the cards that contain dynamic content: threshold slider, the table of predictions and
+    # the local Shapley values
+    # The header and footer zones are for the header and footer
+    # The header and footer zones are not divided into further zones
+    q.page['meta'] = ui.meta_card(
+        box='',
+        title='My Wave App',
+        layouts=[
+            ui.layout(
+                breakpoint='xs',
+                min_height='100vh',
+                max_width='1200px',
+                zones=[
+                    ui.zone('header'),
+                    ui.zone('content', size='1', zones=[
+                        ui.zone('horizontal', direction=ui.ZoneDirection.ROW),
+                        ui.zone('vertical', size='1', )
+                    ]),
+                    ui.zone(name='footer'),
+                ]
+            )
+        ]
+    )
+    # Place the header and footer into the layout
+    q.page['header'] = ui.header_card(
+        box='header',
+        title='My Wave App',
+        subtitle="Example to get us started"
+    )
+    q.page['footer'] = ui.footer_card(
+        box='footer',
+        caption='Made with 💛 using [H2O Wave](https://wave.h2o.ai).'
+    )
+
+    await home(q)
+
+
+@on()
+async def home(q: Q):
+    clear_cards(q)
+    add_card(q, 'form', ui.form_card(box='vertical', items=[ui.text('This is my app!')]))
+    add_card(q, 'form', ui.form_card(box='horizontal', items=[ui.text('This is Horizontal my app!')]))
+
+
+# Use for cards that should be deleted on calling `clear_cards`. Useful for routing and page updates.
+def add_card(q, name, card) -> None:
+    q.client.cards.add(name)
+    q.page[name] = card
+
+
+def clear_cards(q, ignore=[]) -> None:
+    for name in q.client.cards.copy():
+        if name not in ignore:
+            del q.page[name]
+            q.client.cards.remove(name)