TangleML · camielvs · May 22, 2026
@@ -0,0 +1,110 @@
+{
+  "id": "navigating-the-editor",
+  "displayName": "Guided Tour: Navigating the Editor",
+  "requiresEditor": true,
+  "starterPipelineUrl": "example-pipelines/Intro-Hello World.pipeline.component.yaml",
+  "steps": [
+    {
+      "selector": "[data-tour-anchor=\"no-spotlight\"]",
+      "content": "Welcome to the pipeline editor! This quick tour will show you around so you know where to find everything: the menu bar, canvas, dockable panels, and floating windows.",
+      "position": "center"
+    },
+    {
+      "selector": "[data-tour=\"editor-top-bar-left\"]",
+      "highlightedSelectors": [
+        "[data-tour=\"editor-top-bar-left\"]",
+        "[data-tour=\"editor-menu-items\"]"
+      ],
+      "content": "The top bar holds your pipeline name and editor menus.\n\nEach menu groups one type of command: **File** for pipeline operations, **View** for layout presets, **Runs** for submissions, **Components** for your libraries, and **Windows** for panels. A **Node** menu also appears here when you have a task selected.",
+      "position": "bottom"
+    },
+    {
+      "selector": "[data-tour=\"editor-top-bar-actions\"]",
+      "content": "Over on the right are your quick actions. Submit a run, check autosave status, jump to Settings, or open the documentation.",
+      "position": "bottom"
+    },
+    {
+      "selector": "[data-tour=\"editor-canvas\"]",
+      "content": "This is your workspace. Drag components onto it, connect tasks by linking their input and output handles, and pan or zoom around larger graphs.\n\nUseful controls sit along the bottom: a **minimap** in the bottom-left, and **viewport controls** with **undo/redo** in the bottom-right.",
+      "position": "center",
+      "resizeObservables": ["[data-tour=\"editor-canvas\"]"]
+    },
+    {
+      "selector": "[data-dock-area=\"left\"]",
+      "highlightedSelectors": [
+        "[data-dock-window=\"component-library\"]",
+        "[data-dock-window-content=\"component-library\"]",
+        "[data-dock-window=\"runs-and-submission\"]",
+        "[data-dock-window-content=\"runs-and-submission\"]",
+        "[data-dock-window=\"recent-runs\"]",
+        "[data-dock-window-content=\"recent-runs\"]"
+      ],
+      "content": "The left sidebar holds your docked panels.\n\n**Components** lets you browse and drag tasks onto the canvas. **Runs and submission** lets you submit your pipeline, and **Recent runs** shows the latest runs of this pipeline.",
+      "position": "right",
+      "resizeObservables": ["[data-dock-area=\"left\"]"]
+    },
+    {
+      "selector": "[data-dock-area=\"right\"]",
+      "content": "The right sidebar holds Pipeline Details and its properties. Set the pipeline description, tags, and notes here, and review any validation warnings.",
+      "resizeObservables": ["[data-dock-area=\"right\"]"]
+    },
+    {
+      "selector": "[data-tour-node=\"task\"][data-task-name=\"Greet\"]",
+      "content": "Try clicking the **Greet** task on the canvas to select it.",
+      "position": "top",
+      "stepInteraction": true,
+      "interaction": "select-task"
+    },
+    {
+      "selector": "[data-window-id=\"context-panel\"]",
+      "position": "left",
+      "highlightedSelectors": [
+        "[data-window-id=\"context-panel\"]",
+        "[data-dock-window-content=\"context-panel\"]"
+      ],
+      "mutationObservables": [
+        "[data-window-id=\"context-panel\"]",
+        "[data-dock-window-content=\"context-panel\"]"
+      ],
+      "resizeObservables": [
+        "[data-window-id=\"context-panel\"]",
+        "[data-dock-window-content=\"context-panel\"]"
+      ],
+      "targetWindowId": "context-panel",
+      "content": "Selecting a task opens its Task Properties panel here in the right sidebar. From this panel you can edit input arguments, configure node settings, define annotations, and inspect the component spec."
+    },
+    {
+      "selector": "[data-window-id=\"context-panel\"]",
+      "content": "Windows are flexible. Try grabbing the Task Properties header and dragging it out of the dock to float it as its own window.",
+      "position": "left",
+      "stepInteraction": true,
+      "interaction": "undock-window",
+      "targetWindowId": "context-panel",
+      "fallbackContent": "Windows are flexible. Try grabbing the Task Properties header and dragging it around the canvas."
+    },
+    {
+      "selector": "[data-window-id=\"context-panel\"]",
+      "content": "Nice! Now drag that floating window back onto the left or right sidebar to re-dock it.",
+      "position": "left",
+      "stepInteraction": true,
+      "interaction": "redock-window",
+      "targetWindowId": "context-panel",
+      "fallbackContent": "Windows can be docked in either sidebar. Create the perfect layout that suits you!"
+    },
+    {
+      "selector": "[data-tracking-id=\"v2.pipeline_editor.windows_menu\"]",
+      "highlightedSelectors": [
+        "[data-tracking-id=\"v2.pipeline_editor.windows_menu\"]",
+        "[data-tour=\"windows-menu-content\"]",
+        "[data-tour=\"windows-menu-submenu-content\"]"
+      ],
+      "mutationObservables": [
+        "[data-tour=\"windows-menu-content\"]",
+        "[data-tour=\"windows-menu-submenu-content\"]"
+      ],
+      "content": "Last one. If you ever need to reconfigure your layout, the Windows menu lets you toggle panels on or off and apply a layout preset.",
+      "position": "right",
+      "stepInteraction": true
+    }
+  ]
+}
@@ -105,7 +105,10 @@ const PipelineEditor = withSuspenseWrapper(
             data-testid="editor-v2"
           >
             <DockArea side="left" />
-            <div className="relative flex-1 min-w-0 h-full">
+            <div
+              className="relative flex-1 min-w-0 h-full"
+              data-tour="editor-canvas"
+            >
               <FlowCanvas
                 key={activeSpec?.$id ?? "root"}
                 spec={activeSpec}

@@ -68,6 +68,7 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
     <div
       className="relative w-full bg-stone-900 px-3 py-1 md:px-4"
       style={{ height: `${TOP_NAV_HEIGHT}px` }}
+      data-tour="editor-top-bar"
     >
       <InlineStack
         align="space-between"
@@ -81,6 +82,7 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
           align="start"
           blockAlign="center"
           className="min-w-0"
+          data-tour="editor-top-bar-left"
         >
           <Link
             href="/"
@@ -141,7 +143,11 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
                 />
               )}
 
