Artifact type based visualization for HTML, Markdown and etc #3970

Ark-kun · 2020-06-11T20:20:30Z

Currently, the UX visualizes data from mlpipleine-ui-metadata output JSON structure.

It would be great to just support visualizing the individual output artifacts based on type. Only few simple types are needed: HTML and Markdown (plus maybe URI). Everything more complicated can be accomplished by visualizer components.

This issue is a prerequisite for visualizer components.

HTML
Markdown
URI ?

Example code that generates several typed outputs:

import kfp

sample_visualizations_op = kfp.components.load_component_from_text('''
name: Create visualizations
outputs:
- {name: Some Url 1, type: URI}
#- {name: Some Url 2, type: {URI: {data_type: something}}}  # Metadata Writer does not seem to handle complex types at this moment
- {name: Some Url 2, type: URI}
- {name: Some HTML, type: HTML}
- {name: Some Markdown, type: Markdown}
- {name: Some metrics, type: Metrics}

implementation:
  container:
    image: alpine
    command:
    - sh
    - -ex
    - -c
    - |
      output_url1_path="$0"
      output_url2_path="$1"
      output_html_path="$2"
      output_markdown_path="$3"
      output_metrics_path="$4"

      mkdir -p "$(dirname "$output_url1_path")"
      mkdir -p "$(dirname "$output_url2_path")"
      mkdir -p "$(dirname "$output_html_path")"
      mkdir -p "$(dirname "$output_markdown_path")"
      mkdir -p "$(dirname "$output_metrics_path")"

      echo 'https://github.com/kubeflow/pipelines' > "$output_url1_path"
      echo 'https://github.com/kubeflow/pipelines' > "$output_url2_path"
      echo '<html><body>Hello <b>World</b></body></html>' > "$output_html_path"
      echo 'Hello **World**' > "$output_markdown_path"
      echo '{"precision": 0.7, "recall": 0.9}' > "$output_metrics_path"

    - {outputPath: Some Url 1}
    - {outputPath: Some Url 2}
    - {outputPath: Some HTML}
    - {outputPath: Some Markdown}
    - {outputPath: Some metrics}
''')


kfp_endpoint = 'https://XXX.pipelines.googleusercontent.com/'
kfp.Client(host=kfp_endpoint).create_run_from_pipeline_func(sample_visualizations_op, arguments={})

After the execution has finished here are the pod annotations ().

  annotations:
    pipelines.kubeflow.org/component_ref: >-
      {"digest":
      "d2462fd80103d923181e62ae718fd2269189e948dd151a7c406facf9e64a72d8"}
    pipelines.kubeflow.org/component_spec: >-
      {"name":
      "Create visualizations", "outputs": [{"name": "Some Url 1", "type":
      "URI"}, {"name": "Some Url 2", "type": "URI"}, {"name": "Some HTML",
      "type": "HTML"}, {"name": "Some Markdown", "type": "Markdown"}, {"name":
      "Some metrics", "type": "Metrics"}]}
    pipelines.kubeflow.org/execution_cache_key: 7c478724f2cd1c3dbe282070d94ca934168fbb6425722c70b756472f2b22d7e8
    pipelines.kubeflow.org/metadata_input_artifact_ids: '[]'
    pipelines.kubeflow.org/metadata_output_artifact_ids: >-
      [{"id": 4310, "name": "Some-HTML", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-HTML.tgz",
      "type": "HTML"}, {"id": 4311, "name": "Some-Markdown", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Markdown.tgz",
      "type": "Markdown"}, {"id": 4312, "name": "Some-Url-1", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Url-1.tgz",
      "type": "URI"}, {"id": 4313, "name": "Some-Url-2", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Url-2.tgz",
      "type": "URI"}, {"id": 4314, "name": "Some-metrics", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-metrics.tgz",
      "type": "Metrics"}, {"id": 4315, "name": "main-logs", "uri":
      "minio://mlpipeline/artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/main.log",
      "type": "NoType"}]
    sidecar.istio.io/inject: 'false'
    workflows.argoproj.io/node-name: create-visualizations-2-jhckp.create-visualizations
    workflows.argoproj.io/outputs: >-
      {"artifacts":[{"name":"create-visualizations-Some-HTML","path":"/tmp/outputs/Some_HTML/data","s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-HTML.tgz"}},{"name":"create-visualizations-Some-Markdown","path":"/tmp/outputs/Some_Markdown/data","s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Markdown.tgz"}},{"name":"create-visualizations-Some-Url-1","path":"/tmp/outputs/Some_Url_1/data","s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Url-1.tgz"}},{"name":"create-visualizations-Some-Url-2","path":"/tmp/outputs/Some_Url_2/data","s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-Url-2.tgz"}},{"name":"create-visualizations-Some-metrics","path":"/tmp/outputs/Some_metrics/data","s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/create-visualizations-Some-metrics.tgz"}},{"name":"main-logs","archiveLogs":true,"s3":{"endpoint":"minio-service.default:9000","bucket":"mlpipeline","insecure":true,"accessKeySecret":{"name":"mlpipeline-minio-artifact","key":"accesskey"},"secretKeySecret":{"name":"mlpipeline-minio-artifact","key":"secretkey"},"key":"artifacts/create-visualizations-2-jhckp/create-visualizations-2-jhckp-2030028307/main.log"}}]}

