Visualizations in the Argo UI

[Atharex]

Summary

Would like to have functionality, that can show generated visualizations (images, videos) inside a workflow in the Argo UI (like Metaflow cards)
https://docs.metaflow.org/metaflow/visualizing-results
https://towardsdatascience.com/integrating-pythonic-visual-reports-into-ml-pipelines-a163d150ed04

It could be integrated in some way with a step, or be a separate step, executed after the necessary artifacts are generated and prepare a HTML/javascript template for visualization.
The visualizations would be available either directly on the "visualization node" in workflow details, or shown under details in the workflows overview page, where one could compare visualizations of multiple workflow runs

Use Cases

• Comparing ML pipeline runs from generated charts
• Visualizing end results of ML pipeline runs
• Debugging workflows where visual artifacts are the most helpful

---

Message from the maintainers:

Love this enhancement proposal? Give it a 👍. We prioritise the proposals with the most 👍.

[terrytangyuan]

Usually, users store results from the steps as artifacts in other storages so you can inspect them from there. It's flexible in terms of the format of the report and how you want to render the report, e.g. static HTML reports or dynamic dashboards like TensorBoard.

It might be useful to allow HTML/JavaScript templates to be rendered directly in Argo Workflows UI but this would be limited to static reports.

[alexec]

I've thought this would be a neat feature to add. Currently, it is hard to view output artifacts in the user interface. It should be possible to click on them and view them. E.g. in a popup window.

[terrytangyuan]

I've thought this would be a neat feature to add. Currently, it is hard to view output artifacts in the user interface. It should be possible to click on them and view them. E.g. in a popup window.

I agree that this would be a great usability enhancement.

[savingoyal]

We are currently integrating Metaflow with Argo - that would ensure that this functionality is natively available for Argo workflows constructed through Metaflow. Once we have the integration available, I would love to check in and figure out ways to make it a first-class citizen within the Argo UI.

[terrytangyuan]

We are currently integrating Metaflow with Argo - that would ensure that this functionality is natively available for Argo workflows constructed through Metaflow. Once we have the integration available, I would love to check in and figure out ways to make it a first-class citizen within the Argo UI.

That's great! Please keep us posted on how the integration goes on Netflix/metaflow#50!

[jessesuen]

With respect to a UI integration into Argo Server UI, I can say that with Argo CD, we were able to make the UI dynamically load UI components using a new extension mechanism.

Example of this view can be seen below. This UI is not part of argo CD codebase, it's dynamically loaded at runtime:
https://cd.demo.akuity.io/applications/istio-canary?resource=&node=argoproj.io%2FRollout%2Fdemo-istio-canary%2Fistio-canary%2F0&tab=extension

Perhaps we should consider a similar approach on extending the workflow UI.

[alexec]

See #7177

[alexec]

The argo-server provides an endpoint to get artifacts from a workflow. Click on a node, then choose "inputs and outputs", then choose your output artifact.

Do we need a better way to surface this is the UI? Could someone provide an example?

[alexec]

[alexec]

Showing HTML page with images.

[alexec]

Kind of amazed how popular JSON is.

[alexec]

Any conventional text is supported easily (browsers already support them). JSON is harder, but we already have JSON viewer in the code base (uses Monaco).

[alexec]

Closing out on this weeks work. The UI will allow you display artifacts in the DAG which you can click on. This does not meet all the requests from this issue. Specifically:

• We don't provide any special file type like a ModelCard, but it does support HTML. Given than any ModelCard would need to be rendered into HTML, I think this is a good step.
• We could support ModelCards or UI extensions in the future.
• It makes it easier, but not trivially easy, to compare artifacts between workflow runs. You must exit the workflow to the template list. It is a few clicks.

[savingoyal]

@alexec Given that model cards are HTML files, we have pretty much everything to support them inside Argo UI. We will follow up when we are ready to spike the effort.