@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/VariableCard.tsx

@@ -0,0 +1,1577 @@
+import React, {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react';
+import parse from 'style-to-object';
+import {
+	EntityType,
+	ChangeSet,
+	ProjectState,
+	VariableInputMapState,
+	createStateFromTypeAndSubscribe,
+	ChangeSetEntityChangeType,
+	DefinitionEntityState,
+	PropertyState,
+	IPropertyTransfer,
+	DataTypeState,
+	ValueWritingEntityState,
+	getParentCanvasEntity,
+	CanvasEntityState,
+	checkIsBranchDependentOnBranch,
+	lowercaseFirstLetter,
+	VariableInstanceState,
+	OutputMapState,
+	VariableState,
+	getDeclaration,
+	resolveDataType,
+	addDisabledReasons,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS,
+	removeDisabledReasons,
+	READABLE_ENTITY_TYPES,
+	UserManagedEntityState,
+	getDeclarationOutputedError,
+	IActionOutputMapTransfer,
+	IValueDescriptorTransfer,
+	OutputMapParentChildRelation,
+	findNextAvailableName,
+	filterOutDuplicateEntitiesAsync,
+	inputOrOutputShouldBePartOfFinalVariableObjectValue,
+	BUILT_IN_BASE_ENTITY_IDS,
+	IPrimitiveEntityTransfer,
+	PrimitiveEntityState,
+	StateMutationAction,
+	flattenCallersWithCallType,
+	getParentCallerEntity
+} from '@elyx-code/project-logic-tree';
+import './draggable-entity-card.css';
+import {
+	entityDisabledReasonToShortReadableError,
+	fromDisabledReasonsToCardState,
+	getCanvasEntityDOMId,
+	getCardGradientStatement,
+	resolveEntityColorClass,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import DataTypeIcon from './DataTypeIcon';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import VariableScopeMarker from './VariableScopeMarker';
+import TestEntityButton from './TestEntityButton';
+import MainValueInput from './MainValueInput';
+import InputMapProperty from './InputMapProperty';
+import OutputMapProperty from './OutputMapProperty';
+import MainValueOutput from './MainValueOutput';
+import SuccessFailureNodes from './SuccessFailureNodes';
+import InternalCall from './InternalCall';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import NewCardInputButton from './new-card-input-button/NewCardInputButton';
+import ExpandPropertiesIconButton from './expand-properties-icon-button/ExpandPropertiesIconButton';
+import { ICanvasElementComponentProps } from '../../services/editor/CanvasElement';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import DynamicValueEntry from '../dynamic-value/DynamicValueEntry';
+import ErrorMapProperty from './ErrorMapProperty';
+import EntityLockedIconMenu from './entity-locked-icon/EntityLockedIcon';
+import UnreachableMarker from './UnreachableMarker';
+import { popupNotification } from '../../popup-notification';
+
+interface IVariableCardProps extends ICanvasElementComponentProps {
+	entity: VariableState;
+}
+
+const VariableCard = (props: IVariableCardProps) => {
+	const rootElementRef = useRef(null);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		if (!!element && document.contains(element)) {
+			props.onMount?.(element);
+		}
+
+		// When the component is unmounted
+		return () => {
+			props.onUnmount?.();
+		};
+	}, []);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		props.onUpdate?.(element);
+	});
+
+	useLayoutEffect(() => {
+		props.onBeforeUpdate?.();
+	}, []);
+
+	const [expandedInputs, setExpandedInputs] = useState<boolean>(false);
+	const [expandedOutputs, setExpandedOutputs] = useState<boolean>(false);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const [disabledReasons, setDisabledReasons] = useState<
+		CanvasEntityDisabledReason[]
+	>([]);
+
+	const hasErrorHandling =
+		props.entity.catchesError || !!props.entity.errorCalls.length;
+	const isGlobal = props.entity.parent === props.entity.project;
+	// All errors must be thrown, so it cannot handle errors
+	const cannotHandleErrors =
+		props.entity.type === EntityType.VariableDeclaration && isGlobal;
+	const isUsedForMethodCall =
+		props.entity.internalCalls.some((call) => !!call.calledBy.length) ||
+		props.entity.internalCalls.some(
+			(internalCall) =>
+				!![...internalCall.successCalls, ...internalCall.errorCalls]
+					.length
+		);
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-small-entity-card-menu-button-' +
+					props.entity.id +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.entity.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: !entity.deletable,
+							tooltip: 'Forever delete this variable',
+							parentCanvasObject: popup.self,
+							id:
+								`canvas--${entity.type}--` +
+								props.entity.id +
+								'--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${entity.type}/${props.entity.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: false,
+							tooltip: !props.entity.editable
+								? `This ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.singular
+									)} has been locked and can no longer be edited`
+								: `Edit this ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.singular
+									)}`,
+							parentCanvasObject: popup.self,
+							id:
+								`canvas--${entity.type}--` +
+								props.entity.id +
+								'--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											entity.type ===
+												EntityType.VariableDeclaration
+												? StateMutationAction.RecalculateVarDecl
+												: StateMutationAction.RecalculateVarInst
+										)
+									);
+
+								entity.afterAllChildrenInitialized(changeSet);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[props.entity.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'-card--' +
+								props.entity.id +
+								'--recalculate'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								let actionName = entity.catchesError
+									? StateMutationAction.ChangeVarInstToThrowErrors
+									: StateMutationAction.ChangeVarInstToThrowErrors;
+
+								if (
+									entity.type ===
+									EntityType.VariableDeclaration
+								) {
+									actionName = entity.catchesError
+										? StateMutationAction.ChangeVarDeclToThrowErrors
+										: StateMutationAction.ChangeVarDeclToCatchErrors;
+								}
+
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											actionName
+										)
+									);
+
+								entity.metaSync(
+									{
+										catchesError: !entity.catchesError
+									},
+									changeSet
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: hasErrorHandling
+								? 'Errors are caught'
+								: 'Errors terminate execution',
+							color: 'error',
+							disabled:
+								isUsedForMethodCall ||
+								(cannotHandleErrors && !hasErrorHandling) ||
+								!!entity.errorCalls.length,
+							iconEnd: hasErrorHandling
+								? 'fa-solid fa-xmark'
+								: 'fa-solid fa-ban',
+							subLabel: !!entity.errorCalls.length
+								? 'Error call connected nodes'
+								: entity.catchesError
+									? 'Click to throw error instead'
+									: 'Click to catch errors instead',
+							tooltip: (() => {
+								if (isUsedForMethodCall) {
+									return 'This variable is being used to call a method of its instance, it cannot be called itself';
+								}
+
+								if (cannotHandleErrors && !hasErrorHandling) {
+									return 'This variable is global, errors should terminate the project';
+								}
+
+								if (cannotHandleErrors && hasErrorHandling) {
+									return 'This variable is global, errors should terminate the project. Click to remove error handling';
+								}
+
+								if (!!entity.errorCalls.length) {
+									return 'Remove all connected nodes to the error branch if you want to throw the error instead';
+								}
+
+								if (entity.catchesError) {
+									return 'Currently, if an error occurs, all other branches will continue executing.';
+								}
+
+								return 'Currently, if an error occurs it will terminate all ongoing executions. Including paralel branches.';
+							})(),
+							parentCanvasObject: popup.self,
+							id:
+								`canvas--${entity.type}--` +
+								props.entity.id +
+								'--error-handling'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(props.entity.id);
+								popupNotification({
+									text: `Copied ID: ${props.entity.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.entity.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.entity
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.entity.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[props.entity, props.project]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-small-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-small-entity-card-menu-button-' + props.entity.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-small-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody
+	);
+
+	useEffect(() => {
+		// Simple handler for deps that just need a rerender
+		const handleForceUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleCanvasGloballyEnabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+		const handleCanvasGloballyDisabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+
+		const handleEntityUpdate = (payload: any) => {
+			let hasUpdated = false;
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			const disabledReasonsToRemove: CanvasEntityTestingDisabledReason[] =
+				[];
+
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				props.entity
+			);
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (
+				(props.project.test?.hasEntity(props.entity) ||
+					props.project.test?.getCanBeAddedToTest(props.entity)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity)
+			) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			} else if (
+				!!props.project.test &&
+				props.project.test?.hasEntity(props.entity)
+			) {
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			if (newDisabledReasons.length || disabledReasonsToRemove.length) {
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newDisabledReasons
+					);
+					const finalConfig = removeDisabledReasons(
+						config.reasons,
+						disabledReasonsToRemove
+					);
+					return finalConfig.reasons;
+				});
+				hasUpdated = true;
+			}
+
+			if (!hasUpdated) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestSetupStarted = () => {
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				props.project.test?.disabledConnectionsNotInTest(
+					props.canvasElement.draggableObject,
+					props.entity
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (!props.project.test?.hasEntity(props.entity)) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					newDisabledReasons
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleExecutionStart = () => {
+			if (!!props.project.test?.hasEntity(props.entity)) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestExited = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest,
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				]);
+				return config.reasons;
+			});
+
+			if (props.canvasElement.draggableObject.disabled) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+			}
+
+			props.canvasElement.draggableObject.connections.forEach(
+				(connection) => {
+					connection.enable();
+					connection.element.classList.remove('disabled');
+					if (connection.complementaryLineElement) {
+						connection.complementaryLineElement.classList.remove(
+							'disabled'
+						);
+					}
+				}
+			);
+		};
+
+		const handleCanvasConnectionStart = async (payload: any) => {
+			const selfAndAllChildren: UserManagedEntityState[] =
+				(await filterOutDuplicateEntitiesAsync([
+					props.entity,
+					...props.entity.inputs,
+					...props.entity.outputs,
+					...props.entity.internalCalls
+				])) as UserManagedEntityState[];
+
+			if (
+				selfAndAllChildren.some((ent) => payload.compatible?.[ent.id])
+			) {
+				setExpandedInputs(true);
+			}
+
+			if (!payload.compatible?.[props.entity.id]) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				const newOwnConnectionDisabledReasons: CanvasEntityConnectionDisabledReason[] =
+					payload.incompatible?.[props.entity.id]?.reasons || [];
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newOwnConnectionDisabledReasons
+					);
+					return config.reasons;
+				});
+			} else {
+				forceUpdate();
+			}
+		};
+
+		const handleCanvasConnectionEnd = () => {
+			setExpandedInputs(false);
+
+			props.project.canvas?.enable(props.canvasElement.draggableObject, {
+				quiet: true
+			});
+
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(
+					currentReasons,
+					ALL_CONNECTION_DISABLED_REASONS
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleValueChange = (payload: any) => {
+			if (
+				payload?.owner?.id === props.entity?.id ||
+				payload?.owner?.id ===
+					(props.entity as VariableInstanceState)?.declaration?.id
+			) {
+				forceUpdate();
+			}
+		};
+
+		// --- Initial Setup Logic ---
+		const dataType = resolveDataType(props.entity);
+		const declaration = (props.entity as VariableInstanceState)
+			?.declaration;
+
+		const initialNewDisabledReasons: CanvasEntityOtherDisabledReason[] = [];
+
+		// @ts-ignore
+		if (props.entity.suggestion) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.Suggestion
+			);
+		}
+
+		if (props.project.canvas?.disabled) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			);
+		}
+
+		if (!!initialNewDisabledReasons.length) {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					initialNewDisabledReasons
+				);
+				return config.reasons;
+			});
+		} else {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		}
+
+		if (dataType) {
+			props.project.on(dataType.id, handleForceUpdate);
+		}
+		if (declaration && declaration.id !== props.entity.id) {
+			props.project.on(declaration.id, handleForceUpdate);
+		}
+
+		props.project.on(
+			'canvas-globally-enabled',
+			handleCanvasGloballyEnabled
+		);
+		props.project.on(
+			'canvas-globally-disabled',
+			handleCanvasGloballyDisabled
+		);
+		props.project.on(props.entity.id, handleEntityUpdate);
+		props.project.on('test-setup-started', handleTestSetupStarted);
+		props.project.on('execution-start', handleExecutionStart);
+		props.project.on('test-exited', handleTestExited);
+		props.project.on(
+			'canvas-connection-start',
+			handleCanvasConnectionStart
+		);
+		props.project.on('canvas-connection-end', handleCanvasConnectionEnd);
+		props.project.on('value-written', handleValueChange);
+		props.project.on('value-removed', handleValueChange);
+
+		return () => {
+			if (dataType) {
+				props.project.off(dataType.id, handleForceUpdate);
+			}
+			if (declaration && declaration.id !== props.entity.id) {
+				props.project.off(declaration.id, handleForceUpdate);
+			}
+
+			props.project.off(
+				'canvas-globally-enabled',
+				handleCanvasGloballyEnabled
+			);
+			props.project.off(
+				'canvas-globally-disabled',
+				handleCanvasGloballyDisabled
+			);
+			props.project.off(props.entity.id, handleEntityUpdate);
+			props.project.off('test-setup-started', handleTestSetupStarted);
+			props.project.off('execution-start', handleExecutionStart);
+			props.project.off('test-exited', handleTestExited);
+			props.project.off(
+				'canvas-connection-start',
+				handleCanvasConnectionStart
+			);
+			props.project.off(
+				'canvas-connection-end',
+				handleCanvasConnectionEnd
+			);
+			props.project.off('value-written', handleValueChange);
+			props.project.off('value-removed', handleValueChange);
+		};
+	}, [
+		props.project,
+		props.entity,
+		props.canvasElement,
+		updateKey,
+		resolveDataType,
+		setExpandedInputs,
+		// @ts-ignore
+		props.entity.suggestion
+	]);
+
+	useEffect(() => {
+		props.canvasElement.draggableObject.updateConnections();
+	});
+
+	const entity: VariableState = props.entity;
+
+	const dataType = entity.getDataType(null);
+
+	// If there is any element unused, we need to show the button
+	const shouldShowExpandButton = !!entity.unusedInternalCalls.length;
+	// !!(
+	// 	!!entity.unusedInputs.length ||
+	// 		!!entity.unusedOutputs.length ||
+	// 		!!entity.unusedInternalCalls.length ||
+	// 		!entity.readsValue ||
+	// 		!entity.writesValues.length
+	// );
+
+	const isConnectionSourceDescendant: boolean = (() => {
+		if (
+			!props.project.onGoingConnectionSource ||
+			props.project.onGoingConnectionNodeType !==
+				ConnectionNodeType.PropertyOut
+		) {
+			return false;
+		}
+
+		const sourceEntity = props.project
+			.onGoingConnectionSource as ValueWritingEntityState;
+
+		const sourceCanvasParent: CanvasEntityState =
+			getParentCanvasEntity(sourceEntity);
+
+		if (sourceCanvasParent === entity) {
+			return true;
+		}
+
+		if (checkIsBranchDependentOnBranch(sourceCanvasParent, entity)) {
+			return true;
+		}
+
+		return false;
+	})();
+
+	// When a variable is being used to call a method of its instance, it cannot be called itself
+	const showNewInputButton = useMemo(
+		() =>
+			!props.project.test &&
+			(!dataType || dataType.canModifyObjectStructure()) &&
+			!disabledReasons.includes(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityOtherDisabledReason.Suggestion
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+			) &&
+			(!props.project.onGoingConnectionNodeType ||
+				(props.project.onGoingConnectionNodeType &&
+					props.project.onGoingConnectionNodeType ===
+						ConnectionNodeType.PropertyOut &&
+					!!props.project.onGoingConnectionSource &&
+					props.project.onGoingConnectionSource?.id !== entity.id &&
+					!isConnectionSourceDescendant)) &&
+			!disabledReasons.includes(
+				CanvasEntityConnectionDisabledReason.NotInScope
+			) &&
+			// If there is an active connection and the source is an ancestor that calls the current in its error branch,
+			// we shouldn't show the new inputs button
+			((): boolean => {
+				if (
+					!props.project.onGoingConnectionNodeType ||
+					props.project.onGoingConnectionNodeType !==
+						ConnectionNodeType.PropertyOut
+				) {
+					return true;
+				}
+
+				const sourceEntity = props.project
+					.onGoingConnectionSource as ValueWritingEntityState;
+
+				if (!sourceEntity) {
+					true;
+				}
+
+				const sourceCallerParent = getParentCallerEntity(sourceEntity);
+
+				const errorAcestors = flattenCallersWithCallType(entity).filter(
+					(a) => a.callType === 'error'
+				);
+
+				if (
+					errorAcestors.find(
+						(a) => a.caller?.id === sourceCallerParent?.id
+					)
+				) {
+					return false;
+				}
+
+				return true;
+			})(),
+		[
+			props.project,
+			props.project?.test,
+			entity,
+			disabledReasons,
+			updateKey,
+			props.project.onGoingConnectionNodeType
+		]
+	);
+
+	const resolvedUsedInputs = entity.usedInputs.filter((input) => {
+		if (inputOrOutputShouldBePartOfFinalVariableObjectValue(input)) {
+			return true;
+		}
+		return false;
+	});
+	const resolvedUsedOutputs = entity.usedOutputs.filter((output) => {
+		if (inputOrOutputShouldBePartOfFinalVariableObjectValue(output)) {
+			return true;
+		}
+		return false;
+	});
+	const resolvedUnusedInputs = entity.unusedInputs.filter((input) => {
+		if (inputOrOutputShouldBePartOfFinalVariableObjectValue(input)) {
+			return true;
+		}
+		return false;
+	});
+	const resolvedUnusedOutputs = entity.unusedOutputs.filter((output) => {
+		if (inputOrOutputShouldBePartOfFinalVariableObjectValue(output)) {
+			return true;
+		}
+		return false;
+	});
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={['canvas-draggable-card'].join(' ')}
+			id={getCanvasEntityDOMId(props.entity)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(props.entity)
+			}}
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			{/* When a variable is being used to call a method of its instance, it cannot be called itself */}
+			<TestEntityButton
+				entity={props.entity}
+				canvasElement={props.canvasElement}
+				project={props.project}
+				parentDisabledReasons={disabledReasons}
+			/>
+			<VariableScopeMarker
+				entity={entity}
+				project={props.project}
+				draggableObject={props.canvasElement.draggableObject}
+				parentDisabledReasons={disabledReasons}
+			/>
+			{/* Floats "Unreachable!" above the right side of the header when
+				the entity carries the blocked-reachability error. Same DOM
+				placement as VariableScopeMarker on VariableCard so the
+				`position: absolute` offsets resolve against the outer
+				canvas-draggable-card div. Returns null when reachable. */}
+			<UnreachableMarker
+				entity={props.entity}
+				parentDisabledReasons={disabledReasons}
+				project={props.project}
+				draggableObject={props.canvasElement.draggableObject}
+			/>
+			<div
+				className={[
+					'canvas-draggable-card__body',
+					...(!!disabledReasons.length
+						? ['canvas-draggable-card__body__disabled']
+						: []),
+					resolveEntityColorClass(props.entity.type, {
+						state: fromDisabledReasonsToCardState(disabledReasons)
+					})
+				].join(' ')}
+			>
+				<header
+					className="canvas-draggable-card__header"
+					{...{
+						[Canvas.OBJ_ATTR_NAME]:
+							getCanvasEntityDOMId(props.entity) + '--header'
+					}}
+					id={`${getCanvasEntityDOMId(props.entity)}--header`}
+					style={parse(
+						getCardGradientStatement(entity, {
+							state: fromDisabledReasonsToCardState(
+								disabledReasons
+							)
+						})
+					)}
+					onMouseOver={(e: any) => {
+						if (!!props.project.canvas?.activeConnectionDrawing) {
+							if (
+								!!props.project
+									.onGoingConnectionIncompatibleEntities?.[
+									props.entity.id
+								]
+							) {
+								// Read the disabled reasons and add a tooltip to the mouse
+								const reasonsMessage =
+									props.project.onGoingConnectionIncompatibleEntities?.[
+										props.entity.id
+									].reasons
+										.map((reason) =>
+											entityDisabledReasonToShortReadableError(
+												reason
+											)
+										)
+										.join('.\n');
+
+								props.project.canvas?.showTooltip(
+									'connection-disabled-reasons-test-entity-button',
+									reasonsMessage
+								);
+								if (props.project.canvas) {
+									props.project.canvas.tooltip.style.fontSize =
+										'28px';
+									props.project.canvas.canvasElement.style.cursor =
+										'not-allowed';
+								}
+							}
+						}
+					}}
+					onMouseLeave={(e: any) => {
+						props.project.canvas?.hideTooltip(
+							'connection-disabled-reasons-test-entity-button'
+						);
+					}}
+				>
+					<DynamicValueEntry
+						entity={props.entity}
+						project={props.project}
+						canvasElement={props.canvasElement}
+						parentDisabledReasons={disabledReasons}
+					>
+						{(extraContent) => (
+							<>
+								<div className="canvas-draggable-card__header__left-block">
+									<DataTypeIcon
+										entity={entity}
+										size="large"
+										parentDisabledReasons={disabledReasons}
+										project={props.project}
+										parentCanvasObject={
+											props.canvasElement?.draggableObject
+										}
+									/>
+									<span className="canvas-draggable-card__header__labels">
+										<div className="canvas-draggable-card__property__left-block canvas-draggable-card__property__value-container">
+											<span className="canvas-draggable-card__property__labels-group">
+												<h3>
+													{safeResolveEntityName(
+														entity,
+														props.project.logic
+													)}
+												</h3>
+												{extraContent}
+											</span>
+										</div>
+									</span>
+								</div>
+								<div className="canvas-draggable-card__header__actions">
+									<EntityLockedIconMenu
+										entity={entity}
+										project={props.project}
+										canvasElement={props.canvasElement}
+										parentDisabledReasons={disabledReasons}
+									/>
+									<LogicErrorIconMenu
+										entity={entity}
+										project={props.project}
+										canvasElement={props.canvasElement}
+										parentDisabledReasons={disabledReasons}
+									/>
+									<Button
+										variant="text"
+										color="grey"
+										iconEnd="fa-solid fa-ellipsis-v"
+										size="small"
+										ref={canvasPopup.anchorRef}
+										className="canvas-small-entity-card-menu-button"
+										id={`canvas-small-entity-card-menu-button-${entity.id}`}
+										disabled={!!disabledReasons.length}
+										onClick={(e: any) => {
+											e.stopPropagation();
+											canvasPopup?.toggle();
+										}}
+										onDoubleClick={(
+											e: React.MouseEvent<HTMLButtonElement>
+										) => {
+											e.stopPropagation();
+											if (disabledReasons.length) return;
+											props.project?.canvas?.unselectAll();
+											EditorService.navigate(
+												`${props.project?.editorBasePath}/entity/${entity.type}/${props.entity.id}`
+											);
+										}}
+									/>
+								</div>
+							</>
+						)}
+					</DynamicValueEntry>
+					<SuccessFailureNodes
+						entity={entity}
+						draggableObject={props.canvasElement.draggableObject}
+						project={props.project}
+						parentDisabledReasons={disabledReasons}
+					/>
+				</header>
+				<div className="canvas-draggable-card__content">
+					{!!entity.error &&
+						(expandedOutputs ||
+							!!entity.error?.writesValues.length) && (
+							<ErrorMapProperty
+								outputMap={entity.error || null}
+								entity={entity}
+								draggableObject={
+									props.canvasElement.draggableObject
+								}
+								project={props.project}
+								parentDisabledReasons={disabledReasons}
+							/>
+						)}
+					{shouldShowExpandButton && (
+						<ExpandPropertiesIconButton
+							project={props.project}
+							expanded={expandedInputs}
+							draggableObject={
+								props.canvasElement.draggableObject
+							}
+							onClick={async () => {
+								const errorDeclaration =
+									getDeclarationOutputedError(entity);
+
+								// Create error output-map entity before expanding the error for the first time
+								if (!entity.error) {
+									let actionName =
+										StateMutationAction.AddErrorOutputToVarInst;
+
+									if (
+										entity.type ===
+										EntityType.VariableDeclaration
+									) {
+										actionName =
+											StateMutationAction.AddErrorOutputToVarDecl;
+									}
+
+									const changeSet =
+										props.project.logic.addChangeSet(
+											new ChangeSet(
+												props.project.logic,
+												ProjectState.sessionAuthor,
+												new Date().toISOString(),
+												entity,
+												false,
+												actionName
+											)
+										);
+
+									const newOutputMapTransfer: IActionOutputMapTransfer =
+										OutputMapState.new(
+											changeSet
+										) as IActionOutputMapTransfer;
+									newOutputMapTransfer.parent =
+										entity.toReference();
+									newOutputMapTransfer.declaration =
+										(errorDeclaration?.toJSON() as IValueDescriptorTransfer) ||
+										null;
+									newOutputMapTransfer.parentRelationType =
+										OutputMapParentChildRelation.Error;
+
+									const newInstance =
+										createStateFromTypeAndSubscribe(
+											newOutputMapTransfer,
+											props.project.logic
+										) as OutputMapState;
+
+									newInstance.hydrateAncestors();
+
+									newInstance.addSelfToProject(changeSet);
+
+									changeSet.add(
+										newInstance,
+										ChangeSetEntityChangeType.Added
+									);
+
+									newInstance.initChildren(changeSet);
+
+									await props.project.renderAndCloseChangeSet(
+										changeSet
+									);
+								}
+
+								if (expandedInputs || expandedOutputs) {
+									setExpandedOutputs(false);
+									setExpandedInputs(false);
+								} else {
+									setExpandedOutputs(true);
+									setExpandedInputs(true);
+								}
+							}}
+							id={`expand-inputs-icon-button--${entity.id}`}
+							tooltip={
+								expandedInputs || expandedOutputs
+									? 'Click to hide unused inputs and outputs'
+									: 'Click to show unused inputs and outputs'
+							}
+							tooltipPlacement="top"
+							style={{ marginTop: '6px' }}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					<MainValueInput
+						entity={props.entity}
+						canvasElement={props.canvasElement}
+						project={props.project}
+						parentDisabledReasons={disabledReasons}
+					/>
+
+					<MainValueOutput
+						entity={entity}
+						canvasElement={props.canvasElement}
+						project={props.project}
+						parentDisabledReasons={disabledReasons}
+					/>
+
+					{resolvedUnusedInputs.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{resolvedUnusedInputs
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((inputMap) => (
+									<InputMapProperty
+										key={inputMap.id}
+										inputMap={inputMap}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{resolvedUsedInputs.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{resolvedUsedInputs
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((inputMap) => (
+									<InputMapProperty
+										key={inputMap.id}
+										inputMap={inputMap}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{resolvedUsedOutputs.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{resolvedUsedOutputs
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((outputMap) => (
+									<OutputMapProperty
+										key={outputMap.id}
+										outputMap={outputMap}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{entity.usedInternalCalls.length > 0 && (
+						<ul
+							className={[
+								'canvas-draggable-card__property-list',
+								'canvas-draggable-card__property-list__align-right'
+							].join(' ')}
+						>
+							{entity.usedInternalCalls
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((call) => (
+									<InternalCall
+										key={call.id}
+										call={call}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{entity.unusedInternalCalls.length > 0 &&
+						expandedInputs && (
+							<ul
+								className={[
+									'canvas-draggable-card__property-list',
+									'canvas-draggable-card__property-list__align-right'
+								].join(' ')}
+							>
+								{entity.unusedInternalCalls
+									.sort((a, b) => {
+										// Sort by `.index` property
+										if (a.index < b.index) {
+											return -1;
+										}
+										if (a.index > b.index) {
+											return 1;
+										}
+										return 0;
+									})
+									.map((call) => (
+										<InternalCall
+											key={call.id}
+											call={call}
+											entity={props.entity}
+											canvasElement={props.canvasElement}
+											project={props.project}
+											parentDisabledReasons={
+												disabledReasons
+											}
+										/>
+									))}
+							</ul>
+						)}
+
+					{resolvedUnusedOutputs.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{resolvedUnusedOutputs
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((outputMap) => (
+									<OutputMapProperty
+										key={outputMap.id}
+										outputMap={outputMap}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{showNewInputButton && (
+						<div
+							className={[
+								'canvas-draggable-card__action-alt',
+								'align-left'
+							].join(' ')}
+						>
+							<NewCardInputButton
+								iconStart="fa-solid fa-plus"
+								size="small"
+								parentDisabledReasons={disabledReasons}
+								entity={entity}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								onClick={() => {
+									const variableDeclaration =
+										getDeclaration(entity);
+
+									let actionName =
+										StateMutationAction.AddPropertyToVarInst;
+
+									if (
+										entity.type ===
+										EntityType.VariableDeclaration
+									) {
+										actionName =
+											StateMutationAction.AddPropertyToVarDecl;
+									}
+
+									const changeSet =
+										props.project.logic.addChangeSet(
+											new ChangeSet(
+												props.project.logic,
+												ProjectState.sessionAuthor,
+												new Date().toISOString(),
+												entity,
+												false,
+												actionName
+											)
+										);
+
+									let resolvedDataType: DataTypeState =
+										dataType;
+									let dataTypeEntity: DefinitionEntityState;
+
+									if (
+										!!resolvedDataType.entity &&
+										resolvedDataType.entity.type ===
+											EntityType.DefinitionEntity &&
+										resolvedDataType.entity.parent?.id ===
+											resolvedDataType.id
+									) {
+										dataTypeEntity =
+											resolvedDataType.entity as DefinitionEntityState;
+									}
+
+									if (!resolvedDataType) {
+										const newDataTypeTransfer =
+											DataTypeState.new(changeSet);
+										newDataTypeTransfer.parent =
+											variableDeclaration.toReference();
+										newDataTypeTransfer.inferred = true;
+
+										resolvedDataType =
+											createStateFromTypeAndSubscribe(
+												newDataTypeTransfer,
+												props.project.logic
+											) as DataTypeState;
+
+										resolvedDataType.hydrateAncestors();
+										resolvedDataType.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											resolvedDataType,
+											ChangeSetEntityChangeType.Added
+										);
+										resolvedDataType.initChildren(
+											changeSet
+										);
+									}
+
+									if (!dataTypeEntity) {
+										const newDefEntityTransfer =
+											DefinitionEntityState.new(
+												changeSet
+											);
+										const allOtherDefinitions =
+											props.project.logic.getDefinitionEntities();
+
+										const desiredName =
+											'Custom inline definition';
+
+										const newName = findNextAvailableName(
+											desiredName,
+											allOtherDefinitions
+										);
+
+										newDefEntityTransfer.name = newName;
+										newDefEntityTransfer.parent =
+											resolvedDataType.toReference();
+
+										dataTypeEntity =
+											createStateFromTypeAndSubscribe(
+												newDefEntityTransfer,
+												props.project.logic
+											) as DefinitionEntityState;
+
+										dataTypeEntity.hydrateAncestors();
+										dataTypeEntity.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											dataTypeEntity,
+											ChangeSetEntityChangeType.Added
+										);
+										dataTypeEntity.initChildren(changeSet);
+										resolvedDataType.setEntity(
+											dataTypeEntity,
+											changeSet
+										);
+
+										changeSet.add(
+											resolvedDataType,
+											ChangeSetEntityChangeType.Updated
+										);
+									}
+
+									const newPropertyTransfer =
+										PropertyState.new(changeSet);
+									newPropertyTransfer.parent =
+										dataTypeEntity.toReference();
+
+									newPropertyTransfer.name =
+										findNextAvailableName(
+											'Property',
+											dataTypeEntity.properties
+										);
+
+									const newProperty =
+										createStateFromTypeAndSubscribe(
+											newPropertyTransfer,
+											props.project.logic
+										) as PropertyState;
+
+									newProperty.hydrateAncestors();
+									newProperty.addSelfToProject(changeSet);
+									changeSet.add(
+										newProperty,
+										ChangeSetEntityChangeType.Added
+									);
+									newProperty.initChildren(changeSet);
+
+									const builtInPrimitiveStringEntity =
+										props.project.logic.getBuiltIn(
+											BUILT_IN_BASE_ENTITY_IDS[
+												'primitive-entity'
+											].string.id
+										) as PrimitiveEntityState;
+
+									// Add 'string' data-type as default
+									const dataTypeTransfer =
+										DataTypeState.new(changeSet);
+									dataTypeTransfer.parent =
+										newProperty.toReference();
+									dataTypeTransfer.entity =
+										(builtInPrimitiveStringEntity?.toJSON() as IPrimitiveEntityTransfer) ||
+										null;
+
+									const dataTypeInstance =
+										createStateFromTypeAndSubscribe(
+											dataTypeTransfer,
+											props.project.logic
+										) as DataTypeState;
+
+									dataTypeInstance.hydrateAncestors();
+									dataTypeInstance.addSelfToProject(
+										changeSet
+									);
+									changeSet.add(
+										dataTypeInstance,
+										ChangeSetEntityChangeType.Added
+									);
+
+									dataTypeInstance.initChildren(changeSet);
+
+									const newEntityInputTransfer =
+										VariableInputMapState.new(changeSet);
+									newEntityInputTransfer.parent =
+										entity.toReference();
+									newEntityInputTransfer.declaration =
+										newProperty.toJSON() as IPropertyTransfer;
+
+									const newEntityInput =
+										createStateFromTypeAndSubscribe(
+											newEntityInputTransfer,
+											props.project.logic
+										) as VariableInputMapState;
+
+									newEntityInput.hydrateAncestors();
+									newEntityInput.addSelfToProject(changeSet);
+									changeSet.add(
+										newEntityInput,
+										ChangeSetEntityChangeType.Added
+									);
+									newEntityInput.initChildren(changeSet);
+
+									dataType.metaSync(
+										{
+											inferred: false
+										},
+										changeSet
+									);
+
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${newProperty.type}/${newProperty.id}`
+									);
+
+									props.project.renderAndCloseChangeSet(
+										changeSet
+									);
+								}}
+							>
+								Property
+							</NewCardInputButton>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default VariableCard;