@finos/legend-query-builder 4.14.21 → 4.14.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.14.21",
+  "version": "4.14.22",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,11 +42,11 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.73",
-    "@finos/legend-art": "7.1.25",
-    "@finos/legend-graph": "31.9.7",
-    "@finos/legend-lego": "1.2.20",
-    "@finos/legend-server-depot": "6.0.38",
+    "@finos/legend-application": "15.0.74",
+    "@finos/legend-art": "7.1.26",
+    "@finos/legend-graph": "31.9.8",
+    "@finos/legend-lego": "1.2.21",
+    "@finos/legend-server-depot": "6.0.39",
     "@finos/legend-shared": "10.0.34",
     "@finos/legend-storage": "3.0.84",
     "@testing-library/react": "14.0.0",

package/src/__lib__/QueryBuilderTesting.ts

@@ -19,6 +19,7 @@ export enum QUERY_BUILDER_TEST_ID {
 
   QUERY_BUILDER = 'query__builder',
   QUERY_BUILDER_SETUP = 'query__builder__setup',
+  QUERY_BUILDER_FETCH_STRUCTURE = 'query__builder__fetch__structure',
   QUERY_BUILDER_TDS_PROJECTION = 'query__builder__tds__projection',
   QUERY_BUILDER_TDS = 'query__builder__tds',
   QUERY_BUILDER_TDS_PROJECTION_COLUMN = 'QUERY_BUILDER_TDS_PROJECTION_COLUMN',

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

@@ -31,6 +31,7 @@ import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuil
 import { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 import { FETCH_STRUCTURE_IMPLEMENTATION } from '../../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
+import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 
 const QueryBuilderFetchStructureEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -81,7 +82,7 @@ export const QueryBuilderFetchStructurePanel = observer(
       };
 
     return (
-      <Panel>
+      <Panel data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_FETCH_STRUCTURE}>
         <PanelHeader>
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>

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

@@ -908,6 +908,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                       "This column is used and can't be removed"
                     : 'Remove'
                 }
+                name="Remove"
               >
                 <TimesIcon />
               </button>

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

@@ -49,7 +49,12 @@ import {
   PanelHeaderActions,
   Panel,
 } from '@finos/legend-art';
-import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
+import {
+  assertErrorThrown,
+  clone,
+  deleteEntry,
+  guaranteeNonNullable,
+} from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useCallback, useRef, useState } from 'react';
 import { type DropTargetMonitor, useDrag, useDrop } from 'react-dnd';
