@elyx-code/editor-ui 0.0.2

package/src/components/canvas-search/CanvasSearch.tsx

@@ -0,0 +1,501 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Popup from '../../lib/popup/Popup';
+import TextField from '../../lib/text-field/TextField';
+import {
+	ActionInputMapState,
+	ActionOutputMapState,
+	ArgumentDeclarationState,
+	EntityType,
+	ProjectStateEvents,
+	VariableInputMapState,
+	VariableOutputMapState,
+	CanvasEntityState,
+	PropertyState,
+	safeResolveEntityName,
+	getParentCanvasEntity,
+	READABLE_ENTITY_TYPES,
+	InputMapState,
+	filterOutDuplicateEntities,
+	filterOutDuplicateEntitiesAsync,
+} from '@elyx-code/project-logic-tree';
+import {
+	ENTITY_FA_ICON_NAMES,
+	ENTITY_ICON_COLORS,
+	getCanvasEntityDraggableContainerDOMId,
+} from '../../services/editor/ui';
+import { EditorService } from '../../services/editor';
+import './canvas-search.css';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+export interface ICanvasSearchProps {
+	isOpen: boolean;
+	project: EditorService;
+}
+
+// This type covers all the possible searchable entity types.
+type SearchableEntities =
+	| CanvasEntityState
+	| PropertyState
+	| VariableInputMapState
+	| ActionInputMapState
+	| VariableOutputMapState
+	| ActionOutputMapState
+	| ArgumentDeclarationState
+	| InputMapState;
+
+// The error boundary component that will automatically re-render its children after an error.
+class ErrorBoundaryWithRetry extends React.Component<
+	{ children: React.ReactNode },
+	{ hasError: boolean; error: any }
+> {
+	constructor(props: { children: React.ReactNode }) {
+		super(props);
+		this.state = { hasError: false, error: null };
+	}
+
+	static getDerivedStateFromError(error: any) {
+		return { hasError: true, error };
+	}
+
+	componentDidCatch(error: any, errorInfo: any) {
+		Logger.error('ErrorBoundaryWithRetry caught an error:', error, errorInfo);
+		// Automatically reset error state after a delay to re-render the component.
+		setTimeout(() => {
+			this.setState({ hasError: false, error: null });
+		}, 1000);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			// You could render a fallback UI here if desired.
+			return null;
+		}
+		return this.props.children;
+	}
+}
+
+// The functional component containing the original logic.
+const CanvasSearchFunctional: React.FC<ICanvasSearchProps> = (
+	props: ICanvasSearchProps
+) => {
+	const [searchValue, setSearchValue] = useState<string>('');
+	const [filters, setFilters] = useState<EntityType[]>([]);
+	const [results, setResults] = useState<SearchableEntities[]>([]);
+	const inputElementRef = useRef(null);
+
+	useEffect(() => {
+		if (props.isOpen && props.project?.canvas) {
+			props.project.canvas.ignoreNextClick = true;
+			const input = inputElementRef.current;
+
+			if (input && document.activeElement !== input) {
+				// Adding a slight delay to ensure the element is available
+				setTimeout(() => {
+					input.focus();
+				}, 0);
+			}
+		}
+	}, [props.isOpen]);
+
+	const getResults = async (searchQuery: string = '') => {
+		const searchableEntitities: SearchableEntities[] = [];
+
+		// Include entity types on search array only if they are selected, or if no filters are selected
+		if (filters.includes(EntityType.DefinitionEntity) || !filters.length) {
+			searchableEntitities.push(...props.project.logic.entities);
+			searchableEntitities.push(
+				...props.project.logic.entities
+					.map((entity) => entity.properties)
+					.flat()
+			);
+		}
+
+		if (filters.includes(EntityType.GlobalEvent) || !filters.length) {
+			const entryPoints = [...props.project.logic.getEntryPoints()];
+			const inputs = [
+				...entryPoints.flatMap((entryPoint) => entryPoint.inputs),
+			];
+			searchableEntitities.push(...entryPoints, ...inputs);
+		}
+
+		if (filters.includes(EntityType.Operation) || !filters.length) {
+			const ops = [
+				...props.project.logic.getOperations(),
+				...props.project.logic.getFunctionCalls(),
+			];
+			const inputsAndOutputs = [
+				...ops.flatMap((op) => op.inputs),
+				...ops.flatMap((op) => op.outputs),
+			];
+			searchableEntitities.push(...ops, ...inputsAndOutputs);
+		}
+
+		if (filters.includes(EntityType.ReturnStatement) || !filters.length) {
+			const ops = [...props.project.logic.getTerminationStatements()];
+			const outputs = [...ops.flatMap((op) => op.outputs)];
+			searchableEntitities.push(...ops, ...outputs);
+		}
+
+		if (filters.includes(EntityType.Condition) || !filters.length) {
+			const conditions = [...props.project.logic.getConditions()];
+			const inputs = [...conditions.flatMap((condition) => condition.inputs)];
+			searchableEntitities.push(...conditions, ...inputs);
+		}
+
+		if (filters.includes(EntityType.VariableDeclaration) || !filters.length) {
+			const variables = [...props.project.logic.getVariables()];
+			const inputsAndOutputs = [
+				...variables.flatMap((variable) => variable.inputs),
+				...variables.flatMap((variable) => variable.outputs),
+			];
+			searchableEntitities.push(...variables, ...inputsAndOutputs);
+		}
+
+		if (filters.includes(EntityType.Loop) || !filters.length) {
+			const loops = [...props.project.logic.getLoops()];
+			const inputsAndOutputs = [
+				...loops.flatMap((loop) => loop.inputs),
+				...loops.flatMap((loop) => loop.outputs),
+			];
+			searchableEntitities.push(...loops, ...inputsAndOutputs);
+		}
+
+		if (filters.includes(EntityType.Search) || !filters.length) {
+			const searches = [...props.project.logic.getSearches()];
+			const inputsAndOutputs = [
+				...searches.flatMap((search) => search.inputs),
+				...searches.flatMap((search) => search.outputs),
+			];
+			searchableEntitities.push(...searches, ...inputsAndOutputs);
+		}
+
+		// Sort alphabetically
+		const alphabeticallySorted = searchableEntitities.sort((a, b) => {
+			const aName = safeResolveEntityName(a, a.project)?.toLowerCase();
+			const bName = safeResolveEntityName(b, a.project)?.toLowerCase();
+			if (aName < bName) return -1;
+			if (aName > bName) return 1;
+			return 0;
+		});
+
+		if (!searchQuery) {
+			return filterOutDuplicateEntitiesAsync(
+				alphabeticallySorted,
+			) as Promise<SearchableEntities[]>;
+		}
+
+		const filteredEntities = alphabeticallySorted.filter((entity) => {
+			return safeResolveEntityName(entity, entity.project)
+				.toLowerCase()
+				.includes(searchQuery.toLowerCase());
+		});
+
+		// Sort by name matching query
+		const sortedEntities = filteredEntities.sort((a, b) => {
+			const aName = safeResolveEntityName(a, a.project)?.toLowerCase();
+			const bName = safeResolveEntityName(b, a.project)?.toLowerCase();
+			if (aName.includes(searchQuery.toLowerCase())) return -1;
+			if (bName.includes(searchQuery.toLowerCase())) return 1;
+			return 0;
+		});
+
+		return filterOutDuplicateEntitiesAsync(sortedEntities) as Promise<SearchableEntities[]>;
+	};
+
+	const toggleEntityFilter = async (entityType: EntityType) => {
+		const existingFilters = [...filters];
+		if (!existingFilters.includes(entityType)) {
+			setFilters([...existingFilters, entityType]);
+		} else {
+			setFilters(
+				existingFilters.filter((type: EntityType) => type !== entityType)
+			);
+		}
+	};
+
+	const onResultClick = (entity: SearchableEntities) => {
+		const canvasEntity = getParentCanvasEntity(entity);
+		const objectId = getCanvasEntityDraggableContainerDOMId(canvasEntity);
+		props.project.canvas?.scrollToObjectById(objectId, () => {
+			props.project.canvas?.zoomTo(1.1);
+		});
+	};
+
+	const loadResults = async () => {
+		const sortedEntities = await getResults(searchValue);
+		setResults(sortedEntities);
+	};
+
+	useEffect(() => {
+		if (!props.project?.logic) {
+			return;
+		}
+		loadResults();
+	}, [filters, searchValue, props.project?.logic]);
+
+	const { isOpen } = props;
+
+	const onSearchKeyShortcut = useCallback(
+		(e: KeyboardEvent) => {
+			const input = inputElementRef.current;
+			if (input && document.activeElement !== input) {
+				setTimeout(() => {
+					input.focus();
+				}, 0);
+			}
+		},
+		[inputElementRef]
+	);
+
+	useEffect(() => {
+		props.project?.on('global-canvas-search', onSearchKeyShortcut);
+		return () => {
+			props.project?.off('global-canvas-search', onSearchKeyShortcut);
+		};
+	}, [onSearchKeyShortcut]);
+
+	const loadResultsRef = useRef(loadResults);
+	useEffect(() => {
+		loadResultsRef.current = loadResults;
+	});
+
+	useEffect(() => {
+		const handleBeforeChangeSetClosed = () => {
+			loadResultsRef.current();
+		};
+
+		props.project?.on('before-change-set-close', handleBeforeChangeSetClosed);
+		props.project?.logic?.on(
+			ProjectStateEvents.CHANGE_SET_PERSISTED,
+			handleBeforeChangeSetClosed
+		);
+
+		return () => {
+			props.project?.off('before-change-set-close', handleBeforeChangeSetClosed);
+			props.project?.logic?.off(
+				ProjectStateEvents.CHANGE_SET_PERSISTED,
+				handleBeforeChangeSetClosed
+			);
+		};
+	}, [props.project?.logic]);
+
+	return (
+		<Popup
+			anchorQuerySelector='#search-toolbar-button'
+			placement='left-start'
+			open={isOpen}
+			arrowClasses={['dropdown-menu-card-arrow']}
+			containerClasses={['popup__search']}
+			id='canvas-search-popup'
+			onClick={(e: any) => {
+				e.stopPropagation();
+			}}
+		>
+			<div className='canvas_search__container'>
+				<TextField
+					ref={inputElementRef}
+					autoFocus
+					variant='filled'
+					label='Search canvas'
+					iconEnd='fa-solid fa-magnifying-glass'
+					value={searchValue}
+					onChange={(value: any) => {
+						setSearchValue(value);
+					}}
+				/>
+
+				{/* Entity types' filters */}
+				<span className='canvas_search__filters'>
+					<p className='canvas_search__filters__label'>Filters</p>
+					<div className='canvas_search__filters__buttons'>
+						<button
+							style={
+								filters.includes(EntityType.DefinitionEntity) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.DefinitionEntity] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.DefinitionEntity)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.DefinitionEntity]
+								}`}
+							/>
+							<p>
+								{READABLE_ENTITY_TYPES[EntityType.DefinitionEntity].shortPlural}
+							</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.GlobalEvent) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.GlobalEvent] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.GlobalEvent)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.GlobalEvent]
+								}`}
+							/>
+							<p>{READABLE_ENTITY_TYPES[EntityType.GlobalEvent].shortPlural}</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.Condition) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.Condition] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.Condition)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.Condition]
+								}`}
+							/>
+							<p>{READABLE_ENTITY_TYPES[EntityType.Condition].shortPlural}</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.Operation) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.Operation] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.Operation)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.Operation]
+								}`}
+							/>
+							<p>{READABLE_ENTITY_TYPES[EntityType.Operation].shortPlural}</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.VariableDeclaration) ||
+								!filters.length
+									? {
+											color: ENTITY_ICON_COLORS[EntityType.VariableDeclaration],
+									  }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.VariableDeclaration)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.VariableDeclaration]
+								}`}
+							/>
+							<p>
+								{
+									READABLE_ENTITY_TYPES[EntityType.VariableDeclaration]
+										.shortPlural
+								}
+							</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.Search) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.Search] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.Search)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.Search]
+								}`}
+							/>
+							<p>{READABLE_ENTITY_TYPES[EntityType.Search].shortPlural}</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.Loop) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.Loop] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.Loop)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.Loop]
+								}`}
+							/>
+							<p>{READABLE_ENTITY_TYPES[EntityType.Loop].shortPlural}</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(EntityType.ReturnStatement) || !filters.length
+									? { color: ENTITY_ICON_COLORS[EntityType.ReturnStatement] }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => toggleEntityFilter(EntityType.ReturnStatement)}
+						>
+							<i
+								className={`fa-solid fa-${
+									ENTITY_FA_ICON_NAMES[EntityType.ReturnStatement]
+								}`}
+							/>
+							<p>
+								{READABLE_ENTITY_TYPES[EntityType.ReturnStatement].shortPlural}
+							</p>
+						</button>
+					</div>
+				</span>
+
+				<ul
+					className='canvas_search__results'
+					onScroll={(e: any) => {
+						e.stopPropagation();
+						document.body.style.overflow = 'hidden';
+					}}
+				>
+					{results.length ? (
+						results.map((entity: SearchableEntities) => (
+							<li key={entity.id} className='canvas_search__results__item'>
+								<button
+									className='canvas_search__results__item-button'
+									onClick={() => onResultClick(entity)}
+								>
+									<p className='canvas_search__results__item__title'>
+										{safeResolveEntityName(entity, props.project.logic)}
+									</p>
+									<p className='canvas_search__results__item__description'>
+										{READABLE_ENTITY_TYPES[entity.type].singular}
+									</p>
+								</button>
+							</li>
+						))
+					) : (
+						<p className='canvas_search__results__item__empty'>No results</p>
+					)}
+				</ul>
+			</div>
+		</Popup>
+	);
+};
+
+// Export the wrapped component. When an error is thrown, the ErrorBoundaryWithRetry will
+// catch it, wait one second, and then reset its state so the CanvasSearchFunctional component is re-rendered.
+export default function CanvasSearch(props: ICanvasSearchProps) {
+	return (
+		<ErrorBoundaryWithRetry>
+			<CanvasSearchFunctional {...props} />
+		</ErrorBoundaryWithRetry>
+	);
+}

package/src/components/canvas-search/canvas-search.css

@@ -0,0 +1,126 @@
+.canvas_search__container {
+  padding: 5px;
+  background-color: #111;
+  top: 70px;
+  left: 0;
+  width: 100%;
+  border-radius: 4px;
+  display: block;
+  box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
+  min-width: 200px;
+  background-color: #fff;
+  box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.15);
+
+  width: 350px;
+  overflow-y: hidden;
+}
+
+.canvas_search__filters {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 6px;
+  flex-direction: column;
+}
+
+.canvas_search__filters__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  margin: 0px;
+  margin-left: 6px;
+}
+
+.canvas_search__filters__buttons {
+  overflow-x: scroll;
+  display: flex;
+  gap: 6px;
+}
+
+.canvas_search__filters__buttons button {
+	color: var(--color-light-grey);
+}
+
+.canvas_search__results {
+  overflow-y: scroll;
+  max-height: 300px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.canvas_search__results .canvas_search__results__item__empty {
+	text-align: center;
+	padding: 10px;
+	font-size: 12px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.canvas_search__results .canvas_search__results__item {
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+}
+
+/* Removes all styling of the bottom so it acts as a container but doesn't change anything from the parent */
+.canvas_search__results .canvas_search__results__item-button {
+  cursor: pointer;
+  padding: 10px;
+  text-align: left;
+
+  /* Resets */
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0;
+}
+
+.canvas_search__results .canvas_search__results__item:last-child {
+  border-bottom: none;
+}
+
+.canvas_search__results .canvas_search__results__item .canvas_search__results__item__title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 4px;
+
+  /* break into second line even if it is one word */
+  word-break: break-all;
+}
+
+.canvas_search__results .canvas_search__results__item .canvas_search__results__item__description {
+  font-size: 12px;
+  font-weight: 400;
+  margin: 0;
+  margin-bottom: 4px;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.canvas_search__results .canvas_search__results__item:hover {
+  background-color: var(--color-main-primary);
+  color: var(--color-contrast-primary);
+  transform: scale(1.01);
+  /* Smooth transition */
+  transition: all 0.2s ease-in-out;
+  border-radius: 8px;
+  /* No border bottom */
+  border-bottom: none;
+}
+
+.canvas_search__results .canvas_search__results__item:hover .canvas_search__results__item__description {
+  color: var(--color-contrast-primary);
+}
+
+/* Hide helper text section on search input */
+.canvas_search__container .omrs-input-helper {
+  display: none;
+}
+
+.canvas_search__filters i.fa-arrow-turn-up {
+  transform: rotate(90deg);
+}