@finos/legend-application-query 5.2.6 → 6.0.0

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -1,1069 +0,0 @@
-/**
- * Copyright (c) 2020-present, Goldman Sachs
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  useApplicationStore,
-  BasicValueSpecificationEditor,
-} from '@finos/legend-application';
-import {
-  type TreeNodeContainerProps,
-  type TreeNodeViewProps,
-  type TooltipPlacement,
-  BlankPanelPlaceholder,
-  CaretDownIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ClickAwayListener,
-  clsx,
-  ContextMenu,
-  DropdownMenu,
-  FilledTriangleIcon,
-  MenuContent,
-  MenuContentItem,
-  TimesIcon,
-  PlusIcon,
-  ExpandIcon,
-  CompressIcon,
-  CircleIcon,
-  BrushIcon,
-  NewFolderIcon,
-  PlusCircleIcon,
-  InfoCircleIcon,
-  Tooltip,
-  StringTypeIcon,
-  ToggleIcon,
-  HashtagIcon,
-  ClockIcon,
-  PanelDropZone,
-  DragPreviewLayer,
-  PanelEntryDropZonePlaceholder,
-  useDragPreviewLayer,
-} from '@finos/legend-art';
-import {
-  type Type,
-  type ValueSpecification,
-  Class,
-  Enumeration,
-  PrimitiveType,
-  PRIMITIVE_TYPE,
-  getMultiplicityDescription,
-} from '@finos/legend-graph';
-import {
-  assertErrorThrown,
-  guaranteeNonNullable,
-  returnUndefOnError,
-  debounce,
-} from '@finos/legend-shared';
-import { flowResult } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { useDrop, useDrag } from 'react-dnd';
-import { getColumnMultiplicity } from '../../stores/fetch-structure/projection/post-filter/operators/QueryBuilderPostFilterOperatorHelper.js';
-import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/projection/aggregation/QueryBuilderAggregationState.js';
-import type { QueryBuilderPostFilterOperator } from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterOperator.js';
-import {
-  type QueryBuilderPostFilterTreeNodeData,
-  type QueryBuilderPostFilterDropTarget,
-  PostFilterConditionState,
-  type QueryBuilderPostFilterConditionDragSource,
-  QueryBuilderPostFilterTreeConditionNodeData,
-  QueryBuilderPostFilterTreeGroupNodeData,
-  QUERY_BUILDER_POST_FILTER_DND_TYPE,
-  QueryBuilderPostFilterTreeBlankConditionNodeData,
-} from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
-import {
-  type QueryBuilderProjectionColumnState,
-  type QueryBuilderProjectionColumnDragSource,
-  QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-  QueryBuilderDerivationProjectionColumnState,
-} from '../../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
-import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryParametersState.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
-import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
-import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
-
-const QueryBuilderPostFilterConditionContextMenu = observer(
-  forwardRef<
-    HTMLDivElement,
-    {
-      queryBuilderState: QueryBuilderState;
-      node: QueryBuilderPostFilterTreeNodeData;
-    }
-  >(function QueryBuilderPostFilterConditionContextMenu(props, ref) {
-    const { queryBuilderState, node } = props;
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
-    const removeNode = (): void =>
-      postFilterState.removeNodeAndPruneBranch(node);
-    const createCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.addNodeFromNode(
-        new QueryBuilderPostFilterTreeBlankConditionNodeData(undefined),
-        node,
-      );
-    };
-    const createGroupCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.addGroupConditionNodeFromNode(node);
-    };
-    const newGroupWithCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.newGroupWithConditionFromNode(undefined, node);
-    };
-
-    return (
-      <MenuContent ref={ref}>
-        {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
-          <MenuContentItem onClick={createCondition}>
-            Add New Condition
-          </MenuContentItem>
-        )}
-        {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
-          <MenuContentItem onClick={createGroupCondition}>
-            Add New Logical Group
-          </MenuContentItem>
-        )}
-        {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
-          <MenuContentItem onClick={newGroupWithCondition}>
-            Form a New Logical Group
-          </MenuContentItem>
-        )}
-        <MenuContentItem onClick={removeNode}>Remove</MenuContentItem>
-      </MenuContent>
-    );
-  }),
-);
-
-const QueryBuilderPostFilterGroupConditionEditor = observer(
-  (props: {
-    node: QueryBuilderPostFilterTreeGroupNodeData;
-    isDragOver: boolean;
-  }) => {
-    const { node, isDragOver } = props;
-    const switchOperation: React.MouseEventHandler<HTMLDivElement> = (
-      event,
-    ): void => {
-      event.stopPropagation(); // prevent triggering selecting the node
-      node.setGroupOperation(
-        node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND
-          ? QUERY_BUILDER_GROUP_OPERATION.OR
-          : QUERY_BUILDER_GROUP_OPERATION.AND,
-      );
-    };
-    return (
-      <div className="query-builder-post-filter-tree__node__label__content">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
-          label="Add to Logical Group"
-          className="query-builder__dnd__placeholder"
-        >
-          <div
-            className={clsx('query-builder-post-filter-tree__group-node', {
-              'query-builder-post-filter-tree__group-node--and':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
-              'query-builder-post-filter-tree__group-node--or':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
-            })}
-            title="Switch Operation"
-            onClick={switchOperation}
-          >
-            <div className="query-builder-post-filter-tree__group-node__label">
-              {node.groupOperation}
-            </div>
-            <button className="query-builder-post-filter-tree__group-node__action">
-              <FilledTriangleIcon />
-            </button>
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
-    );
-  },
-);
-
-const renderPropertyTypeIcon = (type: Type): React.ReactNode => {
-  if (type instanceof PrimitiveType) {
-    if (type.name === PRIMITIVE_TYPE.STRING) {
-      return <StringTypeIcon className="query-builder-column-badge__icon" />;
-    } else if (type.name === PRIMITIVE_TYPE.BOOLEAN) {
-      return <ToggleIcon className="query-builder-column-badge__icon" />;
-    } else if (
-      type.name === PRIMITIVE_TYPE.NUMBER ||
-      type.name === PRIMITIVE_TYPE.INTEGER ||
-      type.name === PRIMITIVE_TYPE.FLOAT ||
-      type.name === PRIMITIVE_TYPE.DECIMAL
-    ) {
-      return <HashtagIcon className="query-builder-column-badge__icon" />;
-    } else if (
-      type.name === PRIMITIVE_TYPE.DATE ||
-      type.name === PRIMITIVE_TYPE.DATETIME ||
-      type.name === PRIMITIVE_TYPE.STRICTDATE
-    ) {
-      return <ClockIcon className="query-builder-column-badge__icon" />;
-    }
-  } else if (type instanceof Enumeration) {
-    return <div className="icon query-builder-column-badge__icon">E</div>;
-  }
-  return null;
-};
-
-const QueryBuilderColumnInfoTooltip: React.FC<{
-  columnState:
-    | QueryBuilderProjectionColumnState
-    | QueryBuilderAggregateColumnState;
-  children: React.ReactElement;
-  placement?: TooltipPlacement | undefined;
-}> = (props) => {
-  const { columnState, placement, children } = props;
-  const type = columnState.getReturnType();
-  const multiplicity = returnUndefOnError(() =>
-    getColumnMultiplicity(columnState),
-  );
-  return (
-    <Tooltip
-      arrow={true}
-      {...(placement !== undefined ? { placement } : {})}
-      classes={{
-        tooltip: 'query-builder__tooltip',
-        arrow: 'query-builder__tooltip__arrow',
-        tooltipPlacementRight: 'query-builder__tooltip--right',
-      }}
-      TransitionProps={{
-        // disable transition
-        // NOTE: somehow, this is the only workaround we have, if for example
-        // we set `appear = true`, the tooltip will jump out of position
-        timeout: 0,
-      }}
-      title={
-        <div className="query-builder__tooltip__content">
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Name</div>
-            <div className="query-builder__tooltip__item__value">
-              {columnState.columnName}
-            </div>
-          </div>
-          <div className="query-builder__tooltip__item">
-            <div className="query-builder__tooltip__item__label">Type</div>
-            <div className="query-builder__tooltip__item__value">
-              {type?.path}
-            </div>
-          </div>
-          {multiplicity && (
-            <div className="query-builder__tooltip__item">
-              <div className="query-builder__tooltip__item__label">
-                Multiplicity
-              </div>
-              <div className="query-builder__tooltip__item__value">
-                {getMultiplicityDescription(multiplicity)}
-              </div>
-            </div>
-          )}
-        </div>
-      }
-    >
-      {children}
-    </Tooltip>
-  );
-};
-
-export const QueryBuilderColumnBadge = observer(
-  (props: {
-    postFilterConditionState: PostFilterConditionState;
-    onColumnChange: (
-      columnState: QueryBuilderProjectionColumnState,
-    ) => Promise<void>;
-  }) => {
-    const { postFilterConditionState, onColumnChange } = props;
-    const applicationStore = useApplicationStore();
-    const type = postFilterConditionState.columnState.getReturnType();
-    const handleDrop = useCallback(
-      (item: QueryBuilderProjectionColumnDragSource): Promise<void> =>
-        onColumnChange(item.columnState),
-      [onColumnChange],
-    );
-    const [{ isDragOver }, dropConnector] = useDrop<
-      QueryBuilderProjectionColumnDragSource,
-      void,
-      { isDragOver: boolean }
-    >(
-      () => ({
-        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
-        drop: (item, monitor): void => {
-          if (!monitor.didDrop()) {
-            handleDrop(item).catch(applicationStore.alertUnhandledError);
-          } // prevent drop event propagation to accomondate for nested DnD
-        },
-        collect: (monitor) => ({
-          isDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [applicationStore, handleDrop],
-    );
-
-    return (
-      <div ref={dropConnector} className="query-builder-column-badge">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
-          label="Change Property"
-          className="query-builder__dnd__placeholder"
-        >
-          <div className="query-builder-column-badge__content">
-            {type && (
-              <div
-                className={clsx('query-builder-column-badge__type', {
-                  'query-builder-column-badge__type--class':
-                    type instanceof Class,
-                  'query-builder-column-badge__type--enumeration':
-                    type instanceof Enumeration,
-                  'query-builder-column-badge__type--primitive':
-                    type instanceof PrimitiveType,
-                })}
-              >
-                {renderPropertyTypeIcon(type)}
-              </div>
-            )}
-            <div
-              className="query-builder-column-badge__property"
-              title={`${postFilterConditionState.columnName}`}
-            >
-              {postFilterConditionState.columnName}
-            </div>
-            <QueryBuilderColumnInfoTooltip
-              columnState={postFilterConditionState.columnState}
-              placement="bottom-end"
-            >
-              <div className="query-builder-column-badge__property__info">
-                <InfoCircleIcon />
-              </div>
-            </QueryBuilderColumnInfoTooltip>
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
-    );
-  },
-);
-const QueryBuilderPostFilterConditionEditor = observer(
-  (props: {
-    node: QueryBuilderPostFilterTreeConditionNodeData;
-    isDragOver: boolean;
-  }) => {
-    const { node, isDragOver } = props;
-    const graph =
-      node.condition.postFilterState.projectionState.queryBuilderState
-        .graphManagerState.graph;
-    const applicationStore = useApplicationStore();
-    const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
-      node.condition.changeOperator(val);
-    const changeColumn = async (
-      columnState: QueryBuilderProjectionColumnState,
-    ): Promise<void> => {
-      const currentColState =
-        node.condition.columnState instanceof QueryBuilderAggregateColumnState
-          ? node.condition.columnState.projectionColumnState
-          : node.condition.columnState;
-      if (currentColState !== columnState) {
-        await flowResult(node.condition.changeColumn(columnState));
-      }
-    };
-    // Drag and Drop on filter condition value
-    const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        const parameterType =
-          item.variable.parameter.genericType?.value.rawType;
-        const conditionValueType = node.condition.columnState.getReturnType();
-        if (
-          conditionValueType &&
-          isTypeCompatibleForAssignment(parameterType, conditionValueType)
-        ) {
-          node.condition.setValue(item.variable.parameter);
-        } else {
-          applicationStore.notifyWarning(
-            `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
-          );
-        }
-      },
-      [applicationStore, node.condition],
-    );
-    const [{ isFilterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
-      void,
-      { isFilterValueDragOver: boolean }
-    >(
-      () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
-        drop: (item, monitor): void => {
-          if (!monitor.didDrop()) {
-            handleDrop(item);
-          } // prevent drop event propagation to accomondate for nested DnD
-        },
-        collect: (monitor) => ({
-          isFilterValueDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [handleDrop],
-    );
-    const resetNode = (): void => {
-      node.condition.setValue(
-        node.condition.operator.getDefaultFilterConditionValue(node.condition),
-      );
-    };
-    const debouncedTypeaheadSearch = useMemo(
-      () =>
-        debounce(
-          (inputVal: string) => node.condition.handleTypeaheadSearch(),
-          1000,
-        ),
-      [node],
-    );
-    const cleanUpReloadValues = (): void => {
-      node.condition.typeaheadSearchState.complete();
-    };
-    const changeValueSpecification = (val: ValueSpecification): void => {
-      node.condition.setValue(val);
-    };
-    const selectorConfig = {
-      values: node.condition.typeaheadSearchResults,
-      isLoading: node.condition.typeaheadSearchState.isInProgress,
-      reloadValues: debouncedTypeaheadSearch,
-      cleanUpReloadValues,
-    };
-
-    return (
-      <div className="query-builder-post-filter-tree__node__label__content">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
-          label="Add New Logical Group"
-          className="query-builder__dnd__placeholder"
-        >
-          <div className="query-builder-post-filter-tree__condition-node">
-            <div className="query-builder-post-filter-tree__condition-node__property">
-              <QueryBuilderColumnBadge
-                postFilterConditionState={node.condition}
-                onColumnChange={changeColumn}
-              />
-            </div>
-            <DropdownMenu
-              className="query-builder-post-filter-tree__condition-node__operator"
-              content={
-                <MenuContent>
-                  {node.condition.operators.map((op) => (
-                    <MenuContentItem
-                      key={op.uuid}
-                      className="query-builder-post-filter-tree__condition-node__operator__dropdown__option"
-                      onClick={changeOperator(op)}
-                    >
-                      {op.getLabel()}
-                    </MenuContentItem>
-                  ))}
-                </MenuContent>
-              }
-              menuProps={{
-                anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                transformOrigin: { vertical: 'top', horizontal: 'left' },
-                elevation: 7,
-              }}
-            >
-              <div className="query-builder-post-filter-tree__condition-node__operator__label">
-                {node.condition.operator.getLabel()}
-              </div>
-              <button
-                className="query-builder-post-filter-tree__condition-node__operator__dropdown__trigger"
-                tabIndex={-1}
-                title="Choose Operator..."
-              >
-                <CaretDownIcon />
-              </button>
-            </DropdownMenu>
-            {node.condition.value && (
-              <div
-                ref={dropConnector}
-                className="query-builder-post-filter-tree__condition-node__value"
-              >
-                <PanelEntryDropZonePlaceholder
-                  showPlaceholder={isFilterValueDragOver}
-                  label="Change Filter Value"
-                  className="query-builder__dnd__placeholder"
-                >
-                  <BasicValueSpecificationEditor
-                    valueSpecification={node.condition.value}
-                    setValueSpecification={changeValueSpecification}
-                    graph={graph}
-                    typeCheckOption={{
-                      expectedType: guaranteeNonNullable(
-                        node.condition.columnState.getReturnType(),
-                      ),
-                    }}
-                    resetValue={resetNode}
-                    selectorConfig={selectorConfig}
-                  />
-                </PanelEntryDropZonePlaceholder>
-              </div>
-            )}
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
-    );
-  },
-);
-
-const QueryBuilderPostFilterBlankConditionEditor = observer(
-  (props: {
-    node: QueryBuilderPostFilterTreeBlankConditionNodeData;
-    isDragOver: boolean;
-  }) => {
-    const { isDragOver } = props;
-    return (
-      <div className="query-builder-post-filter-tree__node__label__content">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
-          label="Create Condition"
-          className="query-builder__dnd__placeholder"
-        >
-          <div className="query-builder-post-filter-tree__blank-node">
-            blank
-          </div>
-        </PanelEntryDropZonePlaceholder>
-      </div>
-    );
-  },
-);
-
-const QueryBuilderPostFilterTreeNodeContainer = observer(
-  (
-    props: TreeNodeContainerProps<
-      QueryBuilderPostFilterTreeNodeData,
-      {
-        queryBuilderState: QueryBuilderState;
-      }
-    >,
-  ) => {
-    const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-    const { queryBuilderState } = innerProps;
-    const ref = useRef<HTMLDivElement>(null);
-    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
-      useState(false);
-    const applicationStore = useApplicationStore();
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
-    const isExpandable =
-      node instanceof QueryBuilderPostFilterTreeGroupNodeData;
-    const selectNode = (): void => onNodeSelect?.(node);
-    const toggleExpandNode = (): void => node.setIsOpen(!node.isOpen);
-    const removeNode = (): void =>
-      postFilterState.removeNodeAndPruneBranch(node);
-    const handleDrop = useCallback(
-      (item: QueryBuilderPostFilterDropTarget, type: string): void => {
-        if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE) {
-          const columnState = (item as QueryBuilderProjectionColumnDragSource)
-            .columnState;
-          let conditionState: PostFilterConditionState;
-          try {
-            conditionState = new PostFilterConditionState(
-              postFilterState,
-              columnState,
-              undefined,
-              undefined,
-            );
-            conditionState.setValue(
-              conditionState.operator.getDefaultFilterConditionValue(
-                conditionState,
-              ),
-            );
-          } catch (error) {
-            assertErrorThrown(error);
-            applicationStore.notifyWarning(error.message);
-            return;
-          }
-
-          if (node instanceof QueryBuilderPostFilterTreeGroupNodeData) {
-            postFilterState.addNodeFromNode(
-              new QueryBuilderPostFilterTreeConditionNodeData(
-                undefined,
-                conditionState,
-              ),
-              node,
-            );
-          } else if (
-            node instanceof QueryBuilderPostFilterTreeConditionNodeData
-          ) {
-            postFilterState.newGroupWithConditionFromNode(
-              new QueryBuilderPostFilterTreeConditionNodeData(
-                undefined,
-                conditionState,
-              ),
-              node,
-            );
-          } else if (
-            node instanceof QueryBuilderPostFilterTreeBlankConditionNodeData
-          ) {
-            postFilterState.replaceBlankNodeWithNode(
-              new QueryBuilderPostFilterTreeConditionNodeData(
-                undefined,
-                conditionState,
-              ),
-              node,
-            );
-          }
-        }
-      },
-      [applicationStore, postFilterState, node],
-    );
-    const [{ isDragOver }, dropConnector] = useDrop<
-      QueryBuilderPostFilterConditionDragSource,
-      void,
-      { isDragOver: boolean }
-    >(
-      () => ({
-        accept: [
-          ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
-          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-        ],
-        drop: (item, monitor): void => {
-          if (!monitor.didDrop()) {
-            handleDrop(item, monitor.getItemType() as string);
-          } // prevent drop event propagation to accomondate for nested DnD
-        },
-        collect: (monitor) => ({
-          isDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [handleDrop],
-    );
-
-    const [, dragConnector, dragPreviewConnector] =
-      useDrag<QueryBuilderPostFilterConditionDragSource>(
-        () => ({
-          type:
-            node instanceof QueryBuilderPostFilterTreeGroupNodeData
-              ? QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION
-              : node instanceof QueryBuilderPostFilterTreeConditionNodeData
-              ? QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION
-              : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
-          item: () => ({ node }),
-          end: (): void => postFilterState.setRearrangingConditions(false),
-        }),
-        [node, postFilterState],
-      );
-    dragConnector(dropConnector(ref));
-    useDragPreviewLayer(dragPreviewConnector);
-
-    // context menu
-    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
-    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
-
-    return (
-      <ContextMenu
-        content={
-          <QueryBuilderPostFilterConditionContextMenu
-            queryBuilderState={queryBuilderState}
-            node={node}
-          />
-        }
-        menuProps={{ elevation: 7 }}
-        onOpen={onContextMenuOpen}
-        onClose={onContextMenuClose}
-      >
-        <div
-          ref={ref}
-          className={clsx(
-            'tree-view__node__container query-builder-post-filter-tree__node__container',
-            {
-              'query-builder-post-filter-tree__node__container--no-hover':
-                postFilterState.isRearrangingConditions,
-              'query-builder-post-filter-tree__node__container--selected':
-                node === postFilterState.selectedNode,
-              'query-builder-post-filter-tree__node__container--selected-from-context-menu':
-                isSelectedFromContextMenu,
-            },
-          )}
-        >
-          <div
-            className="query-builder-post-filter-tree__node__content"
-            style={{
-              paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2) + 1.5}rem`,
-              display: 'flex',
-            }}
-            onClick={selectNode}
-          >
-            {isExpandable && (
-              <div
-                className="query-builder-post-filter-tree__expand-icon"
-                onClick={toggleExpandNode}
-              >
-                {node.isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
-              </div>
-            )}
-            <div
-              className={clsx(
-                'tree-view__node__label query-builder-post-filter-tree__node__label',
-                {
-                  'query-builder-post-filter-tree__node__label--expandable':
-                    isExpandable,
-                },
-              )}
-            >
-              {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
-                <QueryBuilderPostFilterGroupConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof QueryBuilderPostFilterTreeConditionNodeData && (
-                <QueryBuilderPostFilterConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof
-                QueryBuilderPostFilterTreeBlankConditionNodeData && (
-                <QueryBuilderPostFilterBlankConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                />
-              )}
-            </div>
-          </div>
-          <div className="query-builder-post-filter-tree__node__actions">
-            <button
-              className="query-builder-post-filter-tree__node__action"
-              tabIndex={-1}
-              title="Remove"
-              onClick={removeNode}
-            >
-              <TimesIcon />
-            </button>
-          </div>
-        </div>
-      </ContextMenu>
-    );
-  },
-);
-
-const QueryBuilderPostFilterTreeNodeView = observer(
-  (
-    props: TreeNodeViewProps<
-      QueryBuilderPostFilterTreeNodeData,
-      {
-        queryBuilderState: QueryBuilderState;
-      }
-    >,
-  ) => {
-    const {
-      node,
-      level,
-      onNodeSelect,
-      getChildNodes,
-      stepPaddingInRem,
-      innerProps,
-    } = props;
-    return (
-      <div className="tree-view__node__block">
-        <QueryBuilderPostFilterTreeNodeContainer
-          node={node}
-          level={level + 1}
-          stepPaddingInRem={stepPaddingInRem}
-          onNodeSelect={onNodeSelect}
-          innerProps={innerProps}
-        />
-        {node.isOpen &&
-          getChildNodes(node).map((childNode) => (
-            <QueryBuilderPostFilterTreeNodeView
-              key={childNode.id}
-              node={childNode}
-              level={level + 1}
-              onNodeSelect={onNodeSelect}
-              getChildNodes={getChildNodes}
-              innerProps={innerProps}
-            />
-          ))}
-      </div>
-    );
-  },
-);
-
-const QueryBuilderPostFilterTree = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
-    const rootNodes = postFilterState.rootIds.map((rootId) =>
-      postFilterState.getNode(rootId),
-    );
-    const onNodeSelect = (node: QueryBuilderPostFilterTreeNodeData): void =>
-      postFilterState.setSelectedNode(node);
-    const getChildNodes = (
-      node: QueryBuilderPostFilterTreeNodeData,
-    ): QueryBuilderPostFilterTreeNodeData[] =>
-      node instanceof QueryBuilderPostFilterTreeGroupNodeData
-        ? node.childrenIds.map((id) => postFilterState.getNode(id))
-        : [];
-    const onClickAway = (): void => {
-      postFilterState.handleClickaway();
-    };
-    return (
-      <ClickAwayListener onClickAway={onClickAway}>
-        <div className="tree-view__node__root query-builder-post-filter-tree__root">
-          {rootNodes.map((node) => (
-            <QueryBuilderPostFilterTreeNodeView
-              key={node.id}
-              level={0}
-              node={node}
-              getChildNodes={getChildNodes}
-              onNodeSelect={onNodeSelect}
-              innerProps={{
-                queryBuilderState,
-              }}
-            />
-          ))}
-        </div>
-      </ClickAwayListener>
-    );
-  },
-);
-
-export const QueryBuilderPostFilterPanel = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const applicationStore = useApplicationStore();
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
-    const rootNode = postFilterState.getRootNode();
-    // actions
-    const collapseTree = (): void => {
-      postFilterState.setSelectedNode(undefined);
-      postFilterState.collapseTree();
-    };
-    const expandTree = (): void => {
-      postFilterState.setSelectedNode(undefined);
-      postFilterState.expandTree();
-    };
-    const pruneTree = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.pruneTree();
-    };
-    const simplifyTree = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.simplifyTree();
-    };
-    const createCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      postFilterState.addNodeFromNode(
-        new QueryBuilderPostFilterTreeBlankConditionNodeData(undefined),
-        postFilterState.selectedNode,
-      );
-    };
-    const allowGroupCreation =
-      postFilterState.isEmpty || // either the tree is empty
-      (postFilterState.selectedNode && // or a node is currently selected which is...
-        (postFilterState.selectedNode !== rootNode || // either not a root node
-          rootNode instanceof QueryBuilderPostFilterTreeGroupNodeData)); // or if it is the root note, it has to be a group node
-
-    const createGroupCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      if (allowGroupCreation) {
-        postFilterState.addGroupConditionNodeFromNode(
-          postFilterState.selectedNode,
-        );
-      }
-    };
-    const newGroupWithCondition = (): void => {
-      postFilterState.suppressClickawayEventListener();
-      if (
-        postFilterState.selectedNode instanceof
-        QueryBuilderPostFilterTreeConditionNodeData
-      ) {
-        postFilterState.newGroupWithConditionFromNode(
-          undefined,
-          postFilterState.selectedNode,
-        );
-      }
-    };
-    // Drag and Drop
-    const handleDrop = useCallback(
-      async (item: QueryBuilderPostFilterDropTarget): Promise<void> => {
-        let postFilterConditionState: PostFilterConditionState;
-        try {
-          const columnState = (item as QueryBuilderProjectionColumnDragSource)
-            .columnState;
-          const aggregateColumnState =
-            queryBuilderState.fetchStructureState.projectionState.aggregationState.columns.find(
-              (column) => column.projectionColumnState === columnState,
-            );
-          if (
-            !aggregateColumnState &&
-            columnState instanceof QueryBuilderDerivationProjectionColumnState
-          ) {
-            await flowResult(columnState.fetchDerivationLambdaReturnType());
-          }
-          postFilterConditionState = new PostFilterConditionState(
-            postFilterState,
-            aggregateColumnState ?? columnState,
-            undefined,
-            undefined,
-          );
-          postFilterConditionState.setValue(
-            postFilterConditionState.operator.getDefaultFilterConditionValue(
-              postFilterConditionState,
-            ),
-          );
-        } catch (error) {
-          assertErrorThrown(error);
-          applicationStore.notifyError(error.message);
-          return;
-        }
-        // NOTE: unfocus the current node when DnD a new node to the tree
-        postFilterState.setSelectedNode(undefined);
-        postFilterState.addNodeFromNode(
-          new QueryBuilderPostFilterTreeConditionNodeData(
-            undefined,
-            postFilterConditionState,
-          ),
-          undefined,
-        );
-      },
-      [
-        applicationStore,
-        postFilterState,
-        queryBuilderState.fetchStructureState.projectionState.aggregationState
-          .columns,
-      ],
-    );
-    const [{ isDragOver }, dropTargetConnector] = useDrop<
-      QueryBuilderProjectionColumnDragSource,
-      void,
-      { isDragOver: boolean }
-    >(
-      () => ({
-        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
-        drop: (item, monitor): void => {
-          if (!monitor.didDrop()) {
-            handleDrop(item).catch(applicationStore.alertUnhandledError);
-          } // prevent drop event propagation to accomondate for nested DnD
-        },
-        collect: (monitor) => ({
-          isDragOver: monitor.isOver({ shallow: true }),
-        }),
-      }),
-      [applicationStore, handleDrop],
-    );
-    return (
-      <div
-        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER}
-        className="panel query-builder__filter"
-      >
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">post-filter</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              onClick={createCondition}
-              tabIndex={-1}
-              title="Create Condition"
-            >
-              <PlusIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              disabled={
-                !(
-                  postFilterState.selectedNode instanceof
-                  QueryBuilderPostFilterTreeConditionNodeData
-                )
-              }
-              onClick={newGroupWithCondition}
-              tabIndex={-1}
-              title="Create Group From Condition"
-            >
-              <PlusCircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              disabled={!allowGroupCreation}
-              onClick={createGroupCondition}
-              tabIndex={-1}
-              title="Create Logical Group"
-            >
-              <NewFolderIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={pruneTree}
-              tabIndex={-1}
-              title="Cleanup Tree"
-            >
-              <BrushIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={simplifyTree}
-              tabIndex={-1}
-              title="Simplify Tree"
-            >
-              <CircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={collapseTree}
-              tabIndex={-1}
-              title="Collapse Tree"
-            >
-              <CompressIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={expandTree}
-              tabIndex={-1}
-              title="Expand Tree"
-            >
-              <ExpandIcon />
-            </button>
-          </div>
-        </div>
-        <div className="panel__content query-builder__filter__content">
-          <PanelDropZone
-            isDragOver={isDragOver}
-            dropTargetConnector={dropTargetConnector}
-          >
-            {postFilterState.isEmpty && (
-              <BlankPanelPlaceholder
-                text="Add a post-filter condition"
-                tooltipText="Drag and drop properties here"
-              />
-            )}
-            {!postFilterState.isEmpty && (
-              <>
-                <DragPreviewLayer
-                  labelGetter={(
-                    item: QueryBuilderPostFilterConditionDragSource,
-                  ): string => item.node.dragPreviewLabel}
-                  types={Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE)}
-                />
-                <QueryBuilderPostFilterTree
-                  queryBuilderState={queryBuilderState}
-                />
-              </>
-            )}
-          </PanelDropZone>
-        </div>
-      </div>
-    );
-  },
-);