@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/definition-entity/DefinitionEntityCard.tsx

@@ -0,0 +1,1181 @@
+import React, {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react';
+import parse from 'style-to-object';
+import './definition-entity-card.css';
+import {
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	createStateFromTypeAndSubscribe,
+	EntityType,
+	FunctionDeclarationState,
+	getIsInteractive,
+	lowercaseFirstLetter,
+	ProjectState,
+	PropertyState,
+	DefinitionEntityState,
+	addDisabledReasons,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS,
+	removeDisabledReasons,
+	READABLE_ENTITY_TYPES,
+	checkHasBaseEntity,
+	BaseEntityNames,
+	StateMutationAction,
+	resolveSQLMigrationsDiffs,
+	createOrUpdateRowTransformer
+} from '@elyx-code/project-logic-tree';
+import {
+	fromDisabledReasonsToCardState,
+	getCanvasEntityDOMId,
+	getCanvasEntityDraggableContainerDOMId,
+	resolveCardSubheader,
+	resolveEntityColorClass,
+	safeResolveEntityName
+} from '../../../services/editor/ui';
+import Button from '../../../lib/button/Button';
+import { Canvas } from '../../../lib/canvas';
+import CanvasPopupBaseComponent from '../../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, {
+	useCanvasPopup
+} from '../../../services/editor/CanvasPopup';
+import CanvasDropdownMenuCard from '../../../lib/dropdown/CanvasDropdownMenuCard';
+import DefinitionEntityProperty from './DefinitionEntityProperty';
+import DefinitionEntityIcon from './DefinitionEntityIcon';
+import MethodDeclaration from '../MethodDeclaration';
+import LogicErrorIconMenu from '../logic-error/LogicErrorIconMenu';
+import DynamicFooterActions from './DynamicFooterActions';
+import ExpandPropertiesIconButton from '../expand-properties-icon-button/ExpandPropertiesIconButton';
+import { ICanvasElementComponentProps } from '../../../services/editor/CanvasElement';
+import { EditorService } from '../../../services/editor';
+import { resolveValue } from '../../../services/execution/value-resolution';
+import { DynamicValueTypes } from '../../../services/editor/value-store';
+import { findNextAvailableName } from '../../../services/editor/create/utils';
+import EntityLockedIconMenu from '../entity-locked-icon/EntityLockedIcon';
+import { setSQLMigrationsGenerationDeferred } from '../../../services/editor/modules/sql-migrations-generation';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { popupNotification } from '../../../popup-notification';
+
+interface IDefinitionEntityCardProps extends ICanvasElementComponentProps {
+	entity: DefinitionEntityState;
+}
+
+const DefinitionEntityCard = (props: IDefinitionEntityCardProps) => {
+	const rootElementRef = useRef(null);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		if (!!element && document.contains(element)) {
+			props.onMount?.(element);
+		}
+
+		// When the component is unmounted
+		return () => {
+			props.onUnmount?.();
+		};
+	}, []);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		props.onUpdate?.(element);
+	});
+
+	useLayoutEffect(() => {
+		props.onBeforeUpdate?.();
+	}, []);
+
+	const [expandedExtendedProperties, setExpandedExtendedProperties] =
+		useState<boolean>(false);
+	const [expandedOwnHiddenProperties, setExpandedOwnHiddenProperties] =
+		useState<boolean>(false);
+	const [disabledReasons, setDisabledReasons] = useState<
+		CanvasEntityDisabledReason[]
+	>([]);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-card-menu-button-' +
+					props.entity.id +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.entity.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: !entity.deletable,
+							tooltip: entity.deletable
+								? 'Forever delete this definition'
+								: 'This definition cannot be deleted. Because the system need to refer to it over time.',
+							parentCanvasObject: popup.self,
+							id: 'canvas-card--' + props.entity.id + '--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								Logger.log(
+									'Navigating to: ',
+									`${props.project?.editorBasePath}/entity/${EntityType.DefinitionEntity}/${props.entity.id}`
+								);
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.DefinitionEntity}/${props.entity.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: false,
+							tooltip: !props.entity.editable
+								? `This ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.singular
+									)} has been locked and can no longer be edited`
+								: `Edit this ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.singular
+									)}`,
+							parentCanvasObject: popup.self,
+							id: 'canvas-card--' + props.entity.id + '--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											props.entity,
+											false,
+											StateMutationAction.AddMethodToDef
+										)
+									);
+
+								const newFunctionDeclarationTransfer =
+									FunctionDeclarationState.new(changeSet);
+								newFunctionDeclarationTransfer.parent =
+									props.entity.toReference();
+								newFunctionDeclarationTransfer.name =
+									'New internal trigger';
+
+								const numberOfEquivalentEntitiesWithSameName = [
+									...entity.methods,
+									...entity.abstractMethods
+								].filter(
+									(ent) =>
+										ent.name ===
+										newFunctionDeclarationTransfer.name
+								).length;
+
+								if (
+									numberOfEquivalentEntitiesWithSameName > 0
+								) {
+									newFunctionDeclarationTransfer.name += ` ${numberOfEquivalentEntitiesWithSameName}`;
+								}
+
+								const newFunctionDeclarationInstance =
+									createStateFromTypeAndSubscribe(
+										newFunctionDeclarationTransfer,
+										props.project.logic
+									) as FunctionDeclarationState;
+
+								newFunctionDeclarationInstance.hydrateAncestors();
+
+								changeSet.add(
+									newFunctionDeclarationInstance,
+									ChangeSetEntityChangeType.Added
+								);
+
+								newFunctionDeclarationInstance.addSelfToProject(
+									changeSet
+								);
+								newFunctionDeclarationInstance.afterAllChildrenInitialized(
+									changeSet
+								);
+
+								props.entity.afterAllChildrenInitialized(
+									changeSet
+								);
+
+								Logger.log(
+									'Navigating to: ',
+									`${props.project?.editorBasePath}/entity/${EntityType.FunctionDeclaration}/${newFunctionDeclarationInstance.id}`
+								);
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.FunctionDeclaration}/${newFunctionDeclarationInstance.id}`
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'New internal trigger',
+							iconEnd: 'fa-solid fa-plus',
+							classes: [
+								'canvas-dropdown-menu-card-option__new-method'
+							],
+							disabled: !getIsInteractive(props.entity),
+							tooltip: !getIsInteractive(props.entity)
+								? 'No custom internal triggers can be added to this definition node'
+								: 'Add new internal trigger to this node',
+							parentCanvasObject: popup.self,
+							id:
+								'canvas-card--' +
+								props.entity.id +
+								'--new-method'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											StateMutationAction.RecalculateDef
+										)
+									);
+
+								entity.afterAllChildrenInitialized(changeSet);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[props.entity.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'-card--' +
+								props.entity.id +
+								'--recalculate'
+						},
+						...(checkHasBaseEntity(
+							props.entity,
+							BaseEntityNames.PERSISTED_ENTITY
+						)
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											const diffs =
+												resolveSQLMigrationsDiffs(
+													props.project.logic,
+													props.project
+														.lastPublishedProjectState,
+													props.entity
+												);
+											if (
+												!diffs.changesSinceLastPublication ||
+												(diffs.newestOpenRowTransformer &&
+													diffs.isPreexistingRowTransformerUpToDate ===
+														true) ||
+												(!diffs.newestOpenRowTransformer &&
+													!diffs.newRowTransformerNeeded)
+											) {
+												if (
+													diffs.newestOpenRowTransformer
+												) {
+													const objectId =
+														getCanvasEntityDraggableContainerDOMId(
+															diffs.newestOpenRowTransformer
+														);
+													props.project.canvas?.scrollToObjectById(
+														objectId
+													);
+												}
+
+												return;
+											}
+
+											const changeSet =
+												props.project.logic.addChangeSet(
+													new ChangeSet(
+														props.project.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														props.entity,
+														false,
+														StateMutationAction.ReSyncRowTransformer
+													)
+												);
+
+											const { rowTransformer } =
+												createOrUpdateRowTransformer(
+													props.project.logic,
+													diffs,
+													changeSet
+												);
+
+											if (
+												changeSet.hasAdded(
+													rowTransformer.id
+												)
+											) {
+												changeSet.actionName =
+													StateMutationAction.ManuallyAddRowTransformer;
+											}
+
+											// The user manually engaged with row transformers, so
+											// reset any prior "add later" deferral — the upon-change
+											// dialog should prompt again on the next round of changes.
+											setSQLMigrationsGenerationDeferred(
+												props.project,
+												false
+											);
+
+											const objectId =
+												getCanvasEntityDraggableContainerDOMId(
+													rowTransformer
+												);
+											props.project.canvas?.scrollToObjectById(
+												objectId
+											);
+
+											await props.project.renderAndCloseChangeSet(
+												changeSet
+											);
+										},
+										label: resolveSQLMigrationsDiffs(
+											props.project.logic,
+											props.project
+												.lastPublishedProjectState,
+											props.entity
+										).newestOpenRowTransformer
+											? 'Modify open row transformer'
+											: 'New row transformer',
+										iconEnd: 'fa-solid fa-plus',
+										classes: [
+											'canvas-dropdown-menu-card-option__new-row-transformer'
+										],
+										disabled: !resolveSQLMigrationsDiffs(
+											props.project.logic,
+											props.project
+												.lastPublishedProjectState,
+											props.entity
+										).changesSinceLastPublication,
+										tooltip: !resolveSQLMigrationsDiffs(
+											props.project.logic,
+											props.project
+												.lastPublishedProjectState,
+											props.entity
+										).changesSinceLastPublication
+											? 'No changes were made to this definition since the last publication'
+											: resolveSQLMigrationsDiffs(
+														props.project.logic,
+														props.project
+															.lastPublishedProjectState,
+														props.entity
+												  ).newestOpenRowTransformer
+												? 'Modify existing open row transformer'
+												: 'Add new row transformer for this persisted entity',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas-card--' +
+											props.entity.id +
+											'--new-row-transformer'
+									}
+								]
+							: []),
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(props.entity.id);
+								popupNotification({
+									text: `Copied ID: ${props.entity.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.entity.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.entity
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.entity.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[props.entity, props.project]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'canvas-card-menu-button-' + props.entity.id + '--popup',
+			anchorQuerySelector:
+				'#canvas-definition-entity-card-menu-button-' + props.entity.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-definition-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody,
+		[props.project, props.entity]
+	);
+
+	useEffect(() => {
+		// --- Initial Setup Logic ---
+		// This logic runs once every time the effect (re)-runs.
+		const initialNewDisabledReasons: CanvasEntityOtherDisabledReason[] = [];
+
+		// @ts-ignore
+		if (props.entity.suggestion) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.Suggestion
+			);
+		}
+
+		if (props.project.canvas?.disabled) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			);
+		}
+
+		if (!!initialNewDisabledReasons.length) {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					initialNewDisabledReasons
+				);
+				return config.reasons;
+			});
+		} else {
+			// This handles the case where canvas was disabled but is now enabled
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		}
+
+		const handleCanvasGloballyEnabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+		const handleCanvasGloballyDisabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+
+		const handleEntityUpdate = (payload: any) => {
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				// @ts-ignore
+				props.entity
+			);
+
+			if (
+				!!props.project.test &&
+				// @ts-ignore
+				!props.project.test?.hasEntity(props.entity) &&
+				// @ts-ignore
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(currentReasons, [
+						CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+					]);
+					return config.reasons;
+				});
+			}
+
+			// If it is part of test and it is disabled, enable it
+			if (
+				// @ts-ignore
+				(props.project.test?.hasEntity(props.entity) ||
+					// @ts-ignore
+					props.project.test?.getCanBeAddedToTest(props.entity)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				setDisabledReasons((currentReasons) => {
+					const config = removeDisabledReasons(currentReasons, [
+						CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+					]);
+					return config.reasons;
+				});
+			}
+
+			forceUpdate();
+		};
+
+		const handleTestSetupStarted = () => {
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+
+			if (
+				!!props.project.test &&
+				// @ts-ignore
+				!props.project.test?.hasEntity(props.entity) &&
+				// @ts-ignore
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				props.project.test?.disabledConnectionsNotInTest(
+					props.canvasElement.draggableObject,
+					// @ts-ignore
+					props.entity
+				);
+
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			// @ts-ignore
+			if (!props.project.test?.hasEntity(props.entity)) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					newDisabledReasons
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleExecutionStart = () => {
+			// @ts-ignore
+			if (!!props.project.test?.hasEntity(props.entity)) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestExited = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest,
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				]);
+				return config.reasons;
+			});
+
+			if (props.canvasElement.draggableObject.disabled) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+			}
+
+			props.canvasElement.draggableObject.connections.forEach(
+				(connection) => {
+					connection.enable();
+					connection.element.classList.remove('disabled');
+
+					if (connection.complementaryLineElement) {
+						connection.complementaryLineElement.classList.remove(
+							'disabled'
+						);
+					}
+				}
+			);
+		};
+
+		const handleCanvasConnectionStart = (payload: any) => {
+			if (!payload.compatible?.[props.entity.id]) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				const newOwnConnectionDisabledReasons: CanvasEntityConnectionDisabledReason[] =
+					payload.incompatible?.[props.entity.id]?.reasons || [];
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newOwnConnectionDisabledReasons
+					);
+					return config.reasons;
+				});
+			} else {
+				forceUpdate();
+			}
+		};
+
+		const handleCanvasConnectionEnd = () => {
+			props.project.canvas?.enable(props.canvasElement.draggableObject, {
+				quiet: true
+			});
+
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(
+					currentReasons,
+					ALL_CONNECTION_DISABLED_REASONS
+				);
+				return config.reasons;
+			});
+		};
+
+		props.project.on(
+			'canvas-globally-enabled',
+			handleCanvasGloballyEnabled
+		);
+		props.project.on(
+			'canvas-globally-disabled',
+			handleCanvasGloballyDisabled
+		);
+		props.project.on(props.entity.id, handleEntityUpdate);
+		props.project.on('test-setup-started', handleTestSetupStarted);
+		props.project.on('execution-start', handleExecutionStart);
+		props.project.on('test-exited', handleTestExited);
+		props.project.on(
+			'canvas-connection-start',
+			handleCanvasConnectionStart
+		);
+		props.project.on('canvas-connection-end', handleCanvasConnectionEnd);
+
+		// Run when the component unmounts or when dependencies change
+		return () => {
+			props.project.off(
+				'canvas-globally-enabled',
+				handleCanvasGloballyEnabled
+			);
+			props.project.off(
+				'canvas-globally-disabled',
+				handleCanvasGloballyDisabled
+			);
+			props.project.off(props.entity.id, handleEntityUpdate);
+			props.project.off('test-setup-started', handleTestSetupStarted);
+			props.project.off('execution-start', handleExecutionStart);
+			props.project.off('test-exited', handleTestExited);
+			props.project.off(
+				'canvas-connection-start',
+				handleCanvasConnectionStart
+			);
+			props.project.off(
+				'canvas-connection-end',
+				handleCanvasConnectionEnd
+			);
+		};
+	}, [
+		props.project,
+		props.entity,
+		props.canvasElement,
+		updateKey,
+		// @ts-ignore
+		props.entity.suggestion
+	]);
+
+	useEffect(() => {
+		// Recalculate canvas object after expanding
+		props.canvasElement.draggableObject.update({});
+	}, [expandedExtendedProperties]);
+
+	const entity = props.entity;
+
+	useEffect(() => {
+		forceUpdate();
+	}, [entity.properties.map((p) => p.version).join(',')]);
+
+	const hiddenExtendedProperties = [
+		...entity.extendedProperties.filter(
+			(pro) =>
+				!pro.static ||
+				resolveValue(pro, props.project)?.type !==
+					DynamicValueTypes.Missing
+		)
+	];
+
+	const shownProperties = useMemo(
+		() => [
+			...props.entity.suggestedProperties,
+			// Move any hidden own properties that have a "missing" value to the shown properties
+			...props.entity.ownDeclaredProperties.filter(
+				(pro) =>
+					(!pro.implements.some((imp) => imp.hidden) &&
+						!pro.hidden) ||
+					(pro.static &&
+						resolveValue(pro, props.project)?.type ===
+							DynamicValueTypes.Missing)
+			),
+			...props.entity.extendedProperties.filter(
+				(pro) =>
+					pro.static &&
+					resolveValue(pro, props.project)?.type ===
+						DynamicValueTypes.Missing
+			)
+		],
+		[
+			props.entity,
+			props.project,
+			props.entity.ownDeclaredProperties,
+			updateKey
+		]
+	);
+
+	const hiddenOwnProperties = useMemo(
+		() => [
+			...props.entity.ownDeclaredProperties.filter(
+				(pro) =>
+					(!!pro.implements.some((imp) => imp.hidden) ||
+						pro.hidden) &&
+					(!pro.static ||
+						resolveValue(pro, props.project)?.type !==
+							DynamicValueTypes.Missing)
+			)
+		],
+		[
+			props.entity,
+			props.project,
+			props.entity.ownDeclaredProperties,
+			updateKey
+		]
+	);
+
+	const showNewPropertyButton =
+		!props.project.test &&
+		!disabledReasons.length &&
+		getIsInteractive(entity);
+
+	const allPropertiesImplement =
+		entity.getAllPropertiesImplements()[0] || null;
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card'
+				// ...(disabled ? ['disabled'] : []),
+			].join(' ')}
+			id={getCanvasEntityDOMId(entity)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(entity)
+			}}
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<div
+				className={[
+					'canvas-draggable-card__body',
+					...(!!disabledReasons.length
+						? ['canvas-draggable-card__body__disabled']
+						: []),
+					resolveEntityColorClass(EntityType.DefinitionEntity, {
+						state: fromDisabledReasonsToCardState(disabledReasons)
+					})
+				].join(' ')}
+			>
+				<header
+					className={[
+						'canvas-draggable-card__header__definition-entity',
+						...(!!disabledReasons.length ? ['disabled'] : [])
+					].join(' ')}
+					{...{
+						[Canvas.OBJ_ATTR_NAME]:
+							getCanvasEntityDOMId(entity) + '--header'
+					}}
+				>
+					<div className="canvas-draggable-card__header__left-block">
+						<DefinitionEntityIcon
+							entity={entity}
+							size="large"
+							project={props.project}
+							canvasElement={props.canvasElement}
+						/>
+						<span className="canvas-draggable-card__header__labels">
+							<h3>
+								{safeResolveEntityName(
+									entity,
+									props.project.logic
+								)}
+							</h3>
+							<p className="canvas-draggable-card__header__subheader">
+								{resolveCardSubheader(entity)}
+							</p>
+						</span>
+					</div>
+					<div className="canvas-draggable-card__header__actions">
+						<EntityLockedIconMenu
+							entity={entity}
+							project={props.project}
+							canvasElement={props.canvasElement}
+							parentDisabledReasons={disabledReasons}
+						/>
+						<LogicErrorIconMenu
+							entity={entity}
+							project={props.project}
+							canvasElement={props.canvasElement}
+							parentDisabledReasons={disabledReasons}
+						/>
+						<Button
+							variant="text"
+							color="grey"
+							iconEnd="fa-solid fa-ellipsis-v"
+							ref={canvasPopup.anchorRef}
+							size="small"
+							className="canvas-small-entity-card-menu-button"
+							id={`canvas-definition-entity-card-menu-button-${entity.id}`}
+							onClick={(e: any) => {
+								e.stopPropagation();
+								canvasPopup?.toggle();
+							}}
+							onDoubleClick={(
+								e: React.MouseEvent<HTMLButtonElement>
+							) => {
+								e.stopPropagation();
+								if (disabledReasons.length) return;
+								props.project?.canvas?.unselectAll();
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.DefinitionEntity}/${props.entity.id}`
+								);
+							}}
+							disabled={!!disabledReasons.length}
+						/>
+					</div>
+				</header>
+				<div
+					className={[
+						'canvas-draggable-card__content',
+						'canvas-draggable-card__content__border'
+					].join(' ')}
+				>
+					{!!hiddenExtendedProperties.length &&
+						expandedExtendedProperties && (
+							<ul className="canvas-draggable-card__property-list">
+								{hiddenExtendedProperties
+									.sort((a, b) => {
+										// Sort by `.index` property
+										if (a.index < b.index) {
+											return -1;
+										}
+										if (a.index > b.index) {
+											return 1;
+										}
+										return 0;
+									})
+									.map((property) => (
+										<DefinitionEntityProperty
+											key={property.id}
+											property={property}
+											canvasElement={props.canvasElement}
+											project={props.project}
+											entity={props.entity}
+											parentDisabledReasons={
+												disabledReasons
+											}
+										/>
+									))}
+							</ul>
+						)}
+
+					{!!hiddenExtendedProperties.length && (
+						<ExpandPropertiesIconButton
+							project={props.project}
+							draggableObject={
+								props.canvasElement.draggableObject
+							}
+							expanded={expandedExtendedProperties}
+							onClick={() => {
+								setExpandedExtendedProperties(
+									!expandedExtendedProperties
+								);
+							}}
+							id={`expand-extended-properties-icon-button--${entity.id}`}
+							tooltip={
+								expandedExtendedProperties
+									? 'Click to hide properties from the extended entities'
+									: 'Click to show properties from the extended entities'
+							}
+							tooltipPlacement="bottom"
+							style={{ marginTop: '6px' }}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					{!shownProperties.length ? (
+						<p className="canvas-draggable-card__no-properties">
+							{!entity.ownDeclaredProperties.length
+								? 'No dedicated properties yet'
+								: 'All properties hidden'}
+						</p>
+					) : (
+						<ul className="canvas-draggable-card__property-list">
+							{shownProperties
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((property) => (
+									<DefinitionEntityProperty
+										key={property.id}
+										property={property}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										entity={props.entity}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+
+					{!!hiddenOwnProperties.length &&
+						expandedOwnHiddenProperties && (
+							<ul className="canvas-draggable-card__property-list">
+								{hiddenOwnProperties
+									.sort((a, b) => {
+										// Sort by `.index` property
+										if (a.index < b.index) {
+											return -1;
+										}
+										if (a.index > b.index) {
+											return 1;
+										}
+										return 0;
+									})
+									.map((property) => (
+										<DefinitionEntityProperty
+											key={property.id}
+											property={property}
+											canvasElement={props.canvasElement}
+											project={props.project}
+											entity={props.entity}
+											parentDisabledReasons={
+												disabledReasons
+											}
+										/>
+									))}
+							</ul>
+						)}
+
+					{!!hiddenOwnProperties.length && (
+						<ExpandPropertiesIconButton
+							project={props.project}
+							draggableObject={
+								props.canvasElement.draggableObject
+							}
+							expanded={expandedOwnHiddenProperties}
+							onClick={() => {
+								setExpandedOwnHiddenProperties(
+									!expandedOwnHiddenProperties
+								);
+							}}
+							id={`expand-own-hidden-properties-icon-button--${entity.id}`}
+							tooltip={
+								expandedOwnHiddenProperties
+									? 'Click to hide properties other properties'
+									: 'Click to show properties other properties'
+							}
+							tooltipPlacement="bottom"
+							style={{ marginTop: '6px' }}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					{[...entity.suggestedMethods, ...entity.methods]
+						.sort((a, b) => {
+							// Sort by `.index` property
+							if (a.index < b.index) {
+								return -1;
+							}
+							if (a.index > b.index) {
+								return 1;
+							}
+							return 0;
+						})
+						.map((method) => (
+							<MethodDeclaration
+								key={method.id}
+								entity={method}
+								canvasElement={props.canvasElement}
+								project={props.project}
+								parentDisabledReasons={disabledReasons}
+							/>
+						))}
+
+					{showNewPropertyButton && (
+						<div className="canvas-draggable-card__action align-left">
+							<Button
+								iconStart="fa-solid fa-plus"
+								size="small"
+								disabled={!!disabledReasons.length}
+								onClick={() => {
+									const changeSet =
+										props.project.logic.addChangeSet(
+											new ChangeSet(
+												props.project.logic,
+												ProjectState.sessionAuthor,
+												new Date().toISOString(),
+												entity,
+												false,
+												StateMutationAction.AddPropertyToDef
+											)
+										);
+
+									let newEntity: PropertyState;
+
+									if (allPropertiesImplement) {
+										newEntity =
+											allPropertiesImplement.implement(
+												entity,
+												changeSet
+											);
+									} else {
+										const newEntityTransfer =
+											PropertyState.new(changeSet);
+										newEntityTransfer.parent =
+											props.entity.toReference();
+										newEntityTransfer.name =
+											findNextAvailableName(
+												'New property',
+												entity.properties
+											);
+
+										if (props.entity.abstract) {
+											newEntityTransfer.abstract = true;
+										}
+
+										newEntity =
+											createStateFromTypeAndSubscribe(
+												newEntityTransfer,
+												props.project.logic
+											) as PropertyState;
+
+										newEntity.hydrateAncestors();
+
+										changeSet.add(
+											newEntity,
+											ChangeSetEntityChangeType.Added
+										);
+
+										newEntity.addSelfToProject(changeSet);
+										newEntity.initChildren(changeSet);
+									}
+
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${EntityType.Property}/${newEntity.id}`
+									);
+
+									props.project.renderAndCloseChangeSet(
+										changeSet
+									);
+								}}
+								style={parse('background: #7e55e6;')}
+							>
+								{!!allPropertiesImplement
+									? allPropertiesImplement.name
+									: 'Property'}
+							</Button>
+						</div>
+					)}
+
+					<DynamicFooterActions
+						entity={entity}
+						project={props.project}
+						draggableObject={props.canvasElement.draggableObject}
+						parentDisabledReasons={disabledReasons}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default DefinitionEntityCard;