@elyx-code/editor-ui 0.0.2

package/src/components/dynamic-value/DynamicValue.tsx

@@ -0,0 +1,2395 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	BaseEntityNames,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	CanvasEntityState,
+	ChangeSet,
+	checkHasBaseEntity,
+	checkIsLiteralValueEmpty,
+	checkIsLiteralValueExplicitlyEmpty,
+	checkIsNullable,
+	ENTITY_WITH_DEFAULT_VALUE_TYPES,
+	EntityId,
+	EntityType,
+	getIsInteractiveOrTrue,
+	getParentCanvasEntity,
+	InputMapState,
+	isObject,
+	IValueStoreClient,
+	OutputMapState,
+	PrimitiveTypes,
+	ProjectState,
+	resolveDataTypeLabel,
+	StateMutationAction,
+	TERMINATION_TYPES,
+	ValueAsTypeState,
+	VariableDeclarationState,
+	VariableInstanceState,
+} from '@elyx-code/project-logic-tree';
+import { AbsoluteCanvasObject, RelativeObject } from '../../lib/canvas';
+import './dynamic-value.css';
+import { popupNotification } from '../../popup-notification';
+import WarningIcon from '../../assets/warning-sign-24px.png';
+import {
+	EntityWithValueState,
+	PropertyState,
+	ValueDescriptorState,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../services/editor';
+import {
+	DynamicValueTypes,
+	IDynamicValue,
+	IValueInheritanceLink,
+} from '../../services/editor/value-store';
+import {
+	handleLiteralValueChange,
+	IValueResolutionContext,
+	resolveValue,
+} from '../../services/execution/value-resolution';
+import { LiteralValueState } from '@elyx-code/project-logic-tree';
+import { resolveEntityName } from '@elyx-code/project-logic-tree';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import { Tooltip } from '@mui/material';
+import { Logger } from '@elyx-code/common-ts-utils';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import { getCanvasEntityDraggableContainerDOMId } from '../../services/editor/ui';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import { debounce } from '../../utils';
+
+export interface IDynamicValueDefinition {
+	value: LiteralValueState;
+	source: EntityWithValueState;
+}
+
+const renderEscapedString = (str?: string | null, isStringValue?: boolean) => {
+	if (!str && str !== '') return str;
+	if (typeof str !== 'string') return str;
+
+	// We split by literal \n, \t, \r, \\ to highlight them.
+	const parts = str.split(/(\\n|\\t|\\r|\\\\)/g);
+	
+	const content = parts.map((part, index) => {
+		if (part === '\\n' || part === '\\t' || part === '\\r' || part === '\\\\') {
+			return (
+				<span key={index} style={{ color: '#ffb86c', fontWeight: 'bold' }}>
+					{part}
+				</span>
+			);
+		}
+		// Render physical newlines if there are any
+		if (part.includes('\n')) {
+			return part.split('\n').map((line, i, arr) => (
+				<React.Fragment key={`${index}-${i}`}>
+					{line}
+					{i < arr.length - 1 && <br />}
+				</React.Fragment>
+			));
+		}
+		return part;
+	});
+
+	if (isStringValue) {
+		return (
+			<span style={{ display: 'inline-flex', alignItems: 'center' }}>
+				<span style={{ color: 'var(--color-string--value)', filter: 'brightness(0.6)', fontWeight: 800 }}>"</span>
+				{content}
+				<span style={{ color: 'var(--color-string--value)', filter: 'brightness(0.6)', fontWeight: 800 }}>"</span>
+			</span>
+		);
+	}
+
+	return content;
+};
+
+interface IDynamicValueProps {
+	// This is the entity that owns the value, for example an argument of a function call
+	valueOwner: EntityWithValueState | PropertyState | ValueDescriptorState;
+	// This is the value itself, sometimes it can be passed directly from the outside if it was already calculated
+	value?: LiteralValueState;
+	valueType?: DynamicValueTypes;
+	onlyDefault?: boolean;
+	parentCanvasObject?: AbsoluteCanvasObject | RelativeObject;
+	project: EditorService;
+	parentDisabledReasons: (
+		| CanvasEntityDisabledReason
+		| CanvasEntityOtherDisabledReason
+	)[];
+	onEdit?: (
+		e: any,
+		type: DynamicValueTypes.DefaultValue | DynamicValueTypes.Testing | null,
+	) => void;
+	onDelete?: (dynamicValue: IDynamicValue, e: any) => void;
+	canDelete?: boolean;
+	idSuffix?: string;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+}
+
+function stringifyValue(value: LiteralValueState): string {
+	if (value?.valueAsType) {
+		if (Array.isArray(value.valueAsType)) {
+			if (value.valueAsType.length === 0) {
+				return 'Empty list of entity references';
+			}
+			return (
+				'List of references to ' +
+				value.valueAsType
+					.map((entity) => '"' + resolveEntityName(entity, value.project) + '"')
+					.join(', ') +
+				' entities'
+			);
+		} else {
+			return (
+				'Reference to "' +
+				resolveEntityName(value.valueAsType, value.project) +
+				'" entity'
+			);
+		}
+	}
+
+	const rawValue = value?.value;
+
+	if (isObject(rawValue)) {
+		return JSON.stringify(rawValue, null, 2);
+	}
+
+	if (Array.isArray(rawValue)) {
+		return JSON.stringify(rawValue, null, 2);
+	}
+
+	if (rawValue === undefined) {
+		return 'Empty';
+	}
+
+	if (rawValue === null) {
+		return 'Empty';
+	}
+
+	return rawValue.toString();
+}
+
+// Determine if the value owner can have test values
+export function isTestableValue(valueOwner: EntityWithValueState): boolean {
+	if (!ENTITY_WITH_DEFAULT_VALUE_TYPES.includes(valueOwner.type)) {
+		return false;
+	}
+
+	const dataType = valueOwner.getDataType(null);
+
+	if (!dataType || !dataType.isResolved) {
+		return true;
+	} else if (dataType.entity?.type === EntityType.PrimitiveEntity) {
+		return true;
+	}
+
+	if (dataType.entity?.type === EntityType.DefinitionEntity) {
+		if (
+			checkHasBaseEntity(
+				dataType.entity,
+				BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+			)
+		) {
+			return false;
+		}
+	} else if (dataType.entity?.type === EntityType.BuiltInBaseEntity) {
+		if (
+			dataType.entity.id.startsWith('BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_')
+		) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default function DynamicValue(props: IDynamicValueProps) {
+	const [updateKey, setValue] = useState(0);
+	// For the non-canvas popup dropdown menu
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const onlyDefault = props.onlyDefault || false;
+
+	const [instanceId] = useState(() => Math.random().toString(36).substring(2, 9));
+
+	const stable_id = props.valueOwner
+		? 'dynamic-value--' + props.valueOwner.id + (props.idSuffix || '') + '--' + instanceId
+		: null;
+
+	const id: string =
+		stable_id ||
+		'temp-value-id--' +
+			instanceId +
+			(props.idSuffix || '');
+
+	/*
+		The value label color looks different based on the type of the value.
+
+		If the value is given by the user, we use the primary color.
+
+		If the value is inherited from a value given by the user higher up in the call stack,
+		or if the value is a default value,
+		or if the value is empty but it isn't required,
+		or if the value is auto- calculated from a simple operation,
+		we use the grey color.
+
+		If the value is the result of a test execution, we use the success color.
+
+		If the value is empty and it is required, we use the error color.
+	*/
+	const resolveValueMetadata = (
+		value: IDynamicValue,
+	): {
+		color: 'primary' | 'error' | 'grey' | 'success';
+		hint: DynamicValueTypes;
+	} => {
+		if (!value) {
+			return {
+				color: 'grey',
+				hint: null,
+			};
+		}
+
+		switch (value.type) {
+			case DynamicValueTypes.Inherited:
+			case DynamicValueTypes.DefaultValue:
+			case DynamicValueTypes.Empty:
+			case DynamicValueTypes.QueuedAutocalculation:
+				return {
+					color: 'grey',
+					hint: value.type,
+				};
+			case DynamicValueTypes.AutoCalculated:
+			case DynamicValueTypes.ExecutionResult:
+				return {
+					color: 'success',
+					hint: value.type,
+				};
+			case DynamicValueTypes.Missing:
+				return {
+					color: 'error',
+					hint: value.type,
+				};
+			case DynamicValueTypes.Testing:
+				return {
+					color: 'primary',
+					hint: value.type,
+				};
+		}
+
+		return {
+			color: 'grey',
+			hint: value.type,
+		};
+	};
+
+	/*
+		Some values are not primitive, for example a function call can return an object
+		In this case, we need to display the object in a dialog,
+		so we need to resolve the label for the value that isn't the explicit value itself
+		But a description of the value, like: Object, List, etc.
+	*/
+	const resolveLabelForValue = (
+		value: LiteralValueState,
+		valueOwner: EntityWithValueState | PropertyState | ValueDescriptorState,
+	): React.ReactNode => {
+		if (!value) {
+			return 'Inherited';
+		}
+
+		if (checkIsLiteralValueExplicitlyEmpty(value)) {
+			return 'Empty';
+		}
+
+		const valueOwnerDataType = valueOwner?.getDataType(null) || null;
+
+		// Value as type show the entity name
+		if (!!value.valueAsTypeSingle) {
+			const entityName = resolveEntityName(
+				value.valueAsTypeSingle,
+				props.project.logic,
+			);
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__object'>
+					{entityName}
+				</div>
+			);
+		} else if (!!value.valueAsTypeList) {
+			if (Array.isArray(value.valueAsTypeList)) {
+				return (
+					<div className='dynamic-value__resolved-value dynamic-value__resolved-value__list'>
+						List
+					</div>
+				);
+			}
+		}
+
+		if (!!valueOwnerDataType) {
+			if (valueOwnerDataType.isList) {
+				return (
+					<div className='dynamic-value__resolved-value dynamic-value__resolved-value__list'>
+						List
+					</div>
+				);
+			}
+		}
+
+		if (Array.isArray(value.value)) {
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__list'>
+					List
+				</div>
+			);
+		}
+
+		if (value.name === PrimitiveTypes.String) {
+			const stringifiedValue = value?.rawString ?? value?.value?.toString();
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__string'>
+					{renderEscapedString(stringifiedValue, true)}
+				</div>
+			);
+		}
+
+		if (value.name === PrimitiveTypes.Number) {
+			const stringifiedValue = value?.value?.toString();
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__number'>
+					{stringifiedValue}
+				</div>
+			);
+		}
+
+		if (value.name === PrimitiveTypes.Boolean) {
+			const stringifiedValue = value?.value?.toString();
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__boolean'>
+					{stringifiedValue}
+				</div>
+			);
+		}
+
+		if (
+			value.name === PrimitiveTypes.Date ||
+			value.name === PrimitiveTypes.UUID
+		) {
+			const stringifiedValue = value?.value?.toString();
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__string'>
+					{stringifiedValue}
+				</div>
+			);
+		}
+
+		if (value.name === PrimitiveTypes.Bytes) {
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__object'>
+					Bytes
+				</div>
+			);
+		}
+
+		if (typeof value.value === 'object' && value.value !== null) {
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__object'>
+					Structure
+				</div>
+			);
+		}
+
+		if (typeof value.value === 'string') {
+			const stringifiedValue = value.rawString ?? value.value.toString();
+
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__string'>
+					{renderEscapedString(stringifiedValue, true)}
+				</div>
+			);
+		}
+
+		if (typeof value.value === 'number') {
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__number'>
+					{value.value.toString()}
+				</div>
+			);
+		}
+
+		if (typeof value.value === 'boolean') {
+			return (
+				<div className='dynamic-value__resolved-value dynamic-value__resolved-value__boolean'>
+					{value.value.toString()}
+				</div>
+			);
+		}
+
+		return value?.value?.toString();
+	};
+
+	const valueOwner = props.valueOwner;
+
+	const dynamicValue: IDynamicValue | null = useMemo(() => {
+		if (props.project.destroyed) {
+			return null;
+		}
+
+		let tmpValue: IDynamicValue = {
+			value: props.value,
+			type: props.valueType,
+			valueOwner: props.valueOwner,
+			inheritanceLink: null,
+		};
+
+		if (!props.value && !props.valueType) {
+			const dynamicValueResolutionResult = !!valueOwner
+				? resolveValue(valueOwner, props.project, onlyDefault)
+				: null;
+
+			const resolvedValue = !!dynamicValueResolutionResult
+				? {
+						...dynamicValueResolutionResult,
+						type: props.valueType || dynamicValueResolutionResult.type,
+						value: props.value || dynamicValueResolutionResult.value,
+					}
+				: tmpValue;
+
+			return resolvedValue;
+		}
+
+		return tmpValue;
+	}, [
+		valueOwner,
+		props.project,
+		onlyDefault,
+		props.value,
+		props.valueType,
+		updateKey,
+	]);
+
+	const defaultValueOnly = useMemo(() => {
+		if (props.project.destroyed) {
+			return null;
+		}
+
+		return props.onlyDefault
+			? dynamicValue
+			: resolveValue(valueOwner, props.project, true);
+	}, [props.onlyDefault, dynamicValue, valueOwner, props.project, updateKey]);
+
+	const testValueOnly = useMemo(() => {
+		if (props.project.destroyed) {
+			return null;
+		}
+
+		let forcedNoDefault = null;
+
+		try {
+			const context: IValueResolutionContext = {
+				...(props.project as IValueResolutionContext),
+				getValueTypePreference(_valueOwnerId: string) {
+					if (!isTestableValue(valueOwner as EntityWithValueState)) {
+						return DynamicValueTypes.DefaultValue;
+					}
+
+					return DynamicValueTypes.Testing;
+				},
+			};
+
+			forcedNoDefault = resolveValue(valueOwner, context, false);
+		} catch (e) {
+			Logger.error('Error resolving forced no default value', e, valueOwner);
+		}
+
+		return forcedNoDefault?.type === DynamicValueTypes.Testing
+			? forcedNoDefault
+			: null;
+	}, [valueOwner, props.project, updateKey]);
+
+	const resolvedStoredInitialPreference:
+		| DynamicValueTypes.DefaultValue
+		| DynamicValueTypes.Testing =
+		!!props.valueOwner.id &&
+		(props.project.getValueTypePreference(props.valueOwner.id) as
+			| DynamicValueTypes.DefaultValue
+			| DynamicValueTypes.Testing);
+
+	// Check local storage for user preference for this value
+	const [valueTypePreference, setValueTypePreference] = useState<
+		DynamicValueTypes.DefaultValue | DynamicValueTypes.Testing
+	>(resolvedStoredInitialPreference || DynamicValueTypes.DefaultValue);
+
+	const handleSetPreference = (
+		newPreference: DynamicValueTypes.DefaultValue | DynamicValueTypes.Testing,
+	) => {
+		setValueTypePreference(newPreference);
+		if (props.valueOwner.id) {
+			props.project.setValueTypePreference(props.valueOwner.id, newPreference);
+		}
+	};
+
+	let finalResolvedPreference = valueTypePreference;
+
+	if (
+		valueTypePreference === DynamicValueTypes.Testing &&
+		dynamicValue?.type !== DynamicValueTypes.Testing
+	) {
+		finalResolvedPreference = DynamicValueTypes.DefaultValue;
+	} else if (
+		valueTypePreference === DynamicValueTypes.DefaultValue &&
+		dynamicValue?.type === DynamicValueTypes.Testing
+	) {
+		finalResolvedPreference = DynamicValueTypes.Testing;
+	}
+
+	// Check if the counterpart value type exists
+	// Meaning, if default is shown, check if testing exists, and vice versa
+	let counterpartTypeExists = false;
+
+	if (
+		finalResolvedPreference === DynamicValueTypes.DefaultValue &&
+		testValueOnly?.type === DynamicValueTypes.Testing
+	) {
+		counterpartTypeExists = true;
+	} else if (
+		finalResolvedPreference === DynamicValueTypes.Testing &&
+		(defaultValueOnly?.type === DynamicValueTypes.DefaultValue ||
+			defaultValueOnly?.type === DynamicValueTypes.External)
+	) {
+		counterpartTypeExists = true;
+	}
+
+	const canSwitch =
+		!props.parentDisabledReasons.length &&
+		!props.onlyDefault &&
+		ENTITY_WITH_DEFAULT_VALUE_TYPES.includes(valueOwner?.type) &&
+		// Should not allow switching if the current value is default, and the value owner is not interactive
+		!(
+			finalResolvedPreference === DynamicValueTypes.DefaultValue &&
+			!getIsInteractiveOrTrue(valueOwner)
+		) &&
+		isTestableValue(valueOwner as EntityWithValueState);
+
+	const valueMetadata = resolveValueMetadata(dynamicValue);
+	const thereIsValue = !checkIsLiteralValueEmpty(dynamicValue?.value);
+
+	const canCopyValue = thereIsValue;
+
+	const canDelete =
+		(props.canDelete ?? true) &&
+		!!props.onDelete &&
+		valueOwner.type !== EntityType.OutputMap &&
+		!props.parentDisabledReasons.length;
+
+	const valueOwnerDataType = valueOwner?.getDataType(null) || null;
+
+	const relevantParentDisabledReasons = props.parentDisabledReasons.filter(
+		(reason) => {
+			if (
+				dynamicValue?.type === DynamicValueTypes.ExecutionResult &&
+				[
+					CanvasEntityConnectionDisabledReason.CannotInteractWithInputInVariableWithInternalCalls,
+					CanvasEntityConnectionDisabledReason.PropertyIsConstantItsValueCantBeReset,
+				].includes(reason as any)
+			) {
+				return false;
+			}
+
+			return true;
+		},
+	);
+
+	const canEdit =
+		(!!dynamicValue?.type
+			? !(
+					[
+						DynamicValueTypes.ExecutionResult,
+						DynamicValueTypes.AutoCalculated,
+						DynamicValueTypes.QueuedAutocalculation,
+					] as string[]
+				).includes(dynamicValue?.type)
+			: true) &&
+		!!props.onEdit &&
+		!props.parentDisabledReasons.length;
+
+	const canSetToNull = canEdit && checkIsNullable(valueOwnerDataType);
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--dynamic-value',
+				]}
+				id={id + '--popup--body'}
+			>
+				<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+					{dynamicValue?.type === DynamicValueTypes.Testing && 'Testing value'}
+					{dynamicValue?.type === DynamicValueTypes.DefaultValue &&
+						'Default value'}
+					{dynamicValue?.type === DynamicValueTypes.AutoCalculated &&
+						'Auto-calculated value'}
+					{dynamicValue?.type === DynamicValueTypes.ExecutionResult &&
+						'Execution result value'}
+					{dynamicValue?.type === DynamicValueTypes.Inherited &&
+						'Inherited value'}
+					{dynamicValue?.type === DynamicValueTypes.Missing &&
+						'Missing required value'}
+				</h3>
+				{canEdit ? (
+					<>
+						Double click to <b>edit</b>
+					</>
+				) : (
+					<>
+						Double click to <b>inspect</b>
+					</>
+				)}
+				<br />
+				<br />
+
+				{/* Data type label */}
+				<b>Type: </b>
+				{resolveDataTypeLabel(valueOwnerDataType)}
+
+				<br />
+
+				{/* horizontal dividing line */}
+				<hr />
+
+				{thereIsValue ? (
+					<div className='tooltip--dynamic-value__value'>
+						{renderEscapedString(
+							dynamicValue.value?.name === PrimitiveTypes.String && dynamicValue.value?.rawString !== null
+								? dynamicValue.value.rawString
+								: stringifyValue(dynamicValue.value),
+							dynamicValue.value?.name === PrimitiveTypes.String
+						)}
+					</div>
+				) : (
+					<span className='dynamic-value__empty'>There is no value</span>
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[
+			id,
+			dynamicValue?.value?.value,
+			dynamicValue?.value?.valueAsType,
+			canEdit,
+			thereIsValue,
+			valueOwnerDataType,
+			updateKey,
+		],
+	);
+
+	// Only if there is a 'parentCanvasObject' prop, we should use the canvasPopup
+	// Otherwise, we should use the Tooltip component
+	const canvasPopup = !!props.parentCanvasObject
+		? useCanvasPopup(
+				{
+					editor: props.project,
+					id: id + '--popup',
+					anchorQuerySelector: '#' + id,
+					arrowClasses: ['dynamic-value-popup-arrow'],
+					parentCanvasObject: props.parentCanvasObject,
+					arrowContainerSelector: '#' + id + '--popup--body',
+					placement: props.popupPlacement || 'bottom',
+				},
+				memoizedCanvasPopupBody,
+				[
+					updateKey,
+					dynamicValue?.value?.value,
+					dynamicValue?.value?.valueAsType,
+				],
+			)
+				.setupHover({
+					closeDelay: 80,
+					openDelay: 600,
+				})
+				.onBeforeShow((e) => {
+					const otherPopup =
+						CanvasPopup.globalCanvasPopups[
+							id + '--popup-dynamic-value-switch-button'
+						];
+
+					if (otherPopup && otherPopup.open) {
+						return false;
+					}
+
+					if (props.parentDisabledReasons.length) {
+						return false;
+					}
+
+					return true;
+				})
+		: null;
+
+	const memoizedCanvasPopupSwitchButtonBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--dynamic-value',
+				]}
+				id={id + '--popup-dynamic-value-switch-button--body'}
+			>
+				{!counterpartTypeExists ? (
+					<>
+						Click to add new{' '}
+						<b>
+							{dynamicValue?.type === DynamicValueTypes.DefaultValue ||
+							dynamicValue?.type === DynamicValueTypes.External ||
+							dynamicValue?.type === DynamicValueTypes.Empty
+								? 'test'
+								: 'default'}{' '}
+							value
+						</b>
+					</>
+				) : (
+					<>
+						Click to switch to{' '}
+						<b>
+							{dynamicValue?.type === DynamicValueTypes.DefaultValue ||
+							dynamicValue?.type === DynamicValueTypes.External ||
+							dynamicValue?.type === DynamicValueTypes.Empty
+								? 'test'
+								: 'default'}{' '}
+							value
+						</b>
+					</>
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[
+			id,
+			dynamicValue?.type,
+			dynamicValue?.value?.value,
+			dynamicValue?.value?.valueAsType,
+			counterpartTypeExists,
+			updateKey,
+		],
+	);
+
+	const canvasPopupSwitchButton = !!props.parentCanvasObject
+		? useCanvasPopup(
+				{
+					editor: props.project,
+					id: id + '--popup-dynamic-value-switch-button',
+					anchorQuerySelector: `#switch-dynamic-value-type-button--${id}`,
+					// arrowClasses: ['dropdown-menu-card-arrow'],
+					parentCanvasObject: props.parentCanvasObject,
+					arrowContainerSelector:
+						'#' + id + '--popup-dynamic-value-switch-button--body',
+					placement: props.popupPlacement === 'bottom' ? 'top' : 'bottom',
+					persisted: true,
+					offset: -6,
+				},
+				memoizedCanvasPopupSwitchButtonBody,
+				[
+					updateKey,
+					dynamicValue?.value?.value,
+					dynamicValue?.value?.valueAsType,
+				],
+			)
+				.setupHover({
+					closeDelay: 80,
+					openDelay: 600,
+				})
+				.onBeforeShow((e, self) => {
+					e.preventDefault();
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+
+					if (props.parentDisabledReasons.length) {
+						return false;
+					}
+
+					return true;
+				})
+		: null;
+
+	const debouncedCopyAndNotify = debounce(
+		function () {
+			if (!canCopyValue) {
+				return;
+			}
+
+			let stringifiedValue = '';
+
+			try {
+				stringifiedValue = stringifyValue(dynamicValue?.value);
+			} catch (e) {
+				Logger.error('Error stringifying value for copy', e, dynamicValue);
+				stringifiedValue = '';
+			}
+
+			// Copy to clipboard
+			navigator.clipboard.writeText(stringifiedValue);
+
+			// Show toast notification
+			popupNotification({
+				text: 'Value copied to clipboard',
+				// color: 'success',
+			});
+		},
+		400,
+		true,
+	);
+
+	const _handleLiteralValueChange = (
+		newValue: string | number | boolean | string[],
+		localOnlyDefault?: boolean,
+		actionName?: StateMutationAction,
+	) => {
+		let storage: ChangeSet | IValueStoreClient = props.project.localTestValues;
+
+		if (localOnlyDefault ?? onlyDefault) {
+			storage = props.project.logic.addChangeSet(
+				new ChangeSet(
+					props.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					valueOwner,
+					false,
+					actionName || StateMutationAction.RemoveLiteralValue,
+				),
+			);
+		}
+
+		const changeSet = handleLiteralValueChange(
+			newValue,
+			valueOwner,
+			props.project.logic,
+			storage,
+		);
+
+		if (!!changeSet) {
+			props.project.renderAndCloseChangeSet(changeSet);
+		} else {
+			props.project.emit(valueOwner.id, {});
+		}
+
+		forceUpdate();
+	};
+
+	const memoizedCanvasMenuDropdownBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={'canvas-dropdown-menu--' + id + '--popup--body'}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async (_, e) => {
+								if (canEdit) {
+									let nextValueType = DynamicValueTypes.DefaultValue;
+									handleSetPreference(nextValueType);
+
+									props.onEdit?.(e, nextValueType);
+								}
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: !canEdit,
+							tooltip: !canEdit
+								? 'Cannot edit this value'
+								: 'Edit the value (you can also double click the value directly)',
+							parentCanvasObject: popup.self,
+							id: 'canvas-dropdown-menu--' + id + '--edit',
+						},
+						...(() => {
+							if (!!valueOwnerDataType && valueOwnerDataType.asType) {
+								const asTypeValue = dynamicValue?.value?.valueAsType;
+								const thereAreMultipleEntityReferences =
+									Array.isArray(asTypeValue) && asTypeValue.length > 1;
+								const isEmpty =
+									!asTypeValue ||
+									(Array.isArray(asTypeValue) && asTypeValue.length === 0);
+
+								let target: ValueAsTypeState | null =
+									asTypeValue as ValueAsTypeState;
+
+								if (thereAreMultipleEntityReferences) {
+									target = (asTypeValue as ValueAsTypeState[])[0];
+								}
+
+								let definitionName = '';
+
+								let canvasEntity: CanvasEntityState | null = null;
+
+								if (target) {
+									definitionName = resolveEntityName(
+										target,
+										props.project.logic,
+									);
+
+									canvasEntity = getParentCanvasEntity(target);
+								}
+
+								return [
+									{
+										project: props.project,
+										onClick: async (
+											_: any,
+											e: React.MouseEvent<
+												HTMLButtonElement | HTMLAnchorElement,
+												MouseEvent
+											>,
+										) => {
+											e.stopPropagation();
+
+											// This stops the native DOM bubbling that the Canvas Engine is listening to
+											e.nativeEvent.stopImmediatePropagation();
+											e.nativeEvent.stopPropagation();
+
+											if (isEmpty) {
+												return;
+											}
+
+											if (!canvasEntity) {
+												return;
+											}
+
+											const objectId =
+												getCanvasEntityDraggableContainerDOMId(canvasEntity);
+
+											props.project?.canvas?.scrollToObjectById(objectId);
+										},
+										label: thereAreMultipleEntityReferences
+											? 'Go to first definition'
+											: 'Go to definition',
+										iconEnd: 'fa-solid fa-arrow-up-right-from-square',
+										disabled: isEmpty || !canvasEntity,
+										tooltip: isEmpty
+											? 'No definition has been set'
+											: !canvasEntity
+												? 'Definition is not in the canvas'
+												: thereAreMultipleEntityReferences
+													? `Go to the first definition of this value (${definitionName})`
+													: `Go to ${definitionName} in the canvas`,
+										parentCanvasObject: popup.self,
+										id: 'canvas-dropdown-menu--' + id + '--go-to-definition',
+									},
+								];
+							}
+
+							return [];
+						})(),
+						{
+							project: props.project,
+							onClick: async (_, e) => {
+								if (canDelete) {
+									props.onDelete?.(dynamicValue, e);
+								}
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: !canDelete,
+							tooltip: !canDelete
+								? 'Cannot delete this value'
+								: 'Remove the value to not override any previous value that might be present',
+							parentCanvasObject: popup.self,
+							id: 'canvas-dropdown-menu--' + id + '--delete',
+						},
+						{
+							project: props.project,
+							onClick: debouncedCopyAndNotify,
+							label: 'Copy value',
+							color: 'primary',
+							iconEnd: 'fa-regular fa-copy',
+							disabled: !canCopyValue,
+							tooltip: !canCopyValue ? 'Cannot copy this value' : '',
+							parentCanvasObject: popup.self,
+							id: 'canvas-dropdown-menu--' + id + '--copy',
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								if (!canSetToNull) {
+									return;
+								}
+
+								const localOnlyDefault =
+									finalResolvedPreference === DynamicValueTypes.DefaultValue ||
+									onlyDefault;
+
+								_handleLiteralValueChange(
+									null,
+									localOnlyDefault,
+									StateMutationAction.SetLiteralValueToExplicitlyEmpty,
+								);
+							},
+							label: 'Set as empty',
+							color: 'primary',
+							iconEnd: 'fa-solid fa-empty-set',
+							disabled: !canSetToNull,
+							tooltip: !canSetToNull
+								? 'Cannot set this value as empty' +
+									(!checkIsNullable(valueOwnerDataType)
+										? '. The data type doesn not support empty values'
+										: '')
+								: 'Sets a value explicitly as empty (null), to override any previous value that might be present',
+							parentCanvasObject: popup.self,
+							id: 'canvas-dropdown-menu--' + id + '--set-empty',
+						},
+						{
+							project: props.project,
+							onClick: async (_, e) => {
+								if (canSwitch) {
+									let nextValueType = finalResolvedPreference as
+										| DynamicValueTypes.DefaultValue
+										| DynamicValueTypes.Testing;
+
+									// if (
+									// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+									// 	valueOwner.type === EntityType.InputMap
+									// ) {
+									// 	finalResolvedPreference === DynamicValueTypes.DefaultValue;
+									// } else if (
+									if (
+										finalResolvedPreference === DynamicValueTypes.DefaultValue
+									) {
+										nextValueType = DynamicValueTypes.Testing;
+									} else if (
+										finalResolvedPreference === DynamicValueTypes.Testing
+									) {
+										nextValueType = DynamicValueTypes.DefaultValue;
+									} else if (dynamicValue?.type === DynamicValueTypes.Testing) {
+										nextValueType = DynamicValueTypes.DefaultValue;
+									} else {
+										// If current value is neither default nor testing, switch to the other type
+										nextValueType = DynamicValueTypes.Testing;
+									}
+
+									handleSetPreference(nextValueType);
+
+									// if (
+									// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+									// 	valueOwner.type === EntityType.InputMap
+									// ) {
+									// 	props.onEdit?.(e, nextValueType);
+									// } else if (!counterpartTypeExists) {
+									if (!counterpartTypeExists) {
+										props.onEdit?.(e, nextValueType);
+									}
+								}
+							},
+							label: (() => {
+								if (
+									dynamicValue.type === DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									if (!counterpartTypeExists) {
+										return 'Click to add real value';
+									} else {
+										return 'Use real value';
+									}
+								}
+
+								if (
+									dynamicValue.type !== DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									if (!counterpartTypeExists) {
+										return 'Click to add test value';
+									} else {
+										return 'Use test value';
+									}
+								}
+
+								return 'Switch values';
+							})(),
+							color: 'primary',
+							iconEnd:
+								'fa-solid fa-' + (counterpartTypeExists ? 'retweet' : 'plus'),
+							disabled: (() => {
+								if (
+									dynamicValue.type === DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									return false;
+								}
+
+								if (
+									dynamicValue.type !== DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									return false;
+								}
+
+								return true;
+							})(),
+							tooltip: (() => {
+								if (
+									dynamicValue.type === DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									return 'Switch the active value to use the real value that will be published with the project';
+								}
+
+								if (
+									dynamicValue.type !== DynamicValueTypes.Testing &&
+									canSwitch
+								) {
+									return 'Switch the active value to use a temporary value for testing purposes';
+								}
+
+								// Disabled explanations
+
+								return 'Switch active values';
+							})(),
+							parentCanvasObject: popup.self,
+							id: 'canvas-dropdown-menu--' + id + '--switch-values',
+						},
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[
+			canDelete,
+			canEdit,
+			canCopyValue,
+			canSetToNull,
+			canSwitch,
+			dynamicValue,
+			id,
+			valueOwnerDataType,
+			updateKey,
+			counterpartTypeExists,
+			finalResolvedPreference,
+			debouncedCopyAndNotify,
+			_handleLiteralValueChange,
+			props.onEdit,
+			props.onDelete,
+			props.project,
+		],
+	);
+
+	const canvasMenuDropdown = !!props.parentCanvasObject
+		? useCanvasPopup(
+				{
+					editor: props.project,
+					id: 'canvas-dropdown-menu--' + id + '--popup',
+					anchorQuerySelector: `${id}--dropdown-menu-button`,
+					arrowClasses: ['dropdown-menu-card-arrow'],
+					parentCanvasObject: props.parentCanvasObject,
+					arrowContainerSelector:
+						'#canvas-dropdown-menu--' + id + '--popup--body',
+					placement: 'bottom',
+				},
+				memoizedCanvasMenuDropdownBody,
+				[
+					canDelete,
+					canEdit,
+					canCopyValue,
+					canSetToNull,
+					canSwitch,
+					dynamicValue,
+					id,
+					valueOwnerDataType,
+					updateKey,
+					counterpartTypeExists,
+					finalResolvedPreference,
+					debouncedCopyAndNotify,
+					_handleLiteralValueChange,
+					props.onEdit,
+					props.onDelete,
+					props.project,
+				],
+			)
+		: null;
+
+	// Recursively unfold the inheritance tree and resolve all dependencies so we subscribe them as events
+	const subscribeValueInheritanceUpdates = useCallback(
+		(inheritanceLink: IValueInheritanceLink): (() => void) => {
+			// Create a stable handler
+			const handleInheritanceUpdate = () => {
+				forceUpdate();
+			};
+
+			const cleanupFunctions: (() => void)[] = [];
+
+			// Use a recursive inner function to gather all listeners
+			const subscribeRecursive = (link: IValueInheritanceLink) => {
+				link.sources.forEach((valueInheritanceLink) => {
+					if (!valueInheritanceLink) {
+						return;
+					}
+
+					const ownerId = valueInheritanceLink.valueOwner.id;
+					props.project.on(ownerId, handleInheritanceUpdate);
+					cleanupFunctions.push(() => {
+						props.project.off(ownerId, handleInheritanceUpdate);
+					});
+
+					const dataType = (
+						valueInheritanceLink.valueOwner as VariableDeclarationState
+					).dataType;
+					if (dataType) {
+						const dataTypeId = dataType.id;
+						props.project.on(dataTypeId, handleInheritanceUpdate);
+						cleanupFunctions.push(() => {
+							props.project.off(dataTypeId, handleInheritanceUpdate);
+						});
+					}
+
+					if (valueInheritanceLink.inheritanceLink) {
+						subscribeRecursive(valueInheritanceLink.inheritanceLink);
+					}
+				});
+			};
+
+			// Start the recursion
+			subscribeRecursive(inheritanceLink);
+
+			// Return a single function that cleans up everything
+			return () => {
+				cleanupFunctions.forEach((cleanup) => cleanup());
+			};
+		},
+		[props.project, forceUpdate], // Dependencies for the useCallback
+	);
+
+	useEffect(() => {
+		const handleValueOwnerUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleValueUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleValueStoresinitialized = () => {
+			forceUpdate();
+		};
+
+		props.project.on(props.valueOwner.id, handleValueOwnerUpdate);
+
+		if (props.value?.id) {
+			props.project.on(props.value.id, handleValueUpdate);
+		}
+
+		if (
+			valueOwner.type === EntityType.InputMap ||
+			valueOwner.type === EntityType.OutputMap
+		) {
+			let relevantParent = valueOwner.parent;
+
+			if (
+				relevantParent &&
+				relevantParent.type === EntityType.VariableInstance
+			) {
+				relevantParent = relevantParent.declaration;
+			}
+
+			if (relevantParent) {
+				props.project.on(relevantParent.id, handleValueOwnerUpdate);
+			}
+		}
+
+		// Call the recursive subscription and store its cleanup function
+		let inheritanceCleanup: (() => void) | null = null;
+		if (dynamicValue?.inheritanceLink) {
+			inheritanceCleanup = subscribeValueInheritanceUpdates(
+				dynamicValue.inheritanceLink,
+			);
+		}
+
+		const subs: EntityId[] = (() => {
+			if (!props.valueOwner) {
+				return [];
+			}
+			const entities: Set<string> = new Set(props.valueOwner?.id);
+
+			if (
+				[
+					EntityType.OutputMap,
+					EntityType.InputMap,
+					EntityType.VariableInstance,
+				].includes(props.valueOwner.type) &&
+				!!(
+					props.valueOwner as
+						| VariableInstanceState
+						| InputMapState
+						| OutputMapState
+				).declaration?.id
+			) {
+				entities.add(
+					(
+						props.valueOwner as
+							| VariableInstanceState
+							| InputMapState
+							| OutputMapState
+					).declaration?.id,
+				);
+			}
+
+			if (
+				[EntityType.OutputMap, EntityType.InputMap].includes(
+					props.valueOwner.type,
+				)
+			) {
+				const self: InputMapState | OutputMapState = props.valueOwner as
+					| InputMapState
+					| OutputMapState;
+
+				const parentToTarget =
+					self.parent?.type === EntityType.VariableInstance
+						? self.parent.declaration
+						: self.parent;
+
+				if (
+					[EntityType.VariableDeclaration, ...TERMINATION_TYPES].includes(
+						parentToTarget.type,
+					)
+				) {
+					entities.add(parentToTarget.id);
+				}
+			}
+
+			return [...entities];
+		})();
+
+		const handleValueChange = (payload: any) => {
+			if (
+				payload?.owner?.id === props.valueOwner?.id ||
+				subs.includes(payload?.owner?.id)
+			) {
+				forceUpdate();
+			}
+		};
+
+		props.project.on('value-stores-initialized', handleValueStoresinitialized);
+		props.project.on('value-written', handleValueChange);
+		props.project.on('value-removed', handleValueChange);
+		props.project.on('test-setup-started', handleValueChange);
+		props.project.on('test-exited', handleValueChange);
+
+		return () => {
+			props.project.off(props.valueOwner.id, handleValueOwnerUpdate);
+			if (props.value?.id) {
+				props.project.off(props.value.id, handleValueUpdate);
+			}
+
+			if (
+				valueOwner.type === EntityType.InputMap ||
+				valueOwner.type === EntityType.OutputMap
+			) {
+				let relevantParent = valueOwner.parent;
+
+				if (
+					relevantParent &&
+					relevantParent.type === EntityType.VariableInstance
+				) {
+					relevantParent = relevantParent.declaration;
+				}
+
+				if (relevantParent) {
+					props.project.off(relevantParent.id, handleValueOwnerUpdate);
+				}
+			}
+
+			// Call the recursive cleanup function
+			if (inheritanceCleanup) {
+				inheritanceCleanup();
+			}
+
+			props.project.off(
+				'value-stores-initialized',
+				handleValueStoresinitialized,
+			);
+			props.project.off('value-written', handleValueChange);
+			props.project.off('value-removed', handleValueChange);
+		};
+	}, [
+		props.project,
+		props.valueOwner.id,
+		props.value?.id,
+		dynamicValue, // Rerun if the resolved dynamicValue changes
+		subscribeValueInheritanceUpdates, // The stable useCallback function
+		updateKey,
+	]);
+
+	// Set a flag on the event during the capture phase
+	useEffect(() => {
+		const el = document.getElementById(id);
+		if (!el) return;
+
+		const flagEvent = (e: MouseEvent) => {
+			// We tag the event object directly
+			(e as any).__canvasIgnore = true;
+		};
+
+		// The 'true' argument attaches this to the CAPTURE phase (top-down)
+		el.addEventListener('dblclick', flagEvent, true);
+		el.addEventListener('mousedown', flagEvent, true);
+
+		return () => {
+			el.removeEventListener('dblclick', flagEvent, true);
+			el.removeEventListener('mousedown', flagEvent, true);
+		};
+	}, [id]);
+
+	return (
+		<Tooltip
+			// The styles overrides below can be cleaned up
+			classes={{
+				tooltip: 'tooltip tooltip--dynamic-value',
+				arrow: 'mui-tooltip-arrow',
+			}}
+			slotProps={{
+				popper: {
+					className: 'tooltip tooltip--dynamic-value',
+					style: {
+						margin: 0,
+						padding: 0,
+					},
+					modifiers: [
+						{
+							name: 'offset',
+							options: {
+								offset: [0, 8],
+							},
+						},
+					],
+				},
+				tooltip: {
+					className: 'tooltip tooltip--dynamic-value',
+					style: {
+						margin: 0,
+						padding: 5,
+					},
+				},
+				arrow: {
+					className: 'mui-tooltip-arrow',
+				},
+			}}
+			arrow
+			title={
+				!props.parentCanvasObject && !props.parentDisabledReasons.length ? (
+					<>
+						<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+							{dynamicValue?.type === DynamicValueTypes.Testing &&
+								'Testing value'}
+							{dynamicValue?.type === DynamicValueTypes.DefaultValue &&
+								'Default value'}
+							{dynamicValue?.type === DynamicValueTypes.AutoCalculated &&
+								'Auto-calculated value'}
+							{dynamicValue?.type === DynamicValueTypes.ExecutionResult &&
+								'Execution result value'}
+							{dynamicValue?.type === DynamicValueTypes.Inherited &&
+								'Inherited value'}
+							{dynamicValue?.type === DynamicValueTypes.Missing &&
+								'Missing required value'}
+						</h3>
+						{canEdit ? (
+							<>
+								Double click to <b>edit</b>
+							</>
+						) : (
+							<>
+								Double click to <b>inspect</b>
+							</>
+						)}
+						<br />
+
+						{/* horizontal dividing line */}
+						<hr />
+
+						{thereIsValue ? (
+							<div className='tooltip--dynamic-value__value'>
+								{renderEscapedString(
+									dynamicValue.value?.name === PrimitiveTypes.String && dynamicValue.value?.rawString !== null
+										? dynamicValue.value.rawString
+										: stringifyValue(dynamicValue.value),
+									dynamicValue.value?.name === PrimitiveTypes.String
+								)}
+							</div>
+						) : (
+							<span className='dynamic-value__empty'>There is no value</span>
+						)}
+					</>
+				) : (
+					''
+				)
+			}
+			placement={props.popupPlacement || 'bottom'}
+			leaveDelay={400}
+		>
+			<span
+				className={[
+					'dynamic-value',
+					`dynamic-value__background--${valueMetadata.color}`,
+					// canSwitch ? 'dynamic-value__no-end-cap' : '',
+					!!relevantParentDisabledReasons.length ? 'disabled' : '',
+				].join(' ')}
+				id={id}
+				ref={canvasPopup?.anchorRef}
+				onDoubleClick={(e) => {
+					e.stopPropagation();
+					e.nativeEvent.stopImmediatePropagation();
+				}}
+			>
+				<div
+					className={[
+						'dynamic-value__element',
+						'dynamic-value__type',
+						'dynamic-value__missing',
+					].join(' ')}
+				>
+					{dynamicValue?.type === DynamicValueTypes.Testing && 'Test'}
+					{dynamicValue?.type === DynamicValueTypes.ExecutionResult && (
+						<i className='fa-solid fa-check' />
+					)}
+					{dynamicValue?.type === DynamicValueTypes.Missing && (
+						<img
+							src={WarningIcon}
+							style={{ width: '18px', height: '18px' }}
+							id='play-test-button-warning-icon'
+						/>
+					)}
+				</div>
+				{dynamicValue?.type === DynamicValueTypes.Missing && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__missing',
+							'dynamic-value__value',
+							canEdit ? 'dynamic-value__value--editable' : '',
+						].join(' ')}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit) {
+								let nextValueType = DynamicValueTypes.DefaultValue;
+								handleSetPreference(nextValueType);
+
+								props.onEdit?.(e, nextValueType);
+							}
+						}}
+						onMouseDown={(e: any) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+						}}
+					>
+						Missing
+					</button>
+				)}
+				{dynamicValue?.type === DynamicValueTypes.Inherited && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__missing',
+							'dynamic-value__value',
+							canEdit ? 'dynamic-value__value--editable' : '',
+						].join(' ')}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit) {
+								props.onEdit(e, finalResolvedPreference);
+							}
+						}}
+						onMouseDown={(e: any) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+						}}
+					>
+						Inherited
+					</button>
+				)}
+				{dynamicValue?.type === DynamicValueTypes.External &&
+					checkIsLiteralValueEmpty(dynamicValue?.value) && (
+						<button
+							className={[
+								'dynamic-value__element',
+								'dynamic-value__missing',
+								'dynamic-value__value',
+								canEdit ? 'dynamic-value__value--editable' : '',
+							].join(' ')}
+							onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+								e.stopPropagation();
+
+								// This stops the native DOM bubbling that the Canvas Engine is listening to
+								e.nativeEvent.stopImmediatePropagation();
+								e.nativeEvent.stopPropagation();
+
+								if (canEdit) {
+									props.onEdit(e, finalResolvedPreference);
+								}
+							}}
+							onMouseDown={(e: any) => {
+								e.stopPropagation();
+
+								// This stops the native DOM bubbling that the Canvas Engine is listening to
+								e.nativeEvent.stopImmediatePropagation();
+								e.nativeEvent.stopPropagation();
+							}}
+						>
+							External
+						</button>
+					)}
+				{dynamicValue?.type === DynamicValueTypes.QueuedAutocalculation && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__missing',
+							'dynamic-value__value',
+							canEdit ? 'dynamic-value__value--editable' : '',
+						].join(' ')}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit) {
+								props.onEdit(e, finalResolvedPreference);
+							}
+						}}
+						onMouseDown={(e: any) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+						}}
+					>
+						Calculated
+					</button>
+				)}
+				{dynamicValue?.type === DynamicValueTypes.Undefined && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__empty',
+							'dynamic-value__value',
+							canEdit ? 'dynamic-value__value--editable' : '',
+							'dynamic-value__undefined',
+						].join(' ')}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit) {
+								props.onEdit(e, finalResolvedPreference);
+							}
+						}}
+						onMouseDown={(e: any) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+						}}
+					>
+						Undefined
+					</button>
+				)}
+				{dynamicValue?.type === DynamicValueTypes.Empty && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__empty',
+							'dynamic-value__value',
+							canEdit ? 'dynamic-value__value--editable' : '',
+						].join(' ')}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit) {
+								props.onEdit(e, finalResolvedPreference);
+							}
+						}}
+						onMouseDown={(e: any) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+						}}
+					>
+						Empty
+					</button>
+				)}
+				{[
+					DynamicValueTypes.AutoCalculated,
+					DynamicValueTypes.ExecutionResult,
+					DynamicValueTypes.Testing,
+				].includes(dynamicValue?.type) && (
+					<button
+						className={[
+							'dynamic-value__element',
+							!checkIsLiteralValueEmpty(dynamicValue?.value)
+								? ''
+								: 'dynamic-value__empty',
+							// 'dynamic-value__element--separator',
+							canEdit ? 'dynamic-value__value--editable' : '',
+							canEdit &&
+							!props.parentDisabledReasons.length &&
+							!checkIsLiteralValueEmpty(dynamicValue?.value)
+								? 'dynamic-value__value--inspectable'
+								: '',
+						].join(' ')}
+						onClick={(e: any) => {
+							if (
+								!canEdit &&
+								!props.parentDisabledReasons.length &&
+								!checkIsLiteralValueEmpty(dynamicValue?.value)
+							) {
+								props.project.canvas?.unselectAll();
+								props.project.emit('complex-data-dialog-open', {
+									value: dynamicValue?.value,
+									valueOwner: valueOwner,
+									valueType: dynamicValue?.type,
+									draggableObject: props.parentCanvasObject,
+									project: props.project,
+								});
+							}
+						}}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit && !props.parentDisabledReasons.length) {
+								props.onEdit(e, finalResolvedPreference);
+							} else if (
+								!canEdit &&
+								!props.parentDisabledReasons.length &&
+								!checkIsLiteralValueEmpty(dynamicValue?.value)
+							) {
+								props.project.canvas?.unselectAll();
+								props.project.emit('complex-data-dialog-open', {
+									value: dynamicValue?.value,
+									valueOwner: valueOwner,
+									valueType: dynamicValue?.type,
+									draggableObject: props.parentCanvasObject,
+									project: props.project,
+								});
+							}
+						}}
+					>
+						{resolveLabelForValue(dynamicValue?.value, valueOwner)}
+					</button>
+				)}
+				{![
+					DynamicValueTypes.AutoCalculated,
+					DynamicValueTypes.ExecutionResult,
+					DynamicValueTypes.Testing,
+					DynamicValueTypes.Inherited,
+					DynamicValueTypes.Missing,
+					DynamicValueTypes.Empty,
+					DynamicValueTypes.External,
+					DynamicValueTypes.QueuedAutocalculation,
+					DynamicValueTypes.Undefined,
+				].includes(dynamicValue?.type) && (
+					<button
+						className={[
+							'dynamic-value__element',
+							!checkIsLiteralValueEmpty(dynamicValue?.value)
+								? ''
+								: 'dynamic-value__empty',
+							'dynamic-value__value',
+							// 'dynamic-value__element--separator',
+							canEdit ? 'dynamic-value__value--editable' : '',
+							canEdit &&
+							!props.parentDisabledReasons.length &&
+							!checkIsLiteralValueEmpty(dynamicValue?.value)
+								? 'dynamic-value__value--inspectable'
+								: '',
+						].join(' ')}
+						onClick={(e: any) => {
+							if (
+								!canEdit &&
+								!props.parentDisabledReasons.length &&
+								!checkIsLiteralValueEmpty(dynamicValue?.value)
+							) {
+								props.project.canvas?.unselectAll();
+								props.project.emit('complex-data-dialog-open', {
+									value: dynamicValue?.value,
+									valueOwner: valueOwner,
+									valueType: dynamicValue?.type,
+									draggableObject: props.parentCanvasObject,
+									project: props.project,
+								});
+							}
+						}}
+						onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+							e.stopPropagation();
+
+							// This stops the native DOM bubbling that the Canvas Engine is listening to
+							e.nativeEvent.stopImmediatePropagation();
+							e.nativeEvent.stopPropagation();
+
+							if (canEdit && !props.parentDisabledReasons.length) {
+								props.onEdit(e, finalResolvedPreference);
+							} else if (
+								!canEdit &&
+								!props.parentDisabledReasons.length &&
+								!checkIsLiteralValueEmpty(dynamicValue?.value)
+							) {
+								props.project.canvas?.unselectAll();
+								props.project.emit('complex-data-dialog-open', {
+									value: dynamicValue?.value,
+									valueOwner: valueOwner,
+									valueType: dynamicValue?.type,
+									draggableObject: props.parentCanvasObject,
+									project: props.project,
+								});
+							}
+						}}
+					>
+						{resolveLabelForValue(dynamicValue?.value, valueOwner)}
+					</button>
+				)}
+				{/* {canCopyValue && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__option',
+							'dynamic-value__option--copy',
+							'dynamic-value__element--clickable',
+						].join(' ')}
+						onClick={debouncedCopyAndNotify}
+					>
+						<i className='fa-regular fa-copy' />
+					</button>
+				)} */}
+				{!relevantParentDisabledReasons.length && (
+					<>
+						<button
+							className={[
+								'dynamic-value__element',
+								'dynamic-value__option',
+								'dynamic-value__option--copy',
+								'dynamic-value__element--clickable',
+							].join(' ')}
+							id={`${id}--dropdown-menu-button`}
+							ref={canvasMenuDropdown?.anchorRef}
+							onClick={
+								!!canvasMenuDropdown
+									? () => {
+											canvasMenuDropdown?.toggle();
+										}
+									: () => {
+											setDropdownOpen(!dropdownOpen);
+										}
+							}
+						>
+							<i className='fa-regular fa-chevron-down' />
+						</button>
+
+						{!canvasMenuDropdown && (
+							<DropdownMenuPopup
+								// id={`dynamic-value-dropdown-menu--${id}`}
+								popupOptions={{
+									anchorQuerySelector: `#${id}--dropdown-menu-button`,
+									placement: 'bottom',
+									open: dropdownOpen,
+									onClickAway() {
+										setDropdownOpen(false);
+									},
+									clickAwayTargets: (() => {
+										const dialog = document.getElementById('dialog-card');
+
+										if (dialog) {
+											return [document.body, dialog];
+										}
+
+										return [document.body];
+									})(),
+								}}
+								options={[
+									{
+										onClick: async (_, e) => {
+											if (canEdit) {
+												let nextValueType = DynamicValueTypes.DefaultValue;
+												handleSetPreference(nextValueType);
+
+												props.onEdit?.(e, nextValueType);
+											}
+										},
+										label: 'Edit',
+										iconEnd: 'fa-solid fa-pencil',
+										disabled: !canEdit,
+										tooltip: !canEdit
+											? 'Cannot edit this value'
+											: 'Edit the value (you can also double click the value directly)',
+										id: 'canvas-dropdown-menu--' + id + '--edit',
+									},
+									...(() => {
+										if (!!valueOwnerDataType && valueOwnerDataType.asType) {
+											const asTypeValue = dynamicValue?.value?.valueAsType;
+											const thereAreMultipleEntityReferences =
+												Array.isArray(asTypeValue) && asTypeValue.length > 1;
+											const isEmpty =
+												!asTypeValue ||
+												(Array.isArray(asTypeValue) &&
+													asTypeValue.length === 0);
+
+											let target: ValueAsTypeState | null =
+												asTypeValue as ValueAsTypeState;
+
+											if (thereAreMultipleEntityReferences) {
+												target = (asTypeValue as ValueAsTypeState[])[0];
+											}
+
+											let definitionName = '';
+
+											let canvasEntity: CanvasEntityState | null = null;
+
+											if (target) {
+												definitionName = resolveEntityName(
+													target,
+													props.project.logic,
+												);
+
+												canvasEntity = getParentCanvasEntity(target);
+											}
+
+											return [
+												{
+													onClick: async (
+														_: any,
+														e: React.MouseEvent<
+															HTMLButtonElement | HTMLAnchorElement,
+															MouseEvent
+														>,
+													) => {
+														e.stopPropagation();
+
+														// This stops the native DOM bubbling that the Canvas Engine is listening to
+														e.nativeEvent.stopImmediatePropagation();
+														e.nativeEvent.stopPropagation();
+
+														if (isEmpty) {
+															return;
+														}
+
+														if (!canvasEntity) {
+															return;
+														}
+
+														const objectId =
+															getCanvasEntityDraggableContainerDOMId(
+																canvasEntity,
+															);
+
+														props.project?.canvas?.scrollToObjectById(objectId);
+													},
+													label: thereAreMultipleEntityReferences
+														? 'Go to first definition'
+														: 'Go to definition',
+													iconEnd: 'fa-solid fa-arrow-up-right-from-square',
+													disabled: isEmpty || !canvasEntity,
+													tooltip: isEmpty
+														? 'No definition has been set'
+														: !canvasEntity
+															? 'Definition is not in the canvas'
+															: thereAreMultipleEntityReferences
+																? `Go to the first definition of this value (${definitionName})`
+																: `Go to ${definitionName} in the canvas`,
+													id:
+														'canvas-dropdown-menu--' +
+														id +
+														'--go-to-definition',
+												},
+											];
+										}
+
+										return [];
+									})(),
+									{
+										onClick: async (_, e) => {
+											if (canDelete) {
+												props.onDelete?.(dynamicValue, e);
+											}
+										},
+										label: 'Delete',
+										color: 'error',
+										iconEnd: 'fa-solid fa-trash-can',
+										disabled: !canDelete,
+										tooltip: !canDelete
+											? 'Cannot delete this value'
+											: 'Remove the value to not override any previous value that might be present',
+										id: 'canvas-dropdown-menu--' + id + '--delete',
+									},
+									{
+										onClick: debouncedCopyAndNotify,
+										label: 'Copy value',
+										color: 'primary',
+										iconEnd: 'fa-regular fa-copy',
+										disabled: !canCopyValue,
+										tooltip: !canCopyValue ? 'Cannot copy this value' : '',
+										id: 'canvas-dropdown-menu--' + id + '--copy',
+									},
+									{
+										onClick: async () => {
+											if (!canSetToNull) {
+												return;
+											}
+
+											const localOnlyDefault =
+												finalResolvedPreference ===
+													DynamicValueTypes.DefaultValue || onlyDefault;
+
+											_handleLiteralValueChange(
+												null,
+												localOnlyDefault,
+												StateMutationAction.SetLiteralValueToExplicitlyEmpty,
+											);
+										},
+										label: 'Set as empty',
+										color: 'primary',
+										iconEnd: 'fa-solid fa-empty-set',
+										disabled: !canSetToNull,
+										tooltip: !canSetToNull
+											? 'Cannot set this value as empty' +
+												(!checkIsNullable(valueOwnerDataType)
+													? '. The data type doesn not support empty values'
+													: '')
+											: 'Sets a value explicitly as empty (null), to override any previous value that might be present',
+										id: 'canvas-dropdown-menu--' + id + '--set-empty',
+									},
+									{
+										onClick: async (_, e) => {
+											if (canSwitch) {
+												let nextValueType = finalResolvedPreference as
+													| DynamicValueTypes.DefaultValue
+													| DynamicValueTypes.Testing;
+
+												// if (
+												// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+												// 	valueOwner.type === EntityType.InputMap
+												// ) {
+												// 	finalResolvedPreference === DynamicValueTypes.DefaultValue;
+												// } else if (
+												if (
+													finalResolvedPreference ===
+													DynamicValueTypes.DefaultValue
+												) {
+													nextValueType = DynamicValueTypes.Testing;
+												} else if (
+													finalResolvedPreference === DynamicValueTypes.Testing
+												) {
+													nextValueType = DynamicValueTypes.DefaultValue;
+												} else if (
+													dynamicValue?.type === DynamicValueTypes.Testing
+												) {
+													nextValueType = DynamicValueTypes.DefaultValue;
+												} else {
+													// If current value is neither default nor testing, switch to the other type
+													nextValueType = DynamicValueTypes.Testing;
+												}
+
+												handleSetPreference(nextValueType);
+
+												// if (
+												// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+												// 	valueOwner.type === EntityType.InputMap
+												// ) {
+												// 	props.onEdit?.(e, nextValueType);
+												// } else if (!counterpartTypeExists) {
+												if (!counterpartTypeExists) {
+													props.onEdit?.(e, nextValueType);
+												}
+											}
+										},
+										label: (() => {
+											if (
+												dynamicValue.type === DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												if (!counterpartTypeExists) {
+													return 'Click to add real value';
+												} else {
+													return 'Use real value';
+												}
+											}
+
+											if (
+												dynamicValue.type !== DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												if (!counterpartTypeExists) {
+													return 'Click to add test value';
+												} else {
+													return 'Use test value';
+												}
+											}
+
+											return 'Switch values';
+										})(),
+										color: 'primary',
+										iconEnd:
+											'fa-solid fa-' +
+											(counterpartTypeExists ? 'retweet' : 'plus'),
+										disabled: (() => {
+											if (
+												dynamicValue.type === DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												return false;
+											}
+
+											if (
+												dynamicValue.type !== DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												return false;
+											}
+
+											return true;
+										})(),
+										tooltip: (() => {
+											if (
+												dynamicValue.type === DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												return 'Switch the active value to use the real value that will be published with the project';
+											}
+
+											if (
+												dynamicValue.type !== DynamicValueTypes.Testing &&
+												canSwitch
+											) {
+												return 'Switch the active value to use a temporary value for testing purposes';
+											}
+
+											// Disabled explanations
+
+											return 'Switch active values';
+										})(),
+										id: 'canvas-dropdown-menu--' + id + '--switch-values',
+									},
+								]}
+							/>
+						)}
+					</>
+				)}
+
+				{/* {canDelete && (
+					<button
+						className={[
+							'dynamic-value__element',
+							'dynamic-value__option',
+							'dynamic-value__element--clickable',
+						].join(' ')}
+						onClick={(e: any) => {
+							if (canDelete) {
+								props.onDelete?.(dynamicValue, e);
+							}
+						}}
+					>
+						<i className='fa fa-times' />
+					</button>
+				)} */}
+				{false && (
+					<Tooltip
+						// The styles overrides below can be cleaned up
+						classes={{
+							tooltip: 'tooltip tooltip--dynamic-value',
+							arrow: 'mui-tooltip-arrow',
+						}}
+						slotProps={{
+							popper: {
+								className: 'tooltip tooltip--dynamic-value',
+								style: {
+									margin: 0,
+									padding: 0,
+								},
+								modifiers: [
+									{
+										name: 'offset',
+										options: {
+											offset: [0, 8],
+										},
+									},
+								],
+							},
+							tooltip: {
+								className: 'tooltip tooltip--dynamic-value',
+								style: {
+									margin: 0,
+									padding: 5,
+								},
+							},
+							arrow: {
+								className: 'mui-tooltip-arrow',
+							},
+						}}
+						arrow
+						title={
+							!props.parentCanvasObject &&
+							!props.parentDisabledReasons.length ? (
+								<>
+									{!counterpartTypeExists ? (
+										<>
+											Click to add new{' '}
+											<b>
+												{dynamicValue?.type === DynamicValueTypes.DefaultValue
+													? 'test'
+													: 'default'}{' '}
+												value
+											</b>
+										</>
+									) : (
+										<>
+											Click to switch to{' '}
+											<b>
+												{dynamicValue?.type === DynamicValueTypes.DefaultValue
+													? 'test'
+													: 'default'}{' '}
+												value
+											</b>
+										</>
+									)}
+								</>
+							) : (
+								''
+							)
+						}
+						placement={props.popupPlacement || 'bottom'}
+						leaveDelay={400}
+					>
+						<button
+							id={`switch-dynamic-value-type-button--${id}`}
+							ref={canvasPopupSwitchButton?.anchorRef}
+							className={[
+								'dynamic-value__element',
+								'dynamic-value__option',
+								'dynamic-value__element--clickable',
+								'dynamic-value__element--end-cap',
+								// ...(() => {
+								// 	if (dynamicValue?.type === DynamicValueTypes.Missing) {
+								// 		return [
+								// 			'dynamic-value__element--separator--error',
+								// 			'dynamic-value__option--switch-to-missing-default',
+								// 		];
+								// 	}
+
+								// 	if (
+								// 		dynamicValue?.type === DynamicValueTypes.DefaultValue ||
+								// 		dynamicValue?.type === DynamicValueTypes.External ||
+								// 		dynamicValue?.type === DynamicValueTypes.Empty
+								// 	) {
+								// 		return [
+								// 			'dynamic-value__element--separator--primary',
+								// 			'dynamic-value__option--switch-to-test',
+								// 		];
+								// 	}
+
+								// 	if (dynamicValue?.type === DynamicValueTypes.Testing) {
+								// 		return [
+								// 			'dynamic-value__element--separator--grey',
+								// 			'dynamic-value__option--switch-to-default',
+								// 		];
+								// 	}
+
+								// 	return [];
+								// })(),
+							].join(' ')}
+							onClick={(e: any) => {
+								if (canSwitch) {
+									let nextValueType = finalResolvedPreference as
+										| DynamicValueTypes.DefaultValue
+										| DynamicValueTypes.Testing;
+
+									// if (
+									// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+									// 	valueOwner.type === EntityType.InputMap
+									// ) {
+									// 	finalResolvedPreference === DynamicValueTypes.DefaultValue;
+									// } else if (
+									if (
+										finalResolvedPreference === DynamicValueTypes.DefaultValue
+									) {
+										nextValueType = DynamicValueTypes.Testing;
+									} else if (
+										finalResolvedPreference === DynamicValueTypes.Testing
+									) {
+										nextValueType = DynamicValueTypes.DefaultValue;
+									} else if (dynamicValue?.type === DynamicValueTypes.Testing) {
+										nextValueType = DynamicValueTypes.DefaultValue;
+									} else {
+										// If current value is neither default nor testing, switch to the other type
+										nextValueType = DynamicValueTypes.Testing;
+									}
+
+									handleSetPreference(nextValueType);
+
+									// if (
+									// 	dynamicValue?.type === DynamicValueTypes.Inherited &&
+									// 	valueOwner.type === EntityType.InputMap
+									// ) {
+									// 	props.onEdit?.(e, nextValueType);
+									// } else if (!counterpartTypeExists) {
+									if (!counterpartTypeExists) {
+										props.onEdit?.(e, nextValueType);
+									}
+								}
+							}}
+						>
+							<i
+								className={`fa fa-${
+									counterpartTypeExists ? 'retweet' : 'plus'
+								}`}
+							/>
+						</button>
+					</Tooltip>
+				)}
+			</span>
+		</Tooltip>
+	);
+}