[KFP] Introduce inline visualization (#1766)

* Introduce inline visualization * Introduce lightweight components output visualization * Update CR comments * Update output-viewer.md * Update output-viewer.md
kubeflow · Mar 9, 2020 · c76ec73 · c76ec73
1 parent 7f728e9
commit c76ec73
Showing 1 changed file with 55 additions and 7 deletions.
diff --git a/content/docs/pipelines/sdk/output-viewer.md b/content/docs/pipelines/sdk/output-viewer.md
@@ -147,14 +147,22 @@ viewers later on the page.
           which case the Kubeflow Pipelines UI concatenates the data from the 
           matching source files.</p>
           
-          <p>For some viewers, this field can contain inlined string 
-          data instead of a path.</p>
+          <p><code>source</code> can also contain inlined string data instead of
+          a path when <code>storage='inline'</code>.</p>
           </td>
       </tr>
       <tr>
         <td><code>storage</code></td>
-        <td>Applies only to outputs of type <code>markdown</code>. See 
-        <a href="#type-markdown">below</a>.</td>
+        <td><p>(Optional) When <code>storage</code> is <code>inline</code>, the value of
+        <code>source</code> is parsed as inline data instead of a path. This applies
+        to all types of outputs except <code>tensorboard</code>. See 
+        <a href="#markdown">Markdown</a> or <a href="#web-app">Web app</a>
+        below as examples.</p>
+        <p><b>Be aware</b>, support for inline visualizations, other than
+        markdown, was introduced in Kubeflow Pipelines 0.2.5. Before using these
+        visualizations, [upgrade  your Kubeflow Pipelines cluster](/docs/pipelines/upgrade/)
+        to version 0.2.5 or higher.</p>
+        </td>
       </tr>
       <tr>
         <td><code>target_col</code></td>
@@ -186,10 +194,17 @@ metadata fields for each type.
 - `schema`
 - `source`
 
+**Optional metadata fields:**
+
+- `storage`
+
 The `confusion_matrix` viewer plots a confusion matrix visualization of the data
 from the given `source` path, using the `schema` to parse the data. The `labels`
 provide the names of the classes to be plotted on the x and y axes.
 
+Specify `'storage': 'inline'` to embed raw content of the
+confusion matrix CSV file as a string in `source` field directly.
+
 **Example:**
 
 ```Python
@@ -202,7 +217,7 @@ provide the names of the classes to be plotted on the x and y axes.
         {'name': 'predicted', 'type': 'CATEGORY'},
         {'name': 'count', 'type': 'NUMBER'},
       ],
-      'source': cm_file,
+      'source': <CONFUSION_MATRIX_CSV_FILE>,
       # Convert vocab to string because for bealean values we want "True|False" to match csv data.
       'labels': list(map(str, vocab)),
     }]
@@ -225,6 +240,9 @@ provide the names of the classes to be plotted on the x and y axes.
 **Required metadata fields:**
 
 - `source`
+
+**Optional metadata fields:**
+
 - `storage`
 
 The `markdown` viewer renders Markdown strings on the Kubeflow Pipelines UI. 
@@ -233,7 +251,7 @@ The viewer can read the Markdown data from the following locations:
 * A Markdown-formatted string embedded in the `source` field. The value of the
  `storage` field must be `inline`.
 * Markdown code in a remote file, at a path specified in the `source` field.
-  The `storage` field can contain any value except `inline`.
+  The `storage` field can be empty or contain any value except `inline`.
 
 **Example:**
 ```Python
@@ -280,9 +298,16 @@ assumes that the schema includes three columns with the following names:
 * `tpr` (true positive rate)
 * `thresholds`
 
+**Optional metadata fields:**
+
+- `storage`
+
 When viewing the ROC curve, you can hover your cursor over the ROC curve to see 
 the threshold value used for the cursor's closest `fpr` and `tpr` values.
 
+Specify `'storage': 'inline'` to embed raw content of the ROC
+curve CSV file as a string in `source` field directly.
+
 **Example:**
 
 ```Python
@@ -323,10 +348,17 @@ the threshold value used for the cursor's closest `fpr` and `tpr` values.
 - `header`
 - `source`
 
+**Optional metadata fields:**
+
+- `storage`
+
 The `table` viewer builds an HTML table out of the data at the given `source`
 path, where the `header` field specifies the values to be shown in the first row
 of the table. The table supports pagination.
 
+Specify `'storage': 'inline'` to embed CSV table content string
+in `source` field directly.
+
 **Example:**
 
 ```Python
@@ -366,6 +398,7 @@ When viewing the output page, you can:
   in your Kubeflow cluster. The button text switches to **Open Tensorboard**. 
 * Click **Open Tensorboard** to open the TensorBoard interface in a new tab, 
   pointing to the logdir data specified in the `source` field.
+* Click **Delete Tensorboard** to shutdown the Tensorboard instance.
 
 **Note:** The Kubeflow Pipelines UI doesn't fully manage your TensorBoard 
 instances. The "Start Tensorboard" button is a convenience feature so that
@@ -400,12 +433,18 @@ management tools.
 
 - `source`
 
+**Optional metadata fields:**
+
+- `storage`
+
 The `web-app` viewer provides flexibility for rendering custom output. You can
 specify an HTML file that your component creates, and the Kubeflow Pipelines UI
 renders that HTML in the output page. The HTML file must be self-contained, with
 no references to other files in the filesystem. The HTML file can contain
 absolute references to files on the web. Content running inside the web app is
-isolated in an iframe and cannot communicate with the Kubeflow Pipelines UI.
+sandboxed in an iframe and cannot communicate with the Kubeflow Pipelines UI.
+
+Specify `'storage': 'inline'` to embed raw html in `source` field directly.
 
 **Example:**
 
@@ -418,6 +457,10 @@ isolated in an iframe and cannot communicate with the Kubeflow Pipelines UI.
       'type': 'web-app',
       'storage': 'gcs',
       'source': static_html_path,
+    }, {
+      'type': 'web-app',
+      'storage': 'inline',
+      'source': '<h1>Hello, World!</h1>',
     }]
   }
   with file_io.FileIO('/mlpipeline-ui-metadata.json', 'w') as f:
@@ -460,6 +503,11 @@ The pipeline uses a number of prebuilt, reusable components, including:
   component](https://github.com/kubeflow/pipelines/blob/master/components/dataflow/predict/src/predict.py)
   which writes out the data for the `table` viewer.
 
+## Usage in lightweight python components
+
+For lightweight components, the syntax is slightly different. You can refer to
+[the lightweight python component notebook example](https://github.com/kubeflow/pipelines/blob/master/samples/core/lightweight_component/lightweight_component.ipynb) to learn more about declaring output visualizations.
+
 ## Next step
 
 See how to [export metrics from your