@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/input-map/InputMap.tsx

@@ -0,0 +1,635 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	DataTypeState,
+	EntityId,
+	EntityType,
+	ProjectState,
+	resolveEntityName,
+	InputMapState,
+	getParentCanvasEntity,
+	READABLE_ENTITY_TYPES,
+	EntityInstanceErrorCode,
+	lowercaseFirstLetter,
+	StateMutationErrorCode,
+	toSentenceCase,
+	safeResolveEntityName,
+	InputMapParentChildRelation,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import {
+	Alert,
+	TextField,
+	Collapse,
+	Tooltip as MuiTooltip,
+} from '@mui/material';
+import { EditorService } from '../../../services/editor';
+import DataTypeBuilder, {
+	AllowedDataTypeListTypes,
+	ILiteralValueOption,
+} from '../../data-type/DataTypeBuilder';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import Button from '../../../lib/button/Button';
+import { useParams } from 'react-router-dom';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import DynamicValueEntry from '../../dynamic-value/DynamicValueEntry';
+import { getCanvasEntityDraggableContainerDOMId } from '../../../services/editor/ui';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+import { DataTypeBuilderOption } from '../../../services/editor/utils';
+import { debounce } from '../../../utils';
+
+export interface IInputMapProps {
+	project: EditorService;
+	entity?: InputMapState;
+	onClose?: (e: any) => void;
+}
+
+export enum InputMapError {
+	IncompleteDataType = 'incomplete-data-type',
+}
+
+export function fromInputMapErrorToReadableMessage(
+	error: InputMapError,
+): string {
+	switch (error) {
+		// case InputMapError.IncompleteDataType:
+		// 	return 'The composition of the data type is incomplete. Please fill in all required fields on each data type element.';
+		default:
+			return toSentenceCase(error);
+	}
+}
+
+function calculateInputMapCreationFormErrors(
+	entity: InputMapState,
+): InputMapError[] {
+	const errors: InputMapError[] = [];
+
+	if (!!entity.dataType) {
+		const flatErrors = entity.dataType
+			.toFlat()
+			.filter(
+				(child) =>
+					child.type === EntityType.DataType &&
+					!child.isResolved &&
+					child.id !== entity.dataType.id,
+			);
+
+		if (flatErrors.length > 0) {
+			errors.push(InputMapError.IncompleteDataType);
+		}
+	}
+
+	return errors;
+}
+
+// Not all entity types can have outputs with any data type
+// Sometimes, like in the case of a search, the data type of its outputs can only be a primitive type or a list of primitives
+// This function, given an option, will return some metadata that will help it render the option in the data type builder
+export function resolveDataTypeOptionConfigForInputMap(
+	option: DataTypeBuilderOption | ILiteralValueOption,
+	output: InputMapState,
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeAsTypeConfigForInputMap(output: InputMapState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeLikeConfigForInputMap(output: InputMapState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeAsListConfigForInputMap(output: InputMapState): {
+	allowed: AllowedDataTypeListTypes;
+	tooltip: React.ReactNode;
+} {
+	return {
+		allowed: AllowedDataTypeListTypes.All,
+		tooltip: null,
+	};
+}
+
+const InputMap: React.FC<IInputMapProps> = ({
+	project,
+	entity: _entity,
+	onClose,
+}) => {
+	const [updateKey, setUpdateKey] = useState(0);
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: InputMapState | null =
+		_entity || (project?.logic?.get(entityId) as InputMapState | null) || null;
+
+	const [dataType, _setDataType] = useState<DataTypeState | null>(
+		entity?.dataType || null,
+	);
+	const [entityName, setEntityName] = useState<string>(entity.name);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description,
+	);
+
+	const [metadataSectionOpen, setMetadataSectionOpen] = useState(true);
+	const [defaultValueSectionOpen, setDefaultValueSectionOpen] = useState(false);
+	const [baseFunctionalitySectionOpen, setBaseFunctionalitySectionOpen] =
+		useState(false);
+
+	const debouncedOnChangeDescription = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.ChangeInputMapDescription,
+					),
+				);
+
+				setUpdateKey((prev) => prev + 1);
+				entity?.metaSync({ description: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+			},
+			600,
+			false,
+		),
+		[],
+	);
+
+	const [errors, setErrors] = useState<InputMapError[]>(
+		calculateInputMapCreationFormErrors(entity),
+	);
+
+	const setDataType = (
+		newDataTypeEntity: DataTypeState | null,
+		changeSet: ChangeSet | null,
+	) => {
+		newDataTypeEntity?.setParent(entity, changeSet);
+		entity?.setDataType(newDataTypeEntity, changeSet);
+
+		changeSet?.add(entity, ChangeSetEntityChangeType.Affected);
+
+		_setDataType(newDataTypeEntity);
+		setUpdateKey((prev) => prev + 1);
+
+		project.renderAndCloseChangeSet(changeSet);
+	};
+
+	useEffect(() => {
+		const newErrors = calculateInputMapCreationFormErrors(entity);
+		setErrors(newErrors);
+		project.emit(entity.parent.id, {});
+	}, [entityName, updateKey]);
+
+	let title = `Represents the "${safeResolveEntityName(
+		entity.declaration,
+		project.logic,
+	)}" ${(entity.declaration?.type === EntityType.Property
+		? READABLE_ENTITY_TYPES[EntityType.Property].singular
+		: READABLE_ENTITY_TYPES[EntityType.ArgumentDeclaration].singular
+	).toLowerCase()}`;
+
+	if (entity.parentRelationType === InputMapParentChildRelation.Error) {
+		const resolvedName =
+			entity.name ||
+			(entity.declaration
+				? safeResolveEntityName(entity.declaration, project.logic)
+				: '');
+		title = `Represents a thrown error value ${resolvedName ? `: "${resolvedName}"` : ''}`;
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexGrow: 1,
+				height: '100%',
+				overflowY: 'scroll',
+			}}
+		>
+			{/* We need the 'span' for the react ref */}
+			<span
+				style={{
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					height: '100%',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						height: '100%',
+						gap: '4px',
+						justifyContent: 'space-between',
+					}}
+				>
+					<span
+						style={{
+							maxWidth: '100%',
+							maxHeight: '100%',
+							overflowY: 'scroll',
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+						}}
+					>
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: metadataSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title={`Input name: ${resolveEntityName(
+									entity,
+									project.logic,
+								)}`}
+								subtitle={`Name and description for this ${READABLE_ENTITY_TYPES[
+									entity.type
+								].singular.toLowerCase()}`}
+								hideShowSuffix='the name and description section'
+								open={metadataSectionOpen}
+								onToggle={() => setMetadataSectionOpen(!metadataSectionOpen)}
+								headerEndIcon={
+									// Button to edit declaration
+									!!entity.declaration &&
+									!project.logic.getBuiltIn(entity.declaration.id) ? (
+										<Button
+											variant='outlined'
+											color='primary'
+											iconEnd='fa-solid fa-pencil'
+											size='small'
+											onClick={() => {
+												EditorService.navigate(
+													`${project?.editorBasePath}/entity/${entity.declaration.type}/${entity.declaration.id}`,
+												);
+
+												const canvasEntity = getParentCanvasEntity(
+													entity.declaration,
+												);
+
+												const objectId =
+													getCanvasEntityDraggableContainerDOMId(canvasEntity);
+
+												project.canvas?.scrollToObjectById(objectId);
+											}}
+										>
+											Declaration
+										</Button>
+									) : null
+								}
+							/>
+
+							<Collapse in={metadataSectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 12,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<TextField
+										label='Usage description'
+										variant='outlined'
+										fullWidth
+										disabled={!entity.editable}
+										multiline
+										minRows={3}
+										size='small'
+										value={entityDescription || ''}
+										onChange={(e) => {
+											setEntityDescription(e.target.value);
+											debouncedOnChangeDescription(e.target.value);
+										}}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: baseFunctionalitySectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title={title}
+								subtitle={`This node's input represents an underlying definition with an existing data type an metadata`}
+								hideShowSuffix='the base functionality section'
+								open={baseFunctionalitySectionOpen}
+								onToggle={() =>
+									setBaseFunctionalitySectionOpen(!baseFunctionalitySectionOpen)
+								}
+								headerStartIcon={
+									!!(entity as InputMapState).declaration ? (
+										<EntityIcon entity={(entity as InputMapState).declaration!} project={project} />
+									) : undefined
+								}
+							/>
+
+							<Collapse in={baseFunctionalitySectionOpen}>
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<DataTypeBuilder
+										project={project}
+										topParent={entity}
+										dataType={dataType}
+										readOnly={!entity.editable}
+										baseDataTypes={
+											!!(entity as InputMapState).declaration?.dataType
+												? [(entity as InputMapState).declaration?.dataType]
+												: []
+										}
+										onChangeSet={() => {
+											const newChangeSet = project.logic.addChangeSet(
+												new ChangeSet(
+													project.logic,
+													ProjectState.sessionAuthor,
+													new Date().toISOString(),
+													entity,
+													false,
+													StateMutationAction.ChangeInputMapDataType,
+												),
+											);
+
+											return newChangeSet;
+										}}
+										onChange={(newDataTypeEntity, changeSet) => {
+											setDataType(newDataTypeEntity, changeSet);
+										}}
+										lists={
+											resolveDataTypeAsListConfigForInputMap(entity).allowed
+										}
+										getOptionDisabled={(option) =>
+											resolveDataTypeOptionConfigForInputMap(option, entity)
+												.disabled
+										}
+										getListDisabledTooltip={(option) =>
+											resolveDataTypeAsListConfigForInputMap(entity).tooltip
+										}
+										getOptionTooltip={(option) =>
+											resolveDataTypeOptionConfigForInputMap(option, entity)
+												.tooltip
+										}
+										disallowAsType={
+											resolveDataTypeAsTypeConfigForInputMap(entity).disabled
+										}
+										getAsTypeDisabledTooltip={() =>
+											resolveDataTypeAsTypeConfigForInputMap(entity).tooltip
+										}
+										disallowLike={
+											resolveDataTypeLikeConfigForInputMap(entity).disabled
+										}
+										getLikeDisabledTooltip={() =>
+											resolveDataTypeLikeConfigForInputMap(entity).tooltip
+										}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: defaultValueSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Default value'
+								subtitle='Set the default value for this output'
+								hideShowSuffix='the default value section'
+								open={defaultValueSectionOpen}
+								onToggle={() =>
+									setDefaultValueSectionOpen(!defaultValueSectionOpen)
+								}
+								headerStartIcon={
+									!!entity.errors.find(
+										(error) =>
+											error.code ===
+											EntityInstanceErrorCode.MissingRequiredValue,
+									) ? (
+										<MuiTooltip
+											title='Missing required value'
+											placement='top'
+											arrow
+										>
+											<img
+												style={{ width: 20, height: 20 }}
+												id={'logic-error-icon--' + entity.id}
+												src={WarningIcon}
+												className={'warning-icon logic-error-icon'}
+											/>
+										</MuiTooltip>
+									) : null
+								}
+							/>
+
+							<Collapse in={defaultValueSectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<DynamicValueEntry
+										entity={entity}
+										project={project}
+										parentDisabledReasons={
+											!entity.editable
+												? [StateMutationErrorCode.ActionOwnerEntityNotEditable]
+												: []
+										}
+										onlyDefault
+									>
+										{(extraContent) => extraContent}
+									</DynamicValueEntry>
+								</div>
+							</Collapse>
+						</section>
+					</span>
+
+					{errors.length > 0 && (
+						<div
+							style={{
+								marginTop: 20,
+								marginRight: 40,
+								marginLeft: 80,
+							}}
+						>
+							<Alert severity='error'>
+								{errors.length === 1 ? (
+									<span
+										style={{
+											display: 'flex',
+											alignItems: 'center',
+											gap: 6,
+										}}
+									>
+										<h4
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											Error:
+										</h4>
+										<p
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											{fromInputMapErrorToReadableMessage(errors[0])}
+										</p>
+									</span>
+								) : (
+									<>
+										<h4
+											style={{
+												margin: 0,
+											}}
+										>
+											Errors
+										</h4>
+										<br className='quarter-space' />
+										<ul
+											style={{
+												listStyleType: 'none',
+												padding: 0,
+											}}
+										>
+											{errors.map((error, index) => (
+												<li
+													key={index}
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+													}}
+												>
+													{/* Circle */}
+													<span
+														style={{
+															fontSize: 10,
+															marginRight: 5,
+														}}
+													>
+														&#9679;
+													</span>
+													<p
+														style={{
+															margin: 0,
+															// fontSize: 10,
+														}}
+													>
+														{fromInputMapErrorToReadableMessage(error)}
+													</p>
+												</li>
+											))}
+										</ul>
+									</>
+								)}
+							</Alert>
+						</div>
+					)}
+
+					<div
+						style={{
+							alignSelf: 'flex-start',
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'flex-end',
+							width: '100%',
+							gap: '16px',
+							padding: '0 40px',
+						}}
+					>
+						<Button
+							id='input-map--done-button'
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+							color='primary'
+							disabled={errors.length > 0}
+						>
+							Done
+						</Button>
+						<Tooltip
+							anchorQuerySelector='#input-map--done-button'
+							placement='bottom'
+							openDelay={100}
+						>
+							{errors.length > 0
+								? `Resolve the errors to save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type].singular,
+									)}`
+								: `Save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type].singular,
+									)}`}
+						</Tooltip>
+					</div>
+				</div>
+			</span>
+		</div>
+	);
+};
+
+export default InputMap;