@finos/legend-query-builder 4.17.99 → 4.18.0

package/src/components/explorer/QueryBuilderRelationExplorerPanel.tsx

@@ -0,0 +1,536 @@
+/**
+ * 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 { forwardRef, useMemo, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  type TreeNodeContainerProps,
+  type TreeNodeViewProps,
+  type TreeData,
+  clsx,
+  TreeView,
+  BlankPanelContent,
+  ContextMenu,
+  MenuContent,
+  MenuContentItem,
+  DragPreviewLayer,
+  useDragPreviewLayer,
+  PanelHeader,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  InfoCircleIcon,
+  Tooltip,
+  PURE_DataProductIcon,
+  PURE_IngestIcon,
+  PURE_DatabaseIcon,
+  PURE_UnknownElementTypeIcon,
+} from '@finos/legend-art';
+import { useDrag } from 'react-dnd';
+import {
+  type Accessor,
+  type RelationColumn,
+  DataProductAccessor,
+  IngestionAccessor,
+  InstanceValue,
+  RelationalStoreAccessor,
+} from '@finos/legend-graph';
+import {
+  type QueryBuilderExplorerTreeRelationColumnDragSource,
+  type QueryBuilderExplorerTreeNodeData,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
+  QueryBuilderExplorerTreeRelationColumnNodeData,
+  QueryBuilderExplorerTreeRelationRootNodeData,
+} from '../../stores/explorer/QueryBuilderExplorerState.js';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import {
+  isExplorerTreeNodeAlreadyUsed,
+  renderPropertyTypeIcon,
+} from './QueryBuilderExplorerPanel.js';
+import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import { isNonNullable, prettyCONSTName } from '@finos/legend-shared';
+import { QueryBuilderBaseInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
+import { QueryBuilderRelationColumnProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
+
+const RELATION_ROOT_NODE_ID = '__relation_root__';
+
+const getAccessorIcon = (accessor: Accessor): React.ReactNode => {
+  if (accessor instanceof DataProductAccessor) {
+    return <PURE_DataProductIcon />;
+  } else if (accessor instanceof IngestionAccessor) {
+    return <PURE_IngestIcon />;
+  } else if (accessor instanceof RelationalStoreAccessor) {
+    return <PURE_DatabaseIcon />;
+  }
+  return <PURE_UnknownElementTypeIcon />;
+};
+
+const getAccessorPath = (accessor: Accessor): string =>
+  [accessor.accessorOwner, accessor.schema, accessor.accessor]
+    .filter(isNonNullable)
+    .join('.');
+
+const getColumnTypeLabel = (column: RelationColumn): string => {
+  const typeName = column.genericType.value.rawType.name;
+  const typeVariableValues = column.genericType.value.typeVariableValues;
+  if (typeVariableValues && typeVariableValues.length > 0) {
+    const args = typeVariableValues
+      .map((v) => (v instanceof InstanceValue ? v.values[0] : undefined))
+      .filter(isNonNullable);
+    if (args.length > 0) {
+      return `${typeName}(${args.join(', ')})`;
+    }
+  }
+  return typeName;
+};
+
+const buildRelationTreeData = (
+  accessor: Accessor,
+): TreeData<QueryBuilderExplorerTreeNodeData> => {
+  const rootIds: string[] = [];
+  const nodes = new Map<string, QueryBuilderExplorerTreeNodeData>();
+
+  const columnIds: string[] = [];
+  accessor.relationType.columns.forEach((column) => {
+    const type = column.genericType.value.rawType;
+    const node = new QueryBuilderExplorerTreeRelationColumnNodeData(
+      column.name,
+      column.name,
+      column.name,
+      column,
+      type,
+      { mapped: true },
+    );
+    columnIds.push(node.id);
+    nodes.set(node.id, node);
+  });
+
+  const rootNode = new QueryBuilderExplorerTreeRelationRootNodeData(
+    RELATION_ROOT_NODE_ID,
+    accessor.accessor,
+    accessor.accessor,
+    false,
+    accessor.relationType,
+    { mapped: true },
+    columnIds,
+  );
+  rootNode.setIsOpen(true);
+  rootIds.push(rootNode.id);
+  nodes.set(rootNode.id, rootNode);
+
+  return { rootIds, nodes };
+};
+
+const QueryBuilderRelationExplorerContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      queryBuilderState: QueryBuilderState;
+      node: QueryBuilderExplorerTreeNodeData;
+      accessor: Accessor;
+    }
+  >(function QueryBuilderRelationExplorerContextMenu(props, ref) {
+    const { queryBuilderState, node, accessor } = props;
+    const tdsState =
+      queryBuilderState.fetchStructureState.implementation instanceof
+      QueryBuilderTDSState
+        ? queryBuilderState.fetchStructureState.implementation
+        : undefined;
+
+    const addColumnToFetchStructure = (): void => {
+      if (
+        tdsState &&
+        node instanceof QueryBuilderExplorerTreeRelationColumnNodeData
+      ) {
+        tdsState.addColumn(
+          new QueryBuilderRelationColumnProjectionColumnState(
+            tdsState,
+            node.column,
+            true,
+          ),
+        );
+      }
+    };
+
+    const addAllColumnsToFetchStructure = (): void => {
+      if (tdsState) {
+        accessor.relationType.columns.forEach((column) => {
+          tdsState.addColumn(
+            new QueryBuilderRelationColumnProjectionColumnState(
+              tdsState,
+              column,
+              true,
+            ),
+          );
+        });
+      }
+    };
+
+    return (
+      <MenuContent ref={ref}>
+        {node instanceof QueryBuilderExplorerTreeRelationColumnNodeData && (
+          <MenuContentItem onClick={addColumnToFetchStructure}>
+            Add Column to Fetch Structure
+          </MenuContentItem>
+        )}
+        {node instanceof QueryBuilderExplorerTreeRelationRootNodeData && (
+          <MenuContentItem onClick={addAllColumnsToFetchStructure}>
+            Add Columns to Fetch Structure
+          </MenuContentItem>
+        )}
+      </MenuContent>
+    );
+  }),
+);
+
+const QueryBuilderRelationNodeContainer = observer(
+  (
+    props: TreeNodeContainerProps<
+      QueryBuilderExplorerTreeNodeData,
+      {
+        queryBuilderState: QueryBuilderState;
+        accessor: Accessor;
+      }
+    >,
+  ) => {
+    const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+    const { queryBuilderState, accessor } = innerProps;
+    const isRoot = node instanceof QueryBuilderExplorerTreeRelationRootNodeData;
+    const isColumn =
+      node instanceof QueryBuilderExplorerTreeRelationColumnNodeData;
+    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
+      useState(false);
+
+    const [, dragConnector, dragPreviewConnector] =
+      useDrag<QueryBuilderExplorerTreeRelationColumnDragSource>(
+        () => ({
+          type: QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
+          item: () => ({
+            node: node as QueryBuilderExplorerTreeRelationColumnNodeData,
+          }),
+        }),
+        [node],
+      );
+    const ref = useRef<HTMLDivElement>(null);
+    if (isColumn) {
+      dragConnector(ref);
+    }
+    useDragPreviewLayer(dragPreviewConnector);
+
+    const explorerState = queryBuilderState.explorerState;
+    const columnLabel =
+      isColumn && explorerState.humanizePropertyName
+        ? prettyCONSTName(node.label)
+        : node.label;
+
+    const selectNode = (): void => onNodeSelect?.(node);
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+
+    if (isRoot) {
+      const isExpanded = node.isOpen === true;
+      const nodeExpandIcon = isExpanded ? (
+        <ChevronDownIcon />
+      ) : (
+        <ChevronRightIcon />
+      );
+
+      return (
+        <ContextMenu
+          content={
+            <QueryBuilderRelationExplorerContextMenu
+              queryBuilderState={queryBuilderState}
+              node={node}
+              accessor={accessor}
+            />
+          }
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
+        >
+          <div
+            className={clsx(
+              'tree-view__node__container query-builder-explorer-tree__node__container',
+              {
+                'query-builder-explorer-tree__node__container--selected-from-context-menu':
+                  isSelectedFromContextMenu,
+                'query-builder-explorer-tree__node__container--highlighted':
+                  explorerState.highlightUsedProperties &&
+                  isExplorerTreeNodeAlreadyUsed(node, queryBuilderState),
+              },
+            )}
+            onClick={selectNode}
+            style={{
+              paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1) + 0.5}rem`,
+              display: 'flex',
+            }}
+          >
+            <div className="tree-view__node__icon query-builder-explorer-tree__node__icon">
+              <div className="query-builder-explorer-tree__expand-icon">
+                {nodeExpandIcon}
+              </div>
+              <div className="query-builder-explorer-tree__type-icon">
+                {getAccessorIcon(accessor)}
+              </div>
+            </div>
+            <div className="tree-view__node__label query-builder-explorer-tree__node__label query-builder-explorer-tree__node__label--with-action">
+              {node.label}
+            </div>
+            <div className="query-builder-explorer-tree__node__actions">
+              <Tooltip
+                arrow={true}
+                classes={{
+                  tooltip: 'query-builder__tooltip',
+                  arrow: 'query-builder__tooltip__arrow',
+                  tooltipPlacementRight: 'query-builder__tooltip--right',
+                }}
+                slotProps={{
+                  transition: { timeout: 0 },
+                }}
+                title={
+                  <div className="query-builder__tooltip__content">
+                    <div className="query-builder__tooltip__item">
+                      <div className="query-builder__tooltip__item__label">
+                        Type
+                      </div>
+                      <div className="query-builder__tooltip__item__value">
+                        {accessor.accessorOwnerLabel}
+                      </div>
+                    </div>
+                    <div className="query-builder__tooltip__item">
+                      <div className="query-builder__tooltip__item__label">
+                        Path
+                      </div>
+                      <div className="query-builder__tooltip__item__value">
+                        {getAccessorPath(accessor)}
+                      </div>
+                    </div>
+                  </div>
+                }
+              >
+                <div
+                  className="query-builder-explorer-tree__node__action query-builder-explorer-tree__node__info"
+                  data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TOOLTIP_ICON}
+                >
+                  <InfoCircleIcon />
+                </div>
+              </Tooltip>
+            </div>
+          </div>
+        </ContextMenu>
+      );
+    }
+
+    // Column node
+    const columnNode = isColumn ? node : undefined;
+    const nodeTypeIcon = isColumn
+      ? renderPropertyTypeIcon(node.type)
+      : undefined;
+    const columnTypeLabel = columnNode
+      ? getColumnTypeLabel(columnNode.column)
+      : node.type.path;
+
+    return (
+      <ContextMenu
+        content={
+          <QueryBuilderRelationExplorerContextMenu
+            queryBuilderState={queryBuilderState}
+            node={node}
+            accessor={accessor}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        onOpen={onContextMenuOpen}
+        onClose={onContextMenuClose}
+      >
+        <div
+          className={clsx(
+            'tree-view__node__container query-builder-explorer-tree__node__container',
+            {
+              'query-builder-explorer-tree__node__container--selected-from-context-menu':
+                isSelectedFromContextMenu,
+              'query-builder-explorer-tree__node__container--highlighted':
+                explorerState.highlightUsedProperties &&
+                isExplorerTreeNodeAlreadyUsed(node, queryBuilderState),
+            },
+          )}
+          onClick={selectNode}
+          ref={ref}
+          style={{
+            paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1) + 0.5}rem`,
+            display: 'flex',
+          }}
+        >
+          <div className="tree-view__node__icon query-builder-explorer-tree__node__icon">
+            <div className="query-builder-explorer-tree__expand-icon">
+              <div />
+            </div>
+            <div className="query-builder-explorer-tree__type-icon">
+              {nodeTypeIcon}
+            </div>
+          </div>
+          <div className="tree-view__node__label query-builder-explorer-tree__node__label query-builder-explorer-tree__node__label--with-action">
+            {columnLabel}
+          </div>
+          <div className="query-builder-explorer-tree__node__actions">
+            <QueryBuilderBaseInfoTooltip
+              title={columnLabel}
+              data={[
+                {
+                  label: 'Type',
+                  value: columnTypeLabel,
+                },
+                {
+                  label: 'Column',
+                  value: node.label,
+                },
+              ]}
+            >
+              <div
+                className="query-builder-explorer-tree__node__action query-builder-explorer-tree__node__info"
+                data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TOOLTIP_ICON}
+              >
+                <InfoCircleIcon />
+              </div>
+            </QueryBuilderBaseInfoTooltip>
+          </div>
+        </div>
+      </ContextMenu>
+    );
+  },
+);
+
+const QueryBuilderRelationTreeNodeView = observer(
+  (
+    props: TreeNodeViewProps<
+      QueryBuilderExplorerTreeNodeData,
+      {
+        queryBuilderState: QueryBuilderState;
+        accessor: Accessor;
+      }
+    >,
+  ) => {
+    const {
+      node,
+      level,
+      onNodeSelect,
+      getChildNodes,
+      stepPaddingInRem,
+      innerProps,
+      components,
+    } = props;
+
+    return (
+      <div className="tree-view__node__block">
+        <QueryBuilderRelationNodeContainer
+          node={node}
+          level={level + 1}
+          stepPaddingInRem={stepPaddingInRem}
+          onNodeSelect={onNodeSelect}
+          innerProps={innerProps}
+        />
+        {node.isOpen &&
+          getChildNodes(node).map((childNode) => (
+            <QueryBuilderRelationTreeNodeView
+              key={childNode.id}
+              node={childNode}
+              level={level + 1}
+              components={components}
+              onNodeSelect={onNodeSelect}
+              getChildNodes={getChildNodes}
+              innerProps={innerProps}
+            />
+          ))}
+      </div>
+    );
+  },
+);
+
+const QueryBuilderRelationExplorerTree = observer(
+  (props: { queryBuilderState: QueryBuilderState; accessor: Accessor }) => {
+    const { queryBuilderState, accessor } = props;
+    // NOTE: we must memoize tree data so node state (e.g. isOpen) persists across re-renders
+    const treeData = useMemo(() => buildRelationTreeData(accessor), [accessor]);
+    const onNodeSelect = (node: QueryBuilderExplorerTreeNodeData): void => {
+      if (node instanceof QueryBuilderExplorerTreeRelationRootNodeData) {
+        node.setIsOpen(!node.isOpen);
+      }
+    };
+    const getChildNodes = (
+      node: QueryBuilderExplorerTreeNodeData,
+    ): QueryBuilderExplorerTreeNodeData[] => {
+      if (node instanceof QueryBuilderExplorerTreeRelationRootNodeData) {
+        return node.childrenIds
+          .map((id) => treeData.nodes.get(id))
+          .filter(isNonNullable);
+      }
+      return [];
+    };
+
+    return (
+      <TreeView
+        components={{
+          TreeNodeContainer: QueryBuilderRelationNodeContainer,
+          TreeNodeView: QueryBuilderRelationTreeNodeView,
+        }}
+        className="query-builder-explorer-tree__root"
+        treeData={treeData}
+        onNodeSelect={onNodeSelect}
+        getChildNodes={getChildNodes}
+        innerProps={{
+          queryBuilderState,
+          accessor,
+        }}
+      />
+    );
+  },
+);
+
+export const QueryBuilderRelationExplorerPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState; accessor: Accessor }) => {
+    const { queryBuilderState, accessor } = props;
+
+    return (
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_EXPLORER}
+        className="panel query-builder__explorer"
+      >
+        <PanelHeader title="columns" />
+        <div className="panel__content query-builder-explorer-tree__content">
+          <DragPreviewLayer
+            labelGetter={(
+              item: QueryBuilderExplorerTreeRelationColumnDragSource,
+            ): string => {
+              const dragNode = item.node;
+              return queryBuilderState.explorerState.humanizePropertyName
+                ? prettyCONSTName(dragNode.label)
+                : dragNode.label;
+            }}
+            types={[QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN]}
+          />
+          {accessor.relationType.columns.length === 0 ? (
+            <BlankPanelContent>No columns</BlankPanelContent>
+          ) : (
+            <QueryBuilderRelationExplorerTree
+              queryBuilderState={queryBuilderState}
+              accessor={accessor}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -106,6 +106,7 @@ import {
   QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
 } from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
+
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 import {

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

@@ -481,10 +481,10 @@ export const QueryResultModifierModal = observer(
         let newParamStates: LambdaParameterState[] = [];
         if (
           (!businessDate || !processingDate) &&
-          milestoningState.queryBuilderState.class
+          milestoningState.queryBuilderState.sourceClass
         ) {
           const stereotype = getMilestoneTemporalStereotype(
-            milestoningState.queryBuilderState.class,
+            milestoningState.queryBuilderState.sourceClass,
             milestoningState.queryBuilderState.graphManagerState.graph,
           );
           if (stereotype) {
@@ -736,7 +736,7 @@ export const QueryResultModifierModal = observer(
       milestoningState.processingDate,
       milestoningState.startDate,
       milestoningState.endDate,
-      milestoningState.queryBuilderState.class,
+      milestoningState.queryBuilderState.sourceElement,
     ]);
 
     return (

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

@@ -48,6 +48,7 @@ import {
   type QueryBuilderExplorerTreeDragSource,
   buildPropertyExpressionFromExplorerTreeNodeData,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
+  type QueryBuilderExplorerTreeRelationColumnNodeData,
 } from '../../stores/explorer/QueryBuilderExplorerState.js';
 import {
   type DropTargetMonitor,
@@ -60,6 +61,7 @@ import {
   type QueryBuilderProjectionColumnState,
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderSimpleProjectionColumnState,
+  QueryBuilderRelationColumnProjectionColumnState,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import {
@@ -133,6 +135,7 @@ import { WavgParamDNDZone } from './QueryBuilderAggParam.js';
 const CAN_DROP_MAIN_GROUP_DND_TYPES = [
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN,
   QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
   QUERY_BUILDER_FUNCTION_DND_TYPE,
 ];
@@ -172,13 +175,22 @@ const QueryBuilderProjectionColumnContextMenu = observer(
         projectionColumnState.tdsState.transformSimpleProjectionToDerivation(
           projectionColumnState,
         );
+      } else if (
+        projectionColumnState instanceof
+        QueryBuilderRelationColumnProjectionColumnState
+      ) {
+        projectionColumnState.tdsState.transformRelationColumnProjectionToDerivation(
+          projectionColumnState,
+        );
       }
     };
 
     return (
       <MenuContent ref={ref}>
-        {projectionColumnState instanceof
-          QueryBuilderSimpleProjectionColumnState && (
+        {(projectionColumnState instanceof
+          QueryBuilderSimpleProjectionColumnState ||
+          projectionColumnState instanceof
+            QueryBuilderRelationColumnProjectionColumnState) && (
           <MenuContentItem onClick={convertToDerivation}>
             Convert To Derivation
           </MenuContentItem>
@@ -430,7 +442,7 @@ const QueryBuilderProjectionColumnEditor = observer(
 
     // calendar
     const aggregateCalendarFunctionDateColumns =
-      tdsState.queryBuilderState.class?.properties.filter((p) => {
+      tdsState.queryBuilderState.sourceClass?.properties.filter((p) => {
         const _type = p.genericType.value.rawType.name;
         if (
           _type === PRIMITIVE_TYPE.DATE ||
@@ -804,7 +816,9 @@ const QueryBuilderProjectionColumnEditor = observer(
           disabled={
             !(
               projectionColumnState instanceof
-              QueryBuilderSimpleProjectionColumnState
+                QueryBuilderSimpleProjectionColumnState ||
+              projectionColumnState instanceof
+                QueryBuilderRelationColumnProjectionColumnState
             )
           }
           className={clsx('query-builder__projection__column__context-menu', {
@@ -896,6 +910,35 @@ const QueryBuilderProjectionColumnEditor = observer(
                 </div>
               </>
             )}
+            {projectionColumnState instanceof
+              QueryBuilderRelationColumnProjectionColumnState && (
+              <>
+                <QueryBuilderDerivationInfoTooltip
+                  title={projectionColumnState.columnName}
+                  type={projectionColumnState.getColumnType()}
+                  placement="bottom-start"
+                >
+                  <div className="query-builder-property-expression-badge__property__info">
+                    <InfoCircleIcon />
+                  </div>
+                </QueryBuilderDerivationInfoTooltip>
+                <div className="query-builder__projection__column__value">
+                  <QueryBuilderEditablePropertyName
+                    columnName={projectionColumnState.columnName}
+                    setColumnName={setColumnName}
+                    error={
+                      isDuplicatedColumnName
+                        ? 'Duplicated column'
+                        : projectionColumnState.columnName.length === 0
+                          ? 'Empty column name'
+                          : undefined
+                    }
+                    title={projectionColumnState.columnName}
+                    defaultColumnName="(column)"
+                  />
+                </div>
+              </>
+            )}
             <div className="query-builder__projection__column__aggregate">
               <div className="query-builder__projection__column__aggregate__operator">
                 {aggregateColumnState && (
@@ -1309,6 +1352,21 @@ export const QueryBuilderTDSPanel = observer(
               ),
             );
             break;
+          case QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.RELATION_COLUMN: {
+            const dragNode = (
+              item as unknown as {
+                node: QueryBuilderExplorerTreeRelationColumnNodeData;
+              }
+            ).node;
+            tdsState.addColumn(
+              new QueryBuilderRelationColumnProjectionColumnState(
+                tdsState,
+                dragNode.column,
+                true,
+              ),
+            );
+            break;
+          }
           case QUERY_BUILDER_FILTER_DND_TYPE.CONDITION:
             if (item.node instanceof QueryBuilderFilterTreeConditionNodeData) {
               const propertyExpression = isExistsNodeChild(item.node)