better native-keras based sample (#3900)

* move seq * for test * updated test
kubeflow · Jul 2, 2020 · 842e8ce · 842e8ce
1 parent e808795
commit 842e8ce
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 40 deletions.
diff --git a/backend/src/apiserver/config/sample_config.json b/backend/src/apiserver/config/sample_config.json
@@ -9,6 +9,11 @@
     "description": "[source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/parameterized_tfx_oss) [GCP Permission requirements](https://github.com/kubeflow/pipelines/blob/master/samples/core/parameterized_tfx_oss#permission). Example pipeline that does classification with model analysis based on a public tax cab dataset.",
     "file": "/samples/core/parameterized_tfx_oss/parameterized_tfx_oss.py.yaml"
   },
+  {
+    "name": "[Demo] TFX - Iris classification pipeline",
+    "description": "[source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/iris). Example pipeline that classifies Iris flower subspecies and how to use native Keras within TFX.",
+    "file": "/samples/core/iris/iris.py.yaml"
+  },
   {
     "name": "[Tutorial] Data passing in python components",
     "description": "[source code](https://github.com/kubeflow/pipelines/tree/master/samples/tutorials/Data%20passing%20in%20python%20components) Shows how to pass data between python components.",
@@ -18,10 +23,5 @@
     "name": "[Tutorial] DSL - Control structures",
     "description": "[source code](https://github.com/kubeflow/pipelines/tree/master/samples/tutorials/DSL%20-%20Control%20structures) Shows how to use conditional execution and exit handlers. This pipeline will randomly fail to demonstrate that the exit handler gets executed even in case of failure.",
     "file": "/samples/tutorials/DSL - Control structures/DSL - Control structures.py.yaml"
-  },
-  {
-    "name": "[Demo] TFX - Iris classification pipeline",
-    "description": "[source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/iris). Example pipeline that classifies Iris flower subspecies and how to use native Keras within TFX.",
-    "file": "/samples/core/iris/iris.py.yaml"
   }
 ]
diff --git a/frontend/src/config/sample_config_from_backend.json b/frontend/src/config/sample_config_from_backend.json
@@ -1,7 +1,7 @@
 [
   "[Demo] XGBoost - Training with confusion matrix",
   "[Demo] TFX - Taxi tip prediction model trainer",
+  "[Demo] TFX - Iris classification pipeline",
   "[Tutorial] Data passing in python components",
-  "[Tutorial] DSL - Control structures",
-  "[Demo] TFX - Iris classification pipeline"
+  "[Tutorial] DSL - Control structures"
 ]
diff --git a/frontend/src/pages/GettingStarted.test.tsx b/frontend/src/pages/GettingStarted.test.tsx
@@ -73,9 +73,24 @@ describe('GettingStarted page', () => {
             <p><strong>Demos</strong> - Try an end-to-end demonstration pipeline.</p>
             <ul>
               <li>
-      -         <a href="#/pipelines" class="link">TFX pipeline demo</a>
+      -         <a href="#/pipelines" class="link">TFX pipeline demo with Keras</a>
+      +         <a href="#/pipelines/details/pipeline-id-3?" class="link"
+      +           >TFX pipeline demo with Keras</a
+      +         >
+                <ul>
+                  <li>
+                    Classification pipeline based on Keras.
+                    <a
+                      href="https://github.com/kubeflow/pipelines/tree/master/samples/core/iris"
+      @@ --- --- @@
+                    >
+                  </li>
+                </ul>
+              </li>
+              <li>
+      -         <a href="#/pipelines" class="link">TFX pipeline demo with Estimator</a>
       +         <a href="#/pipelines/details/pipeline-id-2?" class="link"
-      +           >TFX pipeline demo</a
+      +           >TFX pipeline demo with Estimator</a
       +         >
                 <ul>
                   <li>
@@ -104,29 +119,14 @@ describe('GettingStarted page', () => {
             <ul>
               <li>
       -         <a href="#/pipelines" class="link">Data passing in python components</a>
-      +         <a href="#/pipelines/details/pipeline-id-3?" class="link"
+      +         <a href="#/pipelines/details/pipeline-id-4?" class="link"
       +           >Data passing in python components</a
       +         >
                 <ul>
                   <li>
                     Shows how to pass data between python components.
                     <a
                       href="https://github.com/kubeflow/pipelines/tree/master/samples/tutorials/Data%20passing%20in%20python%20components"
-      @@ --- --- @@
-                    >
-                  </li>
-                </ul>
-              </li>
-              <li>
-      -         <a href="#/pipelines" class="link">DSL - Control structures</a>
-      +         <a href="#/pipelines/details/pipeline-id-4?" class="link"
-      +           >DSL - Control structures</a
-      +         >
-                <ul>
-                  <li>
-                    Shows how to use conditional execution and exit handlers.
-                    <a
-                      href="https://github.com/kubeflow/pipelines/tree/master/samples/tutorials/DSL%20-%20Control%20structures"
     `);
   });
 
@@ -159,20 +159,20 @@ describe('GettingStarted page', () => {
       + Received
 
       @@ --- --- @@
-                    >
-                  </li>
-                </ul>
-              </li>
+              <strong>Tutorials</strong> - Learn pipeline concepts by following a
+              tutorial.
+            </p>
+            <ul>
               <li>
-      -         <a href="#/pipelines" class="link">DSL - Control structures</a>
+      -         <a href="#/pipelines" class="link">Data passing in python components</a>
       +         <a href="#/pipelines/details/pipeline-id-4?" class="link"
-      +           >DSL - Control structures</a
+      +           >Data passing in python components</a
       +         >
                 <ul>
                   <li>
-                    Shows how to use conditional execution and exit handlers.
+                    Shows how to pass data between python components.
                     <a
-                      href="/kubeflow/pipelines/tree/master/samples/tutorials/DSL%20-%20Control%20structures"
+                      href="/kubeflow/pipelines/tree/master/samples/tutorials/Data%20passing%20in%20python%20components"
     `);
   });
 });
