Representation of pipelines in a web-app
I am working on an application that allows users to create visual "workflows" for transcoding media files. I have attached a sample image of a pipeline.
After users create a pipeline, they can create an "execution". For example, a user would execute the pipeline on a file uploaded from their computer.
The UX issue I am having is how to display a list of executions. My first instinct is to show the graph as the page header, with a list of executions below it. When a user clicks on an execution, they get taken to the page showing that particular run. The attached images demonstrate what I am talking about. Let the first image be "Pipeline Page" and the second image be "Execution Page", for clarity.
However, the specific problem I am having is that the pipeline may be updated between executions (e.g. user runs an execution on the graph, then goes back and changes the video encoder). In this case, the page header in "Pipeline Page" will show the pipeline as it currently exists, but clicking into its "Execution Page" may show a different pipeline. Due to this, I am apprehensive about showing an image of the pipeline as the header on "Pipeline Page".
One thing I was thinking of doing is vertical timeline view for "Pipeline Page", as shown here: https://codyhouse.co/gem/vertical-timeline/. Each timeline item would show an image of the pipeline as it existed when that execution was started. What are your thoughts on this?
Thank you so much!