@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,843 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react';
+import './draggable-entity-card.css';
+import {
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityDOMId,
+	getCardColorCSSVariable,
+	getCardSupportColorCSSVariable,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+	resolveEntityColorClass,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import DynamicValue from '../dynamic-value/DynamicValue';
+import {
+	OutputMapState,
+	VariableDeclarationState,
+	EntityType,
+	lowercaseFirstLetter,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	READABLE_ENTITY_TYPES,
+	PassThroughCallableEntityState,
+	CanvasEntityConnectionDisabledReason
+} from '@elyx-code/project-logic-tree';
+import DataTypeIcon from './DataTypeIcon';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import {
+	IDynamicValue,
+	IValueInheritanceLink
+} from '../../services/editor/value-store';
+import { resolveValue } from '../../services/execution/value-resolution';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import EntityLockedIconMenu from './entity-locked-icon/EntityLockedIcon';
+import { popupNotification } from '../../popup-notification';
+
+interface IOutputMapPropertyProps {
+	outputMap: OutputMapState;
+	entity: PassThroughCallableEntityState;
+	canvasElement: CanvasEntityElement;
+	size?: 'small' | 'default';
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function OutputMapProperty(props: IOutputMapPropertyProps) {
+	if (props.project.destroyed) {
+		return null;
+	}
+
+	const outputMap = props.outputMap;
+
+	const rootElementRef = useRef(null);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const dynamicValue: IDynamicValue | null = useMemo(() => {
+		const dynamicValueResolutionResult = !!outputMap
+			? resolveValue(outputMap, props.project)
+			: null;
+
+		return dynamicValueResolutionResult;
+	}, [outputMap, props.project, updateKey]);
+
+	const resolveTooltip = () => {
+		return (
+			<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+				Click and drag to connect to another value
+			</h3>
+		);
+	};
+
+	const memoizedCanvasSocketTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-output-map-socket-tooltip-' +
+					props.outputMap.id +
+					'--popup--body'
+				}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[]
+	);
+
+	const canvasSocketTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-output-map-socket-tooltip-' +
+				props.outputMap.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-output-map-socket-tooltip-' +
+				props.outputMap.id +
+				'--popup',
+			placement: 'right',
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-output-map-socket-tooltip-' +
+				props.outputMap.id +
+				'--popup--body'
+		},
+		memoizedCanvasSocketTooltipBody,
+		[]
+	).setupHover({
+		openDelay: 600,
+		closeDelay: 400
+	});
+
+	// Recursively unfold the inheritance tree and resolve all dependencies so we subscribe them as events
+	// This function now returns a "cleanup" function
+	const subscribeValueInheritanceUpdates = useCallback(
+		(inheritanceLink: IValueInheritanceLink): (() => void) => {
+			const allCleanupFunctions: (() => void)[] = [];
+
+			// Use a stable handler for all recursive subscriptions
+			const handleInheritanceUpdate = () => {
+				forceUpdate();
+			};
+
+			const subscribeRecursive = (link: IValueInheritanceLink) => {
+				link.sources.forEach((sourceLink) => {
+					if (!sourceLink) {
+						return;
+					}
+
+					const ownerId = sourceLink.valueOwner.id;
+					props.project.on(ownerId, handleInheritanceUpdate);
+					allCleanupFunctions.push(() =>
+						props.project.off(ownerId, handleInheritanceUpdate)
+					);
+
+					const dataType = (
+						sourceLink.valueOwner as VariableDeclarationState
+					).dataType;
+					if (dataType) {
+						const dataTypeId = dataType.id;
+						props.project.on(dataTypeId, handleInheritanceUpdate);
+						allCleanupFunctions.push(() =>
+							props.project.off(
+								dataTypeId,
+								handleInheritanceUpdate
+							)
+						);
+					}
+
+					if (sourceLink.inheritanceLink) {
+						subscribeRecursive(sourceLink.inheritanceLink);
+					}
+				});
+			};
+
+			// Start the recursive subscription
+			subscribeRecursive(inheritanceLink);
+
+			// Return a single function that runs all collected cleanup functions
+			return () => {
+				allCleanupFunctions.forEach((cleanup) => cleanup());
+			};
+		},
+		[props.project, forceUpdate]
+	);
+
+	const editDisabledReasons: string[] = (() => {
+		const reasons: string[] = [];
+
+		if (!!props.outputMap.declaration?.required) {
+			reasons.push('Output is required');
+		}
+
+		if (props.outputMap.parent.type === EntityType.Loop) {
+			reasons.push(
+				`Outputs of a loop are managed by the logic in the loop's body`
+			);
+		} else if (props.outputMap.parent.type === EntityType.Search) {
+			reasons.push(
+				`The output of a search result is managed by the search statement builder and represents the chosen format of the resulting data`
+			);
+		}
+
+		return reasons;
+	})();
+
+	const canEdit = !editDisabledReasons.length;
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent>
+				<CanvasDropdownMenuCard
+					options={[
+						// {
+						// 	onClick: async () => {
+						// 		Logger.log('delete output map');
+						// 		await props.project.remove(props.outputMap.declaration.id);
+						// 		Logger.log('deleted its declaration');
+						// 		await props.project.remove(outputMap.id);
+						// 		Logger.log('deleted output map');
+						// 	},
+						// 	label: 'Delete',
+						// 	color: 'error',
+						// 	iconEnd: 'fa-solid fa-trash-can',
+						// 	// disabled: false,
+						// 	tooltip: 'Forever delete this output',
+						// 	parentCanvasObject: popup.self,
+						// 	id:
+						// 		'canvas--' +
+						// 		props.entity.type +
+						// 		'--return-map--' +
+						// 		props.outputMap.id +
+						// 		'--delete',
+						// },
+						// For now there is not use for editing an output map
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								const isInferredProperty =
+									props.outputMap.declaration.type ===
+										EntityType.Property &&
+									props.outputMap.declaration.parent?.type ===
+										EntityType.DefinitionEntity &&
+									props.outputMap.declaration.parent?.parent
+										.type === EntityType.DataType;
+
+								if (isInferredProperty) {
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${props.outputMap.declaration.type}/${props.outputMap.declaration.id}`
+									);
+									return;
+								}
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.OutputMap}/${props.outputMap.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: !canEdit,
+							tooltip: (() => {
+								const isInferredProperty =
+									props.outputMap.declaration.type ===
+										EntityType.Property &&
+									props.outputMap.declaration.parent?.type ===
+										EntityType.DefinitionEntity &&
+									props.outputMap.declaration.parent?.parent
+										.type === EntityType.DataType;
+
+								if (isInferredProperty) {
+									if (!props.outputMap.declaration.editable) {
+										return `This ${lowercaseFirstLetter(
+											READABLE_ENTITY_TYPES[
+												EntityType.Property
+											].singular
+										)} cannot be edited. Because the system need to refer to it over time.`;
+									}
+
+									return `Edit this ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[
+											EntityType.Property
+										].singular
+									)} for all variable instances`;
+								}
+
+								if (!outputMap.editable) {
+									return `This output cannot be edited. Because the system need to refer to it over time.`;
+								}
+
+								return canEdit
+									? 'Edit this output'
+									: `Cannot edit output because: ${editDisabledReasons
+											.map((r) => lowercaseFirstLetter(r))
+											.join(', ')}`;
+							})(),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'--return-map--' +
+								props.outputMap.id +
+								'--edit'
+						},
+						...(true
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											await props.project.remove(
+												props.outputMap.id
+											);
+										},
+										label: 'Force delete',
+										color: 'error',
+										iconEnd: 'fa-solid fa-trash-can',
+										tooltip: 'Forever delete this output',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--return-map--' +
+											props.outputMap.id +
+											'--force-delete'
+									}
+								]
+							: ([] as any)),
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(
+									props.outputMap.id
+								);
+								popupNotification({
+									text: `Copied ID: ${props.outputMap.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.outputMap.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.outputMap
+								);
+								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.outputMap.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[
+			props.outputMap,
+			props.entity,
+			props.project,
+			canEdit,
+			editDisabledReasons
+		]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-property-entity-card-menu-button-' +
+				props.outputMap.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-property-card-menu-button-' + props.outputMap.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'left'
+		},
+		memoizedCanvasPopupBody
+	).onBeforeShow(() => !suggestion);
+
+	useEffect(() => {
+		const handleOutputMapUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.outputMap.id] &&
+				[ConnectionNodeType.PropertyIn].includes(payload.nodeType)
+			) {
+				if (rootElementRef.current) {
+					highlightElementIndefinetly(rootElementRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (rootElementRef.current) {
+				removeHighlightElementIndefinetly(rootElementRef.current);
+				removeHighlightElementSuccess(rootElementRef.current);
+			}
+		};
+
+		const handleValueChange = (payload: any) => {
+			if (
+				payload?.owner?.id === props.outputMap?.id ||
+				payload?.owner?.id === props.outputMap?.declaration?.id
+			) {
+				forceUpdate();
+			}
+		};
+
+		props.project.on(props.outputMap.id, handleOutputMapUpdate);
+		props.project.on('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+		props.project.on('value-written', handleValueChange);
+		props.project.on('value-removed', handleValueChange);
+
+		// Call the recursive subscription function and store its cleanup function
+		// We must re-resolve dynamicValue here as it may have changed
+		// const currentDynamicValue = resolveDynamicValue();
+		let inheritanceCleanup: (() => void) | null = null;
+		if (dynamicValue?.inheritanceLink) {
+			inheritanceCleanup = subscribeValueInheritanceUpdates(
+				dynamicValue.inheritanceLink
+			);
+		}
+
+		return () => {
+			props.project.off(props.outputMap.id, handleOutputMapUpdate);
+			props.project.off('canvas-connection-start', handleConnectionStart);
+			props.project.off('canvas-connection-end', handleConnectionEnd);
+			props.project.off('value-written', handleValueChange);
+			props.project.off('value-removed', handleValueChange);
+
+			// Call the returned cleanup function from our subscription helper
+			if (inheritanceCleanup) {
+				inheritanceCleanup();
+			}
+		};
+	}, [
+		props.project,
+		props.outputMap,
+		updateKey,
+		rootElementRef,
+		dynamicValue,
+		subscribeValueInheritanceUpdates, // This is now a stable useCallback dep
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess
+	]);
+
+	// useEffect(() => {
+	// 	dynamicValue = resolveDynamicValue();
+	// });
+
+	const name = safeResolveEntityName(outputMap, props.project.logic);
+
+	const isConnected = !!outputMap?.writesValues.length;
+
+	// If the parent is a suggestion or itself is a suggestion, add the suggestion class
+	const suggestion =
+		// @ts-ignore
+		outputMap.suggestion ||
+		// @ts-ignore
+		props.entity.suggestion;
+
+	// When the entity is part of a variable declaration,
+	// which has one of their internal calls being executed,
+	// we can't connect values to it
+	const parentVarUsesInternalCalls =
+		(props.entity.type === EntityType.VariableDeclaration ||
+			props.entity.type === EntityType.VariableInstance) &&
+		props.entity.internalCalls.some((call) => !!call.calledBy.length);
+
+	const disabled =
+		((!!props.parentDisabledReasons.length || suggestion) &&
+			!props.project.onGoingConnectionCompatibleEntities?.[
+				props.outputMap.id
+			]) ||
+		parentVarUsesInternalCalls;
+
+	const dynamicValuePassDownDisabledReasons = [
+		...props.parentDisabledReasons,
+		...(parentVarUsesInternalCalls
+			? [
+					CanvasEntityConnectionDisabledReason.CannotInteractWithOutputInVariableWithInternalCalls
+				]
+			: [])
+	];
+
+	const size = props.size || 'default';
+
+	return (
+		<li
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__standard-property',
+				'canvas-draggable-card__output-property',
+				size === 'small'
+					? 'canvas-draggable-card__property__small'
+					: '',
+				disabled ? 'disabled' : ''
+			].join(' ')}
+			id={getCanvasEntityDOMId(outputMap)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(outputMap)
+			}}
+			onMouseOver={(e: any) => {
+				if (!!props.project.canvas?.activeConnectionDrawing) {
+					if (
+						props.project.onGoingConnectionCompatibleEntities?.[
+							props.outputMap.id
+						]
+					) {
+						if (
+							props.project.onGoingConnectionTarget &&
+							[ConnectionNodeType.PropertyIn].includes(
+								props.project.onGoingConnectionNodeType
+							)
+						) {
+							props.project.onGoingConnectionSource =
+								props.outputMap;
+							props.project.onGoingConnectionSourceId =
+								getCanvasEntityDOMId(outputMap);
+						}
+
+						props.project.canvas?.activeConnectionDrawing.snap(
+							getCanvasEntityDOMId(outputMap)
+						);
+
+						removeHighlightElementIndefinetly(
+							rootElementRef.current
+						);
+						highlightElementSuccess(rootElementRef.current);
+					} else if (
+						!!props.project.onGoingConnectionIncompatibleEntities?.[
+							props.outputMap.id
+						]
+					) {
+						// Read the disabled reasons and add a tooltip to the mouse
+						const reasonsMessage =
+							props.project.onGoingConnectionIncompatibleEntities?.[
+								props.outputMap.id
+							].reasons
+								.map((reason) =>
+									entityDisabledReasonToShortReadableError(
+										reason
+									)
+								)
+								.join('.\n');
+
+						props.project.canvas?.showTooltip(
+							'connection-disabled-reasons-output-map-' +
+								props.outputMap.id,
+							reasonsMessage
+						);
+						if (props.project.canvas) {
+							props.project.canvas.tooltip.style.fontSize =
+								'28px';
+							props.project.canvas.canvasElement.style.cursor =
+								'not-allowed';
+						}
+					}
+				}
+			}}
+			onMouseLeave={(e: any) => {
+				if (
+					props.project.canvas?.activeUserSetTooltipId ===
+					'connection-disabled-reasons-output-map-' +
+						props.outputMap.id
+				) {
+					props.project.canvas?.hideTooltip(
+						'connection-disabled-reasons-output-map-' +
+							props.outputMap.id
+					);
+				}
+
+				if (
+					!!props.project.canvas?.activeConnectionDrawing &&
+					props.project.onGoingConnectionCompatibleEntities?.[
+						props.outputMap.id
+					]
+				) {
+					removeHighlightElementIndefinetly(rootElementRef.current);
+					highlightElementIndefinetly(rootElementRef.current);
+
+					if (
+						props.project.canvas?.activeConnectionDrawing
+							?.snappedTo === getCanvasEntityDOMId(outputMap)
+					) {
+						props.project.canvas?.activeConnectionDrawing?.unSnap();
+					}
+
+					if (
+						props.project.onGoingConnectionSource ===
+							props.outputMap &&
+						props.project.onGoingConnectionSourceId ===
+							getCanvasEntityDOMId(outputMap) &&
+						[ConnectionNodeType.PropertyIn].includes(
+							props.project.onGoingConnectionNodeType
+						)
+					) {
+						props.project.onGoingConnectionSource = null;
+						props.project.onGoingConnectionSourceId = null;
+					}
+				}
+			}}
+		>
+			<span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+				<EntityLockedIconMenu
+					entity={outputMap}
+					project={props.project}
+					canvasElement={props.canvasElement}
+					style={{ marginRight: '6px' }}
+					parentDisabledReasons={dynamicValuePassDownDisabledReasons}
+				/>
+				<LogicErrorIconMenu
+					entity={outputMap}
+					project={props.project}
+					canvasElement={props.canvasElement}
+					style={{ marginRight: '6px' }}
+					parentDisabledReasons={dynamicValuePassDownDisabledReasons}
+				/>
+				{!disabled && !dynamicValuePassDownDisabledReasons.length && (
+					<div className="canvas-draggable-card__property-row__menu-button">
+						<Button
+							variant="text"
+							color="grey"
+							iconEnd="fa-solid fa-ellipsis-v"
+							size="small"
+							className="canvas-small-entity-card-menu-button"
+							ref={canvasPopup.anchorRef}
+							id={`canvas-property-card-menu-button-${outputMap.id}`}
+							onClick={(e: any) => {
+								e.stopPropagation();
+								canvasPopup?.toggle();
+							}}
+							onDoubleClick={(
+								e: React.MouseEvent<HTMLButtonElement>
+							) => {
+								e.stopPropagation();
+								props.project?.canvas?.unselectAll();
+								const isInferredProperty =
+									props.outputMap.declaration.type ===
+										EntityType.Property &&
+									props.outputMap.declaration.parent?.type ===
+										EntityType.DefinitionEntity &&
+									props.outputMap.declaration.parent?.parent
+										.type === EntityType.DataType;
+
+								if (isInferredProperty) {
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${props.outputMap.declaration.type}/${props.outputMap.declaration.id}`
+									);
+									return;
+								}
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.OutputMap}/${props.outputMap.id}`
+								);
+							}}
+						/>
+					</div>
+				)}
+			</span>
+			<div
+				className={[
+					'canvas-draggable-card__property__right-block',
+					...(suggestion ? ['suggestion'] : [])
+				].join(' ')}
+			>
+				<div className="canvas-draggable-card__property__labels-group">
+					<span className="canvas-draggable-card__output-property__name">
+						{name}
+					</span>
+					<DynamicValue
+						parentCanvasObject={props.canvasElement.draggableObject}
+						project={props.project}
+						valueOwner={outputMap}
+						parentDisabledReasons={
+							dynamicValuePassDownDisabledReasons
+						}
+						onDelete={(newDynamicValue) => {
+							// Delete the value
+							props.project.removeValue(newDynamicValue);
+							forceUpdate();
+						}}
+					/>
+				</div>
+				<DataTypeIcon
+					entity={outputMap}
+					size={size === 'small' ? 'small' : 'medium'}
+					color="dark-grey"
+					parentDisabledReasons={dynamicValuePassDownDisabledReasons}
+					project={props.project}
+					parentCanvasObject={props.canvasElement?.draggableObject}
+				/>
+			</div>
+			<div
+				id={`${getCanvasEntityDOMId(outputMap)}--connected-right-node`}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${getCanvasEntityDOMId(
+						outputMap
+					)}--connected-right-node`
+				}}
+				className={[
+					'canvas__small-node',
+					'canvas__small-node--position',
+					// Removed 'invisible' so the resting state stays visible
+					...(isConnected
+						? ['canvas-property__node__connected']
+						: [
+								'canvas__medium-node',
+								resolveEntityColorClass(props.entity.type)
+							])
+				].join(' ')}
+				style={{
+					position: 'absolute',
+					top: '50%',
+					right: '-9px',
+					transform: 'translateY(-50%)',
+					width: '10px',
+					height: '18px',
+					padding: 0,
+					background: 'transparent',
+					border: 'none',
+					...(props.project.canvas?.disabled
+						? { cursor: 'not-allowed', opacity: 0.9 }
+						: { cursor: 'pointer' }),
+					zIndex: 1
+				}}
+			>
+				<svg
+					width="10"
+					height="18"
+					viewBox="0 0 10 18"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					style={{
+						display: 'block',
+						filter: 'drop-shadow(5px 2px 5px rgba(0, 0, 0, 0.08))'
+					}}
+				>
+					{/* M -2 -2 : Start outside top-left
+						L 7 7   : Line to the right point
+						Q 8.5 9 7 11 : Curve the tip
+						L -2 20 : Line to outside bottom-left 
+					*/}
+					<path
+						d="M -2 -2 L 7 7 Q 8.5 9 7 11 L -2 20 Z"
+						fill={getCardSupportColorCSSVariable(props.entity)}
+						stroke={getCardColorCSSVariable(props.entity)}
+						strokeWidth="2"
+					/>
+				</svg>
+			</div>
+			{!dynamicValuePassDownDisabledReasons.length && (
+				<div
+					id={`${getCanvasEntityDOMId(outputMap)}--new-right-node`}
+					className={[
+						'canvas__small-node',
+						'canvas__small-node--position',
+						'canvas-property__node',
+						'canvas__node__new',
+						'canvas__medium-node'
+					].join(' ')}
+					ref={canvasSocketTooltip.anchorRef}
+					style={{
+						top: '50%',
+						transform: 'translateY(-50%)'
+					}}
+					onMouseDown={(e) => {
+						e.stopPropagation();
+
+						const permanentNodeElement =
+							rootElementRef.current.querySelector(
+								`#${getCanvasEntityDOMId(outputMap)}`
+							);
+
+						// Add 'canvas__node__active' class to the element
+						permanentNodeElement?.classList.add(
+							'canvas__node__active'
+						);
+
+						// Listen to the mouseup event to remove the class
+						const mouseUpListener = (e: MouseEvent) => {
+							if (permanentNodeElement) {
+								const isConnectedToMenu =
+									props.project.onGoingConnectionSource ===
+									outputMap;
+
+								if (!isConnectedToMenu) {
+									permanentNodeElement.classList.remove(
+										'canvas__node__active'
+									);
+								}
+							}
+
+							if (
+								props.project.onGoingConnectionSource !==
+								outputMap
+							) {
+								props.project.off(
+									'canvas-connection-end',
+									mouseUpListener
+								);
+							}
+						};
+
+						props.project.on(
+							'canvas-connection-end',
+							mouseUpListener
+						);
+
+						props.project.startConnection({
+							nodeType: ConnectionNodeType.PropertyOut,
+							sourceId: `${getCanvasEntityDOMId(outputMap)}`,
+							source: outputMap,
+							draggableObject: props.canvasElement.draggableObject
+						});
+					}}
+					onMouseUp={(e) => {
+						// Remove active class from connected/permanent node
+					}}
+				/>
+			)}
+		</li>
+	);
+}