@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,978 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './draggable-entity-card.css';
+import {
+	ENTITY_FA_ICON_NAMES,
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityDOMId,
+	getUnreachableStripesStyle,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import {
+	VariableState,
+	InternalCallState,
+	EntityType,
+	CanvasEntityTestingDisabledReason,
+	removeDisabledReasons,
+	addDisabledReasons,
+	CanvasEntityDisabledReason,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS,
+	OutputMapState,
+	IActionOutputMapTransfer,
+	getDeclarationOutputedError,
+	ProjectState,
+	ChangeSet,
+	IValueDescriptorTransfer,
+	OutputMapParentChildRelation,
+	createStateFromTypeAndSubscribe,
+	ChangeSetEntityChangeType,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	BUILT_IN_BASE_ENTITY_IDS,
+	StateMutationAction
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../services/editor';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import InternalCallExecutionNode from './InternalCallExecutionNode';
+import SmallSuccessFailureNodes from './SmallSuccessFailureNodes';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import InputMapProperty from './InputMapProperty';
+import OutputMapProperty from './OutputMapProperty';
+import ExpandPropertiesIconButton from './expand-properties-icon-button/ExpandPropertiesIconButton';
+import ErrorMapProperty from './ErrorMapProperty';
+import EntityLockedIconMenu from './entity-locked-icon/EntityLockedIcon';
+import MainValueOutput from './MainValueOutput';
+import UnreachableMarker from './UnreachableMarker';
+import { popupNotification } from '../../popup-notification';
+
+interface IInternalCallProps {
+	call: InternalCallState;
+	entity: VariableState;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function InternalCall(props: IInternalCallProps) {
+	const rootElementRef = useRef<HTMLDivElement>(null);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const [expandedError, setExpandedError] = useState<boolean>(false);
+
+	const [_disabledReasons, setDisabledReasons] = useState<
+		CanvasEntityDisabledReason[]
+	>([]);
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.call.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: !props.call.deletable || true,
+							tooltip: !props.call.deletable
+								? `This ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.call.type]
+											.singular
+									)} cannot be deleted. Because the system need to refer to it over time.`
+								: `${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.call.type]
+											.plural
+									)} cannot be deleted from their parent variables.`,
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.id +
+								'--' +
+								props.call.type +
+								'--' +
+								props.call.id +
+								'--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.InternalCall}/${props.call.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: false,
+							tooltip: !call.editable
+								? `This ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[call.type]
+											.singular
+									)} has been locked and can no longer be edited`
+								: `Edit this ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[call.type]
+											.singular
+									)}`,
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.id +
+								'--' +
+								props.call.type +
+								'--' +
+								props.call.id +
+								'--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											call,
+											false,
+											call.catchesError
+												? StateMutationAction.ChangeInternalCallToThrowErrors
+												: StateMutationAction.ChangeInternalCallToCatchErrors
+										)
+									);
+
+								call.metaSync(
+									{
+										catchesError: !call.catchesError
+									},
+									changeSet
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label:
+								call.catchesError || !!call.errorCalls.length
+									? 'Errors are caught'
+									: 'Errors terminate execution',
+							color: 'error',
+							disabled: !!call.errorCalls.length,
+							iconEnd:
+								call.catchesError || !!call.errorCalls.length
+									? 'fa-solid fa-xmark'
+									: 'fa-solid fa-ban',
+							subLabel: !!call.errorCalls.length
+								? 'Error call connected nodes'
+								: call.catchesError
+									? 'Click to throw error instead'
+									: 'Click to catch errors instead',
+							tooltip: !!call.errorCalls.length
+								? 'Remove all connected nodes to the error branch if you want to throw the error instead'
+								: call.catchesError
+									? 'Currently, if an error occurs, all other branches will continue executing.'
+									: 'Currently, if an error occurs it will terminate all ongoing executions. Including paralel branches.',
+							parentCanvasObject: popup.self,
+							id:
+								`canvas--${call.type}--` +
+								props.call.id +
+								'--error-handling'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								console.log('HEREEEEEE');
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											call,
+											false,
+											StateMutationAction.RecalculateCondition
+										)
+									);
+
+								call.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.call.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.call.type +
+								'-card--' +
+								props.call.id +
+								'--recalculate'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(props.call.id);
+								popupNotification({
+									text: `Copied ID: ${props.call.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.call.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.call
+								);
+								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.call.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[props.entity.id, props.call, props.project]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas--internal-call--menu-button-' +
+				props.call.id +
+				'--popup',
+			anchorQuerySelector: '#' + getCanvasEntityDOMId(props.call),
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'left'
+		},
+		memoizedCanvasPopupBody
+	);
+
+	useEffect(() => {
+		// --- Initial Setup Logic ---
+		const initialNewDisabledReasons: CanvasEntityOtherDisabledReason[] = [];
+
+		// @ts-ignore
+		if (props.call.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 {
+			// This handles the case where canvas was disabled but is now enabled
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		}
+
+		const handleEntityUpdate = () => {
+			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 handleCallUpdate = (payload: any) => {
+			let hasUpdated = false;
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			const disabledReasonsToRemove: CanvasEntityTestingDisabledReason[] =
+				[];
+
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				props.call
+			);
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.call) &&
+				!props.project.test?.getCanBeAddedToTest(props.call)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				(props.project.test?.hasEntity(props.call) ||
+					props.project.test?.getCanBeAddedToTest(props.call)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.call)
+			) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			} else if (
+				!!props.project.test &&
+				props.project.test?.hasEntity(props.call)
+			) {
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			}
+
+			if (newDisabledReasons.length || disabledReasonsToRemove.length) {
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newDisabledReasons
+					);
+					const finalConfig = removeDisabledReasons(
+						config.reasons,
+						disabledReasonsToRemove
+					);
+					return finalConfig.reasons;
+				});
+			}
+
+			if (!hasUpdated) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestSetupStarted = () => {
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.call) &&
+				!props.project.test?.getCanBeAddedToTest(props.call)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				props.project.test?.disabledConnectionsNotInTest(
+					props.canvasElement.draggableObject,
+					props.call
+				);
+
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (!props.project.test?.hasEntity(props.call)) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					newDisabledReasons
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleExecutionStart = () => {
+			if (!!props.project.test?.hasEntity(props.call)) {
+				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 = (payload: any) => {
+			if (!payload.compatible?.[props.call.id]) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				const newOwnConnectionDisabledReasons: CanvasEntityConnectionDisabledReason[] =
+					payload.incompatible?.[props.call.id]?.reasons || [];
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newOwnConnectionDisabledReasons
+					);
+					return config.reasons;
+				});
+			} else {
+				forceUpdate();
+			}
+		};
+
+		const handleCanvasConnectionEnd = () => {
+			props.project.canvas?.enable(props.canvasElement.draggableObject, {
+				quiet: true
+			});
+
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(
+					currentReasons,
+					ALL_CONNECTION_DISABLED_REASONS
+				);
+				return config.reasons;
+			});
+		};
+
+		props.project.on(props.entity.id, handleEntityUpdate);
+		props.project.on(
+			'canvas-globally-enabled',
+			handleCanvasGloballyEnabled
+		);
+		props.project.on(
+			'canvas-globally-disabled',
+			handleCanvasGloballyDisabled
+		);
+		props.project.on(props.call.id, handleCallUpdate);
+		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);
+
+		return () => {
+			props.project.off(props.entity.id, handleEntityUpdate);
+			props.project.off(
+				'canvas-globally-enabled',
+				handleCanvasGloballyEnabled
+			);
+			props.project.off(
+				'canvas-globally-disabled',
+				handleCanvasGloballyDisabled
+			);
+			props.project.off(props.call.id, handleCallUpdate);
+			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,
+		props.entity,
+		props.call,
+		props.canvasElement,
+		updateKey
+	]);
+
+	useEffect(() => {
+		props.canvasElement.draggableObject.updateConnections();
+	});
+
+	const entity = props.entity;
+	const call: InternalCallState = props.call;
+	const iconName = ENTITY_FA_ICON_NAMES[call.declaration?.type];
+
+	// When the entity is part of a variable declaration,
+	// which has a different internal calls being executed,
+	// we can't execute a new one
+	const parentVarCallsDifferentInternalCalls =
+		(entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+		entity.internalCalls.some(
+			(call) => !!call.calledBy.length && call.id !== props.call.id
+		);
+
+	const relevantParentDisabledReasonsWhileConnecting =
+		props.parentDisabledReasons.filter(
+			(reason) =>
+				reason !==
+				CanvasEntityConnectionDisabledReason.ExecutionsAlreadyConnected
+		);
+	const relevantParentDisabledReasonsWhenNotConnecting =
+		props.parentDisabledReasons.filter(
+			(reason) =>
+				reason !==
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest &&
+				reason !==
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+		);
+
+	const relevantParentDisabledReasons = !!props.project
+		.onGoingConnectionNodeType
+		? relevantParentDisabledReasonsWhileConnecting
+		: relevantParentDisabledReasonsWhenNotConnecting;
+
+	const disabled =
+		!!relevantParentDisabledReasons.length ||
+		!!parentVarCallsDifferentInternalCalls;
+
+	const disabledReasons = [
+		...relevantParentDisabledReasons,
+		..._disabledReasons
+	];
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__internal-call',
+				'canvas-draggable-card__nested-card'
+			].join(' ')}
+			id={getCanvasEntityDOMId(props.call)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(props.call)
+			}}
+		>
+			<InternalCallExecutionNode
+				call={props.call}
+				entity={props.entity}
+				canvasElement={props.canvasElement}
+				project={props.project}
+				parentDisabledReasons={disabledReasons}
+			/>
+			<div
+				style={{
+					width: '100%',
+					// `position: relative` so the absolutely-positioned
+					// UnreachableMarker below resolves its `top: -26px;
+					// right: 12px` offsets against THIS wrapper (which is just
+					// the internal-call body) instead of bubbling up to the
+					// parent variable card's own `canvas-draggable-card`
+					// container. Without this, the marker floats above the
+					// variable's header instead of above its own blue body and
+					// is invisible behind the variable card.
+					position: 'relative'
+				}}
+			>
+				{/* Pass `props.call` — not `props.entity` — as the entity to
+					check. The unreachability error lives on the InternalCall
+					itself; the parent variable instance may very well be
+					reachable while one of its method calls is not. */}
+				<UnreachableMarker
+					entity={props.call}
+					parentDisabledReasons={disabledReasons}
+					project={props.project}
+					draggableObject={props.canvasElement.draggableObject}
+				/>
+				<div
+					style={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						width: '100%',
+						// When the call is unreachable, this injects the
+						// `--unreachable-stripes-bg` CSS custom property; the
+						// `__header--small[style*="--unreachable-stripes-bg"]::before`
+						// rule in draggable-entity-card.css then layers the
+						// diagonal stripes on top of this body and pulses them
+						// in/out — same animation as on full-sized cards.
+						// Empty object spread when reachable, so no inline
+						// `style` noise on healthy nodes.
+						...getUnreachableStripesStyle(props.call)
+					}}
+					className={['canvas-draggable-card__header--small'].join(
+						' '
+					)}
+					onMouseOver={(e: any) => {
+						if (!!props.project.canvas?.activeConnectionDrawing) {
+							if (
+								!!props.project
+									.onGoingConnectionIncompatibleEntities?.[
+									props.call.id
+								]
+							) {
+								// Read the disabled reasons and add a tooltip to the mouse
+								const reasonsMessage =
+									props.project.onGoingConnectionIncompatibleEntities?.[
+										props.call.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'
+						);
+					}}
+				>
+					<div
+						className={[
+							'canvas-draggable-card__property__left-block canvas-draggable-card__property__value-container',
+							...(disabled || !!disabledReasons.length
+								? ['disabled']
+								: [])
+						].join(' ')}
+					>
+						<i className={`fas fa-${iconName}`} />
+
+						<span className="canvas-draggable-card__property__labels-group">
+							<p className="canvas-draggable-card__property__name">
+								{safeResolveEntityName(call, call.project)}
+							</p>
+							<p className="canvas-draggable-card__property__type">
+								Internal action
+							</p>
+						</span>
+					</div>
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: '6px'
+						}}
+						className={[
+							...(disabled || !!disabledReasons.length
+								? ['disabled']
+								: [])
+						].join(' ')}
+					>
+						<EntityLockedIconMenu
+							entity={call}
+							project={props.project}
+							canvasElement={props.canvasElement}
+							parentDisabledReasons={disabledReasons}
+						/>
+						<LogicErrorIconMenu
+							entity={call}
+							project={props.project}
+							canvasElement={props.canvasElement}
+							parentDisabledReasons={disabledReasons}
+						/>
+						<div className="canvas-draggable-card__property-row__menu-button">
+							<Button
+								variant="text"
+								color="grey"
+								iconEnd="fa-solid fa-ellipsis-v"
+								className="canvas-small-entity-card-menu-button"
+								ref={canvasPopup.anchorRef}
+								size="small"
+								id={`canvas-property-card-menu-button-${entity.id}`}
+								onClick={(e: any) => {
+									e.stopPropagation();
+									canvasPopup?.toggle();
+								}}
+								onDoubleClick={(
+									e: React.MouseEvent<HTMLButtonElement>
+								) => {
+									e.stopPropagation();
+									props.project?.canvas?.unselectAll();
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${EntityType.InternalCall}/${props.call.id}`
+									);
+								}}
+							/>
+						</div>
+					</span>
+					<SmallSuccessFailureNodes
+						call={call}
+						entity={entity}
+						draggableObject={props.canvasElement.draggableObject}
+						project={props.project}
+						parentDisabledReasons={disabledReasons}
+					/>
+				</div>
+				<div>
+					{expandedError ||
+						(!!(call as InternalCallState).error && (
+							<ErrorMapProperty
+								outputMap={
+									(call as InternalCallState).error || null
+								}
+								entity={call}
+								draggableObject={
+									props.canvasElement.draggableObject
+								}
+								project={props.project}
+								parentDisabledReasons={disabledReasons}
+							/>
+						))}
+					<ExpandPropertiesIconButton
+						project={props.project}
+						expanded={expandedError}
+						draggableObject={props.canvasElement.draggableObject}
+						onClick={() => {
+							const errorDeclaration =
+								getDeclarationOutputedError(call);
+
+							// Create error output-map entity before expanding the error for the first time
+							if (!call.error && !expandedError) {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											call,
+											false,
+											StateMutationAction.AddErrorOutputToInternalCall
+										)
+									);
+
+								const newOutputMapTransfer: IActionOutputMapTransfer =
+									OutputMapState.new(
+										changeSet
+									) as IActionOutputMapTransfer;
+								newOutputMapTransfer.parent =
+									call.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);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							}
+
+							setExpandedError(!expandedError);
+						}}
+						id={`expand-inputs-icon-button--${call.id}`}
+						tooltip={
+							expandedError
+								? 'Click to hide unused error output'
+								: 'Click to show unused error output'
+						}
+						tooltipPlacement="top"
+						style={{ marginTop: '6px' }}
+						parentDisabledReasons={disabledReasons}
+					/>
+
+					{props.call.getDataType(null)?.entity?.id !==
+						BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].void
+							.id && (
+						<MainValueOutput
+							entity={props.call}
+							canvasElement={props.canvasElement}
+							project={props.project}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					{call.inputs.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{call.inputs
+								.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) => {
+									return (
+										<InputMapProperty
+											key={inputMap.id}
+											inputMap={inputMap}
+											entity={props.call}
+											canvasElement={props.canvasElement}
+											project={props.project}
+											parentDisabledReasons={
+												disabledReasons
+											}
+											size="small"
+										/>
+									);
+								})}
+						</ul>
+					)}
+					{(call.outputs || []).length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{(call.outputs || [])
+								.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.call}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+										size="small"
+									/>
+								))}
+						</ul>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}