@elyx-code/editor-ui 0.0.2

package/src/components/data-type/DataTypeBuilder.tsx

@@ -0,0 +1,3127 @@
+import React from 'react';
+import {
+	createStateFromTypeAndSubscribe,
+	DefinitionEntityState,
+	DataTypeParentChildRelation,
+	DataTypeState,
+	EntityType,
+	IDataTypeTransfer,
+	ILiteralValueTransfer,
+	PrimitiveTypes,
+	LiteralValueState,
+	resolveEntityName,
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	resolveDataTypeLabel,
+	UserManagedEntityState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	PrimitiveEntityState,
+	IPrimitiveEntityTransfer,
+	VALUE_READING_TYPES,
+	UserManagedDataTypeParentEntityState,
+	checkIsNullable,
+	DataTypeStateEntityOption,
+	getParentCanvasEntity,
+	definitionEntityValidation,
+	findNextAvailableName,
+	checkIsOnlyNull,
+	toSentenceCase,
+	recursivelySelectDataTypeOption,
+	flattenDataTypesInOrGroup,
+} from '@elyx-code/project-logic-tree';
+import WarningIcon from '../../assets/warning-sign-24px.png';
+import {
+	Autocomplete,
+	Box,
+	Checkbox,
+	FormControlLabel,
+	FormGroup,
+	IconButton,
+	TextField,
+	Tooltip as MuiTooltip,
+	Chip,
+} from '@mui/material';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import DataTypeIcon, {
+	ExplicitDataTypeIcon,
+} from '../draggable-entity-card/DataTypeIcon';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import { EditorService } from '../../services/editor';
+import DefinitionEntityIcon from '../draggable-entity-card/definition-entity/DefinitionEntityIcon';
+import {
+	calculateCardSize,
+	CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS,
+	getCanvasEntityDraggableContainerDOMId,
+	resolveCardSubheader,
+} from '../../services/editor/ui';
+import './data-type-builder.css';
+import {
+	DataTypeBuilderOption,
+	getAllDataTypeBuilderOptions,
+} from '../../services/editor/utils';
+import { popupNotification } from '../../popup-notification';
+import Button from '../../lib/button/Button';
+
+export interface ILiteralValueOption {
+	type: 'literal-value-option';
+	name: PrimitiveTypes;
+}
+
+export function fromLiteralValueTypeToHTMLInputType(
+	name: PrimitiveTypes,
+): 'text' | 'number' | 'date' {
+	switch (name) {
+		case PrimitiveTypes.String:
+			return 'text';
+		case PrimitiveTypes.Number:
+			return 'number';
+		case PrimitiveTypes.Date:
+			return 'date';
+		default:
+			return 'text';
+	}
+}
+
+export function fromLiteralValueTypeToReadableLabel(name: PrimitiveTypes): string {
+	switch (name) {
+		case PrimitiveTypes.String:
+			return 'Text';
+		case PrimitiveTypes.Number:
+			return 'Number';
+		case PrimitiveTypes.Date:
+			return 'Date';
+		case PrimitiveTypes.Boolean:
+			return 'Boolean';
+		case PrimitiveTypes.Null:
+			return 'Null';
+		case PrimitiveTypes.Untyped:
+			return 'Any type';
+		case PrimitiveTypes.Void:
+			return 'Void';
+		default:
+			return !!name ? toSentenceCase(name) : 'Unknown';
+	}
+}
+
+export const fromLiteralValueTypeToExplicitIconName = (
+	name: PrimitiveTypes,
+): PrimitiveTypes | 'list' | EntityType.DefinitionEntity | 'unknown' => {
+	switch (name) {
+		case PrimitiveTypes.String:
+			return PrimitiveTypes.String;
+		case PrimitiveTypes.Number:
+			return PrimitiveTypes.Number;
+		case PrimitiveTypes.Date:
+			return PrimitiveTypes.Date;
+		case PrimitiveTypes.Boolean:
+			return PrimitiveTypes.Boolean;
+		case PrimitiveTypes.Null:
+			return PrimitiveTypes.Null;
+		default:
+			return name;
+	}
+};
+
+export const fromLiteralValueTypeToFontColor = (name: PrimitiveTypes): string => {
+	switch (name) {
+		case PrimitiveTypes.String:
+			return 'var(--color-string--value)';
+		case PrimitiveTypes.Number:
+			return 'var(--color-number--value)';
+		case PrimitiveTypes.Date:
+			return 'var(--color-string--value)';
+		case PrimitiveTypes.Boolean:
+			return 'var(--color-boolean--value)';
+		case PrimitiveTypes.Null:
+			return 'var(--color-support-primary)';
+		case PrimitiveTypes.Untyped:
+			return 'rgba(0,0,0,0.6)';
+		default:
+			return 'black';
+	}
+};
+
+export const resolveLiteralValueSubheader = (
+	primitiveVame: PrimitiveTypes,
+): string => {
+	if (primitiveVame === PrimitiveTypes.Null) {
+		return 'An explicit empty value';
+	}
+
+	if (primitiveVame === PrimitiveTypes.Untyped) {
+		return 'Allows any type of value';
+	}
+
+	if (primitiveVame === PrimitiveTypes.Void) {
+		return 'When actions don\'t output any value';
+	}
+
+	return 'A literal inputted value';
+};
+
+export const resolveLiteralValueLabel = (
+	value: LiteralValueState | ILiteralValueOption,
+): string => {
+	if (value.name === PrimitiveTypes.Untyped) {
+		return 'Any type allowed';
+	}
+
+	return fromLiteralValueTypeToReadableLabel(value.name) + ' value';
+};
+
+export enum AllowedDataTypeListTypes {
+	None = 'none',
+	All = 'all',
+	Flat = 'flat',
+}
+
+const LiteralValueField = ({
+	value,
+	disabled,
+	onChange,
+	onChangeSet,
+}: {
+	value: LiteralValueState;
+	disabled?: boolean;
+	onChange: (value: LiteralValueState, changeSet: ChangeSet | null) => void;
+	onChangeSet?: () => ChangeSet | null;
+}) => {
+	const [localValue, setLocalValue] = React.useState<number | string | Date>(
+		value?.value as number | string | Date,
+	);
+
+	// Based on the value type, we render a different input field
+	if (value.name === PrimitiveTypes.Boolean) {
+		return (
+			<FormGroup>
+				<FormControlLabel
+					control={
+						<Checkbox
+							disabled={disabled}
+							className='data-type-builder--checkbox'
+							checked={value.value as boolean}
+							onChange={(e) => {
+								const changeSet = onChangeSet?.() || null;
+
+								value.metaSync(
+									{
+										value: e.target.checked,
+									},
+									changeSet,
+								);
+
+								onChange(value, changeSet);
+							}}
+						/>
+					}
+					label={value.value ? 'True' : 'False'}
+				/>
+			</FormGroup>
+		);
+	} else if (value.name === PrimitiveTypes.Date) {
+		return (
+			<DateTimePicker
+				disabled={disabled}
+				defaultValue={value.value ? dayjs(value.value as Date) : undefined}
+				slotProps={{
+					field: {
+						// @ts-ignore
+						size: 'small',
+						sx: {
+							width: 200,
+						},
+					},
+				}}
+				onChange={(newValue) => {
+					setLocalValue(newValue.toDate());
+				}}
+				onBlur={() => {
+					const changeSet = onChangeSet?.() || null;
+
+					value.metaSync(
+						{
+							value: localValue,
+						},
+						changeSet,
+					);
+
+					onChange(value, changeSet);
+				}}
+			/>
+		);
+	}
+
+	return (
+		<TextField
+			size='small'
+			label='Value'
+			disabled={disabled}
+			type={fromLiteralValueTypeToHTMLInputType(value.name)}
+			value={localValue}
+			onChange={(e) => {
+				setLocalValue(e.target.value);
+			}}
+			onBlur={() => {
+				const changeSet = onChangeSet?.() || null;
+
+				value.metaSync(
+					{
+						value: localValue,
+					},
+					changeSet,
+				);
+
+				onChange(value, changeSet);
+			}}
+		/>
+	);
+};
+
+const DataTypeSelectorValue = ({
+	value,
+	project,
+}: {
+	value: DataTypeBuilderOption | ILiteralValueOption;
+	project: EditorService;
+}) => {
+	if (
+		value?.type === EntityType.PrimitiveEntity &&
+		(value.id ===
+			BUILT_IN_BASE_ENTITY_IDS[EntityType.PrimitiveEntity].null.id ||
+			value.id ===
+				BUILT_IN_BASE_ENTITY_IDS[EntityType.PrimitiveEntity].untyped.id)
+	) {
+		return (
+			<span
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+				}}
+			>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+						color: fromLiteralValueTypeToFontColor(value.name),
+					}}
+				>
+					<ExplicitDataTypeIcon
+						icon={fromLiteralValueTypeToExplicitIconName(value.name)}
+						size='small'
+						id={value.id}
+					/>
+					{fromLiteralValueTypeToReadableLabel(value.name) + ' value'}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{resolveLiteralValueSubheader(value.name)}
+				</p>
+			</span>
+		);
+	} else if (
+		[
+			EntityType.ActionDescriptor,
+			EntityType.DefinitionEntity,
+			EntityType.PrimitiveEntity,
+			EntityType.BuiltInBaseEntity,
+		].includes(value?.type as EntityType)
+	) {
+		return (
+			<span
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+				}}
+			>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+					}}
+				>
+					<DefinitionEntityIcon
+						entity={value as DefinitionEntityState}
+						size='small'
+					/>
+					{resolveEntityName(value as DataTypeBuilderOption, project.logic) ||
+						'-'}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{resolveCardSubheader(value as DefinitionEntityState)}
+				</p>
+			</span>
+		);
+	} else if (
+		value?.type === EntityType.LiteralValue ||
+		value?.type === 'literal-value-option'
+	) {
+		return (
+			<span
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+				}}
+			>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+						color: fromLiteralValueTypeToFontColor(value.name),
+					}}
+				>
+					<ExplicitDataTypeIcon
+						icon={fromLiteralValueTypeToExplicitIconName(value.name)}
+						size='small'
+						id={'data-type-builder-value-option--' + value.name}
+					/>
+					{resolveLiteralValueLabel(value)}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{resolveLiteralValueSubheader(value.name)}
+				</p>
+			</span>
+		);
+	} else if (EntityType.Property === value?.type) {
+		const foreignEntityName = resolveEntityName(value, project.logic);
+		const foreignKeyParentName = resolveEntityName(value.parent, project.logic);
+
+		const subLabel = (
+			<>
+				Reference to <b>{foreignEntityName}</b> from{' '}
+				<b>{foreignKeyParentName}</b>
+			</>
+		);
+
+		return (
+			<span
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+				}}
+			>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+					}}
+				>
+					<DataTypeIcon entity={value} size='small' project={project} />
+					{resolveEntityName(value, project.logic) || '-'}
+				</span>
+				<p
+					style={{
+						margin: 0,
+						marginLeft: 20,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{subLabel}
+				</p>
+			</span>
+		);
+	}
+
+	return null;
+};
+
+export enum DataTypeValueDisabledReason {
+	External = 'external',
+	IncompatibleSiblingsCrossSection = 'incompatible-siblings-cross-section',
+	IncompatibleWithImplementation = 'incompatible-with-implementation',
+}
+
+export function calculateOptionDisabledReasons(
+	option: DataTypeBuilderOption | ILiteralValueOption,
+	getOptionDisabled?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => boolean,
+	baseDataTypes?: DataTypeState[],
+	topBaseDataTypes?: DataTypeState[],
+): DataTypeValueDisabledReason[] {
+	const reasons: DataTypeValueDisabledReason[] = [];
+
+	const externalCheck: boolean = getOptionDisabled?.(option);
+	if (externalCheck) {
+		reasons.push(DataTypeValueDisabledReason.External);
+	}
+
+	if (
+		(option.type === 'literal-value-option' &&
+			option.name === PrimitiveTypes.Null) ||
+		([EntityType.PrimitiveEntity, EntityType.LiteralValue].includes(
+			option.type as EntityType,
+		) &&
+			option.name === PrimitiveTypes.Null)
+	) {
+		if (!topBaseDataTypes?.length) {
+			return [];
+		}
+
+		const everyTopBaseDataTypeIsNullable = (topBaseDataTypes || []).every(
+			(baseDt) => {
+				const topParentIsOnlyNull = checkIsOnlyNull(baseDt);
+
+				return topParentIsOnlyNull;
+			},
+		);
+
+		if (!everyTopBaseDataTypeIsNullable) {
+			return [DataTypeValueDisabledReason.IncompatibleWithImplementation];
+		}
+
+		return [];
+	}
+
+	if (
+		baseDataTypes &&
+		!!baseDataTypes.length // &&
+		// !!(baseDataTypes || []).some((dt) => dt.implementationChooseOne)
+	) {
+		let isCompatible: boolean = false;
+
+		const allAllowedBaseDataTypes: DataTypeState[] = baseDataTypes.flatMap(
+			(dt) => flattenDataTypesInOrGroup(dt),
+		);
+
+		// Disable options that are not present in the children of the baseDataTypes
+		for (const child of allAllowedBaseDataTypes) {
+			if (
+				(option.type === 'literal-value-option' &&
+					option.name === child.entity?.name &&
+					child.entity?.type === EntityType.LiteralValue) ||
+				(option.type !== 'literal-value-option' &&
+					option.id === child.entity?.id &&
+					child.entity?.type !== EntityType.LiteralValue)
+			) {
+				isCompatible = true;
+				break;
+			}
+
+			if (child.foreignKeyAllowed && option.type === EntityType.Property) {
+				isCompatible = true;
+				break;
+			}
+
+			if (
+				option.type !== 'literal-value-option' &&
+				option.id === child.entity?.id
+			) {
+				isCompatible = true;
+				break;
+			}
+		}
+
+		if (!isCompatible) {
+			reasons.push(DataTypeValueDisabledReason.IncompatibleWithImplementation);
+		}
+	} else {
+	}
+
+	return reasons;
+}
+
+export interface IDataTypeBuilderOption {
+	value: DataTypeBuilderOption | ILiteralValueOption;
+	disabledReasons: DataTypeValueDisabledReason[];
+}
+
+const DataTypeValueSelector = ({
+	dataType,
+	parentBaseDataTypes: _parentBaseDataTypes,
+	topParent: _topParent,
+	topBaseDataTypes,
+	baseDataTypes,
+	value,
+	onChange,
+	options,
+	project,
+	getOptionDisabled,
+	getOptionTooltip,
+	onChangeSet,
+}: {
+	dataType: DataTypeState;
+	baseDataTypes?: DataTypeState[];
+	parentBaseDataTypes?: DataTypeState[];
+	topParent?: UserManagedEntityState;
+	topBaseDataTypes?: DataTypeState[];
+	value: DataTypeBuilderOption;
+	onChange: (value: DataTypeState, changeSet: ChangeSet | null) => void;
+	options: DataTypeBuilderOption[];
+	project: EditorService;
+	getOptionDisabled?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => boolean;
+	getOptionTooltip?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => React.ReactNode;
+	onChangeSet?: () => ChangeSet | null;
+}) => {
+	const [updateKey, setUpdateKey] = React.useState<number>(0);
+
+	const resolveLocalValueFromExternalValue = (
+		value: DataTypeBuilderOption,
+	): IDataTypeBuilderOption => {
+		if (value?.type === EntityType.LiteralValue) {
+			return {
+				value: {
+					type: 'literal-value-option',
+					name: value.name,
+				},
+				disabledReasons: [],
+				// calculateOptionDisabledReasons(
+				// value,
+				// getOptionDisabled,
+				// baseDataTypes,
+				// topBaseDataTypes
+				// ),
+			};
+		}
+
+		return {
+			value,
+			disabledReasons: [],
+			// calculateOptionDisabledReasons(
+			// value,
+			// getOptionDisabled,
+			// baseDataTypes,
+			// topBaseDataTypes
+			// ),
+		};
+	};
+
+	const [localValue, setLocalValue] = React.useState<IDataTypeBuilderOption>(
+		resolveLocalValueFromExternalValue(value),
+	);
+	const [localEnumOptionsValue, setLocalEnumOptionsValue] = React.useState<
+		null | string[]
+	>(dataType?.options || []);
+
+	const aggregateOptions: (DataTypeBuilderOption | ILiteralValueOption)[] = [
+		...options.filter((opt) => opt.type === EntityType.PrimitiveEntity),
+		{
+			type: 'literal-value-option',
+			name: PrimitiveTypes.Untyped,
+		},
+		{
+			type: 'literal-value-option',
+			name: PrimitiveTypes.String,
+		},
+		{
+			type: 'literal-value-option',
+			name: PrimitiveTypes.Number,
+		},
+		{
+			type: 'literal-value-option',
+			name: PrimitiveTypes.Boolean,
+		},
+		// {
+		// 	type: 'literal-value-option',
+		// 	name: PrimitiveTypes.Null,
+		// },
+		...options.filter((opt) => opt.type !== EntityType.PrimitiveEntity),
+
+		// Put disabled options at the end
+	];
+
+	const sanitizedOptions: IDataTypeBuilderOption[] = aggregateOptions
+		.map((opt) => {
+			const disabledReasons = calculateOptionDisabledReasons(
+				opt,
+				getOptionDisabled,
+				baseDataTypes,
+				topBaseDataTypes,
+			);
+
+			return {
+				value: opt,
+				disabledReasons,
+			};
+		})
+		.sort((a, b) => {
+			if (a.disabledReasons.length && !b.disabledReasons.length) {
+				return 1;
+			}
+
+			if (!a.disabledReasons.length && b.disabledReasons.length) {
+				return -1;
+			}
+
+			return 0;
+		}) as IDataTypeBuilderOption[];
+
+	const showEnumBuilderField: boolean =
+		!!localValue &&
+		localValue?.value?.type === EntityType.PrimitiveEntity &&
+		localValue?.value.name === PrimitiveTypes.Enum;
+
+	const showLiteralValueField: boolean =
+		!showEnumBuilderField &&
+		!!localValue &&
+		localValue?.value?.type === 'literal-value-option' &&
+		![PrimitiveTypes.Null, PrimitiveTypes.Untyped].includes(
+			localValue?.value?.name,
+		);
+
+	return (
+		<span
+			key={updateKey}
+			style={{
+				display: 'flex',
+				gap: 8,
+				alignItems: 'center',
+			}}
+		>
+			<Autocomplete
+				disablePortal
+				// disabled={
+				// 	!!baseDataTypes?.length &&
+				// 	!(baseDataTypes || []).some((dt) => dt.implementationChooseOne)
+				// }
+				options={sanitizedOptions}
+				sx={{
+					width: 200,
+				}}
+				value={localValue}
+				getOptionLabel={(option) => {
+					if (option.value?.type === 'literal-value-option') {
+						return resolveLiteralValueLabel(option.value);
+					} else if (!!option.value) {
+						return resolveEntityName(option.value, project.logic) || '-';
+					}
+
+					return '-';
+				}}
+				getOptionDisabled={(option) => {
+					return option.disabledReasons.length > 0;
+				}}
+				onChange={(_, newValue) => {
+					const changeSet = onChangeSet?.() || null;
+
+					let resolvedNewValue: DataTypeBuilderOption;
+
+					const oldEntityValue = dataType.entity;
+
+					if (
+						newValue?.value?.type === 'literal-value-option' &&
+						newValue?.value.name !== PrimitiveTypes.Untyped &&
+						newValue?.value.name !== PrimitiveTypes.Null
+					) {
+						const newLiteralValueTransfer: ILiteralValueTransfer =
+							LiteralValueState.new(changeSet);
+
+						newLiteralValueTransfer.name = newValue?.value.name;
+						newLiteralValueTransfer.parent = dataType.toReference();
+
+						resolvedNewValue = createStateFromTypeAndSubscribe(
+							newLiteralValueTransfer,
+							project.logic,
+						) as LiteralValueState;
+
+						changeSet?.add(resolvedNewValue, ChangeSetEntityChangeType.Added);
+
+						resolvedNewValue.initChildren(changeSet);
+
+						resolvedNewValue.metaSync(
+							{
+								name: newValue?.value.name,
+							},
+							changeSet,
+						);
+					} else if (
+						newValue?.value?.type === 'literal-value-option' &&
+						newValue?.value.name === PrimitiveTypes.Untyped
+					) {
+						resolvedNewValue = project.logic.getBuiltIn(
+							BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].untyped.id,
+						) as PrimitiveEntityState;
+					} else if (
+						newValue?.value?.type === 'literal-value-option' &&
+						newValue?.value.name === PrimitiveTypes.Null
+					) {
+						resolvedNewValue = project.logic.getBuiltIn(
+							BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].null.id,
+						) as PrimitiveEntityState;
+					} else {
+						resolvedNewValue =
+							(newValue?.value as DataTypeBuilderOption) || null;
+					}
+
+					if (resolvedNewValue?.type === EntityType.Property) {
+						dataType.setForeignKeyRef(resolvedNewValue, changeSet);
+						dataType.setEntity(null, changeSet);
+					} else {
+						// Send a new literal value as well, but with the value property being empty,
+						// when the component is updated, the local value will be set
+						dataType.setEntity(resolvedNewValue, changeSet);
+						dataType.setForeignKeyRef(null, changeSet);
+					}
+
+					dataType.orChildrenGroup?.forEach((child) => {
+						child.remove({ ignoreUpstream: true }, changeSet);
+					});
+					dataType.andChildrenGroup?.forEach((child) => {
+						child.remove({ ignoreUpstream: true }, changeSet);
+					});
+					dataType.orChildrenGroup = null;
+					dataType.andChildrenGroup = null;
+
+					changeSet?.add(dataType, ChangeSetEntityChangeType.Updated);
+
+					if (resolvedNewValue?.type === EntityType.LiteralValue) {
+						dataType.metaSync(
+							{
+								asType: false,
+								like: false,
+							},
+							changeSet,
+						);
+
+						resolvedNewValue.setParent(dataType, changeSet);
+					}
+
+					if (newValue?.value.name !== PrimitiveTypes.Enum) {
+						dataType.metaSync(
+							{
+								options: null,
+							},
+							changeSet,
+						);
+
+						setLocalEnumOptionsValue([]);
+					}
+
+					if (
+						!!oldEntityValue &&
+						(oldEntityValue as DefinitionEntityState).parent?.id ===
+							dataType.id &&
+						resolvedNewValue?.id !== oldEntityValue.id
+					) {
+						(oldEntityValue as DefinitionEntityState).remove(
+							{ ignoreUpstream: true },
+							changeSet,
+						);
+					}
+
+					dataType.metaSync(
+						{
+							inferred: false,
+						},
+						changeSet,
+					);
+
+					onChange(dataType, changeSet);
+					setLocalValue(resolveLocalValueFromExternalValue(resolvedNewValue));
+
+					setUpdateKey(updateKey + 1);
+				}}
+				renderOption={(props, option) => {
+					const { key, ...optionProps } = props;
+					return (
+						<MuiTooltip
+							key={key}
+							title={getOptionTooltip?.(option.value)}
+							placement='right'
+							arrow
+							enterDelay={!!option.disabledReasons.length ? 100 : 400}
+							leaveDelay={200}
+						>
+							<Box
+								component='li'
+								sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+								{...optionProps}
+							>
+								<DataTypeSelectorValue value={option.value} project={project} />
+							</Box>
+						</MuiTooltip>
+					);
+				}}
+				renderInput={(params) => (
+					<span
+						style={{ position: 'relative', display: 'block', height: '100%' }}
+					>
+						<span
+							id={
+								'data-type-builder--' +
+								(value?.id || 'unknown') +
+								`--input-selected-value`
+							}
+							style={{
+								position: 'absolute',
+								top: 8,
+								left: 0,
+								width: '100%',
+								height: '100%',
+								maxHeight: 30,
+								overflowY: 'hidden',
+								// To match start of text field text
+								paddingLeft: 14,
+								display: 'flex',
+								flexDirection: 'column',
+							}}
+						>
+							<DataTypeSelectorValue value={value} project={project} />
+						</span>
+
+						<TextField
+							{...params}
+							size='small'
+							label={`Select value`}
+							className={`data-type-builder__input`}
+							slotProps={{
+								htmlInput: {
+									...params.inputProps,
+									id:
+										'data-type-builder--' +
+										(value?.id || 'unknown') +
+										`--input`,
+									style: {
+										opacity: 0,
+									},
+								},
+							}}
+							onFocus={(e) => {
+								e.target.style.opacity = '1';
+
+								const selectedValueElement = document.getElementById(
+									'data-type-builder--' +
+										(value?.id || 'unknown') +
+										`--input-selected-value`,
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'hidden';
+								}
+							}}
+							onBlur={(e) => {
+								e.target.style.opacity = '0';
+
+								const selectedValueElement = document.getElementById(
+									'data-type-builder--' +
+										(value?.id || 'unknown') +
+										`--input-selected-value`,
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'visible';
+								}
+							}}
+						/>
+					</span>
+				)}
+			/>
+			{showEnumBuilderField && (
+				<Autocomplete
+					sx={{
+						minWidth: 200,
+					}}
+					disabled={(() => {
+						if (!(baseDataTypes || []).length) {
+							return false;
+						}
+
+						if (
+							(baseDataTypes || []).some((dt) => dt.implementationChooseOne)
+						) {
+							if (
+								(baseDataTypes || []).every((dt) => {
+									return (dt.orChildrenGroup || []).some(
+										(child) =>
+											child.entity?.type === EntityType.PrimitiveEntity &&
+											(child.entity as PrimitiveEntityState).name ===
+												PrimitiveTypes.Enum,
+									);
+								})
+							) {
+								return false;
+							}
+
+							return true;
+						}
+
+						return false;
+					})()}
+					multiple
+					freeSolo
+					size='small'
+					id={`data-type-builder--enum-builder--${dataType?.id}`}
+					options={[]}
+					disableClearable
+					value={localEnumOptionsValue}
+					renderOption={(optionProps, option, state, ownerState) => {
+						return (
+							<Box
+								component='li'
+								sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+								{...optionProps}
+								onClick={(e) => {
+									if (option.startsWith('Add "')) {
+										const newOption = option.slice(5, -1);
+
+										if (!newOption) {
+											return;
+										}
+										if (localEnumOptionsValue.includes(newOption)) {
+											return;
+										}
+
+										const newValue = [...localEnumOptionsValue, newOption];
+										setLocalEnumOptionsValue(newValue);
+
+										// Add new value to the list
+										const changeSet = onChangeSet?.() || null;
+
+										dataType.metaSync(
+											{
+												options: newValue,
+											},
+											changeSet,
+										);
+
+										onChange(dataType, changeSet);
+									} else {
+										optionProps.onClick(e);
+									}
+								}}
+							>
+								{option}
+							</Box>
+						);
+					}}
+					filterOptions={(options, params) => {
+						const filtered: string[] = [];
+
+						const { inputValue } = params;
+
+						if (inputValue !== '') {
+							return [`Add "${inputValue}"`];
+						}
+
+						return filtered;
+					}}
+					defaultValue={dataType.options || []}
+					open
+					noOptionsText={"Press 'Enter' to add a new value"}
+					onChange={(_, newValue) => {
+						const changeSet = onChangeSet?.() || null;
+
+						const sanitizedNewValue = (newValue || [])
+							// Sanitize the 'Add "value"' option
+							.map((value) => {
+								if (value.startsWith('Add "')) {
+									const newOption = value.slice(5, -1);
+
+									if (!newOption) {
+										return;
+									}
+									if (localEnumOptionsValue.includes(newOption)) {
+										return;
+									}
+
+									return newOption;
+								}
+
+								return value;
+							})
+							.filter(
+								// Filter duplicates
+								(value, index, self) =>
+									self.indexOf(value) === index && !!value,
+							);
+
+						setLocalEnumOptionsValue(sanitizedNewValue);
+
+						dataType.metaSync(
+							{
+								options: sanitizedNewValue as string[],
+							},
+							changeSet,
+						);
+
+						onChange(dataType, changeSet);
+
+						setUpdateKey(updateKey + 1);
+					}}
+					renderTags={(value, getTagProps) => {
+						return value.map((option, index) => (
+							<Chip
+								variant='outlined'
+								size='small'
+								label={option}
+								deleteIcon={!!baseDataTypes?.length ? <></> : undefined}
+								{...getTagProps({ index })}
+								disabled={false}
+							/>
+						));
+					}}
+					renderInput={(params) => (
+						<TextField
+							{...params}
+							id={`data-type-builder--enum-builder--${dataType?.id}--input`}
+							variant='outlined'
+							label={'Allowed values'}
+							placeholder='New value'
+						/>
+					)}
+				/>
+			)}
+			{showLiteralValueField && (
+				<LiteralValueField
+					disabled={!!baseDataTypes?.length}
+					value={value as LiteralValueState}
+					onChangeSet={onChangeSet}
+					onChange={(newValue, changeSet) => {
+						dataType.setEntity(newValue, changeSet);
+
+						changeSet?.add(dataType, ChangeSetEntityChangeType.Updated);
+
+						if (newValue?.type === EntityType.LiteralValue) {
+							dataType.metaSync(
+								{
+									asType: false,
+									like: false,
+								},
+								changeSet,
+							);
+
+							newValue.setParent(dataType, changeSet);
+						}
+
+						onChange(dataType, changeSet);
+						setLocalValue(resolveLocalValueFromExternalValue(newValue));
+
+						setUpdateKey(updateKey + 1);
+					}}
+				/>
+			)}
+		</span>
+	);
+};
+
+const DataTypeBuilderRow = ({
+	index,
+	dataType: _dataType,
+	parent,
+	parentBaseDataTypes,
+	topParent,
+	topBaseDataTypes,
+	baseDataTypes,
+	onChange,
+	options,
+	project,
+	getOptionDisabled,
+	getOptionTooltip,
+	lists: _lists,
+	getListDisabledTooltip,
+	disallowAsType,
+	getAsTypeDisabledTooltip,
+	disallowLike,
+	getLikeDisabledTooltip,
+	onChangeSet,
+}: {
+	index: number;
+	onChange: (value: DataTypeState, changeSet: ChangeSet | null) => void;
+	options: DataTypeBuilderOption[];
+	dataType?: DataTypeState;
+	parent: UserManagedDataTypeParentEntityState;
+	parentBaseDataTypes?: DataTypeState[];
+	baseDataTypes?: DataTypeState[];
+	topBaseDataTypes?: DataTypeState[];
+	topParent?: UserManagedDataTypeParentEntityState;
+	project: EditorService;
+	getOptionDisabled?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => boolean;
+	getOptionTooltip?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => React.ReactNode;
+	lists?: AllowedDataTypeListTypes;
+	getListDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowAsType?: boolean;
+	getAsTypeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowLike?: boolean;
+	getLikeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	onChangeSet?: () => ChangeSet | null;
+}) => {
+	const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+	const lists = _lists || AllowedDataTypeListTypes.All;
+
+	const isListCheckboxDisabled: boolean =
+		lists === AllowedDataTypeListTypes.None ||
+		(lists === AllowedDataTypeListTypes.Flat &&
+			_dataType?.parent?.type === EntityType.DataType);
+
+	let initChangeSet: ChangeSet | null = null;
+	let dataType: DataTypeState = _dataType;
+
+	if (!dataType) {
+		initChangeSet = onChangeSet?.() || null;
+
+		const newDataTypeTransfer: IDataTypeTransfer =
+			DataTypeState.new(initChangeSet);
+		newDataTypeTransfer.parent = parent.toReference();
+
+		dataType = createStateFromTypeAndSubscribe(
+			newDataTypeTransfer,
+			project.logic,
+		) as DataTypeState;
+
+		dataType.hydrateAncestors();
+		dataType.addSelfToProject(initChangeSet);
+		initChangeSet?.add(dataType, ChangeSetEntityChangeType.Added);
+		dataType.initChildren(initChangeSet);
+	}
+
+	if (dataType && dataType.isList && isListCheckboxDisabled) {
+		if (!initChangeSet) {
+			initChangeSet = onChangeSet?.() || null;
+		}
+
+		dataType.metaSync(
+			{
+				isList: false,
+			},
+			initChangeSet,
+		);
+	}
+
+	if (!!initChangeSet) {
+		onChange(dataType, initChangeSet);
+	}
+
+	const canDelete = true; // ((): boolean => {
+	// 	if (!dataType || !dataType.isResolved) {
+	// 		return true;
+	// 	}
+
+	// 	if (!baseDataTypes || baseDataTypes.length === 0) {
+	// 		return true;
+	// 	}
+
+	// 	const parentDataType = parentBaseDataTypes[0];
+
+	// 	if (
+	// 		dataType.parent?.type === EntityType.DataType &&
+	// 		!!dataType.parent.implementationChooseOne &&
+	// 		!!dataType.parent.orChildrenGroup?.length &&
+	// 		dataType.parent.orChildrenGroup.length > 1 &&
+	// 		!!dataType.parent.orChildrenGroup.find((dt) => dt.id === dataType.id)
+	// 	) {
+	// 		return true;
+	// 	}
+
+	// 	return false;
+	// })();
+
+	return (
+		<>
+			<div
+				style={{
+					display: 'flex',
+					gap: 12,
+					alignItems: 'center',
+					width: 'max-content',
+				}}
+			>
+				{/* node like box */}
+				<span
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+					}}
+				>
+					{/* vertical centered line */}
+					{index === 0 ? (
+						// No line, but a placeholder block
+						<div
+							style={{
+								width: 1,
+								height: 15.5,
+								backgroundColor: 'transparent',
+								marginLeft: 5,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								width: 1,
+								height: 15.5,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+							}}
+						/>
+					)}
+
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						{!!dataType?.parentRelationType && (
+							<span
+								id='data-type-builder__row__horizontal-line-before-node'
+								style={{
+									width: 2,
+									height: 1,
+									backgroundColor: 'rgba(0,0,0,0.54)',
+								}}
+							/>
+						)}
+						<div
+							style={{
+								width: 7,
+								height: 7,
+								borderRadius: 1,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: !!dataType?.parentRelationType ? 0 : 2,
+							}}
+						/>
+					</span>
+
+					{/* vertical centered line */}
+					{dataType?.isResolved ? (
+						<div
+							style={{
+								width: 1,
+								height: 16.5,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+							}}
+						/>
+					) : (
+						<div
+							style={{
+								width: 1,
+								height: 16.5,
+								backgroundColor: 'transparent',
+								marginLeft: 5,
+							}}
+						/>
+					)}
+				</span>
+
+				<div
+					style={{
+						display: 'flex',
+						gap: 12,
+						alignItems: 'center',
+					}}
+				>
+					<DataTypeValueSelector
+						dataType={dataType}
+						baseDataTypes={baseDataTypes}
+						value={dataType?.entity || dataType?.foreignKeyRef}
+						parentBaseDataTypes={parentBaseDataTypes}
+						topBaseDataTypes={topBaseDataTypes}
+						topParent={topParent}
+						project={project}
+						onChangeSet={onChangeSet}
+						onChange={(_, changeSet) => {
+							onChange(dataType, changeSet);
+						}}
+						options={options}
+						getOptionDisabled={getOptionDisabled}
+						getOptionTooltip={getOptionTooltip}
+					/>
+
+					<MuiTooltip
+						title={
+							!!baseDataTypes?.length
+								? 'Current data-type must match the base implementation'
+								: isListCheckboxDisabled
+									? getListDisabledTooltip?.(dataType)
+									: ''
+						}
+						placement='bottom'
+						enterDelay={isListCheckboxDisabled ? 100 : 400}
+						leaveDelay={200}
+					>
+						<FormGroup>
+							<FormControlLabel
+								control={
+									<Checkbox
+										disabled={!!baseDataTypes?.length || isListCheckboxDisabled}
+										className='data-type-builder--checkbox'
+										checked={dataType?.isList as boolean}
+										onChange={(e) => {
+											const changeSet = onChangeSet?.() || null;
+
+											dataType.metaSync(
+												{
+													isList: e.target.checked,
+												},
+												changeSet,
+											);
+
+											onChange(dataType, changeSet);
+										}}
+									/>
+								}
+								label={dataType?.isList ? 'List value' : 'Individual value'}
+							/>
+						</FormGroup>
+					</MuiTooltip>
+
+					<MuiTooltip
+						title={
+							!!baseDataTypes?.length
+								? 'Current data-type must match the base implementation'
+								: disallowAsType
+									? getAsTypeDisabledTooltip?.(dataType)
+									: ''
+						}
+						placement='bottom'
+						enterDelay={disallowAsType ? 100 : 400}
+						leaveDelay={200}
+					>
+						<FormGroup>
+							<FormControlLabel
+								control={
+									<Checkbox
+										disabled={!!baseDataTypes?.length || disallowAsType}
+										className='data-type-builder--checkbox'
+										checked={dataType?.asType as boolean}
+										onChange={(e) => {
+											const changeSet = onChangeSet?.() || null;
+
+											dataType.metaSync(
+												{
+													asType: e.target.checked,
+												},
+												changeSet,
+											);
+
+											onChange(dataType, changeSet);
+										}}
+									/>
+								}
+								label={
+									dataType?.asType ? 'As template type' : 'As instance value'
+								}
+							/>
+						</FormGroup>
+					</MuiTooltip>
+
+					<MuiTooltip
+						title={
+							!!baseDataTypes?.length
+								? 'Current data-type must match the base implementation'
+								: getLikeDisabledTooltip?.(dataType)
+						}
+						placement='bottom'
+						enterDelay={disallowLike ? 100 : 400}
+						leaveDelay={200}
+					>
+						<FormGroup>
+							<FormControlLabel
+								control={
+									<Checkbox
+										disabled={!!baseDataTypes?.length || disallowLike}
+										className='data-type-builder--checkbox'
+										checked={dataType?.like as boolean}
+										onChange={(e) => {
+											const changeSet = onChangeSet?.() || null;
+
+											dataType.metaSync(
+												{
+													like: e.target.checked,
+												},
+												changeSet,
+											);
+
+											onChange(dataType, changeSet);
+										}}
+									/>
+								}
+								label={
+									dataType?.like
+										? 'Allow equivalent type'
+										: 'Exact entity match'
+								}
+							/>
+						</FormGroup>
+					</MuiTooltip>
+
+					<IconButton
+						id={'data-type-builder--' + dataType?.id + '--menu-button'}
+						disabled={!canDelete}
+						size='small'
+						style={{
+							width: 22,
+							height: 22,
+						}}
+						onClick={() => {
+							setIsMenuOpen(!isMenuOpen);
+						}}
+					>
+						<i className='fas fa-ellipsis-v' />
+					</IconButton>
+
+					{/* Warning error icon */}
+					{!dataType?.isResolved && (
+						<>
+							<img
+								className='search-statement__error-icon'
+								id={`data-type-builder--${dataType?.id}--error-icon`}
+								src={WarningIcon}
+							/>
+							<Tooltip
+								anchorQuerySelector={`#data-type-builder--${dataType?.id}--error-icon`}
+								placement='bottom'
+								openDelay={300}
+							>
+								This data type is not fully resolved.
+								<br />
+								Please make sure to select a value for the entity field
+							</Tooltip>
+						</>
+					)}
+				</div>
+			</div>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#data-type-builder--${dataType?.id}--menu-button`,
+					placement: 'right',
+					open: isMenuOpen,
+				}}
+				options={[
+					{
+						onClick: async () => {
+							const changeSet = onChangeSet?.() || null;
+
+							// If the is the last child of the parent, then delete the parent
+							// If this is the parent only has 2 children, then transfer the content
+							// of the remaining child to the parent so it isn't a group but a single entity then
+							// delete the remaining child as well
+							if (
+								[
+									...((dataType.parent as DataTypeState).andChildrenGroup ||
+										[]),
+									...((dataType.parent as DataTypeState).orChildrenGroup || []),
+								].length === 2
+							) {
+								const parent = dataType.parent as DataTypeState;
+
+								dataType.remove({ ignoreUpstream: false }, changeSet);
+
+								const remainingChild = [
+									...(parent.andChildrenGroup || []),
+									...(parent.orChildrenGroup || []),
+								][0];
+
+								parent.setEntity(remainingChild.entity, changeSet);
+
+								// Check if the entity's parent is the og data type and set the parent to the new parent
+								if (
+									!!remainingChild.entity &&
+									(remainingChild.entity as DefinitionEntityState).parent
+										?.id === dataType.id
+								) {
+									(remainingChild.entity as DefinitionEntityState).setParent(
+										parent,
+										changeSet,
+									);
+
+									changeSet.add(
+										remainingChild.entity as UserManagedEntityState,
+										ChangeSetEntityChangeType.Updated,
+									);
+								}
+
+								parent.metaSync(
+									{
+										asType: remainingChild.asType,
+										like: remainingChild.like,
+										isList: remainingChild.isList,
+									},
+									changeSet,
+								);
+
+								parent.andChildrenGroup = remainingChild.andChildrenGroup;
+								parent.orChildrenGroup = remainingChild.orChildrenGroup;
+
+								changeSet.add(parent, ChangeSetEntityChangeType.Updated);
+
+								remainingChild.remove({ ignoreUpstream: false }, changeSet);
+
+								if (isListCheckboxDisabled && !!parent) {
+									parent.metaSync(
+										{
+											isList: false,
+										},
+										changeSet,
+									);
+								}
+
+								onChange(null, changeSet);
+							} else if (
+								[
+									...((dataType.parent as DataTypeState).andChildrenGroup ||
+										[]),
+									...((dataType.parent as DataTypeState).orChildrenGroup || []),
+								].length === 1
+							) {
+								const parent = dataType.parent as DataTypeState;
+
+								parent.remove({ ignoreUpstream: false }, changeSet);
+
+								onChange(null, changeSet);
+							} else {
+								dataType.remove({ ignoreUpstream: false }, changeSet);
+
+								onChange(null, changeSet);
+							}
+						},
+						disabled: !canDelete,
+						label: 'Delete',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: !canDelete
+							? 'Current data-type must match the base implementation'
+							: 'Click to delete this part of the statement',
+						// tooltip: 'Click to delete this part of the statement',
+					},
+					{
+						onClick: async () => {
+							const changeSet = onChangeSet?.() || null;
+
+							dataType.afterAllChildrenInitialized(changeSet);
+
+							await project.renderAndCloseChangeSet(changeSet);
+
+							// For now, to achieve a refresh of the data-type builder
+							setIsMenuOpen(false);
+						},
+						label: 'Recalculate',
+						color: 'warning',
+						iconEnd: 'fa-solid fa-bug',
+						tooltip: 'Recalculate the state of this data-type entry',
+					},
+					...(dataType?.entity?.type === EntityType.DefinitionEntity &&
+					dataType?.entity?.parent?.id === dataType.id
+						? [
+								{
+									onClick: async () => {
+										if (
+											dataType?.entity?.type !== EntityType.DefinitionEntity ||
+											dataType?.entity?.parent?.id !== dataType.id
+										) {
+											return;
+										}
+
+										const changeSet = onChangeSet?.() || null;
+
+										dataType?.entity.setParent(project.logic, changeSet);
+
+										changeSet?.add(
+											dataType?.entity as UserManagedEntityState,
+											ChangeSetEntityChangeType.Updated,
+										);
+
+										const currentCanvasParent = getParentCanvasEntity(dataType);
+
+										if (!currentCanvasParent) {
+											popupNotification({
+												color: 'error',
+												text: 'Cannot add definition to canvas: no parent canvas found',
+											});
+											return;
+										}
+
+										const newX = currentCanvasParent.x;
+										const newY =
+											currentCanvasParent.y -
+											calculateCardSize(dataType?.entity).height -
+											CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS;
+
+										// const validationResult =
+										// 	definitionEntityValidation.validateDefinitionEntityName(
+										// 		dataType?.entity,
+										// 		'Definition',
+										// 	);
+
+										const name = findNextAvailableName(
+											'Definition',
+											project.logic.entities,
+										);
+
+										// if (!validationResult.length) {
+										// 	debouncedOnChangeName(e.target.value);
+										// }
+
+										// setEntityNameErrors(validationResult);
+
+										dataType?.entity.metaSync(
+											{
+												x: newX,
+												y: newY,
+												name: name,
+											},
+											changeSet,
+										);
+
+										await project.renderAndCloseChangeSet(changeSet);
+
+										// Navigate to canvas and scroll to the new definition
+										EditorService.navigate(project.editorBasePath);
+
+										const objectId = getCanvasEntityDraggableContainerDOMId(
+											dataType?.entity,
+										);
+
+										project.canvas?.scrollToObjectById(objectId);
+
+										// For now, to achieve a refresh of the data-type builder
+										setIsMenuOpen(false);
+									},
+									label: 'Add definition to canvas',
+									iconEnd: 'fa-solid fa-plus',
+									tooltip:
+										'The current definition is inlined. Click to add it to the canvas',
+								},
+							]
+						: []),
+				]}
+			/>
+		</>
+	);
+};
+
+const DataTypeBuilderGroup = ({
+	dataType,
+	parent,
+	baseDataTypes,
+	parentBaseDataTypes,
+	topBaseDataTypes,
+	topParent,
+	project,
+	onChange,
+	options,
+	getOptionDisabled,
+	getOptionTooltip,
+	lists,
+	getListDisabledTooltip,
+	disallowAsType,
+	getAsTypeDisabledTooltip,
+	disallowLike,
+	getLikeDisabledTooltip,
+	onChangeSet,
+}: {
+	dataType?: DataTypeState;
+	parent: UserManagedDataTypeParentEntityState;
+	parentBaseDataTypes?: DataTypeState[];
+	baseDataTypes?: DataTypeState[];
+	topBaseDataTypes?: DataTypeState[];
+	topParent?: UserManagedDataTypeParentEntityState;
+	project: EditorService;
+	onChange: (value: DataTypeState, changeSet: ChangeSet | null) => void;
+	options: DataTypeBuilderOption[];
+	getOptionDisabled?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => boolean;
+	getOptionTooltip?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => React.ReactNode;
+	lists?: AllowedDataTypeListTypes;
+	getListDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowAsType?: boolean;
+	getAsTypeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowLike?: boolean;
+	getLikeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	onChangeSet?: () => ChangeSet | null;
+}) => {
+	const nestedDataTypeGroups: {
+		operator: 'and' | 'or';
+		dataType: DataTypeState;
+		baseDataTypes?: DataTypeState[];
+	}[] = (() => {
+		if (!dataType) {
+			return [];
+		}
+
+		if (!!(baseDataTypes || []).some((dt) => dt.implementationChooseOne)) {
+			return [];
+		}
+
+		return [
+			...(dataType.andChildrenGroup || []).map((c, i) => ({
+				operator: 'and' as 'and' | 'or',
+				dataType: c,
+				baseDataTypes:
+					(baseDataTypes || []).flatMap((dt) => dt.andChildrenGroup || []) ||
+					[],
+			})),
+			...(dataType.orChildrenGroup || []).map((c, i) => ({
+				operator: 'or' as 'and' | 'or',
+				dataType: c,
+				baseDataTypes:
+					(baseDataTypes || []).flatMap((dt) => dt.orChildrenGroup || []) || [],
+			})),
+		];
+	})();
+
+	const canAddANDAfterSelf: boolean =
+		dataType?.parentRelationType ===
+			DataTypeParentChildRelation.AndDataTypeGroup ||
+		!!(
+			dataType?.parent?.type === EntityType.DataType &&
+			(!(dataType?.parent as DataTypeState)?.andChildrenGroup ||
+				!((dataType?.parent as DataTypeState)?.andChildrenGroup || []).length)
+		) ||
+		dataType?.parent?.type !== EntityType.DataType;
+
+	const isListCheckboxDisabled: boolean =
+		!!baseDataTypes?.length ||
+		lists === AllowedDataTypeListTypes.None ||
+		(lists === AllowedDataTypeListTypes.Flat &&
+			dataType?.parent?.type === EntityType.DataType);
+
+	if (dataType && dataType.isList && isListCheckboxDisabled) {
+		const changeSet = onChangeSet?.() || null;
+
+		dataType.metaSync(
+			{
+				isList: false,
+			},
+			changeSet,
+		);
+
+		onChange(dataType, changeSet);
+	}
+
+	const currentIsNullable: boolean = checkIsNullable(dataType);
+
+	const canAddNewItemToGroup: boolean = (() => {
+		let baseTypesNotFullfilled: boolean = false;
+
+		(baseDataTypes || []).forEach((baseDataType) => {
+			const baseIsNullable = checkIsNullable(baseDataType);
+
+			if (baseIsNullable && !currentIsNullable) {
+				baseTypesNotFullfilled = true;
+			}
+		});
+
+		if (baseTypesNotFullfilled) {
+			return true;
+		}
+
+		// if (!!baseDataTypes?.length) {
+		// 	return false;
+		// }
+
+		return true;
+	})();
+
+	const canAddNewAndItemToGroup: boolean = (() => {
+		// The goal is to avoid a "never true" situation
+		// If the current 'entity' or items in the group are primitive types,
+		// we can't add a new AND item
+		if (!dataType) {
+			return true;
+		}
+
+		const allEntities: (DataTypeStateEntityOption | null)[] = [
+			dataType.entity,
+			...(dataType.andChildrenGroup || []).map((dt) => dt.entity),
+			...(dataType.orChildrenGroup || []).map((dt) => dt.entity),
+		];
+
+		const hasPrimitiveType = allEntities.some((entity) => {
+			if (!entity) {
+				return false;
+			}
+
+			if (
+				entity.type === EntityType.PrimitiveEntity ||
+				entity.type === EntityType.LiteralValue
+			) {
+				return true;
+			}
+
+			return false;
+		});
+
+		return !hasPrimitiveType;
+	})();
+
+	const isRootLevel =
+		!dataType?.parent || dataType?.parent?.type !== EntityType.DataType;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				width: 'max-content',
+			}}
+		>
+			{((!!dataType &&
+				!(dataType.andChildrenGroup || []).length &&
+				!(dataType.orChildrenGroup || []).length) ||
+				(baseDataTypes || []).some((dt) => dt.implementationChooseOne)) && (
+				<>
+					<DataTypeBuilderRow
+						options={options}
+						index={0}
+						dataType={dataType}
+						parent={parent}
+						parentBaseDataTypes={parentBaseDataTypes}
+						baseDataTypes={baseDataTypes}
+						topBaseDataTypes={topBaseDataTypes}
+						topParent={topParent}
+						project={project}
+						onChangeSet={onChangeSet}
+						onChange={(updatedDataType, changeSet) => {
+							if (isListCheckboxDisabled && !!updatedDataType) {
+								updatedDataType.metaSync(
+									{
+										isList: false,
+									},
+									changeSet,
+								);
+							}
+
+							onChange(updatedDataType, changeSet);
+						}}
+						getOptionDisabled={getOptionDisabled}
+						getOptionTooltip={getOptionTooltip}
+						lists={lists}
+						getListDisabledTooltip={getListDisabledTooltip}
+						disallowAsType={disallowAsType}
+						getAsTypeDisabledTooltip={getAsTypeDisabledTooltip}
+						disallowLike={disallowLike}
+						getLikeDisabledTooltip={getLikeDisabledTooltip}
+					/>
+
+					{dataType?.isResolved && (
+						<>
+							{/* vertical centered line */}
+							{!!dataType?.parentRelationType && (
+								<div
+									id='data-type-builder__vertical-line-after-root-data-type'
+									style={{
+										width: 1,
+										height: 4,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										marginLeft: 5,
+									}}
+								/>
+							)}
+
+							<span
+								className='data-type-builder__add-data-type-between__container'
+								style={{
+									display: 'flex',
+									gap: 6,
+									alignItems: 'center',
+								}}
+							>
+								<button
+									id={`data-type-builder--${dataType?.id}--add-first-nested-data-type`}
+									className='data-type-builder__add-data-type-between__button'
+									disabled={!canAddNewItemToGroup}
+									style={{
+										width: 11,
+										height: 11,
+									}}
+								>
+									<i className='fas fa-plus' />
+								</button>
+
+								<hr
+									className='data-type-builder__add-data-type-between__line'
+									style={{
+										width: 630,
+										backgroundColor: 'var(--color-main-primary)',
+										color: 'var(--color-main-primary)',
+										borderTop: '2px solid var(--color-main-primary)',
+										maxWidth: '100%',
+										margin: 0,
+									}}
+								/>
+							</span>
+
+							<DropdownMenuPopup
+								popupOptions={{
+									anchorQuerySelector: `#data-type-builder--${dataType?.id}--add-first-nested-data-type`,
+									placement: 'bottom',
+								}}
+								options={[
+									{
+										onClick: async () => {
+											const changeSet = onChangeSet?.() || null;
+
+											const newSiblingDataTypeTransfer: IDataTypeTransfer =
+												DataTypeState.new(changeSet);
+											newSiblingDataTypeTransfer.parent =
+												dataType.toReference();
+											newSiblingDataTypeTransfer.entity = (
+												project.logic.getBuiltIn(
+													BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].untyped
+														.id,
+												) as PrimitiveEntityState
+											)?.toJSON() as IPrimitiveEntityTransfer;
+
+											const newSiblingDataType =
+												createStateFromTypeAndSubscribe(
+													newSiblingDataTypeTransfer,
+													project.logic,
+												) as DataTypeState;
+
+											newSiblingDataType.hydrateAncestors();
+											newSiblingDataType.setParent(dataType, changeSet);
+
+											changeSet?.add(
+												newSiblingDataType,
+												ChangeSetEntityChangeType.Added,
+											);
+
+											newSiblingDataType.initChildren(changeSet);
+
+											if (isListCheckboxDisabled && !!dataType) {
+												dataType.metaSync(
+													{
+														isList: false,
+													},
+													changeSet,
+												);
+											}
+
+											const existingEntity = dataType.entity;
+
+											dataType.setEntity(null, changeSet);
+
+											const oldSelfClone = dataType.clone(changeSet);
+
+											oldSelfClone.setParent(dataType, changeSet);
+											oldSelfClone.setEntity(existingEntity, changeSet);
+
+											if (
+												!!existingEntity &&
+												(existingEntity as DefinitionEntityState).parent?.id ===
+													dataType.id
+											) {
+												(existingEntity as DefinitionEntityState).setParent(
+													oldSelfClone,
+													changeSet,
+												);
+
+												changeSet?.add(
+													existingEntity as UserManagedEntityState,
+													ChangeSetEntityChangeType.Updated,
+												);
+											}
+
+											oldSelfClone.metaSync(
+												{
+													parentRelationType:
+														DataTypeParentChildRelation.AndDataTypeGroup,
+												},
+												changeSet,
+											);
+											newSiblingDataType.metaSync(
+												{
+													parentRelationType:
+														DataTypeParentChildRelation.AndDataTypeGroup,
+												},
+												changeSet,
+											);
+
+											dataType.andChildrenGroup = [
+												...(dataType.andChildrenGroup || []),
+												oldSelfClone,
+												newSiblingDataType,
+											];
+
+											// Ideally, only if there were actual changes we should manually set the entity to the change set as updated
+											changeSet?.add(
+												dataType,
+												ChangeSetEntityChangeType.Updated,
+											);
+
+											dataType.metaSync(
+												{
+													entity: null,
+													asType: false,
+													like: false,
+												},
+												changeSet,
+											);
+
+											onChange?.(dataType, changeSet);
+										},
+										label: `Add 'AND' data type`,
+										color: 'primary',
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: !canAddNewItemToGroup
+											? 'Current data-type must match the base implementation'
+											: canAddANDAfterSelf
+												? canAddNewAndItemToGroup
+													? 'Click to add'
+													: 'Cannot add new "AND" item when primitive types are present'
+												: 'Group the "AND" statements together',
+										disabled:
+											!canAddNewItemToGroup ||
+											!canAddANDAfterSelf ||
+											!canAddNewAndItemToGroup,
+									},
+									{
+										onClick: async () => {
+											const changeSet = onChangeSet?.() || null;
+
+											if (isListCheckboxDisabled && !!dataType) {
+												dataType.metaSync(
+													{
+														isList: false,
+													},
+													changeSet,
+												);
+											}
+
+											const existingEntity = dataType.entity;
+
+											let autoResolvedNextEntity: DataTypeStateEntityOption;
+
+											const sameLevelSiblings = [];
+
+											if (parent.type === EntityType.DataType) {
+												sameLevelSiblings.push(
+													...(parent.andChildrenGroup || []),
+													...(parent.orChildrenGroup || []),
+												);
+											}
+
+											if (baseDataTypes && baseDataTypes.length === 1) {
+												const baseIsNullable = checkIsNullable(
+													baseDataTypes[0],
+												);
+												const selectedNonNullableBaseDataType =
+													recursivelySelectDataTypeOption(
+														baseDataTypes[0],
+														sameLevelSiblings,
+													)?.selectedDataType;
+
+												if (
+													selectedNonNullableBaseDataType?.entity?.id !==
+													existingEntity?.id
+												) {
+													autoResolvedNextEntity =
+														selectedNonNullableBaseDataType?.entity;
+												} else if (
+													baseIsNullable &&
+													selectedNonNullableBaseDataType?.entity?.id !==
+														existingEntity?.id
+												) {
+													autoResolvedNextEntity = project.logic.getBuiltIn(
+														BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].null
+															.id,
+													) as PrimitiveEntityState;
+												} else {
+													autoResolvedNextEntity = baseDataTypes[0].entity;
+												}
+											} else if (baseDataTypes && baseDataTypes.length > 1) {
+												const filteredBaseDataTypes = (
+													baseDataTypes || []
+												).filter((dt) => dt.entity?.id !== existingEntity?.id);
+
+												if (filteredBaseDataTypes.length > 0) {
+													autoResolvedNextEntity =
+														filteredBaseDataTypes[0].entity;
+												}
+											} else if (!baseDataTypes || baseDataTypes.length === 0) {
+												const existingPrimitiveNames: PrimitiveTypes[] = [];
+
+												if (parent.type === EntityType.DataType) {
+													sameLevelSiblings.forEach((dt) => {
+														if (
+															dt.entity?.type === EntityType.PrimitiveEntity ||
+															dt.entity?.type === EntityType.LiteralValue
+														) {
+															existingPrimitiveNames.push(
+																(dt.entity as PrimitiveEntityState)
+																	.name as PrimitiveTypes,
+															);
+														}
+													});
+												} else if (
+													parent.type !== EntityType.DefinitionEntity
+												) {
+													const parentDT = parent.getDataType(null);
+
+													if (
+														parentDT?.entity?.type ===
+															EntityType.PrimitiveEntity ||
+														parentDT?.entity?.type === EntityType.LiteralValue
+													) {
+														existingPrimitiveNames.push(
+															(parentDT?.entity as PrimitiveEntityState)
+																.name as PrimitiveTypes,
+														);
+													}
+												}
+
+												const availablePrimitiveNames = Object.values(
+													PrimitiveTypes,
+												).filter(
+													(pn) =>
+														![
+															...existingPrimitiveNames,
+															PrimitiveTypes.ActionDescriptor,
+															PrimitiveTypes.EntityTemplate,
+														].includes(pn),
+												);
+												const builtInId =
+													BUILT_IN_BASE_ENTITY_IDS['primitive-entity'][
+														(availablePrimitiveNames[0] as PrimitiveTypes.Boolean) ||
+															PrimitiveTypes.Boolean
+													]?.id;
+
+												if (!!availablePrimitiveNames && !!builtInId) {
+													autoResolvedNextEntity = project.logic.getBuiltIn(
+														builtInId,
+													) as PrimitiveEntityState;
+												}
+											}
+
+											if (!autoResolvedNextEntity) {
+												autoResolvedNextEntity = project.logic.getBuiltIn(
+													BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].untyped
+														.id,
+												) as PrimitiveEntityState;
+											}
+
+											const newSiblingDataTypeTransfer: IDataTypeTransfer =
+												DataTypeState.new(changeSet);
+											newSiblingDataTypeTransfer.parentRelationType =
+												DataTypeParentChildRelation.OrDataTypeGroup;
+											newSiblingDataTypeTransfer.parent =
+												dataType.toReference();
+											newSiblingDataTypeTransfer.entity =
+												autoResolvedNextEntity?.toJSON() as IPrimitiveEntityTransfer;
+
+											const newSiblingDataType =
+												createStateFromTypeAndSubscribe(
+													newSiblingDataTypeTransfer,
+													project.logic,
+												) as DataTypeState;
+
+											newSiblingDataType.hydrateAncestors();
+
+											changeSet?.add(
+												newSiblingDataType,
+												ChangeSetEntityChangeType.Added,
+											);
+											newSiblingDataType.setParent(dataType, changeSet);
+
+											newSiblingDataType.initChildren(changeSet);
+
+											const oldSelfCloneTransfer: IDataTypeTransfer =
+												DataTypeState.new(changeSet);
+											oldSelfCloneTransfer.parentRelationType =
+												DataTypeParentChildRelation.OrDataTypeGroup;
+											oldSelfCloneTransfer.parent = dataType.toReference();
+
+											const oldSelfClone = createStateFromTypeAndSubscribe(
+												oldSelfCloneTransfer,
+												project.logic,
+											) as DataTypeState;
+
+											oldSelfClone.hydrateAncestors();
+
+											changeSet?.add(
+												oldSelfClone,
+												ChangeSetEntityChangeType.Added,
+											);
+											oldSelfClone.setParent(dataType, changeSet);
+
+											oldSelfClone.initChildren(changeSet);
+
+											oldSelfClone.merge(dataType, changeSet);
+
+											if (
+												!!existingEntity &&
+												(existingEntity as DefinitionEntityState).parent?.id ===
+													dataType.id
+											) {
+												(existingEntity as DefinitionEntityState).setParent(
+													oldSelfClone,
+													changeSet,
+												);
+
+												changeSet?.add(
+													existingEntity as UserManagedEntityState,
+													ChangeSetEntityChangeType.Updated,
+												);
+											}
+
+											dataType.setEntity(null, changeSet);
+											dataType.setForeignKeyRef(null, changeSet);
+
+											oldSelfClone.metaSync(
+												{
+													parentRelationType:
+														DataTypeParentChildRelation.OrDataTypeGroup,
+												},
+												changeSet,
+											);
+											newSiblingDataType.metaSync(
+												{
+													parentRelationType:
+														DataTypeParentChildRelation.OrDataTypeGroup,
+												},
+												changeSet,
+											);
+
+											dataType.addToOrGroup(oldSelfClone, changeSet);
+											dataType.addToOrGroup(newSiblingDataType, changeSet);
+
+											// Ideally, only if there were actual changes we should manually set the entity to the change set as updated
+											changeSet?.add(
+												dataType,
+												ChangeSetEntityChangeType.Updated,
+											);
+
+											dataType.metaSync(
+												{
+													asType: false,
+													like: false,
+												},
+												changeSet,
+											);
+
+											onChange?.(dataType, changeSet);
+										},
+										label: `Add 'OR' data type`,
+										color: 'primary',
+										disabled: !canAddNewItemToGroup,
+										iconEnd: 'fa-solid fa-plus',
+										tooltip: !canAddNewItemToGroup
+											? 'Current data-type must match the base implementation'
+											: 'Click to add',
+									},
+								]}
+							/>
+						</>
+					)}
+				</>
+			)}
+
+			{nestedDataTypeGroups.length > 1 &&
+				!(baseDataTypes || []).some((dt) => dt.implementationChooseOne) && (
+					// Have a node representing the whole group of children,
+					// Here the user can choose whether the children should be a list as a whole
+					<span
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+						}}
+					>
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+							}}
+						>
+							{!!dataType.parentRelationType && (
+								<span
+									id='data-type-builder__builder-group__horizontal-line-before-node'
+									style={{
+										width: 2,
+										height: 1,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+									}}
+								/>
+							)}
+							<span
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+								}}
+							>
+								<div
+									style={{
+										width: 1,
+										height: 15.5,
+										backgroundColor: 'transparent',
+										marginLeft: 5,
+									}}
+								/>
+
+								<div
+									style={{
+										width: 7,
+										height: 7,
+										borderRadius: 1,
+										backgroundColor: 'transparent',
+										border: '1px solid rgba(0,0,0,0.54)',
+										marginLeft: !!dataType.parentRelationType ? 0 : 2,
+									}}
+								/>
+
+								<div
+									style={{
+										width: 1,
+										height: 16.5,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										marginLeft: !!dataType.parentRelationType ? 3 : 5,
+										// flexGrow: 1,
+									}}
+								/>
+							</span>
+							<span
+								id='data-type-builder__builder-group__horizontal-line-after-node'
+								style={{
+									width: 14,
+									height: 1,
+									backgroundColor: 'rgba(0,0,0,0.54)',
+								}}
+							/>
+
+							<p
+								style={{
+									textTransform: 'uppercase',
+									fontSize: 8,
+									color: 'rgba(0,0,0,0.54)',
+									margin: 0,
+									marginLeft: 2,
+								}}
+							>
+								Group
+							</p>
+
+							{/* Fields */}
+							<div
+								style={{
+									display: 'flex',
+									gap: 8,
+									alignItems: 'center',
+									marginLeft: 16,
+								}}
+							>
+								<MuiTooltip
+									title={
+										!!baseDataTypes?.length
+											? 'Current data-type must match the base implementation'
+											: isListCheckboxDisabled
+												? getListDisabledTooltip?.(dataType)
+												: ''
+									}
+									placement='bottom'
+									enterDelay={isListCheckboxDisabled ? 100 : 400}
+									leaveDelay={200}
+								>
+									<FormGroup>
+										<FormControlLabel
+											control={
+												<Checkbox
+													disabled={
+														!!baseDataTypes?.length || isListCheckboxDisabled
+													}
+													className='data-type-builder--checkbox'
+													checked={dataType.isList as boolean}
+													onChange={(e) => {
+														const changeSet = onChangeSet?.() || null;
+
+														dataType.metaSync(
+															{
+																isList: e.target.checked,
+															},
+															changeSet,
+														);
+
+														onChange(dataType, changeSet);
+													}}
+												/>
+											}
+											label={
+												dataType.isList
+													? 'Group is list value'
+													: 'Group is idividual value'
+											}
+										/>
+									</FormGroup>
+								</MuiTooltip>
+							</div>
+						</span>
+
+						{/* vertical centered line */}
+						<div
+							style={{
+								width: 1,
+								height: 6,
+								backgroundColor: 'rgba(0,0,0,0.54)',
+								marginLeft: 5,
+							}}
+						/>
+					</span>
+				)}
+
+			{nestedDataTypeGroups.map((nestedDataTypeItem, index) => {
+				const canAddANDAfterThisNode: boolean =
+					nestedDataTypeItem.operator === 'and' ||
+					!dataType.andChildrenGroup ||
+					!(dataType.andChildrenGroup || []).length;
+
+				return (
+					<>
+						<span
+							style={{
+								display: 'flex',
+							}}
+						>
+							<span
+								key={index}
+								style={{
+									display: 'flex',
+									flexDirection: 'column',
+								}}
+							>
+								{index === 0 && nestedDataTypeGroups.length <= 1 ? (
+									<div
+										id={`data-type-builder__vertical-line-before-operator-keyword--${index}`}
+										style={{
+											width: 1,
+											height: index !== 0 ? 15 : 16,
+											backgroundColor: 'transparent',
+											marginLeft: 5,
+										}}
+									/>
+								) : (
+									<div
+										id={`data-type-builder__vertical-line-before-operator-keyword--${index}`}
+										style={{
+											width: 1,
+											height: index !== 0 ? 15 : 16,
+											backgroundColor: 'rgba(0,0,0,0.54)',
+											marginLeft: 5,
+										}}
+									/>
+								)}
+
+								<span
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+									}}
+								>
+									{index !== 0 ? (
+										<p
+											style={{
+												textTransform: 'uppercase',
+												fontSize: 8,
+												color: 'rgba(0,0,0,0.54)',
+												margin: 0,
+											}}
+										>
+											{nestedDataTypeItem.operator?.toUpperCase()}
+										</p>
+									) : (
+										<span
+											style={{
+												display: 'flex',
+												alignItems: 'center',
+											}}
+										>
+											{!!dataType.parentRelationType &&
+												nestedDataTypeGroups.length <= 1 && (
+													<span
+														id='data-type-builder__builder__horizontal-line-before-node'
+														style={{
+															width: 2,
+															height: 1,
+															backgroundColor: 'rgba(0,0,0,0.54)',
+														}}
+													/>
+												)}
+											<div
+												style={{
+													width: 7,
+													height: 7,
+													borderRadius: 1,
+													backgroundColor: 'rgba(0,0,0,0.54)',
+													marginLeft:
+														!!dataType.parentRelationType &&
+														nestedDataTypeGroups.length <= 1
+															? 0
+															: 2,
+												}}
+											/>
+										</span>
+									)}
+
+									{/* Horizontal line to connect to the nested dataType builder */}
+									<span
+										style={{
+											width:
+												index !== 0
+													? nestedDataTypeItem.operator?.toUpperCase() === 'AND'
+														? 8
+														: 12
+													: 18,
+											height: 1,
+											backgroundColor: 'rgba(0,0,0,0.54)',
+											flexGrow: 1,
+											marginLeft: index !== 0 ? 2 : 0,
+										}}
+									/>
+								</span>
+								<div
+									id={`data-type-builder__vertical-line-after-operator-keyword--${index}`}
+									style={{
+										width: 1,
+										backgroundColor: 'rgba(0,0,0,0.54)',
+										flexGrow: 1,
+										marginLeft: 5,
+									}}
+								/>
+							</span>
+
+							<DataTypeBuilderGroup
+								dataType={nestedDataTypeItem.dataType}
+								baseDataTypes={nestedDataTypeItem.baseDataTypes}
+								parentBaseDataTypes={baseDataTypes}
+								topBaseDataTypes={topBaseDataTypes}
+								topParent={topParent}
+								parent={dataType}
+								options={options}
+								project={project}
+								lists={lists}
+								getListDisabledTooltip={getListDisabledTooltip}
+								disallowAsType={disallowAsType}
+								getOptionDisabled={getOptionDisabled}
+								getOptionTooltip={getOptionTooltip}
+								getAsTypeDisabledTooltip={getAsTypeDisabledTooltip}
+								disallowLike={disallowLike}
+								getLikeDisabledTooltip={getLikeDisabledTooltip}
+								onChangeSet={onChangeSet}
+								onChange={(_, changeSet) => {
+									if (isListCheckboxDisabled && !!dataType) {
+										dataType.metaSync(
+											{
+												isList: false,
+											},
+											changeSet,
+										);
+									}
+
+									// Trigger update on top dataType
+									onChange(dataType, changeSet);
+								}}
+							/>
+						</span>
+
+						{!!dataType.parentRelationType && (
+							<div
+								id='data-type-builder__vertical-line-after-child-builder'
+								style={{
+									width: 1,
+									height: 4,
+									backgroundColor: 'rgba(0,0,0,0.54)',
+									marginLeft: 5,
+								}}
+							/>
+						)}
+
+						{dataType.isResolved && (
+							<>
+								<span
+									className='data-type-builder__add-data-type-between__container'
+									style={{
+										display: 'flex',
+										gap: 6,
+										alignItems: 'center',
+									}}
+								>
+									<button
+										id={`data-type-builder--${nestedDataTypeItem.dataType?.id}--add-nested-data-type--between--in-group`}
+										className='data-type-builder__add-data-type-between__button'
+										disabled={!!baseDataTypes?.length}
+										style={{
+											width: 11,
+											height: 11,
+										}}
+									>
+										<i className='fas fa-plus' />
+									</button>
+
+									<hr
+										className='data-type-builder__add-data-type-between__line'
+										style={{
+											width: 630,
+											backgroundColor: 'var(--color-main-primary)',
+											color: 'var(--color-main-primary)',
+											borderTop: '2px solid var(--color-main-primary)',
+											maxWidth: '100%',
+											margin: 0,
+										}}
+									/>
+								</span>
+
+								<DropdownMenuPopup
+									popupOptions={{
+										anchorQuerySelector: `#data-type-builder--${nestedDataTypeItem.dataType?.id}--add-nested-data-type--between--in-group`,
+										placement: 'bottom',
+									}}
+									options={[
+										{
+											onClick: async () => {
+												const changeSet = onChangeSet?.() || null;
+
+												const newSiblingDataTypeTransfer: IDataTypeTransfer =
+													DataTypeState.new(changeSet);
+												newSiblingDataTypeTransfer.parent =
+													dataType.toReference();
+												newSiblingDataTypeTransfer.entity = (
+													project.logic.getBuiltIn(
+														BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].untyped
+															.id,
+													) as PrimitiveEntityState
+												)?.toJSON() as IPrimitiveEntityTransfer;
+
+												const newSiblingDataType =
+													createStateFromTypeAndSubscribe(
+														newSiblingDataTypeTransfer,
+														project.logic,
+													) as DataTypeState;
+
+												newSiblingDataType.hydrateAncestors();
+												newSiblingDataType.setParent(dataType, changeSet);
+
+												changeSet?.add(
+													newSiblingDataType,
+													ChangeSetEntityChangeType.Added,
+												);
+
+												newSiblingDataType.initChildren(changeSet);
+
+												newSiblingDataType.metaSync(
+													{
+														parentRelationType:
+															DataTypeParentChildRelation.AndDataTypeGroup,
+													},
+													changeSet,
+												);
+
+												dataType.addToAndGroup(newSiblingDataType, changeSet);
+												dataType.setEntity(null, changeSet);
+
+												changeSet?.add(
+													dataType,
+													ChangeSetEntityChangeType.Updated,
+												);
+
+												if (isListCheckboxDisabled && !!dataType) {
+													dataType.metaSync(
+														{
+															isList: false,
+														},
+														changeSet,
+													);
+												}
+
+												onChange?.(dataType, changeSet);
+											},
+											label: `Add 'AND' dataType`,
+											color: 'primary',
+											iconEnd: 'fa-solid fa-plus',
+											tooltip: !!baseDataTypes?.length
+												? 'Current data-type must match the base implementation'
+												: canAddANDAfterThisNode
+													? 'Click to add'
+													: 'Group the "AND" statements together',
+											disabled:
+												!!baseDataTypes?.length || !canAddANDAfterThisNode,
+										},
+										{
+											onClick: async () => {
+												const changeSet = onChangeSet?.() || null;
+
+												const newSiblingDataTypeTransfer: IDataTypeTransfer =
+													DataTypeState.new(changeSet);
+												newSiblingDataTypeTransfer.parent =
+													dataType.toReference();
+												newSiblingDataTypeTransfer.entity = (
+													project.logic.getBuiltIn(
+														BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].untyped
+															.id,
+													) as PrimitiveEntityState
+												)?.toJSON() as IPrimitiveEntityTransfer;
+
+												const newSiblingDataType =
+													createStateFromTypeAndSubscribe(
+														newSiblingDataTypeTransfer,
+														project.logic,
+													) as DataTypeState;
+
+												newSiblingDataType.hydrateAncestors();
+												newSiblingDataType.setParent(dataType, changeSet);
+
+												changeSet?.add(
+													newSiblingDataType,
+													ChangeSetEntityChangeType.Added,
+												);
+
+												newSiblingDataType.initChildren(changeSet);
+
+												newSiblingDataType.metaSync(
+													{
+														parentRelationType:
+															DataTypeParentChildRelation.OrDataTypeGroup,
+													},
+													changeSet,
+												);
+
+												dataType.addToOrGroup(newSiblingDataType, changeSet);
+												dataType.setEntity(null, changeSet);
+
+												changeSet?.add(
+													dataType,
+													ChangeSetEntityChangeType.Updated,
+												);
+
+												if (isListCheckboxDisabled && !!dataType) {
+													dataType.metaSync(
+														{
+															isList: false,
+														},
+														changeSet,
+													);
+												}
+
+												onChange?.(dataType, changeSet);
+											},
+											label: `Add 'OR' dataType`,
+											color: 'primary',
+											iconEnd: 'fa-solid fa-plus',
+											tooltip: !!baseDataTypes?.length
+												? 'Current data-type must match the base implementation'
+												: 'Click to add',
+											disabled: !!baseDataTypes?.length,
+										},
+									]}
+								/>
+							</>
+						)}
+					</>
+				);
+			})}
+
+			{!dataType && (
+				<>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: 8,
+						}}
+					>
+						{isRootLevel ? (
+							<Button
+								style={{
+									marginTop: 8,
+								}}
+								id={`data-type-builder--${dataType?.id}--add-root-data-type`}
+								// variant='outlined'
+								color='primary'
+								disabled={!!baseDataTypes?.length}
+								onClick={() => {
+									const changeSet = onChangeSet?.() || null;
+
+									if (!dataType) {
+										const newDataTypeTransfer: IDataTypeTransfer =
+											DataTypeState.new(changeSet);
+
+										const newDataType = createStateFromTypeAndSubscribe(
+											newDataTypeTransfer,
+											project.logic,
+										) as DataTypeState;
+
+										changeSet?.add(
+											newDataType,
+											ChangeSetEntityChangeType.Added,
+										);
+
+										if (isListCheckboxDisabled && !!newDataType) {
+											newDataType.metaSync(
+												{
+													isList: false,
+												},
+												changeSet,
+											);
+										}
+
+										onChange?.(newDataType, changeSet);
+									} else {
+										if (isListCheckboxDisabled && !!dataType) {
+											dataType.metaSync(
+												{
+													isList: false,
+												},
+												changeSet,
+											);
+										}
+
+										onChange?.(dataType, changeSet);
+									}
+								}}
+							>
+								Add data type
+							</Button>
+						) : (
+							<>
+								<button
+									id={`data-type-builder--${dataType?.id}--add-root-data-type`}
+									className='data-type-builder__add-data-type-between__button'
+									disabled={!!baseDataTypes?.length}
+									onClick={() => {
+										const changeSet = onChangeSet?.() || null;
+
+										if (!dataType) {
+											const newDataTypeTransfer: IDataTypeTransfer =
+												DataTypeState.new(changeSet);
+
+											const newDataType = createStateFromTypeAndSubscribe(
+												newDataTypeTransfer,
+												project.logic,
+											) as DataTypeState;
+
+											changeSet?.add(
+												newDataType,
+												ChangeSetEntityChangeType.Added,
+											);
+
+											if (isListCheckboxDisabled && !!newDataType) {
+												newDataType.metaSync(
+													{
+														isList: false,
+													},
+													changeSet,
+												);
+											}
+
+											onChange?.(newDataType, changeSet);
+										} else {
+											if (isListCheckboxDisabled && !!dataType) {
+												dataType.metaSync(
+													{
+														isList: false,
+													},
+													changeSet,
+												);
+											}
+
+											onChange?.(dataType, changeSet);
+										}
+									}}
+									style={{
+										width: 11,
+										height: 11,
+									}}
+								>
+									<i className='fas fa-plus' />
+								</button>
+								<p
+									style={{
+										margin: 0,
+										fontSize: 10,
+										color: 'rgba(0,0,0,0.54)',
+									}}
+								>
+									No data type
+								</p>
+							</>
+						)}
+					</div>
+
+					<Tooltip
+						anchorQuerySelector={`#data-type-builder--${dataType?.id}--add-root-data-type`}
+						placement='bottom'
+					>
+						{!!baseDataTypes?.length
+							? "Can't modify because current data-type must match the base implementation"
+							: 'Click to add the first data type'}
+					</Tooltip>
+				</>
+			)}
+		</div>
+	);
+};
+
+export const DataTypeBuilder = ({
+	dataType,
+	baseDataTypes,
+	topParent,
+	project,
+	onChange = () => {},
+	options,
+	getOptionDisabled,
+	getOptionTooltip,
+	lists: _lists,
+	getListDisabledTooltip,
+	disallowAsType,
+	getAsTypeDisabledTooltip,
+	disallowLike,
+	getLikeDisabledTooltip,
+	onChangeSet,
+	readOnly,
+}: {
+	dataType?: DataTypeState;
+	baseDataTypes?: DataTypeState[];
+	topParent: UserManagedDataTypeParentEntityState;
+	project: EditorService;
+	onChange?: (value: DataTypeState, changeSet: ChangeSet | null) => void;
+	options?: DataTypeBuilderOption[];
+	getOptionDisabled?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => boolean;
+	getOptionTooltip?: (
+		option: DataTypeBuilderOption | ILiteralValueOption,
+	) => React.ReactNode;
+	lists?: AllowedDataTypeListTypes;
+	getListDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowAsType?: boolean;
+	getAsTypeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	disallowLike?: boolean;
+	getLikeDisabledTooltip?: (dataType: DataTypeState) => React.ReactNode;
+	onChangeSet?: () => ChangeSet | null;
+	readOnly?: boolean;
+}) => {
+	const lists = _lists || AllowedDataTypeListTypes.All;
+
+	const optionsWithDefaults =
+		options || getAllDataTypeBuilderOptions(project.logic, topParent);
+
+	const defaultGetListDisabledTooltip = (
+		dataType: DataTypeState,
+	): React.ReactNode => {
+		if (getListDisabledTooltip) {
+			return getListDisabledTooltip(dataType);
+		}
+
+		if (lists === AllowedDataTypeListTypes.None) {
+			return 'Lists are not allowed in the context this data type is used';
+		} else if (lists === AllowedDataTypeListTypes.Flat) {
+			return "A single level of list is allowed in the context this data type is used. You can't nest lists";
+		}
+
+		return '';
+	};
+
+	const readOnlyTopLevelLabel = resolveDataTypeLabel(
+		dataType || baseDataTypes?.[0],
+	);
+
+	const canInferDataTypeFromValueWritter =
+		!baseDataTypes &&
+		!!dataType &&
+		VALUE_READING_TYPES.includes(dataType.parent.type);
+
+	return (
+		<div
+			style={{
+				width: '100%',
+				overflowX: 'scroll',
+				// paddingTop: 7,
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 8,
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+				}}
+			>
+				<p
+					style={{
+						margin: 0,
+						fontSize: 10,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{readOnlyTopLevelLabel}
+				</p>
+			</div>
+			{canInferDataTypeFromValueWritter && !readOnly && (
+				// Checkbox to allow the user to infer the data type from the value writter
+				<FormGroup>
+					<FormControlLabel
+						control={
+							<Checkbox
+								className='data-type-builder--inferred-checkbox'
+								checked={dataType.inferred}
+								onChange={(e) => {
+									const changeSet = onChangeSet?.() || null;
+
+									dataType.metaSync(
+										{
+											inferred: e.target.checked,
+										},
+										changeSet,
+									);
+
+									onChange(dataType, changeSet);
+								}}
+							/>
+						}
+						label='Infer data type from value writter'
+					/>
+				</FormGroup>
+			)}
+			{!readOnly && (
+				<DataTypeBuilderGroup
+					dataType={dataType}
+					parentBaseDataTypes={[]}
+					baseDataTypes={baseDataTypes}
+					topParent={topParent}
+					topBaseDataTypes={baseDataTypes}
+					parent={topParent}
+					project={project}
+					onChange={onChange}
+					onChangeSet={onChangeSet}
+					options={optionsWithDefaults}
+					getOptionDisabled={getOptionDisabled}
+					getOptionTooltip={getOptionTooltip}
+					lists={lists}
+					getListDisabledTooltip={defaultGetListDisabledTooltip}
+					disallowAsType={disallowAsType}
+					getAsTypeDisabledTooltip={getAsTypeDisabledTooltip}
+					disallowLike={disallowLike}
+					getLikeDisabledTooltip={getLikeDisabledTooltip}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default DataTypeBuilder;