diff --git a/frontend/src/pages/GettingStarted.tsx b/frontend/src/pages/GettingStarted.tsx
@@ -29,20 +29,23 @@ import { Page } from './Page';
 
 const DEMO_PIPELINES: string[] = SAMPLE_CONFIG.slice(0, 4);
 const DEMO_PIPELINES_ID_MAP = {
-  control: 3,
-  data: 2,
+  control: 4,
+  data: 3,
+  tfxKeras: 2,
   tfx: 1,
   xgboost: 0,
 };
 
 const PAGE_CONTENT_MD = ({
   control,
   data,
+  tfxKeras,
   tfx,
   xgboost,
 }: {
   control: string;
   data: string;
+  tfxKeras: string;
   tfx: string;
   xgboost: string;
 }) => `
@@ -60,7 +63,8 @@ This section contains demo and tutorial pipelines.
 
 **Demos** - Try an end-to-end demonstration pipeline.
 
-  * [TFX pipeline demo](${tfx}) - Classification pipeline with model analysis, based on a public BigQuery dataset of taxicab trips. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/parameterized_tfx_oss)
+  * [TFX pipeline demo with Keras](${tfxKeras}) - Classification pipeline based on Keras. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/iris)
+  * [TFX pipeline demo with Estimator](${tfx}) - Classification pipeline with model analysis, based on a public BigQuery dataset of taxicab trips. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/parameterized_tfx_oss)
   * [XGBoost Pipeline demo](${xgboost}) - An example of end-to-end distributed training for an XGBoost model. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/core/xgboost_training_cm)
 
 <br/>
@@ -145,6 +149,7 @@ export class GettingStarted extends Page<{}, { links: string[] }> {
           {PAGE_CONTENT_MD({
             control: this.state.links[DEMO_PIPELINES_ID_MAP.control],
             data: this.state.links[DEMO_PIPELINES_ID_MAP.data],
+            tfxKeras: this.state.links[DEMO_PIPELINES_ID_MAP.tfxKeras],
             tfx: this.state.links[DEMO_PIPELINES_ID_MAP.tfx],
             xgboost: this.state.links[DEMO_PIPELINES_ID_MAP.xgboost],
           })}

diff --git a/frontend/src/pages/__snapshots__/GettingStarted.test.tsx.snap b/frontend/src/pages/__snapshots__/GettingStarted.test.tsx.snap
@@ -67,7 +67,29 @@ exports[`GettingStarted page initially renders documentation 1`] = `
             class="link"
             href="#/pipelines"
           >
-            TFX pipeline demo
+            TFX pipeline demo with Keras
+          </a>
+           
+          <ul>
+            <li>
+              Classification pipeline based on Keras. 
+              <a
+                class="link"
+                href="https://github.com/kubeflow/pipelines/tree/master/samples/core/iris"
+                rel="noopener"
+                target="_blank"
+              >
+                source code
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a
+            class="link"
+            href="#/pipelines"
+          >
+            TFX pipeline demo with Estimator
           </a>
            
           <ul>
@@ -140,7 +162,9 @@ exports[`GettingStarted page initially renders documentation 1`] = `
         <li>
           <a
             class="link"
-            href="#/pipelines"
+            href="undefined"
+            rel="noopener"
+            target="_blank"
           >
             DSL - Control structures
           </a>
@@ -194,13 +218,13 @@ Array [
     undefined,
     10,
     undefined,
-    "%7B%22predicates%22%3A%5B%7B%22key%22%3A%22name%22%2C%22op%22%3A%22EQUALS%22%2C%22string_value%22%3A%22%5BTutorial%5D%20Data%20passing%20in%20python%20components%22%7D%5D%7D",
+    "%7B%22predicates%22%3A%5B%7B%22key%22%3A%22name%22%2C%22op%22%3A%22EQUALS%22%2C%22string_value%22%3A%22%5BDemo%5D%20TFX%20-%20Iris%20classification%20pipeline%22%7D%5D%7D",
   ],
   Array [
     undefined,
     10,
     undefined,
-    "%7B%22predicates%22%3A%5B%7B%22key%22%3A%22name%22%2C%22op%22%3A%22EQUALS%22%2C%22string_value%22%3A%22%5BTutorial%5D%20DSL%20-%20Control%20structures%22%7D%5D%7D",
+    "%7B%22predicates%22%3A%5B%7B%22key%22%3A%22name%22%2C%22op%22%3A%22EQUALS%22%2C%22string_value%22%3A%22%5BTutorial%5D%20Data%20passing%20in%20python%20components%22%7D%5D%7D",
   ],
 ]
 `;