@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/property/PropertyDialogContent.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { IDialogProps } from '../../../lib/dialog/Dialog';
+import { EditorService } from '../../../services/editor';
+import {
+	EntityId,
+	EntityType,
+	PropertyState,
+} from '@elyx-code/project-logic-tree';
+import { useParams } from 'react-router-dom';
+import Property from './Property';
+import DialogLoader from '../../DialogLoader';
+import { popupNotification } from '../../../popup-notification';
+import EntityDialogHeader from '../../EntityDialogHeader';
+
+export interface IPropertyDialogContentProps extends IDialogProps {
+	project: EditorService;
+}
+
+export interface IPropertySectionProps {
+	entity: PropertyState;
+	project: EditorService;
+}
+
+const PropertyDialogContent: React.FC<IPropertyDialogContentProps> = ({
+	onClose,
+	project,
+}) => {
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: PropertyState | null =
+		(project?.logic?.get(entityId) as PropertyState | null) || null;
+
+	const onEscapePressed = useCallback(
+		(e: KeyboardEvent) => {
+			// Or close the dialog if there is only one tab
+			onClose(e);
+		},
+		[onClose]
+	);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	useEffect(() => {
+		project?.on('escape-key-press', onEscapePressed);
+
+		if (!!entity) {
+			project?.on(entity.id, () => {
+				forceUpdate();
+			});
+		}
+
+		return () => {
+			project?.off('escape-key-press', onEscapePressed);
+		};
+	}, [project, entity, onEscapePressed]);
+
+	if (!project || !entity) {
+		if (!!project && project.hasLoadedLogic && !entity) {
+			popupNotification({
+				color: 'error',
+				text: 'This property does not exist in the current version of the project',
+			});
+			onClose(null);
+			return;
+		}
+
+		return (
+			<DialogLoader
+				title='Property'
+				subtitle='Property builder'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				overflow: 'hidden',
+				paddingBottom: 20,
+			}}
+		>
+			<EntityDialogHeader entity={entity} project={project} onClose={onClose} />
+
+			<Property
+				entity={entity}
+				project={project}
+				onClose={(e) => {
+					onClose(e);
+				}}
+			/>
+		</div>
+	);
+};
+
+export default PropertyDialogContent;

package/src/components/dialogs/search-statement/ColumnSelector.tsx

