@finos/legend-query-builder 4.1.3 → 4.1.4

package/lib/stores/shared/LambdaEditorState.js

@@ -50,9 +50,14 @@ export class LambdaEditorState {
     setLambdaString(val) {
         this.lambdaString = val;
     }
-    clearErrors() {
-        this.setCompilationError(undefined);
+    clearErrors(options) {
         this.setParserError(undefined);
+        if (options?.preserveCompilationError && this.compilationError) {
+            this.compilationError.sourceInformation = undefined;
+        }
+        else {
+            this.setCompilationError(undefined);
+        }
     }
     setCompilationError(compilationError) {
         // account for the lambda prefix offset in source information

package/lib/stores/shared/LambdaEditorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"LambdaEditorState.js","sourceRoot":"","sources":["../../../src/stores/shared/LambdaEditorState.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"LambdaEditorState.js","sourceRoot":"","sources":["../../../src/stores/shared/LambdaEditorState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,15 +42,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.27",
-    "@finos/legend-art": "7.0.27",
-    "@finos/legend-graph": "30.0.12",
-    "@finos/legend-lego": "1.1.4",
-    "@finos/legend-server-depot": "6.0.16",
-    "@finos/legend-shared": "10.0.15",
-    "@finos/legend-storage": "3.0.65",
+    "@finos/legend-application": "15.0.28",
+    "@finos/legend-art": "7.0.28",
+    "@finos/legend-graph": "30.0.13",
+    "@finos/legend-lego": "1.1.5",
+    "@finos/legend-server-depot": "6.0.17",
+    "@finos/legend-shared": "10.0.16",
+    "@finos/legend-storage": "3.0.66",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.13",
+    "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "chart.js": "4.3.0",
     "mathjs": "11.8.2",
@@ -65,15 +65,15 @@
     "sql-formatter": "12.2.3"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.70",
+    "@finos/legend-dev-utils": "2.0.71",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
-    "eslint": "8.43.0",
+    "eslint": "8.44.0",
     "jest": "29.5.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
     "sass": "1.63.6",
-    "typescript": "5.1.3"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
     "react": "^18.0.0"

package/src/components/QueryBuilderTextEditor.tsx

@@ -54,7 +54,9 @@ export const QueryBuilderTextEditor = observer(
     const mode = queryTextEditorState.mode;
     useEffect(() => {
       flowResult(
-        queryTextEditorState.convertLambdaObjectToGrammarString(true),
+        queryTextEditorState.convertLambdaObjectToGrammarString({
+          pretty: true,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     }, [applicationStore, queryTextEditorState]);
 

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

@@ -166,12 +166,16 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
           : QUERY_BUILDER_GROUP_OPERATION.AND,
       );
     };
+
+    const operationName =
+      node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
+
     return (
       <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           isDroppable={isDroppable}
-          label="Add to Logical Group"
+          label={`Add to Logical Group '${operationName}'`}
         >
           <div
             className={clsx('query-builder-post-filter-tree__group-node', {

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

@@ -324,12 +324,25 @@ const buildCalendarTypeOption = (
 });
 
 const QueryBuilderProjectionColumnEditor = observer(
-  (props: { projectionColumnState: QueryBuilderProjectionColumnState }) => {
-    const { projectionColumnState } = props;
-    const columnIdx = projectionColumnState.tdsState.tdsColumns.indexOf(
+  (props: {
+    projectionColumnState: QueryBuilderProjectionColumnState;
+    isRearrangeActive: boolean;
+    currentRearrangeDraggedColumnIndex: number | undefined;
+    setCurrentRearrangeDraggedColumnIndex: (val: number | undefined) => void;
+    currentRearrangeDropGapIndex: number | undefined;
+    setCurrentRearrangeDropGapIndex: (val: number | undefined) => void;
+    columnIdx: number;
+  }) => {
+    const {
+      isRearrangeActive,
       projectionColumnState,
-    );
-    const handleRef = useRef<HTMLDivElement>(null);
+      columnIdx,
+      currentRearrangeDraggedColumnIndex,
+      setCurrentRearrangeDraggedColumnIndex,
+      currentRearrangeDropGapIndex,
+      setCurrentRearrangeDropGapIndex,
+    } = props;
+    const dragHandleRef = useRef<HTMLDivElement>(null);
     const applicationStore = useApplicationStore();
     const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
@@ -405,6 +418,7 @@ const QueryBuilderProjectionColumnEditor = observer(
         aggregateColumnState?.calendarFunction?.setCalendarType(option.value);
       }
     };
+
     const defaultEndDate = observe_PrimitiveInstanceValue(
       new PrimitiveInstanceValue(
         GenericTypeExplicitReference.create(
@@ -484,17 +498,26 @@ const QueryBuilderProjectionColumnEditor = observer(
       (type: string): void => {
         if (
           type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE &&
-          tdsState.draggedColumnIndex !== undefined &&
-          tdsState.hoveredColumnIndex !== undefined
+          currentRearrangeDropGapIndex !== undefined &&
+          currentRearrangeDraggedColumnIndex !== undefined
         ) {
           tdsState.moveColumn(
-            tdsState.draggedColumnIndex,
-            tdsState.hoveredColumnIndex,
+            currentRearrangeDraggedColumnIndex,
+            currentRearrangeDropGapIndex === tdsState.projectionColumns.length
+              ? tdsState.projectionColumns.length - 1
+              : currentRearrangeDropGapIndex,
           );
         }
-        tdsState.setRearrangeColumnsIndex(undefined, undefined);
+        setCurrentRearrangeDraggedColumnIndex(undefined);
+        setCurrentRearrangeDropGapIndex(undefined);
       },
-      [tdsState],
+      [
+        tdsState,
+        currentRearrangeDropGapIndex,
+        currentRearrangeDraggedColumnIndex,
+        setCurrentRearrangeDraggedColumnIndex,
+        setCurrentRearrangeDropGapIndex,
+      ],
     );
 
     // Drag and Drop
@@ -506,36 +529,47 @@ const QueryBuilderProjectionColumnEditor = observer(
         const dragIndex = tdsState.projectionColumns.findIndex(
           (e) => e === item.columnState,
         );
-        const hoverIndex = tdsState.projectionColumns.findIndex(
-          (e) => e === projectionColumnState,
-        );
+        const hoveredRectangle = ref.current?.getBoundingClientRect();
+        const hoveredRectangleMiddle =
+          hoveredRectangle?.top && hoveredRectangle.bottom
+            ? (hoveredRectangle.top + hoveredRectangle.bottom) / 2
+            : undefined;
+        const yCoordinate = monitor.getClientOffset()?.y ?? 0;
 
-        if (dragIndex === hoverIndex) {
-          tdsState.setRearrangeColumnsIndex(undefined, hoverIndex);
+        if (yCoordinate && hoveredRectangleMiddle) {
+          setCurrentRearrangeDropGapIndex(
+            yCoordinate < hoveredRectangleMiddle ? columnIdx : columnIdx + 1,
+          );
         }
 
-        if (dragIndex === -1 || hoverIndex === -1 || dragIndex === hoverIndex) {
-          return;
-        }
         // move the item being hovered on when the dragged item position is beyond the its middle point
         const hoverBoundingReact = ref.current?.getBoundingClientRect();
-
         const distanceThreshold =
           ((hoverBoundingReact?.bottom ?? 0) - (hoverBoundingReact?.top ?? 0)) /
           2;
-        const dragDistance =
-          (monitor.getClientOffset()?.y ?? 0) - (hoverBoundingReact?.top ?? 0);
-        if (dragIndex < hoverIndex && dragDistance < distanceThreshold) {
+        const dragDistance = yCoordinate - (hoverBoundingReact?.top ?? 0);
+
+        if (dragIndex === -1 || columnIdx === -1 || dragIndex === columnIdx) {
+          return;
+        }
+
+        if (dragIndex < columnIdx && dragDistance < distanceThreshold) {
           return;
         }
-        if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
+        if (dragIndex > columnIdx && dragDistance > distanceThreshold) {
           return;
         }
 
-        tdsState.setRearrangeColumnsIndex(dragIndex, hoverIndex);
+        setCurrentRearrangeDraggedColumnIndex(dragIndex);
       },
-      [projectionColumnState, tdsState],
+      [
+        tdsState,
+        columnIdx,
+        setCurrentRearrangeDropGapIndex,
+        setCurrentRearrangeDraggedColumnIndex,
+      ],
     );
+
     const [, dropConnector] = useDrop<QueryBuilderProjectionColumnDragSource>(
       () => ({
         accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
@@ -580,11 +614,7 @@ const QueryBuilderProjectionColumnEditor = observer(
       [projectionColumnState],
     );
 
-    const isBeingDragged =
-      columnIdx === tdsState.hoveredColumnIndex &&
-      projectionColumnBeingDragged !== undefined;
-
-    dragConnector(handleRef);
+    dragConnector(dragHandleRef);
     dropConnector(ref);
 
     useDragPreviewLayer(dragPreviewConnector);
@@ -647,22 +677,24 @@ const QueryBuilderProjectionColumnEditor = observer(
     return (
       <PanelDnDEntry
         ref={ref}
-        // TODO: this is the more appropriate solution than what we did
-        // before and in other places for rearrange because it does no
-        // rearrange while on hovering, but on drop, there's some work to
-        // do about the drop location indicator though
-        // See https://github.com/finos/legend-studio/pull/2330
         placeholder={
           <div
-            className={
-              (tdsState.hoveredColumnIndex ?? 0) >
-              (tdsState.draggedColumnIndex ?? 0)
-                ? 'query-builder__projection__column__placeholder--bottom'
-                : 'query-builder__projection__column__placeholder--top'
-            }
+            className={clsx(
+              {
+                'query-builder__projection__column__placeholder--bottom':
+                  currentRearrangeDropGapIndex === columnIdx + 1 &&
+                  columnIdx === tdsState.projectionColumns.length - 1,
+              },
+              {
+                'query-builder__projection__column__placeholder--top':
+                  currentRearrangeDropGapIndex === columnIdx,
+              },
+            )}
           />
         }
-        showPlaceholder={isBeingDragged}
+        showPlaceholder={
+          projectionColumnBeingDragged !== undefined && isRearrangeActive
+        }
         className="query-builder__projection__column"
       >
         <ContextMenu
@@ -687,8 +719,8 @@ const QueryBuilderProjectionColumnEditor = observer(
         >
           <div className="query-builder__projection__column__container">
             <PanelEntryDragHandle
-              isDragging={isBeingDragged}
-              dragSourceConnector={handleRef}
+              isDragging={false}
+              dragSourceConnector={dragHandleRef}
               className="query-builder__projection__column__drag-handle__container"
             />
             <div className="query-builder__projection__column__name">
@@ -904,6 +936,12 @@ export const QueryBuilderTDSPanel = observer(
     const applicationStore = useApplicationStore();
     const { tdsState } = props;
     const projectionColumns = tdsState.projectionColumns;
+    const [
+      currentRearrangeDraggedColumnIndex,
+      setCurrentRearrangeDraggedColumnIndex,
+    ] = useState<number | undefined>();
+    const [currentRearrangeDropGapIndex, setCurrentRearrangeDropGapIndex] =
+      useState<number | undefined>();
 
     // Toolbar
     const openResultSetModifierEditor = (): void =>
@@ -986,15 +1024,15 @@ export const QueryBuilderTDSPanel = observer(
       [handleDrop],
     );
 
-    const [, projectionColumnDropConnector] = useDrop<
+    const [{ isRearrangeActive }, rearrangeColumnDropConnector] = useDrop<
       QueryBuilderProjectionColumnDragSource,
       void,
-      { isOverProjectionColumns: boolean }
+      { isRearrangeActive: boolean }
     >(
       () => ({
         accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
         collect: (monitor) => ({
-          isOverProjectionColumns: monitor.isOver({ shallow: false }),
+          isRearrangeActive: monitor.isOver({ shallow: false }),
         }),
       }),
       [],
@@ -1065,24 +1103,39 @@ export const QueryBuilderTDSPanel = observer(
               <div
                 data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS}
                 className="query-builder__projection__columns"
-                ref={projectionColumnDropConnector}
               >
-                <DragPreviewLayer
-                  labelGetter={(
-                    item: QueryBuilderProjectionColumnDragSource,
-                  ): string =>
-                    item.columnState.columnName === ''
-                      ? '(unknown)'
-                      : item.columnState.columnName
-                  }
-                  types={[QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE]}
-                />
-                {projectionColumns.map((projectionColumnState) => (
-                  <QueryBuilderProjectionColumnEditor
-                    key={projectionColumnState.uuid}
-                    projectionColumnState={projectionColumnState}
+                <div ref={rearrangeColumnDropConnector}>
+                  <DragPreviewLayer
+                    labelGetter={(
+                      item: QueryBuilderProjectionColumnDragSource,
+                    ): string =>
+                      item.columnState.columnName === ''
+                        ? '(unknown)'
+                        : item.columnState.columnName
+                    }
+                    types={[QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE]}
                   />
-                ))}
+                  {projectionColumns.map((projectionColumnState, columnIdx) => (
+                    <QueryBuilderProjectionColumnEditor
+                      key={projectionColumnState.uuid}
+                      projectionColumnState={projectionColumnState}
+                      isRearrangeActive={isRearrangeActive}
+                      currentRearrangeDraggedColumnIndex={
+                        currentRearrangeDraggedColumnIndex
+                      }
+                      currentRearrangeDropGapIndex={
+                        currentRearrangeDropGapIndex
+                      }
+                      setCurrentRearrangeDraggedColumnIndex={
+                        setCurrentRearrangeDraggedColumnIndex
+                      }
+                      setCurrentRearrangeDropGapIndex={
+                        setCurrentRearrangeDropGapIndex
+                      }
+                      columnIdx={columnIdx}
+                    />
+                  ))}
+                </div>
               </div>
             )}
             <QueryResultModifierModal tdsState={tdsState} />

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -118,12 +118,16 @@ const QueryBuilderFilterGroupConditionEditor = observer(
           : QUERY_BUILDER_GROUP_OPERATION.AND,
       );
     };
+
+    const operationName =
+      node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
+
     return (
       <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
         <PanelEntryDropZonePlaceholder
           isDragOver={isDragOver}
           isDroppable={isDroppable}
-          label="Add to Logical Group"
+          label={`Add to Logical Group '${operationName}'`}
         >
           <div
             className={clsx('query-builder-filter-tree__group-node', {

package/src/components/shared/LambdaEditor.tsx

@@ -140,7 +140,9 @@ const LambdaEditor_Inner = observer(
     const transformLambdaToString = async (pretty: boolean): Promise<void> => {
       transformStringToLambda?.cancel();
       return flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(pretty),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: pretty,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     };
     const discardChanges = applicationStore.guardUnhandledError(() =>
@@ -447,7 +449,9 @@ const LambdaEditor_PopUp = observer(
     const transformLambdaToString = async (pretty: boolean): Promise<void> => {
       transformStringToLambda?.cancel();
       return flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(pretty),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: pretty,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     };
     const discardChanges = applicationStore.guardUnhandledError(() =>
@@ -554,7 +558,10 @@ const LambdaEditor_PopUp = observer(
 
     useEffect(() => {
       flowResult(
-        lambdaEditorState.convertLambdaObjectToGrammarString(true),
+        lambdaEditorState.convertLambdaObjectToGrammarString({
+          pretty: true,
+          preserveCompilationError: true,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     }, [applicationStore, lambdaEditorState]);
 

package/src/stores/QueryBuilderTextEditorState.ts

@@ -129,7 +129,9 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
     }
   }
 
-  *convertLambdaObjectToGrammarString(pretty: boolean): GeneratorFn<void> {
+  *convertLambdaObjectToGrammarString(options: {
+    pretty?: boolean | undefined;
+  }): GeneratorFn<void> {
     if (this.rawLambdaState.lambda.body) {
       this.isConvertingLambdaToString = true;
       try {
@@ -144,7 +146,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
         const isolatedLambdas =
           (yield this.queryBuilderState.graphManagerState.graphManager.lambdasToPureCode(
             lambdas,
-            pretty,
+            options.pretty,
           )) as Map<string, string>;
         const grammarText = isolatedLambdas.get(this.lambdaId);
         this.setLambdaString(

package/src/stores/QueryLoaderState.ts

@@ -24,12 +24,14 @@ import {
   type QueryInfo,
   type BasicGraphManagerState,
   type Query,
+  GRAPH_MANAGER_EVENT,
 } from '@finos/legend-graph';
 import {
   ActionState,
   type GeneratorFn,
   assertErrorThrown,
   guaranteeNonNullable,
+  LogEvent,
 } from '@finos/legend-shared';
 import { makeObservable, observable, action, flow } from 'mobx';
 import type { QueryBuilderState } from './QueryBuilderState.js';
@@ -62,6 +64,7 @@ export class QueryLoaderState {
   readonly isReadOnly?: boolean | undefined;
   readonly onQueryRenamed?: ((query: LightQuery) => void) | undefined;
   readonly onQueryDeleted?: ((query: LightQuery) => void) | undefined;
+  readonly handleFetchDefaultQueriesFailure?: (() => void) | undefined;
 
   queryBuilderState?: QueryBuilderState | undefined;
 
@@ -93,6 +96,7 @@ export class QueryLoaderState {
       isReadOnly?: boolean | undefined;
       onQueryRenamed?: ((query: LightQuery) => void) | undefined;
       onQueryDeleted?: ((query: LightQuery) => void) | undefined;
+      handleFetchDefaultQueriesFailure?: (() => void) | undefined;
     },
   ) {
     makeObservable(this, {
@@ -126,6 +130,8 @@ export class QueryLoaderState {
     this.isReadOnly = options.isReadOnly;
     this.onQueryRenamed = options.onQueryRenamed;
     this.onQueryDeleted = options.onQueryDeleted;
+    this.handleFetchDefaultQueriesFailure =
+      options.handleFetchDefaultQueriesFailure;
   }
 
   setSearchText(val: string): void {
@@ -190,7 +196,11 @@ export class QueryLoaderState {
         } catch (error) {
           this.searchQueriesState.fail();
           assertErrorThrown(error);
-          this.applicationStore.notificationService.notifyError(error);
+          this.applicationStore.logService.error(
+            LogEvent.create(GRAPH_MANAGER_EVENT.GET_QUERY_FAILURE),
+            error,
+          );
+          this.handleFetchDefaultQueriesFailure?.();
         }
       }
 

package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts

@@ -121,8 +121,6 @@ export class QueryBuilderTDSState
   isConvertDerivationProjectionObjects = false;
   showPostFilterPanel: boolean;
   showWindowFuncPanel = false;
-  draggedColumnIndex: number | undefined;
-  hoveredColumnIndex: number | undefined;
 
   postFilterOperators: QueryBuilderPostFilterOperator[] =
     getQueryBuilderCorePostFilterOperators();
@@ -144,14 +142,11 @@ export class QueryBuilderTDSState
       isConvertDerivationProjectionObjects: observable,
       showPostFilterPanel: observable,
       showWindowFuncPanel: observable,
-      draggedColumnIndex: observable,
-      hoveredColumnIndex: observable,
       TEMPORARY__showPostFetchStructurePanel: computed,
       derivations: computed,
       hasParserError: computed,
       addColumn: action,
       moveColumn: action,
-      setRearrangeColumnsIndex: action,
       replaceColumn: action,
       initialize: action,
       setShowPostFilterPanel: action,
@@ -159,9 +154,6 @@ export class QueryBuilderTDSState
       convertDerivationProjectionObjects: flow,
     });
 
-    this.draggedColumnIndex = undefined;
-    this.hoveredColumnIndex = undefined;
-
     this.resultSetModifierState = new QueryResultSetModifierState(this);
     this.postFilterState = new QueryBuilderPostFilterState(
       this,
@@ -182,14 +174,6 @@ export class QueryBuilderTDSState
       ) ?? false;
   }
 
-  setRearrangeColumnsIndex(
-    draggedColumnIndex: number | undefined,
-    hoveredColumnIndex: number | undefined,
-  ): void {
-    this.draggedColumnIndex = draggedColumnIndex;
-    this.hoveredColumnIndex = hoveredColumnIndex;
-  }
-
   get type(): string {
     return FETCH_STRUCTURE_IMPLEMENTATION.TABULAR_DATA_STRUCTURE;
   }
@@ -481,7 +465,9 @@ export class QueryBuilderTDSState
     // convert to grammar for display
     flowResult(
       derivationColumnState.derivationLambdaEditorState.convertLambdaObjectToGrammarString(
-        false,
+        {
+          pretty: false,
+        },
       ),
     ).catch(this.queryBuilderState.applicationStore.alertUnhandledError);
   }

package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.ts

@@ -226,7 +226,10 @@ class QueryBuilderDerivationProjectionLambdaState extends LambdaEditorState {
     }
   }
 
-  *convertLambdaObjectToGrammarString(pretty: boolean): GeneratorFn<void> {
+  *convertLambdaObjectToGrammarString(options?: {
+    pretty?: boolean | undefined;
+    preserveCompilationError?: boolean | undefined;
+  }): GeneratorFn<void> {
     if (this.derivationProjectionColumnState.lambda.body) {
       try {
         const lambdas = new Map<string, RawLambda>();
@@ -240,7 +243,7 @@ class QueryBuilderDerivationProjectionLambdaState extends LambdaEditorState {
         const isolatedLambdas =
           (yield this.queryBuilderState.graphManagerState.graphManager.lambdasToPureCode(
             lambdas,
-            pretty,
+            options?.pretty,
           )) as Map<string, string>;
         const grammarText = isolatedLambdas.get(this.lambdaId);
         this.setLambdaString(
@@ -248,7 +251,9 @@ class QueryBuilderDerivationProjectionLambdaState extends LambdaEditorState {
             ? this.extractLambdaString(grammarText)
             : '',
         );
-        this.clearErrors();
+        this.clearErrors({
+          preserveCompilationError: options?.preserveCompilationError,
+        });
       } catch (error) {
         assertErrorThrown(error);
         this.queryBuilderState.applicationStore.logService.error(

package/src/stores/shared/LambdaEditorState.ts

@@ -64,9 +64,15 @@ export abstract class LambdaEditorState {
     this.lambdaString = val;
   }
 
-  clearErrors(): void {
-    this.setCompilationError(undefined);
+  clearErrors(options?: {
+    preserveCompilationError?: boolean | undefined;
+  }): void {
     this.setParserError(undefined);
+    if (options?.preserveCompilationError && this.compilationError) {
+      this.compilationError.sourceInformation = undefined;
+    } else {
+      this.setCompilationError(undefined);
+    }
   }
 
   setCompilationError(compilationError: CompilationError | undefined): void {
@@ -113,7 +119,8 @@ export abstract class LambdaEditorState {
   }
 
   abstract convertLambdaGrammarStringToObject(): GeneratorFn<void>;
-  abstract convertLambdaObjectToGrammarString(
-    pretty: boolean,
-  ): GeneratorFn<void>;
+  abstract convertLambdaObjectToGrammarString(options?: {
+    pretty?: boolean | undefined;
+    preserveCompilationError?: boolean | undefined;
+  }): GeneratorFn<void>;
 }