-              <InlineStack wrap="nowrap" blockAlign="center">
+              <InlineStack
+                wrap="nowrap"
+                blockAlign="center"
+                data-tour="editor-menu-items"
+              >
                 <FileMenu />
                 <ViewMenu />
                 <RunsMenu />
@@ -172,6 +178,7 @@ export const EditorMenuBar = observer(function EditorMenuBar() {
           wrap="nowrap"
           blockAlign="center"
           className="shrink-0"
+          data-tour="editor-top-bar-actions"
         >
           {displayMenu && (
             <>

@@ -35,14 +35,34 @@ export const WindowsMenu = observer(function WindowsMenu() {
     windows.applyViewPreset(preset);
   };
 
+  // Notify any listener (e.g. the Learning Hub tour) that the menu has
+  // opened or closed so they can re-measure highlight regions for portal-rendered
+  // dropdown content. On close we also wait past Radix's exit animation
+  // (~150ms zoom/fade out) before re-measuring, since the content is still
+  // mounted with non-zero bounds while animating away.
+  const notifyOpenStateChange = (open: boolean) => {
+    requestAnimationFrame(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    if (!open) {
+      setTimeout(() => {
+        window.dispatchEvent(new Event("resize"));
+      }, 250);
+    }
+  };
+
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={notifyOpenStateChange}>
       <DropdownMenuTrigger asChild>
         <MenuTriggerButton {...tracking("v2.pipeline_editor.windows_menu")}>
           Windows
         </MenuTriggerButton>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={2}>
+      <DropdownMenuContent
+        align="start"
+        sideOffset={2}
+        data-tour="windows-menu-content"
+      >
         {sortedWindows.map((win) => (
           <DropdownMenuCheckboxItem
             key={win.id}
@@ -67,12 +87,12 @@ export const WindowsMenu = observer(function WindowsMenu() {
           </DropdownMenuCheckboxItem>
         ))}
         <DropdownMenuSeparator />
-        <DropdownMenuSub>
+        <DropdownMenuSub onOpenChange={notifyOpenStateChange}>
           <DropdownMenuSubTrigger>
             <Icon name="LayoutDashboard" size="sm" />
             Views
           </DropdownMenuSubTrigger>
-          <DropdownMenuSubContent>
+          <DropdownMenuSubContent data-tour="windows-menu-submenu-content">
             {VIEW_PRESETS.map((preset) => (
               <DropdownMenuItem
                 key={preset.label}

@@ -170,7 +170,7 @@ export function EditorTourBridge() {
     if (interaction === "select-task") {
       const handleClick = (event: MouseEvent) => {
         const target = event.target as Element | null;
-        if (target?.closest(".react-flow__node")) {
+        if (target?.closest('[data-tour-node="task"]')) {
           advance();
         }
       };

@@ -27,7 +27,10 @@ export const CanvasUndoRedo = observer(function CanvasUndoRedo() {
   };
 
   return (
-    <div className="absolute right-16 bottom-4 z-10 flex gap-1">
+    <div
+      className="absolute right-16 bottom-4 z-10 flex gap-1"
+      data-tour="canvas-undo-redo"
+    >
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>

@@ -64,11 +64,17 @@ export const inputManifestBase: ManifestPartial = {
 
   buildNodes(spec) {
     return [...spec.inputs].map((input, index) =>
-      createEntityNode(input, "input", ioDefaultPosition(index, -200), {
-        entityId: input.$id,
-        ioType: "input",
-        name: input.name,
-      } satisfies IONodeData),
+      createEntityNode(
+        input,
+        "input",
+        ioDefaultPosition(index, -200),
+        {
+          entityId: input.$id,
+          ioType: "input",
+          name: input.name,
+        } satisfies IONodeData,
+        { "data-task-name": input.name },
+      ),
     );
   },
 

@@ -59,11 +59,17 @@ export const outputManifestBase: ManifestPartial = {
 
   buildNodes(spec) {
     return [...spec.outputs].map((output, index) =>
-      createEntityNode(output, "output", ioDefaultPosition(index, 800), {
-        entityId: output.$id,
-        ioType: "output",
-        name: output.name,
-      } satisfies IONodeData),
+      createEntityNode(
+        output,
+        "output",
+        ioDefaultPosition(index, 800),
+        {
+          entityId: output.$id,
+          ioType: "output",
+          name: output.name,
+        } satisfies IONodeData,
+        { "data-task-name": output.name },
+      ),
     );
   },
 

@@ -72,10 +72,16 @@ export const taskManifestBase: ManifestPartial = {
 
   buildNodes(spec) {
     return [...spec.tasks].map((task, index) =>
-      createEntityNode(task, "task", taskDefaultPosition(index), {
-        entityId: task.$id,
-        name: task.name,
-      } satisfies TaskNodeData),
+      createEntityNode(
+        task,
+        "task",
+        taskDefaultPosition(index),
+        {
+          entityId: task.$id,
+          name: task.name,
+        } satisfies TaskNodeData,
+        { "data-task-name": task.name, "data-tour-node": "task" },
+      ),
     );
   },
 

@@ -47,6 +47,7 @@ export function createEntityNode(
   nodeType: string,
   fallback: { x: number; y: number },
   data: Record<string, unknown>,
+  domAttributes?: Record<string, string>,
 ): Node {
   const position = entity.annotations.get(EDITOR_POSITION_ANNOTATION) as {
     x: number;
@@ -59,6 +60,7 @@ export function createEntityNode(
     position: resolvePosition(position, fallback),
     zIndex,
     data,
+    domAttributes,
   };
 }
 

@@ -134,6 +134,7 @@ export const DockedWindow = observer(function DockedWindow() {
         <div
           ref={panelRef}
           data-dock-window={model.id}
+          data-window-id={model.id}
           className={cn(
             "group/window w-full sticky text-left",
             (isDragging || isResizing) && "select-none",
@@ -170,7 +171,10 @@ export const DockedWindow = observer(function DockedWindow() {
         </div>
       </CollapsibleTrigger>
 
-      <CollapsibleContent className="w-full">
+      <CollapsibleContent
+        className="w-full"
+        data-dock-window-content={model.id}
+      >
         <div
           className={cn(
             "w-full bg-white text-gray-900",

@@ -187,6 +187,7 @@ export const FloatingWindow = observer(function FloatingWindow() {
     <>
       <div
         ref={panelRef}
+        data-window-id={model.id}
         className={containerVariants({
           interacting: isDragging || isResizing,
           dragging: isDragging,