@finos/legend-query-builder 0.0.2 → 0.1.1

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -42,6 +42,7 @@ import {
   DragPreviewLayer,
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
+  PanelContent,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFilterConditionDragSource,
@@ -148,12 +149,8 @@ const QueryBuilderFilterConditionEditor = observer(
     ): void =>
       node.condition.changeProperty(
         buildPropertyExpressionFromExplorerTreeNodeData(
-          node.condition.filterState.queryBuilderState.explorerState
-            .nonNullableTreeData,
           propertyNode,
-          graph,
-          node.condition.filterState.queryBuilderState.explorerState
-            .propertySearchState.allMappedPropertyNodes,
+          node.condition.filterState.queryBuilderState.explorerState,
         ),
       );
     // Drag and Drop on filter condition value
@@ -402,11 +399,8 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             filterConditionState = new FilterConditionState(
               filterState,
               buildPropertyExpressionFromExplorerTreeNodeData(
-                filterState.queryBuilderState.explorerState.nonNullableTreeData,
                 dropNode,
-                filterState.queryBuilderState.graphManagerState.graph,
-                filterState.queryBuilderState.explorerState.propertySearchState
-                  .allMappedPropertyNodes,
+                filterState.queryBuilderState.explorerState,
               ),
             );
           } catch (error) {
@@ -729,11 +723,8 @@ export const QueryBuilderFilterPanel = observer(
           } else {
             propertyExpression =
               buildPropertyExpressionFromExplorerTreeNodeData(
-                filterState.queryBuilderState.explorerState.nonNullableTreeData,
                 (item as QueryBuilderExplorerTreeDragSource).node,
-                filterState.queryBuilderState.graphManagerState.graph,
-                filterState.queryBuilderState.explorerState.propertySearchState
-                  .allMappedPropertyNodes,
+                filterState.queryBuilderState.explorerState,
               );
           }
           filterConditionState = new FilterConditionState(
@@ -861,7 +852,7 @@ export const QueryBuilderFilterPanel = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -884,7 +875,7 @@ export const QueryBuilderFilterPanel = observer(
               </>
             )}
           </PanelDropZone>
-        </div>
+        </PanelContent>
       </div>
     );
   },

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -19,6 +19,8 @@ import {
   type AbstractProperty,
   DerivedProperty,
   getMultiplicityDescription,
+  CORE_PURE_PATH,
+  PURE_DOC_TAG,
 } from '@finos/legend-graph';
 
 export const QueryBuilderPropertyInfoTooltip: React.FC<{
@@ -29,6 +31,15 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
   placement?: TooltipPlacement | undefined;
 }> = (props) => {
   const { property, path, isMapped, children, placement } = props;
+  const documentation = property.taggedValues
+    .filter(
+      (taggedValue) =>
+        taggedValue.tag.ownerReference.value.path ===
+          CORE_PURE_PATH.PROFILE_DOC &&
+        taggedValue.tag.value.value === PURE_DOC_TAG,
+    )
+    .map((taggedValue) => taggedValue.value);
+
   return (
     <Tooltip
       arrow={true}
@@ -78,6 +89,17 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
               {isMapped ? 'Yes' : 'No'}
             </div>
           </div>
+
+          {Boolean(documentation.length) && (
+            <div className="query-builder__tooltip__item">
+              <div className="query-builder__tooltip__item__label">
+                Documentation
+              </div>
+              <div className="query-builder__tooltip__item__value">
+                {documentation.join('\n\n')}
+              </div>
+            </div>
+          )}
         </div>
       }
     >

package/src/graphManager/QueryBuilderHashUtils.ts

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+export enum QUERY_BUILDER_HASH_STRUCTURE {
+  // parameters state
+  PARAMETERS_STATE = 'PARAMETERS_STATE',
+
+  // projection state
+  AGGREGATE_OPERATOR_AVERAGE = 'AGGREGATE_OPERATOR_AVERAGE',
+  AGGREGATE_OPERATOR_COUNT = 'AGGREGATE_OPERATOR_COUNT',
+  AGGREGATE_OPERATOR_DISTINCT = 'AGGREGATE_OPERATOR_DISTINCT',
+  AGGREGATE_OPERATOR_DISTINCT_COUNT = 'AGGREGATE_OPERATOR_DISTINCT_COUNT',
+  AGGREGATE_OPERATOR_JOIN_STRING = 'AGGREGATE_OPERATOR_JOIN_STRING',
+  AGGREGATE_OPERATOR_MAX = 'AGGREGATE_OPERATOR_MAX',
+  AGGREGATE_OPERATOR_MIN = 'AGGREGATE_OPERATOR_MIN',
+  AGGREGATE_OPERATOR_STD_DEV_POPULATION = 'AGGREGATE_OPERATOR_STD_DEV_POPULATION',
+  AGGREGATE_OPERATOR_STD_DEV_SAMPLE = 'AGGREGATE_OPERATOR_STD_DEV_SAMPLE',
+  AGGREGATE_OPERATOR_SUM = 'AGGREGATE_OPERATOR_SUM',
+  AGGREGATE_COLUMN_STATE = 'AGGREGATE_COLUMN_STATE',
+  AGGREGATION_STATE = 'AGGREGATION_STATE',
+  SIMPLE_PROJECTION_COLUMN_STATE = 'SIMPLE_PROJECTION_COLUMN_STATE',
+  PROPERTY_EXPRESSION_STATE = 'PROPERTY_EXPRESSION_STATE',
+  DERIVATION_PROJECTION_COLUMN_STATE = 'DERIVATION_PROJECTION_COLUMN_STATE',
+  RESULT_SET_MODIFIER_STATE = 'RESULT_SET_MODIFIER_STATE',
+  SORT_COLUMN_STATE = 'SORT_COLUMN_STATE',
+  PROJECTION_STATE = 'PROJECTION_STATE',
+
+  // post-filter
+  POST_FILTER_TREE_GROUP_NODE_DATA = 'POST_FILTER_TREE_GROUP_NODE_DATA',
+  POST_FILTER_TREE_CONDIITION_NODE_DATA = 'POST_FILTER_TREE_CONDITION_NODE_DATA',
+  POST_FILTER_TREE_BLANK_CONDITION_NODE_DATA = 'POST_FILTER_TREE_BLANK_CONDITION_NODE_DATA',
+  POST_FILTER_CONDITION_STATE = 'POST_FILTER_CONDITION_STATE',
+  POST_FILTER_OPERATOR_CONTAIN = 'POST_FILTER_OPERATOR_CONTAIN',
+  POST_FILTER_OPERATOR_NOT_CONTAIN = 'POST_FILTER_OPERATOR_NOT_CONTAIN',
+  POST_FILTER_OPERATOR_END_WITH = 'POST_FILTER_OPERATOR_END_WITH',
+  POST_FILTER_OPERATOR_NOT_END_WITH = 'POST_FILTER_OPERATOR_NOT_END_WITH',
+  POST_FILTER_OPERATOR_EQUAL = 'POST_FILTER_OPERATOR_EQUAL',
+  POST_FILTER_OPERATOR_NOT_EQUAL = 'POST_FILTER_OPERATOR_NOT_EQUAL',
+  POST_FILTER_OPERATOR_GREATER_THAN = 'POST_FILTER_OPERATOR_GREATER_THAN',
+  POST_FILTER_OPERATOR_GREATER_THAN_EQUAL = 'POST_FILTER_OPERATOR_GREATER_THAN_EQUAL',
+  POST_FILTER_OPERATOR_IN = 'POST_FILTER_OPERATOR_IN',
+  POST_FILTER_OPERATOR_NOT_IN = 'POST_FILTER_OPERATOR_IN',
+  POST_FILTER_OPERATOR_IS_EMPTY = 'POST_FILTER_OPERATOR_IS_EMPTY',
+  POST_FILTER_OPERATOR_IS_NOT_EMPTY = 'POST_FILTER_OPERATOR_IS_NOT_EMPTY',
+  POST_FILTER_OPERATOR_LESS_THAN = 'POST_FILTER_OPERATOR_LESS_THAN',
+  POST_FILTER_OPERATOR_LESS_THAN_EQUAL = 'POST_FILTER_OPERATOR_LESS_THAN_EQUAL',
+  POST_FILTER_OPERATOR_START_WITH = 'POST_FILTER_OPERATOR_START_WITH',
+  POST_FILTER_OPERATOR_NOT_START_WITH = 'POST_FILTER_OPERATOR_NOT_START_WITH',
+  POST_FILTER_STATE = 'POST_FILTER_STATE',
+
+  // filter state
+  FILTER_TREE_GROUP_NODE_DATA = 'FILTER_TREE_GROUP_NODE_DATA',
+  FILTER_TREE_CONDIITION_NODE_DATA = 'FILTER_TREE_CONDITION_NODE_DATA',
+  FILTER_TREE_BLANK_CONDITION_NODE_DATA = 'FILTER_TREE_BLANK_CONDITION_NODE_DATA',
+  FILTER_CONDITION_STATE = 'FILTER_CONDITION_STATE',
+  FILTER_OPERATOR_CONTAIN = 'FILTER_OPERATOR_CONTAIN',
+  FILTER_OPERATOR_NOT_CONTAIN = 'FILTER_OPERATOR_NOT_CONTAIN',
+  FILTER_OPERATOR_END_WITH = 'FILTER_OPERATOR_END_WITH',
+  FILTER_OPERATOR_NOT_END_WITH = 'FILTER_OPERATOR_NOT_END_WITH',
+  FILTER_OPERATOR_EQUAL = 'FILTER_OPERATOR_EQUAL',
+  FILTER_OPERATOR_NOT_EQUAL = 'FILTER_OPERATOR_NOT_EQUAL',
+  FILTER_OPERATOR_GREATER_THAN = 'FILTER_OPERATOR_GREATER_THAN',
+  FILTER_OPERATOR_GREATER_THAN_EQUAL = 'FILTER_OPERATOR_GREATER_THAN_EQUAL',
+  FILTER_OPERATOR_IN = 'FILTER_OPERATOR_IN',
+  FILTER_OPERATOR_NOT_IN = 'FILTER_OPERATOR_IN',
+  FILTER_OPERATOR_IS_EMPTY = 'FILTER_OPERATOR_IS_EMPTY',
+  FILTER_OPERATOR_IS_NOT_EMPTY = 'FILTER_OPERATOR_IS_NOT_EMPTY',
+  FILTER_OPERATOR_LESS_THAN = 'FILTER_OPERATOR_LESS_THAN',
+  FILTER_OPERATOR_LESS_THAN_EQUAL = 'FILTER_OPERATOR_LESS_THAN_EQUAL',
+  FILTER_OPERATOR_START_WITH = 'FILTER_OPERATOR_START_WITH',
+  FILTER_OPERATOR_NOT_START_WITH = 'FILTER_OPERATOR_NOT_START_WITH',
+  FILTER_STATE = 'FILTER_STATE',
+
+  // graph fetch state
+  GRAPH_FETCH_STATE = 'GRAPH_FETCH_STATE',
+  GRAPH_FETCH_TREE_NODE_DATA = 'GRAPH_FETCH_TREE_NODE_DATA',
+
+  // general
+  MILESTONING_STATE = 'MILESTONING_STATE',
+  UNSUPPORTED_QUERY_STATE = 'UNSUPPORTED_QUERY_STATE',
+  QUERY_BUILDER_STATE = 'QUERY_BUILDER_STATE',
+}

package/src/index.ts

@@ -21,6 +21,7 @@ export { QUERY_BUILDER_TEST_ID } from './components//QueryBuilder_TestID.js';
 export { QueryBuilder } from './components//QueryBuilder.js';
 export { QueryBuilderState } from './stores//QueryBuilderState.js';
 
+export { QueryBuilderPropertySearchState } from './stores/explorer/QueryBuilderPropertySearchState.js';
 export {
   QueryBuilderClassSelector,
   buildRuntimeValueOption,
@@ -36,3 +37,6 @@ export {
 export { getQueryBuilderGraphManagerExtension } from './graphManager/protocol/pure/QueryBuilder_PureGraphManagerExtension.js';
 export type { ServiceExecutionAnalysisResult } from './graphManager/action/analytics/ServiceExecutionAnalysis.js';
 export type { MappingRuntimeCompatibilityAnalysisResult } from './graphManager/action/analytics/MappingRuntimeCompatibilityAnalysis.js';
+export * from './stores/ServiceInfo.js';
+export * from './components/ServiceQuerySetupUtils.js';
+export * from './components/QuerySetupUtils.js';

package/src/stores/QueryBuilderChangeDetectionState.ts

@@ -14,24 +14,157 @@
  * limitations under the License.
  */
 
-import { RawLambda } from '@finos/legend-graph';
-import { hashObject } from '@finos/legend-shared';
+import {
+  ActionAlertActionType,
+  ActionAlertType,
+} from '@finos/legend-application';
+import type { RawLambda } from '@finos/legend-graph';
+import {
+  ActionState,
+  assertErrorThrown,
+  assertNonNullable,
+  type GeneratorFn,
+} from '@finos/legend-shared';
+import { action, computed, flow, makeObservable, observable } from 'mobx';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 
+export enum QueryBuilderDiffViewMode {
+  JSON = 'JSON',
+  GRAMMAR = 'Grammar',
+}
+
+export class QueryBuilderDiffViewState {
+  readonly changeDetectionState: QueryBuilderChangeDetectionState;
+  readonly initialQuery: RawLambda;
+  readonly currentQuery: RawLambda;
+
+  mode = QueryBuilderDiffViewMode.GRAMMAR;
+  initialQueryGrammarText?: string | undefined;
+  currentQueryGrammarText?: string | undefined;
+
+  constructor(
+    changeDetectionState: QueryBuilderChangeDetectionState,
+    initialQuery: RawLambda,
+    currentQuery: RawLambda,
+  ) {
+    makeObservable(this, {
+      mode: observable,
+      initialQueryGrammarText: observable,
+      currentQueryGrammarText: observable,
+      setMode: action,
+      generateGrammarDiff: flow,
+    });
+
+    this.changeDetectionState = changeDetectionState;
+    this.initialQuery = initialQuery;
+    this.currentQuery = currentQuery;
+  }
+
+  setMode(val: QueryBuilderDiffViewMode): void {
+    this.mode = val;
+  }
+
+  *generateGrammarDiff(): GeneratorFn<void> {
+    try {
+      this.initialQueryGrammarText =
+        (yield this.changeDetectionState.querybuilderState.graphManagerState.graphManager.lambdaToPureCode(
+          this.initialQuery,
+          true,
+        )) as string;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.initialQueryGrammarText =
+        '/* Failed to transform grammar text, see JSON diff instead */';
+    }
+    try {
+      this.currentQueryGrammarText =
+        (yield this.changeDetectionState.querybuilderState.graphManagerState.graphManager.lambdaToPureCode(
+          this.currentQuery,
+          true,
+        )) as string;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.currentQueryGrammarText =
+        '/* Failed to transform grammar text, see JSON diff instead */';
+    }
+  }
+}
+
 export class QueryBuilderChangeDetectionState {
-  querybuildState: QueryBuilderState;
-  queryHashCode = hashObject(new RawLambda(undefined, undefined));
-  isEnabled = false;
+  querybuilderState: QueryBuilderState;
+  initState = ActionState.create();
+  diffViewState?: QueryBuilderDiffViewState | undefined;
+  initialQuery?: RawLambda | undefined;
+  initialHashCode?: string | undefined;
 
   constructor(queryBuilderState: QueryBuilderState) {
-    this.querybuildState = queryBuilderState;
+    makeObservable(this, {
+      diffViewState: observable,
+      initialHashCode: observable,
+      initialQuery: observable,
+      hasChanged: computed,
+      initialize: action,
+      showDiffViewPanel: action,
+      hideDiffViewPanel: action,
+    });
+
+    this.querybuilderState = queryBuilderState;
+  }
+
+  showDiffViewPanel(): void {
+    assertNonNullable(
+      this.initialQuery,
+      `Can't show changes: change detection is not properly initialized`,
+    );
+    this.diffViewState = new QueryBuilderDiffViewState(
+      this,
+      this.initialQuery,
+      this.querybuilderState.buildQuery(),
+    );
+  }
+
+  hideDiffViewPanel(): void {
+    this.diffViewState = undefined;
+  }
+
+  get hasChanged(): boolean {
+    if (!this.initState.hasCompleted) {
+      return false;
+    }
+    return this.querybuilderState.hashCode !== this.initialHashCode;
   }
 
-  setQueryHashCode(val: string): void {
-    this.queryHashCode = val;
+  initialize(initialQuery: RawLambda): void {
+    this.initState.inProgress();
+    this.initialHashCode = this.querybuilderState.hashCode;
+    this.initialQuery = initialQuery;
+    this.initState.complete();
   }
 
-  setIsEnabled(val: boolean): void {
-    this.isEnabled = val;
+  alertUnsavedChanges(onProceed: () => void): void {
+    if (this.hasChanged) {
+      this.querybuilderState.applicationStore.setActionAlertInfo({
+        message:
+          'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
+        type: ActionAlertType.CAUTION,
+        actions: [
+          {
+            label: 'Proceed',
+            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+            handler:
+              this.querybuilderState.applicationStore.guardUnhandledError(
+                async () => onProceed(),
+              ),
+          },
+          {
+            label: 'Cancel',
+            type: ActionAlertActionType.PROCEED,
+            default: true,
+          },
+        ],
+      });
+    } else {
+      onProceed();
+    }
   }
 }

package/src/stores/QueryBuilderConfig.ts

@@ -24,7 +24,9 @@ export const DEFAULT_VARIABLE_NAME = 'var';
 export const DEFAULT_POST_FILTER_LAMBDA_VARIABLE_NAME = 'row';
 
 export const QUERY_BUILDER_PROPERTY_SEARCH_MAX_DEPTH = 5;
+export const QUERY_BUILDER_PROPERTY_SEARCH_MAX_NODES = 10000;
 export const QUERY_BUILDER_PROPERTY_SEARCH_RESULTS_LIMIT = 100;
+
 export enum QUERY_BUILDER_PROPERTY_SEARCH_TYPE {
   CLASS = 'CLASS',
   STRING = 'STRING',

package/src/stores/QueryBuilderMilestoningState.ts

@@ -28,10 +28,12 @@ import {
   VariableExpression,
   type ValueSpecification,
 } from '@finos/legend-graph';
+import { type Hashable, hashArray } from '@finos/legend-shared';
 import { action, computed, makeObservable, observable } from 'mobx';
+import { QUERY_BUILDER_HASH_STRUCTURE } from '../graphManager/QueryBuilderHashUtils.js';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 
-export class QueryBuilderMilestoningState {
+export class QueryBuilderMilestoningState implements Hashable {
   queryBuilderState: QueryBuilderState;
 
   showMilestoningEditor = false;
@@ -49,6 +51,7 @@ export class QueryBuilderMilestoningState {
       setProcessingDate: action,
       setBusinessDate: action,
       setShowMilestoningEditor: action,
+      hashCode: computed,
     });
 
     this.queryBuilderState = queryBuilderState;
@@ -161,4 +164,12 @@ export class QueryBuilderMilestoningState {
     }
     return milestoningParameter;
   }
+
+  get hashCode(): string {
+    return hashArray([
+      QUERY_BUILDER_HASH_STRUCTURE.MILESTONING_STATE,
+      this.businessDate ?? '',
+      this.processingDate ?? '',
+    ]);
+  }
 }

package/src/stores/QueryBuilderParametersState.ts

@@ -18,7 +18,9 @@ import {
   LambdaParametersState,
   type LambdaParameterState,
 } from '@finos/legend-application';
-import { observable, makeObservable, action } from 'mobx';
+import { type Hashable, hashArray } from '@finos/legend-shared';
+import { observable, makeObservable, action, override } from 'mobx';
+import { QUERY_BUILDER_HASH_STRUCTURE } from '../graphManager/QueryBuilderHashUtils.js';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 
 export const QUERY_BUILDER_PARAMETER_DND_TYPE = 'PARAMETER';
@@ -27,12 +29,17 @@ export interface QueryBuilderParameterDragSource {
   variable: LambdaParameterState;
 }
 
-export class QueryBuilderParametersState extends LambdaParametersState {
+export class QueryBuilderParametersState
+  extends LambdaParametersState
+  implements Hashable
+{
+  readonly queryBuilderState: QueryBuilderState;
+
   selectedParameter: LambdaParameterState | undefined;
-  queryBuilderState: QueryBuilderState;
 
   constructor(queryBuilderState: QueryBuilderState) {
     super();
+
     makeObservable(this, {
       parameterValuesEditorState: observable,
       parameterStates: observable,
@@ -41,11 +48,19 @@ export class QueryBuilderParametersState extends LambdaParametersState {
       setParameters: action,
       selectedParameter: observable,
       setSelectedParameter: action,
+      hashCode: override,
     });
 
     this.queryBuilderState = queryBuilderState;
   }
 
+  override get hashCode(): string {
+    return hashArray([
+      QUERY_BUILDER_HASH_STRUCTURE.PARAMETERS_STATE,
+      hashArray(this.parameterStates),
+    ]);
+  }
+
   setSelectedParameter(val: LambdaParameterState | undefined): void {
     this.selectedParameter = val;
   }

package/src/stores/QueryBuilderPropertyEditorState.ts

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import { action, makeAutoObservable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import {
   getNullableFirstElement,
   guaranteeNonNullable,
   guaranteeType,
+  type Hashable,
+  hashArray,
   isCamelCase,
   prettyCamelCase,
   prettyCONSTName,
@@ -59,6 +61,7 @@ import type { QueryBuilderState } from './QueryBuilderState.js';
 import { functionExpression_setParametersValues } from '@finos/legend-application';
 import type { QueryBuilderMilestoningState } from './QueryBuilderMilestoningState.js';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../graphManager/QueryBuilderSupportedFunctions.js';
+import { QUERY_BUILDER_HASH_STRUCTURE } from '../graphManager/QueryBuilderHashUtils.js';
 
 export const getDerivedPropertyMilestoningSteoreotype = (
   property: DerivedProperty,
@@ -556,12 +559,11 @@ export class QueryBuilderDerivedPropertyExpressionState {
   }
 }
 
-export class QueryBuilderPropertyExpressionState {
-  queryBuilderState: QueryBuilderState;
+export class QueryBuilderPropertyExpressionState implements Hashable {
+  readonly queryBuilderState: QueryBuilderState;
+  readonly propertyExpression: AbstractPropertyExpression;
   path: string;
   title: string;
-  readonly propertyExpression: AbstractPropertyExpression;
-
   isEditingDerivedPropertyExpression = false;
   // Since this property is a chain expression, some link of the chain can be
   // derived property, as such, we need to keep track of the derived properties state in an array
@@ -580,13 +582,16 @@ export class QueryBuilderPropertyExpressionState {
     queryBuilderState: QueryBuilderState,
     propertyExpression: AbstractPropertyExpression,
   ) {
-    makeAutoObservable<
+    makeObservable<
       QueryBuilderPropertyExpressionState,
       'initDerivedPropertyExpressionStates'
     >(this, {
-      queryBuilderState: false,
+      isEditingDerivedPropertyExpression: observable,
+      derivedPropertyExpressionStates: observable,
       setIsEditingDerivedProperty: action,
       initDerivedPropertyExpressionStates: action,
+      isValid: computed,
+      hashCode: computed,
     });
 
     this.queryBuilderState = queryBuilderState;
@@ -665,4 +670,11 @@ export class QueryBuilderPropertyExpressionState {
     this.requiresExistsHandling = requiresExistsHandling;
     this.derivedPropertyExpressionStates = result.slice().reverse();
   }
+
+  get hashCode(): string {
+    return hashArray([
+      QUERY_BUILDER_HASH_STRUCTURE.PROPERTY_EXPRESSION_STATE,
+      this.propertyExpression,
+    ]);
+  }
 }

package/src/stores/QueryBuilderResultState.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { action, makeAutoObservable } from 'mobx';
+import { action, flow, makeObservable, observable } from 'mobx';
 import {
   type GeneratorFn,
   assertErrorThrown,
@@ -45,22 +45,35 @@ import {
 const DEFAULT_LIMIT = 1000;
 
 export class QueryBuilderResultState {
-  queryBuilderState: QueryBuilderState;
-  exportDataState = ActionState.create();
+  readonly queryBuilderState: QueryBuilderState;
+  readonly exportDataState = ActionState.create();
+  readonly executionPlanState: ExecutionPlanState;
+
   previewLimit = DEFAULT_LIMIT;
   isRunningQuery = false;
   isGeneratingPlan = false;
   executionResult?: ExecutionResult | undefined;
-  executionPlanState: ExecutionPlanState;
   executionDuration?: number | undefined;
+  latestRunHashCode?: string | undefined;
   queryRunPromise: Promise<ExecutionResult> | undefined = undefined;
 
   constructor(queryBuilderState: QueryBuilderState) {
-    makeAutoObservable(this, {
-      queryBuilderState: false,
-      executionPlanState: false,
+    makeObservable(this, {
+      executionResult: observable,
+      previewLimit: observable,
+      executionDuration: observable,
+      latestRunHashCode: observable,
+      queryRunPromise: observable,
+      isGeneratingPlan: observable,
+      isRunningQuery: observable,
       setIsRunningQuery: action,
       setExecutionResult: action,
+      setExecutionDuration: action,
+      setPreviewLimit: action,
+      setQueryRunPromise: action,
+      exportData: flow,
+      runQuery: flow,
+      generatePlan: flow,
     });
 
     this.queryBuilderState = queryBuilderState;
@@ -92,6 +105,13 @@ export class QueryBuilderResultState {
     this.queryRunPromise = promise;
   };
 
+  get checkForStaleResults(): boolean {
+    if (this.latestRunHashCode !== this.queryBuilderState.hashCode) {
+      return true;
+    }
+    return false;
+  }
+
   buildExecutionRawLambda(): RawLambda {
     let query: RawLambda;
     if (this.queryBuilderState.isQuerySupported) {
@@ -188,7 +208,8 @@ export class QueryBuilderResultState {
 
   *runQuery(): GeneratorFn<void> {
     try {
-      this.isRunningQuery = true;
+      this.setIsRunningQuery(true);
+      const currentHashCode = this.queryBuilderState.hashCode;
       const mapping = guaranteeNonNullable(
         this.queryBuilderState.mapping,
         'Mapping is required to execute query',
@@ -210,6 +231,7 @@ export class QueryBuilderResultState {
       const result = (yield promise) as ExecutionResult;
       if (this.queryRunPromise === promise) {
         this.setExecutionResult(result);
+        this.latestRunHashCode = currentHashCode;
         this.setExecutionDuration(Date.now() - startTime);
       }
     } catch (error) {