@@ -62,6 +67,7 @@ import {
   QueryBuilderTDS_WindowRankOperatorState,
   QueryBuilderTDS_WindowAggreationOperatorState,
   QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+  WindowGroupByColumnSortByState,
 } from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import { QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
@@ -83,6 +89,13 @@ const createWindowColumnState = (
   const nonColoperator = guaranteeNonNullable(
     tdsState.windowState.operators.filter((o) => !o.isColumnAggregator())[0],
   );
+  const columnName = operator
+    ? operator.isColumnAggregator()
+      ? `${operator.getLabel()} of ${columnState.columnName}`
+      : columnState.columnName
+    : nonColoperator.isColumnAggregator()
+    ? `${nonColoperator.getLabel()} of ${columnState.columnName}`
+    : columnState.columnName;
   if (operator) {
     const opState = new QueryBuilderTDS_WindowAggreationOperatorState(
       tdsState.windowState,
@@ -94,7 +107,7 @@ const createWindowColumnState = (
       [],
       undefined,
       opState,
-      `${operator.getLabel()} ${columnState.columnName}`,
+      columnName,
     );
   } else {
     return new QueryBuilderWindowColumnState(
@@ -105,7 +118,7 @@ const createWindowColumnState = (
         tdsState.windowState,
         nonColoperator,
       ),
-      `${nonColoperator.getLabel()} ${columnState.columnName}`,
+      columnName,
     );
   }
 };
@@ -188,85 +201,177 @@ const QueryBuilderWindowColumnModalEditor = observer(
     windowState: QueryBuilderWindowState;
     windowColumnState: QueryBuilderWindowColumnState;
   }) => {
+    // Read state
     const { windowState, windowColumnState } = props;
-    const createNewWindow =
+    const isNewWindowFunction =
       !windowState.windowColumns.includes(windowColumnState);
     const tdsState = windowState.tdsState;
     const applicationStore = useApplicationStore();
-    const close = (): void => {
-      windowState.setEditColumn(undefined);
-    };
-    const isDuplicatedColumnName = !windowState.windowColumns.includes(
-      windowColumnState,
-    )
-      ? windowState.tdsState.tdsColumns
-          .map((c) => c.columnName)
-          .includes(windowColumnState.columnName)
-      : windowState.tdsState.isDuplicateColumn(windowColumnState);
-    const windowOptions = createNewWindow
-      ? tdsState.tdsColumns
-      : windowColumnState.possibleReferencedColumns;
-    const windowOptionsLabels = windowOptions.map((w) => ({
-      label: w.columnName,
-      value: w,
-    }));
-    // column Name
+
+    // Column name
+    const [selectedColumnName, setSelectedColumnName] = useState(
+      windowColumnState.columnName,
+    );
     const changeColumnName: React.ChangeEventHandler<HTMLInputElement> = (
       event,
-    ) => windowColumnState.setColumnName(event.target.value);
-    // operator
+    ) => setSelectedColumnName(event.target.value);
+    const isDuplicatedColumnName = isNewWindowFunction
+      ? windowState.tdsState.tdsColumns
+          .map((c) => c.columnName)
+          .filter((name) => name === selectedColumnName).length > 0
+      : windowState.tdsState.tdsColumns
+          .map((c) => c.columnName)
+          .filter((name) => name === selectedColumnName).length > 0 &&
+        selectedColumnName !== windowColumnState.columnName;
+
+    // Window operator
     const operators = windowState.operators;
-    const operationState = windowColumnState.operationState;
-    const windowOpColumn =
-      operationState instanceof QueryBuilderTDS_WindowAggreationOperatorState
-        ? operationState.columnState
+    const operatorState = windowColumnState.operatorState;
+    const [selectedOperatorState, setSelectedOperatorState] = useState(() => {
+      if (
+        operatorState instanceof QueryBuilderTDS_WindowAggreationOperatorState
+      ) {
+        return new QueryBuilderTDS_WindowAggreationOperatorState(
+          operatorState.windowState,
+          operatorState.operator,
+          operatorState.columnState,
+        );
+      }
+      return new QueryBuilderTDS_WindowRankOperatorState(
+        operatorState.windowState,
+        operatorState.operator,
+      );
+    });
+    const windowOperatorColumn =
+      selectedOperatorState instanceof
+      QueryBuilderTDS_WindowAggreationOperatorState
+        ? selectedOperatorState.columnState
         : undefined;
-    const changeOperatorCol = (
+    const changeWindowOperatorColumn = (
       val: { label: string; value: QueryBuilderTDSColumnState } | null,
     ): void => {
       if (
-        operationState instanceof QueryBuilderTDS_WindowAggreationOperatorState
+        selectedOperatorState instanceof
+          QueryBuilderTDS_WindowAggreationOperatorState &&
+        val !== null
       ) {
-        if (val !== null) {
-          operationState.setColumnState(val.value);
-        }
+        const newOpertorState = clone(selectedOperatorState);
+        const newColumnName = newOpertorState.operator.isColumnAggregator()
+          ? `${newOpertorState.operator.getLabel()} of ${val.value.columnName}`
+          : val.value.columnName;
+        newOpertorState.setColumnState(val.value);
+        setSelectedOperatorState(newOpertorState);
+        setSelectedColumnName(newColumnName);
       }
     };
     const changeOperator =
-      (olapOp: QueryBuilderTDS_WindowOperator) => (): void => {
-        windowColumnState.changeOperator(olapOp);
+      (newOperator: QueryBuilderTDS_WindowOperator) => (): void => {
+        const stateAndName =
+          windowColumnState.getChangeOperatorStateAndColumnName(
+            selectedOperatorState.operator,
+            windowOperatorColumn,
+            newOperator,
+          );
+        if (stateAndName) {
+          setSelectedOperatorState(stateAndName.operatorState);
+          setSelectedColumnName(stateAndName.columnName);
+        }
       };
-    // window
-    const addOptions = windowOptions.filter(
-      (e) => !windowColumnState.windowColumns.includes(e),
+    const allColumns = isNewWindowFunction
+      ? tdsState.tdsColumns
+      : windowColumnState.possibleReferencedColumns;
+    const allColumnsOptions = allColumns.map((w) => ({
+      label: w.columnName,
+      value: w,
+    }));
+
+    // Window columns
+    const [selectedWindowColumns, setSelectedWindowColumns] = useState([
+      ...windowColumnState.windowColumns,
+    ]);
+    const availableColumns = allColumns.filter(
+      (e) => !selectedWindowColumns.includes(e),
     );
-    const create = (): void => {
-      windowState.addWindowColumn(windowColumnState);
-      close();
-    };
-    const addWindowValue = (): void => {
-      if (addOptions.length > 0) {
-        windowColumnState.addWindow(guaranteeNonNullable(addOptions[0]));
+    const addWindowColumn = (): void => {
+      if (availableColumns.length > 0) {
+        setSelectedWindowColumns([
+          ...selectedWindowColumns,
+          guaranteeNonNullable(availableColumns[0]),
+        ]);
       }
     };
-    // sortby
-    const sortByState = windowColumnState.sortByState;
+    const updateWindowColumn = (
+      idx: number,
+      column: QueryBuilderTDSColumnState,
+    ): void => {
+      const newWindowColumns = clone(selectedWindowColumns);
+      newWindowColumns[idx] = column;
+      setSelectedWindowColumns(newWindowColumns);
+    };
+    const deleteWindowColumn = (column: QueryBuilderTDSColumnState): void => {
+      const newWindowColumns = clone(selectedWindowColumns);
+      deleteEntry(newWindowColumns, column);
+      setSelectedWindowColumns(newWindowColumns);
+    };
+
+    // Sort by
+    const [selectedSortBy, setSelectedSortBy] = useState(() => {
+      const sortBy = windowColumnState.sortByState;
+      if (sortBy) {
+        return new WindowGroupByColumnSortByState(
+          sortBy.columnState,
+          sortBy.sortType,
+        );
+      }
+      return undefined;
+    });
     const changeSortBy = (sortOp: COLUMN_SORT_TYPE | undefined) => (): void => {
-      windowColumnState.changeSortBy(sortOp);
+      if (selectedSortBy?.sortType !== sortOp) {
+        if (sortOp) {
+          const newSortByState = new WindowGroupByColumnSortByState(
+            selectedSortBy?.columnState
+              ? selectedSortBy.columnState
+              : guaranteeNonNullable(
+                  windowColumnState.possibleReferencedColumns[0],
+                ),
+            sortOp,
+          );
+          setSelectedSortBy(newSortByState);
+        } else {
+          setSelectedSortBy(undefined);
+        }
+      }
     };
     const changeSortCol = (
       val: { label: string; value: QueryBuilderTDSColumnState } | null,
     ): void => {
-      if (sortByState) {
-        if (val !== null) {
-          sortByState.setColumnState(val.value);
-        }
+      if (selectedSortBy && val !== null) {
+        const newSortByState = new WindowGroupByColumnSortByState(
+          val.value,
+          selectedSortBy.sortType,
+        );
+        setSelectedSortBy(newSortByState);
       }
     };
+
+    // Modal lifecycle actions
+    const handleCancel = (): void => {
+      windowState.setEditColumn(undefined);
+    };
+
+    const handleApply = (): void => {
+      windowColumnState.setColumnName(selectedColumnName);
+      windowColumnState.setOperatorState(selectedOperatorState);
+      windowColumnState.setWindows(selectedWindowColumns);
+      windowColumnState.setSortBy(selectedSortBy);
+      windowState.addWindowColumn(windowColumnState);
+      handleCancel();
+    };
+
     return (
       <Dialog
         open={Boolean(windowState.editColumn)}
-        onClose={close}
+        onClose={handleCancel}
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
@@ -288,7 +393,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
         >
           <ModalHeader
             title={
-              createNewWindow
+              isNewWindowFunction
                 ? 'Create Window Function Column'
                 : 'Update Window Function Column'
             }
@@ -305,27 +410,16 @@ const QueryBuilderWindowColumnModalEditor = observer(
               <div className="panel__content__form__section__list">
                 <div className="panel__content__form__section__list__items">
                   <div className="query-builder__olap__column__operation__operator">
-                    <div
-                      className={clsx(
-                        'query-builder__olap__column__operation__operator__label',
-                        {
-                          'query-builder__olap__column__operation__operator__label__agg':
-                            !windowOpColumn,
-                        },
-                      )}
-                    >
-                      {operationState.operator.getLabel()}
-                    </div>
-                    {windowOpColumn && (
+                    {windowOperatorColumn && (
                       <div className="panel__content__form__section__list__item query-builder__olap__tds__column__options">
                         <CustomSelectorInput
                           className="query-builder__olap__tds__column__dropdown"
-                          options={windowOptionsLabels}
-                          disabled={windowOptionsLabels.length < 1}
-                          onChange={changeOperatorCol}
+                          options={allColumnsOptions}
+                          disabled={allColumnsOptions.length < 1}
+                          onChange={changeWindowOperatorColumn}
                           value={{
-                            value: windowOpColumn,
-                            label: windowOpColumn.columnName,
+                            value: windowOperatorColumn,
+                            label: windowOperatorColumn.columnName,
                           }}
                           darkMode={
                             !applicationStore.layoutService
@@ -334,8 +428,20 @@ const QueryBuilderWindowColumnModalEditor = observer(
                         />
                       </div>
                     )}
+                    <div
+                      className={clsx(
+                        'query-builder__olap__column__operation__operator__label',
+                        {
+                          'query-builder__olap__column__operation__operator__label__agg':
+                            !windowOperatorColumn,
+                        },
+                      )}
+                    >
+                      {selectedOperatorState.operator.getLabel()}
+                    </div>
                     <DropdownMenu
                       className="query-builder__olap__column__operation__operator__dropdown"
+                      title="Choose Window Function Operator..."
                       disabled={!operators.length}
                       content={
                         <MenuContent>
@@ -362,16 +468,10 @@ const QueryBuilderWindowColumnModalEditor = observer(
                         elevation: 7,
                       }}
                     >
-                      <div
-                        className="query-builder__olap__column__operation__operator__badge"
-                        title="Choose Window Function Operator..."
-                      >
+                      <div className="query-builder__olap__column__operation__operator__badge">
                         <SigmaIcon />
                       </div>
-                      <div
-                        className="query-builder__olap__column__operation__operator__dropdown__trigger"
-                        title="Choose Window Function Operator..."
-                      >
+                      <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                         <CaretDownIcon />
                       </div>
                     </DropdownMenu>
@@ -385,29 +485,29 @@ const QueryBuilderWindowColumnModalEditor = observer(
               </div>
               <div className="panel__content__form__section__header__prompt">
                 Represents the window of columns that will partition the rows
-                for which to apply the aggragte function
+                for which to apply the aggregate function
               </div>
               <div className="panel__content__form__section__list">
                 <div className="panel__content__form__section__list__items">
-                  {windowColumnState.windowColumns.map((value, idx) => (
+                  {selectedWindowColumns.map((value, idx) => (
                     <TDSColumnSelectorEditor
                       key={value.uuid}
                       colValue={value}
                       setColumn={(v: QueryBuilderTDSColumnState) =>
-                        windowColumnState.changeWindow(v, idx)
+                        updateWindowColumn(idx, v)
                       }
-                      deleteColumn={(v: QueryBuilderTDSColumnState): void =>
-                        windowColumnState.deleteWindow(v)
+                      deleteColumn={(v: QueryBuilderTDSColumnState) =>
+                        deleteWindowColumn(v)
                       }
-                      tdsColOptions={windowOptions}
+                      tdsColOptions={availableColumns}
                     />
                   ))}
                 </div>
                 <div className="panel__content__form__section__list__new-item__add">
                   <button
                     className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                    disabled={!addOptions.length}
-                    onClick={addWindowValue}
+                    disabled={!availableColumns.length}
+                    onClick={addWindowColumn}
                     tabIndex={-1}
                   >
                     Add Value
@@ -425,21 +525,16 @@ const QueryBuilderWindowColumnModalEditor = observer(
               <div className="panel__content__form__section__header__prompt"></div>
               <div className="panel__content__form__section__list">
                 <div className="query-builder__olap__column__sortby__operator">
-                  {sortByState && (
-                    <div className="query-builder__olap__column__sortby__operator__label">
-                      {sortByState.sortType.toLowerCase()}
-                    </div>
-                  )}
-                  {sortByState && (
+                  {selectedSortBy && (
                     <div className="panel__content__form__section__list__item query-builder__olap__tds__column__options">
                       <CustomSelectorInput
                         className="query-builder__olap__tds__column__dropdown"
-                        options={windowOptionsLabels}
-                        disabled={windowOptionsLabels.length < 1}
+                        options={allColumnsOptions}
+                        disabled={allColumnsOptions.length < 1}
                         onChange={changeSortCol}
                         value={{
-                          value: sortByState.columnState,
-                          label: sortByState.columnState.columnName,
+                          value: selectedSortBy.columnState,
+                          label: selectedSortBy.columnState.columnName,
                         }}
                         darkMode={
                           !applicationStore.layoutService
@@ -448,13 +543,19 @@ const QueryBuilderWindowColumnModalEditor = observer(
                       />
                     </div>
                   )}
-                  {!sortByState && (
+                  {!selectedSortBy && (
                     <div className="query-builder__olap__column__sortby__none">
                       (none)
                     </div>
                   )}
+                  {selectedSortBy && (
+                    <div className="query-builder__olap__column__sortby__operator__label">
+                      {selectedSortBy.sortType.toLowerCase()}
+                    </div>
+                  )}
                   <DropdownMenu
                     className="query-builder__olap__column__sortby__operator__dropdown"
+                    title="Choose Window Function SortBy Operator..."
                     content={
                       <MenuContent>
                         <MenuContentItem
@@ -487,18 +588,16 @@ const QueryBuilderWindowColumnModalEditor = observer(
                         'query-builder__olap__column__sortby__operator__badge',
                         {
                           'query-builder__olap__column__sortby__operator__badge--activated':
-                            Boolean(sortByState),
+                            Boolean(selectedSortBy),
                         },
                       )}
                       tabIndex={-1}
-                      title="Choose Window Function SortBy Operator..."
                     >
                       <SortIcon />
                     </div>
                     <div
                       className="query-builder__olap__column__sortby__operator__dropdown__trigger"
                       tabIndex={-1}
-                      title="Choose Window Function SortBy Operator..."
                     >
                       <CaretDownIcon />
                     </div>
@@ -517,22 +616,23 @@ const QueryBuilderWindowColumnModalEditor = observer(
               <InputWithInlineValidation
                 className="query-builder__olap__column__name__input input-group__input"
                 spellCheck={false}
-                value={windowColumnState.columnName}
+                value={selectedColumnName}
                 onChange={changeColumnName}
                 error={isDuplicatedColumnName ? 'Duplicated column' : undefined}
               />
             </PanelFormSection>
           </div>
           <ModalFooter>
-            {createNewWindow ? (
-              <ModalFooterButton text="Create" onClick={create} />
-            ) : (
-              <ModalFooterButton
-                text="Close"
-                onClick={close}
-                type="secondary"
-              />
-            )}
+            <ModalFooterButton
+              text={isNewWindowFunction ? 'Create' : 'Apply'}
+              onClick={handleApply}
+              disabled={isDuplicatedColumnName}
+            />
+            <ModalFooterButton
+              text="Cancel"
+              onClick={handleCancel}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -718,7 +818,7 @@ const QueryBuilderWindowColumnEditor = observer(
     };
 
     // operator
-    const operationState = windowColumnState.operationState;
+    const operationState = windowColumnState.operatorState;
     const aggregateColumn =
       operationState instanceof QueryBuilderTDS_WindowAggreationOperatorState
         ? operationState.columnState
@@ -887,6 +987,15 @@ const QueryBuilderWindowColumnEditor = observer(
           />
           <div className="query-builder__olap__column__operation">
             <div className="query-builder__olap__column__operation__operator">
+              {aggregateColumn && (
+                <TDSColumnReferenceEditor
+                  tdsColumn={aggregateColumn}
+                  handleChange={handleOpDrop}
+                  selectionEditor={{
+                    options: windowColumnState.possibleReferencedColumns,
+                  }}
+                />
+              )}
               <div
                 className={clsx(
                   'query-builder__olap__column__operation__operator__label',
@@ -898,18 +1007,10 @@ const QueryBuilderWindowColumnEditor = observer(
               >
                 {operationState.operator.getLabel()}
               </div>
-              {aggregateColumn && (
-                <TDSColumnReferenceEditor
-                  tdsColumn={aggregateColumn}
-                  handleChange={handleOpDrop}
-                  selectionEditor={{
-                    options: windowColumnState.possibleReferencedColumns,
-                  }}
-                />
-              )}
               <DropdownMenu
                 className="query-builder__olap__column__operation__operator__dropdown"
                 disabled={!operators.length}
+                title="Choose Window Function Operator..."
                 content={
                   <MenuContent>
                     {operators.map((op) => (
@@ -929,16 +1030,10 @@ const QueryBuilderWindowColumnEditor = observer(
                   elevation: 7,
                 }}
               >
-                <div
-                  className="query-builder__olap__column__operation__operator__badge"
-                  title="Choose Window Function Operator..."
-                >
+                <div className="query-builder__olap__column__operation__operator__badge">
                   <SigmaIcon />
                 </div>
-                <div
-                  className="query-builder__olap__column__operation__operator__dropdown__trigger"
-                  title="Choose Window Function Operator..."
-                >
+                <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
               </DropdownMenu>
@@ -998,7 +1093,7 @@ const QueryBuilderWindowColumnEditor = observer(
                         deleteColumn={(v: QueryBuilderTDSColumnState): void =>
                           windowColumnState.deleteWindow(v)
                         }
-                        tdsColOptions={windowOptions}
+                        tdsColOptions={addWindowOptions}
                       />
                     ))}
                   </div>
@@ -1018,11 +1113,6 @@ const QueryBuilderWindowColumnEditor = observer(
           </div>
           <div className="query-builder__olap__column__sortby">
             <div className="query-builder__olap__column__sortby__operator">
-              {sortByState && (
-                <div className="query-builder__olap__column__sortby__operator__label">
-                  {sortByState.sortType.toLowerCase()}
-                </div>
-              )}
               {sortByState && (
                 <TDSColumnReferenceEditor
                   tdsColumn={sortByState.columnState}
@@ -1037,8 +1127,14 @@ const QueryBuilderWindowColumnEditor = observer(
                   (none)
                 </div>
               )}
+              {sortByState && (
+                <div className="query-builder__olap__column__sortby__operator__label">
+                  {sortByState.sortType.toLowerCase()}
+                </div>
+              )}
               <DropdownMenu
                 className="query-builder__olap__column__sortby__operator__dropdown"
+                title="Choose Window Function SortBy Operator..."
                 content={
                   <MenuContent>
                     <MenuContentItem
@@ -1074,14 +1170,10 @@ const QueryBuilderWindowColumnEditor = observer(
                         Boolean(sortByState),
                     },
                   )}
-                  title="Choose Window Function SortBy Operator..."
                 >
                   <SortIcon />
                 </div>
-                <div
-                  className="query-builder__olap__column__sortby__operator__dropdown__trigger"
-                  title="Choose Window Function SortBy Operator..."
-                >
+                <div className="query-builder__olap__column__sortby__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
               </DropdownMenu>