To get the types we should probably join workflows.argoproj.io/outputs with pipelines.kubeflow.org/component_spec. We can take the Argo outputs, remove the common template name prefix (create-visualizations-) from output names, then normalize and match them with the component_spec outputs.

The text was updated successfully, but these errors were encountered:

Bobgy · 2020-06-12T01:40:17Z

Thanks @Ark-kun for preparing the sample for me! That's super helpful.

I'll put this into post 1.0 planning for now. I think it's low effort and really beneficial, definitely something I want to do.

stale · 2020-09-11T01:42:08Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Bobgy · 2020-09-11T06:12:46Z

/lifecycle frozen

Bobgy · 2021-03-01T10:50:14Z

Moving this to KFP IR backlog, it should work with MLMD artifacts.

Bobgy · 2021-06-03T05:23:17Z

Code example for downloading artifact content:

pipelines/frontend/src/components/MinioArtifactPreview.tsx

Lines 137 to 142 in f3c0c46

    
           const artifactDownloadUrl = Apis.buildReadFileUrl({ 
        
             path: storagePath, 
        
             namespace, 
        
             isDownload: true, 
        
           }); 
        
           const artifactViewUrl = Apis.buildReadFileUrl({ path: storagePath, namespace });

Ark-kun · 2021-06-03T21:07:07Z

Previously I've started exploring solution for this in: https://github.com/Ark-kun/pipelines/commits/Frontend---Visualize-HTML It does not do anything yet. Just getting component spec for a node, so that we can get to the output types.

zijianjoy · 2021-06-03T21:56:36Z

Currently we cannot get visualization type from Artifact type in V2 compatible:

UI rely on type to visualize viewerContent: https://github.com/kubeflow/pipelines/blob/master/frontend/src/lib/OutputArtifactLoader.ts#L84. But we cannot get this information on V2 compatible.

There are a few potential options:

Use schemaTitle/instanceSchema:

pipelines/api/v2alpha1/pipeline_spec.proto

