@elyx-code/editor-ui 0.0.2

package/src/services/execution/test-instance.tsx

@@ -0,0 +1,2296 @@
+import React from 'react';
+import {
+	FunctionCallState,
+	VariableDeclarationState,
+	DraggableExecutableEntityState,
+	DraggableCallerEntityState,
+	EntryPointEntityState,
+	DraggableCallableEntityState,
+	PassThroughCallableEntityState,
+	getParentCanvasEntity,
+	PropertyState,
+	EntityWithValueState,
+	OperationState,
+	ExecutionTerminationType,
+	TERMINATION_TYPES,
+	TerminationEntityState,
+	VARIABLE_TYPES,
+	CALLER_TYPES,
+	UserManagedEntityState,
+	FunctionDeclarationState,
+	EntityError,
+	ExecutableEntityState,
+	getRelatedCallableElementsOnTheRight,
+	flattenRelatedCallableElementsOnTheRight,
+	filterOutDuplicateEntities,
+	getParentEntryPoint,
+	CALLABLE_TYPES,
+	ENTRY_POINT_TYPES,
+	EXECUTABLE_TYPES,
+	EntityType,
+	PASS_THROUGH_CALLABLE_TYPES,
+	VariableState,
+	ITest,
+	flattenRelatedCallableElementsOnTheRightAsync,
+	filterOutDuplicateEntitiesAsync,
+	CallableEntityState,
+	getRelatedCallableElementsOnTheRightAsync,
+	CallerEntityState,
+	resolveEntityName
+} from '@elyx-code/project-logic-tree';
+import {
+	Execution,
+	ExecutionState,
+	IExecutionCallbackContext,
+	IExecutionClient,
+	IExecutionResult,
+	TestableEntityState
+} from '.';
+import { DraggableObject } from '../../lib/canvas';
+import {
+	getCanvasEntityEntryCallerNodeDOMId,
+	getCanvasEntityExecutionNodeId,
+	getCanvasEntityErrorCallerNodeDOMId,
+	getCanvasEntitySuccessCallerNodeDOMId,
+	getEntityIdFromCanvasId,
+	highlightElement,
+	getCanvasEntityDraggableContainerDOMId,
+	getMethodDeclarationDOMId
+} from '../editor/ui';
+import { EditorService } from '../editor';
+import { validateLogic, validateLogicAsync } from './logic';
+import { IDynamicValue } from '../editor/value-store';
+import TestMenu from '../../components/draggable-entity-card/TestMenu';
+import CanvasPopup, { ICanvasPopupProps } from '../editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { CanvasEntityElement } from '../editor/CanvasElement';
+import { createRoot, ReactRoot } from '../../utils/react';
+import { hasAnimation } from '../../utils/DOM';
+import WarningIcon from '../../assets/warning-sign-24px.png';
+import { Logger, YieldOptions, YieldTracker } from '@elyx-code/common-ts-utils';
+
+// Promise delay
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// Wait half the time given
+function delayHalf(ms: number) {
+	return delay(ms / 2);
+}
+
+let menuNode: ReactRoot;
+let requestedUnmountMenu: boolean = false;
+let activeUINodes: CanvasPopup[] = [];
+
+export interface IEntityComponentProps {
+	canvasElement: CanvasEntityElement;
+	entity: TestableEntityState;
+	project: EditorService;
+	disabled?: boolean;
+}
+
+// A test assembles a logic and executes it.
+// This class is the interface between the execution and the UX
+export class Test extends Execution implements ITest {
+	editor: EditorService;
+	// The entities that aren't part of the test,
+	// but have already been calculated to be related to the test
+	// and can be added
+	entitiesRelatedToExecution: TestableEntityState[] = [];
+
+	// The delay between execution steps
+	static DEFAULT_DELAY: number = 600;
+	DELAY: number = Test.DEFAULT_DELAY;
+
+	validation: EntityError[] = [];
+
+	persistExecutionValues: boolean = false;
+
+	constructor(project: EditorService, entryPoint: TestableEntityState) {
+		super(project.logic, [entryPoint], entryPoint, null, {
+			requestExtension: project.requestExtension,
+			getValueTypePreference: project.getValueTypePreference,
+			setValueTypePreference: project.setValueTypePreference
+		});
+		this.editor = project;
+
+		this.inheritValuesFromContext(this.editor);
+
+		this.onEntityExecuted = this.onEntityExecuted.bind(this);
+		this.onBeforeEntityExecution = this.onBeforeEntityExecution.bind(this);
+		this.onValueWritten = this.onValueWritten.bind(this);
+		this.onValueRemoved = this.onValueRemoved.bind(this);
+
+		// This is a callback that gets called when an entity is added to the test
+		this.onAddToSkippedList((entity) => {
+			this.notifyEntity(entity);
+
+			// Cancel the execution connection animation
+			if (CALLABLE_TYPES.includes(entity.type)) {
+				// Start animation of connection to the entities on the right
+				const canvasElement = this.editor.getElement(
+					getParentCanvasEntity(entity)?.id
+				);
+				const connectionsTargetId =
+					getCanvasEntityExecutionNodeId(entity);
+
+				canvasElement.draggableObject.connections.forEach(
+					(connection) => {
+						if (
+							connection.targetParentObject.id ===
+							connectionsTargetId
+						) {
+							connection.stopAnimation();
+							connection.element.classList.add('disabled');
+
+							if (connection.complementaryLineElement) {
+								connection.complementaryLineElement.classList.add(
+									'disabled'
+								);
+							}
+						}
+					}
+				);
+			}
+		});
+		this.onRemoveFromSkippedList(async (entity, options) => {
+			if (!options?.skipNotify) {
+				await this.notifyEntityAsync(entity);
+			}
+		});
+		this.onAbortExecution(async (entity, options) => {
+			Logger.log('Aborting execution for entity: ', entity.id);
+			if (!options?.skipNotify) {
+				await this.notifyEntityAsync(entity);
+			}
+			this.cancelSuccessAnimation(
+				entity as PassThroughCallableEntityState
+			);
+			this.cancelErrorAnimation(entity as PassThroughCallableEntityState);
+		});
+		this.onAddEntity(async (entity, options) => {
+			const tracker = YieldTracker.from(options || {});
+
+			if (!options?.skipValidate) {
+				await this.validateLogicAsync({ tracker });
+			}
+
+			if (!options?.skipNotify) {
+				await this.notifyEntityAsync(entity);
+			}
+
+			if (!options?.skipRender) {
+				await this.render();
+			}
+		});
+		this.onRemoveEntity(async (entity, options) => {
+			const tracker = YieldTracker.from(options || {});
+
+			if (!options?.skipValidate) {
+				await this.validateLogicAsync({ tracker });
+			}
+
+			if (!options?.skipNotify) {
+				await this.notifyEntityAsync(entity);
+			}
+
+			if (!options?.skipRender) {
+				await this.render();
+			}
+		});
+
+		this.lastExecutionResults.onWrite((owner, value) => {
+			this.editor.emit('value-written', {
+				owner,
+				value
+			});
+		});
+		this.lastExecutionResults.onRemove((owner) => {
+			this.editor.emit('value-removed', {
+				owner
+			});
+		});
+	}
+
+	static async handleEntityTestButtonClick(
+		e: MouseEvent,
+		props: IEntityComponentProps
+	) {
+		if (props.disabled) {
+			return;
+		}
+
+		if (
+			!props.project.test &&
+			props.entity.type !== EntityType.ReturnStatement &&
+			props.entity.type !== EntityType.ContinueStatement &&
+			props.entity.type !== EntityType.BreakStatement
+		) {
+			const autoExecute = !!(e.ctrlKey || e.metaKey);
+
+			props.project.initTest(props.entity, { autoExecute });
+			return;
+		}
+
+		if (!!props.project.test) {
+			const tracker = YieldTracker.from({});
+
+			const canBeAddedToCurrentTest =
+				props.project.test.getCanBeAddedToTest(props.entity);
+
+			const canBeRemovedFromCurrentTest =
+				props.project.test.getCanBeRemovedFromTest(props.entity);
+
+			// Remove entity from current test
+			if (canBeRemovedFromCurrentTest) {
+				props.project.test.removeEntity(props.entity);
+
+				if (
+					props.entity.type === EntityType.Loop &&
+					!!props.entity.body
+				) {
+					props.project.test?.removeEntity(props.entity.body);
+
+					const loopBodyEntities =
+						(await flattenRelatedCallableElementsOnTheRightAsync(
+							props.entity.body,
+							false,
+							{ tracker }
+						)) as (
+							| DraggableExecutableEntityState
+							| DraggableCallerEntityState
+							| VariableDeclarationState
+						)[];
+
+					for (const entity of loopBodyEntities) {
+						props.project.test?.removeEntity(entity);
+
+						await props.project.emitAsync(entity.id, {});
+
+						await tracker.tick();
+					}
+				}
+
+				// Add to current test
+			} else if (canBeAddedToCurrentTest) {
+				props.project.test.addEntity(props.entity);
+
+				if (
+					props.entity.type === EntityType.Loop &&
+					!!props.entity.body
+				) {
+					props.project.test?.addEntity(props.entity.body);
+
+					const loopBodyEntities =
+						(await flattenRelatedCallableElementsOnTheRightAsync(
+							props.entity.body,
+							false,
+							{ tracker }
+						)) as (
+							| DraggableExecutableEntityState
+							| DraggableCallerEntityState
+							| VariableDeclarationState
+						)[];
+
+					for (const entity of loopBodyEntities) {
+						props.project.test?.addEntity(entity);
+
+						await props.project.emitAsync(entity.id, {});
+
+						await tracker.tick();
+					}
+				}
+			}
+		}
+	}
+
+	get DELAY_LOCAL_STORAGE_KEY() {
+		return `${this.editor.logic.id}--execution-delay`;
+	}
+
+	get SHOULD_PERSIST_EXECUTION_VALUES_LOCAL_STORAGE_KEY() {
+		return `${this.editor.logic.id}--persist-execution-values`;
+	}
+
+	// Add the value of the store from the editor to the execution stores
+	initExecutionValueStores() {
+		this.localTestValues = this.editor.localTestValues;
+		this.persistedExecutionResults = this.editor.persistedExecutionResults;
+	}
+
+	async pause() {
+		// Pause the ongoing execution
+		this.state = ExecutionState.Paused;
+
+		await this.editor.emitAsync('test-paused', {});
+
+		this.render();
+	}
+
+	async stop(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		// Stop the ongoing execution
+		this.state = ExecutionState.Stopped;
+
+		await Promise.all([
+			this.resetUIState({ tracker }),
+
+			// Remove this instance from memory, so all its state will also be erased
+			this.editor.removeTest({ tracker, skipValidate: true }),
+
+			this.editor.emitAsync('test-exited', {})
+		]);
+
+		// Copy all values in the 'lastExecutionResults' store, into the 'persistedExecutionResults' store
+		if (this.persistExecutionValues) {
+			Logger.log('Saving last execution results into persisted results');
+			const allValuesFromExecution = this.lastExecutionResults.values;
+
+			for (const key of Object.keys(allValuesFromExecution)) {
+				const value = allValuesFromExecution[key];
+
+				const valueOwner = this.editor.logic.get(key) as
+					| PropertyState
+					| EntityWithValueState;
+
+				if (!valueOwner) {
+					return;
+				}
+
+				if (valueOwner.type === EntityType.ArgumentDeclaration) {
+					this.editor.persistedExecutionResults.writeValue(
+						valueOwner,
+						value
+					);
+				} else if (valueOwner.type === EntityType.OutputMap) {
+					if (
+						VARIABLE_TYPES.includes(valueOwner.parent.type) &&
+						valueOwner.declaration?.type === EntityType.Property &&
+						valueOwner.declaration.static
+					) {
+						this.editor.localTestValues.writeValue(
+							valueOwner,
+							value
+						);
+					} else {
+						this.editor.persistedExecutionResults.writeValue(
+							valueOwner,
+							value
+						);
+					}
+				} else {
+					this.editor.localTestValues.writeValue(valueOwner, value);
+				}
+
+				await tracker.tick();
+			}
+		} else {
+			const allValuesFromExecution = {
+				...this.lastExecutionResults.values
+			};
+			this.lastExecutionResults.clear();
+
+			await Promise.all(
+				Object.keys(allValuesFromExecution).map(async (key) => {
+					await this.editor.emitAsync(key, {});
+				})
+			);
+		}
+
+		await this.editor.validateProjectState({ tracker });
+
+		for (const error of this.validation) {
+			await this.notifyEntityAsync(error.entity as TestableEntityState);
+
+			await tracker.tick();
+		}
+
+		this.editor.emitAsync('test-exited', {});
+		await this.clear();
+
+		this.editor.off('value-written', this.onValueWritten);
+		this.editor.off('value-removed', this.onValueRemoved);
+	}
+
+	async resume() {
+		// Resume the ongoing execution
+		this.state = ExecutionState.Running;
+
+		await this.editor.emitAsync('test-resumed', {});
+	}
+
+	async close(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		this.state = ExecutionState.Stopped;
+
+		// Stop the ongoing execution
+		const oldMenuRef = menuNode;
+		requestedUnmountMenu = true;
+		await menuNode.unmount();
+		menuNode = undefined;
+
+		await Promise.all([
+			(async () => {
+				for (const canvasObj of this.editor.canvas.draggableObjects) {
+					this.editor.canvas.enable(canvasObj);
+
+					await tracker.tick();
+				}
+			})(),
+
+			this.stop({ tracker })
+		]);
+
+		try {
+			await oldMenuRef.unmount();
+		} catch (e) {
+			// Ignore errors here
+		}
+	}
+
+	async restart(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		// Restart the ongoing execution
+		this.state = ExecutionState.NotStarted;
+
+		await this.resetUIState({ tracker });
+		await this.editor.emitAsync('test-restart', {});
+
+		this.executing = [];
+
+		this.executed = [];
+
+		this.skipped = [];
+
+		await this.validateLogicAsync({ tracker });
+
+		// Run test instantly
+		if (!this.validation.length) {
+			await this.start({ tracker });
+		} else {
+			this.handleInvalidLogic();
+		}
+	}
+
+	async render() {
+		if (requestedUnmountMenu) {
+			return;
+		}
+
+		if (!menuNode) {
+			menuNode = createRoot('#test-menu-container');
+		}
+
+		await menuNode.render(TestMenu, {
+			project: this.editor
+		});
+	}
+
+	setDelay(delay: number) {
+		this.DELAY = delay;
+		localStorage.setItem(this.DELAY_LOCAL_STORAGE_KEY, String(delay));
+	}
+
+	setPersistExecutionValues(persist: boolean) {
+		this.persistExecutionValues = persist;
+		localStorage.setItem(
+			this.SHOULD_PERSIST_EXECUTION_VALUES_LOCAL_STORAGE_KEY,
+			String(persist)
+		);
+	}
+
+	async unmountMenu() {
+		requestedUnmountMenu = true;
+
+		if (menuNode) {
+			await menuNode.unmount();
+			menuNode = undefined;
+		}
+	}
+
+	// Checks the local storage for a persisted delay
+	// If it exists, it sets it as the current delay
+	// If it doesn't, it sets the default delay and persists it in the local storage
+	initPersistedDelayConfig() {
+		const persistedDelay = localStorage.getItem(
+			this.DELAY_LOCAL_STORAGE_KEY
+		);
+
+		if (persistedDelay) {
+			this.setDelay(Number(persistedDelay));
+		} else {
+			this.setDelay(Test.DEFAULT_DELAY);
+			localStorage.setItem(
+				this.DELAY_LOCAL_STORAGE_KEY,
+				String(Test.DEFAULT_DELAY)
+			);
+		}
+	}
+
+	// Checks the local storage for a persisted boolean
+	// If it exists, it sets it as the current value
+	// If it doesn't, it sets the default value and persists it in the local storage
+	initPersistedExecutionValuesConfig() {
+		const persistedValue = localStorage.getItem(
+			this.SHOULD_PERSIST_EXECUTION_VALUES_LOCAL_STORAGE_KEY
+		);
+
+		if (persistedValue) {
+			this.setPersistExecutionValues(persistedValue === 'true');
+		} else {
+			this.setPersistExecutionValues(false);
+			localStorage.setItem(
+				this.SHOULD_PERSIST_EXECUTION_VALUES_LOCAL_STORAGE_KEY,
+				String(false)
+			);
+		}
+	}
+
+	async onValueWritten(owner: EntityWithValueState, value: IDynamicValue) {
+		if (!this.editor.test) {
+			return;
+		}
+
+		if (this.state === ExecutionState.Running) {
+			this.render();
+			return;
+		}
+
+		await this.validateLogicAsync();
+		this.render();
+	}
+
+	async onValueRemoved(owner: EntityWithValueState) {
+		if (!this.editor.test) {
+			return;
+		}
+
+		if (this.state === ExecutionState.Running) {
+			this.render();
+			return;
+		}
+
+		await this.validateLogicAsync();
+		this.render();
+	}
+
+	async init(
+		options: YieldOptions & { autoExecute?: boolean } = {}
+	): Promise<void> {
+		const { autoExecute = false, ...yieldOptions } = options;
+		const tracker = YieldTracker.from(yieldOptions);
+
+		// Resolve stored local config values
+		this.initPersistedDelayConfig();
+		this.initPersistedExecutionValuesConfig();
+
+		// Render once the menu at the beginning to be responsive
+		requestedUnmountMenu = false;
+		await this.render();
+
+		if (ENTRY_POINT_TYPES.includes(this.entryPoint.type)) {
+			await this.addEntitiesAsync(
+				(await flattenRelatedCallableElementsOnTheRightAsync(
+					this.entryPoint,
+					false,
+					{ tracker }
+				)) as TestableEntityState[],
+				{
+					tracker,
+					skipRender: true,
+					skipValidate: true,
+					skipNotify: true
+				}
+			);
+		} else if (
+			this.entryPoint.type === EntityType.Loop &&
+			!!this.entryPoint.body
+		) {
+			await this.addEntitiesAsync(
+				(await flattenRelatedCallableElementsOnTheRightAsync(
+					this.entryPoint.body,
+					false,
+					{ tracker }
+				)) as TestableEntityState[],
+				{
+					tracker,
+					skipRender: true,
+					skipValidate: true,
+					skipNotify: true
+				}
+			);
+		}
+
+		this.lastExecutionResults?.clear();
+
+		this.editor.on('value-written', this.onValueWritten);
+		this.editor.on('value-removed', this.onValueRemoved);
+
+		// Loop over the entities already in the test execution state and emit an event so they can do their respective re-calculations
+		for (const entity of this.entities) {
+			await this.editor.emitAsync(entity.id, {});
+
+			await tracker.tick();
+		}
+
+		await this.recalculateEntitiesRelatedToTestAsync({ tracker });
+		await this.stopAllTestEntitiesExecutionConnectionAnimationsAsync({
+			tracker
+		});
+
+		await this.editor.emitAsync('test-setup-started', {});
+
+		console.log('[Test.init] about to validate logic');
+
+		this.validation = await validateLogicAsync(this.entities, this.editor, {
+			tracker
+		});
+
+		console.log('Validation: ', this.validation);
+
+		// Check if user is currently pressing the ctrl or ⌘ key
+		if (autoExecute) {
+			// Run test instantly
+			if (!this.validation.length) {
+				await this.start({ tracker });
+			} else {
+				this.handleInvalidLogic();
+			}
+		}
+
+		// Update the menu at the end of the setup with all the right data
+		await this.render();
+	}
+
+	// All cleanup logic should be done here
+	async clear() {
+		activeUINodes = [];
+		menuNode = undefined;
+
+		this.entities = [];
+
+		this.state = ExecutionState.NotStarted;
+
+		this.entitiesRelatedToExecution = [];
+
+		this.executing = [];
+
+		this.executed = [];
+
+		this.skipped = [];
+
+		this.validation = [];
+
+		this.lastExecutionResults.clear();
+
+		this.editor.test = null;
+	}
+
+	resolveIsContinuationOfSelectedLogic(entity: TestableEntityState): boolean {
+		const seenChildren: Set<string> = new Set();
+
+		const firstLevelChildrenOfTestEntities = filterOutDuplicateEntities(
+			this.entities.flatMap((entity) => {
+				if (seenChildren.has(entity.id)) {
+					return [];
+				}
+
+				seenChildren.add(entity.id);
+
+				const childrenOfTestEntities =
+					getRelatedCallableElementsOnTheRight(entity);
+
+				// Remove those that are not called by the entity or are variable declaration,
+				// so we don't get callable entities that aren't directly called by the entity
+				return childrenOfTestEntities.filter((child) => {
+					if (
+						CALLABLE_TYPES.includes(child.type) &&
+						!(
+							child as DraggableCallableEntityState
+						).calledBy.includes(
+							entity as DraggableCallerEntityState
+						)
+					) {
+						return false;
+					}
+
+					return true;
+				});
+			})
+		);
+
+		const isContinuationOfLogic =
+			firstLevelChildrenOfTestEntities.includes(entity);
+
+		return isContinuationOfLogic;
+	}
+
+	async recalculateEntitiesRelatedToTestAsync(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		const scopeOwnerOfEntryPointEntityOrSelf: TestableEntityState =
+			getParentEntryPoint(this.entryPoint) || this.entryPoint;
+
+		const allScopeChildren =
+			await flattenRelatedCallableElementsOnTheRightAsync(
+				scopeOwnerOfEntryPointEntityOrSelf,
+				false,
+				{ tracker }
+			);
+
+		const seenChildren: Set<string> = new Set();
+
+		const flat: (ExecutableEntityState | CallableEntityState)[] = [];
+
+		for (const entity of this.entities) {
+			if (seenChildren.has(entity.id)) {
+				continue;
+			}
+
+			seenChildren.add(entity.id);
+
+			const childrenOfTestEntities =
+				await getRelatedCallableElementsOnTheRightAsync(entity, false, {
+					tracker
+				});
+
+			// Remove those that are not called by the entity or are variable declaration,
+			// so we don't get callable entities that aren't directly called by the entity
+			flat.push(
+				...childrenOfTestEntities.filter((child) => {
+					if (
+						CALLABLE_TYPES.includes(child.type) &&
+						!(
+							child as DraggableCallableEntityState
+						).calledBy.includes(
+							entity as DraggableCallerEntityState
+						)
+					) {
+						return false;
+					}
+
+					return true;
+				})
+			);
+
+			await tracker.tick();
+		}
+
+		const firstLevelChildrenOfTestEntities =
+			await filterOutDuplicateEntitiesAsync(flat, { tracker });
+
+		for (const entity of allScopeChildren) {
+			const isChildAlreadyPartOfTest = this.hasEntityWithId(entity.id);
+			const isContinuationOfLogic =
+				firstLevelChildrenOfTestEntities.includes(entity);
+
+			if (
+				// If it isn't part of the test already
+				!isChildAlreadyPartOfTest &&
+				// AND isn't related to the selected objects on the right (meaning continuation of the already selected logic)
+				!isContinuationOfLogic
+			) {
+				this.removeFromCanBeAddedToTest(
+					entity as
+						| DraggableExecutableEntityState
+						| DraggableCallerEntityState
+						| VariableDeclarationState
+				);
+				this.editor.emit(entity.id, {});
+			} else {
+				if (isContinuationOfLogic && !isChildAlreadyPartOfTest) {
+					this.addToCanBeAddedToTest(
+						entity as
+							| DraggableExecutableEntityState
+							| DraggableCallerEntityState
+							| VariableDeclarationState
+					);
+					this.editor.emit(entity.id, {});
+				}
+			}
+
+			await tracker.tick();
+		}
+	}
+
+	recalculateEntitiesRelatedToTest() {
+		const scopeOwnerOfEntryPointEntityOrSelf: TestableEntityState =
+			getParentEntryPoint(this.entryPoint) || this.entryPoint;
+
+		const allScopeChildren = flattenRelatedCallableElementsOnTheRight(
+			scopeOwnerOfEntryPointEntityOrSelf
+		);
+
+		const seenChildren: Set<string> = new Set();
+
+		const firstLevelChildrenOfTestEntities = filterOutDuplicateEntities(
+			this.entities.flatMap((entity) => {
+				if (seenChildren.has(entity.id)) {
+					return [];
+				}
+
+				seenChildren.add(entity.id);
+
+				const childrenOfTestEntities =
+					getRelatedCallableElementsOnTheRight(entity);
+
+				// Remove those that are not called by the entity or are variable declaration,
+				// so we don't get callable entities that aren't directly called by the entity
+				return childrenOfTestEntities.filter((child) => {
+					if (
+						CALLABLE_TYPES.includes(child.type) &&
+						!(
+							child as DraggableCallableEntityState
+						).calledBy.includes(
+							entity as DraggableCallerEntityState
+						)
+					) {
+						return false;
+					}
+
+					return true;
+				});
+			})
+		);
+
+		allScopeChildren.forEach((entity) => {
+			const isChildAlreadyPartOfTest = this.hasEntityWithId(entity.id);
+			const isContinuationOfLogic =
+				firstLevelChildrenOfTestEntities.includes(entity);
+
+			if (
+				// If it isn't part of the test already
+				!isChildAlreadyPartOfTest &&
+				// AND isn't related to the selected objects on the right (meaning continuation of the already selected logic)
+				!isContinuationOfLogic
+			) {
+				this.removeFromCanBeAddedToTest(
+					entity as
+						| DraggableExecutableEntityState
+						| DraggableCallerEntityState
+						| VariableDeclarationState
+				);
+				this.editor.emit(entity.id, {});
+			} else {
+				if (isContinuationOfLogic && !isChildAlreadyPartOfTest) {
+					this.addToCanBeAddedToTest(
+						entity as
+							| DraggableExecutableEntityState
+							| DraggableCallerEntityState
+							| VariableDeclarationState
+					);
+					this.editor.emit(entity.id, {});
+				}
+			}
+		});
+	}
+
+	// If an entity is no longer connected to the rest of the test, remove it
+	// Return true if the entity was deleted
+	removeIfUnconnected(entity: TestableEntityState): boolean {
+		const isContinuationOfLogic =
+			this.resolveIsContinuationOfSelectedLogic(entity);
+
+		if (!isContinuationOfLogic) {
+			super.removeEntity(entity);
+			return true;
+		}
+
+		return false;
+	}
+
+	removeEntity(entity: TestableEntityState) {
+		Logger.log('Removing entity:', entity.id, this.entities);
+
+		super.removeEntity(entity); // This is done to avoid looping more than necessary
+		Logger.log('Entities after removal:', this.entities);
+
+		// We will recalculate and emit events only once, at the end
+		let deletedEntityIds: string[] = [entity.id];
+
+		// Remove all other entities that are connected to this one if they are in the test or in the related list
+		this.entities.forEach((entity) => {
+			const deleted = this.removeIfUnconnected(entity);
+			if (deleted) {
+				deletedEntityIds.push(entity.id);
+			}
+		});
+
+		this.recalculateEntitiesRelatedToTestAsync();
+
+		deletedEntityIds.forEach((id) => {
+			this.editor.emit(id, {});
+		});
+		this.editor.emit('test-entity-removed', {
+			entity
+		});
+
+		Logger.log('Recalculating validation');
+		this.validation = this.validateLogic();
+
+		Logger.log('Validation after removal: ', this.validation);
+
+		this.render();
+	}
+
+	addEntity(entity: TestableEntityState): void {
+		super.addEntity(entity);
+
+		const deps: TestableEntityState[] = [entity];
+
+		if (entity.type === EntityType.VariableInstance) {
+			[
+				entity.declaration,
+				...entity.declaration.variableInstances
+			].forEach((relatedEntity) => {
+				super.addEntity(relatedEntity);
+				if (relatedEntity.id !== entity.id) {
+					deps.push(relatedEntity);
+				}
+			});
+		}
+
+		// Remove entity from the list of entities that can be added to the test
+		const index = this.entitiesRelatedToExecution.indexOf(entity);
+		if (index > -1) {
+			this.entitiesRelatedToExecution.splice(index, 1);
+		}
+
+		this.validation = this.validateLogic();
+
+		this.recalculateEntitiesRelatedToTestAsync();
+
+		deps.forEach((ent) => {
+			this.editor.emit(ent.id, {});
+			this.editor.emit('test-entity-added', {
+				ent
+			});
+		});
+	}
+
+	async addEntityAsync(
+		entity: TestableEntityState,
+		options: YieldOptions & {
+			skipValidate?: boolean;
+			skipRender?: boolean;
+			skipNotify?: boolean;
+		} = {}
+	): Promise<void> {
+		super.addEntity(entity);
+
+		const deps: TestableEntityState[] = [entity];
+
+		const tracker = YieldTracker.from(options);
+
+		if (entity.type === EntityType.VariableInstance) {
+			for (const relatedEntity of [
+				entity.declaration,
+				...entity.declaration.variableInstances
+			]) {
+				super.addEntity(relatedEntity);
+				if (relatedEntity.id !== entity.id) {
+					deps.push(relatedEntity);
+				}
+				await tracker.tick();
+			}
+		}
+
+		// Remove entity from the list of entities that can be added to the test
+		const index = this.entitiesRelatedToExecution.indexOf(entity);
+		if (index > -1) {
+			this.entitiesRelatedToExecution.splice(index, 1);
+		}
+
+		this.validation = this.validateLogic();
+
+		await this.recalculateEntitiesRelatedToTestAsync({
+			tracker,
+			...options
+		});
+
+		for (const ent of deps) {
+			await this.editor.emitAsync(ent.id, {});
+			await this.editor.emitAsync('test-entity-added', {
+				ent
+			});
+
+			await tracker.tick();
+		}
+	}
+
+	addEntities(entities: TestableEntityState[]) {
+		entities.forEach((entity) => this.addEntity(entity));
+	}
+
+	async addEntitiesAsync(
+		entities: TestableEntityState[],
+		options: YieldOptions & {
+			skipValidate?: boolean;
+			skipRender?: boolean;
+			skipNotify?: boolean;
+		} = {}
+	) {
+		const tracker = YieldTracker.from(options);
+
+		const promises: Promise<void>[] = [];
+
+		for (const entity of entities) {
+			promises.push(this.addEntityAsync(entity, options));
+
+			await tracker.tick();
+		}
+
+		await Promise.all(promises);
+	}
+
+	disabledConnectionsNotInTest(
+		draggableObject: DraggableObject,
+		entity: UserManagedEntityState
+	) {
+		if (draggableObject.canvas.disabled) {
+			draggableObject.connections.forEach((connection) => {
+				connection.disable();
+				connection.element.classList.add('disabled');
+
+				if (connection.complementaryLineElement) {
+					connection.complementaryLineElement.classList.add(
+						'disabled'
+					);
+				}
+			});
+
+			return;
+		}
+
+		const canBeAddedToCurrentTest = this.getCanBeAddedToTest(entity);
+
+		const isPartOfTest = this.hasEntity(
+			entity as
+				| DraggableExecutableEntityState
+				| DraggableCallerEntityState
+				| VariableState
+		);
+
+		// If the entity is not part of the test or related to it then
+		// Make sure all connections are disabled
+		// If the test is running, we disable also entities related to the test but not in it
+		if (
+			!isPartOfTest &&
+			(this.state === ExecutionState.Running
+				? true
+				: !canBeAddedToCurrentTest)
+		) {
+			draggableObject.connections.forEach((connection) => {
+				const sourceEntityId = getEntityIdFromCanvasId(
+					connection.startId
+				);
+				const targetEntityId = getEntityIdFromCanvasId(
+					connection.endId
+				);
+
+				const sourceEntity = this.editor.logic.get(
+					sourceEntityId
+				) as UserManagedEntityState;
+				const targetEntity = this.editor.logic.get(
+					targetEntityId
+				) as UserManagedEntityState;
+
+				const sourceIsInTest = this.hasEntity(
+					sourceEntity as
+						| DraggableExecutableEntityState
+						| DraggableCallerEntityState
+						| VariableDeclarationState
+				);
+				const targetIsInTest = this.hasEntity(
+					targetEntity as
+						| DraggableExecutableEntityState
+						| DraggableCallerEntityState
+						| VariableDeclarationState
+				);
+
+				if (!sourceIsInTest && !targetIsInTest) {
+					connection.disable();
+					connection.element.classList.add('disabled');
+
+					if (connection.complementaryLineElement) {
+						connection.complementaryLineElement.classList.add(
+							'disabled'
+						);
+					}
+				}
+			});
+
+			return;
+		}
+
+		// Set connections that don't come from other entities in the test to disabled
+		// By adding the 'disabled' class to them
+		draggableObject.connections.forEach((connection) => {
+			const sourceEntityId = getEntityIdFromCanvasId(connection.startId);
+			const targetEntityId = getEntityIdFromCanvasId(connection.endId);
+
+			const sourceEntity = this.editor.logic.get(
+				sourceEntityId
+			) as UserManagedEntityState;
+			const targetEntity = this.editor.logic.get(
+				targetEntityId
+			) as UserManagedEntityState;
+
+			const counterpartEntity =
+				connection.sourceParentObject === draggableObject
+					? targetEntity
+					: sourceEntity;
+
+			if (counterpartEntity) {
+				const counterpartIsInTest = this.hasEntity(
+					counterpartEntity as
+						| DraggableExecutableEntityState
+						| DraggableCallerEntityState
+						| VariableDeclarationState
+				);
+
+				if (counterpartIsInTest) {
+					// Remove the disabled class if it has it
+					connection.enable();
+					connection.element.classList.remove('disabled');
+					return;
+				}
+			} else {
+				connection.disable();
+				connection.element.classList.add('disabled');
+
+				if (connection.complementaryLineElement) {
+					connection.complementaryLineElement.classList.add(
+						'disabled'
+					);
+				}
+			}
+		});
+	}
+
+	// An entity is available to be added to the test if it is related to the entities in the test logic but not yet in the test
+	getCanBeAddedToTest(entity: UserManagedEntityState): boolean {
+		const result =
+			this.entitiesRelatedToExecution.includes(
+				entity as TestableEntityState
+			) && !this.hasEntity(entity);
+
+		return result;
+	}
+
+	removeFromCanBeAddedToTest(entity: TestableEntityState) {
+		const index = this.entitiesRelatedToExecution.indexOf(entity);
+
+		if (index > -1) {
+			this.entitiesRelatedToExecution.splice(index, 1);
+			this.notifyEntity(entity);
+		}
+	}
+
+	// An entity is available to be added to the test if it is related to the entities in the test logic
+	addToCanBeAddedToTest(entity: TestableEntityState) {
+		if (!this.entitiesRelatedToExecution.includes(entity)) {
+			this.entitiesRelatedToExecution.push(entity);
+			this.notifyEntity(entity);
+		}
+	}
+
+	// An entity is available to be removed from the test when it is in the test and it is not the entry point
+	getCanBeRemovedFromTest(entity: TestableEntityState): boolean {
+		if (entity === this.entryPoint) {
+			return false;
+		}
+
+		return this.entities.includes(
+			entity as
+				| DraggableExecutableEntityState
+				| DraggableCallerEntityState
+				| VariableState
+		);
+	}
+
+	// Test if the given entry point has all the arguments required to be executed
+	validateLogic(): EntityError[] {
+		const errors = validateLogic(this.entities, this.editor);
+
+		errors.forEach((error) => {
+			this.notifyEntity(error.entity as TestableEntityState);
+		});
+
+		return errors;
+	}
+
+	async validateLogicAsync(
+		options: YieldOptions = {}
+	): Promise<EntityError[]> {
+		const tracker = YieldTracker.from(options);
+
+		const errors = await validateLogicAsync(
+			this.entities,
+			this.editor,
+			options
+		);
+
+		console.log(
+			'[Test.validateLogicAsync] Errors: ',
+			errors.map(
+				(e) =>
+					`${e.entity.type}: "${resolveEntityName(e.entity, this.project)}" -> ${e.code}`
+			)
+		);
+
+		for (const error of errors) {
+			this.notifyEntity(error.entity as TestableEntityState);
+
+			await tracker.tick();
+		}
+
+		return errors;
+	}
+
+	async validate() {
+		this.validation = await this.validateLogicAsync();
+
+		await this.render();
+	}
+
+	async validateAsync(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		this.validation = await this.validateLogicAsync({ tracker });
+
+		await this.render();
+	}
+
+	cancelSuccessAnimation(entity: PassThroughCallableEntityState) {
+		const successElementId = getCanvasEntitySuccessCallerNodeDOMId(entity);
+
+		const successEntity = document.getElementById(
+			successElementId
+		) as HTMLElement;
+
+		// Remove the 'bounce' class from the success entity in order to stop the animation
+		successEntity?.classList.remove('bounce');
+	}
+
+	cancelErrorAnimation(entity: PassThroughCallableEntityState) {
+		const errorElementId = getCanvasEntityErrorCallerNodeDOMId(entity);
+
+		const errorEntity = document.getElementById(
+			errorElementId
+		) as HTMLElement;
+
+		// Remove the 'bounce' class from the error entity in order to stop the animation
+		errorEntity?.classList.remove('bounce');
+	}
+
+	cancelEntryPointCallerAnimation(entity: EntryPointEntityState) {
+		const callerNodeElementId = getCanvasEntityEntryCallerNodeDOMId(entity);
+
+		const callerNodeEntity = document.getElementById(
+			callerNodeElementId
+		) as HTMLElement;
+
+		// Remove the 'bounce' class from the caller entity in order to stop the animation
+		callerNodeEntity?.classList.remove('bounce');
+	}
+
+	async removeEntryPointCallerPopup(entity: EntryPointEntityState) {
+		const popupId = 'entry-point-caller-tooltip--' + entity.id;
+
+		await this.removePopupById(popupId);
+	}
+
+	async removeErrorCallPopup(entity: PassThroughCallableEntityState) {
+		const popupId = 'error-tooltip--' + entity.id;
+
+		await this.removePopupById(popupId);
+	}
+
+	async removeSuccessCallPopup(entity: PassThroughCallableEntityState) {
+		const popupId = 'success-tooltip--' + entity.id;
+
+		await this.removePopupById(popupId);
+	}
+
+	async animateEntryPointCallerNode(entity: EntryPointEntityState) {
+		// Animate the branch node
+		const callerNodeElementId = getCanvasEntityEntryCallerNodeDOMId(entity);
+
+		const callerNodeEntity = document.querySelector(
+			`#${callerNodeElementId}`
+		) as HTMLElement;
+
+		// Add the 'bounce' class to the caller entity in order to animate it
+		callerNodeEntity.classList.add('bounce');
+
+		const callerNodeElementContainerId =
+			getCanvasEntityEntryCallerNodeDOMId(entity) + '--container';
+
+		const parentCanvasElement = this.editor.getElement(
+			getParentCanvasEntity(entity)?.id
+		);
+
+		// Add tooltip to branch node
+		this.popup(
+			{
+				anchorQuerySelector: `#${callerNodeElementContainerId}`,
+				id: 'entry-point-caller-tooltip--' + entity.id,
+				parentCanvasObject: parentCanvasElement.draggableObject,
+				persisted: true,
+				editor: this.editor
+			},
+			() => [
+				CanvasPopupBaseComponent,
+				{
+					onClick: (e: any) => {
+						e.stopPropagation();
+					},
+					containerClasses: ['tooltip']
+				},
+				'Start'
+			],
+			parentCanvasElement
+		);
+
+		const callerNodeElementContainer = document.querySelector(
+			`#${callerNodeElementContainerId}`
+		) as HTMLElement;
+
+		callerNodeElementContainer.classList.add('bounce');
+
+		// The caller label should only be animated for 400ms then stop. While the node continues
+		setTimeout(() => {
+			callerNodeElementContainer.classList.remove('bounce');
+		}, 400);
+	}
+
+	async animateErrorNode(
+		entity: PassThroughCallableEntityState,
+		type:
+			| ExecutionTerminationType.CaughtError
+			| ExecutionTerminationType.UnhandledError
+	) {
+		// Animate the failure branch node
+		const errorElementId = getCanvasEntityErrorCallerNodeDOMId(entity);
+
+		const errorEntity = document.querySelector(
+			`#${errorElementId}`
+		) as HTMLElement;
+
+		// Add the 'bounce' class to the error entity in order to animate it
+		errorEntity.classList.add('bounce');
+
+		const errorElementContainerId =
+			getCanvasEntityErrorCallerNodeDOMId(entity) + '--container';
+
+		const parentCanvasElement = this.editor.getElement(
+			getParentCanvasEntity(entity)?.id
+		);
+
+		const popupId = 'error-tooltip--' + entity.id;
+
+		// Add tooltip to failure branch node
+		this.popup(
+			{
+				anchorQuerySelector: `#${errorElementContainerId}`,
+				id: popupId,
+				parentCanvasObject: parentCanvasElement.draggableObject,
+				arrowClasses: ['error-background'],
+				persisted: true,
+				editor: this.editor
+			},
+			() => [
+				CanvasPopupBaseComponent,
+				{
+					onClick: (e: any) => {
+						e.stopPropagation();
+					},
+					containerClasses: ['tooltip', 'error-background']
+				},
+				<>
+					{entity.type === EntityType.Condition ? (
+						'False'
+					) : type === ExecutionTerminationType.CaughtError ? (
+						'Error'
+					) : (
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: '4px'
+							}}
+						>
+							<img
+								src={WarningIcon}
+								className="warning-icon logic-error-icon"
+							/>
+							Unhandled Error!
+						</span>
+					)}
+				</>
+			],
+			parentCanvasElement
+		);
+
+		const errorElementContainer = document.querySelector(
+			`#${errorElementContainerId}`
+		) as HTMLElement;
+
+		errorElementContainer.classList.add('bounce');
+
+		// The error label should only be animated for 400ms then stop. While the node continues
+		setTimeout(() => {
+			errorElementContainer.classList.remove('bounce');
+		}, 400);
+	}
+
+	async animateSuccessNode(entity: PassThroughCallableEntityState) {
+		// Animate the success branch node
+		const successElementId = getCanvasEntitySuccessCallerNodeDOMId(entity);
+
+		const successEntity = document.querySelector(
+			`#${successElementId}`
+		) as HTMLElement;
+
+		// Add the 'bounce' class to the success entity in order to animate it
+		successEntity.classList.add('bounce');
+
+		const successElementContainerId =
+			getCanvasEntitySuccessCallerNodeDOMId(entity) + '--container';
+
+		const parentCanvasElement = this.editor.getElement(
+			getParentCanvasEntity(entity)?.id
+		);
+
+		// Add tooltip to success branch node
+		this.popup(
+			{
+				anchorQuerySelector: `#${successElementContainerId}`,
+				parentCanvasObject: parentCanvasElement.draggableObject,
+				id: 'success-tooltip--' + entity.id,
+				arrowClasses: ['success-background'],
+				persisted: true,
+				editor: this.editor
+			},
+			() => [
+				CanvasPopupBaseComponent,
+				{
+					onClick: (e: any) => {
+						e.stopPropagation();
+					},
+					containerClasses: ['tooltip', 'success-background']
+				},
+				entity.type === EntityType.Condition ? 'True' : 'Success'
+			],
+			parentCanvasElement
+		);
+
+		const successElementContainer = document.querySelector(
+			`#${successElementContainerId}`
+		) as HTMLElement;
+
+		successElementContainer.classList.add('bounce');
+
+		// The success label should only be animated for 400ms then stop. While the node continues
+		setTimeout(() => {
+			successElementContainer.classList.remove('bounce');
+		}, 400);
+	}
+
+	// A generic function that based on type, animates the output node that calles the next entity
+	async animateCallerNode(
+		entity: ExecutableEntityState,
+		type:
+			| ExecutionTerminationType.Success
+			| ExecutionTerminationType.CaughtError
+			| ExecutionTerminationType.UnhandledError
+	) {
+		if (PASS_THROUGH_CALLABLE_TYPES.includes(entity.type)) {
+			if (type === ExecutionTerminationType.Success) {
+				await this.animateSuccessNode(
+					entity as PassThroughCallableEntityState
+				);
+			} else if (
+				type === ExecutionTerminationType.CaughtError ||
+				type === ExecutionTerminationType.UnhandledError
+			) {
+				await this.animateErrorNode(
+					entity as PassThroughCallableEntityState,
+					type
+				);
+			}
+		} else if (ENTRY_POINT_TYPES.includes(entity.type)) {
+			await this.animateEntryPointCallerNode(
+				entity as EntryPointEntityState
+			);
+		}
+	}
+
+	// Sets up a new popup
+	async popup(
+		popupProps: ICanvasPopupProps,
+		callback: (canvasObject: CanvasPopup) =>
+			| [
+					(
+						| string
+						| number
+						| boolean
+						| React.FC<any>
+						| React.ComponentType<any>
+					),
+					{
+						[key: string]: any;
+					}
+			  ]
+			| [
+					(
+						| string
+						| number
+						| boolean
+						| React.FC<any>
+						| React.ComponentType<any>
+					),
+					{
+						[key: string]: any;
+					},
+					React.ReactNode
+			  ],
+		parentCanvasElement: CanvasEntityElement
+	): Promise<CanvasPopup> {
+		const newPopup = CanvasPopup.init({
+			...popupProps
+		});
+
+		newPopup.setup();
+
+		await newPopup.bodyAsync(callback);
+
+		newPopup.show(false);
+
+		if (!activeUINodes.find((node) => node.id === newPopup.id)) {
+			activeUINodes.push(newPopup);
+		}
+
+		const refreshListener = async () => {
+			await newPopup.refreshAsync(callback);
+			newPopup.show(false);
+		};
+
+		parentCanvasElement.node.on('update', refreshListener);
+
+		const unMountListener = async () => {
+			parentCanvasElement.node.off('update', refreshListener);
+			parentCanvasElement.node.off('unmount', unMountListener);
+
+			await this.removePopupById(newPopup.id);
+		};
+
+		parentCanvasElement.node.on('unmount', unMountListener);
+
+		return newPopup;
+	}
+
+	async removePopupById(popupId: string) {
+		const popup = activeUINodes.find((node) => node.id === popupId);
+
+		// remove from list of active popups
+		activeUINodes = activeUINodes.filter((node) => node.id !== popupId);
+
+		if (popup) {
+			await popup.destroy();
+		}
+	}
+
+	async removeAllPopups(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		const promises = [];
+
+		for (const popup of activeUINodes) {
+			promises.push(
+				(async () => {
+					await popup.destroy();
+				})()
+			);
+
+			await tracker.tick();
+		}
+
+		await Promise.all(promises);
+
+		activeUINodes = [];
+	}
+
+	/*
+		This function gets triggered every time an entity is about to be executed
+
+		It is used as a bridge between the logic execution and the interface
+		It queues animations for the UI based on the result of the execution
+		And handles any relevant state
+
+		Animations:
+			- When an entity is about to be executed, animate the connectiono leading from its caller into itself
+			- Add a delay before returning so the animation has time to play before the actual subsequent execution
+			- Animate the input values to make it clear they have received the values from previous entities
+			- Highlight the current entity that is being executed
+	*/
+	async onBeforeEntityExecution(
+		entity: TestableEntityState,
+		values: IDynamicValue[],
+		context: IExecutionCallbackContext
+	) {
+		if (
+			[
+				ExecutionState.Stopped,
+				ExecutionState.Paused,
+				ExecutionState.NotStarted
+			].includes(this.state)
+		) {
+			return;
+		}
+
+		Logger.log(
+			'---------- onBeforeEntityExecution writing values ---------'
+		);
+		const targetExecution = context.execution || this;
+		values.forEach((value) => {
+			Logger.log('Value: ', value.valueOwner?.type, value.value?.value);
+			targetExecution.lastExecutionResults.writeValue(value.valueOwner, value.value);
+		});
+
+		// Animate the incomming connection that execute the current entity
+		const canvasElement = this.editor.getElement(
+			getParentCanvasEntity(entity)?.id
+		);
+
+		// If the entity is a variable declaration, any incomming connection is considered the caller
+		// if (entity.type === EntityType.VariableDeclaration) {
+		// 	// Check if it is a method (function declaration inside another canvas element)
+		// } else if (
+		if (
+			entity.type === EntityType.FunctionDeclaration &&
+			entity.parent.type !== EntityType.Project
+		) {
+			// Delete all previous popups related to it (in case this is a loop)
+			// Because this method gets executed multiple times and we need to clear the previous popups everytime the iteration restarts
+			if (entity.parent.type === EntityType.Loop) {
+				const allEntitiesRelatedToLoopBody =
+					flattenRelatedCallableElementsOnTheRight(
+						entity
+					) as DraggableCallableEntityState[];
+
+				if (!context.detached) {
+					this.cancelEntryPointCallerAnimation(entity);
+
+					// Remove them from the state lists of 'executed', 'skipped' and 'executing'
+					// so they can be re-added when the loop restarts
+					allEntitiesRelatedToLoopBody.forEach((ent) => {
+						this.removeFromExecutingList(ent);
+						this.removeFromAlreadyExecutedList(ent);
+						this.removeFromSkippedList(ent);
+					});
+				}
+
+				if (!context.detached) {
+					await Promise.all([
+						...allEntitiesRelatedToLoopBody.map(async (ent) => {
+							let allEntitiesWithValuePopups: EntityWithValueState[] =
+								[];
+							let allChildrenPromises: Promise<void>[] = [];
+
+							if (
+								PASS_THROUGH_CALLABLE_TYPES.includes(ent.type)
+							) {
+								allEntitiesWithValuePopups =
+									(ent as OperationState).outputs || [];
+
+								// stop all animations
+								this.cancelSuccessAnimation(
+									ent as PassThroughCallableEntityState
+								);
+								this.cancelErrorAnimation(
+									ent as PassThroughCallableEntityState
+								);
+
+								// Remove all popups
+								allChildrenPromises.push(
+									this.removeSuccessCallPopup(
+										ent as PassThroughCallableEntityState
+									),
+									this.removeErrorCallPopup(
+										ent as PassThroughCallableEntityState
+									)
+								);
+							} else if (TERMINATION_TYPES.includes(ent.type)) {
+								allEntitiesWithValuePopups =
+									(ent as TerminationEntityState).outputs ||
+									[];
+							}
+
+							allChildrenPromises.push(
+								...allEntitiesWithValuePopups.map(
+									async (entityWithValue) => {
+										const popupId = `execution-result--value-popup--${entityWithValue.id}`;
+
+										this.removePopupById(popupId);
+									}
+								)
+							);
+
+							await Promise.all(allChildrenPromises);
+
+							const canvasElementOfEntity =
+								this.editor.getElement(ent.id);
+
+							if (canvasElementOfEntity) {
+								canvasElementOfEntity.draggableObject.connections.forEach(
+									(connection) => {
+										connection.stopAnimation();
+										connection.resetOptions();
+									}
+								);
+							}
+						}),
+						...entity.inputs.map(async (input) => {
+							const popupId = `execution-result--value-popup--${input.id}`;
+
+							this.removePopupById(popupId);
+						}),
+						this.removeEntryPointCallerPopup(entity)
+					]);
+				}
+			}
+
+			if (
+				[
+					ExecutionState.Stopped,
+					ExecutionState.Paused,
+					ExecutionState.NotStarted
+				].includes(this.state)
+			) {
+				return;
+			}
+
+			// Wait
+			if (!context.detached) {
+				await delayHalf(this.DELAY);
+			}
+
+			if (
+				[
+					ExecutionState.Stopped,
+					ExecutionState.Paused,
+					ExecutionState.NotStarted
+				].includes(this.state)
+			) {
+				return;
+			}
+
+			// Update the UI so it starts its animations
+			if (!context.detached) {
+				this.notifyEntity(entity);
+
+				this.stopAllTestEntitiesExecutionConnectionAnimations();
+			}
+
+			if (
+				[
+					ExecutionState.Stopped,
+					ExecutionState.Paused,
+					ExecutionState.NotStarted
+				].includes(this.state)
+			) {
+				return;
+			}
+
+			// Re-Animate as usual
+			// If there is any delay, no matter how much, wait for the animation
+			if (this.DELAY && !context.detached) {
+				// Highlight the current entity that is being executed
+				const elementToHighlight = document.getElementById(
+					getMethodDeclarationDOMId(entity)
+				);
+
+				highlightElement(elementToHighlight);
+
+				// wait for animation to end
+				await this.waitForAnimationEnd(elementToHighlight);
+				return;
+			}
+			// For all other entities
+		} else if (CALLABLE_TYPES.includes(entity.type)) {
+			// Check if the entity is called by the success or failure branch of its caller
+			// and change the connection animation color accordingly
+			(entity as FunctionCallState).calledBy.forEach(
+				(caller: CallerEntityState) => {
+					if (
+						[
+							ExecutionState.Stopped,
+							ExecutionState.Paused,
+							ExecutionState.NotStarted
+						].includes(this.state)
+					) {
+						return;
+					}
+
+					if (!caller || !this.entities.includes(caller)) {
+						return;
+					}
+
+					const isCalledBySuccessBranch = (
+						(caller as FunctionCallState).successCalls || []
+					).find((call) => call === entity);
+
+					const isCalledByErrorBranch = (
+						(caller as FunctionCallState).errorCalls || []
+					).find((call) => call === entity);
+
+					const isNeutralCall = (
+						(caller as EntryPointEntityState).calls || []
+					).find((call) => call === entity);
+
+					if (!context.detached) {
+						canvasElement.draggableObject.connections.forEach(
+							(connection) => {
+								if (
+									[
+										ExecutionState.Stopped,
+										ExecutionState.Paused,
+										ExecutionState.NotStarted
+									].includes(this.state)
+								) {
+									return;
+								}
+
+								// If this is the target entity
+								if (
+									connection.targetParentObject ===
+									canvasElement.draggableObject
+								) {
+									// And the connection targets the execution node
+									if (
+										connection.endId ===
+										getCanvasEntityExecutionNodeId(entity)
+									) {
+										connection.resetOptions();
+
+										if (isCalledBySuccessBranch) {
+											connection.color =
+												'var(--color-main-success)';
+
+											connection.startAnimation();
+											connection.update();
+										} else if (isCalledByErrorBranch) {
+											connection.color =
+												'var(--color-main-error)';
+
+											connection.startAnimation();
+											connection.update();
+										} else if (isNeutralCall) {
+											connection.color =
+												'var(--color-main-primary)';
+
+											connection.startAnimation();
+											connection.update();
+										}
+									}
+								}
+							}
+						);
+					}
+				}
+			);
+		}
+
+		if (
+			[
+				ExecutionState.Stopped,
+				ExecutionState.Paused,
+				ExecutionState.NotStarted
+			].includes(this.state)
+		) {
+			return;
+		}
+
+		// Wait
+		if (!context.detached) {
+			await delayHalf(this.DELAY);
+		}
+
+		if (
+			[
+				ExecutionState.Stopped,
+				ExecutionState.Paused,
+				ExecutionState.NotStarted
+			].includes(this.state)
+		) {
+			return;
+		}
+
+		// Update the UI so it starts its animations
+		if (!context.detached) {
+			this.notifyEntity(entity);
+
+			this.stopAllTestEntitiesExecutionConnectionAnimations();
+		}
+
+		if (
+			[
+				ExecutionState.Stopped,
+				ExecutionState.Paused,
+				ExecutionState.NotStarted
+			].includes(this.state)
+		) {
+			return;
+		}
+
+		// If there is any delay, no matter how much, wait for the animation
+		if (this.DELAY && !context.detached) {
+			// Highlight the current entity that is being executed
+			const elementToHighlight =
+				canvasElement.cardBody ||
+				canvasElement.ref ||
+				canvasElement.draggableObject.element;
+
+			highlightElement(elementToHighlight);
+
+			// wait for animation to end
+			await this.waitForAnimationEnd(elementToHighlight);
+		}
+	}
+
+	async waitForAnimationEnd(element: HTMLElement) {
+		return new Promise((resolve) => {
+			if (!hasAnimation(element)) {
+				resolve(null);
+				return;
+			}
+
+			if (element.getAnimations().length === 0) {
+				resolve(null);
+				return;
+			}
+
+			const handleAnimationEnd = () => {
+				element.removeEventListener('animationend', handleAnimationEnd);
+				element.removeEventListener(
+					'animationcancel',
+					handleAnimationEnd
+				);
+				element.removeEventListener(
+					'transitionend',
+					handleAnimationEnd
+				);
+				resolve(null);
+			};
+
+			element.addEventListener('animationend', handleAnimationEnd);
+			element.addEventListener('animationcancel', handleAnimationEnd);
+			// Transition end
+			element.addEventListener('transitionend', handleAnimationEnd);
+		});
+	}
+
+	// Triggers an event that UI elememnts can subscribe to and update their state
+	notifyEntity(entity: TestableEntityState) {
+		this.editor.emit(entity.id, {});
+	}
+
+	async notifyEntityAsync(entity: TestableEntityState) {
+		await this.editor.emitAsync(entity.id, {});
+	}
+
+	/*
+		This function gets triggered every time an entity is executed
+
+		It is used as a bridge between the logic execution and the interface
+		It queues animations for the UI based on the result of the execution
+		And handles any relevant state
+
+		Animations:
+			- When an entity has completed executing, it will animate the output node that calls the next entity
+			- We also animate any return values (outputs on the right of the entity card)
+	*/
+	async onEntityExecuted(
+		entity: TestableEntityState,
+		result: IExecutionResult,
+		context: IExecutionCallbackContext
+	) {
+		if (context.detached) {
+			return;
+		}
+
+		const isLoopBody =
+			entity.type === EntityType.FunctionDeclaration &&
+			entity.parent.type === EntityType.Loop;
+
+		// We don't add the body of the loop, because it needs to be executed multiple times
+		if (!isLoopBody) {
+			// Add entity to the list of entities that have already been executed
+			this.addToAlreadyExecutedList(entity);
+		}
+
+		// Remove entity from the list of entities that are currently being executed
+		this.removeFromExecutingList(entity);
+
+		this.notifyEntity(entity);
+		this.stopAllTestEntitiesExecutionConnectionAnimations();
+
+		if (
+			[
+				ExecutionState.Stopped,
+				ExecutionState.Paused,
+				ExecutionState.NotStarted
+			].includes(this.state)
+		) {
+			return;
+		}
+
+		if (EXECUTABLE_TYPES.includes(entity.type)) {
+			await this.animateCallerNode(
+				entity as ExecutableEntityState,
+				result.value as
+					| ExecutionTerminationType.Success
+					| ExecutionTerminationType.CaughtError
+			);
+		}
+
+		if (CALLER_TYPES.includes(entity.type)) {
+			// Start animation of connection to the entities on the right
+			const canvasElement = this.editor.getElement(
+				getParentCanvasEntity(entity)?.id
+			);
+
+			canvasElement.draggableObject.connections.forEach((connection) => {
+				const allCallees = [];
+
+				if (result.value === ExecutionTerminationType.CaughtError) {
+					allCallees.push(
+						...((entity as FunctionCallState).errorCalls || [])
+					);
+				} else if (result.value === ExecutionTerminationType.Success) {
+					allCallees.push(
+						...((entity as FunctionCallState).successCalls || [])
+					);
+					allCallees.push(
+						...((entity as FunctionDeclarationState).calls || [])
+					);
+				}
+
+				const calleeEntity = allCallees.find(
+					(callee) =>
+						getCanvasEntityExecutionNodeId(callee) ===
+						connection.endId
+				);
+
+				if (!calleeEntity) {
+					return;
+				}
+
+				const targetIdIsPartOfTest = this.hasEntity(calleeEntity);
+
+				if (!targetIdIsPartOfTest) {
+					return;
+				}
+
+				const isSkipped = this.hasSkipped(calleeEntity);
+
+				if (isSkipped) {
+					return;
+				}
+
+				const isSuccessCall =
+					getCanvasEntitySuccessCallerNodeDOMId(entity) ===
+					connection.startId;
+				const isErrorCall =
+					getCanvasEntityErrorCallerNodeDOMId(entity) ===
+					connection.startId;
+				const isNeutralCall =
+					getCanvasEntityEntryCallerNodeDOMId(entity) ===
+					connection.startId;
+
+				if (isSuccessCall) {
+					connection.color = 'var(--color-main-success)';
+				} else if (isErrorCall) {
+					connection.color = 'var(--color-main-error)';
+				} else if (isNeutralCall) {
+					connection.color = 'var(--color-main-primary)';
+				}
+
+				connection.startAnimation();
+				connection.update();
+			});
+		}
+
+		await delayHalf(this.DELAY);
+	}
+
+	async start(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		this.resetUIState();
+
+		this.state = ExecutionState.Running;
+
+		// Emit general 'execution-start' event
+		await this.editor.emitAsync('execution-start', {});
+
+		// Some entities might update after the execution-start event, so we set the connections' state again
+		await this.stopAllTestEntitiesExecutionConnectionAnimationsAsync({
+			tracker
+		});
+
+		const scopeOwnerOfEntryPointEntityOrSelf: TestableEntityState =
+			getParentEntryPoint(this.entryPoint) || this.entryPoint;
+
+		const allScopeChildren =
+			await flattenRelatedCallableElementsOnTheRightAsync(
+				scopeOwnerOfEntryPointEntityOrSelf,
+				false,
+				{ tracker }
+			);
+
+		for (const entity of allScopeChildren) {
+			// Disabled connections that are not part of the test
+			const canvasParentEntity = getParentCanvasEntity(entity);
+			const draggableObject = this.editor.canvas.getDraggableById(
+				getCanvasEntityDraggableContainerDOMId(canvasParentEntity)
+			);
+			this.disabledConnectionsNotInTest(draggableObject, entity);
+
+			await tracker.tick();
+		}
+
+		Logger.log('Starting execution');
+		const clientInterface: IExecutionClient = {
+			onBeforeEntityExecution: this.onBeforeEntityExecution.bind(this),
+			onEntityExecuted: this.onEntityExecuted.bind(this)
+		};
+		try {
+			await this.execute(clientInterface);
+		} catch (e) {
+			if (e && ((e as any).name === 'ExecutionStoppedError' || (e as any).message === 'Execution was stopped')) {
+				Logger.log('Execution was stopped by user.');
+				return;
+			}
+			throw e;
+		}
+
+		// Emit general 'execution-end' event
+		await this.editor.emitAsync('execution-end', {});
+	}
+
+	handleInvalidLogic(): Promise<void> {
+		Logger.log('Invalid logic');
+		return Promise.resolve();
+	}
+
+	async resetUIState(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		// Remove the active UI nodes
+		await Promise.all([
+			this.removeAllPopups({ tracker }),
+			this.editor.canvas.unselectAllAsync({ tracker }),
+			this.editor.canvas.unselectAllConnectionsAsync({ tracker })
+		]);
+
+		// Reset the state on all the connections between entities in the test
+		for (const entity of this.entities) {
+			// Cleanup the UI state of the test
+			// Remove animation from success node
+			if (entity.type === EntityType.Loop) {
+				this.cancelSuccessAnimation(
+					entity as PassThroughCallableEntityState
+				);
+				this.cancelErrorAnimation(
+					entity as PassThroughCallableEntityState
+				);
+
+				this.cancelEntryPointCallerAnimation(
+					entity.body as EntryPointEntityState
+				);
+			} else if (PASS_THROUGH_CALLABLE_TYPES.includes(entity.type)) {
+				this.cancelSuccessAnimation(
+					entity as PassThroughCallableEntityState
+				);
+				this.cancelErrorAnimation(
+					entity as PassThroughCallableEntityState
+				);
+			} else if (ENTRY_POINT_TYPES.includes(entity.type)) {
+				this.cancelEntryPointCallerAnimation(
+					entity as EntryPointEntityState
+				);
+			}
+
+			const canvasParentEntity = getParentCanvasEntity(entity);
+			const draggableObject = this.editor.canvas.getDraggableById(
+				getCanvasEntityDraggableContainerDOMId(canvasParentEntity)
+			);
+
+			draggableObject.connections.forEach((connection) => {
+				connection.resetOptions();
+				connection.stopAnimation();
+			});
+
+			await tracker.tick();
+		}
+	}
+
+	notifyAllEntities() {
+		this.entities.forEach((entity) => {
+			this.notifyEntity(entity);
+		});
+	}
+
+	async notifyAllEntitiesAsync(options: YieldOptions = {}) {
+		const tracker = YieldTracker.from(options);
+
+		for (const entity of this.entities) {
+			this.notifyEntity(entity);
+
+			await tracker.tick();
+		}
+	}
+
+	async stopAllTestEntitiesExecutionConnectionAnimationsAsync(
+		options: YieldOptions = {}
+	) {
+		const tracker = YieldTracker.from(options);
+
+		// Stop the animation on all the connection between entities in the test
+		for (const entity of this.entities) {
+			const canvasParentEntity = getParentCanvasEntity(entity);
+
+			const draggableObject = this.editor.canvas.getDraggableById(
+				getCanvasEntityDraggableContainerDOMId(canvasParentEntity)
+			);
+
+			draggableObject.connections.forEach((connection) => {
+				connection.stopAnimation();
+			});
+
+			await tracker.tick();
+		}
+	}
+
+	stopAllTestEntitiesExecutionConnectionAnimations() {
+		// Stop the animation on all the connection between entities in the test
+		this.entities.forEach((entity) => {
+			const canvasParentEntity = getParentCanvasEntity(entity);
+
+			const draggableObject = this.editor.canvas.getDraggableById(
+				getCanvasEntityDraggableContainerDOMId(canvasParentEntity)
+			);
+
+			draggableObject.connections.forEach((connection) => {
+				connection.stopAnimation();
+			});
+		});
+	}
+}