feat(ASTBuilder): add aggregate fuzzy match filter (#774)

This commit introduces support for fuzzy match filtering in aggregate queries. Key changes include:

* Defined a new AST node with dedicated children to represent the fuzzy filter configuration.

* Created a generic fuzzy matching configuration object that can be injected into consuming components.

* Reused and generalized the existing fuzzy match function model to support broader use cases.

---------

Co-authored-by: Christopher Debove <[email protected]>

Author: siiick

packages/app-builder/src/components/AstBuilder/OperandInfos.tsx

@@ -9,7 +9,7 @@ import {
 import {
   type AggregationAstNode,
   isAggregation,
-  isBinaryAggregationFilter,
+  isUnaryAggregationFilter,
 } from '@app-builder/models/astNode/aggregation';
 import {
   type CustomListAccessAstNode,
@@ -187,7 +187,7 @@ function AggregatorDescription({ node }: AggregatorDescriptionProps) {
                 {fieldName.constant ?? '...'}
               </p>
               <ViewingOperator operator={operator.constant} isFilter />
-              {isBinaryAggregationFilter(filter) ? (
+              {!isUnaryAggregationFilter(filter) ? (
                 <ViewingAstBuilderOperand node={filter.namedChildren.value} />
               ) : null}
             </div>

packages/app-builder/src/components/AstBuilder/edition/EditModal/EditModal.tsx

@@ -1,4 +1,7 @@
-import { isAggregation } from '@app-builder/models/astNode/aggregation';
+import {
+  isAggregation,
+  isFuzzyMatchFilterOptionsAstNode,
+} from '@app-builder/models/astNode/aggregation';
 import { type EditableAstNode } from '@app-builder/models/astNode/builder-ast-node';
 import { isIsMultipleOf } from '@app-builder/models/astNode/multiple-of';
 import {
@@ -14,6 +17,7 @@ import { getEvaluationForNode } from '../helpers';
 import { useRoot } from '../hooks/useRoot';
 import { AstBuilderNodeSharpFactory } from '../node-store';
 import { EditAggregation } from './modals/Aggregation/Aggregation';
+import { EditFuzzyMatchAggregation } from './modals/FuzzyMatchComparator/FuzzyMatchAggregation';
 import { EditFuzzyMatchComparator } from './modals/FuzzyMatchComparator/FuzzyMatchComparator';
 import { EditIsMultipleOf } from './modals/IsMultipleOf/IsMultipleOf';
 import { EditStringTemplate } from './modals/StringTemplate/StringTemplate';
@@ -54,6 +58,7 @@ export function OperandEditModal({ node, ...props }: OperandEditModalProps) {
         .when(isFuzzyMatchComparator, () => <EditFuzzyMatchComparator {...props} />)
         .when(isAggregation, () => <EditAggregation {...props} />)
         .when(isStringTemplateAstNode, () => <EditStringTemplate {...props} />)
+        .when(isFuzzyMatchFilterOptionsAstNode, () => <EditFuzzyMatchAggregation {...props} />)
         .exhaustive()}
     </AstBuilderNodeSharpFactory.Provider>
   );

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/Aggregation/Aggregation.tsx

@@ -85,7 +85,7 @@ export function EditAggregation(props: Omit<OperandEditModalProps, 'node'>) {
             )}
           /> */}
         </div>
-        <div className="grid grid-cols-[150px_1fr] gap-2">
+        <div className="grid grid-cols-[240px_1fr] gap-2">
           <div>{t('scenarios:edit_aggregation.function_title')}</div>
           <div>{t('scenarios:edit_aggregation.object_field_title')}</div>
           <div className="flex flex-col gap-2">

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/Aggregation/EditFilters.tsx

@@ -1,24 +1,32 @@
 import { Callout } from '@app-builder/components';
+import { AstBuilderDataSharpFactory } from '@app-builder/components/AstBuilder/Provider';
 import { RemoveButton } from '@app-builder/components/AstBuilder/styles/RemoveButton';
 import { scenarioI18n } from '@app-builder/components/Scenario';
-import { type DataModel, NewUndefinedAstNode } from '@app-builder/models';
+import { type DataModel, isUndefinedAstNode, NewUndefinedAstNode } from '@app-builder/models';
 import {
   type AggregationAstNode,
   aggregationFilterOperators,
   type BinaryAggregationFilterAstNode,
+  type ComplexAggregationFilterAstNode,
   isBinaryAggregationFilter,
+  isBinaryAggregationFilterOperator,
+  isComplexAggregationFilter,
   isUnaryAggregationFilterOperator,
   NewAggregatorFilterAstNode,
+  NewFuzzyMatchFilterOptionsAstNode,
   type UnaryAggregationFilterAstNode,
 } from '@app-builder/models/astNode/aggregation';
 import {
   isKnownOperandAstNode,
   type KnownOperandAstNode,
 } from '@app-builder/models/astNode/builder-ast-node';
 import { NewConstantAstNode } from '@app-builder/models/astNode/constant';
+import { getAstNodeDisplayName } from '@app-builder/services/ast-node/getAstNodeDisplayName';
+import { useFormatLanguage } from '@app-builder/utils/format';
 import clsx from 'clsx';
 import { Fragment, type ReactNode, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { match } from 'ts-pattern';
 import { Button, MenuCommand } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
@@ -27,6 +35,7 @@ import { EditionEvaluationErrors } from '../../../EvaluationErrors';
 import { getErrorsForNode } from '../../../helpers';
 import { AstBuilderNodeSharpFactory } from '../../../node-store';
 import { OperatorSelect } from '../../../OperatorSelect';
+import { OperandEditModal } from '../../EditModal';
 import { type DataModelFieldOption, EditDataModelFieldTableMenu } from './EditDataModelField';
 
 type EditFiltersProps = {
@@ -35,11 +44,15 @@ type EditFiltersProps = {
 };
 export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
   const { t } = useTranslation(scenarioI18n);
+  const { t: stringifyContextT } = useTranslation(['common', 'scenarios']);
+  const language = useFormatLanguage();
+  const customLists = AstBuilderDataSharpFactory.select((s) => s.data.customLists);
   const nodeSharp = AstBuilderNodeSharpFactory.useSharp();
   const filters = nodeSharp.select(
     (s) => (s.node as AggregationAstNode).namedChildren.filters.children,
   );
   const evaluation = nodeSharp.select((s) => s.validation);
+  const [filterEditedIndex, setEditedFilterIndex] = useState<number | null>(null);
 
   const tableName = aggregatedField?.tableName;
   const options = useMemo(() => {
@@ -67,6 +80,7 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
         <div className="flex flex-col gap-2">
           {filters.map((filter, filterIndex) => {
             const binaryFilter = isBinaryAggregationFilter(filter);
+            const complexFilter = isComplexAggregationFilter(filter);
             const isLastFilter = filterIndex === filters.length - 1;
             const filteredFieldErrors = getErrorsForNode(evaluation, [
               filter.namedChildren.fieldName.id,
@@ -77,6 +91,15 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
               ? getErrorsForNode(evaluation, filter.namedChildren.value.id, true)
               : [];
 
+            const displayName =
+              complexFilter && !isUndefinedAstNode(filter.namedChildren.value.namedChildren.value)
+                ? getAstNodeDisplayName(filter.namedChildren.value, {
+                    t: stringifyContextT,
+                    language,
+                    customLists,
+                  })
+                : '...';
+
             return (
               <Fragment key={filterIndex}>
                 <div className="border-grey-90 flex flex-col gap-4 rounded-md border-[0.5px] p-4">
@@ -124,16 +147,50 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
                               return;
                             }
 
-                            const valueNode =
-                              'value' in filter.namedChildren
-                                ? filter.namedChildren.value
-                                : NewUndefinedAstNode();
-                            (filter as BinaryAggregationFilterAstNode).namedChildren = {
+                            if (isBinaryAggregationFilterOperator(operator)) {
+                              const valueNode = match(filter)
+                                .when(
+                                  isBinaryAggregationFilter,
+                                  (binFilter: BinaryAggregationFilterAstNode) =>
+                                    binFilter.namedChildren.value,
+                                )
+                                .when(
+                                  isComplexAggregationFilter,
+                                  (compFilter: ComplexAggregationFilterAstNode) =>
+                                    compFilter.namedChildren.value.namedChildren.value,
+                                )
+                                .otherwise(() => NewUndefinedAstNode());
+
+                              (filter as BinaryAggregationFilterAstNode).namedChildren = {
+                                tableName: filter.namedChildren.tableName,
+                                fieldName: filter.namedChildren.fieldName,
+                                operator: NewConstantAstNode({ constant: operator }),
+                                value: valueNode,
+                              };
+                              return;
+                            }
+
+                            const valueNode = match(filter)
+                              .when(
+                                isBinaryAggregationFilter,
+                                (binFilter: BinaryAggregationFilterAstNode) =>
+                                  binFilter.namedChildren.value,
+                              )
+                              .when(
+                                isComplexAggregationFilter,
+                                (compFilter: ComplexAggregationFilterAstNode) =>
+                                  compFilter.namedChildren.value.namedChildren.value,
+                              )
+                              .otherwise(() => NewUndefinedAstNode());
+
+                            (filter as ComplexAggregationFilterAstNode).namedChildren = {
                               tableName: filter.namedChildren.tableName,
                               fieldName: filter.namedChildren.fieldName,
                               operator: NewConstantAstNode({ constant: operator }),
-                              value: valueNode,
+                              value: NewFuzzyMatchFilterOptionsAstNode({ value: valueNode }),
                             };
+
+                            // TODO: Manage complex operator change
                           });
                           nodeSharp.actions.validate();
                         }}
@@ -155,6 +212,27 @@ export function EditFilters({ aggregatedField, dataModel }: EditFiltersProps) {
                           />
                         </>
                       ) : null}
+                      {complexFilter && filter.namedChildren.operator.constant ? (
+                        <>
+                          <Button
+                            variant="secondary"
+                            onClick={() => setEditedFilterIndex(filterIndex)}
+                          >
+                            {displayName}
+                          </Button>
+                          {filter.namedChildren.value && filterEditedIndex === filterIndex ? (
+                            <OperandEditModal
+                              node={filter.namedChildren.value}
+                              onSave={() => {
+                                setEditedFilterIndex(null);
+                              }}
+                              onCancel={() => {
+                                setEditedFilterIndex(null);
+                              }}
+                            />
+                          ) : null}
+                        </>
+                      ) : null}
                     </div>
                     <RemoveButton
                       onClick={() => {

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/FuzzyMatchComparator/EditAlgorithm.tsx

@@ -1,29 +1,25 @@
-import { type ConstantAstNode } from '@app-builder/models/astNode/constant';
 import {
-  editableFuzzyMatchAlgorithms,
+  type BaseFuzzyMatchConfig,
   type FuzzyMatchAlgorithm,
-  getFuzzyMatchAlgorithmName,
-  isEditableFuzzyMatchAlgorithm,
-} from '@app-builder/models/fuzzy-match';
+} from '@app-builder/models/fuzzy-match/baseFuzzyMatchConfig';
 import { useCallbackRef } from '@marble/shared';
 import { useTranslation } from 'react-i18next';
 import { Select, Tooltip } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-import { EditionEvaluationErrors } from '../../../EvaluationErrors';
 import { operatorContainerClassnames } from '../../../OperatorSelect';
 
 interface EditAlgorithmProps {
-  node: ConstantAstNode<FuzzyMatchAlgorithm>;
+  fuzzyMatchConfig: BaseFuzzyMatchConfig;
+  algorithm: FuzzyMatchAlgorithm;
   onChange: (value: FuzzyMatchAlgorithm) => void;
 }
 
-export function EditAlgorithm({ node, onChange }: EditAlgorithmProps) {
+export function EditAlgorithm({ fuzzyMatchConfig, algorithm, onChange }: EditAlgorithmProps) {
   const { t } = useTranslation(['common', 'scenarios']);
-  const algorithm = node.constant;
   const onValueChange = useCallbackRef(onChange);
 
-  if (isEditableFuzzyMatchAlgorithm(algorithm)) {
+  if (fuzzyMatchConfig.isEditableAlgorithm(algorithm)) {
     return (
       <div className="flex flex-1 flex-col gap-2">
         <label htmlFor="algorithm" className="text-m text-grey-00 font-normal">
@@ -45,15 +41,18 @@ export function EditAlgorithm({ node, onChange }: EditAlgorithmProps) {
           </Select.Trigger>
           <Select.Content className="max-h-60">
             <Select.Viewport>
-              {editableFuzzyMatchAlgorithms.map((fuzzyMatchAlgorithm) => {
+              {Array.from(fuzzyMatchConfig.editablesAlgorithms).map((fuzzyMatchAlgorithm) => {
                 return (
                   <Select.Item
                     className="flex min-w-[110px] flex-col gap-1"
                     key={fuzzyMatchAlgorithm}
                     value={fuzzyMatchAlgorithm}
                   >
                     <Select.ItemText>
-                      <FuzzyMatchAlgorithmLabel fuzzyMatchAlgorithm={fuzzyMatchAlgorithm} />
+                      <FuzzyMatchAlgorithmLabel
+                        fuzzyMatchConfig={fuzzyMatchConfig}
+                        fuzzyMatchAlgorithm={fuzzyMatchAlgorithm}
+                      />
                     </Select.ItemText>
                     <p className="text-s text-grey-50">
                       {t(`scenarios:edit_fuzzy_match.algorithm.description.${fuzzyMatchAlgorithm}`)}
@@ -64,7 +63,6 @@ export function EditAlgorithm({ node, onChange }: EditAlgorithmProps) {
             </Select.Viewport>
           </Select.Content>
         </Select.Root>
-        <EditionEvaluationErrors id={node.id} />
       </div>
     );
   }
@@ -75,22 +73,26 @@ export function EditAlgorithm({ node, onChange }: EditAlgorithmProps) {
         {t('scenarios:edit_fuzzy_match.threshold.label')}
       </span>
       <div className="bg-grey-98 border-grey-90 flex h-10 items-center justify-center rounded border p-2 text-center">
-        <FuzzyMatchAlgorithmLabel fuzzyMatchAlgorithm={algorithm} />
+        <FuzzyMatchAlgorithmLabel
+          fuzzyMatchConfig={fuzzyMatchConfig}
+          fuzzyMatchAlgorithm={algorithm}
+        />
       </div>
-      <EditionEvaluationErrors id={node.id} />
     </div>
   );
 }
 
 function FuzzyMatchAlgorithmLabel({
+  fuzzyMatchConfig,
   fuzzyMatchAlgorithm,
 }: {
+  fuzzyMatchConfig: BaseFuzzyMatchConfig;
   fuzzyMatchAlgorithm: FuzzyMatchAlgorithm;
 }) {
   const { t } = useTranslation(['common', 'scenarios']);
   return (
     <span className="text-s text-grey-00 font-semibold">
-      {getFuzzyMatchAlgorithmName(t, fuzzyMatchAlgorithm)}
+      {fuzzyMatchConfig.getAlgorithmName(t, fuzzyMatchAlgorithm)}
     </span>
   );
 }

packages/app-builder/src/components/AstBuilder/edition/EditModal/modals/FuzzyMatchComparator/EditLevel.tsx

@@ -1,18 +1,19 @@
 import {
-  type FuzzyMatchComparatorLevel,
-  fuzzyMatchComparatorLevelData,
-} from '@app-builder/models/fuzzy-match';
+  type BaseFuzzyMatchConfig,
+  type Level,
+} from '@app-builder/models/fuzzy-match/baseFuzzyMatchConfig';
 import { useTranslation } from 'react-i18next';
 import { Select } from 'ui-design-system';
 
 import { operatorContainerClassnames } from '../../../OperatorSelect';
 
 interface EditLevelProps {
-  level: FuzzyMatchComparatorLevel;
-  setLevel: (level: FuzzyMatchComparatorLevel) => void;
+  config: BaseFuzzyMatchConfig;
+  level: Level;
+  setLevel: (level: Level) => void;
 }
 
-export function EditLevel({ level, setLevel }: EditLevelProps) {
+export function EditLevel({ config, level, setLevel }: EditLevelProps) {
   const { t } = useTranslation(['common', 'scenarios']);
 
   return (
@@ -28,7 +29,7 @@ export function EditLevel({ level, setLevel }: EditLevelProps) {
         </Select.Trigger>
         <Select.Content className="max-h-60">
           <Select.Viewport>
-            {fuzzyMatchComparatorLevelData.map(({ level }) => {
+            {config.getLevels().map((level) => {
               return (
                 <Select.Item className="min-w-[110px]" key={level} value={level}>
                   <Select.ItemText>