@finos/legend-query-builder 0.2.2 → 0.3.0

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

@@ -18,7 +18,6 @@ import { useApplicationStore } from '@finos/legend-application';
 import {
   type TreeNodeContainerProps,
   type TreeNodeViewProps,
-  type TooltipPlacement,
   BlankPanelPlaceholder,
   CaretDownIcon,
   ChevronDownIcon,
@@ -39,11 +38,6 @@ import {
   NewFolderIcon,
   PlusCircleIcon,
   InfoCircleIcon,
-  Tooltip,
-  StringTypeIcon,
-  ToggleIcon,
-  HashtagIcon,
-  ClockIcon,
   PanelDropZone,
   DragPreviewLayer,
   PanelEntryDropZonePlaceholder,
@@ -52,25 +46,20 @@ import {
   PanelContent,
 } 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/tds/post-filter/operators/QueryBuilderPostFilterOperatorHelper.js';
 import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
 import type { QueryBuilderPostFilterOperator } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterOperator.js';
 import {
@@ -99,6 +88,15 @@ import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpe
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  QueryBuilderColumnInfoTooltip,
+  renderPropertyTypeIcon,
+} from './QueryBuilderTDSComponentHelper.js';
+import {
+  type QueryBuilderOlapColumnDragSource,
+  QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOlapGroupByState.js';
+import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState_.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
@@ -197,91 +195,6 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
   },
 );
 
-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;
@@ -291,7 +204,7 @@ export const QueryBuilderColumnBadge = observer(
   }) => {
     const { postFilterConditionState, onColumnChange } = props;
     const applicationStore = useApplicationStore();
-    const type = postFilterConditionState.columnState.getReturnType();
+    const type = postFilterConditionState.columnState.getColumnType();
     const handleDrop = useCallback(
       (item: QueryBuilderProjectionColumnDragSource): Promise<void> =>
         onColumnChange(item.columnState),
@@ -303,7 +216,10 @@ export const QueryBuilderColumnBadge = observer(
       { isDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        accept: [
+          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+        ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item).catch(applicationStore.alertUnhandledError);
@@ -386,7 +302,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
       (item: QueryBuilderParameterDragSource): void => {
         const parameterType =
           item.variable.parameter.genericType?.value.rawType;
-        const conditionValueType = node.condition.columnState.getReturnType();
+        const conditionValueType = node.condition.columnState.getColumnType();
         if (
           conditionValueType &&
           isTypeCompatibleForAssignment(parameterType, conditionValueType)
@@ -507,7 +423,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     }
                     typeCheckOption={{
                       expectedType: guaranteeNonNullable(
-                        node.condition.columnState.getReturnType(),
+                        node.condition.columnState.getColumnType(),
                       ),
                     }}
                     resetValue={resetNode}
@@ -569,9 +485,15 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       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;
+        if (
+          type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
+          type === QUERY_BUILDER_OLAP_COLUMN_DND_TYPE
+        ) {
+          const columnState = (
+            item as
+              | QueryBuilderProjectionColumnDragSource
+              | QueryBuilderOlapColumnDragSource
+          ).columnState as QueryBuilderTDSColumnState;
           let conditionState: PostFilterConditionState;
           try {
             conditionState = new PostFilterConditionState(
@@ -590,7 +512,6 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
             applicationStore.notifyWarning(error.message);
             return;
           }
-
           if (node instanceof QueryBuilderPostFilterTreeGroupNodeData) {
             postFilterState.addNodeFromNode(
               new QueryBuilderPostFilterTreeConditionNodeData(
@@ -633,6 +554,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         accept: [
           ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -942,11 +864,14 @@ const QueryBuilderPostFilterPanelContent = observer(
       { isDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
+        accept: [
+          QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
+          QUERY_BUILDER_OLAP_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 }),

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

@@ -0,0 +1,69 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+} from '@finos/legend-art';
+import { QueryBuilderFilterPanel } from '../filter/QueryBuilderFilterPanel.js';
+import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOlapGroupByPanel.js';
+import { QueryBuilderPostFilterPanel } from './QueryBuilderPostFilterPanel.js';
+import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
+
+export const QueryBuilderPostTDSPanel = observer(
+  (props: { tdsState: QueryBuilderTDSState }) => {
+    const { tdsState } = props;
+    const showFilterPanel = tdsState.queryBuilderState.filterState.showPanel;
+    const showOlapGroupByPanel = tdsState.showOlapGroupByPanel;
+    const showPostFilterPanel = tdsState.showPostFilterPanel;
+    if (!tdsState.TEMPORARY__showPostFetchStructurePanel) {
+      return null;
+    }
+    return (
+      <ResizablePanelGroup orientation="horizontal">
+        {showFilterPanel && (
+          <ResizablePanel minSize={40} direction={1}>
+            <QueryBuilderFilterPanel
+              queryBuilderState={tdsState.queryBuilderState}
+            />
+          </ResizablePanel>
+        )}
+        {showFilterPanel && (showOlapGroupByPanel || showPostFilterPanel) && (
+          <ResizablePanelSplitter />
+        )}
+        {showOlapGroupByPanel && (
+          <ResizablePanel minSize={40}>
+            <QueryBuilderOlapGroupByPanel
+              olapGroupByState={tdsState.olapGroupByState}
+            />
+          </ResizablePanel>
+        )}
+        {showOlapGroupByPanel && showPostFilterPanel && (
+          <ResizablePanelSplitter />
+        )}
+        {showPostFilterPanel && (
+          <ResizablePanel minSize={40}>
+            <QueryBuilderPostFilterPanel
+              queryBuilderState={tdsState.queryBuilderState}
+            />
+          </ResizablePanel>
+        )}
+      </ResizablePanelGroup>
+    );
+  },
+);

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

@@ -76,7 +76,10 @@ const ColumnSortEditor = observer(
         <CustomSelectorInput
           className="query-builder__projection__options__sort__dropdown"
           options={projectionOptions}
-          disabled={projectionOptions.length <= 1}
+          disabled={
+            projectionOptions.length < 1 ||
+            (projectionOptions.length === 1 && Boolean(value))
+          }
           onChange={onChange}
           value={value}
           darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}

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

@@ -0,0 +1,118 @@
+/**
+ * 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 {
+  StringTypeIcon,
+  ToggleIcon,
+  HashtagIcon,
+  ClockIcon,
+  type TooltipPlacement,
+  Tooltip,
+} from '@finos/legend-art';
+import {
+  type Type,
+  Enumeration,
+  PrimitiveType,
+  PRIMITIVE_TYPE,
+  getMultiplicityDescription,
+} from '@finos/legend-graph';
+import { returnUndefOnError } from '@finos/legend-shared';
+import type { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
+import { getColumnMultiplicity } from '../../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperatorHelper.js';
+import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState_.js';
+
+export 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;
+};
+
+export const QueryBuilderColumnInfoTooltip: React.FC<{
+  columnState: QueryBuilderTDSColumnState | QueryBuilderAggregateColumnState;
+  children: React.ReactElement;
+  placement?: TooltipPlacement | undefined;
+}> = (props) => {
+  const { columnState, placement, children } = props;
+  const type = columnState.getColumnType();
+  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>
+  );
+};

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

@@ -53,7 +53,6 @@ import {
 import { QueryBuilderPropertyExpressionBadge } from '../QueryBuilderPropertyExpressionEditor.js';
 import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
-import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
 import { flowResult } from 'mobx';
 import { useApplicationStore } from '@finos/legend-application';
 import {
@@ -71,8 +70,6 @@ import {
   QUERY_BUILDER_FUNCTION_DND_TYPE,
 } from '../../stores/explorer/QueryFunctionsExplorerState.js';
 import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../../stores/QueryBuilderConfig.js';
-import { QueryBuilderPostFilterTreeConditionNodeData } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.js';
-import { filterByType } from '@finos/legend-shared';
 import type { QueryBuilderAggregateOperator } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregateOperator.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { LambdaEditor } from '../shared/LambdaEditor.js';
@@ -234,21 +231,7 @@ const QueryBuilderProjectionColumnEditor = observer(
 
     const { projectionColumnState } = props;
     const tdsState = projectionColumnState.tdsState;
-    const postFilterColumnStates = Array.from(
-      tdsState.postFilterState.nodes.values(),
-    )
-      .filter(filterByType(QueryBuilderPostFilterTreeConditionNodeData))
-      .map((n) => n.condition.columnState);
-
-    const isRemovalDisabled =
-      postFilterColumnStates
-        .filter((co) => co instanceof QueryBuilderAggregateColumnState)
-        .map(
-          (co) =>
-            (co as QueryBuilderAggregateColumnState).projectionColumnState,
-        )
-        .includes(projectionColumnState) ||
-      postFilterColumnStates.includes(projectionColumnState);
+    const isRemovalDisabled = tdsState.isColumnInUse(projectionColumnState);
 
     const removeColumn = (): void =>
       tdsState.removeColumn(projectionColumnState);
@@ -258,9 +241,7 @@ const QueryBuilderProjectionColumnEditor = observer(
       event,
     ) => projectionColumnState.setColumnName(event.target.value);
     const isDuplicatedColumnName =
-      projectionColumnState.tdsState.projectionColumns.filter(
-        (column) => column.columnName === projectionColumnState.columnName,
-      ).length > 1;
+      projectionColumnState.tdsState.isDuplicateColumn(projectionColumnState);
 
     // aggregation
     const aggregateColumnState = tdsState.aggregationState.columns.find(
@@ -415,7 +396,6 @@ const QueryBuilderProjectionColumnEditor = observer(
                     )}
                   </div>
                 )}
-
                 <DropdownMenu
                   className="query-builder__projection__column__aggregate__operator__dropdown"
                   title="Choose Aggregate Operator..."
@@ -472,7 +452,8 @@ const QueryBuilderProjectionColumnEditor = observer(
                 disabled={isRemovalDisabled}
                 title={
                   isRemovalDisabled
-                    ? "This column is used in the post filter and can't be removed"
+                    ? // TODO: We may want to provide a list of all places where column is in use
+                      "This column is used and can't be removed"
                     : 'Remove'
                 }
               >

package/src/components/shared/LambdaEditor.tsx

@@ -19,9 +19,8 @@ import { editor as monacoEditorAPI, type IDisposable } from 'monaco-editor';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
-  setErrorMarkers,
   disposeEditor,
-  baseTextEditorSettings,
+  getBaseTextEditorOptions,
   getEditorValue,
   normalizeLineEnding,
   FilledWindowMaximizeIcon,
@@ -29,6 +28,8 @@ import {
   LongArrowAltUpIcon,
   Dialog,
   useResizeDetector,
+  clearMarkers,
+  setErrorMarkers,
 } from '@finos/legend-art';
 import type { LambdaEditorState } from '../../stores/shared/LambdaEditorState.js';
 import {
@@ -178,7 +179,7 @@ const LambdaEditorInline = observer(
                 scrollbar: { vertical: 'hidden' },
               };
         const _editor = monacoEditorAPI.create(element, {
-          ...baseTextEditorSettings,
+          ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
           theme: applicationStore.TEMPORARY__isLightThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
@@ -309,16 +310,17 @@ const LambdaEditorInline = observer(
         editorModel.updateOptions({ tabSize: TAB_SIZE });
         const error = parserError ?? compilationError;
         if (error?.sourceInformation) {
-          setErrorMarkers(
-            editorModel,
-            error.message,
-            error.sourceInformation.startLine,
-            error.sourceInformation.startColumn,
-            error.sourceInformation.endLine,
-            error.sourceInformation.endColumn,
-          );
+          setErrorMarkers(editorModel, [
+            {
+              message: error.message,
+              startLineNumber: error.sourceInformation.startLine,
+              startColumn: error.sourceInformation.startColumn,
+              endLineNumber: error.sourceInformation.endLine,
+              endColumn: error.sourceInformation.endColumn,
+            },
+          ]);
         } else {
-          monacoEditorAPI.setModelMarkers(editorModel, 'Error', []);
+          clearMarkers();
         }
       }
     }
@@ -461,7 +463,7 @@ const LambdaEditorPopUp = observer(
       if (!editor && textInputRef.current) {
         const element = textInputRef.current;
         const _editor = monacoEditorAPI.create(element, {
-          ...baseTextEditorSettings,
+          ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
           theme: EDITOR_THEME.LEGEND,
         });
@@ -544,16 +546,17 @@ const LambdaEditorPopUp = observer(
         editorModel.updateOptions({ tabSize: TAB_SIZE });
         const error = parserError ?? compilationError;
         if (error?.sourceInformation) {
-          setErrorMarkers(
-            editorModel,
-            error.message,
-            error.sourceInformation.startLine,
-            error.sourceInformation.startColumn,
-            error.sourceInformation.endLine,
-            error.sourceInformation.endColumn,
-          );
+          setErrorMarkers(editorModel, [
+            {
+              message: error.message,
+              startLineNumber: error.sourceInformation.startLine,
+              startColumn: error.sourceInformation.startColumn,
+              endLineNumber: error.sourceInformation.endLine,
+              endColumn: error.sourceInformation.endColumn,
+            },
+          ]);
         } else {
-          monacoEditorAPI.setModelMarkers(editorModel, 'Error', []);
+          clearMarkers();
         }
       }
     }

package/src/components/workflows/ServiceQueryBuilder.tsx

@@ -114,7 +114,11 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                 className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
                 placeholder="Choose a service..."
                 options={serviceOptions}
-                disabled={serviceOptions.length <= 1}
+                disabled={
+                  serviceOptions.length < 1 ||
+                  (serviceOptions.length === 1 &&
+                    Boolean(selectedServiceOption))
+                }
                 onChange={onServiceOptionChange}
                 value={selectedServiceOption}
                 darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
@@ -134,7 +138,11 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                     className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
                     placeholder="Choose an execution context..."
                     options={executionContextOptions}
-                    disabled={executionContextOptions.length <= 1}
+                    disabled={
+                      executionContextOptions.length < 1 ||
+                      (executionContextOptions.length === 1 &&
+                        Boolean(selectedExecutionContextOption))
+                    }
                     onChange={onExecutionContextOptionChange}
                     value={selectedExecutionContextOption}
                     darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}

package/src/graphManager/QueryBuilderHashUtils.ts

@@ -61,6 +61,22 @@ export enum QUERY_BUILDER_HASH_STRUCTURE {
   POST_FILTER_OPERATOR_NOT_START_WITH = 'POST_FILTER_OPERATOR_NOT_START_WITH',
   POST_FILTER_STATE = 'POST_FILTER_STATE',
 
+  // OLAPGroup state
+  OLAP_GROUPBY_STATE = 'OLAP_GROUPBY_STATE',
+  OLAP_GROUPBY_OPERATION_STATE = 'OLAP_GROUPBY_OPERATION_STATE',
+  OLAP_GROUPBY_AGG_OPERATION_STATE = 'OLAP_GROUPBY_AGG_OPERATION_STATE',
+  OLAP_GROUPBY_COLUMN_STATE = 'OLAP_GROUPBY_COLUMN_STATE',
+  OLAP_GROUPBY_COLUMN_SORTBY_STATE = 'OLAP_GROUPBY_COLUMN_SORTBY_STATE',
+  OLAP_OPERATOR_RANK = 'OLAP_OPERATOR_RANK',
+  OLAP_OPERATOR_AVERAGE_RANK = 'OLAP_OPERATOR_AVERAGE_RANK',
+  OLAP_OPERATOR_DENSE_RANK = 'OLAP_OPERATOR_DENSE_RANK',
+  OLAP_OPERATOR_ROW_NUMBER = 'OLAP_OPERATOR_ROW_NUMBER',
+  OLAP_OPERATOR_SUM = 'OLAP_OPERATOR_SUM',
+  OLAP_OPERATOR_MAX = 'OLAP_OPERATOR_MAX',
+  OLAP_OPERATOR_MIN = 'OLAP_OPERATOR_MIN',
+  OLAP_OPERATOR_COUNT = 'OLAP_OPERATOR_COUNT',
+  OLAP_OPERATOR_AVERAGE = 'OLAP_OPERATOR_AVERAGE',
+
   // filter state
   FILTER_TREE_GROUP_NODE_DATA = 'FILTER_TREE_GROUP_NODE_DATA',
   FILTER_TREE_CONDIITION_NODE_DATA = 'FILTER_TREE_CONDITION_NODE_DATA',

package/src/graphManager/QueryBuilderSupportedFunctions.ts

@@ -39,6 +39,7 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   TDS_GROUP_BY = 'meta::pure::tds::groupBy',
   TDS_SORT = 'meta::pure::tds::sort',
   TDS_TAKE = 'meta::pure::tds::take',
+  TDS_FUNC = 'meta::pure::tds::func',
 
   // filter
   CONTAINS = 'meta::pure::functions::string::contains',
@@ -64,4 +65,10 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   STD_DEV_SAMPLE = 'meta::pure::functions::math::stdDevSample',
   SUM = 'meta::pure::functions::math::sum',
   UNIQUE_VALUE_ONLY = 'meta::pure::functions::collection::uniqueValueOnly',
+  // OLAP
+  OLAP_GROUPBY = 'meta::pure::tds::olapGroupBy',
+  OLAP_RANK = 'meta::pure::functions::math::olap::rank',
+  OLAP_AVERAGE_RANK = 'meta::pure::functions::math::olap::averageRank',
+  OLAP_DENSE_RANK = 'meta::pure::functions::math::olap::denseRank',
+  OLAP_ROW_NUMBER = 'meta::pure::functions::math::olap::rowNumber',
 }