Lines 490 to 498 in 6b87155

    
           oneof kind { 
        
             // The name of the type. The format of the title must be: 
        
             // `<namespace>.<title>.<version>`. 
        
             // Examples: 
        
             //  - `aiplatform.Model.v1` 
        
             //  - `acme.CustomModel.v2` 
        
             // When this field is set, the type must be pre-registered in the MLMD 
        
             // store. 
        
             string schema_title = 1;

Enable componentSpec in v2 compatible:

pipelines/sdk/python/kfp/compiler/_op_to_template.py

Line 291 in cc83e10

if isinstance(op, dsl.ContainerOp) and op._metadata and not op.is_v2:

We need some help to make this decision for exposing original artifact type to UI.

zijianjoy · 2021-06-04T15:27:31Z

Currently pending the decision and implementation of #5798.

(#6349) * test: Update visualization v2 to output HTML and Markdown. * address comment * vis test

) * feat(frontend): Support v2 HTML/Markdown visualization. * improve * shorter name

Ark-kun added the area/frontend label Jun 11, 2020

Ark-kun assigned Bobgy Jun 11, 2020

Bobgy added priority/p0 status/triaged Whether the issue has been explicitly triaged kind/feature labels Jun 12, 2020

Ark-kun mentioned this issue Aug 4, 2020

Kubeflow pipeline artifact visualization #4282

Closed

stale bot added the lifecycle/stale The issue / pull request is stale, any activities remove this label. label Sep 11, 2020

k8s-ci-robot added lifecycle/frozen and removed lifecycle/stale The issue / pull request is stale, any activities remove this label. labels Sep 11, 2020

Ark-kun assigned zijianjoy Apr 7, 2021

Bobgy changed the title ~~Frontend - Add primitive type-based visualizations for HTML, Markdown~~ Artifact type based visualization for HTML, Markdown and etc May 18, 2021

Bobgy removed their assignment May 18, 2021

Bobgy added size/M and removed priority/p0 kind/feature status/triaged Whether the issue has been explicitly triaged labels May 24, 2021

Bobgy mentioned this issue Jun 4, 2021

[sdk] Support artifact custom types in V2 compatible mode #5798

Closed

Bobgy mentioned this issue Jul 5, 2021

Deprecate python based visualization #4643

Closed

zijianjoy mentioned this issue Aug 6, 2021

feat(sdk.v2): Add HTML and Markdown artifact types #6246

Merged

1 task

zijianjoy mentioned this issue Aug 13, 2021

test: Update visualization v2 to output HTML and Markdown. Partial #3970 #6349

Merged

1 task

google-oss-robot pushed a commit that referenced this issue Aug 17, 2021

test: Update visualization v2 to output HTML and Markdown. Partial #3970

5203ecf

(#6349) * test: Update visualization v2 to output HTML and Markdown. * address comment * vis test

zijianjoy mentioned this issue Aug 17, 2021

feat(frontend): Support v2 HTML/Markdown visualization. Fix #3970 #6367

Merged

1 task

google-oss-robot closed this as completed in #6367 Aug 18, 2021

google-oss-robot pushed a commit that referenced this issue Aug 18, 2021

feat(frontend): Support v2 HTML/Markdown visualization. Fix #3970 (#6367

3e83f32

) * feat(frontend): Support v2 HTML/Markdown visualization. * improve * shorter name

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Artifact type based visualization for HTML, Markdown and etc #3970

Artifact type based visualization for HTML, Markdown and etc #3970

Ark-kun commented Jun 11, 2020 •

edited by zijianjoy

Loading

Bobgy commented Jun 12, 2020

stale bot commented Sep 11, 2020

Bobgy commented Sep 11, 2020

Bobgy commented Mar 1, 2021

Bobgy commented Jun 3, 2021

Ark-kun commented Jun 3, 2021

zijianjoy commented Jun 3, 2021

zijianjoy commented Jun 4, 2021

Artifact type based visualization for HTML, Markdown and etc #3970

Artifact type based visualization for HTML, Markdown and etc #3970

Comments

Ark-kun commented Jun 11, 2020 • edited by zijianjoy Loading

Bobgy commented Jun 12, 2020

stale bot commented Sep 11, 2020

Bobgy commented Sep 11, 2020

Bobgy commented Mar 1, 2021

Bobgy commented Jun 3, 2021

Ark-kun commented Jun 3, 2021

zijianjoy commented Jun 3, 2021

zijianjoy commented Jun 4, 2021

Ark-kun commented Jun 11, 2020 •

edited by zijianjoy

Loading