Add documentation for timeline view (#3948)

* Add image for timeline view

* Update FAQ for dynamic pipelines and templates

Clarified the FAQ section by updating the links for creating dynamic pipelines and using templates with ZenML. The changes ensure that users have access to the most relevant and up-to-date resources for these topics.

* Update documentation for dashboard features

Enhanced the documentation for the ZenML dashboard by clarifying the visualization options available, including the addition of the Timeline view for better performance analysis. Updated references to ensure users can easily navigate and understand the dashboard functionalities.

Fixes #3945

* Update dashboard features documentation

Expanded the documentation for ZenML's dashboard features by detailing the two visualization options: DAG View and Timeline View. Clarified their purposes, benefits, and use cases to enhance user understanding of pipeline analysis and performance optimization.

Fixes #3945

* Replace timeline view image

* Update image reference in getting started guide

Replaced the image reference for the timeline view in the "Your First AI Pipeline" documentation. This update ensures that users see the correct visual representation of the document analysis pipeline DAG in the ZenML dashboard.

Fixes #3945

Author: strickvl

docs/book/.gitbook/assets/dashboard-timeline-view.png

@@ -114,9 +114,11 @@ zenml login --local
 ```
 
 In the dashboard, open the latest run to explore:
-- **Steps** like `ingest_document_step`, `analyze_document_step`, `render_report_step`
-- **Artifacts** like `DocumentAnalysis` with summary, keywords, sentiment, readability score
-- **Metadata** such as latency, token usage, and model name (when in LLM mode)
+* **Steps** like `ingest_document_step`, `analyze_document_step`, `render_report_step`
+* **Artifacts** like `DocumentAnalysis` with summary, keywords, sentiment, readability score
+* **Metadata** such as latency, token usage, and model name (when in LLM mode)
+
+Tip: Switch to the [Timeline view](../how-to/dashboard/dashboard-features.md#timeline-view) to compare step durations, spot bottlenecks, and understand parallel execution at a glance.
 
 <figure>
   <img src="../.gitbook/assets/your_first_pipeline_analysis.png" alt="Document analysis pipeline DAG in ZenML dashboard">
@@ -159,4 +161,5 @@ Key files to explore:
 - Add guardrails/structured outputs via Pydantic models
 - Add retrieval or additional steps for more advanced analysis
 
-Looking for the code? Browse the complete example at `examples/minimal_agent_production`.
+Looking for the code? Browse the complete example at
+`examples/minimal_agent_production`.

docs/book/getting-started/your-first-ai-pipeline.md

@@ -15,17 +15,43 @@ The ZenML dashboard serves as a visual control center for your ML operations, of
 
 The open-source version of ZenML includes a robust set of dashboard features that provide significant value for individual practitioners and teams.
 
-### Pipeline Visualization
+### Pipeline Visualization Options
 
-The dashboard renders your pipeline as an interactive Directed Acyclic Graph (DAG), making it easy to understand the workflow structure and dependencies between steps.
+ZenML offers two complementary ways to visualize pipeline executions: the **DAG View** and the **Timeline View**. Each is optimized for different aspects of pipeline analysis, helping you understand both the structure and performance of your workflows.
+
+#### DAG View
+
+**Purpose**: Visualizes the logical structure and dependencies of your pipeline.
+
+The DAG (Directed Acyclic Graph) view displays your pipeline as a network graph, showing how data flows between steps. It explicitly visualizes parallel branches, artifact connections, and the overall architecture of your workflow.
 
 ![Pipeline DAG visualization](../../.gitbook/assets/dashboard-v2-pipeline-dag.png)
 
-This visualization enables you to:
-- See the execution flow between pipeline steps
-- Identify bottlenecks or failures quickly
-- Understand dependencies between different components
-- Track pipeline execution status in real-time
+This view is best for understanding pipeline architecture, tracing data lineage, and debugging dependency issues. While comprehensive, it can become visually dense in pipelines with a very large number of steps.
+
+#### Timeline View
+
+**Purpose**: Visualizes the temporal execution and performance of your pipeline.
+
+The Timeline View offers a Gantt chart-style visualization where each step is represented by a horizontal bar whose length corresponds to its execution duration. This view excels at performance analysis, making it easy to spot bottlenecks and understand the runtime characteristics of your pipeline.
+
+![Pipeline Timeline View](../../.gitbook/assets/dashboard-timeline-view.png)
+
+This view is ideal for performance optimization, identifying bottlenecks, and monitoring pipeline efficiency, especially for large pipelines. For pipelines with a high number of steps (e.g., over 100), ZenML automatically defaults to the Timeline View to ensure a responsive and clear user experience.
+
+These views are complementary and work best when used together. The DAG view helps you understand **what** your pipeline does and **how** it's structured, while the Timeline view shows you **when** things happen and **where** to focus optimization efforts.
+
+**Use the DAG View when you need to:**
+- Understand how data flows through your pipeline.
+- Debug issues related to step dependencies.
+- Explain the pipeline architecture to stakeholders.
+- Verify that parallel execution paths are configured correctly.
+
+**Use the Timeline View when you need to:**
+- Identify performance bottlenecks.
+- Optimize pipeline execution time.
+- Compare execution duration across steps.
+- Get a quick overview of which steps dominate runtime.
 
 ```python
 from zenml import pipeline
@@ -289,6 +315,6 @@ Whether you're using the open-source version or ZenML Pro, the dashboard provide
 
 {% hint style="info" %}
 **OSS vs Pro Feature Summary:**
-* **ZenML OSS:** Includes pipeline DAG visualization, artifact visualization, integration-specific visualizations, run history, and step execution details
+* **ZenML OSS:** Includes pipeline DAG and timeline visualizations, artifact visualization, integration-specific visualizations, run history, and step execution details
 * **ZenML Pro:** Adds model control plane, experiment comparison tools, and comprehensive role-based access control (RBAC) with team management capabilities
 {% endhint %}

docs/book/how-to/dashboard/dashboard-features.md

@@ -100,7 +100,7 @@ You can run a pipeline by simply calling the function:
 simple_ml_pipeline()
 ```
 
-The run is automatically logged to the ZenML dashboard where you can view the DAG and associated metadata.
+The run is automatically logged to the ZenML dashboard where you can view the DAG or [Timeline view](../dashboard/dashboard-features.md#timeline-view) and associated metadata.
 
 ## End-to-End Example
 

docs/book/how-to/steps-pipelines/steps_and_pipelines.md

@@ -81,7 +81,7 @@ To reset your ZenML client, you can run `zenml clean` which will wipe your local
 
 #### How do I create dynamic pipelines and steps?
 
-Please read our [general information on how to compose steps + pipelines together](https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline) to start with. You might also find the code examples in [our guide to implementing hyperparameter tuning](../user-guide/tutorial/hyper-parameter-tuning.md) which is related to this topic.
+Please read our [general information on how to compose steps + pipelines together](https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline) to start with. You might also find the code examples in [our guide to implementing hyperparameter tuning](https://docs.zenml.io/user-guides/tutorial/hyper-parameter-tuning) which is related to this topic.
 
 #### How do I use templates and starter code with ZenML?
 

docs/book/reference/faq.md

@@ -94,7 +94,7 @@ Once the pipeline has finished its execution, use the `zenml login --local` comm
 
 <figure><img src="../../.gitbook/assets/landingpage.png" alt=""><figcaption><p>Landing Page of the Dashboard</p></figcaption></figure>
 
-Usually, the dashboard is accessible at [http://127.0.0.1:8237/](http://127.0.0.1:8237/). Log in with the default username **"default"** (password not required) and see your recently run pipeline. Browse through the pipeline components, such as the execution history and artifacts produced by your steps. Use the DAG visualization to understand the flow of data and to ensure all steps are completed successfully.
+Usually, the dashboard is accessible at [http://127.0.0.1:8237/](http://127.0.0.1:8237/). Log in with the default username **"default"** (password not required) and see your recently run pipeline. Browse through the pipeline components, such as the execution history and artifacts produced by your steps. Use the DAG or Timeline visualization to understand the flow of data and to ensure all steps are completed successfully. ZenML offers two visualization modes: the **DAG view** for understanding pipeline structure and dependencies, and the **Timeline view** for analyzing execution performance. For pipelines with many steps, the Timeline view provides a cleaner interface for performance optimization. [Learn more](../../how-to/dashboard/dashboard-features.md#timeline-view).
 
 <figure><img src="../../.gitbook/assets/DAGofRun.png" alt=""><figcaption><p>Diagram view of the run, with the runtime attributes of step 2.</p></figcaption></figure>
 
@@ -104,7 +104,7 @@ If you have closed the browser tab with the ZenML dashboard, you can always reop
 
 ## Understanding steps and artifacts
 
-When you ran the pipeline, each individual function that ran is shown in the DAG visualization as a `step` and is marked with the function name. Steps are connected with `artifacts`, which are simply the objects that are returned by these functions and input into downstream functions. This simple logic lets us break down our entire machine learning code into a sequence of tasks that pass data between each other.
+When you ran the pipeline, each individual function that ran is shown in the run view (DAG or Timeline) as a `step` and is marked with the function name. Steps are connected with `artifacts`, which are simply the objects that are returned by these functions and input into downstream functions. This simple logic lets us break down our entire machine learning code into a sequence of tasks that pass data between each other.
 
 The artifacts produced by your steps are automatically stored and versioned by ZenML. The code that produced these artifacts is also automatically tracked. The parameters and all other configuration is also automatically captured.