plots: How to display images and plots per step

[daavoo]

Depends on iterative/dvclive#425

In the current demo setup, we override the saved image and plot at the end of each step.

Unless using checkpoints, this makes it impossible to visualize images and plots logged at previous steps. And even using checkpoints the current UI doesn't easily allow to check the image and plot from previous steps (requires Apply to workspace and refreshing the view)

In order to enable visualizing images from previous steps with or without checkpoints, in dvclive we implemented the log_image function in a way that images are saved under a step subfolder (https://dvc.org/doc/dvclive/api-reference/live/log_image#step-updates). (not true anymore, need to reconsider this, edited by @shcheklein)

However, using log_image in the VSCode UI produces a noisy output, as each step image is displayed in an individual row:

I believe that allowing to display "per-step" images and plots is a relevant scenario for VSCode.

---

In tensorboard, logging an image each step gets rendered using a slider:

---

Related iterative/dvc-render#6

[julieg18]

Started working on the UX of the our "image per step" comparison plots! Here's what we've got so far (all in Storybook for now since backend implementation isn't done yet):

I based the slider off of our .vega-actions design that we use for vega smooth plots but we can style it any way we want since this isn't a vega plot.

Mostly Working Demo:

Screen.Recording.2023-07-20.at.12.02.49.PM.mov

What do we think? cc @shcheklein

[dberenbaum]

Would be great to sync the step slider across all images, but otherwise LGTM!

[shcheklein]

What do we think? cc @shcheklein

I thinks it's a perfect start @julieg18 !