@finos/legend-application-query 5.0.0 → 5.1.0

package/src/components/QueryBuilderPostFilterPanel.tsx

@@ -61,10 +61,18 @@ import {
   assertErrorThrown,
   guaranteeNonNullable,
   returnUndefOnError,
+  debounce,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   type DropTargetMonitor,
   useDragLayer,
@@ -74,7 +82,10 @@ import {
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { getColumnMultiplicity } from '../stores/postFilterOperators/QueryBuilderPostFilterOperatorHelper.js';
 import { QueryBuilderAggregateColumnState } from '../stores/QueryBuilderAggregationState.js';
-import { QUERY_BUILDER_GROUP_OPERATION } from '../stores/QueryBuilderOperatorsHelper.js';
+import {
+  isTypeCompatibleWithConditionValueType,
+  QUERY_BUILDER_GROUP_OPERATION,
+} from '../stores/QueryBuilderOperatorsHelper.js';
 import type { QueryBuilderPostFilterOperator } from '../stores/QueryBuilderPostFilterOperator.js';
 import {
   type QueryBuilderPostFilterTreeNodeData,
@@ -405,6 +416,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
     const { node, isPropertyDragOver } = props;
     const graph =
       node.condition.postFilterState.queryBuilderState.graphManagerState.graph;
+    const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderPostFilterOperator) => (): void =>
       node.condition.changeOperator(val);
     const changeColumn = async (
@@ -421,9 +433,24 @@ const QueryBuilderPostFilterConditionEditor = observer(
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
       (item: QueryBuilderParameterDragSource): void => {
-        node.condition.setValue(item.variable.parameter);
+        const parameterType =
+          item.variable.parameter.genericType?.value.rawType;
+        const conditionValueType = node.condition.columnState.getReturnType();
+        if (
+          conditionValueType &&
+          isTypeCompatibleWithConditionValueType(
+            parameterType,
+            conditionValueType,
+          )
+        ) {
+          node.condition.setValue(item.variable.parameter);
+        } else {
+          applicationStore.notifyWarning(
+            `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
+          );
+        }
       },
-      [node],
+      [applicationStore, node.condition],
     );
     const [{ isFilterValueDragOver }, dropConnector] = useDrop(
       () => ({
@@ -447,6 +474,26 @@ const QueryBuilderPostFilterConditionEditor = observer(
         node.condition.operator.getDefaultFilterConditionValue(node.condition),
       );
     };
+    const debouncedTypeaheadSearch = useMemo(
+      () =>
+        debounce(
+          (inputVal: string) => node.condition.handleTypeaheadSearch(),
+          1000,
+        ),
+      [node],
+    );
+    const cleanUpReloadValues = (): void => {
+      node.condition.typeaheadSearchState.complete();
+    };
+    const changeValueSpecification = (val: ValueSpecification): void => {
+      node.condition.setValue(val);
+    };
+    const selectorConfig = {
+      values: node.condition.typeaheadSearchResults,
+      isLoading: node.condition.typeaheadSearchState.isInProgress,
+      reloadValues: debouncedTypeaheadSearch,
+      cleanUpReloadValues,
+    };
 
     return (
       <div className="query-builder-post-filter-tree__node__label__content dnd__overlay__container">
@@ -506,9 +553,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
               )}
               <BasicValueSpecificationEditor
                 valueSpecification={node.condition.value}
-                setValueSpecification={(val: ValueSpecification): void =>
-                  node.condition.setValue(val)
-                }
+                setValueSpecification={changeValueSpecification}
                 graph={graph}
                 typeCheckOption={{
                   expectedType: guaranteeNonNullable(
@@ -516,6 +561,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
                   ),
                 }}
                 resetValue={resetNode}
+                selectorConfig={selectorConfig}
               />
             </div>
           )}

package/src/components/QueryBuilderProjectionPanel.tsx

@@ -28,6 +28,7 @@ import {
   ContextMenu,
   InputWithInlineValidation,
   SigmaIcon,
+  TimesCircleIcon,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -588,6 +589,8 @@ export const QueryBuilderProjectionPanel = observer(
       },
       [queryBuilderState, projectionState],
     );
+
+    const isInvalidProjection = !projectionState.isValidProjectionState();
     const [{ isPropertyDragOver }, dropConnector] = useDrop(
       () => ({
         accept: [
@@ -620,10 +623,21 @@ export const QueryBuilderProjectionPanel = observer(
 
     return (
       <div
-        className="panel__content dnd__overlay__container"
         ref={dropConnector}
+        className={`panel__content dnd__overlay__container`}
       >
+        {isInvalidProjection && (
+          <div className="query-builder__projection__container__error">
+            <div className="query-builder__projection__error__label">
+              <TimesCircleIcon className="query-builder__projection__error__icon" />
+              {projectionState.getValidationErrorMessage() ??
+                'There is an error with the projection'}
+            </div>
+          </div>
+        )}
+
         <div className={clsx({ dnd__overlay: isPropertyDragOver })} />
+
         {!projectionColumns.length && (
           <BlankPanelPlaceholder
             placeholderText="Add a projection column"
@@ -633,7 +647,10 @@ export const QueryBuilderProjectionPanel = observer(
         {Boolean(projectionColumns.length) && (
           <div
             data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PROJECTION}
-            className="query-builder__projection__columns"
+            className={`query-builder__projection__columns ${clsx({
+              ['query-builder__projection__columns--with-error']:
+                isInvalidProjection,
+            })} `}
           >
             <ProjectionColumnDragLayer />
             {projectionColumns.map((projectionColumnState) => (

package/src/components/QueryBuilderPropertySearchPanel.tsx

@@ -169,6 +169,7 @@ const QueryBuilderTreeNodeViewer = observer(
               ),
             );
             if (
+              propertyTreeNodeData &&
               !(propertyTreeNodeData.type instanceof Class) &&
               propertyTreeNodeData.mappingData.mapped
             ) {
@@ -192,7 +193,7 @@ const QueryBuilderTreeNodeViewer = observer(
     return (
       <div>
         <div
-          className="tree-view__node__container"
+          className="tree-view__node__container query-builder-property-search-panel__node__container"
           ref={dragConnector}
           style={{
             paddingLeft: `${(level - 1) * stepPaddingInRem + 0.5}rem`,

package/src/components/QueryBuilderResultPanel.tsx

@@ -25,6 +25,7 @@ import {
   CaretDownIcon,
   ContextMenu,
   clsx,
+  PauseCircleIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -413,27 +414,32 @@ export const QueryBuilderResultPanel = observer(
         ],
       });
     };
-    const execute = (): void => {
+    const runQuery = (): void => {
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
           (): Promise<void> =>
-            flowResult(resultState.execute()).catch(
+            flowResult(resultState.runQuery()).catch(
               applicationStore.alertUnhandledError,
             ),
           PARAMETER_SUBMIT_ACTION.EXECUTE,
         );
       } else {
-        flowResult(resultState.execute()).catch(
+        flowResult(resultState.runQuery()).catch(
           applicationStore.alertUnhandledError,
         );
       }
     };
+    const cancelQuery = (): void => {
+      resultState.setIsRunningQuery(false);
+      queryBuilderState.resultState.setQueryRunPromise(undefined);
+    };
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(resultState.generatePlan(false)),
     );
     const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
       flowResult(resultState.generatePlan(true)),
     );
+
     const changeLimit: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       const val = event.target.value;
       queryBuilderState.resultState.setPreviewLimit(
@@ -469,52 +475,70 @@ export const QueryBuilderResultPanel = observer(
                   type="number"
                   value={resultState.previewLimit}
                   onChange={changeLimit}
+                  disabled={!queryBuilderState.isValidQueryBuilderState()}
                 />
               </div>
             )}
-            <button
-              className="query-builder__result__execute-btn"
-              onClick={execute}
-              disabled={
-                resultState.isExecutingQuery || resultState.isGeneratingPlan
-              }
-              tabIndex={-1}
-            >
-              <div className="query-builder__result__execute-btn__label">
-                <PlayIcon className="query-builder__result__execute-btn__label__icon" />
-                <div className="query-builder__result__execute-btn__label__title">
-                  Execute
+            {resultState.isRunningQuery ? (
+              <button
+                className="query-builder__result__stop-btn"
+                onClick={cancelQuery}
+                tabIndex={-1}
+                disabled={!queryBuilderState.isValidQueryBuilderState()}
+              >
+                <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
+                  <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
+                  <div className="query-builder__result__stop-btn__label__title">
+                    Stop
+                  </div>
                 </div>
-              </div>
-              <DropdownMenu
-                className="query-builder__result__execute-btn__dropdown-btn"
-                disabled={
-                  resultState.isExecutingQuery || resultState.isGeneratingPlan
-                }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="query-builder__result__execute-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="query-builder__result__execute-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
+              </button>
+            ) : (
+              <button
+                className="query-builder__result__execute-btn"
+                onClick={runQuery}
+                tabIndex={-1}
+                title={
+                  !queryBuilderState.isValidQueryBuilderState()
+                    ? 'Query is not valid'
+                    : undefined
                 }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
+                disabled={!queryBuilderState.isValidQueryBuilderState()}
               >
-                <CaretDownIcon />
-              </DropdownMenu>
-            </button>
+                <div className="query-builder__result__execute-btn__label">
+                  <PlayIcon className="query-builder__result__execute-btn__label__icon" />
+                  <div className="query-builder__result__execute-btn__label__title">
+                    Run Query
+                  </div>
+                </div>
+                <DropdownMenu
+                  className="query-builder__result__execute-btn__dropdown-btn"
+                  disabled={resultState.isGeneratingPlan}
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="query-builder__result__execute-btn__option"
+                        onClick={generatePlan}
+                      >
+                        Generate Plan
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="query-builder__result__execute-btn__option"
+                        onClick={debugPlanGeneration}
+                      >
+                        Debug
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <CaretDownIcon />
+                </DropdownMenu>
+              </button>
+            )}
             <DropdownMenu
               className="query-builder__result__export__dropdown"
               content={
@@ -542,19 +566,24 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__export__dropdown__label"
                 tabIndex={-1}
                 title="Export"
+                disabled={!queryBuilderState.isValidQueryBuilderState()}
               >
                 Export
               </button>
-              <div className="query-builder__result__export__dropdown__trigger">
+              <button
+                className="query-builder__result__export__dropdown__trigger"
+                tabIndex={-1}
+                disabled={!queryBuilderState.isValidQueryBuilderState()}
+              >
                 <CaretDownIcon />
-              </div>
+              </button>
             </DropdownMenu>
           </div>
         </div>
         <div className="panel__content">
           <PanelLoadingIndicator
             isLoading={
-              resultState.isExecutingQuery ||
+              resultState.isRunningQuery ||
               resultState.isGeneratingPlan ||
               resultState.exportDataState.isInProgress
             }

package/src/components/QueryBuilderSetupPanel.tsx

@@ -46,7 +46,7 @@ import {
 } from '@finos/legend-graph';
 import {
   type PackageableElementOption,
-  getPackageableElementOptionalFormatter,
+  getPackageableElementOptionFormatter,
   buildElementOption,
 } from '@finos/legend-application';
 import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
@@ -269,8 +269,9 @@ export const QueryBuilderSetupPanel = observer(
               darkMode={true}
               disabled={!isQuerySupported || querySetupState.classIsReadOnly}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
+              formatOptionLabel={getPackageableElementOptionFormatter({
                 darkMode: true,
+                graphManagerState: queryBuilderState.graphManagerState,
               })}
             />
             <button
@@ -304,8 +305,9 @@ export const QueryBuilderSetupPanel = observer(
               value={selectedMappingOption}
               darkMode={true}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
+              formatOptionLabel={getPackageableElementOptionFormatter({
                 darkMode: true,
+                graphManagerState: queryBuilderState.graphManagerState,
               })}
             />
           </div>

package/src/index.ts

@@ -15,6 +15,8 @@
  */
 
 export * from './application/LegendQuery.js';
+export * from './components/LegendQueryBaseStoreProvider.js';
+export * from './stores/LegendQueryBaseStore.js';
 
 export { QUERY_BUILDER_TEST_ID } from './components/QueryBuilder_TestID.js';
 
@@ -26,10 +28,6 @@ export {
   useQueryEditorStore,
 } from './components/QueryEditorStoreProvider.js';
 export { useQuerySetupStore } from './components/QuerySetupStoreProvider.js';
-export {
-  useLegendQueryBaseStore,
-  useLegendQueryApplicationStore,
-} from './components/LegendQueryBaseStoreProvider.js';
 export { QueryEditor } from './components/QueryEditor.js';
 
 export { LegendQueryPluginManager } from './application/LegendQueryPluginManager.js';

package/src/stores/QueryBuilderExplorerState.ts

@@ -50,6 +50,8 @@ import {
   EntityMappedProperty,
   Enumeration,
   DerivedProperty,
+  Property,
+  Association,
 } from '@finos/legend-graph';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
@@ -342,7 +344,7 @@ export const getQueryBuilderPropertyNodeData = (
   property: AbstractProperty,
   parentNode: QueryBuilderExplorerTreeNodeData,
   modelCoverageAnalysisResult: MappingModelCoverageAnalysisResult,
-): QueryBuilderExplorerTreePropertyNodeData => {
+): QueryBuilderExplorerTreePropertyNodeData | undefined => {
   const mappingNodeData = generatePropertyNodeMappingData(
     property,
     parentNode.mappingData,
@@ -353,6 +355,16 @@ export const getQueryBuilderPropertyNodeData = (
     parentNode.isPartOfDerivedPropertyBranch ||
     (parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
       parentNode.property instanceof DerivedProperty);
+  if (
+    property instanceof Property &&
+    parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
+    parentNode.property instanceof Property &&
+    property._OWNER instanceof Association &&
+    parentNode.property._OWNER instanceof Association &&
+    parentNode.property._OWNER === property._OWNER
+  ) {
+    return undefined;
+  }
   const propertyNode = new QueryBuilderExplorerTreePropertyNodeData(
     `${
       parentNode instanceof QueryBuilderExplorerTreeRootNodeData
@@ -455,8 +467,10 @@ const getQueryBuilderTreeData = (
         treeRootNode,
         modelCoverageAnalysisResult,
       );
-      addUniqueEntry(treeRootNode.childrenIds, propertyTreeNodeData.id);
-      nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+      if (propertyTreeNodeData) {
+        addUniqueEntry(treeRootNode.childrenIds, propertyTreeNodeData.id);
+        nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+      }
     });
   rootClass._subclasses.forEach((subclass) => {
     const subTypeTreeNodeData = getQueryBuilderSubTypeNodeData(

package/src/stores/QueryBuilderFetchStructureState.ts

@@ -18,6 +18,7 @@ import { action, makeAutoObservable } from 'mobx';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import { QueryBuilderGraphFetchTreeState } from './QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderProjectionState } from './QueryBuilderProjectionState.js';
+import type { QueryBuilderAggregateOperator } from './QueryBuilderAggregationState.js';
 
 export enum FETCH_STRUCTURE_MODE {
   PROJECTION = 'PROJECTION',
@@ -30,7 +31,10 @@ export class QueryBuilderFetchStructureState {
   projectionState: QueryBuilderProjectionState;
   graphFetchTreeState: QueryBuilderGraphFetchTreeState;
 
-  constructor(queryBuilderState: QueryBuilderState) {
+  constructor(
+    queryBuilderState: QueryBuilderState,
+    operators: QueryBuilderAggregateOperator[],
+  ) {
     makeAutoObservable(this, {
       queryBuilderState: false,
       setFetchStructureMode: action,
@@ -39,7 +43,10 @@ export class QueryBuilderFetchStructureState {
     this.queryBuilderState = queryBuilderState;
     // TODO: we probably should modularize this a bit better
     // See https://github.com/finos/legend-studio/issues/731
-    this.projectionState = new QueryBuilderProjectionState(queryBuilderState);
+    this.projectionState = new QueryBuilderProjectionState(
+      queryBuilderState,
+      operators,
+    );
     this.graphFetchTreeState = new QueryBuilderGraphFetchTreeState(
       queryBuilderState,
     );

package/src/stores/QueryBuilderFilterState.ts

@@ -20,9 +20,11 @@ import {
   makeAutoObservable,
   makeObservable,
   observable,
+  flow,
 } from 'mobx';
 import type { TreeNodeData, TreeData } from '@finos/legend-art';
 import {
+  type GeneratorFn,
   assertTrue,
   getNullableFirstElement,
   guaranteeNonNullable,
@@ -34,11 +36,13 @@ import {
   deleteEntry,
   assertErrorThrown,
   filterByType,
+  ActionState,
 } from '@finos/legend-shared';
 import type { QueryBuilderExplorerTreeDragSource } from './QueryBuilderExplorerState.js';
 import { QueryBuilderPropertyExpressionState } from './QueryBuilderPropertyEditorState.js';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
+  type ExecutionResult,
   type AbstractPropertyExpression,
   type ValueSpecification,
   extractElementNameFromPath,
@@ -55,6 +59,12 @@ import {
   fromGroupOperation,
   QUERY_BUILDER_GROUP_OPERATION,
 } from './QueryBuilderOperatorsHelper.js';
+import type { QueryBuilderProjectionColumnDragSource } from './QueryBuilderProjectionState.js';
+import {
+  buildPropertyTypeAheadQuery,
+  buildTypeAheadOptions,
+  performTypeAhead,
+} from './QueryBuilderTypeaheadHelper.js';
 
 export abstract class QueryBuilderFilterOperator {
   readonly uuid = uuid();
@@ -95,6 +105,7 @@ export interface QueryBuilderFilterConditionDragSource {
 
 export type QueryBuilderFilterDropTarget =
   | QueryBuilderExplorerTreeDragSource
+  | QueryBuilderProjectionColumnDragSource
   | QueryBuilderFilterConditionDragSource;
 export type QueryBuilderFilterConditionRearrangeDropTarget =
   QueryBuilderFilterConditionDragSource;
@@ -105,6 +116,8 @@ export class FilterConditionState {
   operator!: QueryBuilderFilterOperator;
   value?: ValueSpecification | undefined;
   existsLambdaParamNames: string[] = [];
+  typeaheadSearchResults: string[] | undefined;
+  typeaheadSearchState = ActionState.create();
 
   constructor(
     filterState: QueryBuilderFilterState,
@@ -117,7 +130,10 @@ export class FilterConditionState {
       changeOperator: action,
       setOperator: action,
       setValue: action,
+      typeaheadSearchResults: observable,
+      typeaheadSearchState: observable,
       addExistsLambdaParamNames: action,
+      handleTypeaheadSearch: flow,
     });
 
     this.filterState = filterState;
@@ -141,6 +157,35 @@ export class FilterConditionState {
     );
   }
 
+  *handleTypeaheadSearch(): GeneratorFn<void> {
+    try {
+      this.typeaheadSearchState.inProgress();
+      this.typeaheadSearchResults = undefined;
+      if (performTypeAhead(this.value)) {
+        const builderState = buildPropertyTypeAheadQuery(
+          this.filterState.queryBuilderState,
+          this.propertyExpressionState.propertyExpression,
+          this.value,
+        );
+        const result =
+          (yield builderState.graphManagerState.graphManager.executeMapping(
+            builderState.resultState.buildExecutionRawLambda(),
+            guaranteeNonNullable(builderState.querySetupState.mapping),
+            guaranteeNonNullable(builderState.querySetupState.runtimeValue),
+            builderState.graphManagerState.graph,
+          )) as ExecutionResult;
+        this.typeaheadSearchResults = buildTypeAheadOptions(result);
+      }
+      this.typeaheadSearchState.pass();
+    } catch (error) {
+      assertErrorThrown(error);
+      this.typeaheadSearchResults = [];
+      this.typeaheadSearchState.fail();
+    } finally {
+      this.typeaheadSearchState.complete();
+    }
+  }
+
   changeProperty(propertyExpression: AbstractPropertyExpression): void {
     try {
       // first, check if the new property is supported
@@ -407,6 +452,11 @@ export class QueryBuilderFilterState
   isRearrangingConditions = false;
   operators: QueryBuilderFilterOperator[] = [];
   private _suppressClickawayEventListener = false;
+  /**
+   * This flag is for turning on/off dnd from projection panel to filter panel,
+   * and will be leveraged when the concepts of workflows are introduced into query builder.
+   */
+  allowDnDProjectionToFilter = true;
 
   constructor(
     queryBuilderState: QueryBuilderState,