@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,135 @@
+import React, { useCallback, useState } from 'react';
+import './search-statement-dialog.css';
+import { Collapse, TextField } from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { ChangeSet, ProjectState, StateMutationAction } from '@elyx-code/project-logic-tree';
+import { debounce } from '../../../utils';
+
+export interface IEntityMetadataSectionProps {}
+
+const EntityMetadataSection: React.FC<IEntityMetadataSectionProps> = () => {
+	const { project, entity } = useSearchStatementContext();
+
+	const [entityName, setEntityName] = useState<string>(entity.name);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description
+	);
+
+	const [sectionOpen, setSectionOpen] = useState(false);
+
+	const debouncedOnChangeName = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.RenameSearch
+					)
+				);
+
+				entity?.metaSync({ name: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			1500,
+			false
+		),
+		[]
+	);
+
+	const debouncedOnChangeDescription = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.ChangeSearchDescription
+					)
+				);
+
+				entity?.metaSync({ description: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			600,
+			false
+		),
+		[]
+	);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Name and description'
+				subtitle='Add a name and description for this search node in the canvas'
+				hideShowSuffix='the name and description sectio'
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 12,
+						marginLeft: 80,
+						paddingRight: 40,
+					}}
+				>
+					<TextField
+						label='Search name'
+						disabled={!entity.editable}
+						variant='outlined'
+						style={{ width: '50%' }}
+						size='small'
+						value={entityName}
+						onChange={(e) => {
+							setEntityName(e.target.value);
+							debouncedOnChangeName(e.target.value);
+						}}
+					/>
+
+					<TextField
+						label='Search description'
+						disabled={!entity.editable}
+						variant='outlined'
+						fullWidth
+						multiline
+						minRows={3}
+						size='small'
+						value={entityDescription}
+						onChange={(e) => {
+							setEntityDescription(e.target.value);
+							debouncedOnChangeDescription(e.target.value);
+						}}
+					/>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+export default EntityMetadataSection;

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

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { Collapse, IconButton, Tooltip as MuiTooltip } from '@mui/material';
+import { useSearchStatementContext } from './search-statement-context';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import ConditionBuilder from './ConditionBuilder';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+const FilterConditionsSection = ({}: {}) => {
+	const {
+		searchStatementState,
+		where,
+		setWhere,
+		entity,
+		whereUpdateKey,
+		mainDataSource,
+		hydrationReady
+	} = useSearchStatementContext();
+
+	const [sectionOpen, setSectionOpen] = useState(null);
+
+	useEffect(() => {
+		if (hydrationReady) {
+			setSectionOpen(!!searchStatementState.where && !!mainDataSource);
+		}
+	}, [hydrationReady]);
+
+	console.log('columns available: ', searchStatementState.columns);
+
+	debugger;
+
+	return (
+		<section
+			key={whereUpdateKey}
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0
+			}}
+		>
+			<EntityDialogSectionHeader
+				title="Filter conditions"
+				subtitle="Add conditions to filter which entries are selected."
+				hideShowSuffix="the filter section"
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+				headerEndIcon={
+					!mainDataSource &&
+					!!where && (
+						<MuiTooltip
+							placement="bottom"
+							enterDelay={0}
+							leaveDelay={200}
+							arrow
+							title={
+								<>
+									Select a data source to filter entries based
+									on conditions
+									<br />
+									<br />
+									Existing conditions will be ignored in the
+									final results, until a data source is
+									selected
+								</>
+							}
+						>
+							<img
+								className="search-statement__error-icon"
+								id={`all-aggregations--error-icon`}
+								src={WarningIcon}
+							/>
+						</MuiTooltip>
+					)
+				}
+				headerStartIcon={
+					!!where && (
+						<>
+							<IconButton
+								id="search-statement-dialog-remove-filter-button"
+								aria-label="delete"
+								size="small"
+								disabled={!entity.editable}
+								onClick={() => {
+									setWhere(null);
+								}}
+								style={{
+									width: 30,
+									height: 30,
+									fontSize: 18,
+									color: '#F65858'
+								}}
+							>
+								<i className="fa-regular fa-trash" />
+							</IconButton>
+							<Tooltip
+								anchorQuerySelector="#search-statement-dialog-remove-filter-button"
+								placement="bottom"
+								openDelay={300}
+							>
+								Delete filters to select entries in the data
+								source only based on order
+							</Tooltip>
+						</>
+					)
+				}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 4,
+						marginLeft: 80
+					}}
+				>
+					<h3 style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>
+						Condition
+					</h3>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 10,
+							color: 'rgba(0,0,0,0.54)'
+						}}
+					>
+						Select all entries where the condition matches
+					</p>
+
+					<br className="quarter-space" />
+
+					<ConditionBuilder
+						condition={where}
+						options={[
+							...entity.inputs,
+							...searchStatementState.columns
+						]}
+						onChange={(updatedWhere) => {
+							Logger.log('Updated top condition', updatedWhere);
+							setWhere(updatedWhere);
+						}}
+					/>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+export default FilterConditionsSection;

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

