@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,1779 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+	Autocomplete,
+	Box,
+	Collapse,
+	IconButton,
+	TextField,
+	Tooltip as MuiTooltip,
+} from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import {
+	EntityType,
+	InputMapState,
+	PrimitiveTypes,
+	ProjectState,
+	resolveEntityName,
+	searchStatementDefs,
+	searchStatementState as searchStatementStateLib,
+	searchStatementUtils,
+} from '@elyx-code/project-logic-tree';
+import DropdownMenuPopup from '../../../lib/dropdown/DropdownMenuPopup';
+import ColumnSelector from './ColumnSelector';
+import LiteralValueField, {
+	fromLiteralValueTypeToReadableLabel,
+	ILiteralValueOption,
+	LiteralValueTypeSelector,
+} from './LiteralValue';
+import { getPrimitiveTypeInputs } from '../../../services/editor/utils';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { debounce } from '../../../utils';
+import { ConditionSelectorValue, ValueSelector } from './ValueSelector';
+
+const {
+	AllColumnsSelector,
+	ColumnRef,
+	DataSource,
+	SearchStatementLiteralValue,
+	SortStatement,
+	ValueRef,
+	FunctionCall,
+} = searchStatementStateLib;
+
+const {
+	SearchStatementNodeType,
+	SQLFunctionCategory,
+	SearchLiteralValueType,
+	SortStatementDirection,
+} = searchStatementDefs;
+
+type DataSource = searchStatementStateLib.DataSource;
+type ColumnRef = searchStatementStateLib.ColumnRef;
+type SearchStatementNodeType = searchStatementDefs.SearchStatementNodeType;
+type AllColumnsSelector = searchStatementStateLib.AllColumnsSelector;
+type SearchLiteralValueType = searchStatementDefs.SearchLiteralValueType;
+type SearchStatementLiteralValue =
+	searchStatementStateLib.SearchStatementLiteralValue;
+type ValueRef = searchStatementStateLib.ValueRef;
+type SortStatement = searchStatementStateLib.SortStatement;
+type SortStatementDirection = searchStatementDefs.SortStatementDirection;
+type FunctionCall = searchStatementStateLib.FunctionCall;
+
+export type CalculatedSelectionsBySource = (
+	| {
+			dataSource: DataSource | null;
+			columns: ColumnRef[];
+			allColumnsSelected: null;
+			// Just so the UI doesn't jump
+			index: number;
+	  }
+	| {
+			dataSource: DataSource;
+			columns: [];
+			allColumnsSelected: AllColumnsSelector;
+			// Just so the UI doesn't jump
+			index: number;
+	  }
+)[];
+
+export const NumberSelector = ({
+	value,
+	onChange,
+	options,
+	id,
+}: {
+	value: SearchStatementLiteralValue | ValueRef;
+	onChange: (value: SearchStatementLiteralValue | ValueRef) => void;
+	options: InputMapState[];
+	id?: string;
+}) => {
+	const { project, searchStatementState, entity } = useSearchStatementContext();
+
+	const resolveLocalValueFromExternalValue = (
+		value: SearchStatementLiteralValue | ValueRef,
+	): ValueRef | ILiteralValueOption => {
+		if (value?.type === SearchStatementNodeType.LiteralValue) {
+			return {
+				type: 'literal-value-option',
+				valueType: value.valueType,
+			};
+		}
+
+		return value;
+	};
+
+	const [localValue, _] = React.useState<ValueRef | ILiteralValueOption>(
+		resolveLocalValueFromExternalValue(value),
+	);
+
+	const sanitizedOptions: (ValueRef | ILiteralValueOption)[] = [
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Number,
+		},
+		...(options.map((option) => {
+			if (option.type === EntityType.InputMap) {
+				const newValueRef = new ValueRef(searchStatementState);
+				newValueRef.inputMap = option;
+				return newValueRef;
+			}
+
+			return option;
+		}) as (ILiteralValueOption | ValueRef)[]),
+	];
+
+	const showLiteralValueField: boolean =
+		!!localValue &&
+		localValue.type === 'literal-value-option' &&
+		localValue.valueType !== SearchLiteralValueType.Null;
+
+	const resolvedId = id || 'number-selector-value--' + ProjectState.UUID.uuid();
+
+	return (
+		<span
+			style={{
+				display: 'flex',
+				gap: 8,
+				alignItems: 'center',
+			}}
+		>
+			<Autocomplete
+				disablePortal
+				disabled={!entity.editable}
+				options={sanitizedOptions}
+				sx={{
+					width: 200,
+				}}
+				value={localValue}
+				getOptionLabel={(option) => {
+					if (option.type === 'literal-value-option') {
+						return `${fromLiteralValueTypeToReadableLabel(
+							option.valueType,
+						)} value`;
+					} else if (option.type === SearchStatementNodeType.ValueRef) {
+						return resolveEntityName(option.inputMap, project.logic);
+					}
+
+					return 'value';
+				}}
+				onChange={(e, newValue) => {
+					let resolvedNewValue:
+						| SearchStatementLiteralValue
+						| ColumnRef
+						| ValueRef;
+
+					if (newValue?.type === 'literal-value-option') {
+						resolvedNewValue = new SearchStatementLiteralValue(
+							searchStatementState,
+						);
+						resolvedNewValue.valueType = newValue.valueType;
+
+						// If null, then initialize the value to null
+						if (newValue.valueType === SearchLiteralValueType.Null) {
+							resolvedNewValue.value = null;
+						}
+					} else {
+						resolvedNewValue = newValue;
+					}
+
+					// Send a new literal value as well, but with the value property being empty,
+					// when the component is updated, the local value will be set
+					onChange(resolvedNewValue as ValueRef | SearchStatementLiteralValue);
+				}}
+				renderOption={(props, option) => {
+					const { key, ...optionProps } = props;
+					return (
+						<Box
+							key={key}
+							component='li'
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...optionProps}
+						>
+							<ConditionSelectorValue value={option} />
+						</Box>
+					);
+				}}
+				renderInput={(params) => (
+					<span
+						style={{ position: 'relative', display: 'block', height: '100%' }}
+					>
+						<span
+							id={`${resolvedId}--input-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',
+							}}
+						>
+							<ConditionSelectorValue value={value} />
+						</span>
+
+						<TextField
+							{...params}
+							size='small'
+							label={`Select source of value`}
+							// className={`condition-builder__${side}-input`}
+							slotProps={{
+								htmlInput: {
+									...params.inputProps,
+									id: `${resolvedId}--input`,
+									style: {
+										opacity: 0,
+									},
+								},
+							}}
+							onFocus={(e) => {
+								e.target.style.opacity = '1';
+
+								const selectedValueElement = document.getElementById(
+									`${resolvedId}--input-selected-value`,
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'hidden';
+								}
+							}}
+							onBlur={(e) => {
+								e.target.style.opacity = '0';
+
+								const selectedValueElement = document.getElementById(
+									`${resolvedId}--input-selected-value`,
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'visible';
+								}
+							}}
+						/>
+					</span>
+				)}
+			/>
+
+			{showLiteralValueField && (
+				<LiteralValueField
+					disabled={!entity.editable}
+					value={value as SearchStatementLiteralValue}
+					onChange={(newValue) => {
+						onChange(newValue);
+					}}
+				/>
+			)}
+		</span>
+	);
+};
+
+export const LiteralColumnOutputSelector = ({
+	columnRef,
+	index,
+}: {
+	columnRef: ColumnRef | null;
+	index: number;
+}) => {
+	const { editSelection, removeSelection, searchStatementState, entity } =
+		useSearchStatementContext();
+
+	const [localAliasValue, setLocalAliasValue] = useState<string>(
+		columnRef.as || '',
+	);
+	const [aliasValidationError, setAliasValidationError] = useState<
+		string | null
+	>(null);
+
+	// The alias value is only set to the state if its valid
+	// Since the alias is a free text field, the user could input a value which conflicts with the SQL syntax
+	// Therefore we that the value doesn't contain any forbidden keywords or combination of characters
+	const setAliasValue = (value: string) => {
+		Logger.log('setAliasValue: ', value);
+		let validationError: string | null = null;
+
+		// Step 1: Convert to uppercase for case-insensitive comparison
+		const upperValue = value.toUpperCase().trim();
+
+		// Step 2: Check for forbidden keywords (exact match only)
+		if (searchStatementUtils.FORBIDDEN_SQL_KEYWORDS.includes(upperValue)) {
+			validationError = `The alias "${value}" is a reserved SQL keyword and cannot be used.`;
+		}
+
+		// Step 3: Regex to allow only alphanumeric characters and underscores, and no spaces
+		else if (!/^[A-Za-z0-9_]+$/.test(value)) {
+			validationError =
+				'Alias must contain only letters, numbers, and underscores, with no spaces.';
+		}
+
+		// Step 4: Check alias length (e.g., max 50 characters)
+		else if (value.length > 50) {
+			validationError = 'Alias must be 50 characters or fewer.';
+		}
+
+		// Only update the column alias if validation passes
+		if (!validationError) {
+			Logger.log('Here, no error');
+			columnRef.as = value;
+			setLocalAliasValue(value);
+			editSelection(columnRef);
+			setAliasValidationError(null);
+		} else {
+			setLocalAliasValue(value);
+			setAliasValidationError(validationError);
+		}
+	};
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				gap: 12,
+			}}
+		>
+			{/* Number, column selector dropdown, order type selector dropdown, then 3 dot icon buton */}
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						fontWeight: 600,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{(index + 1).toString()}
+				</p>
+			</div>
+
+			<LiteralValueTypeSelector
+				value={columnRef.source as SearchStatementLiteralValue}
+				onChange={(newValue) => {
+					columnRef.source = newValue;
+
+					editSelection(columnRef);
+				}}
+			/>
+
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<ArrowForwardIosIcon
+					component='svg'
+					sx={{
+						color: 'rgba(0,0,0,0.54)',
+						fontSize: 10,
+					}}
+				/>
+			</div>
+
+			<TextField
+				disabled={!entity.editable}
+				id={`search-statement-dialog-property-order-${
+					columnRef.id || 'unknown'
+				}-select`}
+				sx={{ width: 200, marginTop: 0 }}
+				onChange={(e) => {
+					Logger.log('Value: ', e.target.value);
+					setAliasValue(e.target.value);
+				}}
+				size='small'
+				label='Output property name'
+				value={localAliasValue}
+				error={!!aliasValidationError}
+				helperText={aliasValidationError}
+			/>
+
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<IconButton
+					id={`search-statement-dialog-property-${
+						columnRef.id || 'unknown'
+					}-more-button`}
+					aria-label='more'
+					size='small'
+					style={{
+						width: 30,
+						height: 30,
+						fontSize: 18,
+					}}
+				>
+					<i className='fa-solid fa-ellipsis-v' />
+				</IconButton>
+			</div>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#search-statement-dialog-property-${
+						columnRef.id || 'unknown'
+					}-more-button`,
+					placement: 'right',
+				}}
+				options={[
+					{
+						disabled: !entity.editable,
+						onClick: async () => {
+							removeSelection(columnRef);
+						},
+						label: 'Delete selection',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: 'Click to delete this property selection',
+					},
+				]}
+			/>
+
+			{searchStatementState.duplicateColumnNames.includes(columnRef.as) && (
+				<MuiTooltip
+					placement='right'
+					enterDelay={300}
+					leaveDelay={200}
+					arrow
+					title={
+						<span>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 10,
+									marginBottom: 4,
+								}}
+							>
+								Duplicate property name:
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 16,
+									fontWeight: 600,
+								}}
+							>
+								{columnRef.as}
+							</p>
+
+							<p
+								style={{
+									margin: 0,
+									fontSize: 8,
+									marginTop: 10,
+									color: 'rgba(255,255,255,0.7)',
+								}}
+							>
+								All duplicate columns will be ignored in the final result
+							</p>
+						</span>
+					}
+				>
+					<div
+						style={{
+							height: 40,
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						<img className='search-statement__error-icon' src={WarningIcon} />
+					</div>
+				</MuiTooltip>
+			)}
+		</div>
+	);
+};
+
+export const FunctionColumnOutputSelector = ({
+	functionCall,
+	index,
+}: {
+	functionCall: FunctionCall;
+	index: number;
+}) => {
+	const { editSelection, removeSelection, searchStatementState, entity } =
+		useSearchStatementContext();
+
+	const [localAliasValue, setLocalAliasValue] = useState<string>(
+		functionCall.as || '',
+	);
+	const [aliasValidationError, setAliasValidationError] = useState<
+		string | null
+	>(null);
+
+	const setAliasValue = (value: string) => {
+		let validationError: string | null = null;
+		const upperValue = value.toUpperCase().trim();
+
+		if (searchStatementUtils.FORBIDDEN_SQL_KEYWORDS.includes(upperValue)) {
+			validationError = `The alias "${value}" is a reserved SQL keyword.`;
+		} else if (!/^[A-Za-z0-9_]+$/.test(value)) {
+			validationError =
+				'Alias must contain only letters, numbers, and underscores.';
+		} else if (value.length > 50) {
+			validationError = 'Alias must be 50 characters or fewer.';
+		}
+
+		if (!validationError) {
+			functionCall.as = value;
+			setLocalAliasValue(value);
+			editSelection(functionCall);
+			setAliasValidationError(null);
+		} else {
+			setLocalAliasValue(value);
+			setAliasValidationError(validationError);
+		}
+	};
+
+	return (
+		<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
+			<div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						fontWeight: 600,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{(index + 1).toString()}
+				</p>
+			</div>
+
+			{/* Intentionally NOT flexGrow:1 — letting the wrapper grow forces the
+				inner FunctionCallSelector (width:100%) to expand to the full row
+				width, which pushes the "Output property name" field all the way
+				right even when the function body is a single short argument.
+				Content-sizing keeps the sibling fields close while still allowing
+				the wrapper to grow when the function body itself is wide. */}
+			<span style={{ minWidth: 0 }}>
+				<ValueSelector
+					side='left'
+					value={functionCall}
+					disabled={!entity.editable}
+					// Prohibit table-valued functions in the SELECT clause!
+					disabledFunctionCategories={[SQLFunctionCategory.TableValued]}
+					options={searchStatementState.columns}
+					onChange={(newValue) => {
+						editSelection(newValue as FunctionCall);
+					}}
+					includeOnlyOptionTypes={[
+						searchStatementDefs.SearchStatementNodeType.FunctionCall,
+					]}
+					horizontalSeparator={true}
+				/>
+			</span>
+
+			<div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+				<ArrowForwardIosIcon
+					component='svg'
+					sx={{ color: 'rgba(0,0,0,0.54)', fontSize: 10 }}
+				/>
+			</div>
+
+			<TextField
+				disabled={!entity.editable}
+				sx={{ width: 200, marginTop: 0 }}
+				onChange={(e) => setAliasValue(e.target.value)}
+				size='small'
+				label='Output property name'
+				value={localAliasValue}
+				error={!!aliasValidationError}
+				helperText={aliasValidationError}
+			/>
+
+			<div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
+				<IconButton
+					id={`search-statement-dialog-property-${functionCall.id}-more-button`}
+					aria-label='more'
+					size='small'
+					style={{ width: 30, height: 30, fontSize: 18 }}
+				>
+					<i className='fa-solid fa-ellipsis-v' />
+				</IconButton>
+			</div>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#search-statement-dialog-property-${functionCall.id}-more-button`,
+					placement: 'right',
+				}}
+				options={[
+					{
+						disabled: !entity.editable,
+						onClick: async () => removeSelection(functionCall),
+						label: 'Delete selection',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: 'Click to delete this function property',
+					},
+				]}
+			/>
+		</div>
+	);
+};
+
+export const SourcedColumnOutputSelector = ({
+	columnRef,
+	index,
+}: {
+	columnRef: ColumnRef | null;
+	index: number;
+}) => {
+	const { editSelection, removeSelection, searchStatementState, entity } =
+		useSearchStatementContext();
+
+	const [localAliasValue, setLocalAliasValue] = useState<string>(
+		columnRef.as || '',
+	);
+	const [aliasValidationError, setAliasValidationError] = useState<
+		string | null
+	>(null);
+
+	const debouncedEditSelection = useCallback(
+		debounce(
+			(value: string) => {
+				columnRef.as = value;
+				editSelection(columnRef);
+			},
+			600,
+			false,
+		),
+		[],
+	);
+
+	// The alias value is only set to the state if its valid
+	// Since the alias is a free text field, the user could input a value which conflicts with the SQL syntax
+	// Therefore we that the value doesn't contain any forbidden keywords or combination of characters
+	const setAliasValue = (value: string) => {
+		Logger.log('setAliasValue: ', value);
+		let validationError: string | null = null;
+
+		// Step 1: Convert to uppercase for case-insensitive comparison
+		const upperValue = value.toUpperCase().trim();
+
+		// Step 2: Check for forbidden keywords (exact match only)
+		if (searchStatementUtils.FORBIDDEN_SQL_KEYWORDS.includes(upperValue)) {
+			validationError = `The alias "${value}" is a reserved SQL keyword and cannot be used.`;
+		}
+
+		// Step 3: Regex to allow only alphanumeric characters and underscores, and no spaces
+		else if (!/^[A-Za-z0-9_]+$/.test(value)) {
+			validationError =
+				'Alias must contain only letters, numbers, and underscores, with no spaces.';
+		}
+
+		// Step 4: Check alias length (e.g., max 50 characters)
+		else if (value.length > 50) {
+			validationError = 'Alias must be 50 characters or fewer.';
+		}
+
+		// Only update the column alias if validation passes
+		if (!validationError) {
+			columnRef.as = value;
+			setLocalAliasValue(value);
+			debouncedEditSelection(value);
+			setAliasValidationError(null);
+		} else {
+			setLocalAliasValue(value);
+			setAliasValidationError(validationError);
+		}
+	};
+
+	const resolvedSource: ColumnRef | FunctionCall =
+		columnRef.source?.type === EntityType.Property ||
+		columnRef.source?.type === SearchStatementNodeType.LiteralValue ||
+		columnRef.source?.type === SearchStatementNodeType.ValueRef
+			? columnRef
+			: columnRef.source;
+
+	return (
+		<div
+			key={columnRef.id || 'unknown'}
+			style={{
+				display: 'flex',
+				gap: 12,
+			}}
+		>
+			{/* Number, column selector dropdown, order type selector dropdown, then 3 dot icon buton */}
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						fontWeight: 600,
+						color: 'rgba(0,0,0,0.54)',
+					}}
+				>
+					{(index + 1).toString()}
+				</p>
+			</div>
+
+			<ColumnSelector
+				disabled={!entity.editable}
+				id={`search-statement-dialog-property-column-${
+					columnRef.id || 'unknown'
+				}-select`}
+				value={resolvedSource}
+				options={columnRef.parent.columns}
+				onChange={(newValue) => {
+					columnRef.source = newValue;
+					columnRef.as = newValue?.as || columnRef.as;
+
+					editSelection(columnRef);
+				}}
+			/>
+
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<ArrowForwardIosIcon
+					component='svg'
+					sx={{
+						color: 'rgba(0,0,0,0.54)',
+						fontSize: 10,
+					}}
+				/>
+			</div>
+
+			<TextField
+				disabled={!entity.editable}
+				id={`search-statement-dialog-property-order-${
+					columnRef.id || 'unknown'
+				}-select`}
+				sx={{ width: 200, marginTop: 0 }}
+				onChange={(e) => {
+					Logger.log('Value: ', e.target.value);
+					setAliasValue(e.target.value);
+				}}
+				size='small'
+				label='Output property name'
+				value={localAliasValue}
+				error={!!aliasValidationError}
+				helperText={aliasValidationError}
+			/>
+
+			<div
+				style={{
+					height: 40,
+					display: 'flex',
+					alignItems: 'center',
+				}}
+			>
+				<IconButton
+					id={`search-statement-dialog-property-${
+						columnRef.id || 'unknown'
+					}-more-button`}
+					disabled={!entity.editable}
+					aria-label='more'
+					size='small'
+					style={{
+						width: 30,
+						height: 30,
+						fontSize: 18,
+					}}
+				>
+					<i className='fa-solid fa-ellipsis-v' />
+				</IconButton>
+			</div>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#search-statement-dialog-property-${
+						columnRef.id || 'unknown'
+					}-more-button`,
+					placement: 'right',
+				}}
+				options={[
+					{
+						disabled: !entity.editable,
+						onClick: async () => {
+							removeSelection(columnRef);
+						},
+						label: 'Delete selection',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: 'Click to delete this property selection',
+					},
+				]}
+			/>
+
+			{searchStatementState.duplicateColumnNames.includes(columnRef.as) && (
+				<MuiTooltip
+					placement='right'
+					enterDelay={300}
+					leaveDelay={200}
+					arrow
+					title={
+						<span>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 10,
+									marginBottom: 4,
+								}}
+							>
+								Duplicate property name:
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 16,
+									fontWeight: 600,
+								}}
+							>
+								{columnRef.as}
+							</p>
+
+							<p
+								style={{
+									margin: 0,
+									fontSize: 8,
+									marginTop: 10,
+									color: 'rgba(255,255,255,0.7)',
+								}}
+							>
+								All duplicate columns will be ignored in the final result
+							</p>
+						</span>
+					}
+				>
+					<div
+						style={{
+							height: 40,
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						<img className='search-statement__error-icon' src={WarningIcon} />
+					</div>
+				</MuiTooltip>
+			)}
+		</div>
+	);
+};
+
+const OutputFormatSection = ({}: {}) => {
+	const {
+		searchStatementState,
+		offset,
+		limit,
+		asList,
+		setOffset,
+		setLimit,
+		setAsList,
+		sorting,
+		sortingUpdateKey,
+		addSorting,
+		removeSorting,
+		selections,
+		removeSelection,
+		addSelection,
+		entity,
+		offsetUpdateKey,
+		limitUpdateKey,
+		dataSourcesUpdateKey,
+		selectionsUpdateKey,
+		mainDataSource,
+		isNested,
+		aggregationsUpdateKey,
+	} = useSearchStatementContext();
+
+	const hasAggregation = selections.some(
+		(sel) =>
+			sel.type === SearchStatementNodeType.FunctionCall &&
+			(sel as FunctionCall).hasFunctionOfCategory(SQLFunctionCategory.Aggregate),
+	);
+
+	const [sectionOpen, setSectionOpen] = useState(
+		!!searchStatementState?.aggregations.length ||
+			!!searchStatementState?.sorting.length ||
+			!!searchStatementState?.selections.length,
+	);
+
+	const [calculatedSelections, setCalculatedSelections] =
+		useState<CalculatedSelectionsBySource>([]);
+
+	const recalculateSelectionsByTable = (
+		oldCalculation: CalculatedSelectionsBySource,
+	): CalculatedSelectionsBySource => {
+		const allSources: CalculatedSelectionsBySource = [
+			{
+				dataSource: null,
+				columns: [],
+				allColumnsSelected: null,
+				index: 0,
+			},
+			...searchStatementState.usedDataSources.map((dataSource, index) => ({
+				dataSource,
+				columns: [] as any,
+				allColumnsSelected: null as any,
+				// Just so the UI doesn't jump
+				index: index + 1,
+			})),
+		];
+
+		const unsortedCalculation = selections.reduce<CalculatedSelectionsBySource>(
+			// @ts-ignore
+			(acc: CalculatedSelectionsBySource, selection) => {
+				if (selection.type === SearchStatementNodeType.AllColumnsSelector) {
+					const existingSeletionBySource = acc.find(
+						(item) => item.dataSource?.id === selection.parent?.id,
+					);
+
+					if (existingSeletionBySource) {
+						// existingSeletionBySource.columns = [];
+						existingSeletionBySource.allColumnsSelected = selection;
+						return acc;
+					} else {
+						const oldCalculationEquivalent = oldCalculation.findIndex(
+							(item) => item.dataSource?.id === selection.parent?.id,
+						);
+						const newIndex =
+							oldCalculationEquivalent === undefined ||
+							oldCalculationEquivalent === -1
+								? acc.length
+								: oldCalculationEquivalent;
+
+						return [
+							...acc,
+							{
+								dataSource: selection.parent,
+								columns: [] as const,
+								allColumnsSelected: selection,
+								index: newIndex,
+							} as {
+								dataSource: DataSource;
+								columns: ColumnRef[];
+								allColumnsSelected: AllColumnsSelector;
+								index: number;
+							},
+						];
+					}
+				}
+
+				// These are literal column selections with explicit values, therefore have no parent data source
+				if (!selection.parent) {
+					(acc[0].columns as ColumnRef[]).push(selection as ColumnRef);
+
+					return acc;
+				}
+
+				const existingSeletionBySource = acc.find(
+					(item) => item.dataSource?.id === selection.parent?.id,
+				);
+
+				if (!existingSeletionBySource) {
+					const oldCalculationEquivalent = oldCalculation.findIndex(
+						(item) => item.dataSource?.id === selection.parent?.id,
+					);
+					const newIndex =
+						oldCalculationEquivalent === undefined ||
+						oldCalculationEquivalent === -1
+							? acc.length
+							: oldCalculationEquivalent;
+
+					return [
+						...acc,
+						{
+							dataSource: selection.parent,
+							columns: [selection],
+							allColumnsSelected: null,
+							index: newIndex,
+						},
+					];
+				} else if (
+					!!existingSeletionBySource &&
+					!(
+						existingSeletionBySource as {
+							dataSource: DataSource;
+							columns: ColumnRef[];
+							allColumnsSelected: null;
+							index: number;
+						}
+					).columns
+						// @ts-ignore
+						.includes(selection)
+				) {
+					(
+						existingSeletionBySource as {
+							dataSource: DataSource;
+							columns: ColumnRef[];
+							allColumnsSelected: null;
+							index: number;
+						}
+					).columns.push(selection as ColumnRef);
+				}
+
+				return acc;
+			},
+			allSources,
+		);
+
+		// Sort the calculation by the index
+		// @ts-ignore
+		const sortedCalculation = unsortedCalculation.sort(
+			// @ts-ignore
+			(a, b) => a.index - b.index,
+		);
+
+		return sortedCalculation as CalculatedSelectionsBySource;
+	};
+
+	useEffect(() => {
+		const selectionsBySource: CalculatedSelectionsBySource =
+			recalculateSelectionsByTable(calculatedSelections);
+
+		setCalculatedSelections(selectionsBySource);
+	}, [selectionsUpdateKey, aggregationsUpdateKey, dataSourcesUpdateKey]);
+
+	const allPrimitiveTypeInputs = getPrimitiveTypeInputs(entity, [
+		PrimitiveTypes.Number,
+	]);
+
+	return (
+		<section
+			key={dataSourcesUpdateKey && selectionsUpdateKey && aggregationsUpdateKey}
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Output format'
+				subtitle='Assemble the resulting data'
+				hideShowSuffix='the output format section'
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 4,
+						marginLeft: 80,
+					}}
+				>
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Results order
+					</h3>
+					<span>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Define the ordering of the resulting list
+						</p>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Move properties higher to give them more sorting priority
+						</p>
+					</span>
+					<br className='quarter-space' />
+					<div
+						className='search-statement__numbered-rows-container'
+						key={sortingUpdateKey}
+					>
+						{sorting
+							.sort((a, b) => a.index - b.index)
+							.map((sort, index) => (
+								<div
+									key={sort.column?.id || index}
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: 12,
+									}}
+								>
+									{/* Number, column selector dropdown, order type selector dropdown, then 3 dot icon buton */}
+									<p
+										style={{
+											margin: 0,
+											fontSize: 12,
+											fontWeight: 600,
+											color: 'rgba(0,0,0,0.54)',
+										}}
+									>
+										{(index + 1).toString()}
+									</p>
+									<ColumnSelector
+										disabled={!entity.editable}
+										id={`search-statement-dialog-sort-column-${sort.index}-select`}
+										value={sort.column}
+										options={searchStatementState.columns}
+										getOptionDisabled={(option) => {
+											if (!!option?.literalValue) {
+												return true;
+											}
+
+											// If the column is already sorted, then disable it
+											if (sort.column?.id === option.id) {
+												return false;
+											}
+
+											return !!sorting.find(
+												(existingSort) => existingSort.column?.id === option.id,
+											);
+										}}
+										onChange={(value) => {
+											sort.column = value;
+											addSorting(sort);
+										}}
+									/>
+									<Autocomplete
+										id={`search-statement-dialog-sort-order-${sort.index}-select`}
+										disabled={!entity.editable}
+										disablePortal
+										options={[
+											{
+												label: 'Ascending',
+												value: SortStatementDirection.Ascending,
+											},
+											{
+												label: 'Descending',
+												value: SortStatementDirection.Descending,
+											},
+										]}
+										value={{
+											label:
+												sort.direction === SortStatementDirection.Ascending
+													? 'Ascending'
+													: 'Descending',
+											value: sort.direction,
+										}}
+										sx={{ width: 200 }}
+										renderInput={(params) => (
+											<TextField
+												{...params}
+												size='small'
+												label='Select direction'
+											/>
+										)}
+									/>
+									<IconButton
+										id={`search-statement-dialog-sort-${sort.index}-more-button`}
+										aria-label='more'
+										disabled={!entity.editable}
+										size='small'
+										style={{
+											width: 30,
+											height: 30,
+											fontSize: 18,
+										}}
+									>
+										<i className='fa-solid fa-ellipsis-v' />
+									</IconButton>
+
+									<DropdownMenuPopup
+										popupOptions={{
+											anchorQuerySelector: `#search-statement-dialog-sort-${sort.index}-more-button`,
+											placement: 'right',
+										}}
+										options={[
+											{
+												disabled: !entity.editable,
+												onClick: async () => {
+													removeSorting(sort);
+												},
+												label: 'Delete order',
+												color: 'error',
+												iconEnd: 'fa-solid fa-trash-can',
+												tooltip: 'Click to delete this ordering',
+											},
+										]}
+									/>
+
+									{(!sort.isValid ||
+										!sort.column.isValid ||
+										searchStatementState.duplicateColumnNames.includes(
+											sort.column.as,
+										)) && (
+										<MuiTooltip
+											placement='right'
+											enterDelay={100}
+											leaveDelay={200}
+											arrow
+											title={
+												!sort.isValid ? (
+													<>
+														This ordering selection is incomplete.
+														<br />
+														Please select a column and sorting direction.
+														<br />
+														<br />
+														Invalid sortings will be ignored in the final
+														results.
+													</>
+												) : (
+													<>
+														The property "{sort.column?.as}", referenced by this
+														sorting is not valid
+														<br />
+														Fix the errors in that property to enable this
+														sorting
+														<br />
+														<br />
+														Invalid sortings will be ignored in the final
+														results.
+													</>
+												)
+											}
+										>
+											<img
+												className='search-statement__error-icon'
+												src={WarningIcon}
+											/>
+										</MuiTooltip>
+									)}
+								</div>
+							))}
+					</div>
+
+					{/* Small undelined link button to add new sort order */}
+					<button
+						id='search-statement-dialog-add-sort-order-button'
+						onClick={() => {
+							const newSort = new SortStatement(searchStatementState);
+							newSort.index = sorting.length;
+							addSorting(newSort);
+						}}
+						style={{
+							fontSize: 12,
+							color: 'rgba(0,0,0,0.54)',
+							border: 0,
+							background: 'none',
+							cursor: 'pointer',
+							textDecoration: 'underline',
+							display: 'flex',
+							padding: 0,
+						}}
+					>
+						Add order
+					</button>
+
+					<br className='quarter-space' />
+
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Maximum amount of results
+					</h3>
+
+					<br className='eighth-space' />
+
+					<span
+						style={{
+							display: 'flex',
+							gap: 8,
+						}}
+					>
+						<NumberSelector
+							key={limitUpdateKey}
+							value={limit}
+							id={`search-statement-dialog-result-limit-select`}
+							onChange={(value) => {
+								setLimit(value);
+							}}
+							options={allPrimitiveTypeInputs}
+						/>
+
+						<div
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+							}}
+						>
+							<input
+								type='checkbox'
+								id={`search-statement-dialog-result-as-list-checkbox`}
+								disabled={isNested}
+								checked={isNested ? true : asList}
+								onChange={(e) => {
+									if (!isNested) {
+										setAsList(e.target.checked);
+									}
+								}}
+								style={{
+									margin: 0,
+								}}
+							/>
+							<label
+								htmlFor={`search-statement-dialog-result-as-list-checkbox`}
+								style={{
+									fontSize: 10,
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								As list
+								<br />
+								{asList
+									? '(Result is a list of entries)'
+									: '(Result is the first item, as a single object)'}
+							</label>
+						</div>
+					</span>
+
+					<br className='quarter-space' />
+
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Skip first number of items
+					</h3>
+
+					<br className='eighth-space' />
+
+					<NumberSelector
+						key={offsetUpdateKey}
+						value={offset}
+						id={`search-statement-dialog-result-offset-select`}
+						onChange={(value) => {
+							setOffset(value);
+						}}
+						options={allPrimitiveTypeInputs}
+					/>
+
+					<br className='quarter-space' />
+
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Resulting data structure
+					</h3>
+					<span>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Assemble the output entity from available properties
+						</p>
+						<p
+							style={{
+								margin: 0,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							from the entities found by the search
+						</p>
+					</span>
+
+					<br className='quarter-space' />
+
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: 8,
+						}}
+					>
+						{(calculatedSelections[0]?.columns || []).map(
+							(selection: any, index) => {
+								if (selection.type === SearchStatementNodeType.FunctionCall) {
+									return (
+										<FunctionColumnOutputSelector
+											key={selection.id}
+											functionCall={selection as FunctionCall}
+											index={index}
+										/>
+									);
+								}
+								return (
+									<LiteralColumnOutputSelector
+										key={selection.id}
+										columnRef={selection as ColumnRef}
+										index={index}
+									/>
+								);
+							},
+						)}
+
+						<div style={{ display: 'flex', gap: '24px' }}>
+							<button
+								id='search-statement-dialog-add-literal-property-button'
+								disabled={!entity.editable}
+								onClick={() => {
+									const newSelection = new ColumnRef(searchStatementState);
+									const newLiteralString = new SearchStatementLiteralValue(
+										searchStatementState,
+									);
+									newLiteralString.valueType = SearchLiteralValueType.String;
+									// Leave `value` empty — the AST treats an empty literal as
+									// invalid until the user supplies one. Auto-filling with
+									// "Starting value" used to mask that incomplete-state.
+									newSelection.source = newLiteralString;
+									newSelection.as = 'literal_property';
+									addSelection(newSelection);
+								}}
+								style={{
+									fontSize: 12,
+									color: 'rgba(0,0,0,0.54)',
+									border: 0,
+									background: 'none',
+									cursor: 'pointer',
+									textDecoration: 'underline',
+									padding: 0,
+								}}
+							>
+								Add literal property
+							</button>
+
+							<button
+								id='search-statement-dialog-add-function-property-button'
+								disabled={!entity.editable}
+								onClick={() => {
+									const newSelection = new FunctionCall(searchStatementState);
+									newSelection.as = 'function_property';
+									addSelection(newSelection);
+								}}
+								style={{
+									fontSize: 12,
+									color: 'rgba(0,0,0,0.54)',
+									border: 0,
+									background: 'none',
+									cursor: 'pointer',
+									textDecoration: 'underline',
+									padding: 0,
+								}}
+							>
+								Add function property
+							</button>
+						</div>
+
+						<br className='quarter-space' />
+
+						{calculatedSelections.map((selection) => {
+							if (!selection.dataSource) {
+								return null;
+							}
+
+							const showAddNewPropertyButton = !!(
+								!selection.columns.length ||
+								!selection.columns.find(
+									(columnRef: ColumnRef) => !columnRef.source || !columnRef.as,
+								)
+							);
+
+							const showMainDataSourceRequiredForAggregationsError =
+								!mainDataSource &&
+								selection.dataSource?.source?.type ===
+									SearchStatementNodeType.AggregationStatement;
+
+							const showInvalidAggregationSourceError =
+								!showMainDataSourceRequiredForAggregationsError &&
+								selection.dataSource?.source?.type ===
+									SearchStatementNodeType.AggregationStatement &&
+								!selection.dataSource.source.isValid;
+
+							return (
+								<span
+									key={selection.dataSource?.id}
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 4,
+										marginBottom: 16,
+									}}
+								>
+									<h4
+										key={dataSourcesUpdateKey}
+										style={{
+											margin: 0,
+											fontSize: 12,
+											fontWeight: 500,
+											color: 'rgba(0, 0, 0, 0.54)',
+										}}
+									>
+										From <b>{selection.dataSource?.as}</b>
+										{' ' + selection.dataSource?.sourceType}
+									</h4>
+
+									<br className='eighth-space' />
+
+									{showMainDataSourceRequiredForAggregationsError ||
+									showInvalidAggregationSourceError ? (
+										<span
+											style={{
+												display: 'flex',
+												alignItems: 'center',
+												gap: 12,
+											}}
+										>
+											<img
+												className='search-statement__error-icon'
+												src={WarningIcon}
+											/>
+
+											{showMainDataSourceRequiredForAggregationsError && (
+												<p
+													style={{
+														margin: 0,
+														fontSize: 10,
+														color: 'rgba(0,0,0,0.54)',
+													}}
+												>
+													<b>Ignored aggregation</b>
+													<br />
+													Aggregations require a main data source to be merged.
+													Add a main data source to the search statement to use
+													this aggregation
+												</p>
+											)}
+											{showInvalidAggregationSourceError && (
+												<p
+													style={{
+														margin: 0,
+														fontSize: 10,
+														color: 'rgba(0,0,0,0.54)',
+													}}
+												>
+													<b>Invalid aggregation source</b>
+													<br />
+													Resolve the errors in the aggregation selection and
+													try again
+												</p>
+											)}
+										</span>
+									) : (
+										<>
+											<div
+												style={{
+													display: 'flex',
+													alignItems: 'center',
+													gap: 8,
+												}}
+											>
+												<div
+													style={{
+														display: 'flex',
+														flexDirection: 'column',
+													}}
+												>
+													<div
+														style={{
+															display: 'flex',
+															alignItems: 'center',
+															gap: 8,
+														}}
+													>
+														<input
+															type='checkbox'
+															id={`search-statement-dialog-${selection.dataSource?.id}-checkbox`}
+															checked={!!selection.allColumnsSelected}
+															disabled={!entity.editable || hasAggregation}
+															onChange={(e) => {
+																if (!!selection.allColumnsSelected) {
+																	removeSelection(selection.allColumnsSelected);
+																} else {
+																	const newAllColumnsSelection =
+																		new AllColumnsSelector(
+																			searchStatementState,
+																		);
+
+																	newAllColumnsSelection.parent =
+																		selection.dataSource;
+
+																	addSelection(newAllColumnsSelection);
+																}
+															}}
+															style={{
+																margin: 0,
+															}}
+														/>
+														<label
+															htmlFor={`search-statement-dialog-${selection.dataSource?.id}-checkbox`}
+															style={{
+																fontSize: 10,
+																color: 'rgba(0,0,0,0.54)',
+															}}
+														>
+															{'Take all its properties (as inherited)'}
+														</label>
+													</div>
+
+													{!!selection.allColumnsSelected && (
+														<p
+															style={{
+																margin: 0,
+																fontSize: 10,
+																color: 'rgba(0,0,0,0.54)',
+																marginLeft: 22,
+															}}
+														>
+															{selection.allColumnsSelected.selectedColumns.map(
+																(column, index) =>
+																	column.as +
+																	(selection.allColumnsSelected.selectedColumns
+																		.length -
+																		1 ===
+																	index
+																		? ''
+																		: ', '),
+															)}
+														</p>
+													)}
+												</div>
+
+												{searchStatementStateLib.resolveAreThereConflictingColumnsInSelectAll(
+													selection.allColumnsSelected,
+												) && (
+													<MuiTooltip
+														placement='right'
+														enterDelay={300}
+														leaveDelay={200}
+														arrow
+														title={
+															<>
+																<p
+																	style={{
+																		margin: 0,
+																		fontSize: 10,
+																		marginBottom: 4,
+																	}}
+																>
+																	Duplicate property names:
+																</p>
+																{selection.allColumnsSelected?.selectedColumns
+																	.filter((column) =>
+																		searchStatementState.duplicateColumnNames.includes(
+																			column.as,
+																		),
+																	)
+																	.map((column, index) => (
+																		<span
+																			key={column.id}
+																			style={{
+																				display: 'flex',
+																				alignItems: 'center',
+																				gap: 6,
+																				marginTop: index === 0 ? 0 : 4,
+																			}}
+																		>
+																			{/* Dot */}
+																			<div
+																				style={{
+																					width: 4,
+																					height: 4,
+																					borderRadius: '50%',
+																					background: 'rgba(255,255,255,0.7)',
+																				}}
+																			/>
+																			<p
+																				key={column.id}
+																				style={{
+																					margin: 0,
+																					fontSize: 16,
+																					fontWeight: 600,
+																				}}
+																			>
+																				{column.as}
+																			</p>
+																		</span>
+																	))}
+																<p
+																	style={{
+																		margin: 0,
+																		fontSize: 8,
+																		marginTop: 10,
+																		color: 'rgba(255,255,255,0.7)',
+																	}}
+																>
+																	All duplicate columns will be ignored in the
+																	final result
+																</p>
+															</>
+														}
+													>
+														<img
+															className='search-statement__error-icon'
+															src={WarningIcon}
+														/>
+													</MuiTooltip>
+												)}
+											</div>
+
+											<br className='quarter-space' />
+											<div className='search-statement__numbered-rows-container'>
+												{selection.columns.map((columnRef, index) => (
+													<SourcedColumnOutputSelector
+														key={columnRef.id}
+														columnRef={columnRef}
+														index={index}
+													/>
+												))}
+												{/* Small undelined link button to add new sort order */}
+												{/* Don't render if there is an incomplete selection already for this source */}
+												{showAddNewPropertyButton && (
+													<button
+														id='search-statement-dialog-add-sort-order-button'
+														disabled={!entity.editable}
+														onClick={() => {
+															const newSelection = new ColumnRef(
+																searchStatementState,
+															);
+
+															newSelection.parent = selection.dataSource;
+
+															addSelection(newSelection);
+														}}
+														style={{
+															fontSize: 12,
+															color: 'rgba(0,0,0,0.54)',
+															border: 0,
+															background: 'none',
+															cursor: 'pointer',
+															textDecoration: 'underline',
+															display: 'flex',
+															padding: 0,
+														}}
+													>
+														Add property
+													</button>
+												)}
+											</div>
+										</>
+									)}
+								</span>
+							);
+						})}
+					</div>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+export default OutputFormatSection;