@@ -0,0 +1,334 @@
+import React from 'react';
+import {
+	ProjectState,
+	resolveEntityDataTypeLabel,
+	searchStatementDefs,
+	searchStatementFunctions,
+	searchStatementState as searchStatementStateLib,
+} from '@elyx-code/project-logic-tree';
+import { Autocomplete, Box, TextField, Tooltip } from '@mui/material';
+import DataTypeIcon, {
+	ExplicitDataTypeIcon,
+} from '../../draggable-entity-card/DataTypeIcon';
+import {
+	fromLiteralValueTypeToExplicitIconName,
+	fromLiteralValueTypeToReadableLabel,
+	fromSQLDataTypeToExplicitIconName,
+	fromSQLDataTypeToReadableLabel,
+} from './LiteralValue';
+
+const { ColumnRef } = searchStatementStateLib;
+const { getFunctionDefinition } = searchStatementFunctions;
+const { DataSourceType, SearchStatementNodeType } = searchStatementDefs;
+
+type ColumnRef = searchStatementStateLib.ColumnRef;
+type FunctionCall = searchStatementStateLib.FunctionCall;
+
+// If the column comes from a function-typed data source (e.g. a column
+// generated by `unnest(...)` AS arr), look up the function in the registry
+// and return its declared return type. Used to drive the data-type icon for
+// columns that have neither a real `property` nor a `literalValue`, which
+// otherwise fell through to the generic `?` "unknown" icon.
+function resolveFunctionReturnTypeForColumn(
+	columnRef: ColumnRef,
+): searchStatementDefs.SQLDataType | null {
+	const dataSource = columnRef.parent;
+	if (!dataSource) return null;
+	if (dataSource.sourceType !== DataSourceType.Function) return null;
+	const fnName = dataSource.functionCall?.functionName;
+	if (!fnName) return null;
+	const def = getFunctionDefinition(fnName);
+	return def?.returnType ?? null;
+}
+
+export function resolveColumnRefDataTypeLabel(
+	columnRef: ColumnRef | FunctionCall,
+) {
+	// FunctionCall fed in directly (e.g. SortStatement.column when ordering by
+	// a SELECT FunctionCall): use the function's declared return type.
+	if (columnRef?.type === SearchStatementNodeType.FunctionCall) {
+		const fc = columnRef as FunctionCall;
+		const def = fc.functionName ? getFunctionDefinition(fc.functionName) : null;
+		return def ? fromSQLDataTypeToReadableLabel(def.returnType) : undefined;
+	}
+
+	if (!!(columnRef as ColumnRef).property) {
+		return resolveEntityDataTypeLabel((columnRef as ColumnRef).property);
+	} else if (!!(columnRef as ColumnRef).literalValue) {
+		return fromLiteralValueTypeToReadableLabel(
+			(columnRef as ColumnRef).literalValue.valueType,
+		);
+	}
+	const fnReturnType = resolveFunctionReturnTypeForColumn(columnRef as ColumnRef);
+	if (fnReturnType) {
+		return fromSQLDataTypeToReadableLabel(fnReturnType);
+	}
+}
+
+export const ColumnSelectorDataTypeIcon = ({
+	value,
+}: {
+	value: ColumnRef | FunctionCall;
+}) => {
+	// Same FunctionCall passthrough as the label resolver: show the icon for
+	// the function's return type rather than falling through to `?`.
+	if (value?.type === SearchStatementNodeType.FunctionCall) {
+		const fc = value as FunctionCall;
+		const def = fc.functionName ? getFunctionDefinition(fc.functionName) : null;
+		return (
+			<ExplicitDataTypeIcon
+				icon={
+					def
+						? fromSQLDataTypeToExplicitIconName(def.returnType)
+						: 'unknown'
+				}
+				size='small'
+				color='black'
+				id={'column-selector-fn-' + (fc.functionName || 'unknown')}
+			/>
+		);
+	}
+
+	const colRef = value as ColumnRef;
+
+	if (!!colRef.property) {
+		return <DataTypeIcon entity={colRef.property} size='small' color='black' />;
+	}
+
+	if (!!colRef.literalValue) {
+		return (
+			<ExplicitDataTypeIcon
+				icon={fromLiteralValueTypeToExplicitIconName(
+					colRef.literalValue.valueType,
+				)}
+				size='small'
+				color='black'
+				id={'column-selector-' + colRef.id}
+			/>
+		);
+	}
+
+	const fnReturnType = resolveFunctionReturnTypeForColumn(colRef);
+
+	return (
+		<ExplicitDataTypeIcon
+			icon={
+				fnReturnType
+					? fromSQLDataTypeToExplicitIconName(fnReturnType)
+					: 'unknown'
+			}
+			size='small'
+			color='black'
+			id={'column-selector-' + colRef.id}
+		/>
+	);
+};
+
+// Variant icon for SELECT-side FunctionCall selections (e.g. `UPPER(...) AS
+// upper_result`). Sort/Order-by sections can target these directly via
+// SortStatement.column being a FunctionCall, so render their declared return
+// type rather than falling back to `?`.
+export const FunctionCallDataTypeIcon = ({
+	value,
+	idSuffix,
+}: {
+	value: FunctionCall;
+	idSuffix?: string;
+}) => {
+	const def = value.functionName ? getFunctionDefinition(value.functionName) : null;
+	return (
+		<ExplicitDataTypeIcon
+			icon={
+				def
+					? fromSQLDataTypeToExplicitIconName(def.returnType)
+					: 'unknown'
+			}
+			size='small'
+			color='black'
+			id={'function-call-icon-' + (idSuffix || value.functionName || 'fn')}
+		/>
+	);
+};
+
+export const ColumnSelectorValue = ({
+	value,
+	id,
+}: {
+	value: ColumnRef | FunctionCall;
+	id?: string;
+}) => {
+	const resolvedId = id || 'column-selector-value--' + ProjectState.UUID.uuid();
+
+	return (
+		<span
+			id={resolvedId}
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<span
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 8,
+				}}
+			>
+				<ColumnSelectorDataTypeIcon value={value} />
+				{value.as}
+			</span>
+			<p
+				style={{
+					margin: 0,
+					marginLeft: 20,
+					fontSize: 10,
+					color: 'rgba(0,0,0,0.54)',
+				}}
+			>
+				{resolveColumnRefDataTypeLabel(value)} property
+				{!!value.parent && (
+					<>
+						<br />
+						From <b>{value.parent.as}</b> {value.parent.sourceType}
+					</>
+				)}
+			</p>
+		</span>
+	);
+};
+
+const ColumnSelector = ({
+	value,
+	onChange,
+	options,
+	id,
+	label,
+	getOptionDisabled,
+	disabled,
+}: {
+	value: ColumnRef | FunctionCall;
+	onChange?: (value: ColumnRef | FunctionCall) => void;
+	options: (ColumnRef | FunctionCall)[];
+	id?: string;
+	label?: string;
+	getOptionDisabled?: (option: ColumnRef | FunctionCall) => boolean;
+	disabled?: boolean;
+}) => {
+	const resolvedId = id || 'column-selector--' + ProjectState.UUID.uuid();
+
+	return (
+		<Autocomplete
+			disablePortal
+			disabled={disabled}
+			options={options}
+			id={resolvedId}
+			sx={{
+				width: 200,
+			}}
+			value={value}
+			getOptionLabel={(option) => option.as}
+			onChange={(e, newValue) => {
+				onChange?.(newValue);
+			}}
+			getOptionDisabled={getOptionDisabled}
+			renderOption={(props, option) => {
+				const { key, ...optionProps } = props;
+				return (
+					<Tooltip
+						key={key}
+						placement='right'
+						arrow
+						enterDelay={getOptionDisabled?.(option) ? 100 : 400}
+						leaveDelay={200}
+						title={
+							<>
+								{resolveColumnRefDataTypeLabel(option)} property
+								{!!option.parent && (
+									<>
+										<br />
+										From <b>{option.parent?.as}</b> {option.parent.sourceType}
+									</>
+								)}
+							</>
+						}
+					>
+						<Box
+							key={key}
+							component='li'
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...optionProps}
+						>
+							<ColumnSelectorValue
+								value={option}
+								id={`${resolvedId}--${option.id}`}
+							/>
+						</Box>
+					</Tooltip>
+				);
+			}}
+			renderInput={(params) => (
+				<span
+					style={{ position: 'relative', display: 'block', height: '100%' }}
+				>
+					<span
+						id={resolvedId + '--selected-value'}
+						style={{
+							position: 'absolute',
+							top: 8,
+							left: 0,
+							width: '100%',
+							height: '100%',
+							maxHeight: 30,
+							overflowY: 'hidden',
+							// To match start of text field text
+							paddingLeft: 14,
+							display: 'flex',
+							flexDirection: 'column',
+						}}
+					>
+						{value ? <ColumnSelectorValue value={value} /> : null}
+					</span>
+
+					<TextField
+						{...params}
+						size='small'
+						label={label || 'Select property'}
+						slotProps={{
+							htmlInput: {
+								...params.inputProps,
+								id: resolvedId + '--input',
+								style: {
+									opacity: 0,
+								},
+							},
+						}}
+						onFocus={(e) => {
+							e.target.style.opacity = '1';
+
+							const selectedValueElement = document.getElementById(
+								resolvedId + '--selected-value',
+							);
+
+							if (!!selectedValueElement) {
+								selectedValueElement.style.visibility = 'hidden';
+							}
+						}}
+						onBlur={(e) => {
+							e.target.style.opacity = '0';
+
+							const selectedValueElement = document.getElementById(
+								resolvedId + '--selected-value',
+							);
+
+							if (!!selectedValueElement) {
+								selectedValueElement.style.visibility = 'visible';
+							}
+						}}
+					/>
+				</span>
+			)}
+		/>
+	);
+};
+
+export default ColumnSelector;