@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import {
+	CanvasEntityState,
+	InputMapState,
+	resolveEntityDataTypeLabel,
+	resolveEntityName,
+} from '@elyx-code/project-logic-tree';
+import { useSearchStatementContext } from './search-statement-context';
+import DataTypeIcon from '../../draggable-entity-card/DataTypeIcon';
+import { Paper, IconButton } from '@mui/material';
+import DropdownMenuPopup from '../../../lib/dropdown/DropdownMenuPopup';
+import DynamicValueEntry from '../../dynamic-value/DynamicValueEntry';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+const InlineInputMap = ({
+	input,
+	onEdit,
+	onDelete,
+}: {
+	input: InputMapState;
+	onEdit: () => void;
+	onDelete: () => void;
+}) => {
+	const { project } = useSearchStatementContext();
+	const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+
+	return (
+		<>
+			<Paper
+				onDoubleClick={() => {
+					onEdit();
+				}}
+				key={input.id}
+				id={`inline-input-${input.id}`}
+				elevation={3}
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					gap: 4,
+					padding: 8,
+					minWidth: 170,
+					// Don't shrink inside the horizontally-scrolling inputs row,
+					// otherwise each card squeezes when the parent overflows
+					// instead of staying its intended width and triggering scroll.
+					flexShrink: 0,
+				}}
+			>
+				<span
+					style={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+					}}
+				>
+					<span
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+						}}
+					>
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+							}}
+						>
+							<DataTypeIcon entity={input} size='small' />
+							{resolveEntityName(input, project.logic)}
+						</span>
+						<p
+							style={{
+								margin: 0,
+								marginLeft: 20,
+								fontSize: 10,
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							{resolveEntityDataTypeLabel(input)}
+						</p>
+					</span>
+
+					{/* 3 dot menu */}
+					<IconButton
+						id={`inline-input-value-menu--${input.id}`}
+						aria-label='input-value-menu'
+						size='small'
+						style={{ padding: 4, fontSize: 14, width: 22, height: 22 }}
+						onClick={(e) => {
+							// Open a menu with options to edit or delete the input value
+							Logger.log('input value menu clicked: ', e);
+							setIsMenuOpen(!isMenuOpen);
+						}}
+					>
+						<i className='fa-solid fa-ellipsis-v' />
+					</IconButton>
+				</span>
+
+				<DynamicValueEntry
+					entity={input}
+					project={project}
+					parentDisabledReasons={[]}
+				>
+					{(extraContent) => (
+						<div
+							style={{
+								marginLeft: 16,
+							}}
+						>
+							{extraContent}
+						</div>
+					)}
+				</DynamicValueEntry>
+			</Paper>
+
+			<DropdownMenuPopup
+				popupOptions={{
+					anchorQuerySelector: `#inline-input-value-menu--${input.id}`,
+					placement: 'right',
+					open: isMenuOpen,
+				}}
+				options={[
+					{
+						onClick: async () => {
+							Logger.log('delete');
+							await project.remove(input.id);
+							onDelete?.();
+						},
+						disabled: !input.deletable,
+						label: 'Delete',
+						color: 'error',
+						iconEnd: 'fa-solid fa-trash-can',
+						tooltip: !input.deletable
+							? 'This input cannot be deleted. Because the system need to refer to it over time.'
+							: 'Click to delete this input',
+					},
+					{
+						onClick: async () => {
+							Logger.log('edit');
+							onEdit?.();
+						},
+						disabled: false,
+						label: 'Edit',
+						iconEnd: 'fa-solid fa-pencil',
+						tooltip: !input.editable ? 'This input has been locked and can no longer be edited' : 'Click to edit this input',
+					},
+				]}
+			/>
+		</>
+	);
+};
+
+export default InlineInputMap;