@finos/legend-query-builder 4.14.31 → 4.14.33

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -37,6 +37,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import {
   generateValueSpecificationForParameter,
+  getPropertyChainName,
   type QueryBuilderDerivedPropertyExpressionState,
   type QueryBuilderPropertyExpressionState,
 } from '../stores/QueryBuilderPropertyEditorState.js';
@@ -382,15 +383,16 @@ export const QueryBuilderPropertyExpressionEditor = observer(
 export const QueryBuilderEditablePropertyName = observer(
   (props: {
     columnName: string;
-    changeColumnName?:
-      | ((event: ChangeEvent<HTMLInputElement>) => void)
-      | undefined;
+    setColumnName?: ((columnName: string) => void) | undefined;
     error: string | undefined;
     title: string;
+    defaultColumnName: string;
   }) => {
-    const { columnName, changeColumnName, error, title } = props;
+    const { columnName, setColumnName, error, title, defaultColumnName } =
+      props;
 
     const [isEditingColumnName, setIsEditingColumnName] = useState(false);
+    const [selectedColumnName, setSelectedColumnName] = useState(columnName);
     const columnNameInputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
@@ -399,26 +401,33 @@ export const QueryBuilderEditablePropertyName = observer(
       }
     }, [isEditingColumnName, columnNameInputRef]);
 
+    const handleFinishEditing = (): void => {
+      const trimmedSelectedColumnName = selectedColumnName.trim();
+      if (trimmedSelectedColumnName.length > 0) {
+        setColumnName?.(trimmedSelectedColumnName);
+        setSelectedColumnName(trimmedSelectedColumnName);
+      } else {
+        setColumnName?.(defaultColumnName);
+        setSelectedColumnName(defaultColumnName);
+      }
+      setIsEditingColumnName(false);
+    };
+
     return isEditingColumnName ? (
       <div className="query-builder__property__name__editor">
         <InputWithInlineValidation
           className="query-builder__property__name__editor__input input-group__input"
           spellCheck={false}
-          value={columnName}
-          onChange={changeColumnName}
+          value={selectedColumnName}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            setSelectedColumnName(event.target.value)
+          }
           onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
             if (event.key === 'Enter') {
-              if (columnName.length > 0) {
-                setIsEditingColumnName(false);
-              }
-            }
-          }}
-          onBlur={() => {
-            if (columnName.length > 0) {
-              setIsEditingColumnName(false);
+              handleFinishEditing();
             }
           }}
