@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,621 @@
+import React, { useEffect, useState } from 'react';
+import {
+	Collapse,
+	IconButton,
+	Tooltip as MuiTooltip,
+	Autocomplete,
+	TextField,
+	Box
+} from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import DataSourceSelection from './DataSourceSelection';
+import ConditionBuilder from './ConditionBuilder';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+import {
+	getDatabaseEntity,
+	searchStatementState as searchStatementStateLib,
+	searchStatementDefs
+} from '@elyx-code/project-logic-tree';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+
+const { AggregationStatement } = searchStatementStateLib;
+const { AggregationStatementType, DataSourceType } = searchStatementDefs;
+
+type AggregationStatement = searchStatementStateLib.AggregationStatement;
+type AggregationStatementType = searchStatementDefs.AggregationStatementType;
+
+export function resolveJoinTypeExplanationText(
+	joinType: AggregationStatementType
+): string {
+	switch (joinType) {
+		case AggregationStatementType.Inner:
+			return 'Returns only the rows with matches in both data sources.';
+		case AggregationStatementType.Left:
+			return 'Returns all rows from the main data source, and matched rows from the aggregated data source.';
+		case AggregationStatementType.Right:
+			return 'Returns all rows from the aggregated data source, and matched rows from the main source.';
+		case AggregationStatementType.Full:
+			return 'Returns all rows when there is a match in either main or aggregated source.';
+		case AggregationStatementType.Cross:
+			return 'Returns the Cartesian product of both sources (every row paired with every other).';
+		case AggregationStatementType.Self:
+			return 'Joins a data source with itself to compare rows within the same data source.';
+		case AggregationStatementType.Natural:
+			return 'Automatically joins data sources based on properties with the same name.';
+	}
+
+	return '';
+}
+
+export function resolveJoinTypeOptionSubLabel(
+	joinType: AggregationStatementType
+): string {
+	switch (joinType) {
+		case AggregationStatementType.Inner:
+			return 'Matched rows from both data sources';
+		case AggregationStatementType.Left:
+			return 'All rows from the main data source, NULL if no match in the aggregated data source.';
+		case AggregationStatementType.Right:
+			return 'All rows from the aggregated data source, NULL if no match in the main data source.';
+		case AggregationStatementType.Full:
+			return 'All rows from both data sources, NULL for missing matches on either side.';
+		case AggregationStatementType.Cross:
+			return 'Every possible combination of rows from both data sources.';
+		case AggregationStatementType.Self:
+			return 'Rows where one entry is compared with another entry from the same data source.';
+		case AggregationStatementType.Natural:
+			return 'Automatically matched rows based on property names.';
+	}
+
+	return '';
+}
+
+export const AggregationElement = ({
+	aggregation
+}: {
+	aggregation: AggregationStatement;
+}) => {
+	const {
+		searchStatementState,
+		editAggregation,
+		removeAggregation,
+		entity,
+		dataSources,
+		aggregationsUpdateKey,
+		mainDataSource
+	} = useSearchStatementContext();
+
+	const resolvedOptions = [
+		...entity.inputs,
+		...(searchStatementState.from?.columns || []),
+		...(aggregation.dataSource?.columns || [])
+	];
+
+	return (
+		<div
+			key={aggregationsUpdateKey}
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 4,
+				marginLeft: 40
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 10
+				}}
+			>
+				<div
+					style={{
+						display: 'flex'
+					}}
+				>
+					<IconButton
+						id="search-statement-dialog-remove-aggregation-clause-button"
+						aria-label="delete"
+						size="small"
+						disabled={!entity.editable}
+						onClick={() => {
+							removeAggregation(aggregation);
+						}}
+						style={{
+							width: 30,
+							height: 30,
+							fontSize: 18,
+							color: '#F65858'
+						}}
+					>
+						<i className="fa-regular fa-trash" />
+					</IconButton>
+					<Tooltip
+						anchorQuerySelector="#search-statement-dialog-remove-aggregation-clause-button"
+						placement="bottom"
+						openDelay={300}
+					>
+						Remove this aggregation clause
+					</Tooltip>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column'
+					}}
+				>
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Merge
+					</h3>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 10,
+							color: 'rgba(0,0,0,0.54)'
+						}}
+					>
+						Uses data from a different entity for the output values
+					</p>
+				</div>
+			</div>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					gap: 4,
+					marginLeft: 40
+				}}
+			>
+				<br className="quarter-space" />
+
+				<div
+					style={{
+						display: 'flex',
+						// flex-start so the merge-strategy field stays aligned with
+						// the top of the data-source row instead of getting vertically
+						// centered against a tall data-source (e.g. function with args).
+						alignItems: 'flex-start',
+						gap: 12
+					}}
+				>
+					{/* Data source field */}
+					<DataSourceSelection
+						options={dataSources.filter(
+							(source) =>
+								source.sourceType !==
+									DataSourceType.Aggregation &&
+								// A JOIN should not reuse another data source's function call —
+								// it creates its own. Existing function-typed data sources from
+								// elsewhere in the search statement would otherwise show up in
+								// this dropdown alongside the registry entries with the same
+								// name, looking like duplicates to the user.
+								source.sourceType !== DataSourceType.Function
+						)}
+						onChange={(dataSource) => {
+							// If the data source isn't the same as the previous one, also delete the 'on' clause
+							if (
+								!!aggregation.dataSource &&
+								aggregation.dataSource?.entity?.id !==
+									dataSource?.entity?.id
+							) {
+								aggregation.on = null;
+							}
+
+							aggregation.dataSource = dataSource;
+							// Keep aggregation.as in sync with the new dataSource's
+							// alias. `aggregation.isValid` requires `!!this.as`, but
+							// the SQL emitter writes the alias from
+							// `aggregation.dataSource.as`. Without syncing here, a
+							// freshly-attached data source with its own alias (e.g.
+							// a table whose `.as` is the PascalCase name, or a new
+							// nested search seeded with a default alias) leaves
+							// aggregation.as empty, the aggregation is judged
+							// invalid, and the entire JOIN clause is silently
+							// dropped on the next toQuery() — destroying the user's
+							// work on the round-trip back through the saved SQL.
+							aggregation.as = dataSource?.as || null;
+							editAggregation(aggregation);
+						}}
+						alias={aggregation?.as}
+						onAliasChange={(alias) => {
+							if (aggregation) {
+								aggregation.as = alias;
+								// The SQL emitter reads the JOIN alias from
+								// `aggregation.dataSource.as` (and for query sources,
+								// from the underlying NestedSearchStatement.as via the
+								// DataSource setter). Without this the DataSource-level
+								// alias stays empty, the dropdown keeps showing `""`,
+								// and `AS <empty>` breaks the JOIN parse.
+								if (aggregation.dataSource) {
+									aggregation.dataSource.as = alias;
+								}
+								editAggregation(aggregation);
+							}
+						}}
+						value={aggregation.dataSource}
+						alwaysShowAlias
+						id={`search-statement-dialog--merge-data-source--${aggregation.id}--select`}
+						getOptionDisabled={(option) => {
+							if (option.sourceType === DataSourceType.Table) {
+								// If the entity is not part of the same database as the main data source,
+								// disable the option
+								const assignedDatabaseEntity =
+									getDatabaseEntity(option.entity);
+
+								console.log(
+									'assignedDatabaseEntity',
+									assignedDatabaseEntity?.name
+								);
+
+								if (!assignedDatabaseEntity) {
+									return true;
+								}
+
+								if (!mainDataSource) {
+									return false;
+								}
+
+								const mainDataSourceDatabaseEntity =
+									getDatabaseEntity(mainDataSource?.entity);
+
+								console.log(
+									'mainDataSourceDatabaseEntity',
+									mainDataSourceDatabaseEntity?.name
+								);
+
+								if (
+									mainDataSourceDatabaseEntity &&
+									assignedDatabaseEntity?.id !==
+										mainDataSourceDatabaseEntity?.id
+								) {
+									return true;
+								}
+							}
+
+							return false;
+						}}
+						getTooltip={(option) => {
+							// Return simple tooltip, or the disabled reason
+							// If the entity is not part of the same database as the main data source,
+							// disable the option
+							if (option.sourceType === DataSourceType.Table) {
+								const assignedDatabaseEntity =
+									getDatabaseEntity(option.entity);
+
+								if (!assignedDatabaseEntity) {
+									return (
+										<>
+											This entity is not part of a
+											database
+											<br />
+											Please assign a parent database to
+											this entity on the canvas
+										</>
+									);
+								}
+
+								if (!mainDataSource) {
+									return '';
+								}
+
+								const mainDataSourceDatabaseEntity =
+									getDatabaseEntity(mainDataSource?.entity);
+
+								if (
+									mainDataSourceDatabaseEntity &&
+									assignedDatabaseEntity?.id !==
+										mainDataSourceDatabaseEntity?.id
+								) {
+									return (
+										<>
+											This entity is part of a different
+											database than the currently selected
+											main data source
+											<br />
+											All data sources must be part of the
+											same database
+										</>
+									);
+								}
+							}
+
+							return '';
+						}}
+					/>
+
+					{/* Join type (INNER, LEFT, etc.) */}
+					<Autocomplete
+						disablePortal
+						disabled={!entity.editable}
+						options={Object.values(AggregationStatementType)}
+						id={`search-statement-dialog--merge-join-type--${aggregation.id}--select`}
+						sx={{
+							width: 200,
+							flexShrink: 0
+						}}
+						value={aggregation.joinType}
+						onChange={(e, newValue) => {
+							aggregation.joinType =
+								newValue as AggregationStatementType;
+							editAggregation(aggregation);
+						}}
+						getOptionLabel={(option) =>
+							option.charAt(0).toUpperCase() +
+							option.slice(1).toLowerCase()
+						}
+						renderOption={(props, option) => {
+							const { key, ...optionProps } = props;
+
+							return (
+								<MuiTooltip
+									key={key}
+									title={resolveJoinTypeExplanationText(
+										option
+									)}
+									placement="right"
+									arrow
+									enterDelay={200}
+									leaveDelay={200}
+								>
+									<Box
+										component="li"
+										sx={{
+											'& > img': { mr: 2, flexShrink: 0 }
+										}}
+										{...optionProps}
+									>
+										<span
+											style={{
+												display: 'flex',
+												flexDirection: 'column'
+											}}
+										>
+											<span
+												style={{
+													display: 'flex',
+													flexDirection: 'column'
+												}}
+											>
+												{option
+													.charAt(0)
+													.toUpperCase() +
+													option
+														.slice(1)
+														.toLowerCase()}
+											</span>
+											<p
+												style={{
+													margin: 0,
+													fontSize: 10,
+													color: 'rgba(0,0,0,0.54)'
+												}}
+											>
+												{resolveJoinTypeOptionSubLabel(
+													option
+												)}
+											</p>
+										</span>
+									</Box>
+								</MuiTooltip>
+							);
+						}}
+						renderInput={(params) => (
+							<TextField
+								{...params}
+								label="Merge strategy"
+								variant="outlined"
+								size="small"
+							/>
+						)}
+					/>
+
+					{!aggregation.isValid && (
+						<MuiTooltip
+							placement="bottom"
+							enterDelay={300}
+							leaveDelay={200}
+							arrow
+							title={
+								<>
+									This aggregation is not fully resolved.
+									<br />
+									Please make sure to select a data source and
+									set an alias as well as adding a valid
+									condition.
+									<br />
+									<br />
+									If the aggregation is not resolved it will
+									be ignored in the final search execution.
+								</>
+							}
+						>
+							<img
+								className="search-statement__error-icon"
+								id={`data-type-builder--${aggregation?.id}--error-icon`}
+								style={{
+									marginTop: 8
+								}}
+								src={WarningIcon}
+							/>
+						</MuiTooltip>
+					)}
+				</div>
+
+				{aggregation.joinType !== AggregationStatementType.Cross && (
+					<>
+						<br className="eighth-space" />
+						<span>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 10,
+									color: 'rgba(0,0,0,0.54)'
+								}}
+							>
+								Merge entity with the original data source
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: 10,
+									color: 'rgba(0,0,0,0.54)'
+								}}
+							>
+								where the condition matches
+							</p>
+						</span>
+
+						<br className="quarter-space" />
+
+						<ConditionBuilder
+							condition={aggregation.on}
+							options={resolvedOptions}
+							onChange={(updatedCondition) => {
+								aggregation.on = updatedCondition;
+
+								editAggregation(aggregation);
+							}}
+						/>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const DataAggregationSection = ({}: {}) => {
+	const {
+		searchStatementState,
+		hydrationReady,
+		aggregations,
+		addAggregation,
+		mainDataSource,
+		entity
+	} = useSearchStatementContext();
+
+	const [sectionOpen, setSectionOpen] = useState(null);
+
+	useEffect(() => {
+		if (hydrationReady) {
+			setSectionOpen(!!aggregations.length && !!mainDataSource);
+		}
+	}, [hydrationReady]);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0
+			}}
+		>
+			<EntityDialogSectionHeader
+				title="Data aggregation"
+				subtitle="Aggregate data from entries in different data sources into one final entry"
+				hideShowSuffix="the aggregation section"
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+				headerEndIcon={
+					!mainDataSource &&
+					!!aggregations.length && (
+						<MuiTooltip
+							placement="bottom"
+							enterDelay={0}
+							leaveDelay={200}
+							arrow
+							title={
+								<>
+									Aggregations require a main data source to
+									be set up first.
+									<br />
+									<br />
+									Please select a data source to start adding
+									aggregations.
+									<br />
+									Existing aggregations will be ignored in the
+									final results
+								</>
+							}
+						>
+							<img
+								className="search-statement__error-icon"
+								id={`all-aggregations--error-icon`}
+								src={WarningIcon}
+							/>
+						</MuiTooltip>
+					)
+				}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 14
+					}}
+				>
+					{aggregations.map((aggregation) => (
+						<AggregationElement
+							key={aggregation.id}
+							aggregation={aggregation}
+						/>
+					))}
+				</div>
+
+				{!!aggregations.length && <br />}
+
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 18,
+						marginLeft: 40
+					}}
+				>
+					<IconButton
+						id="search-statement-dialog-add-aggregation-clause-button"
+						aria-label="delete"
+						size="small"
+						color="primary"
+						style={{ width: 30, height: 30, fontSize: 18 }}
+						// Disable if there is already an aggreation not fully set up
+						disabled={
+							!entity.editable ||
+							!!aggregations.find(
+								(agg) => !agg.dataSource || !agg.id
+							)
+						}
+						onClick={() => {
+							addAggregation(
+								new AggregationStatement(searchStatementState)
+							);
+						}}
+					>
+						<i className="fa-regular fa-plus" />
+					</IconButton>
+					<Tooltip
+						anchorQuerySelector="#search-statement-dialog-add-aggregation-clause-button"
+						placement="bottom"
+						openDelay={300}
+					>
+						Add a new separate aggregation clause
+					</Tooltip>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 10,
+							color: 'rgba(0,0,0,0.54)'
+						}}
+					>
+						Add new merge clause
+					</p>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+export default DataAggregationSection;