vikarti.anatra/Skyvern
1
0
Fork 0
mirror of https://github.com/Skyvern-AI/skyvern.git synced 2025-09-02 18:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Render nested blocks correctly in workflow run timeline (#2033)

Browse source
This commit is contained in:
Shuchang Zheng 2025-03-27 06:31:14 -07:00 • committed by GitHub
parent e601a87298
commit 578a56d649
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx
View file

@ -98,13 +98,12 @@ function WorkflowRunTimeline({
return ( return (
<WorkflowRunTimelineBlockItem <WorkflowRunTimelineBlockItem
key={timelineItem.block.workflow_run_block_id} key={timelineItem.block.workflow_run_block_id}
subBlocks={timelineItem.children subItems={timelineItem.children}
.filter((item) => item.type === "block")
.map((item) => item.block)}
activeItem={activeItem} activeItem={activeItem}
block={timelineItem.block} block={timelineItem.block}
onActionClick={onActionItemSelected} onActionClick={onActionItemSelected}
onBlockItemClick={onBlockItemSelected} onBlockItemClick={onBlockItemSelected}
onThoughtCardClick={onObserverThoughtCardSelected}
/> />
); );
} }

51
skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem.tsx
View file

@ -8,8 +8,12 @@ import { workflowBlockTitle } from "../editor/nodes/types";
import { WorkflowBlockIcon } from "../editor/nodes/WorkflowBlockIcon"; import { WorkflowBlockIcon } from "../editor/nodes/WorkflowBlockIcon";
import { import {
isAction, isAction,
isBlockItem,
isObserverThought,
isThoughtItem,
isWorkflowRunBlock, isWorkflowRunBlock,
WorkflowRunBlock, WorkflowRunBlock,
WorkflowRunTimelineItem,
} from "../types/workflowRunTypes"; } from "../types/workflowRunTypes";
import { ActionCard } from "./ActionCard"; import { ActionCard } from "./ActionCard";
import { import {
@ -21,21 +25,24 @@ import { isTaskVariantBlock } from "../types/workflowTypes";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useCallback } from "react"; import { useCallback } from "react";
import { Status } from "@/api/types"; import { Status } from "@/api/types";
import { ThoughtCard } from "./ThoughtCard";
import { ObserverThought } from "../types/workflowRunTypes";
type Props = { type Props = {
activeItem: WorkflowRunOverviewActiveElement; activeItem: WorkflowRunOverviewActiveElement;
block: WorkflowRunBlock; block: WorkflowRunBlock;
subBlocks: Array<WorkflowRunBlock>; subItems: Array<WorkflowRunTimelineItem>;
onBlockItemClick: (block: WorkflowRunBlock) => void; onBlockItemClick: (block: WorkflowRunBlock) => void;
onActionClick: (action: ActionItem) => void; onActionClick: (action: ActionItem) => void;
onThoughtCardClick: (thought: ObserverThought) => void;
}; };
function WorkflowRunTimelineBlockItem({ function WorkflowRunTimelineBlockItem({
activeItem, activeItem,
block, block,
subBlocks, subItems,
onBlockItemClick, onBlockItemClick,
onActionClick, onActionClick,
onThoughtCardClick,
}: Props) { }: Props) {
const actions = block.actions ?? []; const actions = block.actions ?? [];
@ -164,17 +171,33 @@ function WorkflowRunTimelineBlockItem({
/> />
); );
})} })}
{subBlocks.map((block) => { {subItems.map((item) => {
return ( if (isBlockItem(item)) {
<WorkflowRunTimelineBlockItem return (
key={block.workflow_run_block_id} <WorkflowRunTimelineBlockItem
block={block} key={item.block.workflow_run_block_id}
activeItem={activeItem} subItems={item.children}
onActionClick={onActionClick} activeItem={activeItem}
onBlockItemClick={onBlockItemClick} block={item.block}
subBlocks={[]} onActionClick={onActionClick}
/> onBlockItemClick={onBlockItemClick}
); onThoughtCardClick={onThoughtCardClick}
/>
);
}
if (isThoughtItem(item)) {
return (
<ThoughtCard
key={item.thought.thought_id}
active={
isObserverThought(activeItem) &&
activeItem.thought_id === item.thought.thought_id
}
onClick={onThoughtCardClick}
thought={item.thought}
/>
);
}
})} })}
</div> </div>
); );