-          error={error}
+          onBlur={handleFinishEditing}
           ref={columnNameInputRef}
           draggable={true}
           onDragStart={(e: React.DragEvent<HTMLInputElement>) => {
@@ -434,10 +443,10 @@ export const QueryBuilderEditablePropertyName = observer(
         <span
           className={clsx('query-builder__property__name__display__content', {
             'query-builder__property__name__display__content--error': error,
-            'editable-value': changeColumnName,
+            'editable-value': setColumnName,
           })}
           onClick={() => {
-            if (changeColumnName) {
+            if (setColumnName) {
               setIsEditingColumnName(true);
             }
           }}
@@ -456,14 +465,14 @@ export const QueryBuilderPropertyExpressionBadge = observer(
     onPropertyExpressionChange: (
       node: QueryBuilderExplorerTreePropertyNodeData,
     ) => void;
-    changeColumnName?: (event: ChangeEvent<HTMLInputElement>) => void;
+    setColumnName?: (columnName: string) => void;
     error?: string | undefined;
   }) => {
     const {
       columnName,
       propertyExpressionState,
       onPropertyExpressionChange,
-      changeColumnName,
+      setColumnName,
       error,
     } = props;
     const type =
@@ -529,9 +538,14 @@ export const QueryBuilderPropertyExpressionBadge = observer(
           >
             <QueryBuilderEditablePropertyName
               columnName={columnName ?? propertyExpressionState.title}
-              changeColumnName={changeColumnName}
+              setColumnName={setColumnName}
               error={error}
               title={`${propertyExpressionState.title} - ${propertyExpressionState.path}`}
+              defaultColumnName={getPropertyChainName(
+                propertyExpressionState.propertyExpression,
+                propertyExpressionState.queryBuilderState.explorerState
+                  .humanizePropertyName,
+              )}
             />
             {hasDerivedPropertyInExpression && (
               <button

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

@@ -14,14 +14,7 @@
  * limitations under the License.
  */
 
-import {
-  useEffect,
-  useRef,
-  useCallback,
-  useState,
-  forwardRef,
-  type ChangeEvent,
-} from 'react';
+import { useEffect, useRef, useCallback, useState, forwardRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
@@ -161,10 +154,10 @@ const QueryBuilderProjectionColumnContextMenu = observer(
 const QueryBuilderSimpleProjectionColumnEditor = observer(
   (props: {
     projectionColumnState: QueryBuilderSimpleProjectionColumnState;
-    changeColumnName: (event: ChangeEvent<HTMLInputElement>) => void;
+    setColumnName: (columnName: string) => void;
     error?: string | undefined;
   }) => {
-    const { projectionColumnState, changeColumnName, error } = props;
+    const { projectionColumnState, setColumnName, error } = props;
     const onPropertyExpressionChange = (
       node: QueryBuilderExplorerTreePropertyNodeData,
     ): void =>
@@ -179,7 +172,7 @@ const QueryBuilderSimpleProjectionColumnEditor = observer(
         columnName={projectionColumnState.columnName}
         propertyExpressionState={projectionColumnState.propertyExpressionState}
         onPropertyExpressionChange={onPropertyExpressionChange}
-        changeColumnName={changeColumnName}
+        setColumnName={setColumnName}
         error={error}
       />
     );
@@ -391,9 +384,8 @@ const QueryBuilderProjectionColumnEditor = observer(
       tdsState.removeColumn(projectionColumnState);
 
     // name
-    const changeColumnName: React.ChangeEventHandler<HTMLInputElement> = (
-      event,
-    ) => projectionColumnState.setColumnName(event.target.value);
+    const setColumnName = (columnName: string): void =>
+      projectionColumnState.setColumnName(columnName);
     const isDuplicatedColumnName =
       projectionColumnState.tdsState.isDuplicateColumn(projectionColumnState);
 
@@ -787,7 +779,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                 <div className="query-builder__projection__column__value">
                   <QueryBuilderSimpleProjectionColumnEditor
                     projectionColumnState={projectionColumnState}
-                    changeColumnName={changeColumnName}
+                    setColumnName={setColumnName}
                     error={
                       isDuplicatedColumnName
                         ? 'Duplicated column'
@@ -814,7 +806,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                 <div className="query-builder__projection__column__value">
                   <QueryBuilderEditablePropertyName
                     columnName={projectionColumnState.columnName}
-                    changeColumnName={changeColumnName}
+                    setColumnName={setColumnName}
                     error={
                       isDuplicatedColumnName
                         ? 'Duplicated column'
@@ -823,6 +815,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                         : undefined
                     }
                     title={projectionColumnState.columnName}
+                    defaultColumnName="(derivation)"
                   />
                   <QueryBuilderDerivationProjectionColumnEditor
                     projectionColumnState={projectionColumnState}

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -25,7 +25,6 @@ import {
   MenuContent,
   MenuContentItem,
   BlankPanelPlaceholder,
-  FilledTriangleIcon,
   CompressIcon,
   ExpandIcon,
   TrashIcon,
@@ -33,8 +32,6 @@ import {
   CircleIcon,
   CaretDownIcon,
   PlusIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   PlusCircleIcon,
   TimesIcon,
   PanelDropZone,
@@ -632,28 +629,21 @@ const QueryBuilderFilterGroupConditionEditor = observer(
       node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
 
     return (
-      <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
+      <div className="dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           isDroppable={isDroppable}
-          label={`Add to Logical Group '${operationName}'`}
+          label={operationName}
+          className="query-builder-filter-tree__group-node__drop-zone"
         >
           <div
-            className={clsx('query-builder-filter-tree__group-node', {
-              'query-builder-filter-tree__group-node--and':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND,
-              'query-builder-filter-tree__group-node--or':
-                node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.OR,
-            })}
+            className="query-builder-filter-tree__group-node"
             title="Switch Operation"
             onClick={switchOperation}
           >
-            <div className="query-builder-filter-tree__group-node__label">
+            <div className="query-builder-filter-tree__group-node__label editable-value">
               {node.groupOperation}
             </div>
-            <button className="query-builder-filter-tree__group-node__action">
-              <FilledTriangleIcon />
-            </button>
           </div>
         </PanelEntryDropZonePlaceholder>
       </div>
@@ -680,11 +670,12 @@ const QueryBuilderFilterExistsConditionEditor = observer(
     };
 
     return (
-      <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
+      <div className="dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           isDroppable={isDroppable}
-          label={`Add to Exists Group`}
+          label="Add to Exists Group"
+          className="query-builder-filter-tree__exists-node__drop-zone"
         >
           <div
             className="query-builder-filter-tree__exists-node"
@@ -810,7 +801,7 @@ const QueryBuilderFilterConditionEditor = observer(
 
     return (
       <div
-        className="query-builder-filter-tree__node__label__content dnd__entry__container"
+        className="dnd__entry__container"
         data-testid={
           QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_CONDITION_NODE_CONTENT
         }
@@ -975,17 +966,14 @@ const QueryBuilderFilterTreeNodeContainer = observer(
       }
     >,
   ) => {
-    const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+    const { node, onNodeSelect, innerProps } = props;
     const { queryBuilderState } = innerProps;
-    const ref = useRef<HTMLDivElement>(null);
+    const dragRef = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
     const filterState = queryBuilderState.filterState;
-    const isExpandable =
-      node instanceof QueryBuilderFilterTreeOperationNodeData;
     const selectNode = (): void => onNodeSelect?.(node);
-    const toggleExpandNode = (): void => node.setIsOpen(!node.isOpen);
     const removeNode = (): void => filterState.removeNodeAndPruneBranch(node);
 
     // Drag and Drop
@@ -1108,10 +1096,13 @@ const QueryBuilderFilterTreeNodeContainer = observer(
               : QUERY_BUILDER_FILTER_DND_TYPE.BLANK_CONDITION,
           item: () => ({ node }),
           end: (): void => filterState.setRearrangingConditions(false),
+          canDrag: () =>
+            node instanceof QueryBuilderFilterTreeConditionNodeData ||
+            node instanceof QueryBuilderFilterTreeBlankConditionNodeData,
         }),
         [node, filterState],
       );
-    dragConnector(dropConnector(ref));
+    dragConnector(dropConnector(dragRef));
     useDragPreviewLayer(dragPreviewConnector);
 
     const { isDroppable } = useDragLayer((monitor) => ({
@@ -1127,105 +1118,108 @@ const QueryBuilderFilterTreeNodeContainer = observer(
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
 
+    const isEmptyExistsNode =
+      node instanceof QueryBuilderFilterTreeExistsNodeData &&
+      node.childrenIds.length === 0;
+    const showRemoveButton =
+      node instanceof QueryBuilderFilterTreeConditionNodeData ||
+      node instanceof QueryBuilderFilterTreeBlankConditionNodeData ||
+      isEmptyExistsNode;
+
     return (
-      <ContextMenu
-        content={
-          <QueryBuilderFilterConditionContextMenu
-            queryBuilderState={queryBuilderState}
-            node={node}
-          />
+      <div
+        data-testid={
+          QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTAINER
+        }
+        onClick={
+          node instanceof QueryBuilderFilterTreeConditionNodeData ||
+          node instanceof QueryBuilderFilterTreeBlankConditionNodeData
+            ? selectNode
+            : undefined
         }
-        menuProps={{ elevation: 7 }}
-        onOpen={onContextMenuOpen}
-        onClose={onContextMenuClose}
+        className={clsx('query-builder-filter-tree__node__container', {
+          'query-builder-filter-tree__node__container--group':
+            node instanceof QueryBuilderFilterTreeGroupNodeData,
+          'query-builder-filter-tree__node__container--condition':
+            node instanceof QueryBuilderFilterTreeConditionNodeData ||
+            node instanceof QueryBuilderFilterTreeBlankConditionNodeData,
+          'query-builder-filter-tree__node__container--exists':
+            node instanceof QueryBuilderFilterTreeExistsNodeData,
+          'query-builder-filter-tree__node__container--exists--empty':
+            isEmptyExistsNode,
+          'query-builder-filter-tree__node__container--no-hover':
+            filterState.isRearrangingConditions,
+          'query-builder-filter-tree__node__container--selected':
+            node === filterState.selectedNode,
+          'query-builder-filter-tree__node__container--selected-from-context-menu':
+            isSelectedFromContextMenu,
+        })}
       >
-        <div
-          ref={ref}
-          data-testid={
-            QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTENT
+        <ContextMenu
+          content={
+            <QueryBuilderFilterConditionContextMenu
+              queryBuilderState={queryBuilderState}
+              node={node}
+            />
           }
-          className={clsx(
-            'tree-view__node__container query-builder-filter-tree__node__container',
-            {
-              'query-builder-filter-tree__node__container--no-hover':
-                filterState.isRearrangingConditions,
-              'query-builder-filter-tree__node__container--selected':
-                node === filterState.selectedNode,
-              'query-builder-filter-tree__node__container--selected-from-context-menu':
-                isSelectedFromContextMenu,
-            },
-          )}
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
+          className="query-builder-filter-tree__node__context-menu"
         >
           <div
+            data-testid={
+              QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CONTENT
+            }
             className="query-builder-filter-tree__node__content"
-            style={{
-              paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2) + 1.5}rem`,
-              display: 'flex',
-            }}
-            onClick={selectNode}
+            ref={dragRef}
           >
-            {isExpandable && (
-              <div
-                className="query-builder-filter-tree__expand-icon"
-                onClick={toggleExpandNode}
-              >
-                {node.isOpen ? <ChevronDownIcon /> : <ChevronRightIcon />}
-              </div>
+            {node instanceof QueryBuilderFilterTreeGroupNodeData && (
+              <QueryBuilderFilterGroupConditionEditor
+                node={node}
+                isDroppable={isDroppable}
+                isDragOver={isDragOver}
+              />
+            )}
+            {node instanceof QueryBuilderFilterTreeExistsNodeData && (
+              <QueryBuilderFilterExistsConditionEditor
+                node={node}
+                humanizePropertyName={
+                  filterState.queryBuilderState.explorerState
+                    .humanizePropertyName
+                }
+                isDroppable={isDroppable}
+                isDragOver={isDragOver}
+              />
+            )}
+            {node instanceof QueryBuilderFilterTreeConditionNodeData && (
+              <QueryBuilderFilterConditionEditor
+                node={node}
+                isDragOver={isDragOver}
+              />
+            )}
+            {node instanceof QueryBuilderFilterTreeBlankConditionNodeData && (
+              <QueryBuilderFilterBlankConditionEditor
+                node={node}
+                isDragOver={isDragOver}
+                isDroppable={isDroppable}
+              />
             )}
-            <div
-              className={clsx(
-                'tree-view__node__label query-builder-filter-tree__node__label',
-                {
-                  'query-builder-filter-tree__node__label--expandable':
-                    isExpandable,
-                },
-              )}
-            >
-              {node instanceof QueryBuilderFilterTreeGroupNodeData && (
-                <QueryBuilderFilterGroupConditionEditor
-                  node={node}
-                  isDroppable={isDroppable}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof QueryBuilderFilterTreeExistsNodeData && (
-                <QueryBuilderFilterExistsConditionEditor
-                  node={node}
-                  humanizePropertyName={
-                    filterState.queryBuilderState.explorerState
-                      .humanizePropertyName
-                  }
-                  isDroppable={isDroppable}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof QueryBuilderFilterTreeConditionNodeData && (
-                <QueryBuilderFilterConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                />
-              )}
-              {node instanceof QueryBuilderFilterTreeBlankConditionNodeData && (
-                <QueryBuilderFilterBlankConditionEditor
-                  node={node}
-                  isDragOver={isDragOver}
-                  isDroppable={isDroppable}
-                />
-              )}
-            </div>
-          </div>
-          <div className="query-builder-filter-tree__node__actions">
-            <button
-              className="query-builder-filter-tree__node__action"
-              tabIndex={-1}
-              title="Remove"
-              onClick={removeNode}
-            >
-              <TimesIcon />
-            </button>
           </div>
-        </div>
-      </ContextMenu>
+          {showRemoveButton && (
+            <div className="query-builder-filter-tree__node__actions">
+              <button
+                className="query-builder-filter-tree__node__action"
+                tabIndex={-1}
+                title="Remove"
+                onClick={removeNode}
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          )}
+        </ContextMenu>
+      </div>
     );
   },
 );
@@ -1249,8 +1243,13 @@ const QueryBuilderFilterTreeNodeView = observer(
     } = props;
     return (
       <div
-        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE}
-        className="tree-view__node__block"
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_BLOCK}
+        className={clsx('query-builder-filter-tree__node__block', {
+          'query-builder-filter-tree__node__block--group':
+            node instanceof QueryBuilderFilterTreeGroupNodeData,
+          'query-builder-filter-tree__node__block--exists':
+            node instanceof QueryBuilderFilterTreeExistsNodeData,
+        })}
       >
         <QueryBuilderFilterTreeNodeContainer
           node={node}
@@ -1259,17 +1258,25 @@ const QueryBuilderFilterTreeNodeView = observer(
           onNodeSelect={onNodeSelect}
           innerProps={innerProps}
         />
-        {node.isOpen &&
-          getChildNodes(node).map((childNode) => (
-            <QueryBuilderFilterTreeNodeView
-              key={childNode.id}
-              node={childNode}
-              level={level + 1}
-              onNodeSelect={onNodeSelect}
-              getChildNodes={getChildNodes}
-              innerProps={innerProps}
-            />
-          ))}
+        {node.isOpen && getChildNodes(node).length > 0 && (
+          <div
+            data-testid={
+              QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FILTER_TREE_NODE_CHILDREN
+            }
+            className="query-builder-filter-tree__node__children"
+          >
+            {getChildNodes(node).map((childNode) => (
+              <QueryBuilderFilterTreeNodeView
+                key={childNode.id}
+                node={childNode}
+                level={level + 1}
+                onNodeSelect={onNodeSelect}
+                getChildNodes={getChildNodes}
+                innerProps={innerProps}
+              />
+            ))}
+          </div>
+        )}
       </div>
     );
   },

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -71,7 +71,7 @@ import { getExecutedSqlFromExecutionResult } from './tds/QueryBuilderTDSResultSh
 import { QueryBuilderTDSGridResult } from './tds/QueryBuilderTDSGridResult.js';
 import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 
-const QueryBuilderResultValues = observer(
+export const QueryBuilderResultValues = observer(
   (props: {
     executionResult: ExecutionResult;
     queryBuilderState: QueryBuilderState;

package/src/index.ts

@@ -69,6 +69,7 @@ export {
   QueryBuilderDiffViewState,
   QueryBuilderChangeDetectionState,
 } from './stores/QueryBuilderChangeDetectionState.js';
+export { QueryBuilderResultValues } from './components/result/QueryBuilderResultPanel.js';
 
 // ------------------------------------------- Shared components -------------------------------------------
 

package/src/stores/QueryBuilderStateBuilder.ts

@@ -93,6 +93,10 @@ import {
 import { checkIfEquivalent } from './milestoning/QueryBuilderMilestoningHelper.js';
 import type { QueryBuilderParameterValue } from './QueryBuilderParametersState.js';
 import { QueryBuilderEmbeddedFromExecutionContextState } from './QueryBuilderExecutionContextState.js';
+import {
+  isTypedProjectionExpression,
+  processTypedTDSProjectExpression,
+} from './fetch-structure/tds/projection/QueryBuilderTypedProjectionStateBuilder.js';
 
 const processGetAllExpression = (
   expression: SimpleFunctionExpression,
@@ -644,11 +648,20 @@ export class QueryBuilderValueSpecificationProcessor
         QUERY_BUILDER_SUPPORTED_FUNCTIONS.RELATION_PROJECT,
       ])
     ) {
-      processTDSProjectExpression(
-        valueSpecification,
-        this.queryBuilderState,
-        this.parentLambda,
-      );
+      if (isTypedProjectionExpression(valueSpecification)) {
+        processTypedTDSProjectExpression(
+          valueSpecification,
+          this.queryBuilderState,
+          this.parentLambda,
+        );
+      } else {
+        processTDSProjectExpression(
+          valueSpecification,
+          this.queryBuilderState,
+          this.parentLambda,
+        );
+      }
+
       return;
     } else if (
       matchFunctionName(