@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,344 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchStatementContext } from './search-statement-context';
+import DisplayDataStructure from '../../../lib/display-data-structure';
+import { popupNotification } from '../../../popup-notification';
+import { createQueryErrorMessage } from '../../../services/local-relational-database/utils';
+import { ISelectQueryResultV2 } from '../../../services/local-relational-database';
+import Table from '../../../lib/table/Table';
+import { ITableRowDataPoint, TableSortType } from '../../../lib/table/types';
+import {
+	IValueResolutionContext,
+	searchStatementDefs
+} from '@elyx-code/project-logic-tree';
+import { fromColumnRefToTableColumnType } from '../../../services/database';
+import { getLiteralValueNameFromDataType } from '../../../services/execution/utils';
+import {
+	createStateFromType,
+	ILiteralValueTransfer,
+	LiteralValueState,
+	checkIsNullable
+} from '@elyx-code/project-logic-tree';
+import { resolveValue } from '../../../services/execution/value-resolution';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { DynamicValueTypes } from '../../../services/editor/value-store';
+
+const { SortStatementDirection } = searchStatementDefs;
+
+type SortStatementDirection = searchStatementDefs.SortStatementDirection;
+
+const NUMBER_OF_ROWS = 5;
+
+const ResultsSection = ({}: {}) => {
+	const {
+		asList,
+		sqlAST,
+		resolveDatabaseClient,
+		searchStatementState,
+		entity,
+		project,
+		isNested
+	} = useSearchStatementContext();
+
+	const [result, setResult] = useState<ISelectQueryResultV2 | null>(null);
+	const [isLoadingResults, setIsLoadingResults] = useState<boolean>(false);
+	const [currentPage, setCurrentPage] = useState<number>(1);
+
+	const removeValue = () => {
+		if (isNested) {
+			return;
+		}
+
+		const outputMap = entity.outputs[0];
+
+		if (!outputMap) {
+			return;
+		}
+
+		project.persistedExecutionResults.removeValue(outputMap.id);
+	};
+
+	// Writes value to the local testing values store
+	const writeValue = (
+		newValue:
+			| {
+					[columnName: string]:
+						| string
+						| null
+						| number
+						| boolean
+						| Date;
+			  }[]
+			| {
+					[columnName: string]:
+						| string
+						| null
+						| number
+						| boolean
+						| Date;
+			  }
+			| null
+	) => {
+		if (isNested) {
+			return;
+		}
+
+		const outputMap = entity.outputs[0];
+
+		if (!outputMap) {
+			return;
+		}
+
+		let literalValueEntity = project.persistedExecutionResults.readValue(
+			outputMap.id
+		);
+
+		if (!literalValueEntity) {
+			const literalValueTransfer: ILiteralValueTransfer =
+				LiteralValueState.new(null);
+			literalValueTransfer.name = getLiteralValueNameFromDataType(
+				outputMap.getDataType(null)
+			);
+			literalValueTransfer.standaloneParent = outputMap.toReference();
+
+			const newInstance = createStateFromType(
+				literalValueTransfer,
+				project.logic
+			) as LiteralValueState;
+
+			newInstance.setStandaloneParent(outputMap, null);
+			newInstance.initChildren(null);
+
+			literalValueEntity = newInstance;
+		}
+
+		literalValueEntity.metaSync(
+			{
+				value: newValue
+			},
+			null
+		);
+
+		project.persistedExecutionResults.writeValue(
+			outputMap,
+			literalValueEntity
+		);
+	};
+
+	// Compiles and runs the latest query as raw SQL
+	const queryDatabase = async () => {
+		Logger.log('Querying database...: ', searchStatementState);
+		try {
+			setIsLoadingResults(true);
+
+			const dbClient = resolveDatabaseClient();
+
+			Logger.log('dbClient:', dbClient);
+
+			const resolvedValues = (entity?.inputs || []).map((input) =>
+				resolveValue(input,
+        //   {
+				// 	...project,
+				// 	getValueTypePreference() {
+				// 		return DynamicValueTypes.Testing;
+				// 	}
+				// } as unknown as IValueResolutionContext
+        project,
+        false
+      )
+			);
+
+			console.log(
+				'Resolved value: ',
+				resolvedValues.map(
+					(dv) =>
+						`${dv.type}: ${JSON.stringify(dv.value?.value, null, 2)}`
+				)
+			);
+
+			const newResult: ISelectQueryResultV2 =
+				(await dbClient?.runStatement(
+					searchStatementState,
+					resolvedValues
+				)) as ISelectQueryResultV2;
+
+			if (!!newResult) {
+				const newValue = asList
+					? newResult.rows
+					: newResult.rows[0] || null;
+				writeValue(newValue);
+			} else {
+				removeValue();
+			}
+
+			Logger.log('Query result:', newResult);
+			setResult(newResult);
+		} catch (error) {
+			Logger.error(error);
+			const message = createQueryErrorMessage(error, []);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+
+		setIsLoadingResults(false);
+	};
+
+	useEffect(() => {
+		// Query the database and select the first row as a single result
+		queryDatabase();
+	}, [sqlAST]);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingTop: 20,
+				width: '100%',
+				minWidth: 0
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 16,
+					marginLeft: 80
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 4
+					}}
+				>
+					<h2
+						style={{
+							margin: 0,
+							fontSize: 16,
+							fontWeight: 400
+						}}
+					>
+						Results
+					</h2>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 10,
+							color: 'rgba(0,0,0,0.54)'
+						}}
+					>
+						The final results, found by your search statement
+					</p>
+				</div>
+			</div>
+
+			<br />
+
+			{asList ? (
+				<div style={{ marginLeft: 40, marginRight: 40, minWidth: 0 }}>
+					<Table
+						project={project}
+						tableKey="search-results-table-key"
+						totalItems={result?.total || 0}
+						searches={[]}
+						sorts={(searchStatementState?.validSortings || []).map(
+							(sort) => ({
+								column: sort.column.as,
+								direction:
+									sort.direction ===
+									SortStatementDirection.Ascending
+										? TableSortType.ASC
+										: TableSortType.DESC
+							})
+						)}
+						emptyMessage={
+							searchStatementState.isValid
+								? 'No results found'
+								: "The current state of the search statement isn't valid. Please fix the errors shown and try again."
+						}
+						footerHelperText="Modifying the database directly bypasses the code. No events or actions are triggered."
+						loading={isLoadingResults}
+						columns={(result?.columns || []).map((column) => ({
+							value: column.as,
+							label: column.as,
+							sortable: false,
+							// TODO: Fixed this type error
+							sort: null as any,
+							searchable: false,
+							hidden: false,
+							editable: false,
+							type: fromColumnRefToTableColumnType(column),
+							primaryKey:
+								searchStatementState?.primaryKey?.id ===
+								column.id,
+							foreignKey: null as any,
+							nullable: (column as any).property
+								? checkIsNullable(
+										(column as any).property.dataType
+									)
+								: true,
+							size: 'lg'
+						}))}
+						hideCreate={!result?.tableName}
+						hideDelete={!result?.tableName}
+						hideSelection={!result?.tableName}
+						hideRowActions={!result?.tableName}
+						onSearch={() => {}}
+						onSearchesUpdate={() => {}}
+						onSelection={() => {}}
+						rows={(result?.rows || []).map((row) => ({
+							onSelect() {},
+							data: (result?.columns || []).map((column) => ({
+								value:
+									row[column.as] !== null &&
+									row[column.as] !== undefined
+										? String(row[column.as])
+										: null
+							})) as ITableRowDataPoint[],
+							menuOptions: [] as any[]
+						}))}
+						onCreate={() => {}}
+						onUpdate={() => {}}
+						onDelete={() => {}}
+						onDeleteMany={() => {}}
+						onDeleteAll={() => {}}
+						onSort={() => {}}
+						onSortsUpdate={() => {}}
+						pagination={{
+							onChange: (page: number) => {
+								setCurrentPage(page);
+							},
+							total:
+								Math.ceil(
+									(result?.total || 0) / NUMBER_OF_ROWS
+								) || 1,
+							page: currentPage
+						}}
+					/>
+				</div>
+			) : isLoadingResults ? (
+				<p className="search-statement__results-section__single-item-empty-placeholder-text">
+					Loading...
+				</p>
+			) : !!result?.rows[0] ? (
+				<span
+					style={{
+						marginLeft: 80
+					}}
+				>
+					<DisplayDataStructure value={result?.rows[0]} />
+				</span>
+			) : (
+				<p className="search-statement__results-section__single-item-empty-placeholder-text">
+					No entry found
+				</p>
+			)}
+		</section>
+	);
+};
+
+export default ResultsSection;

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

