feat: Guided Tour - Subgraphs

[camielvs]

Description

The registered Subgraphs guided tour — a 16-step walkthrough of what subgraphs are, how to navigate them, and how to unpack and re-create them. Uses the subgraph interaction mechanics from #2365 and boots into a temporary tour pipeline seeded from a new Intro: Subgraphs example.

The tour goes full circle: explore three existing subgraphs → dive in and back out → unpack one into its tasks → re-bundle those tasks into a brand-new subgraph.

What's in the tour

1. Welcome — what a subgraph is (centered popover, no spotlight)
2. Canvas — the three subgraph tasks ringed: Data Preparation, Training, Evaluation
3. Interactive — double-click Data Preparation to look inside (navigate-into-subgraph)
4. Breadcrumbs — you're one level deep; crumbs show your location in the tree
5. Pipeline Structure window — full tree navigation (restores the pipeline-tree dock window)
6. Input nodes inside a subgraph → become the parent task's arguments
7. Output nodes inside a subgraph → become the parent task's outputs
8. Interactive — click Root in the breadcrumbs to return to the top level (navigate-to-root)
9. Runtime behavior — subgraphs show an aggregate status, have no logs of their own, and can be nested (informational)
10. Intro to unpacking (informational)
11. Interactive — click the Data Preparation task to select it (select-task)
12. Interactive — open the Node menu and choose Unpack Subgraph (unpack-subgraph)
13. After unpack — its inner tasks Generate and Split now sit at the top level, already wired in
14. Interactive — multi-select Generate + Split (Cmd/Ctrl-click or box-select) (multi-select-tasks, min 2)
15. Interactive — use the selection toolbar's Create Subgraph to re-bundle them (create-subgraph)
16. Wrap-up — when to reach for subgraphs

Interactive steps fall back to non-interactive copy when the prompted state is already satisfied (consistent with #2306 / #2312).

DOM anchors & assets added in this PR

Following the convention that tour-specific anchors ship with the tour:

• Seed pipeline — public/tour-pipelines/Subgraphs.pipeline.component.yaml (Intro: Subgraphs: three subgraph tasks — Data Preparation, Training, Evaluation — each wrapping its own internal graph).
• SubgraphBreadcrumbsView — data-tour="subgraph-breadcrumbs", plus data-tour-crumb (root / ancestor) and data-tour-crumb-index so steps can ring the Root crumb.
• NodeMenu — data-tour="node-menu-trigger" / node-menu-content / node-menu-unpack for the Unpack Subgraph step.
• SelectionToolbar — data-tour="create-subgraph-popover" (reuses existing data-testid="selection-toolbar" / selection-create-subgraph).
• tours.json — registers the Subgraphs tour in the Learning Hub.

Interactions consumed (defined in #2365): navigate-into-subgraph, navigate-to-root, select-task, unpack-subgraph, multi-select-tasks, create-subgraph.

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/583

Depends on #2365 (subgraph interaction mechanics) and the framework stack below it.

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots

Test Instructions

Dashboard → Learning Hub → Featured Tours → "Guided Tour: Subgraphs". Walk all 16 steps end-to-end.

Interactive steps

• Step 3 (navigate-into-subgraph) — double-clicking Data Preparation advances; double-clicking another subgraph should not (it's gated to that task name).
• Step 8 (navigate-to-root) — clicking Root in the breadcrumbs returns to the top and advances.
• Step 11 (select-task) — only selecting Data Preparation advances.
• Step 12 (unpack-subgraph) — advances after Node menu → Unpack Subgraph; the highlight should track the menu trigger/content and ring the Unpack item.
• Step 14 (multi-select-tasks) — selecting both Generate and Split (Cmd/Ctrl-click or box-select) advances.
• Step 15 (create-subgraph) — the floating toolbar's Create Subgraph → name → confirm advances.

Navigation / re-measurement

• Steps anchored to the canvas should keep their spotlight aligned after navigating into/out of a subgraph (the viewport re-measure from feat: Guided Tours Framework (Subgraphs) #2365).
• Step 5 — the Pipeline Structure window should be restored if hidden/minimized, and the highlight should land on the rendered tree (not a not-yet-mounted element).

Tour-mode regressions

• ESC, clicks on the spotlight mask, and the (hidden) close button are all no-ops; the only mid-tour exit is Exit Tour.
• Refresh mid-tour — resumes on the same step (/tour/subgraphs?step=N) with canvas state intact (session storage from feat: Guided Tours Ephemeral Pipelines #2334).
• Done on the final step returns to /learn/tours; the tour pipeline does not leak into the regular pipelines list.

Additional Comments

The seed pipeline is intentionally shallow (one level of nesting per subgraph) so the tour stays legible. The mechanics (#2365) and the framework stack below it need to land first for this to run.

[github-actions]

🎩 Preview

A preview build has been created at: 06-03-feat_guided_tour_-_subgraphs/303d254

[camielvs]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat: Learning Hub - Milestone 2 #2416
• feat: Guided Tours Cleanup #2417
• feat: Guided Tours E2E Tests #2415
• feat: Guided Tours Completion Metrics #2412
• feat: Guided Tour - Secrets #2406
• feat: Guided Tours Framework (Secrets) #2405
• feat: Guided Tour - Subgraphs #2366 👈 (View in Graphite)
• feat: Guided Tours Framework (Subgraphs) #2365
• feat: Guided Tour - First Pipeline #2312
• feat: Guided Tours Framework (First Pipeline) #2347
• feat: Guided Tour - Navigating the Editor #2306 : 1 other dependent PR (#2307 )
• feat: Guided Tours Framework (Navigating the Editor) #2299
• feat: Guided Tours End Screen #2339
• feat: Guided Tours Ephemeral Pipelines #2334
• feat: Guided Tours Custom Navigation #2340
• feat: Guided Tours Foundation #2348
• feat: Learning Hub Guided Tours #2297
• feat: Learning Hub - Milestone 1 #2341
• feat: Learning Hub Tip of the Day #2292
• feat: Learning Hub Tip Browser #2291
• feat: Learning Hub Example Pipelines #2283
• feat: Learning Hub Documentation & FAQ #2282
• feat: Learning Hub Dashboard #2281
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

🤖 This is an AI-generated code review comment.

data-tour-crumb-index is an unconsumed anchor

subgraphs.tour.json only selects [data-tour-crumb="root"] (the navigate-to-root step), and nothing reads data-tour-crumb-index — not the tour JSON (0 references) and not EditorTourBridge (no data-tour-crumb reader; navigate-to-root/navigate-into-subgraph are detected via subgraph-path logic). So the per-crumb index is a dead anchor today.

(The sibling data-tour-crumb="root"/"ancestor" is fine — "root" is used and "ancestor" is just the natural complement of the same ternary. Same dead-data-tour-* theme as #2306/#2312.)

Fix: drop data-tour-crumb-index until a step targets a specific ancestor level by index, or keep it only if it's deliberately reserved for E2E selectors (worth a one-line note if so).