Improve tutorial presentation and user experience #9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Increased the font size from 1rem to 1.25rem to make the tutorial title more prominent in the header while maintaining visual balance with the description text. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Removed the h1 headers and top-level descriptions from all tutorial markdown files to avoid duplication with the tutorial header display in the VSCode extension. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Enhanced logging in cache_pipeline.py to clearly show which run uses cache - Added ASCII separators to visually distinguish between Run 1 and Run 2 - Simplified step logging to focus on the key concept - Added explanatory note highlighting that cached steps are skipped entirely - Updated utils.py separator width for consistency These changes make it much clearer to students when caching is happening and how it affects pipeline execution. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull Request Overview
This PR refines tutorial presentation, removes redundant headers, enhances logging clarity, and updates documentation and visuals.
- Increased tutorial header font size for better readability
- Removed redundant H1 headers across markdown tutorials
- Enhanced caching pipeline logs with clearer separators and messages; added tutorial screenshot
Reviewed Changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| utils.py | Extend log separators from 50 to 60 characters |
| assets/main.css | Increase tutorial header font size from 1rem to 1.25rem |
| pipelines/welcome/welcome.md | Update tutorial title text |
| pipelines/visualizations/visualizations.md | Remove H1 header, add dashboard screenshot, adjust text wrapping |
| pipelines/tagging/tagging.md | Remove H1 header, adjust text wrapping |
| pipelines/tagging/tagged_pipeline.py | Remove module docstring |
| pipelines/stepIO/stepIO.md | Remove H1 header, adjust text wrapping |
| pipelines/retries/robust_pipeline.py | Remove module docstring |
| pipelines/retries/retries.md | Remove H1 header, adjust text wrapping |
| pipelines/parameters/parameters.md | Remove H1 header |
| pipelines/metadata/metadata.md | Remove H1 header |
| pipelines/helloWorld/helloWorld.md | Remove H1 header, adjust text wrapping |
| pipelines/fanOut/fan_pipeline.py | Remove module docstring |
| pipelines/fanOut/fanOut.md | Remove H1 header, adjust text wrapping |
| pipelines/completion/completion.md | Refine congratulations text |
| pipelines/caching/caching.md | Remove H1 header, adjust text wrapping |
| pipelines/caching/cache_pipeline.py | Enhance caching run logs, update step log messages |
Comments suppressed due to low confidence (4)
pipelines/tagging/tagged_pipeline.py:1
- [nitpick] The module docstring was removed, which reduces clarity of this example. Consider retaining or updating it to document the pipeline's purpose and usage.
"""Artifact Tagging Demonstration
pipelines/retries/robust_pipeline.py:1
- [nitpick] The example docstring for this module was removed; consider preserving it to explain the pipeline's behavior and usage for readers.
"""Demonstrates automatic retries *and* a failure hook.
pipelines/fanOut/fan_pipeline.py:1
- [nitpick] The top-level docstring was removed; adding it back would help explain the parallel fan-out/fan-in example to users.
"""Shows parallel fan-out (multiple identical steps) and a fan-in step that
pipelines/caching/cache_pipeline.py:15
- The log message indicating computation completion was removed; consider adding it back before returning so that users can distinguish between compute and cache runs in the logs.
logger.info("Computation completed!")
znegrin
approved these changes
Jun 13, 2025
- Replace single "Completed" button with split design showing both completion status and dashboard link - Add "Open Dashboard" button that appears next to green "Completed" button after pipeline runs - Capture actual dashboard URL from Python output to link directly to specific run - Style dashboard button with secondary VSCode theme for visual hierarchy - Make completed button non-interactive while keeping visual feedback This improves discoverability of the ZenML dashboard, especially for tutorials that produce interesting artifacts like visualizations. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change button text from "Open Dashboard" to "View in dashboard" for consistency with CLI - Fix button height to match other footer buttons (40px) - Adjust padding and font size accordingly 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Set height to 38px with 1px borders for 40px total visual height - Add box-sizing: border-box to include borders in height calculation - Adjust padding to 9px 16px for proper vertical centering - Match font-size (14px) with other footer buttons 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace hardcoded /tmp/ path with os.tmpdir() for cross-platform support - Ensures the extension works properly on Windows and systems with custom temp directories - Consistent with other temp file handling in the codebase 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace generic Function type with specific callback signatures - onSuccessCallback now properly typed as (dashboardUrl?: string) => void - onErrorCallback typed as () => void - Improves type safety and IDE autocomplete support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove computed but unused pipelineName variable - Simplify fallback case to just return generic pipelines page - Cleaner code without dead variable computation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove the larger .dashboard-button variant that's no longer used - Keep only .dashboard-button-small which is actually used in the markup - Reduces CSS file size by 42 lines of unused code 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Improves maintainability by allowing multiple event handlers and preventing accidental overwriting of existing listeners. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
safoinme
approved these changes
Jun 13, 2025
Add button to view dashboard after successful pipeline run / completion
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR contains several enhancements to improve the tutorial experience and presentation:
• Visual improvements: Increased tutorial header font size from 1rem to 1.25rem for better readability
• Content cleanup: Removed redundant h1 headers from tutorial markdown files to reduce visual clutter
• Enhanced logging: Improved caching pipeline with clearer logging output and visual separators to better demonstrate cache behavior
• Documentation refinements: Updated congratulations text and cleaned up code docstrings for clarity
• Visual aids: Added dashboard screenshot to visualizations tutorial to show expected output
These changes make the tutorial more polished and user-friendly while maintaining all existing functionality.
Test plan
🤖 Generated with Claude Code