@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react';
+import './search-statement-dialog.css';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import {
+	ITabManager,
+	useSearchStatementContext,
+	withSearchStatementProvider,
+} 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 EntityMetadataSection from './EntityMetadataSection';
+import { Alert } from '@mui/material';
+import { popupNotification } from '../../../popup-notification';
+
+export interface ISearchStatementBuilderProps {
+	project: EditorService;
+	ready: boolean;
+	tabManager: ITabManager;
+	onClose?: (e: any) => void;
+}
+
+const SearchStatementBuilder: React.FC<ISearchStatementBuilderProps> = ({
+	onClose,
+}) => {
+	const { project, entity, searchStatementState } = useSearchStatementContext();
+
+	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;
+	}
+
+	const validationErrors = searchStatementState?.validationErrors || [];
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				justifyContent: 'space-between',
+				width: '100%',
+				minWidth: 0,
+			}}
+		>
+			<span
+				style={{
+					width: '100%',
+					maxWidth: '100%',
+					minWidth: 0,
+					maxHeight: '100%',
+					overflowY: 'scroll',
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					paddingBottom: 20
+				}}
+			>
+				<MainSourceAndInputsSection />
+
+				<hr
+					style={{ margin: '20px 0 0 0', border: '1px solid rgba(0,0,0,0.08)' }}
+				/>
+
+				<EntityMetadataSection />
+
+				<hr style={{ margin: '1px 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)' }} />
+
+				{validationErrors.length > 0 && (
+					<div
+						style={{
+							marginTop: 20,
+							marginRight: 40,
+							marginLeft: 80,
+							marginBottom: 20,
+						}}
+					>
+						<Alert severity='error'>
+							{validationErrors.length === 1 ? (
+								<span
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: 6,
+									}}
+								>
+									<h4
+										style={{
+											margin: 0,
+											display: 'flex',
+										}}
+									>
+										Error:
+									</h4>
+									<p
+										style={{
+											margin: 0,
+											display: 'flex',
+										}}
+									>
+										{validationErrors[0]}
+									</p>
+								</span>
+							) : (
+								<>
+									<h4
+										style={{
+											margin: 0,
+										}}
+									>
+										Errors
+									</h4>
+									<br className='quarter-space' />
+									<ul
+										style={{
+											listStyleType: 'none',
+											padding: 0,
+											margin: 0,
+										}}
+									>
+										{validationErrors.map((error, index) => (
+											<li
+												key={index}
+												style={{
+													display: 'flex',
+													alignItems: 'center',
+												}}
+											>
+												{/* Circle */}
+												<span
+													style={{
+														fontSize: 10,
+														marginRight: 5,
+													}}
+												>
+													&#9679;
+												</span>
+												<p
+													style={{
+														margin: 0,
+													}}
+												>
+													{error}
+												</p>
+											</li>
+										))}
+									</ul>
+								</>
+							)}
+						</Alert>
+					</div>
+				)}
+
+				<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',
+						});
+					}}
+					disabled={validationErrors.length > 0}
+					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 exit the search statement builder
+				</Tooltip>
+			</div>
+		</div>
+	);
+};
+
+export default withSearchStatementProvider<ISearchStatementBuilderProps>(
+	SearchStatementBuilder,
+);