@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,271 @@
+import React, { useState } from 'react';
+import './search-statement-dialog.css';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import { IconButton } from '@mui/material';
+import {
+	SearchStatementBuilderTabType,
+	useSearchStatementContext
+} from './search-statement-context';
+import InlineInputMap from './InlineInputMap';
+import DataSourceSelection from './DataSourceSelection';
+import {
+	getDatabaseEntity,
+	searchStatementDefs,
+	searchStatementState as searchStatementStateLib
+} from '@elyx-code/project-logic-tree';
+
+const { AggregationStatement, NestedSearchStatement } = searchStatementStateLib;
+
+const { DataSourceType } = searchStatementDefs;
+
+type NestedSearchStatement = searchStatementStateLib.NestedSearchStatement;
+type AggregationStatement = searchStatementStateLib.AggregationStatement;
+type DataSourceType = searchStatementDefs.DataSourceType;
+
+export interface IMainSourceAndInputsSectionProps {
+	hideInputs?: boolean;
+}
+
+const MainSourceAndInputsSection: React.FC<
+	IMainSourceAndInputsSectionProps
+> = ({ hideInputs }) => {
+	const {
+		mainDataSource,
+		setMainDataSource,
+		dataSources,
+		tabManager,
+		entity
+	} = useSearchStatementContext();
+
+	const useForceUpdate = () => {
+		const [value, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				marginLeft: 80,
+				paddingRight: 40,
+				marginTop: 20,
+				// minWidth: 0 lets the inner inputs row collapse and scroll
+				// horizontally instead of forcing this column flex (and the
+				// sections below) to grow with the inputs' total width.
+				minWidth: 0
+			}}
+		>
+			{!hideInputs && (
+				<>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: 16
+						}}
+					>
+						<h3
+							style={{ margin: 0, fontSize: 12, fontWeight: 500 }}
+						>
+							Input values
+						</h3>
+						<IconButton
+							id="search-statement-dialog-add-input-value-button"
+							aria-label="add-input-value"
+							size="small"
+							disabled={!entity.editable}
+							style={{
+								padding: 4,
+								fontSize: 14,
+								width: 22,
+								height: 22
+							}}
+							onClick={() => {
+								tabManager.addTab(
+									{
+										entity: SearchStatementBuilderTabType.NewInputTab
+									},
+									true
+								);
+							}}
+						>
+							<i className="fa-solid fa-plus" />
+						</IconButton>
+						<Tooltip
+							anchorQuerySelector="#search-statement-dialog-add-input-value-button"
+							placement="bottom"
+							openDelay={300}
+						>
+							Add a new input value from the canvas logic
+							<br />
+							You can give it a dynamic value or a fixed value to
+							use within the statement builder
+						</Tooltip>
+					</div>
+
+					{!!entity?.inputs.length && (
+						<br className="quarter-space" />
+					)}
+
+					<div
+						style={{
+							display: 'flex',
+							gap: 8,
+							// Contain horizontal overflow inside this row only so a
+							// long list of inputs doesn't push the sections below
+							// (Data aggregation, Filter conditions, Output format) to
+							// the right. paddingBottom leaves room for the scrollbar.
+							overflowX: 'auto',
+							padding: 4,
+							paddingBottom: 8
+						}}
+					>
+						{entity?.inputs.map((input) => (
+							<InlineInputMap
+								key={input.id}
+								input={input}
+								onEdit={() => {
+									// Open on new tab
+									tabManager.addTab(
+										{
+											entity: SearchStatementBuilderTabType.InputDeclarationTab,
+											input: input.declaration
+										},
+										true
+									);
+								}}
+								onDelete={() => {
+									forceUpdate();
+								}}
+							/>
+						))}
+					</div>
+
+					<br />
+				</>
+			)}
+
+			<DataSourceSelection
+				options={dataSources.filter(
+					(source) => source.sourceType !== DataSourceType.Aggregation
+				)}
+				onChange={(dataSource) => {
+					setMainDataSource(dataSource);
+				}}
+				alias={mainDataSource?.as}
+				onAliasChange={(alias) => {
+					if (mainDataSource?.sourceType === DataSourceType.Table) {
+						mainDataSource.as = alias;
+					} else if (
+						mainDataSource?.sourceType === DataSourceType.Query
+					) {
+						(mainDataSource.source as NestedSearchStatement).as =
+							alias;
+					} else if (
+						mainDataSource?.sourceType ===
+						DataSourceType.Aggregation
+					) {
+						(mainDataSource.source as AggregationStatement).as =
+							alias;
+					}
+
+					setMainDataSource(mainDataSource);
+				}}
+				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 '';
+				}}
+				value={mainDataSource}
+				id="search-statement-dialog-data-source-select"
+			/>
+		</section>
+	);
+};
+
+export default MainSourceAndInputsSection;

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

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react';
+import './search-statement-dialog.css';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import {
+	ITabManager,
+	useSearchStatementContext,
+	withNestedSearchStatementProvider,
+} from './search-statement-context';
+import { EditorService } from '../../../services/editor';
+import DataAggregationSection from './DataAggregationSection';
+import FilterConditionsSection from './FilterConditionsSection';
+import OutputFormatSection from './OutputFormatSection';
+import ResultsSection from './ResultsSection';
+import Button from '../../../lib/button/Button';
+import MainSourceAndInputsSection from './MainSourceAndInputsSection';
+import { searchStatementState as searchStatementStateLib } from '@elyx-code/project-logic-tree';
+import { popupNotification } from '../../../popup-notification';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+const { SearchStatementState } = searchStatementStateLib;
+
+type SearchStatementState = searchStatementStateLib.SearchStatementState;
+
+export interface INestedSearchStatementBuilderProps {
+	project: EditorService;
+	parent: SearchStatementState,
+	query: SearchStatementState,
+	ready: boolean;
+	tabManager: ITabManager;
+	// recalculateParent: () => void;
+	onClose?: (e: any) => void;
+}
+
+const NestedSearchStatementBuilder: React.FC<
+	INestedSearchStatementBuilderProps
+> = ({ onClose, query, parent }) => {
+	const { project, entity, searchStatementState } = useSearchStatementContext();
+
+	Logger.log('query: ', query);
+	Logger.log('parent: ', parent);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	useEffect(() => {
+		project?.on('value-written', ({ owner, value: _ }: any = {}) => {
+			if ((entity?.inputs || []).includes(owner)) {
+				forceUpdate();
+			}
+		});
+
+		project?.on('value-removed', ({ owner }: any = {}) => {
+			if ((entity?.inputs || []).includes(owner)) {
+				forceUpdate();
+			}
+		});
+	}, [entity]);
+
+	if (!project) {
+		return null;
+	}
+
+	return (
+		<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%',
+				}}
+			>
+				<MainSourceAndInputsSection hideInputs />
+
+				<hr
+					style={{ margin: '20px 0 0 0', border: '1px solid rgba(0,0,0,0.08)' }}
+				/>
+
+				<DataAggregationSection />
+
+				<hr
+					style={{ margin: '1px 0', border: '1px solid rgba(0,0,0,0.08)' }}
+				/>
+
+				<FilterConditionsSection />
+
+				<hr
+					style={{ margin: '1px 0', border: '1px solid rgba(0,0,0,0.08)' }}
+				/>
+
+				<OutputFormatSection />
+
+				<hr
+					style={{ margin: '1px 0', border: '1px solid rgba(0,0,0,0.08)' }}
+				/>
+
+				<ResultsSection />
+			</span>
+
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+					padding: '0 40px',
+				}}
+			>
+				<Button
+					id='search-statement-dialog-save-query-button'
+					onClick={(e: any) => {
+						const queryString = searchStatementState.toQuery();
+
+						navigator.clipboard.writeText(queryString);
+
+						popupNotification({
+							text: 'The query has been copied to the clipboard',
+						});
+					}}
+					color='primary'
+					variant='outlined'
+				>
+					Copy as SQL
+				</Button>
+				<Tooltip
+					anchorQuerySelector='#search-statement-dialog-save-query-button'
+					placement='bottom'
+					openDelay={300}
+				>
+					Copy as a native SQL query
+				</Tooltip>
+				<Button
+					id='search-statement-dialog-done-button'
+					onClick={(e: any) => {
+						onClose?.(e);
+					}}
+					color='primary'
+				>
+					Done
+				</Button>
+				<Tooltip
+					anchorQuerySelector='#search-statement-dialog-done-button'
+					placement='bottom'
+					openDelay={300}
+				>
+					Save the changes and return to the parent search statement
+				</Tooltip>
+			</div>
+		</div>
+	);
+};
+
+export default withNestedSearchStatementProvider<INestedSearchStatementBuilderProps>(
+	NestedSearchStatementBuilder
+);