mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-30 15:07:28 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(editor): Improve workflow loading performance on new canvas (#11629)

Browse source
This commit is contained in:
Alex Grozav 2024-11-11 13:35:20 +02:00 committed by GitHub
parent af7d6e68d0
commit f1e2df7d07
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/editor-ui/src/composables/useCanvasOperations.test.ts
View file

@ -17,6 +17,7 @@ import { useHistoryStore } from '@/stores/history.store';
import { useNDVStore } from '@/stores/ndv.store'; import { useNDVStore } from '@/stores/ndv.store';
import { import {
createTestNode, createTestNode,
createTestWorkflow,
createTestWorkflowObject, createTestWorkflowObject,
mockNode, mockNode,
mockNodeTypeDescription, mockNodeTypeDescription,
@ -2033,6 +2034,22 @@ describe('useCanvasOperations', () => {
}, },
); );
}); });
describe('initializeWorkspace', () => {
it('should initialize the workspace', () => {
const workflowsStore = mockedStore(useWorkflowsStore);
const workflow = createTestWorkflow({
nodes: [createTestNode()],
connections: {},
});
const { initializeWorkspace } = useCanvasOperations({ router });
initializeWorkspace(workflow);
expect(workflowsStore.setNodes).toHaveBeenCalled();
expect(workflowsStore.setConnections).toHaveBeenCalled();
});
});
}); });
function buildImportNodes() { function buildImportNodes() {

15
packages/editor-ui/src/composables/useCanvasOperations.ts
View file

@ -612,12 +612,11 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
} }
void nextTick(() => { void nextTick(() => {
workflowsStore.setNodePristine(nodeData.name, true);
if (!options.keepPristine) { if (!options.keepPristine) {
uiStore.stateIsDirty = true; uiStore.stateIsDirty = true;
} }
workflowsStore.setNodePristine(nodeData.name, true);
nodeHelpers.matchCredentials(nodeData); nodeHelpers.matchCredentials(nodeData);
nodeHelpers.updateNodeParameterIssues(nodeData); nodeHelpers.updateNodeParameterIssues(nodeData);
nodeHelpers.updateNodeCredentialIssues(nodeData); nodeHelpers.updateNodeCredentialIssues(nodeData);
@ -1378,15 +1377,15 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
nodeHelpers.credentialsUpdated.value = false; nodeHelpers.credentialsUpdated.value = false;
} }
async function initializeWorkspace(data: IWorkflowDb) { function initializeWorkspace(data: IWorkflowDb) {
// Set workflow data
workflowHelpers.initState(data); workflowHelpers.initState(data);
// Add nodes and connections data.nodes.forEach((node) => {
await addNodes(data.nodes, { keepPristine: true }); nodeHelpers.matchCredentials(node);
await addConnections(mapLegacyConnectionsToCanvasConnections(data.connections, data.nodes), {
keepPristine: true,
}); });
workflowsStore.setNodes(data.nodes);
workflowsStore.setConnections(data.connections);
} }
/** /**

4
packages/editor-ui/src/stores/workflows.store.ts
View file

@ -1046,6 +1046,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
function setNodes(nodes: INodeUi[]): void { function setNodes(nodes: INodeUi[]): void {
workflow.value.nodes = nodes; workflow.value.nodes = nodes;
nodeMetadata.value = nodes.reduce<NodeMetadataMap>((acc, node) => {
acc[node.name] = { pristine: true };
return acc;
}, {});
} }
function setConnections(connections: IConnections): void { function setConnections(connections: IConnections): void {

15
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -354,7 +354,7 @@ async function initializeWorkspaceForExistingWorkflow(id: string) {
try { try {
const workflowData = await workflowsStore.fetchWorkflow(id); const workflowData = await workflowsStore.fetchWorkflow(id);
await openWorkflow(workflowData); openWorkflow(workflowData);
if (workflowData.meta?.onboardingId) { if (workflowData.meta?.onboardingId) {
trackOpenWorkflowFromOnboardingTemplate(); trackOpenWorkflowFromOnboardingTemplate();
@ -379,11 +379,11 @@ async function initializeWorkspaceForExistingWorkflow(id: string) {
* Workflow * Workflow
*/ */
async function openWorkflow(data: IWorkflowDb) { function openWorkflow(data: IWorkflowDb) {
resetWorkspace(); resetWorkspace();
workflowHelpers.setDocumentTitle(data.name, 'IDLE'); workflowHelpers.setDocumentTitle(data.name, 'IDLE');
await initializeWorkspace(data); initializeWorkspace(data);
void externalHooks.run('workflow.open', { void externalHooks.run('workflow.open', {
workflowId: data.id, workflowId: data.id,
@ -815,7 +815,8 @@ async function importWorkflowExact({ workflow: workflowData }: { workflow: IWork
resetWorkspace(); resetWorkspace();
await initializeData(); await initializeData();
await initializeWorkspace({
initializeWorkspace({
...workflowData, ...workflowData,
nodes: NodeViewUtils.getFixedNodesList<INodeUi>(workflowData.nodes), nodes: NodeViewUtils.getFixedNodesList<INodeUi>(workflowData.nodes),
} as IWorkflowDb); } as IWorkflowDb);
@ -1074,7 +1075,9 @@ async function openExecution(executionId: string) {
} }
await initializeData(); await initializeData();
await initializeWorkspace(data.workflowData);
initializeWorkspace(data.workflowData);
workflowsStore.setWorkflowExecutionData(data); workflowsStore.setWorkflowExecutionData(data);
uiStore.stateIsDirty = false; uiStore.stateIsDirty = false;
@ -1254,7 +1257,7 @@ async function onSourceControlPull() {
const workflowData = await workflowsStore.fetchWorkflow(workflowId.value); const workflowData = await workflowsStore.fetchWorkflow(workflowId.value);
if (workflowData) { if (workflowData) {
workflowHelpers.setDocumentTitle(workflowData.name, 'IDLE'); workflowHelpers.setDocumentTitle(workflowData.name, 'IDLE');
await openWorkflow(workflowData); openWorkflow(workflowData);
} }
} }
} catch (error) { } catch (error) {