diff --git a/cypress/e2e/50-logs.cy.ts b/cypress/e2e/50-logs.cy.ts new file mode 100644 index 0000000000..9068f9de38 --- /dev/null +++ b/cypress/e2e/50-logs.cy.ts @@ -0,0 +1,4 @@ +describe('Logs', () => { + // TODO: the test can be written without AI nodes once https://linear.app/n8n/issue/SUG-22 is implemented + it('should open NDV with the run index that corresponds to clicked log entry'); +}); diff --git a/packages/frontend/editor-ui/src/Interface.ts b/packages/frontend/editor-ui/src/Interface.ts index 2016b7db0a..7c46919417 100644 --- a/packages/frontend/editor-ui/src/Interface.ts +++ b/packages/frontend/editor-ui/src/Interface.ts @@ -1547,7 +1547,7 @@ export interface IN8nPromptResponse { export type InputPanel = { nodeName?: string; - run?: number; + run: number; branch?: number; data: { isEmpty: boolean; @@ -1555,6 +1555,7 @@ export type InputPanel = { }; export type OutputPanel = { + run: number; branch?: number; data: { isEmpty: boolean; diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.test.ts b/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.test.ts index 0e33ce42cf..0ea479337b 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.test.ts +++ b/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.test.ts @@ -175,7 +175,7 @@ describe('CanvasChat', () => { return matchedNode; }); - workflowsStore.chatPanelState = LOGS_PANEL_STATE.ATTACHED; + workflowsStore.logsPanelState = LOGS_PANEL_STATE.ATTACHED; workflowsStore.isLogsPanelOpen = true; workflowsStore.getWorkflowExecution = mockWorkflowExecution as unknown as IExecutionResponse; workflowsStore.getPastChatMessages = ['Previous message 1', 'Previous message 2']; @@ -198,7 +198,7 @@ describe('CanvasChat', () => { }); it('should not render chat when panel is closed', async () => { - workflowsStore.chatPanelState = LOGS_PANEL_STATE.CLOSED; + workflowsStore.logsPanelState = LOGS_PANEL_STATE.CLOSED; const { queryByTestId } = renderComponent(); await waitFor(() => { expect(queryByTestId('canvas-chat')).not.toBeInTheDocument(); @@ -390,7 +390,7 @@ describe('CanvasChat', () => { isLoading: computed(() => false), }); - workflowsStore.chatPanelState = LOGS_PANEL_STATE.ATTACHED; + workflowsStore.logsPanelState = LOGS_PANEL_STATE.ATTACHED; workflowsStore.allowFileUploads = true; }); @@ -555,7 +555,7 @@ describe('CanvasChat', () => { }); // Close chat panel - workflowsStore.chatPanelState = LOGS_PANEL_STATE.CLOSED; + workflowsStore.logsPanelState = LOGS_PANEL_STATE.CLOSED; await waitFor(() => { expect(canvasStore.setPanelHeight).toHaveBeenCalledWith(0); }); @@ -565,14 +565,14 @@ describe('CanvasChat', () => { const { unmount, rerender } = renderComponent(); // Set initial state - workflowsStore.chatPanelState = LOGS_PANEL_STATE.ATTACHED; + workflowsStore.logsPanelState = LOGS_PANEL_STATE.ATTACHED; workflowsStore.isLogsPanelOpen = true; // Unmount and remount unmount(); await rerender({}); - expect(workflowsStore.chatPanelState).toBe(LOGS_PANEL_STATE.ATTACHED); + expect(workflowsStore.logsPanelState).toBe(LOGS_PANEL_STATE.ATTACHED); expect(workflowsStore.isLogsPanelOpen).toBe(true); }); }); diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.vue b/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.vue index 5d9f29ea2b..0218a07068 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.vue +++ b/packages/frontend/editor-ui/src/components/CanvasChat/CanvasChat.vue @@ -29,7 +29,7 @@ const pipContent = useTemplateRef('pipContent'); // Computed properties const workflow = computed(() => workflowsStore.getCurrentWorkflow()); -const chatPanelState = computed(() => workflowsStore.chatPanelState); +const chatPanelState = computed(() => workflowsStore.logsPanelState); const previousChatMessages = computed(() => workflowsStore.getPastChatMessages); const resultData = computed(() => workflowsStore.getWorkflowRunData); @@ -57,7 +57,7 @@ const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({ } telemetry.track('User toggled log view', { new_state: 'attached' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.ATTACHED); + workflowsStore.setPreferPoppedOutLogsView(false); }, }); @@ -80,12 +80,13 @@ defineExpose({ }); const closePanel = () => { - workflowsStore.setPanelState(LOGS_PANEL_STATE.CLOSED); + workflowsStore.toggleLogsPanelOpen(false); }; function onPopOut() { telemetry.track('User toggled log view', { new_state: 'floating' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.FLOATING); + workflowsStore.toggleLogsPanelOpen(true); + workflowsStore.setPreferPoppedOutLogsView(true); } // Watchers diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/__test__/data.ts b/packages/frontend/editor-ui/src/components/CanvasChat/__test__/data.ts index 46e6942f5e..99e2b4ffa6 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/__test__/data.ts +++ b/packages/frontend/editor-ui/src/components/CanvasChat/__test__/data.ts @@ -36,9 +36,16 @@ export const manualTriggerNode = createTestNode({ name: 'Manual' }); export const aiAgentNode = createTestNode({ name: 'AI Agent', type: AGENT_NODE_TYPE }); export const aiModelNode = createTestNode({ name: 'AI Model' }); -export const simpleWorkflow = createTestWorkflow({ - nodes: [manualTriggerNode], - connections: {}, +export const aiManualWorkflow = createTestWorkflow({ + nodes: [manualTriggerNode, aiAgentNode, aiModelNode], + connections: { + Manual: { + main: [[{ node: 'AI Agent', index: 0, type: 'main' }]], + }, + 'AI Model': { + ai_languageModel: [[{ node: 'AI Agent', index: 0, type: 'ai_languageModel' }]], + }, + }, }); export const aiChatWorkflow = createTestWorkflow({ @@ -53,7 +60,7 @@ export const aiChatWorkflow = createTestWorkflow({ }, }); -export const executionResponse: IExecutionResponse = { +export const aiChatExecutionResponse: IExecutionResponse = { id: 'test-exec-id', finished: true, mode: 'manual', @@ -102,3 +109,52 @@ export const executionResponse: IExecutionResponse = { startedAt: new Date('2025-03-26T00:00:00.001Z'), stoppedAt: new Date('2025-03-26T00:00:02.000Z'), }; + +export const aiManualExecutionResponse: IExecutionResponse = { + id: 'test-exec-id-2', + finished: true, + mode: 'manual', + status: 'success', + data: { + resultData: { + runData: { + 'AI Agent': [ + { + executionStatus: 'success', + startTime: +new Date('2025-03-30T00:00:00.002Z'), + executionTime: 12, + source: [], + data: {}, + }, + ], + 'AI Model': [ + { + executionStatus: 'success', + startTime: +new Date('2025-03-30T00:00:00.003Z'), + executionTime: 3456, + source: [], + data: { + ai_languageModel: [ + [ + { + json: { + tokenUsage: { + completionTokens: 4, + promptTokens: 5, + totalTokens: 6, + }, + }, + }, + ], + ], + }, + }, + ], + }, + }, + }, + workflowData: aiManualWorkflow, + createdAt: new Date('2025-03-30T00:00:00.000Z'), + startedAt: new Date('2025-03-30T00:00:00.001Z'), + stoppedAt: new Date('2025-03-30T00:00:02.000Z'), +}; diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/composables/useChatState.ts b/packages/frontend/editor-ui/src/components/CanvasChat/composables/useChatState.ts index 46412a8f8b..e4064ae528 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/composables/useChatState.ts +++ b/packages/frontend/editor-ui/src/components/CanvasChat/composables/useChatState.ts @@ -42,7 +42,7 @@ export function useChatState(isDisabled: Ref, onWindowResize: () => voi const canvasNodes = computed(() => workflowsStore.allNodes); const allConnections = computed(() => workflowsStore.allConnections); - const chatPanelState = computed(() => workflowsStore.chatPanelState); + const logsPanelState = computed(() => workflowsStore.logsPanelState); const workflow = computed(() => workflowsStore.getCurrentWorkflow()); // Initialize features with injected dependencies @@ -125,7 +125,7 @@ export function useChatState(isDisabled: Ref, onWindowResize: () => voi // Watchers watch( - () => chatPanelState.value, + () => logsPanelState.value, (state) => { if (state !== LOGS_PANEL_STATE.CLOSED) { setChatTriggerNode(); diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.test.ts b/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.test.ts index c6d8bc9ee5..0b8fa344f6 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.test.ts +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.test.ts @@ -8,7 +8,12 @@ import { setActivePinia } from 'pinia'; import { createRouter, createWebHistory } from 'vue-router'; import { useWorkflowsStore } from '@/stores/workflows.store'; import { h } from 'vue'; -import { executionResponse, aiChatWorkflow, simpleWorkflow, nodeTypes } from '../__test__/data'; +import { + aiChatExecutionResponse, + aiChatWorkflow, + aiManualWorkflow, + nodeTypes, +} from '../__test__/data'; import { useNodeTypesStore } from '@/stores/nodeTypes.store'; describe('LogsPanel', () => { @@ -47,16 +52,14 @@ describe('LogsPanel', () => { }); it('should render collapsed panel by default', async () => { - workflowsStore.setWorkflow(simpleWorkflow); - const rendered = render(); expect(await rendered.findByTestId('logs-overview-header')).toBeInTheDocument(); expect(rendered.queryByTestId('logs-overview-empty')).not.toBeInTheDocument(); }); - it('should render logs panel only if the workflow has no chat trigger', async () => { - workflowsStore.setWorkflow(simpleWorkflow); + it('should only render logs panel if the workflow has no chat trigger', async () => { + workflowsStore.setWorkflow(aiManualWorkflow); const rendered = render(); @@ -99,7 +102,7 @@ describe('LogsPanel', () => { it('should open log details panel when a log entry is clicked in the logs overview panel', async () => { workflowsStore.setWorkflow(aiChatWorkflow); - workflowsStore.setWorkflowExecutionData(executionResponse); + workflowsStore.setWorkflowExecutionData(aiChatExecutionResponse); const rendered = render(); @@ -114,7 +117,7 @@ describe('LogsPanel', () => { it("should show the button to toggle panel in the header of log details panel when it's opened", async () => { workflowsStore.setWorkflow(aiChatWorkflow); - workflowsStore.setWorkflowExecutionData(executionResponse); + workflowsStore.setWorkflowExecutionData(aiChatExecutionResponse); const rendered = render(); diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.vue b/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.vue index 18273b1c10..6ae2fb4ff7 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.vue +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.vue @@ -16,7 +16,7 @@ import LogsPanelActions from '@/components/CanvasChat/future/components/LogsPane const workflowsStore = useWorkflowsStore(); const canvasStore = useCanvasStore(); -const panelState = computed(() => workflowsStore.chatPanelState); +const panelState = computed(() => workflowsStore.logsPanelState); const container = ref(); const selectedLogEntry = ref(undefined); const pipContainer = useTemplateRef('pipContainer'); @@ -49,7 +49,7 @@ const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({ } telemetry.track('User toggled log view', { new_state: 'attached' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.ATTACHED); + workflowsStore.setPreferPoppedOutLogsView(false); }, }); const logsPanelActionsProps = computed['$props']>(() => ({ @@ -60,19 +60,17 @@ const logsPanelActionsProps = computed['$p })); function onToggleOpen() { - if (panelState.value === LOGS_PANEL_STATE.CLOSED) { - telemetry.track('User toggled log view', { new_state: 'attached' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.ATTACHED); - } else { - telemetry.track('User toggled log view', { new_state: 'collapsed' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.CLOSED); - } + workflowsStore.toggleLogsPanelOpen(); + + telemetry.track('User toggled log view', { + new_state: panelState.value === LOGS_PANEL_STATE.CLOSED ? 'attached' : 'collapsed', + }); } function handleClickHeader() { if (panelState.value === LOGS_PANEL_STATE.CLOSED) { telemetry.track('User toggled log view', { new_state: 'attached' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.ATTACHED); + workflowsStore.toggleLogsPanelOpen(true); } } @@ -82,7 +80,8 @@ function handleSelectLogEntry(selected: LogEntryIdentity | undefined) { function onPopOut() { telemetry.track('User toggled log view', { new_state: 'floating' }); - workflowsStore.setPanelState(LOGS_PANEL_STATE.FLOATING); + workflowsStore.toggleLogsPanelOpen(true); + workflowsStore.setPreferPoppedOutLogsView(true); } watch([panelState, height], ([state, h]) => { diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.test.ts b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.test.ts index 2fe03c864a..cc668cbd70 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.test.ts +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.test.ts @@ -7,11 +7,21 @@ import { useWorkflowsStore } from '@/stores/workflows.store'; import { createRouter, createWebHistory } from 'vue-router'; import { h, type ExtractPropTypes } from 'vue'; import { fireEvent, waitFor, within } from '@testing-library/vue'; -import { aiAgentNode, executionResponse, aiChatWorkflow } from '../../__test__/data'; +import { + aiAgentNode, + aiChatExecutionResponse, + aiChatWorkflow, + aiManualExecutionResponse, + aiManualWorkflow, +} from '../../__test__/data'; +import { usePushConnectionStore } from '@/stores/pushConnection.store'; +import { useNDVStore } from '@/stores/ndv.store'; describe('LogsOverviewPanel', () => { let pinia: TestingPinia; let workflowsStore: ReturnType>; + let pushConnectionStore: ReturnType>; + let ndvStore: ReturnType>; function render(props: ExtractPropTypes) { return renderComponent(LogsOverviewPanel, { @@ -36,6 +46,11 @@ describe('LogsOverviewPanel', () => { workflowsStore = mockedStore(useWorkflowsStore); workflowsStore.setWorkflow(aiChatWorkflow); workflowsStore.setWorkflowExecutionData(null); + + pushConnectionStore = mockedStore(usePushConnectionStore); + pushConnectionStore.isConnected = true; + + ndvStore = mockedStore(useNDVStore); }); it('should not render body if the panel is not open', () => { @@ -51,7 +66,7 @@ describe('LogsOverviewPanel', () => { }); it('should render summary text and executed nodes if there is an execution', async () => { - workflowsStore.setWorkflowExecutionData(executionResponse); + workflowsStore.setWorkflowExecutionData(aiChatExecutionResponse); const rendered = render({ isOpen: true, node: aiAgentNode }); const summary = within(rendered.container.querySelector('.summary')!); @@ -79,7 +94,34 @@ describe('LogsOverviewPanel', () => { expect(row2.queryByText('555 Tokens')).toBeInTheDocument(); // collapse tree - await fireEvent.click(row1.getByRole('button')); + await fireEvent.click(row1.getAllByLabelText('Toggle row')[0]); await waitFor(() => expect(tree.queryAllByRole('treeitem')).toHaveLength(1)); }); + + it('should open NDV if the button is clicked', async () => { + workflowsStore.setWorkflowExecutionData(aiChatExecutionResponse); + + const rendered = render({ isOpen: true, node: aiAgentNode }); + const aiAgentRow = rendered.getAllByRole('treeitem')[0]; + + await fireEvent.click(within(aiAgentRow).getAllByLabelText('Open...')[0]); + + await waitFor(() => expect(ndvStore.activeNodeName).toBe('AI Agent')); + }); + + it('should trigger partial execution if the button is clicked', async () => { + workflowsStore.setWorkflow(aiManualWorkflow); + workflowsStore.setWorkflowExecutionData(aiManualExecutionResponse); + + const spyRun = vi.spyOn(workflowsStore, 'runWorkflow'); + + workflowsStore.setWorkflowExecutionData(aiChatExecutionResponse); + + const rendered = render({ isOpen: true, node: aiAgentNode }); + const aiAgentRow = rendered.getAllByRole('treeitem')[0]; + await fireEvent.click(within(aiAgentRow).getAllByLabelText('Test step')[0]); + await waitFor(() => + expect(spyRun).toHaveBeenCalledWith(expect.objectContaining({ destinationNode: 'AI Agent' })), + ); + }); }); diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.vue b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.vue index 79af0f6717..46369b6218 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.vue +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewPanel.vue @@ -5,7 +5,7 @@ import { useI18n } from '@/composables/useI18n'; import { useNodeHelpers } from '@/composables/useNodeHelpers'; import { useWorkflowsStore } from '@/stores/workflows.store'; import { N8nButton, N8nRadioButtons, N8nText, N8nTooltip } from '@n8n/design-system'; -import { computed } from 'vue'; +import { computed, nextTick } from 'vue'; import { ElTree, type TreeNode as ElTreeNode } from 'element-plus'; import { createAiData, @@ -20,6 +20,9 @@ import { useTelemetry } from '@/composables/useTelemetry'; import ConsumedTokenCountText from '@/components/CanvasChat/future/components/ConsumedTokenCountText.vue'; import { type LogEntryIdentity } from '@/components/CanvasChat/types/logs'; import LogsOverviewRow from '@/components/CanvasChat/future/components/LogsOverviewRow.vue'; +import { useRunWorkflow } from '@/composables/useRunWorkflow'; +import { useNDVStore } from '@/stores/ndv.store'; +import { useRouter } from 'vue-router'; const { node, isOpen, selected } = defineProps<{ isOpen: boolean; @@ -34,6 +37,9 @@ defineSlots<{ actions: {} }>(); const locale = useI18n(); const telemetry = useTelemetry(); const workflowsStore = useWorkflowsStore(); +const router = useRouter(); +const runWorkflow = useRunWorkflow({ router }); +const ndvStore = useNDVStore(); const nodeHelpers = useNodeHelpers(); const isClearExecutionButtonVisible = useClearExecutionButtonVisible(); const workflow = computed(() => workflowsStore.getCurrentWorkflow()); @@ -106,6 +112,17 @@ function handleSwitchView(value: 'overview' | 'details') { function handleToggleExpanded(treeNode: ElTreeNode) { treeNode.expanded = !treeNode.expanded; } + +async function handleOpenNdv(treeNode: TreeNode) { + ndvStore.setActiveNodeName(treeNode.node); + + // HACK: defer setting the output run index to not be overridden by other effects + await nextTick(() => ndvStore.setOutputRunIndex(treeNode.runIndex)); +} + +async function handleTriggerPartialExecution(treeNode: TreeNode) { + await runWorkflow.runWorkflow({ destinationNode: treeNode.node }); +} diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewRow.vue b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewRow.vue index cef42ea5d5..85572d704b 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewRow.vue +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsOverviewRow.vue @@ -4,7 +4,7 @@ import { getSubtreeTotalConsumedTokens, type TreeNode } from '@/components/RunDa import { useWorkflowsStore } from '@/stores/workflows.store'; import { computed } from 'vue'; import { type INodeUi } from '@/Interface'; -import { N8nIcon, N8nIconButton, N8nText } from '@n8n/design-system'; +import { N8nButton, N8nIcon, N8nIconButton, N8nText } from '@n8n/design-system'; import { type ITaskData } from 'n8n-workflow'; import { useNodeTypesStore } from '@/stores/nodeTypes.store'; import { upperFirst } from 'lodash-es'; @@ -21,7 +21,11 @@ const props = defineProps<{ isCompact: boolean; }>(); -const emit = defineEmits<{ toggleExpanded: [node: ElTreeNode] }>(); +const emit = defineEmits<{ + toggleExpanded: [node: ElTreeNode]; + triggerPartialExecution: [node: TreeNode]; + openNdv: [node: TreeNode]; +}>(); const locale = useI18n(); const workflowsStore = useWorkflowsStore(); @@ -140,43 +144,67 @@ function isLastChild(level: number) { :class="$style.compactErrorIcon" /> + + + > + + diff --git a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsPanelActions.vue b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsPanelActions.vue index 98196a963a..f06f2f7674 100644 --- a/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsPanelActions.vue +++ b/packages/frontend/editor-ui/src/components/CanvasChat/future/components/LogsPanelActions.vue @@ -34,7 +34,7 @@ const toggleButtonText = computed(() => size="small" icon-size="medium" :aria-label="popOutButtonText" - @click="emit('popOut')" + @click.stop="emit('popOut')" /> (); const triggerWaitingWarningEnabled = ref(false); const isDragging = ref(false); @@ -248,12 +245,6 @@ const maxOutputRun = computed(() => { return 0; }); -const outputRun = computed(() => - runOutputIndex.value === -1 - ? maxOutputRun.value - : Math.min(runOutputIndex.value, maxOutputRun.value), -); - const maxInputRun = computed(() => { if (inputNode.value === null || activeNode.value === null) { return 0; @@ -290,15 +281,23 @@ const maxInputRun = computed(() => { return 0; }); +const isLinkingEnabled = computed(() => ndvStore.isRunIndexLinkingEnabled); + +const outputRun = computed(() => + ndvStore.output.run === -1 + ? maxOutputRun.value + : Math.min(ndvStore.output.run, maxOutputRun.value), +); + const inputRun = computed(() => { if (isLinkingEnabled.value && maxOutputRun.value === maxInputRun.value) { return outputRun.value; } - if (runInputIndex.value === -1) { + if (ndvStore.input.run === -1) { return maxInputRun.value; } - return Math.min(runInputIndex.value, maxInputRun.value); + return Math.min(ndvStore.input.run, maxInputRun.value); }); const canLinkRuns = computed( @@ -443,13 +442,13 @@ const onPanelsInit = (e: { position: number }) => { }; const onLinkRunToOutput = () => { - isLinkingEnabled.value = true; + ndvStore.setRunIndexLinkingEnabled(true); trackLinking('output'); }; const onUnlinkRun = (pane: string) => { - runInputIndex.value = runOutputIndex.value; - isLinkingEnabled.value = false; + ndvStore.setInputRunIndex(outputRun.value); + ndvStore.setRunIndexLinkingEnabled(false); trackLinking(pane); }; @@ -476,8 +475,8 @@ const trackLinking = (pane: string) => { }; const onLinkRunToInput = () => { - runOutputIndex.value = runInputIndex.value; - isLinkingEnabled.value = true; + ndvStore.setOutputRunIndex(inputRun.value); + ndvStore.setRunIndexLinkingEnabled(true); trackLinking('input'); }; @@ -553,15 +552,12 @@ const trackRunChange = (run: number, pane: string) => { }; const onRunOutputIndexChange = (run: number) => { - runOutputIndex.value = run; + ndvStore.setOutputRunIndex(run); trackRunChange(run, 'output'); }; const onRunInputIndexChange = (run: number) => { - runInputIndex.value = run; - if (linked.value) { - runOutputIndex.value = run; - } + ndvStore.setInputRunIndex(run); trackRunChange(run, 'input'); }; @@ -570,8 +566,8 @@ const onOutputTableMounted = (e: { avgRowHeight: number }) => { }; const onInputNodeChange = (value: string, index: number) => { - runInputIndex.value = -1; - isLinkingEnabled.value = true; + ndvStore.setInputRunIndex(-1); + ndvStore.setRunIndexLinkingEnabled(true); selectedInput.value = value; telemetry.track('User changed ndv input dropdown', { @@ -621,9 +617,6 @@ watch( } if (node && node.name !== oldNode?.name && !isActiveStickyNode.value) { - runInputIndex.value = -1; - runOutputIndex.value = -1; - isLinkingEnabled.value = true; selectedInput.value = undefined; triggerWaitingWarningEnabled.value = false; avgOutputRowHeight.value = 0; @@ -674,26 +667,12 @@ watch( { immediate: true }, ); -watch(maxOutputRun, () => { - runOutputIndex.value = -1; -}); - -watch(maxInputRun, () => { - runInputIndex.value = -1; -}); - watch(inputNodeName, (nodeName) => { setTimeout(() => { ndvStore.setInputNodeName(nodeName); }, 0); }); -watch(inputRun, (inputRun) => { - setTimeout(() => { - ndvStore.setInputRunIndex(inputRun); - }, 0); -}); - onMounted(() => { dataPinningEventBus.on('data-pinning-discovery', setIsTooltipVisible); }); diff --git a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue index a4513237a6..ec6876ff7f 100644 --- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue +++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue @@ -40,7 +40,7 @@ const uiStore = useUIStore(); const { runEntireWorkflow } = useRunWorkflow({ router }); const { toggleChatOpen } = useCanvasOperations({ router }); -const isChatOpen = computed(() => workflowsStore.chatPanelState !== LOGS_PANEL_STATE.CLOSED); +const isChatOpen = computed(() => workflowsStore.logsPanelState !== LOGS_PANEL_STATE.CLOSED); const isExecuting = computed(() => uiStore.isActionActive.workflowRunning); const testId = computed(() => `execute-workflow-button-${name}`); diff --git a/packages/frontend/editor-ui/src/composables/useCanvasOperations.test.ts b/packages/frontend/editor-ui/src/composables/useCanvasOperations.test.ts index 23b2923c1d..d643e4d134 100644 --- a/packages/frontend/editor-ui/src/composables/useCanvasOperations.test.ts +++ b/packages/frontend/editor-ui/src/composables/useCanvasOperations.test.ts @@ -53,7 +53,6 @@ import { nextTick } from 'vue'; import { useProjectsStore } from '@/stores/projects.store'; import type { CanvasLayoutEvent } from './useCanvasLayout'; import { useTelemetry } from './useTelemetry'; -import { LOGS_PANEL_STATE } from '@/components/CanvasChat/types/logs'; vi.mock('vue-router', async (importOriginal) => { const actual = await importOriginal<{}>(); @@ -2928,28 +2927,20 @@ describe('useCanvasOperations', () => { }); describe('toggleChatOpen', () => { - it('should invoke workflowsStore#setPanelState with 1st argument "docked" if the chat panel is closed', async () => { + it('should invoke workflowsStore#toggleLogsPanelOpen with 2nd argument passed through as 1st argument', async () => { const workflowsStore = mockedStore(useWorkflowsStore); const { toggleChatOpen } = useCanvasOperations({ router }); workflowsStore.getCurrentWorkflow.mockReturnValue(createTestWorkflowObject()); - workflowsStore.chatPanelState = LOGS_PANEL_STATE.CLOSED; await toggleChatOpen('main'); + expect(workflowsStore.toggleLogsPanelOpen).toHaveBeenCalledWith(undefined); - expect(workflowsStore.setPanelState).toHaveBeenCalledWith(LOGS_PANEL_STATE.ATTACHED); - }); + await toggleChatOpen('main', true); + expect(workflowsStore.toggleLogsPanelOpen).toHaveBeenCalledWith(true); - it('should invoke workflowsStore#setPanelState with 1st argument "collapsed" if the chat panel is open', async () => { - const workflowsStore = mockedStore(useWorkflowsStore); - const { toggleChatOpen } = useCanvasOperations({ router }); - - workflowsStore.getCurrentWorkflow.mockReturnValue(createTestWorkflowObject()); - workflowsStore.chatPanelState = LOGS_PANEL_STATE.ATTACHED; - - await toggleChatOpen('main'); - - expect(workflowsStore.setPanelState).toHaveBeenCalledWith(LOGS_PANEL_STATE.CLOSED); + await toggleChatOpen('main', false); + expect(workflowsStore.toggleLogsPanelOpen).toHaveBeenCalledWith(false); }); }); diff --git a/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts b/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts index 5b97311d4a..9759171f93 100644 --- a/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts +++ b/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts @@ -101,7 +101,6 @@ import { useUniqueNodeName } from '@/composables/useUniqueNodeName'; import { isPresent } from '../utils/typesUtils'; import { useProjectsStore } from '@/stores/projects.store'; import type { CanvasLayoutEvent } from './useCanvasLayout'; -import { LOGS_PANEL_STATE } from '@/components/CanvasChat/types/logs'; type AddNodeData = Partial & { type: string; @@ -1974,14 +1973,10 @@ export function useCanvasOperations({ router }: { router: ReturnType }) { const nodeHelpers = useNodeHelpers(); @@ -183,7 +182,7 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType { const localStorageAutoCompleteIsOnboarded = useStorage(LOCAL_STORAGE_AUTOCOMPLETE_IS_ONBOARDED); const activeNodeName = ref(null); + const isRunIndexLinkingEnabled = ref(true); const mainPanelDimensions = ref({ unknown: { ...DEFAULT_MAIN_PANEL_DIMENSIONS }, regular: { ...DEFAULT_MAIN_PANEL_DIMENSIONS }, @@ -48,7 +49,7 @@ export const useNDVStore = defineStore(STORES.NDV, () => { const pushRef = ref(''); const input = ref({ nodeName: undefined, - run: undefined, + run: -1, branch: undefined, data: { isEmpty: true, @@ -59,6 +60,7 @@ export const useNDVStore = defineStore(STORES.NDV, () => { 'schema', ); const output = ref({ + run: -1, branch: undefined, data: { isEmpty: true, @@ -213,15 +215,36 @@ export const useNDVStore = defineStore(STORES.NDV, () => { const isNDVOpen = computed(() => activeNodeName.value !== null); const setActiveNodeName = (nodeName: string | null): void => { + if (nodeName === activeNodeName.value) { + return; + } + activeNodeName.value = nodeName; + + // Reset run index + input.value.run = -1; + output.value.run = -1; + isRunIndexLinkingEnabled.value = true; }; const setInputNodeName = (nodeName: string | undefined): void => { input.value.nodeName = nodeName; }; - const setInputRunIndex = (run?: number): void => { + const setInputRunIndex = (run: number = -1): void => { input.value.run = run; + + if (isRunIndexLinkingEnabled.value) { + setOutputRunIndex(run); + } + }; + + const setOutputRunIndex = (run: number = -1): void => { + output.value.run = run; + }; + + const setRunIndexLinkingEnabled = (value: boolean): void => { + isRunIndexLinkingEnabled.value = value; }; const setMainPanelDimensions = (params: { @@ -404,9 +427,12 @@ export const useNDVStore = defineStore(STORES.NDV, () => { expressionOutputItemIndex, isTableHoverOnboarded, mainPanelDimensions, + isRunIndexLinkingEnabled, setActiveNodeName, setInputNodeName, setInputRunIndex, + setOutputRunIndex, + setRunIndexLinkingEnabled, setMainPanelDimensions, setNDVPushRef, resetNDVPushRef, diff --git a/packages/frontend/editor-ui/src/stores/workflows.store.ts b/packages/frontend/editor-ui/src/stores/workflows.store.ts index 679bf99ff4..939ab921c7 100644 --- a/packages/frontend/editor-ui/src/stores/workflows.store.ts +++ b/packages/frontend/editor-ui/src/stores/workflows.store.ts @@ -91,7 +91,7 @@ import { useNodeHelpers } from '@/composables/useNodeHelpers'; import { useUsersStore } from '@/stores/users.store'; import { updateCurrentUserSettings } from '@/api/users'; import { useExecutingNode } from '@/composables/useExecutingNode'; -import { LOGS_PANEL_STATE, type LogsPanelState } from '@/components/CanvasChat/types/logs'; +import { LOGS_PANEL_STATE } from '@/components/CanvasChat/types/logs'; const defaults: Omit & { settings: NonNullable } = { name: '', @@ -146,7 +146,15 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { const isInDebugMode = ref(false); const chatMessages = ref([]); const chatPartialExecutionDestinationNode = ref(null); - const chatPanelState = ref(LOGS_PANEL_STATE.CLOSED); + const isLogsPanelOpen = ref(false); + const preferPopOutLogsView = ref(false); + const logsPanelState = computed(() => + isLogsPanelOpen.value + ? preferPopOutLogsView.value + ? LOGS_PANEL_STATE.FLOATING + : LOGS_PANEL_STATE.ATTACHED + : LOGS_PANEL_STATE.CLOSED, + ); const { executingNode, addExecutingNode, removeExecutingNode, clearNodeExecutionQueue } = useExecutingNode(); @@ -1207,7 +1215,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { // If chat trigger node is removed, close chat if (node.type === CHAT_TRIGGER_NODE_TYPE && !settingsStore.isNewLogsEnabled) { - setPanelState(LOGS_PANEL_STATE.CLOSED); + toggleLogsPanelOpen(false); } if (workflow.value.pinData && workflow.value.pinData.hasOwnProperty(node.name)) { @@ -1670,8 +1678,12 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { // End Canvas V2 Functions // - function setPanelState(state: LogsPanelState) { - chatPanelState.value = state; + function toggleLogsPanelOpen(isOpen?: boolean) { + isLogsPanelOpen.value = isOpen ?? !isLogsPanelOpen.value; + } + + function setPreferPoppedOutLogsView(value: boolean) { + preferPopOutLogsView.value = value; } function markExecutionAsStopped() { @@ -1733,8 +1745,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => { getAllLoadedFinishedExecutions, getWorkflowExecution, getPastChatMessages, - chatPanelState: computed(() => chatPanelState.value), - setPanelState, + logsPanelState: computed(() => logsPanelState.value), + toggleLogsPanelOpen, + setPreferPoppedOutLogsView, outgoingConnectionsByNodeName, incomingConnectionsByNodeName, nodeHasOutputConnection, diff --git a/packages/frontend/editor-ui/src/views/NodeView.vue b/packages/frontend/editor-ui/src/views/NodeView.vue index f1da046c3c..d0125a227c 100644 --- a/packages/frontend/editor-ui/src/views/NodeView.vue +++ b/packages/frontend/editor-ui/src/views/NodeView.vue @@ -274,7 +274,7 @@ const keyBindingsEnabled = computed(() => { return !ndvStore.activeNode && uiStore.activeModals.length === 0; }); -const isChatOpen = computed(() => workflowsStore.chatPanelState !== LOGS_PANEL_STATE.CLOSED); +const isLogsPanelOpen = computed(() => workflowsStore.logsPanelState !== LOGS_PANEL_STATE.CLOSED); /** * Initialization @@ -1287,8 +1287,8 @@ const chatTriggerNodePinnedData = computed(() => { return workflowsStore.pinDataByNodeName(chatTriggerNode.value.name); }); -async function onOpenChat() { - await toggleChatOpen('main'); +async function onOpenChat(isOpen?: boolean) { + await toggleChatOpen('main', isOpen); } /** @@ -1788,9 +1788,9 @@ onBeforeUnmount(() => { />