@adaptabletools/adaptable 23.1.0 → 24.0.0-canary.0

package/src/components/aql/ExpressionEditor/BaseEditorInput.js

@@ -0,0 +1,1161 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createHostExpressionContext, ExpressionEvaluationError, findPathTo, parse, SYSTEM_AGGREGATION_CATALOGUE, OBSERVABLE_SOURCE_NAMES, } from "../../../../vendor/aql/index.js";
+import { cn } from '../../../lib/utils';
+import * as React from 'react';
+import { createAdaptableAqlHost, toAqlCellChange } from '../../../aql/createAdaptableAqlHost';
+import { astContainsChipPlaceholder } from '../../../aql/chipColumnPlaceholder';
+import { systemAggregatedExpressionFunctions, systemScalarExpressionFunctions, OBSERVABLE_CLAUSE_KEYWORDS, } from '../../../aql/systemExpressionFunctions';
+import HelpBlock from '../../HelpBlock';
+import EditorButton from './EditorButton';
+import OverlayTrigger from '../../OverlayTrigger';
+import SimpleButton from '../../SimpleButton';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ButtonInfo } from '../../../View/Components/Buttons/ButtonInfo';
+import { Icon, NaturallySizedIcon } from '../../icons';
+import join from '../../utils/join';
+import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentation';
+import { Tag } from '../../Tag';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import Radio from '../../Radio';
+import { Box, Flex } from '../../Flex';
+import { Card } from '../../Card';
+import { AdaptableFormControlTextClear } from '../../../View/Components/Forms/AdaptableFormControlTextClear';
+import { AqlCodeMirrorEditor, } from './AqlCodeMirrorEditor';
+import { buildAqlLintDiagnostics } from './aqlLint';
+import { shouldDisplayHostValidationError } from './booleanEditorHostError';
+import { getClauseCompletionsForCall, resolveEnclosingFunctionCall, } from './aqlCompletionTypeContext';
+import { useExpressionEditor } from './EditorContext';
+import { useLookupItems } from './useLookupItems';
+import { getFunctionInsertText, SCAFFOLD_FUNCTION_NAMES, SCAFFOLD_FUNCTION_NAME_SET, SCAFFOLD_INSERT_TEXT, } from './functionInsertText';
+import { CompactExpressionToolbar } from './CompactExpressionToolbar';
+const filterableCategories = [
+    'date',
+    'logical',
+    'numeric',
+    'text',
+    'changes',
+    'comparison',
+    'observable',
+    'aggregation',
+    'cumulative',
+    'reference',
+    'general',
+];
+const LOOKUP_FUNCTION_NAMES = ['QUERY', 'VAR'];
+const SIDEBAR_REFERENCE_FUNCTION_NAMES = ['COL', 'FIELD', '$SCOPE'];
+const SYSTEM_AGGREGATED_FUNCTION_NAMES = new Set(Object.keys(systemAggregatedExpressionFunctions));
+const EXCLUDED_FROM_FUNCTION_MENUS = new Set([
+    ...LOOKUP_FUNCTION_NAMES,
+    ...SIDEBAR_REFERENCE_FUNCTION_NAMES,
+    'WHERE',
+    ...OBSERVABLE_CLAUSE_KEYWORDS,
+]);
+const OBSERVABLE_MENU_FUNCTION_NAMES = [...OBSERVABLE_SOURCE_NAMES];
+const EXCLUDED_FROM_LEGACY_FUNCTIONS_DROPDOWN = new Set([
+    ...SCAFFOLD_FUNCTION_NAMES,
+    ...EXCLUDED_FROM_FUNCTION_MENUS,
+]);
+const BASIC_FUNCTION_MENU_DROPDOWNS = [
+    {
+        id: 'logical',
+        label: 'Logical',
+        categories: ['logical', 'conditional'],
+        includeScaffolds: true,
+    },
+    { id: 'text', label: 'Text', categories: ['text'] },
+    { id: 'numeric', label: 'Numeric', categories: ['numeric'] },
+    { id: 'date', label: 'Date', categories: ['date'] },
+    {
+        id: 'observable',
+        label: 'Observable',
+        categories: ['observable'],
+        functionNames: OBSERVABLE_MENU_FUNCTION_NAMES,
+        insertPoolKind: 'observable',
+    },
+    { id: 'general', label: 'General', categories: ['general', 'comparison'] },
+];
+const BASIC_MENU_CATEGORY_SET = new Set(BASIC_FUNCTION_MENU_DROPDOWNS.flatMap((menu) => menu.categories));
+const CUSTOM_FUNCTION_MENU_ID = 'custom';
+const CUSTOM_FUNCTION_MENU_LABEL = 'Custom';
+const CUMULATIVE_FUNCTION_MENU_SECTIONS = [
+    {
+        id: 'cumulative',
+        label: 'Cumulative',
+        functionNames: ['CUMULATIVE', 'WEIGHT', 'GROUP_BY'],
+    },
+    {
+        id: 'aggregation',
+        label: 'Aggregation',
+        functionNames: SYSTEM_AGGREGATION_CATALOGUE.cumulativeNames().filter((name) => SYSTEM_AGGREGATION_CATALOGUE.isSystem(name)),
+    },
+];
+const AGGREGATED_FUNCTION_MENU_SECTIONS = [
+    {
+        id: 'aggregation',
+        label: 'Aggregation',
+        functionNames: [
+            'SUM',
+            'SUMIF',
+            'PRODUCT',
+            'PERCENTAGE',
+            'MIN',
+            'MAX',
+            'COUNT',
+            'COUNTIF',
+            'AVG',
+            'AVGIF',
+            'MEDIAN',
+            'MODE',
+            'DISTINCT',
+            'ONLY',
+            'STD_DEVIATION',
+            'ABSOLUTE_DIFF',
+            'PERCENT_DIFF',
+            'WEIGHT',
+            'GROUP_BY',
+        ],
+    },
+];
+const WINDOW_FUNCTION_MENU_SECTIONS = [
+    {
+        id: 'window',
+        label: 'Window',
+        functionNames: ['LAG', 'LEAD', 'FIRST', 'LAST', 'RANK', 'OVER', 'GROUP_BY'],
+    },
+];
+const AGGREGATED_BOOLEAN_FUNCTION_MENU_SECTIONS = [
+    {
+        id: 'aggregation',
+        label: 'Aggregation',
+        functionNames: [
+            'SUM',
+            'SUMIF',
+            'PRODUCT',
+            'AVG',
+            'AVGIF',
+            'MIN',
+            'MAX',
+            'COUNT',
+            'COUNTIF',
+            'WEIGHT',
+            'GROUP_BY',
+        ],
+    },
+    {
+        id: 'comparison',
+        label: 'Comparisons',
+        functionNames: ['EQ', 'NEQ', 'LT', 'GT', 'LTE', 'GTE'],
+    },
+];
+const FUNCTION_MENU_SECTIONS_BY_VARIANT = {
+    cumulative: CUMULATIVE_FUNCTION_MENU_SECTIONS,
+    window: WINDOW_FUNCTION_MENU_SECTIONS,
+    aggregated: AGGREGATED_FUNCTION_MENU_SECTIONS,
+    aggregatedBoolean: AGGREGATED_BOOLEAN_FUNCTION_MENU_SECTIONS,
+};
+const CLAUSE_CHIP_LABELS = {
+    GROUP_BY: 'Group By',
+    OVER: 'Over',
+    WEIGHT: 'Weight',
+    CUMULATIVE: 'Cumulative',
+    WHERE: 'Where',
+    ANY_COL: 'Any Column',
+    WITHIN: 'Within',
+    LAST_N: 'Last N',
+    ALL_ROWS: 'All Rows',
+    TRIGGER: 'Trigger',
+};
+const SECTIONED_FUNCTION_MENU_VARIANTS = new Set([
+    'quantile',
+    'cumulative',
+    'window',
+    'aggregated',
+    'aggregatedBoolean',
+]);
+const FUNCTION_MENU_ALIGN_POSITION = [
+    ['TopLeft', 'BottomLeft'],
+    ['BottomLeft', 'TopLeft'],
+    ['TopCenter', 'BottomCenter'],
+    ['BottomCenter', 'TopCenter'],
+];
+const getCategoryOrder = (category) => {
+    const predefinedOrder = {
+        reference: 1,
+        logical: 2,
+        comparison: 3,
+        text: 4,
+        numeric: 5,
+        date: 6,
+        observable: 7,
+        changes: 8,
+        general: 9,
+        custom: 10,
+    };
+    return predefinedOrder[category] || 100;
+};
+const containsNodeKind = (nodes, kinds) => {
+    const visit = (node) => {
+        if (!node || typeof node !== 'object') {
+            return false;
+        }
+        const candidate = node;
+        if (kinds.has(candidate.kind ?? candidate.metaInfo ?? '')) {
+            return true;
+        }
+        return Array.isArray(candidate.args) && candidate.args.some(visit);
+    };
+    return nodes.some(visit);
+};
+const OBSERVABLE_CALL_KINDS = new Set(['OBSERVABLE_CALL']);
+const BRACE_CALL_KINDS = new Set(['AGG_CALL', 'OBSERVABLE_CALL']);
+const containsObservableCall = (nodes) => containsNodeKind(nodes, OBSERVABLE_CALL_KINDS);
+const formatPreviewResult = (result, previewReadsHistory) => previewReadsHistory && result == null ? '—' : JSON.stringify(result);
+const LIST_IN_MENUS_DESPITE_TOOLBAR_CHIP = new Set(['SUM', 'PRODUCT']);
+const isFunctionListedInMenu = (functionName, functionDef, options) => {
+    if (!functionDef) {
+        return false;
+    }
+    if (EXCLUDED_FROM_FUNCTION_MENUS.has(functionName)) {
+        return false;
+    }
+    const isScaffold = SCAFFOLD_FUNCTION_NAME_SET.has(functionName);
+    if (isScaffold) {
+        return Boolean(options?.allowScaffolds);
+    }
+    if (options?.toolbarFunctionNames?.has(functionName) &&
+        !LIST_IN_MENUS_DESPITE_TOOLBAR_CHIP.has(functionName)) {
+        return false;
+    }
+    return true;
+};
+const DropdownDocumentationPanel = ({ className, placeholderTitle, placeholderDescription, children }) => {
+    return (_jsx(Box, { className: cn(className, 'twa:flex-1 twa:max-w-[60vw] twa:min-h-[190px] twa:rounded-standard', children
+            ? 'twa:bg-background twa:shadow-md twa:overflow-auto'
+            : 'twa:border-2 twa:border-dashed twa:border-input-border twa:grid twa:place-items-center twa:p-3'), children: children ? (children) : (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-center twa:justify-center twa:text-center", children: [placeholderTitle ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-muted-foreground", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold", children: placeholderTitle })] })) : null, _jsx(Box, { className: "twa:text-2 twa:opacity-80 twa:max-w-[280px]", children: placeholderDescription })] })) }));
+};
+const functionMenuItemButtonClassName = 'twa:mr-1 twa:text-2 twa:hover:bg-accent twa:hover:text-accent-foreground';
+const getCategoryMenuFunctionNames = (menu, expressionFunctions, toolbarFunctionNames) => {
+    if (menu.functionNames) {
+        return menu.functionNames.filter((functionName) => !!expressionFunctions[functionName] && !EXCLUDED_FROM_FUNCTION_MENUS.has(functionName));
+    }
+    const categorySet = new Set(menu.categories);
+    const names = Object.keys(expressionFunctions).filter((functionName) => {
+        const functionDef = expressionFunctions[functionName];
+        if (!isFunctionListedInMenu(functionName, functionDef, {
+            allowScaffolds: menu.includeScaffolds,
+            toolbarFunctionNames,
+        })) {
+            return false;
+        }
+        return functionDef.category != null && categorySet.has(functionDef.category);
+    });
+    names.sort((a, b) => {
+        const aScaffold = SCAFFOLD_FUNCTION_NAME_SET.has(a);
+        const bScaffold = SCAFFOLD_FUNCTION_NAME_SET.has(b);
+        if (aScaffold !== bScaffold) {
+            return aScaffold ? -1 : 1;
+        }
+        if (aScaffold && bScaffold) {
+            return (SCAFFOLD_FUNCTION_NAMES.indexOf(a) -
+                SCAFFOLD_FUNCTION_NAMES.indexOf(b));
+        }
+        return a.localeCompare(b);
+    });
+    return names;
+};
+const SEARCH_MENU_ID = 'search';
+const BasicFunctionMenus = ({ expressionFunctions, editorButtons, baseClassName, extraFunctionMenus, prioritizeObservableMenu, suppressObservableMenu, getInsertText, }) => {
+    const menusAnchorRef = React.useRef(null);
+    const [activeMenuId, setActiveMenuId] = React.useState(null);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [overFunction, setOverFunction] = React.useState(null);
+    const [stripSearchValue, setStripSearchValue] = React.useState('');
+    const [categoryFilterValue, setCategoryFilterValue] = React.useState('');
+    const toolbarFunctionNames = React.useMemo(() => {
+        const names = new Set();
+        for (const button of editorButtons) {
+            if (button.functionName && expressionFunctions[button.functionName]) {
+                names.add(button.functionName);
+            }
+        }
+        return names;
+    }, [editorButtons, expressionFunctions]);
+    const availableMenus = React.useMemo(() => {
+        const leadingMenus = (extraFunctionMenus ?? [])
+            .map((menu) => ({
+            menu: {
+                id: menu.id,
+                label: menu.label,
+                categories: [],
+            },
+            functionNames: menu.functionNames.filter((functionName) => !!expressionFunctions[functionName] && !EXCLUDED_FROM_FUNCTION_MENUS.has(functionName)),
+        }))
+            .filter((entry) => entry.functionNames.length > 0);
+        const listedInExtraMenus = new Set(leadingMenus.flatMap((entry) => entry.functionNames));
+        const categoryMenus = BASIC_FUNCTION_MENU_DROPDOWNS.map((menu) => ({
+            menu,
+            functionNames: getCategoryMenuFunctionNames(menu, expressionFunctions, toolbarFunctionNames).filter((functionName) => !listedInExtraMenus.has(functionName)),
+        }))
+            .filter((entry) => entry.functionNames.length > 0)
+            .filter((entry) => !(suppressObservableMenu && entry.menu.id === 'observable'));
+        if (prioritizeObservableMenu && !suppressObservableMenu) {
+            const observableIndex = categoryMenus.findIndex((entry) => entry.menu.id === 'observable');
+            if (observableIndex > 0) {
+                const [observableMenu] = categoryMenus.splice(observableIndex, 1);
+                categoryMenus.unshift(observableMenu);
+            }
+        }
+        const listedInStandardMenus = new Set(categoryMenus.flatMap((entry) => entry.functionNames));
+        const customFunctionNames = [];
+        const freeformByCategory = new Map();
+        for (const functionName of Object.keys(expressionFunctions)) {
+            if (listedInStandardMenus.has(functionName) || listedInExtraMenus.has(functionName)) {
+                continue;
+            }
+            if (SYSTEM_AGGREGATED_FUNCTION_NAMES.has(functionName)) {
+                continue;
+            }
+            const functionDef = expressionFunctions[functionName];
+            if (!isFunctionListedInMenu(functionName, functionDef, {
+                toolbarFunctionNames,
+            })) {
+                continue;
+            }
+            const category = functionDef.category;
+            if (!category || category === CUSTOM_FUNCTION_MENU_ID) {
+                customFunctionNames.push(functionName);
+                continue;
+            }
+            if (BASIC_MENU_CATEGORY_SET.has(category)) {
+                continue;
+            }
+            const existing = freeformByCategory.get(category) ?? [];
+            existing.push(functionName);
+            freeformByCategory.set(category, existing);
+        }
+        customFunctionNames.sort((a, b) => a.localeCompare(b));
+        const extensionMenus = [];
+        if (customFunctionNames.length > 0) {
+            extensionMenus.push({
+                menu: {
+                    id: CUSTOM_FUNCTION_MENU_ID,
+                    label: CUSTOM_FUNCTION_MENU_LABEL,
+                    categories: [CUSTOM_FUNCTION_MENU_ID],
+                },
+                functionNames: customFunctionNames,
+            });
+        }
+        const freeformCategories = [...freeformByCategory.keys()].sort((a, b) => a.localeCompare(b));
+        for (const category of freeformCategories) {
+            const functionNames = (freeformByCategory.get(category) ?? []).sort((a, b) => a.localeCompare(b));
+            extensionMenus.push({
+                menu: {
+                    id: category,
+                    label: StringExtensions.Humanize(category),
+                    categories: [category],
+                },
+                functionNames,
+            });
+        }
+        return [...leadingMenus, ...categoryMenus, ...extensionMenus];
+    }, [expressionFunctions, toolbarFunctionNames, extraFunctionMenus, prioritizeObservableMenu, suppressObservableMenu]);
+    const isSearchMode = activeMenuId === SEARCH_MENU_ID;
+    const activeEntry = React.useMemo(() => {
+        if (!availableMenus.length || isSearchMode) {
+            return null;
+        }
+        return availableMenus.find((entry) => entry.menu.id === activeMenuId) ?? availableMenus[0];
+    }, [activeMenuId, availableMenus, isSearchMode]);
+    React.useEffect(() => {
+        setOverFunction(null);
+        if (!isSearchMode) {
+            setCategoryFilterValue('');
+        }
+    }, [activeMenuId, isSearchMode]);
+    const filteredCategoryFunctionNames = React.useMemo(() => {
+        if (!activeEntry) {
+            return [];
+        }
+        const search = categoryFilterValue.trim().toLowerCase();
+        if (!search) {
+            return activeEntry.functionNames;
+        }
+        return activeEntry.functionNames.filter((functionName) => functionName.toLowerCase().includes(search));
+    }, [activeEntry, categoryFilterValue]);
+    const searchGroupedResults = React.useMemo(() => {
+        const query = stripSearchValue.trim().toLowerCase();
+        return availableMenus
+            .map(({ menu, functionNames }) => ({
+            menu,
+            functionNames: query
+                ? functionNames.filter((functionName) => functionName.toLowerCase().includes(query))
+                : functionNames,
+        }))
+            .filter((group) => group.functionNames.length > 0);
+    }, [availableMenus, stripSearchValue]);
+    const hidePopup = useCallback(() => {
+        setMenuOpen(false);
+        setOverFunction(null);
+        setActiveMenuId(null);
+        setStripSearchValue('');
+        setCategoryFilterValue('');
+    }, []);
+    useEffect(() => {
+        if (!menuOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                return;
+            }
+            if (menusAnchorRef.current?.contains(target)) {
+                return;
+            }
+            if (target.closest('[data-name="expression-function-menu-panel"]')) {
+                return;
+            }
+            hidePopup();
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                hidePopup();
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [menuOpen, hidePopup]);
+    if (availableMenus.length === 0) {
+        return null;
+    }
+    const openSearchMode = () => {
+        setActiveMenuId(SEARCH_MENU_ID);
+        setMenuOpen(true);
+    };
+    const activateCategory = (menuId) => {
+        if (menuOpen && activeMenuId === menuId) {
+            hidePopup();
+            return;
+        }
+        setActiveMenuId(menuId);
+        setStripSearchValue('');
+        setMenuOpen(true);
+    };
+    const getPanelWidth = (fallbackTargetWidth) => {
+        const toolbar = menusAnchorRef.current?.closest('[data-name="expression-toolbar"]');
+        if (toolbar) {
+            return Math.max(toolbar.getBoundingClientRect().width - 12, 320);
+        }
+        return Math.max(fallbackTargetWidth * 2.5, 480);
+    };
+    const renderFunctionButton = (functionName, menu) => (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: _jsx(EditorButton, { data: menu?.insertPoolKind
+                ? getFunctionInsertText(functionName, { poolKind: menu.insertPoolKind })
+                : (getInsertText ?? getFunctionInsertText)(functionName), className: functionMenuItemButtonClassName, children: functionName }) }, functionName));
+    return (_jsx(OverlayTrigger, { visible: menuOpen, targetOffset: 5, alignPosition: FUNCTION_MENU_ALIGN_POSITION, onVisibleChange: (visible) => {
+            if (!visible) {
+                hidePopup();
+            }
+            else {
+                setMenuOpen(true);
+            }
+        }, render: ({ targetWidth }) => {
+            const panelWidth = getPanelWidth(targetWidth);
+            const listCategory = isSearchMode
+                ? SEARCH_MENU_ID
+                : activeEntry?.menu.id ?? availableMenus[0].menu.id;
+            return (_jsx(Flex, { "data-name": "expression-function-menu-panel", className: `${baseClassName}__dropdown-functions-list-wrapper twa:shadow-md twa:bg-background twa:text-foreground twa:text-2 twa:rounded-standard twa:p-2`, flexDirection: "column", style: { width: panelWidth }, children: _jsxs(Flex, { className: "twa:gap-3 twa:max-h-[60vh] twa:min-h-0", flexDirection: "row", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1.5 twa:rounded-standard twa:w-[200px] twa:shrink-0 twa:min-h-0", children: [!isSearchMode ? (_jsx(Box, { children: _jsx(AdaptableFormControlTextClear, { className: "twa:w-full twa:text-2", value: categoryFilterValue, OnTextChange: setCategoryFilterValue, placeholder: `Search ${activeEntry?.menu.label ?? ''}...` }) })) : null, _jsx(Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto twa:gap-0.5 twa:min-h-0`, "data-name": "expression-dropdown-functions-list", "data-category": listCategory, flexDirection: "column", children: isSearchMode ? (searchGroupedResults.length === 0 ? (_jsx(Box, { className: "twa:text-1 twa:opacity-70 twa:px-1", children: "No matching functions" })) : (searchGroupedResults.map(({ menu, functionNames }) => (_jsxs(Box, { className: "twa:mb-2 twa:mx-0.5", children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: menu.label }), functionNames.map((functionName) => renderFunctionButton(functionName, menu))] }, menu.id))))) : filteredCategoryFunctionNames.length === 0 ? (_jsx(Box, { className: "twa:text-1 twa:opacity-70 twa:px-1", children: "No matching functions" })) : (filteredCategoryFunctionNames.map((functionName) => renderFunctionButton(functionName, activeEntry?.menu))) })] }), _jsx(DropdownDocumentationPanel, { className: `${baseClassName}__dropdown-functions-description twa:flex-1 twa:min-w-0`, placeholderDescription: "Hover over a Function to learn more, then click to insert it into the Expression", children: overFunction ? (_jsx(ExpressionFunctionDocumentation, { functionName: overFunction, expressionFunction: expressionFunctions[overFunction] })) : null })] }) }));
+        }, children: _jsxs(Flex, { ref: menusAnchorRef, "data-name": "expression-function-menus", className: "twa:flex-wrap twa:items-center twa:gap-1", children: [_jsxs(Box, { className: cn('twa:relative twa:w-[130px] twa:shrink-0', isSearchMode ? 'twa:ring-1 twa:ring-ring twa:rounded-input' : undefined), children: [!stripSearchValue ? (_jsxs(Flex, { "aria-hidden": true, className: "twa:absolute twa:left-1.5 twa:top-1/2 twa:-translate-y-1/2 twa:z-1 twa:pointer-events-none twa:items-center twa:gap-1 twa:text-1 twa:opacity-50 twa:max-w-[calc(100%-28px)] twa:overflow-hidden", children: [_jsx(Icon, { name: "equation", size: 12 }), _jsx(Box, { as: "span", className: "twa:truncate", children: "Search functions" })] })) : null, _jsx(AdaptableFormControlTextClear, { "data-name": "expression-function-search", className: "twa:w-full twa:h-7 twa:min-h-0 twa:items-center", inputClassName: "twa:min-h-0 twa:h-full twa:py-0 twa:px-1.5 twa:text-1 twa:leading-none", value: stripSearchValue, placeholder: "", "aria-label": "Search functions", OnTextChange: (value) => {
+                                setStripSearchValue(value);
+                                setActiveMenuId(SEARCH_MENU_ID);
+                                setMenuOpen(true);
+                            }, onFocus: (event) => {
+                                event.stopPropagation();
+                                openSearchMode();
+                            }, onClick: (event) => {
+                                event.stopPropagation();
+                                openSearchMode();
+                            } })] }), availableMenus.map(({ menu }) => {
+                    const isActive = menuOpen && activeMenuId === menu.id;
+                    return (_jsx(SimpleButton, { "data-name": `expression-dropdown-${menu.id}`, icon: "arrow-down", iconPosition: 'end', className: cn('twa:mr-0', isActive ? 'twa:bg-accent twa:text-accent-foreground' : undefined), onClick: (event) => {
+                            event.stopPropagation();
+                            activateCategory(menu.id);
+                        }, children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: menu.label }) }, menu.id));
+                })] }) }));
+};
+function buildWhereStripExtraMenus(variant, expressionFunctions) {
+    if (variant === 'aggregated') {
+        return [
+            {
+                id: 'aggs',
+                label: 'Aggs',
+                functionNames: [
+                    ...AGGREGATED_FUNCTION_MENU_SECTIONS.flatMap((section) => section.functionNames),
+                    ...collectUnlistedAggregationFunctionNames(expressionFunctions, AGGREGATED_FUNCTION_MENU_SECTIONS),
+                ],
+            },
+            ...collectCustomAggregatedCategoryMenus(expressionFunctions, AGGREGATED_FUNCTION_MENU_SECTIONS).map(({ category, functionNames }) => ({
+                id: `custom-agg:${category}`,
+                label: StringExtensions.Humanize(category),
+                functionNames,
+            })),
+        ];
+    }
+    if (variant === 'aggregatedBoolean') {
+        const aggregationSection = AGGREGATED_BOOLEAN_FUNCTION_MENU_SECTIONS.find((section) => section.id === 'aggregation');
+        return [
+            {
+                id: 'aggs',
+                label: 'Aggs',
+                functionNames: [
+                    ...(aggregationSection?.functionNames ?? []),
+                    ...collectUnlistedAggregationFunctionNames(expressionFunctions, AGGREGATED_BOOLEAN_FUNCTION_MENU_SECTIONS),
+                ],
+            },
+            ...collectCustomAggregatedCategoryMenus(expressionFunctions, AGGREGATED_BOOLEAN_FUNCTION_MENU_SECTIONS).map(({ category, functionNames }) => ({
+                id: `custom-agg:${category}`,
+                label: StringExtensions.Humanize(category),
+                functionNames,
+            })),
+        ];
+    }
+    return [];
+}
+const WHERE_STRIP_FUNCTION_MENU_VARIANTS = new Set([
+    'aggregated',
+    'aggregatedBoolean',
+]);
+function collectUnlistedAggregationFunctionNames(expressionFunctions, menuSections, excludedFunctionNames = EXCLUDED_FROM_LEGACY_FUNCTIONS_DROPDOWN) {
+    const listed = new Set(menuSections.flatMap((section) => section.functionNames));
+    const names = [];
+    for (const functionName of Object.keys(expressionFunctions)) {
+        if (listed.has(functionName)) {
+            continue;
+        }
+        if (SYSTEM_AGGREGATED_FUNCTION_NAMES.has(functionName)) {
+            continue;
+        }
+        if (excludedFunctionNames.has(functionName)) {
+            continue;
+        }
+        if (!expressionFunctions[functionName]) {
+            continue;
+        }
+        const rawCategory = expressionFunctions[functionName].category;
+        const category = typeof rawCategory === 'string' && rawCategory.trim() !== ''
+            ? rawCategory.trim()
+            : 'Aggregation';
+        if (category.toLowerCase() === 'aggregation') {
+            names.push(functionName);
+        }
+    }
+    return names.sort((a, b) => a.localeCompare(b));
+}
+function collectCustomAggregatedCategoryMenus(expressionFunctions, menuSections, excludedFunctionNames = EXCLUDED_FROM_LEGACY_FUNCTIONS_DROPDOWN) {
+    const listed = new Set(menuSections.flatMap((section) => section.functionNames));
+    const freeformByCategory = new Map();
+    for (const functionName of Object.keys(expressionFunctions)) {
+        if (listed.has(functionName)) {
+            continue;
+        }
+        if (SYSTEM_AGGREGATED_FUNCTION_NAMES.has(functionName)) {
+            continue;
+        }
+        if (excludedFunctionNames.has(functionName)) {
+            continue;
+        }
+        if (!expressionFunctions[functionName]) {
+            continue;
+        }
+        const rawCategory = expressionFunctions[functionName].category;
+        const category = typeof rawCategory === 'string' && rawCategory.trim() !== ''
+            ? rawCategory.trim()
+            : 'Aggregation';
+        if (category.toLowerCase() === 'aggregation') {
+            continue;
+        }
+        const existing = freeformByCategory.get(category) ?? [];
+        existing.push(functionName);
+        freeformByCategory.set(category, existing);
+    }
+    return [...freeformByCategory.keys()]
+        .sort((a, b) => a.localeCompare(b))
+        .map((category) => ({
+        category,
+        functionNames: (freeformByCategory.get(category) ?? []).sort((a, b) => a.localeCompare(b)),
+    }))
+        .filter((entry) => entry.functionNames.length > 0);
+}
+const LegacyFunctionsDropdown = ({ expressionFunctions, baseClassName, triggerLabel = 'Functions', hideCategoryFilters = false, menuSections, appendUnlistedByCategory = false, appendUnlistedFreeformInMenu = true, excludedFunctionNames = EXCLUDED_FROM_LEGACY_FUNCTIONS_DROPDOWN, compactPanel = false, getInsertText, }) => {
+    const [currentFunctionCategory, setCurrentFunctionCategory] = React.useState('all');
+    const triggerRef = React.useRef(null);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [overFunction, setOverFunction] = React.useState();
+    const [searchInputValue, setSearchInputValue] = React.useState('');
+    const useCustomSections = Boolean(menuSections?.length);
+    const hideRadios = hideCategoryFilters || useCustomSections;
+    React.useEffect(() => {
+        setOverFunction(null);
+    }, [currentFunctionCategory]);
+    const customSectionGroups = React.useMemo(() => {
+        if (!menuSections?.length) {
+            return null;
+        }
+        const sections = menuSections.map((section) => ({
+            id: section.id,
+            label: section.label,
+            functionNames: section.functionNames.filter((functionName) => !!expressionFunctions[functionName] && !excludedFunctionNames.has(functionName)),
+        }));
+        if (appendUnlistedByCategory) {
+            const listed = new Set(menuSections.flatMap((section) => section.functionNames));
+            const freeformByCategory = new Map();
+            for (const functionName of Object.keys(expressionFunctions)) {
+                if (listed.has(functionName)) {
+                    continue;
+                }
+                if (SYSTEM_AGGREGATED_FUNCTION_NAMES.has(functionName)) {
+                    continue;
+                }
+                if (excludedFunctionNames.has(functionName)) {
+                    continue;
+                }
+                if (!expressionFunctions[functionName]) {
+                    continue;
+                }
+                const rawCategory = expressionFunctions[functionName].category;
+                const category = typeof rawCategory === 'string' && rawCategory.trim() !== ''
+                    ? rawCategory.trim()
+                    : 'Aggregation';
+                if (category.toLowerCase() === 'aggregation') {
+                    const aggregationSection = sections.find((section) => section.id === 'aggregation');
+                    if (aggregationSection) {
+                        aggregationSection.functionNames.push(functionName);
+                    }
+                    continue;
+                }
+                if (!appendUnlistedFreeformInMenu) {
+                    continue;
+                }
+                const existing = freeformByCategory.get(category) ?? [];
+                existing.push(functionName);
+                freeformByCategory.set(category, existing);
+            }
+            const freeformCategories = [...freeformByCategory.keys()].sort((a, b) => a.localeCompare(b));
+            for (const category of freeformCategories) {
+                const functionNames = (freeformByCategory.get(category) ?? []).sort((a, b) => a.localeCompare(b));
+                sections.push({
+                    id: `custom:${category}`,
+                    label: StringExtensions.Humanize(category),
+                    functionNames,
+                });
+            }
+        }
+        return sections.filter((section) => section.functionNames.length > 0);
+    }, [
+        appendUnlistedByCategory,
+        appendUnlistedFreeformInMenu,
+        excludedFunctionNames,
+        expressionFunctions,
+        menuSections,
+    ]);
+    const groupedFunctions = React.useMemo(() => {
+        if (useCustomSections) {
+            return { noCategory: {} };
+        }
+        return Object.keys(expressionFunctions).reduce((acc, key) => {
+            const functionDef = expressionFunctions[key];
+            if (excludedFunctionNames.has(key)) {
+                return acc;
+            }
+            if (!hideRadios &&
+                currentFunctionCategory !== 'all' &&
+                functionDef.category !== currentFunctionCategory) {
+                return acc;
+            }
+            if (functionDef.category) {
+                acc[functionDef.category] = {
+                    ...acc[functionDef.category],
+                    [key]: functionDef,
+                };
+            }
+            else {
+                acc.noCategory[key] = functionDef;
+            }
+            return acc;
+        }, { noCategory: {} });
+    }, [
+        currentFunctionCategory,
+        excludedFunctionNames,
+        expressionFunctions,
+        hideRadios,
+        useCustomSections,
+    ]);
+    const orderedGroupNames = React.useMemo(() => {
+        return Object.keys(groupedFunctions).sort((first, second) => getCategoryOrder(first) - getCategoryOrder(second));
+    }, [groupedFunctions]);
+    const handleFunctionCategoryChange = React.useCallback((type) => () => {
+        setCurrentFunctionCategory(type);
+    }, []);
+    const categoryOptions = React.useMemo(() => {
+        const options = Object.keys(expressionFunctions)
+            .reduce((acc, functionName) => {
+            if (excludedFunctionNames.has(functionName)) {
+                return acc;
+            }
+            const functionExpression = expressionFunctions[functionName];
+            if (!acc.includes(functionExpression.category)) {
+                acc.push(functionExpression.category);
+            }
+            return acc;
+        }, [])
+            .filter((category) => filterableCategories.includes(category))
+            .sort((first, second) => getCategoryOrder(first) - getCategoryOrder(second))
+            .map((category) => ({
+            label: StringExtensions.Humanize(category),
+            value: category,
+        }));
+        return [{ label: 'All', value: 'all' }, ...options];
+    }, [excludedFunctionNames, expressionFunctions]);
+    const hidePopup = useCallback(() => {
+        setMenuOpen(false);
+        setOverFunction(null);
+    }, []);
+    useEffect(() => {
+        if (!menuOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                return;
+            }
+            if (triggerRef.current?.contains(target)) {
+                return;
+            }
+            if (target.closest('[data-name="expression-legacy-function-menu-panel"]')) {
+                return;
+            }
+            hidePopup();
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                hidePopup();
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [menuOpen, hidePopup]);
+    const getPanelWidth = (fallbackTargetWidth) => {
+        if (compactPanel) {
+            return 420;
+        }
+        const toolbar = triggerRef.current?.closest('[data-name="expression-toolbar"]');
+        if (toolbar) {
+            return Math.max(toolbar.getBoundingClientRect().width - 12, 320);
+        }
+        return Math.max(fallbackTargetWidth * 2.5, 480);
+    };
+    const search = searchInputValue.trim().toLowerCase();
+    const matchesSearch = (functionName) => !search || functionName.toLowerCase().includes(search);
+    const renderFunctionButton = (functionName) => (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: _jsx(EditorButton, { data: (getInsertText ?? getFunctionInsertText)(functionName), className: functionMenuItemButtonClassName, children: functionName }) }, functionName));
+    return (_jsx(OverlayTrigger, { visible: menuOpen, targetOffset: 5, alignPosition: FUNCTION_MENU_ALIGN_POSITION, onVisibleChange: (visible) => {
+            if (!visible) {
+                hidePopup();
+            }
+            else {
+                setMenuOpen(true);
+            }
+        }, render: ({ targetWidth }) => (_jsxs(Flex, { "data-name": "expression-legacy-function-menu-panel", className: `${baseClassName}__dropdown-functions-list-wrapper twa:shadow-md twa:bg-background twa:text-foreground twa:text-2 twa:rounded-standard twa:p-2`, flexDirection: "column", style: { width: getPanelWidth(targetWidth) }, children: [!hideRadios ? (_jsx(Flex, { className: "twa:md:gap-3 twa:gap-2 twa:pb-2 twa:md:justify-between twa:justify-start twa:flex-wrap twa:border-b twa:border-primarydark/30 twa:mb-2", children: categoryOptions.map((option) => {
+                        return (_jsx(Radio, { onFocus: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value, children: option.label }, option.value));
+                    }) })) : null, _jsxs(Flex, { className: cn('twa:gap-3 twa:min-h-0', compactPanel ? 'twa:max-h-[220px]' : 'twa:max-h-[60vh]'), flexDirection: "row", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1.5 twa:rounded-standard twa:w-[200px] twa:shrink-0 twa:min-h-0", children: [_jsx(Box, { children: _jsx(AdaptableFormControlTextClear, { className: "twa:w-full twa:text-2", value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Functions" }) }), _jsx(Flex, { className: `${baseClassName}__dropdown-functions-list twa:overflow-auto twa:min-h-0`, "data-name": "expression-dropdown-functions-list", flexDirection: "column", children: customSectionGroups
+                                        ? customSectionGroups.map((section) => {
+                                            const fns = section.functionNames.filter(matchesSearch);
+                                            if (fns.length === 0) {
+                                                return null;
+                                            }
+                                            const showSectionLabel = customSectionGroups.length > 1;
+                                            return (_jsxs(Box, { className: "twa:mb-2 twa:mx-0.5", children: [showSectionLabel ? (_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: section.label })) : null, fns.map(renderFunctionButton)] }, section.id));
+                                        })
+                                        : orderedGroupNames
+                                            .filter((groupName) => !!groupedFunctions[groupName])
+                                            .map((groupName) => {
+                                            const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                                            if (functionsInGroup.length === 0) {
+                                                return _jsx(React.Fragment, {}, groupName);
+                                            }
+                                            const fns = functionsInGroup.filter(matchesSearch);
+                                            if (fns.length === 0) {
+                                                return null;
+                                            }
+                                            return (_jsxs(Box, { className: "twa:mb-2 twa:mx-0.5", children: [_jsx(Tag, { className: "twa:mb-1 twa:bg-primarylight twa:text-primary-foreground twa:w-full", children: StringExtensions.Humanize(groupName) }), fns.map(renderFunctionButton)] }, groupName));
+                                        }) })] }), _jsx(DropdownDocumentationPanel, { className: `${baseClassName}__dropdown-functions-description twa:flex-1 twa:min-w-0`, placeholderDescription: "Hover over a Function to learn more, then click to insert it into the Expression", children: overFunction ? (_jsx(ExpressionFunctionDocumentation, { functionName: overFunction, expressionFunction: expressionFunctions[overFunction] })) : null })] })] })), children: _jsx(Box, { ref: triggerRef, children: _jsx(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", onClick: (event) => {
+                    event.stopPropagation();
+                    if (menuOpen) {
+                        hidePopup();
+                    }
+                    else {
+                        setMenuOpen(true);
+                    }
+                }, children: _jsxs(Flex, { className: "twa:mr-1 twa:gap-1 twa:items-center twa:text-2", children: [_jsx(Icon, { name: "equation" }), triggerLabel] }) }) }) }));
+};
+const LegacyLogicDropdown = ({ expressionFunctions, baseClassName }) => {
+    const triggerRef = React.useRef(null);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [overFunction, setOverFunction] = React.useState(null);
+    const scaffoldNames = SCAFFOLD_FUNCTION_NAMES.filter((name) => !!expressionFunctions[name]);
+    const hidePopup = useCallback(() => {
+        setMenuOpen(false);
+        setOverFunction(null);
+    }, []);
+    useEffect(() => {
+        if (!menuOpen) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                return;
+            }
+            if (triggerRef.current?.contains(target)) {
+                return;
+            }
+            if (target.closest('[data-name="expression-legacy-logic-menu-panel"]')) {
+                return;
+            }
+            hidePopup();
+        };
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                hidePopup();
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [menuOpen, hidePopup]);
+    if (scaffoldNames.length === 0) {
+        return null;
+    }
+    return (_jsx(OverlayTrigger, { visible: menuOpen, targetOffset: 5, onVisibleChange: (visible) => {
+            if (!visible) {
+                hidePopup();
+            }
+            else {
+                setMenuOpen(true);
+            }
+        }, render: () => (_jsxs(Flex, { "data-name": "expression-legacy-logic-menu-panel", className: `${baseClassName}__dropdown-logic-list-wrapper twa:max-w-[60vw] twa:shadow-md twa:bg-background twa:text-foreground twa:text-3 twa:rounded-standard twa:p-3`, flexDirection: "column", children: [_jsx(Box, { className: "twa:text-2 twa:italic twa:mb-2 twa:pb-2 twa:border-b twa:border-primarydark/30", children: "Insert a logic skeleton into the Expression" }), _jsxs(Flex, { className: "twa:gap-2 twa:max-h-[60vh]", flexDirection: "row", children: [_jsx(Flex, { flexDirection: "column", className: "twa:gap-1 twa:min-w-[120px]", children: scaffoldNames.map((functionName) => (_jsx(Box, { onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup(), children: _jsx(EditorButton, { data: SCAFFOLD_INSERT_TEXT[functionName], className: functionMenuItemButtonClassName, children: functionName }) }, functionName))) }), _jsx(DropdownDocumentationPanel, { className: `${baseClassName}__dropdown-logic-description twa:w-[480px]`, placeholderTitle: "No Scaffold Selected", placeholderDescription: "Hover a scaffold to learn more, then click to insert it into the Expression", children: overFunction ? (_jsx(ExpressionFunctionDocumentation, { functionName: overFunction, expressionFunction: expressionFunctions[overFunction] })) : null })] })] })), children: _jsx(Box, { ref: triggerRef, children: _jsx(SimpleButton, { "data-name": "expression-logic-dropdown", icon: "arrow-down", iconPosition: 'end', className: "twa:mr-1", onClick: (event) => {
+                    event.stopPropagation();
+                    if (menuOpen) {
+                        hidePopup();
+                    }
+                    else {
+                        setMenuOpen(true);
+                    }
+                }, children: _jsx(Flex, { className: "twa:mr-1 twa:text-2", children: "Logic" }) }) }) }));
+};
+export function BaseEditorInput(props) {
+    const { expressionFunctions, testData, style, type } = props;
+    const menuExpressionFunctions = props.menuExpressionFunctions ?? expressionFunctions;
+    const [expressionInfoExpanded, setExpressionInfoExpanded] = useState(false);
+    const { expressionEditorRef } = useExpressionEditor();
+    const localEditorHandleRef = React.useRef(null);
+    const [cursor, setCursor] = useState(null);
+    let result;
+    let previewReadsHistory = false;
+    let evaluationError;
+    let expressionError;
+    let compactStatusMessage;
+    let compactStatusTone;
+    let selectedFunctionName;
+    let selectedFunctionIsParen = false;
+    const baseClassName = 'ab-ExpressionEditorInput';
+    const isCompact = props.compactLayout ?? props.functionMenuVariant === 'compact';
+    const lintDiagnostics = buildAqlLintDiagnostics(props.value || '', {
+        ...props.lintContext,
+        columns: props.columnsDropdownItems,
+    });
+    const lintErrorMessages = uniqueLintMessages(lintDiagnostics, 'error');
+    const lintWarningMessages = uniqueLintMessages(lintDiagnostics, 'warning');
+    const completionBraceCalls = props.completionBraceCalls;
+    const braceCallsKey = (completionBraceCalls ?? [])
+        .map((call) => `${call.name}:${call.kind}`)
+        .join('\0');
+    const braceInsertNames = useMemo(() => new Set((completionBraceCalls ?? []).map((call) => call.name)), [braceCallsKey]);
+    const braceKindByName = useMemo(() => new Map((completionBraceCalls ?? []).map((call) => [call.name, call.kind])), [braceCallsKey]);
+    const getMenuInsertText = useCallback((functionName) => braceInsertNames.has(functionName) &&
+        !(braceKindByName.get(functionName) === 'observable' &&
+            functionName in systemScalarExpressionFunctions)
+        ? `${functionName}{}`
+        : getFunctionInsertText(functionName), [braceInsertNames, braceKindByName]);
+    const functionNames = useMemo(() => Object.keys(expressionFunctions)
+        .filter((name) => !EXCLUDED_FROM_FUNCTION_MENUS.has(name))
+        .filter((name) => !braceInsertNames.has(name) || name in systemScalarExpressionFunctions), [expressionFunctions, braceInsertNames]);
+    const toolbarFunctionNames = useMemo(() => {
+        const names = new Set();
+        for (const button of props.editorButtons) {
+            if (button.functionName && menuExpressionFunctions[button.functionName]) {
+                names.add(button.functionName);
+            }
+        }
+        return names;
+    }, [props.editorButtons, menuExpressionFunctions]);
+    const { queryVariables, namedQueries } = useLookupItems(expressionFunctions);
+    const completionVariables = useMemo(() => queryVariables.map((variable) => ({ name: variable.name })), [queryVariables]);
+    const completionNamedQueries = useMemo(() => namedQueries.map((namedQuery) => ({ name: namedQuery.Name })), [namedQueries]);
+    const buildParserExceptionMessage = (e) => {
+        const parserExceptionSummary = 'Invalid expression is not parsable';
+        if (!e.message) {
+            return parserExceptionSummary;
+        }
+        const parserExceptionDetails = e.message;
+        return (_jsxs("details", { children: [_jsxs(Flex, { className: "twa:mb-1", as: "summary", children: [parserExceptionSummary, _jsx("i", { children: " (click for more details)" })] }), _jsx(Box, { className: "twa:ml-3 twa:italic", children: parserExceptionDetails })] }));
+    };
+    const testRowNode = useMemo(() => {
+        const firstRowNode = props.api.gridApi.getFirstRowNode();
+        if (!firstRowNode || !firstRowNode.data) {
+            return {};
+        }
+        return Object.assign(Object.create(Object.getPrototypeOf(firstRowNode)), firstRowNode);
+    }, []);
+    const scopeColumnId = useMemo(() => {
+        return props.api.columnScopeApi.getAnyColumnIdForScope(props.columnScope);
+    }, [props.columnScope]);
+    try {
+        const expr = parse(props.value || '');
+        try {
+            if (!astContainsChipPlaceholder(expr.ast)) {
+                props.api.internalApi
+                    .getQueryLanguageService()
+                    .validateCircularQueryReferences(props.value || '');
+                testRowNode.data = testData;
+                const dataChangedEvent = {
+                    newValue: 100,
+                    oldValue: 150,
+                };
+                if (props.valuePlanModule) {
+                    const executed = props.api.internalApi
+                        .getQueryLanguageService()
+                        .executeValueExpression(props.value || '', props.valuePlanModule, {
+                        rowNode: testRowNode,
+                        columnScope: scopeColumnId,
+                        dataChangedEvent,
+                    });
+                    result = executed.getValueForRow(testRowNode) ?? executed.value;
+                }
+                else if (props.scalarPreviewModule && containsNodeKind(expr.ast, BRACE_CALL_KINDS)) {
+                    result = props.api.internalApi
+                        .getQueryLanguageService()
+                        .evaluateScalarExpression(props.value || '', props.scalarPreviewModule, testRowNode, {
+                        dataChangedEvent,
+                        columnScope: scopeColumnId,
+                    });
+                    previewReadsHistory = true;
+                }
+                else {
+                    const queryLanguageService = props.api.internalApi.getQueryLanguageService();
+                    result = expr.evaluate(createHostExpressionContext({
+                        host: createAdaptableAqlHost(props.api),
+                        functions: expressionFunctions,
+                        whereClauseFunctions: props.whereClauseExpressionFunctions,
+                        rowRef: testRowNode,
+                        columnScope: scopeColumnId,
+                        cellDataChange: toAqlCellChange(dataChangedEvent),
+                        history: queryLanguageService.getHistoryStore(),
+                        clock: queryLanguageService.getClock(),
+                        ext: props.api.internalApi.buildBaseContext(),
+                    }));
+                    previewReadsHistory = containsObservableCall(expr.ast);
+                }
+            }
+        }
+        catch (err) {
+            if (err instanceof ExpressionEvaluationError) {
+                evaluationError = err;
+            }
+            else {
+                throw err;
+            }
+        }
+        const path = findPathTo(expr.ast, cursor);
+        const selectedNode = path[0];
+        selectedFunctionName = selectedNode ? selectedNode.type : null;
+        selectedFunctionIsParen = selectedNode?.metaInfo === 'FUNCTION';
+    }
+    catch (e) {
+        const isParserException = !!e.hash;
+        if (isParserException) {
+            expressionError = buildParserExceptionMessage(e);
+            compactStatusMessage = 'Invalid expression';
+            compactStatusTone = 'error';
+        }
+        else {
+            props.api.logWarn(`Unexpected error while evaluating '${props.value}':
+      ${e}`);
+        }
+    }
+    const showLintErrorsAsBox = !evaluationError && !expressionError && lintErrorMessages.length > 0;
+    const showHostValidationError = shouldDisplayHostValidationError(props.hostValidationError, Boolean(evaluationError || expressionError || lintErrorMessages.length > 0));
+    if (isCompact && !compactStatusTone) {
+        if (evaluationError) {
+            compactStatusMessage = `${evaluationError.expressionFnName} ${evaluationError.message}`;
+            compactStatusTone = 'error';
+        }
+        else if (lintErrorMessages.length > 0) {
+            compactStatusMessage = lintErrorMessages[0];
+            compactStatusTone = 'error';
+        }
+        else if (showHostValidationError) {
+            compactStatusMessage = props.hostValidationError;
+            compactStatusTone = 'error';
+        }
+        else if (lintWarningMessages.length > 0) {
+            compactStatusMessage = lintWarningMessages[0];
+            compactStatusTone = 'warning';
+        }
+        else if (StringExtensions.IsNotNullOrEmpty(props.value?.trim())) {
+            compactStatusMessage = 'Valid Expression';
+            compactStatusTone = 'success';
+        }
+    }
+    useEffect(() => {
+        if (cursor != undefined) {
+            const expressionFunction = selectedFunctionName
+                ? selectedFunctionIsParen && props.hoverScalarFunctions?.[selectedFunctionName]
+                    ? props.hoverScalarFunctions[selectedFunctionName]
+                    : expressionFunctions[selectedFunctionName]
+                : null;
+            props.onSelectedFunctionChange(selectedFunctionName && expressionFunction
+                ? { name: selectedFunctionName, expressionFunction }
+                : null);
+        }
+    }, [selectedFunctionName, selectedFunctionIsParen, cursor]);
+    const clauseChipRow = useMemo(() => {
+        if (!braceInsertNames.size || cursor == null) {
+            return null;
+        }
+        const enclosing = resolveEnclosingFunctionCall(props.value || '', cursor);
+        if (!enclosing || enclosing.bracket !== 'brace') {
+            return null;
+        }
+        const clauses = getClauseCompletionsForCall(enclosing.functionName, braceKindByName.get(enclosing.functionName), props.lintContext?.catalogue);
+        if (!clauses.length) {
+            return null;
+        }
+        const before = (props.value || '').slice(0, cursor).trimEnd();
+        const afterSeparator = before.endsWith('{') || before.endsWith(',');
+        return clauses.map(({ clause, apply }) => ({
+            data: afterSeparator
+                ? apply.trimEnd()
+                : clause === 'WHERE'
+                    ? ` ${apply.trimEnd()}`
+                    : `, ${apply.trimEnd()}`,
+            text: CLAUSE_CHIP_LABELS[clause] ?? clause,
+        }));
+    }, [props.value, cursor, braceInsertNames, braceKindByName, props.lintContext?.catalogue]);
+    const operatorButtonRows = clauseChipRow
+        ? [clauseChipRow]
+        : props.editorButtons
+            .filter((editorButtonDef) => !editorButtonDef.functionName || !!expressionFunctions[editorButtonDef.functionName])
+            .reduce((rows, editorButtonDef) => {
+            if (!rows.length) {
+                rows.push([]);
+            }
+            rows[rows.length - 1].push(editorButtonDef);
+            if (editorButtonDef.newRowAfter) {
+                rows.push([]);
+            }
+            return rows;
+        }, [])
+            .filter((row) => row.length > 0);
+    const showDocumentationLink = Boolean(props.documentationLink) && props.api.internalApi.isDocumentationLinksDisplayed();
+    return (_jsxs(Flex, { flexDirection: "column", className: isCompact ? 'twa:h-full twa:min-h-0 twa:overflow-hidden' : undefined, children: [_jsxs(Flex, { "data-name": "expression-toolbar", className: `${baseClassName} twa:pt-1 twa:pb-2 twa:mb-2 twa:mt-0 twa:w-full twa:shrink-0 ${isCompact ? 'twa:pb-1 twa:mb-1' : ''}`, flexDirection: "column", children: [_jsxs(Flex, { className: "twa:w-full twa:min-h-8 twa:items-center twa:justify-between twa:gap-2", children: [_jsx(Flex, { className: "twa:flex-wrap twa:items-center", children: (props.functionMenuVariant ?? 'legacy') === 'basic' ? (_jsx(BasicFunctionMenus, { expressionFunctions: menuExpressionFunctions, editorButtons: props.editorButtons, baseClassName: baseClassName, extraFunctionMenus: props.extraFunctionMenus, prioritizeObservableMenu: props.prioritizeObservableMenu, suppressObservableMenu: props.suppressObservableMenu, getInsertText: getMenuInsertText })) : isCompact ? (_jsx(CompactExpressionToolbar, { expressionFunctions: menuExpressionFunctions, columns: props.columnsDropdownItems ?? [], getInsertText: getMenuInsertText, toolbarFunctionNames: props.compactIncludeToolbarFunctions ? undefined : toolbarFunctionNames })) : (_jsx(_Fragment, { children: (() => {
+                                        const menuVariant = props.functionMenuVariant;
+                                        const isAggregatedVariant = menuVariant === 'aggregated';
+                                        const whereStrip = menuVariant != null &&
+                                            WHERE_STRIP_FUNCTION_MENU_VARIANTS.has(menuVariant) &&
+                                            Boolean(props.alongsideBasicMenuExpressionFunctions);
+                                        if (whereStrip) {
+                                            return (_jsx(BasicFunctionMenus, { expressionFunctions: {
+                                                    ...props.alongsideBasicMenuExpressionFunctions,
+                                                    ...menuExpressionFunctions,
+                                                }, editorButtons: props.editorButtons, baseClassName: baseClassName, extraFunctionMenus: buildWhereStripExtraMenus(menuVariant, menuExpressionFunctions), getInsertText: getMenuInsertText }));
+                                        }
+                                        const aggregatedFunctionsDropdown = isAggregatedVariant ? (_jsx(LegacyFunctionsDropdown, { expressionFunctions: menuExpressionFunctions, baseClassName: baseClassName, hideCategoryFilters: true, menuSections: AGGREGATED_FUNCTION_MENU_SECTIONS, appendUnlistedByCategory: true, appendUnlistedFreeformInMenu: false, getInsertText: getMenuInsertText })) : (_jsx(LegacyFunctionsDropdown, { expressionFunctions: menuExpressionFunctions, baseClassName: baseClassName, hideCategoryFilters: menuVariant != null && SECTIONED_FUNCTION_MENU_VARIANTS.has(menuVariant), menuSections: menuVariant ? FUNCTION_MENU_SECTIONS_BY_VARIANT[menuVariant] : undefined, appendUnlistedByCategory: menuVariant === 'aggregatedBoolean', getInsertText: getMenuInsertText }));
+                                        const aggregatedCustomCategoryDropdowns = isAggregatedVariant
+                                            ? collectCustomAggregatedCategoryMenus(menuExpressionFunctions, AGGREGATED_FUNCTION_MENU_SECTIONS).map(({ category, functionNames }) => (_jsx(LegacyFunctionsDropdown, { expressionFunctions: menuExpressionFunctions, baseClassName: baseClassName, triggerLabel: StringExtensions.Humanize(category), hideCategoryFilters: true, menuSections: [
+                                                    {
+                                                        id: `custom:${category}`,
+                                                        label: StringExtensions.Humanize(category),
+                                                        functionNames,
+                                                    },
+                                                ], getInsertText: getMenuInsertText }, `custom-agg-category:${category}`)))
+                                            : null;
+                                        return (_jsxs(_Fragment, { children: [aggregatedFunctionsDropdown, aggregatedCustomCategoryDropdowns, menuVariant == null || !SECTIONED_FUNCTION_MENU_VARIANTS.has(menuVariant) ? (_jsx(LegacyLogicDropdown, { expressionFunctions: menuExpressionFunctions, baseClassName: baseClassName })) : null, props.alongsideBasicMenuExpressionFunctions ? (_jsx(BasicFunctionMenus, { expressionFunctions: props.alongsideBasicMenuExpressionFunctions, editorButtons: props.editorButtons, baseClassName: baseClassName, getInsertText: getMenuInsertText })) : null] }));
+                                    })() })) }), props.toolbarEnd, !props.toolbarEnd && !props.expressionInfoCard && showDocumentationLink && (_jsx(ButtonInfo, { "data-name": "expression-documentation", className: "twa:mr-2", tooltip: "See documentation for more details and examples", onClick: () => window.open(props.documentationLink, '_blank') }))] }), operatorButtonRows.map((row, rowIndex) => (_jsx(Flex, { "data-name": "expression-toolbar-operators", className: "twa:mt-1 twa:flex-wrap twa:items-center twa:gap-1", children: row.map((editorButtonDef, buttonIndex) => (_jsx(EditorButton, { data: editorButtonDef.data, selectOnInsert: editorButtonDef.selectOnInsert, icon: editorButtonDef.icon, variant: "outlined", className: "twa:mr-0 twa:h-7 twa:min-h-0 twa:px-2 twa:text-2", children: !editorButtonDef.icon &&
+                                (editorButtonDef.text || editorButtonDef.functionName || editorButtonDef.data) }, `${editorButtonDef.functionName ?? editorButtonDef.text ?? editorButtonDef.data}-${buttonIndex}-operator`))) }, `expression-toolbar-operators-${rowIndex}`)))] }), _jsxs(Box, { className: cn('twa:relative twa:w-full', isCompact && 'twa:flex-1 twa:min-h-0 twa:overflow-hidden'), children: [_jsx(AqlCodeMirrorEditor, { "data-name": `expression-input-${type}`, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, autoFocus: true, compact: isCompact, editMode: isCompact ? 'live' : 'regular', functionNames: functionNames, completionBraceCalls: completionBraceCalls, lintExpressionFunctions: expressionFunctions, hoverScalarFunctions: props.hoverScalarFunctions, lintContext: props.lintContext, completionColumns: props.columnsDropdownItems, completionVariables: completionVariables, completionNamedQueries: completionNamedQueries, className: join('ab-ExpressionEditor__textarea', `${baseClassName}__textarea`), style: style, onChange: props.onChange, onCursorChange: (nextCursor) => {
+                            setCursor(nextCursor);
+                            props.onCursorChange?.(nextCursor);
+                        }, onActivate: () => {
+                            if (localEditorHandleRef.current) {
+                                expressionEditorRef.current = localEditorHandleRef.current;
+                            }
+                        }, onHandleChange: (handle) => {
+                            localEditorHandleRef.current = handle;
+                            if (handle && !expressionEditorRef.current) {
+                                expressionEditorRef.current = handle;
+                            }
+                        } }), _jsx(SimpleButton, { "data-name": "expression-input-format", variant: "text", icon: "brush", tooltip: StringExtensions.IsNotNullOrEmpty(props.value)
+                            ? 'Format expression (Shift+Alt+F)'
+                            : undefined, disabled: props.disabled || StringExtensions.IsNullOrEmpty(props.value), className: "twa:absolute twa:top-2 twa:right-8 twa:p-0 twa:z-1", onClick: () => localEditorHandleRef.current?.format() }), _jsx(SimpleButton, { "data-name": "expression-input-clear", variant: "text", icon: "close", tooltip: StringExtensions.IsNotNullOrEmpty(props.value) ? 'Clear' : undefined, disabled: props.disabled || StringExtensions.IsNullOrEmpty(props.value), className: "twa:absolute twa:top-2 twa:right-2 twa:p-0 twa:z-1", onClick: () => props.onChange('') })] }), isCompact ? (_jsx(Box, { className: "twa:mt-1 twa:min-h-5 twa:shrink-0 twa:text-2 twa:leading-5 twa:truncate", "data-name": "expression-compact-status", title: compactStatusTone === 'error'
+                    ? evaluationError
+                        ? compactStatusMessage
+                        : lintErrorMessages.length > 0
+                            ? lintErrorMessages.join('\n')
+                            : compactStatusMessage
+                    : compactStatusTone === 'warning'
+                        ? lintWarningMessages.join('\n')
+                        : undefined, children: compactStatusMessage ? (_jsx("span", { className: compactStatusClassName(compactStatusTone), children: compactStatusMessage })) : null })) : (_jsxs(_Fragment, { children: [expressionError && (_jsx(Box, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full twa:text-2 twa:text-destructive", "data-name": "expression-editor-error", children: expressionError })), evaluationError && (_jsx(Box, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full twa:text-2 twa:text-destructive", "data-name": "expression-editor-evaluation-error", children: `${evaluationError.expressionFnName} ${evaluationError.message}` })), showLintErrorsAsBox && (_jsx(Box, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full twa:text-2 twa:text-destructive", "data-name": "expression-editor-lint-errors", children: lintErrorMessages.map((message) => (_jsx(Box, { children: message }, message))) })), showHostValidationError && (_jsx(Box, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full twa:text-2 twa:text-destructive", "data-name": "expression-editor-host-validation-error", children: props.hostValidationError })), lintWarningMessages.length > 0 && (_jsx(Box, { className: "twa:mt-2 twa:whitespace-pre-wrap twa:w-full twa:text-2 twa:text-warn", "data-name": "expression-editor-warnings", children: lintWarningMessages.map((message) => (_jsx(Box, { children: message }, message))) }))] })), props.expressionInfoCard ? (_jsxs(Card, { shadow: false, className: "twa:mt-2", "data-name": props.expressionInfoCard.dataName ?? 'expression-info-card', children: [_jsx(Card.Title, { border: expressionInfoExpanded, className: "twa:w-full twa:p-0", children: _jsxs(Flex, { className: "twa:justify-between twa:items-center twa:w-full twa:cursor-pointer twa:select-none twa:px-2 twa:py-1", alignItems: "center", "data-state": expressionInfoExpanded ? 'expanded' : 'collapsed', onClick: () => setExpressionInfoExpanded((expanded) => !expanded), role: "button", tabIndex: 0, "aria-expanded": expressionInfoExpanded, onKeyDown: (event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    setExpressionInfoExpanded((expanded) => !expanded);
+                                }
+                            }, children: [_jsxs(Flex, { className: "twa:items-center twa:gap-2 twa:min-w-0", alignItems: "center", children: [_jsx(Icon, { name: expressionInfoExpanded ? 'collapse' : 'expand', size: 12 }), _jsx(Box, { className: "twa:font-medium twa:truncate", children: props.expressionInfoCard.title })] }), showDocumentationLink ? (_jsx(Box, { className: "twa:shrink-0", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(ButtonInfo, { "data-name": "expression-documentation", tooltip: "See documentation for more details and examples", onClick: () => window.open(props.documentationLink, '_blank') }) })) : null] }) }), expressionInfoExpanded ? (_jsxs(Card.Body, { className: "twa:gap-2 twa:p-2", children: [_jsx(Box, { className: "twa:text-3", children: props.expressionInfoCard.description }), !props.hideResultPreview && result !== undefined && !showLintErrorsAsBox && (_jsx(Box, { className: `${baseClassName}__editor-feedback twa:mt-2`, "data-name": "expression-editor-feedback", children: _jsxs("pre", { className: "twa:whitespace-pre-wrap twa:m-0", children: ["Result (using test data):", ' ', _jsx("span", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2", children: formatPreviewResult(result, previewReadsHistory) })] }) })), props.expressionInfoCard.children] })) : null] })) : (!props.suppressTypeInfoCard &&
+                props.isFullExpression !== true && (_jsxs(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3", children: ["This Expression must resolve to a ", _jsx("b", { children: "boolean " }), "(i.e. true / false) value"] }))), !props.expressionInfoCard &&
+                !props.hideResultPreview &&
+                result !== undefined &&
+                !showLintErrorsAsBox && (_jsx(Box, { className: `${baseClassName}__editor-feedback twa:mt-2 twa:p-2 twa:rounded-standard`, "data-name": "expression-editor-feedback", children: _jsxs("pre", { className: "twa:whitespace-pre-wrap twa:m-0", children: ["Result (using test data):", ' ', _jsx("b", { className: "twa:bg-accentlight twa:text-accent twa:rounded-full twa:p-1 twa:px-2", children: formatPreviewResult(result, previewReadsHistory) })] }) }))] }));
+}
+function uniqueLintMessages(diagnostics, severity) {
+    const messages = [];
+    const seen = new Set();
+    for (const diagnostic of diagnostics) {
+        if (diagnostic.severity !== severity || seen.has(diagnostic.message)) {
+            continue;
+        }
+        seen.add(diagnostic.message);
+        messages.push(diagnostic.message);
+    }
+    return messages;
+}
+function compactStatusClassName(tone) {
+    if (tone === 'success') {
+        return 'twa:text-success';
+    }
+    if (tone === 'warning') {
+        return 'twa:text-warn';
+    }
+    return 'twa:text-destructive';
+}