@elyx-code/editor-ui 0.0.2

package/src/services/editor/ui.ts

@@ -0,0 +1,1348 @@
+import {
+	BaseEntityNames,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	ConditionState,
+	EntityType,
+	lowercaseFirstLetter,
+	OperationState,
+	PASS_THROUGH_CALLABLE_TYPES,
+	PrimitiveTypes,
+	READABLE_ENTITY_TYPES,
+	ValueDescriptorState,
+	VARIABLE_TYPES,
+	DataTypeState,
+	VariableDeclarationState,
+	EntityState,
+	CanvasEntityState,
+	FunctionCallState,
+	FunctionDeclarationState,
+	ReturnStatementState,
+	DefinitionEntityState,
+	InstalledProjectState,
+	VariableState,
+	LoopState,
+	SearchState,
+	GlobalEventState,
+	BreakStatementState,
+	ContinueStatementState,
+	checkIsMethod,
+	flattenDefinitionEntityExtensionAndImplementationTypes,
+	getExtendedDefinitionEntity,
+	BuiltInBaseEntityState,
+	resolveEntityName,
+	TerminationEntityState,
+	PassThroughCallableEntityWithOutputsState,
+	TERMINATION_TYPES,
+	CanvasEntityConnectionDisabledReason,
+	toSentenceCase,
+	ProjectState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	EntityInstanceErrorCode,
+} from '@elyx-code/project-logic-tree';
+
+export const CANVAS_ENTITY_ID_PREFIX = 'canvas-entity';
+export const CANVAS_NODE_ID_PREFIX = 'canvas-node';
+export const CANVAS_CREATE_ENTITY_MENU_ID_PREFIX = 'create-entity-menu';
+export const CALLED_BY_NODE_ID_SUFFIX = 'called-by';
+export const SUCCESS_CALLER_NODE_ID_SUFFIX = 'success-caller';
+export const ENTRY_CALLER_NODE_ID_SUFFIX = 'entry-caller';
+export const ERROR_CALLER_NODE_ID_SUFFIX = 'error-caller';
+
+// Ids for canvas DOM elements are loosely formatted
+// You can extract data from them like the type of entity and the entity id
+// But you can't rely on the format to be consistent
+// Here we check if the canvas id starts with any of the known prefixes
+export function checkIsValidCanvasIdForDestructuring(
+	canvasId: string,
+): boolean {
+	return (
+		canvasId.startsWith(CANVAS_ENTITY_ID_PREFIX) ||
+		canvasId.startsWith(CANVAS_NODE_ID_PREFIX) ||
+		canvasId.startsWith(CANVAS_CREATE_ENTITY_MENU_ID_PREFIX)
+	);
+}
+
+export function getCanvasEntityDOMId(
+	entity: EntityState,
+	debug = false,
+): string {
+	const result = `${CANVAS_ENTITY_ID_PREFIX}--${entity.id}--${entity.type}`;
+
+	if (debug) {
+		debugger;
+	}
+
+	return result;
+}
+
+export function getCanvasEntityDraggableContainerDOMId(
+	entity: EntityState,
+	debug = false,
+): string {
+	if (debug) {
+		debugger;
+	}
+	const result = `${getCanvasEntityDOMId(entity, debug)}--draggable-container`;
+
+	if (debug) {
+		debugger;
+	}
+
+	return result;
+}
+
+export function getCanvasEntityNewErrorOutputDOMId(
+	entity: EntityState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--new-error-output';
+}
+
+export function getCanvasEntityMainValueInputDOMId(
+	entity: VariableState | TerminationEntityState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--main-value-input';
+}
+
+export function getCanvasEntityMainValueOutputDOMId(
+	entity: PassThroughCallableEntityWithOutputsState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--main-value-output';
+}
+
+export function getCreateEntityMenuHeaderNodeId(): string {
+	return `${CANVAS_CREATE_ENTITY_MENU_ID_PREFIX}--header-node-id`;
+}
+
+export function getCreateEntityMenuMainValueInputNodeId() {
+	return `${CANVAS_CREATE_ENTITY_MENU_ID_PREFIX}--main-value-input-node-id`;
+}
+
+export function getCreateEntityMenuMainValueOutputNodeId(): string {
+	return `${CANVAS_CREATE_ENTITY_MENU_ID_PREFIX}--main-value-output-node-id`;
+}
+
+export function getCreateEntityMenuSuccessNodeId(): string {
+	return `${CANVAS_CREATE_ENTITY_MENU_ID_PREFIX}--success-node-id`;
+}
+
+export function getCreateEntityMenuFailureNodeId(): string {
+	return `${CANVAS_CREATE_ENTITY_MENU_ID_PREFIX}--failure-node-id`;
+}
+
+export function getMethodDeclarationDOMId(
+	entity: FunctionDeclarationState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--method-declaration';
+}
+
+export function getCanvasEntityExecutionNodeId(entity: EntityState): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--${CALLED_BY_NODE_ID_SUFFIX}`;
+}
+
+export function getCanvasEntityNewOutputButtonDOMId(
+	entity: EntityState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--new-output`;
+}
+
+export function getCanvasEntityNewInputButtonDOMId(
+	entity: EntityState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--new-input`;
+}
+
+export function getCanvasEntityNewDynamicInputButtonDOMId(
+	entity: OperationState | FunctionCallState | ConditionState,
+	inputValueDescriptor: ValueDescriptorState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--new-dynamic-input--${inputValueDescriptor.id}`;
+}
+
+export function getEntityIdFromNewDynamicInputButtonDOMId(
+	canvasId: string,
+): string {
+	if (!canvasId.startsWith(CANVAS_NODE_ID_PREFIX)) {
+		throw new Error("Canvas ID doesn't belong to a node element");
+	}
+
+	return canvasId.split('--')[1];
+}
+
+export function getInputValueDescriptorIdFromNewDynamicInputButtonDOMId(
+	canvasId: string,
+): string {
+	if (!canvasId.startsWith(CANVAS_NODE_ID_PREFIX)) {
+		throw new Error("Canvas ID doesn't belong to a node element");
+	}
+
+	return canvasId.split('--new-dynamic-input--')[1];
+}
+
+export function getCanvasEntitySuccessCallerNodeDOMId(
+	entity: EntityState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--${SUCCESS_CALLER_NODE_ID_SUFFIX}`;
+}
+
+export function getCanvasEntityEntryCallerNodeDOMId(
+	entity: EntityState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--${ENTRY_CALLER_NODE_ID_SUFFIX}`;
+}
+
+export function getCanvasEntityErrorCallerNodeDOMId(
+	entity: EntityState,
+): string {
+	return `${CANVAS_NODE_ID_PREFIX}--${entity.id}--${ERROR_CALLER_NODE_ID_SUFFIX}`;
+}
+
+export function getEntityIdFromCanvasId(canvasId: string): string {
+	if (!checkIsValidCanvasIdForDestructuring(canvasId)) {
+		throw new Error(
+			"Canvas ID doesn't belong to an element type that can be destructured",
+		);
+	}
+
+	return canvasId.split('--')[1];
+}
+
+export function getEntityTypeFromCanvasId(canvasId: string): EntityType {
+	if (!canvasId.startsWith(CANVAS_ENTITY_ID_PREFIX)) {
+		throw new Error("Canvas ID doesn't belong to an entity element");
+	}
+
+	return canvasId.split('--')[2] as EntityType;
+}
+
+export enum CardState {
+	Disabled = 'disabled',
+	Suggestion = 'suggestion',
+}
+
+export function resolveEntityColorClass(
+	entityType: EntityType,
+	options: { state?: CardState } = {},
+) {
+	return (
+		'canvas-draggable-card__backdrop__' +
+		entityType +
+		(options?.state ? `__${options.state}` : '')
+	);
+}
+
+export function getCardColorCSSVariable(entity: EntityState): string {
+	return `var(--color-background--${entity.type})`;
+}
+
+export function getCardSupportColorCSSVariable(entity: EntityState): string {
+	return `var(--color-background-support--${entity.type})`;
+}
+
+export function getBlockedBackground(
+	entityType: EntityType,
+	options: { invertedStripes?: boolean } = {},
+): string {
+	const blocked = `background: repeating-linear-gradient(135deg, var(--color-background--${entityType}), var(--color-background--${entityType}) 8px, var(--color-background-support--${entityType}) 8px, var(--color-background-support--${entityType}) 16px);`;
+	const invertedBlocked = `background: repeating-linear-gradient(135deg, var(--color-background-support--${entityType}), var(--color-background-support--${entityType}) 8px, var(--color-background--${entityType}) 8px, var(--color-background--${entityType}) 16px);`;
+
+	if (options.invertedStripes) {
+		return invertedBlocked;
+	}
+
+	return blocked;
+}
+
+/*
+	Same blink-the-stripes machinery as `getCardGradientStatement`, but for
+	headers whose normal background is a SOLID colour (set via CSS class)
+	rather than the gradient that `getCardGradientStatement` paints inline.
+	The internal-call body — `canvas-draggable-card__header--small` — is the
+	prime example: it has a single blue fill in the stylesheet, so calling
+	`getCardGradientStatement` would clobber that fill with the gradient and
+	the rest of the card would no longer match the static visual.
+
+	This helper only emits the `--unreachable-stripes-bg` custom property
+	(when blocked) and nothing else, so the CSS-class background stays in
+	place as the "base" layer and the pseudo-element overlay in
+	draggable-entity-card.css does the cross-fade on top of it.
+*/
+export function getUnreachableStripesStyle(
+	entity: EntityState,
+	options: { invertedStripes?: boolean } = {},
+): React.CSSProperties {
+	const hasBlockedReachabilityError = !!entity.errors.find(
+		(e) =>
+			e.code === EntityInstanceErrorCode.LastCalledEntityMustBeReturnEntity,
+	);
+
+	if (!hasBlockedReachabilityError) {
+		return {};
+	}
+
+	const stripes = getBlockedBackground(entity.type, options)
+		.replace(/^background:\s*/, '')
+		.replace(/;\s*$/, '');
+
+	// CSS custom-property keys aren't part of React's CSSProperties type, so
+	// cast through `Record<string, string>`. The CSS selector still matches
+	// via `[style*="--unreachable-stripes-bg"]` because React serialises
+	// custom properties verbatim into the inline `style` attribute.
+	return { '--unreachable-stripes-bg': stripes } as React.CSSProperties;
+}
+
+export function getCardGradientStatement(
+	entity: EntityState,
+	options: { state?: CardState; invertedStripes?: boolean } = {},
+): string {
+	const hasBlockedReachabilityError = !!entity.errors.find(
+		(e) =>
+			e.code === EntityInstanceErrorCode.LastCalledEntityMustBeReturnEntity,
+	);
+
+	const baseGradient = options?.state
+		? `linear-gradient(to bottom, var(--color-background-${options.state}--${entity.type}), transparent)`
+		: `linear-gradient(to bottom, var(--color-background--${entity.type}), var(--color-background-support--${entity.type}))`;
+
+	if (hasBlockedReachabilityError) {
+		// We used to fully replace the header background with the diagonal
+		// stripes (`getBlockedBackground(...)`). The new behaviour cross-fades
+		// between the regular gradient and the stripes so unreachable nodes
+		// pulse instead of sitting still — they're easier for a user to spot
+		// when scanning the canvas.
+		//
+		// To keep this change additive across every node type (every
+		// `getCardGradientStatement` caller just slaps the returned string into
+		// `style={parse(...)}`), we still emit ONE `background:` declaration —
+		// the regular gradient as the base — and additionally expose the
+		// stripes pattern via a custom CSS property `--unreachable-stripes-bg`.
+		// The CSS rule `.canvas-draggable-card__header[style*="--unreachable-stripes-bg"]::before`
+		// (in draggable-entity-card.css) layers a pseudo-element on top of the
+		// header with that custom property as its background, and animates its
+		// opacity in a loop, producing the blink. No per-component changes
+		// needed.
+		//
+		// The legacy `getBlockedBackground` is still here for any caller that
+		// wants the fully-static stripes (e.g. `UnreachableMarker` toyed with
+		// it). Removing this dual return would silently break those callers.
+		const stripes = getBlockedBackground(entity.type, options)
+			// Strip the `background: ` prefix and trailing `;` so we can hand
+			// the bare gradient value to the CSS custom property below.
+			.replace(/^background:\s*/, '')
+			.replace(/;\s*$/, '');
+		return `background: ${baseGradient}; --unreachable-stripes-bg: ${stripes};`;
+	}
+
+	return `background: ${baseGradient};`;
+}
+
+export function resolveMainValueBackgroundCSSVariable(
+	entity: PassThroughCallableEntityWithOutputsState | TerminationEntityState,
+) {
+	if (TERMINATION_TYPES.includes(entity.type)) {
+		return `var(--color-background-light--${entity.type})`;
+	}
+
+	return `var(--color-background--${entity.type})`;
+}
+
+export function fromDisabledReasonsToCardState(
+	disabledReasons: CanvasEntityDisabledReason[],
+): CardState | undefined {
+	if (disabledReasons.includes(CanvasEntityOtherDisabledReason.Suggestion)) {
+		return CardState.Suggestion;
+	} else if (!!disabledReasons.length) {
+		return CardState.Disabled;
+	}
+
+	return undefined;
+}
+
+export function resolveDatatypeIconName(dataType: DataTypeState) {
+	if (dataType.isList) {
+		return 'list';
+	}
+
+	if (dataType.entity.type === EntityType.DefinitionEntity) {
+		return 'definition-entity';
+	}
+
+	switch (dataType.entity.name) {
+		case PrimitiveTypes.Number:
+			return 'number';
+		case PrimitiveTypes.String:
+			return 'text';
+		case PrimitiveTypes.Boolean:
+			return 'boolean';
+		case PrimitiveTypes.UUID:
+			return 'uuid';
+		case PrimitiveTypes.Date:
+			return 'date-time';
+		default:
+			return 'definition-entity';
+	}
+}
+
+// Nested conditions have a single solid card background color
+// Chosen between one of the condition colors
+// Either the `--color-background--condition` or `--color-background-support--condition`
+// Conditions can be infinetly nested and their colors should alternate each level
+// This function checks how many nested levels away from the root condition this condition is
+// And based on whether it is odd or even, it returns the appropriate color
+export function resolveNestedConditionCardColor(
+	condition: ConditionState,
+): string {
+	let level = 0;
+
+	while (condition.parent.type === EntityType.Condition) {
+		condition = condition.parent;
+		level++;
+	}
+
+	return level % 2 === 0
+		? 'background: var(--color-background-support--condition);'
+		: 'background: var(--color-background--condition);';
+}
+
+// Green
+export const ENTRYPOINTS_COLOR = '#A7D489';
+export const ENTRYPOINTS_SUPPORT_COLOR = '#D5E7B8';
+export const ENTRYPOINTS_ICON_COLOR = '#A7D489';
+export const ENTRYPOINTS_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// White card red icons
+export const CUSTOM_ENTITY_COLOR = '#FFFFFF';
+export const CUSTOM_ENTITY_SUPPORT_COLOR = '#FFFFFF';
+export const CUSTOM_ENTITY_ICON_COLOR = '#F65858';
+export const CUSTOM_ENTITY_TEXT_COLOR = '#000000';
+
+export const INSTALLED_PROJECT_COLOR = '#FFFFFF';
+export const INSTALLED_PROJECT_SUPPORT_COLOR = '#FFFFFF';
+export const INSTALLED_PROJECT_ICON_COLOR = '#F65858';
+export const INSTALLED_PROJECT_TEXT_COLOR = '#000000';
+
+// White card dark purple icon
+export const PROPERTY_COLOR = '#FFFFFF';
+export const PROPERTY_SUPPORT_COLOR = '#FFFFFF';
+export const PROPERTY_ICON_COLOR = '#7e55e6';
+export const PROPERTY_TEXT_COLOR = '#000000';
+
+// White card purple icon
+export const PROJECT_COLOR = '#FFFFFF';
+export const PROJECT_SUPPORT_COLOR = '#FFFFFF';
+export const PROJECT_ICON_COLOR = '#A543E1';
+export const PROJECT_TEXT_COLOR = '#000000';
+
+// Blue
+export const FUNCTION_CALL_COLOR = '#B5E4FF';
+export const FUNCTION_CALL_SUPPORT_COLOR = '#D9F1FF';
+export const FUNCTION_CALL_ICON_COLOR = '#B5E4FF';
+export const FUNCTION_CALL_TEXT_COLOR = 'var(--color-dark-grey)';
+
+export const OPERATION_COLOR = '#B5E4FF';
+export const OPERATION_SUPPORT_COLOR = '#D9F1FF';
+export const OPERATION_ICON_COLOR = '#B5E4FF';
+export const OPERATION_TEXT_COLOR = 'var(--color-dark-grey)';
+
+export const INTERNAL_CALL_COLOR = '#B5E4FF';
+export const INTERNAL_CALL_SUPPORT_COLOR = '#D9F1FF';
+export const INTERNAL_CALL_ICON_COLOR = '#B5E4FF';
+export const INTERNAL_CALL_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// Yellow
+export const CONDITION_COLOR = '#F5D056';
+export const CONDITION_SUPPORT_COLOR = '#FFE9A1';
+export const CONDITION_ICON_COLOR = '#F5D056';
+export const CONDITION_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// Red
+export const RETURN_STATEMENT_COLOR = '#F97C7C';
+export const RETURN_STATEMENT_SUPPORT_COLOR = '#FFC4C4';
+export const RETURN_STATEMENT_ICON_COLOR = '#F97C7C';
+export const RETURN_STATEMENT_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// Grey
+export const VARIABLE_DECLARATION_COLOR = '#D4D3D4';
+export const VARIABLE_DECLARATION_SUPPORT_COLOR = '#ECECEC';
+export const VARIABLE_DECLARATION_ICON_COLOR = 'var(--color-dark-grey)';
+export const VARIABLE_DECLARATION_TEXT_COLOR = 'var(--color-dark-grey)';
+
+export const VARIABLE_INSTANCE_COLOR = '#D4D3D4';
+export const VARIABLE_INSTANCE_SUPPORT_COLOR = '#ECECEC';
+export const VARIABLE_INSTANCE_ICON_COLOR = 'var(--color-dark-grey)';
+export const VARIABLE_INSTANCE_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// Pink
+export const SEARCH_COLOR = '#FFA8E7';
+export const SEARCH_SUPPORT_COLOR = '#FFD3EE';
+export const SEARCH_ICON_COLOR = '#FFA8E7';
+export const SEARCH_TEXT_COLOR = 'var(--color-dark-grey)';
+
+// Orange
+export const LOOP_COLOR = '#FFBA90';
+export const LOOP_SUPPORT_COLOR = '#FCDBC7';
+export const LOOP_ICON_COLOR = '#FFBA90';
+export const LOOP_TEXT_COLOR = 'var(--color-dark-grey)';
+
+export const ENTITY_COLORS = {
+	[EntityType.DefinitionEntity]: CUSTOM_ENTITY_COLOR,
+	[EntityType.Property]: PROPERTY_COLOR,
+	[EntityType.FunctionDeclaration]: ENTRYPOINTS_COLOR,
+	[EntityType.FunctionCall]: FUNCTION_CALL_COLOR,
+	[EntityType.GlobalEvent]: ENTRYPOINTS_COLOR,
+	[EntityType.Project]: PROJECT_COLOR,
+	[EntityType.VariableDeclaration]: VARIABLE_DECLARATION_COLOR,
+	[EntityType.VariableInstance]: VARIABLE_INSTANCE_COLOR,
+	[EntityType.Condition]: CONDITION_COLOR,
+	[EntityType.Operation]: OPERATION_COLOR,
+	[EntityType.ReturnStatement]: RETURN_STATEMENT_COLOR,
+	[EntityType.BreakStatement]: RETURN_STATEMENT_COLOR,
+	[EntityType.ContinueStatement]: RETURN_STATEMENT_COLOR,
+	[EntityType.InstalledProject]: INSTALLED_PROJECT_COLOR,
+	[EntityType.Search]: SEARCH_COLOR,
+	[EntityType.Loop]: LOOP_COLOR,
+	[EntityType.InternalCall]: INTERNAL_CALL_COLOR,
+};
+
+export const ENTITY_SUPPORT_COLORS = {
+	[EntityType.DefinitionEntity]: CUSTOM_ENTITY_SUPPORT_COLOR,
+	[EntityType.Property]: PROPERTY_SUPPORT_COLOR,
+	[EntityType.FunctionDeclaration]: ENTRYPOINTS_SUPPORT_COLOR,
+	[EntityType.FunctionCall]: FUNCTION_CALL_SUPPORT_COLOR,
+	[EntityType.GlobalEvent]: ENTRYPOINTS_SUPPORT_COLOR,
+	[EntityType.Project]: PROJECT_SUPPORT_COLOR,
+	[EntityType.VariableDeclaration]: VARIABLE_DECLARATION_SUPPORT_COLOR,
+	[EntityType.VariableInstance]: VARIABLE_INSTANCE_SUPPORT_COLOR,
+	[EntityType.Condition]: CONDITION_SUPPORT_COLOR,
+	[EntityType.Operation]: OPERATION_SUPPORT_COLOR,
+	[EntityType.ReturnStatement]: RETURN_STATEMENT_SUPPORT_COLOR,
+	[EntityType.BreakStatement]: RETURN_STATEMENT_SUPPORT_COLOR,
+	[EntityType.ContinueStatement]: RETURN_STATEMENT_SUPPORT_COLOR,
+	[EntityType.InstalledProject]: INSTALLED_PROJECT_SUPPORT_COLOR,
+	[EntityType.Search]: SEARCH_SUPPORT_COLOR,
+	[EntityType.Loop]: LOOP_SUPPORT_COLOR,
+	[EntityType.InternalCall]: INTERNAL_CALL_SUPPORT_COLOR,
+};
+
+export const ENTITY_ICON_COLORS = {
+	[EntityType.DefinitionEntity]: CUSTOM_ENTITY_ICON_COLOR,
+	[EntityType.Property]: PROPERTY_ICON_COLOR,
+	[EntityType.FunctionDeclaration]: ENTRYPOINTS_ICON_COLOR,
+	[EntityType.FunctionCall]: FUNCTION_CALL_ICON_COLOR,
+	[EntityType.GlobalEvent]: ENTRYPOINTS_ICON_COLOR,
+	[EntityType.Project]: PROJECT_ICON_COLOR,
+	[EntityType.VariableDeclaration]: VARIABLE_DECLARATION_ICON_COLOR,
+	[EntityType.VariableInstance]: VARIABLE_INSTANCE_ICON_COLOR,
+	[EntityType.Condition]: CONDITION_ICON_COLOR,
+	[EntityType.Operation]: OPERATION_ICON_COLOR,
+	[EntityType.ReturnStatement]: RETURN_STATEMENT_ICON_COLOR,
+	[EntityType.BreakStatement]: RETURN_STATEMENT_ICON_COLOR,
+	[EntityType.ContinueStatement]: RETURN_STATEMENT_ICON_COLOR,
+	[EntityType.InstalledProject]: INSTALLED_PROJECT_ICON_COLOR,
+	[EntityType.Search]: SEARCH_ICON_COLOR,
+	[EntityType.Loop]: LOOP_ICON_COLOR,
+	[EntityType.InternalCall]: INTERNAL_CALL_ICON_COLOR,
+};
+
+// Entities font-awesome icon names
+export const ENTITY_FA_ICON_NAMES = {
+	[EntityType.DefinitionEntity]: 'rectangle-list',
+	[EntityType.Property]: 't',
+	// @ts-ignore
+	[EntityType.FunctionDeclaration]: 'trowel-bricks' || 'cube' || 'right-long',
+	// @ts-ignore
+	[EntityType.FunctionCall]: 'trowel-bricks' || 'cube' || 'right-long',
+	// @ts-ignore
+	[EntityType.InternalCall]: 'trowel-bricks' || 'cube' || 'right-long',
+	[EntityType.GlobalEvent]: 'ear-listen',
+	[EntityType.Project]: 'project-diagram',
+	[EntityType.VariableDeclaration]: 'database',
+	[EntityType.VariableInstance]: 'database',
+	[EntityType.Condition]: 'code-branch',
+	// @ts-ignore
+	[EntityType.Operation]: 'cogs' || 'calculator',
+	// @ts-ignore
+	[EntityType.ActionDescriptor]: 'cogs' || 'calculator',
+	[EntityType.ReturnStatement]: 'right-from-bracket',
+	[EntityType.BreakStatement]: 'right-from-bracket',
+	[EntityType.ContinueStatement]: 'forward-step',
+	[EntityType.InstalledProject]: 'project-diagram',
+	[EntityType.Search]: 'search',
+	[EntityType.Loop]: 'sync',
+};
+
+export const PLAY_FA_ICON_NAME = 'play';
+export const STOP_FA_ICON_NAME = 'stop';
+export const LOOP_FA_ICON_NAME = 'sync';
+
+export const ENTITY_TEST_FA_ICON_NAMES = {
+	[EntityType.DefinitionEntity]: PLAY_FA_ICON_NAME,
+	[EntityType.FunctionDeclaration]: PLAY_FA_ICON_NAME,
+	[EntityType.FunctionCall]: PLAY_FA_ICON_NAME,
+	[EntityType.InternalCall]: PLAY_FA_ICON_NAME,
+	[EntityType.GlobalEvent]: PLAY_FA_ICON_NAME,
+	[EntityType.VariableDeclaration]: PLAY_FA_ICON_NAME,
+	[EntityType.VariableInstance]: PLAY_FA_ICON_NAME,
+	[EntityType.Condition]: PLAY_FA_ICON_NAME,
+	[EntityType.Operation]: PLAY_FA_ICON_NAME,
+	[EntityType.InstalledProject]: PLAY_FA_ICON_NAME,
+	[EntityType.Search]: PLAY_FA_ICON_NAME,
+	[EntityType.ReturnStatement]: STOP_FA_ICON_NAME,
+	[EntityType.BreakStatement]: STOP_FA_ICON_NAME,
+	[EntityType.ContinueStatement]: STOP_FA_ICON_NAME,
+	[EntityType.Loop]: LOOP_FA_ICON_NAME,
+};
+
+export function resolveDefinitionEntitySubheader(
+	entity: DefinitionEntityState,
+): string {
+	// Base on the base logic entity that they extend, derive a human readable subheader text
+	const lowestDefinitionEntity = getExtendedDefinitionEntity(entity);
+
+	if (!lowestDefinitionEntity) {
+		const baseEntityTypes =
+			flattenDefinitionEntityExtensionAndImplementationTypes(entity);
+
+		if (baseEntityTypes.includes(BaseEntityNames.HTTP_ENDPOINT)) {
+			return 'HTTP endpoint';
+		} else if (baseEntityTypes.includes(BaseEntityNames.PERSISTED_ENTITY)) {
+			return 'Persisted entity';
+		} else if (baseEntityTypes.includes(BaseEntityNames.CRON_JOB)) {
+			return 'Scheduled execution';
+		} else if (baseEntityTypes.includes(BaseEntityNames.RELATIONAL_DATABASE)) {
+			return 'Relational database';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.AIRTABLE_AUTH_CONNECTION)
+		) {
+			return 'Airtable account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.GOOGLE_AUTH_CONNECTION)
+		) {
+			return 'Google account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.SLACK_AUTH_CONNECTION)
+		) {
+			return 'Slack account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.ATLASSIAN_AUTH_CONNECTION)
+		) {
+			return 'Atlassian account connection';
+		} else if (baseEntityTypes.includes(BaseEntityNames.JIRA_AUTH_CONNECTION)) {
+			return 'Jira account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.MICROSOFT_AUTH_CONNECTION)
+		) {
+			return 'Microsoft account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.OPENAI_AUTH_CONNECTION)
+		) {
+			return 'OpenAI account connection';
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION)
+		) {
+			return 'External account connection';
+		}
+	}
+
+	if (!!lowestDefinitionEntity) {
+		let baseName =
+			'Extension of ' +
+			resolveEntityName(
+				lowestDefinitionEntity,
+				lowestDefinitionEntity.project,
+			) +
+			' entity';
+
+		let baseNameLowerFirst = lowercaseFirstLetter(baseName);
+
+		const baseEntityTypes =
+			flattenDefinitionEntityExtensionAndImplementationTypes(entity);
+
+		if (baseEntityTypes.includes(BaseEntityNames.HTTP_ENDPOINT)) {
+			return (
+				'HTTP endpoint' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (baseEntityTypes.includes(BaseEntityNames.PERSISTED_ENTITY)) {
+			return (
+				'Persisted entity' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (baseEntityTypes.includes(BaseEntityNames.CRON_JOB)) {
+			return (
+				'Scheduled execution' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (baseEntityTypes.includes(BaseEntityNames.RELATIONAL_DATABASE)) {
+			return (
+				'Relational database' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.AIRTABLE_AUTH_CONNECTION)
+		) {
+			return (
+				'Airtable account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.GOOGLE_AUTH_CONNECTION)
+		) {
+			return (
+				'Google account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.SLACK_AUTH_CONNECTION)
+		) {
+			return (
+				'Slack account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.ATLASSIAN_AUTH_CONNECTION)
+		) {
+			return (
+				'Atlassian account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (baseEntityTypes.includes(BaseEntityNames.JIRA_AUTH_CONNECTION)) {
+			return (
+				'Jira account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.MICROSOFT_AUTH_CONNECTION)
+		) {
+			return (
+				'Microsoft account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.OPENAI_AUTH_CONNECTION)
+		) {
+			return (
+				'OpenAI account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		} else if (
+			baseEntityTypes.includes(BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION)
+		) {
+			return (
+				'External account connection' +
+				(!!baseNameLowerFirst ? ', ' + baseNameLowerFirst : '')
+			);
+		}
+
+		return baseName;
+	}
+
+	let prefix: string = '';
+
+	if (entity.abstract) {
+		prefix = 'Template ';
+	}
+
+	if (entity.static) {
+		prefix += !!prefix ? ' single copy ' : 'Single copy ';
+	}
+
+	return !!prefix ? prefix + 'definition' : 'Definition';
+}
+
+export function resolveMethodCardSubheader(
+	entity: FunctionDeclarationState,
+): string {
+	if (
+		entity.parent.type === EntityType.DefinitionEntity ||
+		entity.parent.type === EntityType.InstalledProject
+	) {
+		return (
+			'Internal action of ' + resolveEntityName(entity.parent, entity.project)
+		);
+	} else if (entity.parent.type === EntityType.Loop) {
+		return 'Action repeated on every iteration';
+	}
+
+	return 'Internal action of entity';
+}
+
+export function resolveFunctionDeclarationCardSubheader(
+	entity: FunctionDeclarationState,
+): string {
+	const isMethod = checkIsMethod(entity);
+
+	if (isMethod) {
+		return resolveMethodCardSubheader(entity);
+	}
+
+	return 'Custom trigger';
+}
+
+export function resolveCardSubheader(entity: CanvasEntityState): string {
+	switch (entity.type) {
+		case EntityType.DefinitionEntity: {
+			return resolveDefinitionEntitySubheader(entity);
+		}
+		case EntityType.FunctionDeclaration: {
+			return resolveFunctionDeclarationCardSubheader(entity);
+		}
+	}
+
+	return READABLE_ENTITY_TYPES[entity.type]?.singular;
+}
+
+export function resolveEntitySubheader(
+	entity:
+		| VariableState
+		| DefinitionEntityState
+		| LoopState
+		| SearchState
+		| FunctionDeclarationState
+		| GlobalEventState
+		| ReturnStatementState
+		| BreakStatementState
+		| ContinueStatementState
+		| BuiltInBaseEntityState,
+): string {
+	switch (entity.type) {
+		case EntityType.DefinitionEntity: {
+			return resolveDefinitionEntitySubheader(entity);
+		}
+		case EntityType.FunctionDeclaration: {
+			return resolveFunctionDeclarationCardSubheader(entity);
+		}
+	}
+
+	return READABLE_ENTITY_TYPES[entity.type]?.singular;
+}
+
+// Pixels depend on zoom level for all the value below. Therefore these are just an approximation
+export const CANVAS_SIZE = 40000;
+export const CANVAS_CARD_WIDTH = 280;
+
+// This is an approximation and the actual height of the card could be calculated based on the number of properties or something else
+export const CANVAS_COMPLEX_CARD_HEIGHT = 300;
+export const CANVAS_SIMPLE_CARD_HEIGHT = 65;
+export const CANVAS_CARD_HEADER_CENTER_HEIGHT = 32;
+
+export const PROPERTY_HEIGHT = 39;
+export const NESTED_PROPERTY_HEIGHT = 26;
+export const STATIC_PROPERTY_HEIGHT = 49;
+export const MAIN_VALUE_PROPERTY_HEADER_HEIGHT = 44;
+export const MAIN_VALUE_SUB_PROPERTY_HEIGHT = 35;
+export const ERROR_PROPERTY_HEIGHT = 52;
+export const CARD_PROPERTIES_SECTION_SINGLE_PADDING = 10;
+export const CARD_PROPERTIES_SECTION_PADDING =
+	CARD_PROPERTIES_SECTION_SINGLE_PADDING * 2;
+export const CARD_FOOTER_HEIGHT = 38;
+
+export const CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS = 90;
+export const CANVAS_HORIZONTAL_BUFFER_BETWEEN_CARDS = 270;
+
+// This is some base coordinate that we will use to offset the cards from the top left corner of the canvas
+export const CANVAS_BASE_X = CANVAS_SIZE / 2 + 120;
+export const CANVAS_BASE_Y = CANVAS_SIZE / 2 + 180;
+
+export function calculateMethodCardSize(entity: FunctionDeclarationState): {
+	height: number;
+	width: number;
+} {
+	const entityCardWidth = 280;
+
+	let height: number =
+		CANVAS_CARD_HEADER_CENTER_HEIGHT +
+		MAIN_VALUE_PROPERTY_HEADER_HEIGHT +
+		CARD_FOOTER_HEIGHT +
+		CARD_PROPERTIES_SECTION_SINGLE_PADDING;
+
+	const properties: any[] = [...entity.inputs];
+
+	if (properties.length) {
+		height += CARD_PROPERTIES_SECTION_PADDING;
+
+		properties.forEach(() => {
+			height += NESTED_PROPERTY_HEIGHT;
+		});
+	}
+
+	return {
+		height: height,
+		width: entityCardWidth,
+	};
+}
+
+export function calculateNestedConditionCardSize(entity: ConditionState): {
+	height: number;
+	width: number;
+} {
+	const entityCardWidth = 280;
+
+	let height: number =
+		CANVAS_CARD_HEADER_CENTER_HEIGHT +
+		MAIN_VALUE_PROPERTY_HEADER_HEIGHT +
+		CARD_FOOTER_HEIGHT +
+		CARD_PROPERTIES_SECTION_SINGLE_PADDING;
+
+	const properties: any[] = [...entity.inputs];
+
+	if (properties.length) {
+		height += CARD_PROPERTIES_SECTION_PADDING;
+
+		properties.forEach(() => {
+			height += NESTED_PROPERTY_HEIGHT;
+		});
+	}
+
+	if (entity.andChildrenGroup) {
+		height += CARD_PROPERTIES_SECTION_PADDING;
+
+		entity.andChildrenGroup.forEach((c) => {
+			height += calculateNestedConditionCardSize(c).height;
+		});
+	}
+
+	if (entity.orChildrenGroup) {
+		height += CARD_PROPERTIES_SECTION_PADDING;
+
+		entity.orChildrenGroup.forEach((c) => {
+			height += calculateNestedConditionCardSize(c).height;
+		});
+	}
+
+	if (
+		entity.declaration?.id ===
+			BUILT_IN_BASE_ENTITY_IDS.condition['condition-group-and'].id ||
+		entity.declaration?.id ===
+			BUILT_IN_BASE_ENTITY_IDS.condition['condition-group-or'].id
+	) {
+		// For the new nested condition button
+		height += CARD_FOOTER_HEIGHT;
+	}
+
+	return {
+		height: height,
+		width: entityCardWidth,
+	};
+}
+
+export function calculateCardSize(entity: CanvasEntityState): {
+	height: number;
+	width: number;
+} {
+	const entityCardWidth = 280;
+
+	let height: number = CANVAS_SIMPLE_CARD_HEIGHT;
+
+	// Internal card properties which are displayed inside the parent entity in the canvas
+	const inputProperties: any[] = [];
+
+	// Entities with properties
+	if ([EntityType.DefinitionEntity].includes(entity.type)) {
+		const properties = [
+			...((entity as DefinitionEntityState).suggestedProperties || []),
+			...((entity as DefinitionEntityState).properties || []),
+		];
+
+		if (properties.length) {
+			height += CARD_PROPERTIES_SECTION_PADDING;
+
+			properties.forEach((property) => {
+				height += property.static ? STATIC_PROPERTY_HEIGHT : PROPERTY_HEIGHT;
+			});
+		}
+	}
+
+	// Entities with methods
+	if (
+		[
+			EntityType.DefinitionEntity,
+			EntityType.InstalledProject,
+			EntityType.Loop,
+		].includes(entity.type)
+	) {
+		const methods = [
+			...((entity as DefinitionEntityState)?.suggestedMethods || []),
+			...((entity as DefinitionEntityState).methods || []),
+			...((entity as InstalledProjectState).functions || []),
+			...((entity as LoopState).body ? [(entity as LoopState).body] : []),
+		];
+
+		if (methods.length) {
+			height += CARD_PROPERTIES_SECTION_PADDING;
+
+			methods.forEach((method) => {
+				const methodSize = calculateMethodCardSize(method);
+				height += methodSize.height;
+			});
+		}
+	}
+
+	if (PASS_THROUGH_CALLABLE_TYPES.includes(entity.type)) {
+		inputProperties.push(
+			...(((entity as FunctionCallState).inputs || []).flatMap((input) => [
+				input,
+			]) || []),
+		);
+
+		// For the value writting main output
+		height += CARD_PROPERTIES_SECTION_PADDING;
+		height += MAIN_VALUE_PROPERTY_HEADER_HEIGHT;
+
+		if (!!(entity as FunctionCallState).error) {
+			height += ERROR_PROPERTY_HEIGHT;
+		}
+	} else if (
+		[
+			EntityType.ReturnStatement,
+			EntityType.BreakStatement,
+			EntityType.ContinueStatement,
+		].includes(entity.type)
+	) {
+		inputProperties.push(...((entity as ReturnStatementState).outputs || []));
+
+		if (!!(entity as ReturnStatementState).throws) {
+			height += ERROR_PROPERTY_HEIGHT;
+		}
+	} else if (entity.type === EntityType.Condition) {
+		inputProperties.push(entity.inputs[0]);
+
+		if (entity.inputs[1]) {
+			inputProperties.push(entity.inputs[1]);
+		}
+
+		if (
+			entity.declaration?.id ===
+				BUILT_IN_BASE_ENTITY_IDS.condition['condition-group-and'].id ||
+			entity.declaration?.id ===
+				BUILT_IN_BASE_ENTITY_IDS.condition['condition-group-or'].id
+		) {
+			// For the new nested condition button
+			height += CARD_FOOTER_HEIGHT;
+		}
+
+		if (entity.andChildrenGroup) {
+			height += CARD_PROPERTIES_SECTION_PADDING;
+
+			entity.andChildrenGroup.forEach((c) => {
+				height += calculateNestedConditionCardSize(c).height;
+			});
+		}
+
+		if (entity.orChildrenGroup) {
+			height += CARD_PROPERTIES_SECTION_PADDING;
+
+			entity.orChildrenGroup.forEach((c) => {
+				height += calculateNestedConditionCardSize(c).height;
+			});
+		}
+	}
+
+	const numberOfInputProperties = inputProperties.length;
+
+	if (numberOfInputProperties) {
+		height += numberOfInputProperties * PROPERTY_HEIGHT;
+		// Padding for property area
+		height += CARD_PROPERTIES_SECTION_PADDING;
+	}
+
+	// Handles all the events
+	const outputProperties: any[] = [];
+
+	if (
+		entity.type === EntityType.FunctionDeclaration ||
+		entity.type === EntityType.GlobalEvent
+	) {
+		outputProperties.push(
+			...((entity as FunctionDeclarationState).inputs || []),
+		);
+	} else if (PASS_THROUGH_CALLABLE_TYPES.includes(entity.type)) {
+		outputProperties.push(...((entity as FunctionCallState).outputs || []));
+	}
+
+	if (VARIABLE_TYPES.includes(entity.type)) {
+		// Handle main value reading and writing
+		height += CARD_PROPERTIES_SECTION_PADDING;
+		height += MAIN_VALUE_PROPERTY_HEADER_HEIGHT;
+
+		// Handle internal calls
+		if ((entity as VariableDeclarationState).usedInternalCalls.length) {
+			(entity as VariableDeclarationState).usedInternalCalls.forEach((ic) => {
+				height += ERROR_PROPERTY_HEIGHT + CARD_PROPERTIES_SECTION_PADDING;
+
+				height += ic.inputs.length * NESTED_PROPERTY_HEIGHT;
+				height += ic.outputs.length * NESTED_PROPERTY_HEIGHT;
+			});
+		}
+
+		const variableDataType = (entity as VariableDeclarationState).getDataType(
+			null,
+		);
+
+		if (!variableDataType || variableDataType.canModifyObjectStructure()) {
+			// For the new input button
+			height += CARD_FOOTER_HEIGHT;
+		}
+	}
+
+	if (entity.type === EntityType.Search) {
+		// For the new input button
+		height += CARD_FOOTER_HEIGHT;
+	}
+
+	const numberOfOutputProperties = outputProperties.length;
+
+	if (numberOfOutputProperties) {
+		height += numberOfOutputProperties * PROPERTY_HEIGHT;
+		// Padding for property area
+		height += CARD_PROPERTIES_SECTION_PADDING;
+	}
+
+	// Entities that have a footer button
+	if (
+		[
+			EntityType.DefinitionEntity,
+			EntityType.FunctionDeclaration,
+			EntityType.ReturnStatement,
+			EntityType.BreakStatement,
+			EntityType.ContinueStatement,
+		].includes(entity.type)
+	) {
+		height += CARD_FOOTER_HEIGHT;
+	}
+
+	const entityCardHeight = height;
+
+	return {
+		height: entityCardHeight,
+		width: entityCardWidth,
+	};
+}
+
+export function errorCodeToMessage(errorCode: string): string {
+	// Split the error code by dash to break it into words
+	const words = errorCode.split('-');
+
+	// Capitalize the first letter of each word
+	const humanReadable = words
+		.map((word, index) => {
+			// Capitalize the first word completely (for sentence readability)
+			if (index === 0) {
+				return word.charAt(0).toUpperCase() + word.slice(1);
+			}
+			// Lowercase the rest of the words
+			return word.toLowerCase();
+		})
+		.join(' '); // Join the words with spaces in between
+
+	// Return the formatted message
+	return `${humanReadable}.`;
+}
+
+export function highlightElement(element: HTMLElement) {
+	element.classList.add('highlighted');
+
+	const handleAnimationEnd = () => {
+		element.classList.remove('highlighted');
+		element.removeEventListener('animationend', handleAnimationEnd);
+	};
+
+	element.addEventListener('animationend', handleAnimationEnd);
+}
+
+export function highlightElementIndefinetly(element: HTMLElement) {
+	element.classList.add('highlighted-infinate');
+}
+
+export function removeHighlightElementIndefinetly(element: HTMLElement) {
+	element.classList.remove('highlighted-infinate');
+}
+
+// Success highlight
+export function highlightElementSuccess(element: HTMLElement) {
+	element.classList.add('highlighted-success');
+}
+
+export function removeHighlightElementSuccess(element: HTMLElement) {
+	element.classList.remove('highlighted-success');
+}
+
+export function highlighOverlappingElements(
+	elementA: HTMLElement,
+	elementB: HTMLElement,
+) {
+	elementA.classList.add('errored');
+	elementB.classList.add('errored');
+
+	const handleElementAAnimationEnd = () => {
+		elementA.classList.remove('errored');
+		elementA.removeEventListener('animationend', handleElementAAnimationEnd);
+	};
+
+	elementA.addEventListener('animationend', handleElementAAnimationEnd);
+
+	const handleElementBAnimationEnd = () => {
+		elementB.classList.remove('errored');
+		elementB.removeEventListener('animationend', handleElementBAnimationEnd);
+	};
+
+	elementB.addEventListener('animationend', handleElementBAnimationEnd);
+}
+
+export function entityDisabledReasonToShortReadableError(
+	code: CanvasEntityConnectionDisabledReason | string,
+): string {
+	const errorCallerOnly = (code || '').startsWith('error-caller-only--');
+	const sanitizedCode = errorCallerOnly
+		? code.replace('error-caller-only--', '')
+		: code;
+
+	switch (sanitizedCode) {
+		case CanvasEntityConnectionDisabledReason.CallIsInHigherScope:
+			return 'In a higher scope';
+		case CanvasEntityConnectionDisabledReason.CallIsInLowerScope:
+			return 'In a lower scope';
+		case CanvasEntityConnectionDisabledReason.CallerIsInHigherScope:
+			return 'Caller is in a higher scope';
+		case CanvasEntityConnectionDisabledReason.CallerIsInLowerScope:
+			return 'Caller is in a lower scope';
+		case CanvasEntityConnectionDisabledReason.CannotBeCalledByChildren:
+			return 'Cannot be called by children';
+		case CanvasEntityConnectionDisabledReason.CannotCallAncestor:
+			return 'Cannot call ancestor';
+		case CanvasEntityConnectionDisabledReason.CannotConnectToItself:
+			return 'Cannot connect to itself';
+		case CanvasEntityConnectionDisabledReason.CannotReadMoreThanOneValue:
+			return 'Cannot read more than one value';
+		case CanvasEntityConnectionDisabledReason.CannotReadValueFromChildren:
+			return 'Cannot read value from entities executed after itself';
+		case CanvasEntityConnectionDisabledReason.CannotWriteValueToAncestor:
+			return 'Cannot write value to ancestor';
+		case CanvasEntityOtherDisabledReason.Suggestion:
+			return 'Suggestion';
+		case CanvasEntityConnectionDisabledReason.ContinueOrBreakStatementCalledFromOutsideLoop:
+			return 'Cannot be called from outside loop';
+		case CanvasEntityConnectionDisabledReason.DataTypesNotCompatible:
+			return 'Data types not compatible';
+		case CanvasEntityConnectionDisabledReason.ElementInLoopBodyCallingOutsideLoop:
+			return 'Cannot call outside loop';
+		case CanvasEntityConnectionDisabledReason.ErrorOututMapCannotBeConnectedToParentSuccessBranchCallees:
+			return 'Error cannot be connected to success branch';
+		case CanvasEntityConnectionDisabledReason.ExecutionsAlreadyConnected:
+			return 'Executions already connected';
+		case CanvasEntityConnectionDisabledReason.IsNotValueReadingEntity:
+			return 'Is not a value reading entity';
+		case CanvasEntityConnectionDisabledReason.IsNotValueWritingEntity:
+			return 'Is not a value writing entity';
+		case CanvasEntityConnectionDisabledReason.NotInScope:
+			return 'Not in a compatible scope';
+		case CanvasEntityConnectionDisabledReason.OtherIncompatibleScopeReason:
+			return 'Incompatible scope';
+		case CanvasEntityConnectionDisabledReason.SiblingInternalCallAlreadyUsedInParentVariable:
+			return 'Internal call already used in parent variable';
+		case CanvasEntityConnectionDisabledReason.SuccessOutputMapCannotBeConnectedToParentErrorBranchCallees:
+			return 'Success cannot be connected to error branch';
+		case CanvasEntityConnectionDisabledReason.ValuesAlreadyConnected:
+			return 'Values already connected';
+		case CanvasEntityConnectionDisabledReason.CannotInteractWithInputInVariableWithInternalCalls:
+			return 'Cannot interact with input in variable with internal calls';
+		case CanvasEntityConnectionDisabledReason.CannotInteractWithOutputInVariableWithInternalCalls:
+			return 'Cannot interact with output in variable with internal calls';
+		case CanvasEntityOtherDisabledReason.CanvasGloballyDisabled:
+			return 'Canvas is globally disabled';
+		case CanvasEntityConnectionDisabledReason.PropertyIsConstantItsValueCantBeReset:
+			return "Property is constant, its value can't be reset";
+		case CanvasEntityConnectionDisabledReason.CannotWriteValueOfGlobalVariableDeclaration:
+			return 'Cannot write value of global variable declaration';
+		case CanvasEntityConnectionDisabledReason.CannotReSetValueOfConstantVariable:
+			return 'Cannot re-set value of constant variable';
+		case CanvasEntityConnectionDisabledReason.CannotConnectToOwnNode:
+			return 'It is part of the same node';
+		case CanvasEntityConnectionDisabledReason.CalledByErrorMustBePassThroughCallable:
+			return 'Called by error must be pass-through callable';
+		case CanvasEntityConnectionDisabledReason.CannotChangeScopeBecauseItCallsOtherEntities:
+			return 'Cannot change scope because it calls other entities in its current scope';
+		case CanvasEntityConnectionDisabledReason.CannotChangeScopeBecauseItIsAlreadyCalledByOtherEntitiesInDifferentScope:
+			return 'Cannot change scope because it is already called by other entities in a different scope';
+		case CanvasEntityConnectionDisabledReason.VariableDeclarationCannotBeMovedToLowerScopeBecauseInstancesUsage:
+			return 'Variable declaration cannot be moved to lower scope because its instances are used in the current or different incompatible lower scope';
+		case CanvasEntityConnectionDisabledReason.CalledBySourceMustBeCallerEntity:
+			return 'Not a caller type';
+		case CanvasEntityConnectionDisabledReason.CalledByErrorCannotBeConnectedToEntitiesCalledByOwnSuccessBranch:
+			return 'Already connected to the success branch from a common origin caller';
+		case CanvasEntityConnectionDisabledReason.CalledBySuccessCannotBeConnectedToEntitiesCalledByOwnErrorBranch:
+			return 'Already connected to the error branch from a common origin caller';
+		case CanvasEntityConnectionDisabledReason.RedundantCall:
+			return 'Redundant call. Already connected further down the execution path';
+		case CanvasEntityConnectionDisabledReason.CannotBeCalledBeforeDeclaration:
+			return 'Cannot be called before declaration';
+		case CanvasEntityConnectionDisabledReason.CannotBeCalledInParallelBranchToDeclaration:
+			return 'Cannot be called in parallel branch to declaration';
+		case CanvasEntityConnectionDisabledReason.CannotBeHigherScopeThanDeclaration:
+			return 'Cannot be in a higher scope than declaration';
+		case CanvasEntityConnectionDisabledReason.CannotCallGlobalVariableDeclaration:
+			return 'Cannot call global variable declaration';
+		case CanvasEntityConnectionDisabledReason.EntityAlreadyCalledBySuccessCannotBeConnectedToUnrelatedErrorBranch: {
+			if (errorCallerOnly) {
+				return 'Cannot connect error: Already connected to a success branch from a common origin caller';
+			}
+
+			return 'Already connected to a success branch from a common origin caller';
+		}
+		default:
+			return toSentenceCase(code || '');
+	}
+}
+
+export function safeResolveEntityName(
+	entity: EntityState,
+	project: ProjectState,
+): string {
+	try {
+		return resolveEntityName(entity, project);
+	} catch (e) {
+		return 'Unknown';
+	}
+}
+
+/**
+ * Calculates how far down the top of the parent definition entity a method starts
+ * Methods are function-declaration entities nested inside definition-entities
+ * But their distance to the top changes based on their index among all other rendered methods as well as all properties the parent has.
+ */
+export function calculateVerticalOffsetForMethod(
+	method: FunctionDeclarationState,
+): { offset: number } {
+	let offset = 0;
+
+	if (method.parent.type !== EntityType.DefinitionEntity) {
+		return { offset };
+	}
+
+	const parent = method.parent as DefinitionEntityState;
+
+	const selfIndexAmongSiblings = parent.methods.findIndex(
+		(m) => m.id === method.id,
+	);
+
+	const methodsBeforeSelf = parent.methods.slice(0, selfIndexAmongSiblings);
+
+	methodsBeforeSelf.forEach((method) => {
+		const methodSize = calculateMethodCardSize(method);
+		offset += methodSize.height;
+	});
+
+	if (parent.properties.length || parent.suggestedProperties.length) {
+		offset += CARD_PROPERTIES_SECTION_PADDING;
+
+		parent.suggestedProperties.forEach(() => {
+			offset += PROPERTY_HEIGHT;
+		});
+
+		parent.properties.forEach(() => {
+			offset += PROPERTY_HEIGHT;
+		});
+	}
+
+	return { offset };
+}