@finos/legend-query-builder 4.14.55 → 4.14.57

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

@@ -20,7 +20,7 @@ import {
   PanelContent,
   PanelDropZone,
   BlankPanelPlaceholder,
-  DropdownMenu,
+  ControlledDropdownMenu,
   InputWithInlineValidation,
   MenuContent,
   MenuContentItem,
@@ -439,7 +439,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                     >
                       {selectedOperatorState.operator.getLabel()}
                     </div>
-                    <DropdownMenu
+                    <ControlledDropdownMenu
                       className="query-builder__olap__column__operation__operator__dropdown"
                       title="Choose Window Function Operator..."
                       disabled={!operators.length}
@@ -474,7 +474,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                       <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                         <CaretDownIcon />
                       </div>
-                    </DropdownMenu>
+                    </ControlledDropdownMenu>
                   </div>
                 </div>
               </div>
@@ -553,7 +553,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                       {selectedSortBy.sortType.toLowerCase()}
                     </div>
                   )}
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="query-builder__olap__column__sortby__operator__dropdown"
                     title="Choose Window Function SortBy Operator..."
                     content={
@@ -601,7 +601,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                     >
                       <CaretDownIcon />
                     </div>
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </div>
               </div>
             </PanelFormSection>
@@ -1007,7 +1007,7 @@ const QueryBuilderWindowColumnEditor = observer(
               >
                 {operationState.operator.getLabel()}
               </div>
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="query-builder__olap__column__operation__operator__dropdown"
                 disabled={!operators.length}
                 title="Choose Window Function Operator..."
@@ -1036,7 +1036,7 @@ const QueryBuilderWindowColumnEditor = observer(
                 <div className="query-builder__olap__column__operation__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
           <div className="query-builder__olap__column__window">
@@ -1132,7 +1132,7 @@ const QueryBuilderWindowColumnEditor = observer(
                   {sortByState.sortType.toLowerCase()}
                 </div>
               )}
-              <DropdownMenu
+              <ControlledDropdownMenu
                 className="query-builder__olap__column__sortby__operator__dropdown"
                 title="Choose Window Function SortBy Operator..."
                 content={
@@ -1176,7 +1176,7 @@ const QueryBuilderWindowColumnEditor = observer(
                 <div className="query-builder__olap__column__sortby__operator__dropdown__trigger">
                   <CaretDownIcon />
                 </div>
-              </DropdownMenu>
+              </ControlledDropdownMenu>
             </div>
           </div>
           <div className="query-builder__olap__column__name">

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -28,7 +28,7 @@ import {
   type TreeNodeViewProps,
   clsx,
   ContextMenu,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   BlankPanelPlaceholder,
@@ -828,7 +828,7 @@ const QueryBuilderFilterConditionEditor = observer(
                 propertyExpressionState={node.condition.propertyExpressionState}
               />
             </div>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="query-builder-filter-tree__condition-node__operator"
               title="Choose Operator..."
               content={
@@ -856,7 +856,7 @@ const QueryBuilderFilterConditionEditor = observer(
               <div className="query-builder-filter-tree__condition-node__operator__dropdown__trigger">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
             {node.condition.value && (
               <div
                 ref={dropConnector}
@@ -1499,7 +1499,7 @@ export const QueryBuilderFilterPanel = observer(
           </div>
 
           <div className="panel__header__actions">
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="panel__header__action"
               title="Show Filter Options Menu..."
               content={
@@ -1572,7 +1572,7 @@ export const QueryBuilderFilterPanel = observer(
               }
             >
               <MoreVerticalIcon className="query-builder__icon__more-options" />
-            </DropdownMenu>
+            </ControlledDropdownMenu>
           </div>
         </div>
         <PanelContent>

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -17,7 +17,7 @@
 import {
   BlankPanelContent,
   PlayIcon,
-  DropdownMenu,
+  ControlledDropdownMenu,
   MenuContent,
   MenuContentItem,
   CaretDownIcon,
@@ -517,7 +517,7 @@ export const QueryBuilderResultPanel = observer(
                     <PlayIcon />
                     Run Query
                   </button>
-                  <DropdownMenu
+                  <ControlledDropdownMenu
                     className="btn__dropdown-combo__dropdown-btn query-builder__result__execute-btn__btn query-builder__result__execute-btn__btn--green"
                     disabled={isRunQueryDisabled}
                     content={
@@ -552,11 +552,11 @@ export const QueryBuilderResultPanel = observer(
                     }}
                   >
                     <CaretDownIcon />
-                  </DropdownMenu>
+                  </ControlledDropdownMenu>
                 </>
               )}
             </div>
-            <DropdownMenu
+            <ControlledDropdownMenu
               className="query-builder__result__export__dropdown"
               title="Export"
               disabled={!isQueryValid}
@@ -604,7 +604,7 @@ export const QueryBuilderResultPanel = observer(
               <div className="query-builder__result__export__dropdown__trigger">
                 <CaretDownIcon />
               </div>
-            </DropdownMenu>
+            </ControlledDropdownMenu>
             {resultState.isQueryUsageViewerOpened && (
               <QueryUsageViewer resultState={resultState} />
             )}

package/src/components/result/tds/QueryBuilderTDSGridResult.tsx

@@ -427,10 +427,10 @@ export const QueryBuilderTDSGridResult = observer(
           const weightedColumnId =
             resultState.wavgAggregationState?.weightedColumnIdPairs.get(column);
           if (weightedColumnId) {
-            const weightedColumnSum = param.rowNode.allLeafChildren
+            const weightedColumnSum = (param.rowNode.allLeafChildren ?? [])
               .map((node) => node.data[weightedColumnId])
               .reduce((a, b) => a + b) as number;
-            const weightedColumnMultiply = param.rowNode.allLeafChildren
+            const weightedColumnMultiply = (param.rowNode.allLeafChildren ?? [])
               .map((node) => node.data[weightedColumnId] * node.data[column])
               .reduce((a, b) => a + b);
             if (weightedColumnSum !== 0) {

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -33,6 +33,7 @@ import {
 import { QueryBuilderTDSState } from '../../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { DEFAULT_LOCALE } from '../../../graph-manager/QueryBuilderConst.js';
 import {
+  guaranteeNonNullable,
   isBoolean,
   isNumber,
   isString,
@@ -54,6 +55,7 @@ const QueryResultCellRenderer = observer(
       resultState.queryBuilderState.fetchStructureState.implementation;
     const applicationStore = resultState.queryBuilderState.applicationStore;
     const cellValue = params.value as QueryBuilderTDSResultCellDataType;
+    const nodeRowIndex = guaranteeNonNullable(params.node.rowIndex);
     const darkMode =
       !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
@@ -82,7 +84,7 @@ const QueryResultCellRenderer = observer(
 
     const currentCellCoordinates = findCoordinatesFromResultValue(
       columnName,
-      params.rowIndex,
+      nodeRowIndex,
     );
     const cellInFilteredResults = resultState.selectedCells.some(
       (result) =>
@@ -143,7 +145,7 @@ const QueryResultCellRenderer = observer(
       if (event.shiftKey) {
         const coordinates = findCoordinatesFromResultValue(
           columnName,
-          params.rowIndex,
+          nodeRowIndex,
         );
         const actualValue = findResultValueFromCoordinates([
           coordinates.rowIndex,
@@ -162,7 +164,7 @@ const QueryResultCellRenderer = observer(
         resultState.setSelectedCells([]);
         const coordinates = findCoordinatesFromResultValue(
           columnName,
-          params.rowIndex,
+          nodeRowIndex,
         );
         const actualValue = findResultValueFromCoordinates([
           coordinates.rowIndex,
@@ -181,7 +183,7 @@ const QueryResultCellRenderer = observer(
       if (event.button === 2) {
         const coordinates = findCoordinatesFromResultValue(
           columnName,
-          params.rowIndex,
+          nodeRowIndex,
         );
         const isInSelected = isCoordinatesSelected(coordinates);
         if (!isInSelected) {
@@ -218,7 +220,7 @@ const QueryResultCellRenderer = observer(
         const firstCorner = results.coordinates;
         const secondCorner = findCoordinatesFromResultValue(
           columnName,
-          params.rowIndex,
+          nodeRowIndex,
         );
 
         resultState.setSelectedCells([results]);

package/src/index.ts

@@ -17,7 +17,10 @@
 // application
 export * from './__lib__/QueryBuilderTelemetryHelper.js';
 export * from './__lib__/QueryBuilderEvent.js';
-
+export {
+  QueryBuilderExplorerState,
+  QueryBuilderExplorerPreviewDataState,
+} from './stores/explorer/QueryBuilderExplorerState.js';
 export { QueryBuilder_GraphManagerPreset } from './graph-manager/QueryBuilder_GraphManagerPreset.js';
 export { QueryBuilderConfig } from './graph-manager/QueryBuilderConfig.js';
 export { QUERY_BUILDER_TEST_ID } from './__lib__/QueryBuilderTesting.js';
@@ -72,7 +75,18 @@ export {
   QueryBuilderChangeDetectionState,
 } from './stores/QueryBuilderChangeDetectionState.js';
 export { QueryBuilderResultValues } from './components/result/QueryBuilderResultPanel.js';
-
+export {
+  QueryBuilderTaggedValueInfoTooltip,
+  QueryBuilderPropertyInfoTooltip,
+  QueryBuilderDerivationInfoTooltip,
+} from './components/shared/QueryBuilderPropertyInfoTooltip.js';
+export { QueryBuilderRootClassInfoTooltip } from './components/shared/QueryBuilderRootClassInfoTooltip.js';
+export {
+  renderPropertyTypeIcon,
+  checkForDeprecatedNode,
+  getQueryBuilderExplorerTreeNodeSortRank,
+  QueryBuilderSubclassInfoTooltip,
+} from './components/explorer/QueryBuilderExplorerPanel.js';
 // ------------------------------------------- Shared components -------------------------------------------
 
 export * from './components/shared/LambdaEditor.js';
@@ -97,3 +111,11 @@ export * from './stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 export * from './stores/data-access/DataAccessState.js';
 export * from './components/data-access/DataAccessOverview.js';
 export * from './stores/query-workflow/QueryBuilderWorkFlowState.js';
+export * from './stores/explorer/QueryBuilderExplorerState.js';
+export * from './stores/explorer/QueryBuilderPropertySearchState.js';
+export * from './stores/explorer/QueryFunctionsExplorerState.js';
+export * from './components/filter/QueryBuilderFilterPanel.js';
+export * from './stores/filter/QueryBuilderFilterValueSpecificationBuilder.js';
+export * from './stores/QueryBuilderValueSpecificationHelper.js';
+export * from './stores/filter/QueryBuilderFilterState.js';
+export * from './stores/filter/QueryBuilderFilterStateBuilder.js';

package/src/stores/QueryLoaderState.ts

@@ -45,6 +45,14 @@ import type {
 export const QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT = 50;
 export const QUERY_LOADER_DEFAULT_QUERY_SEARCH_LIMIT = 10;
 
+export enum SORT_BY_OPTIONS {
+  SORT_BY_CREATE = 'Last Created',
+  SORT_BY_VIEW = 'Last Viewed',
+  SORT_BY_UPDATE = 'Last Updated',
+}
+
+export type SortByOption = { label: string; value: string };
+
 export class QueryLoaderState {
   readonly applicationStore: GenericLegendApplicationStore;
   readonly graphManagerState: BasicGraphManagerState;
@@ -84,6 +92,7 @@ export class QueryLoaderState {
   showingDefaultQueries = true;
   showPreviewViewer = false;
   queryPreviewContent?: QueryInfo | { name: string; content: string };
+  sortBy = '';
 
   constructor(
     applicationStore: GenericLegendApplicationStore,
@@ -115,6 +124,8 @@ export class QueryLoaderState {
       searchText: observable,
       isCuratedTemplateToggled: observable,
       curatedTemplateQuerySepcifications: observable,
+      sortBy: observable,
+      setSortBy: action,
       setSearchText: action,
       setQueryLoaderDialogOpen: action,
       setQueries: action,
@@ -147,6 +158,10 @@ export class QueryLoaderState {
     this.isCuratedTemplateToggled = val;
   }
 
+  setSortBy(val: string): void {
+    this.sortBy = val;
+  }
+
   setSearchText(val: string): void {
     this.searchText = val;
   }
@@ -156,7 +171,7 @@ export class QueryLoaderState {
   }
 
   setQueries(val: LightQuery[]): void {
-    this.queries = val;
+    this.queries = val.sort((a, b) => a.name.localeCompare(b.name));
   }
 
   setShowPreviewViewer(val: boolean): void {
@@ -225,7 +240,9 @@ export class QueryLoaderState {
           if (!this.fetchDefaultQueries) {
             return;
           }
-          this.queries = (yield this.fetchDefaultQueries()) as LightQuery[];
+          this.queries = (
+            (yield this.fetchDefaultQueries()) as LightQuery[]
+          ).sort((a, b) => a.name.localeCompare(b.name));
           this.searchQueriesState.pass();
         } catch (error) {
           this.searchQueriesState.fail();
@@ -271,9 +288,11 @@ export class QueryLoaderState {
       searchSpecification =
         this.decorateSearchSpecification?.(searchSpecification) ??
         searchSpecification;
-      this.queries = (yield this.graphManagerState.graphManager.searchQueries(
-        searchSpecification,
-      )) as LightQuery[];
+      this.queries = (
+        (yield this.graphManagerState.graphManager.searchQueries(
+          searchSpecification,
+        )) as LightQuery[]
+      ).sort((a, b) => a.name.localeCompare(b.name));
       this.searchQueriesState.pass();
     } catch (error) {
       assertErrorThrown(error);

package/src/stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.ts

@@ -216,19 +216,28 @@ export class QueryBuilderPostFilterTreeConditionNodeData
   implements Hashable
 {
   condition: PostFilterConditionState;
+  isNewlyAdded: boolean;
 
   constructor(
     parentId: string | undefined,
     condition: PostFilterConditionState,
+    isNewlyAdded?: boolean,
   ) {
     super(parentId);
 
     makeObservable(this, {
       condition: observable,
+      isNewlyAdded: observable,
+      setIsNewlyAdded: action,
       dragPreviewLabel: computed,
     });
 
     this.condition = condition;
+    this.isNewlyAdded = isNewlyAdded ?? false;
+  }
+
+  setIsNewlyAdded(val: boolean): void {
+    this.isNewlyAdded = val;
   }
 
   get dragPreviewLabel(): string {
@@ -461,7 +470,9 @@ export class PostFilterConditionState implements Hashable {
       );
     }
   }
-  *handleTypeaheadSearch(): GeneratorFn<void> {
+  *handleTypeaheadSearch(
+    searchValue?: ValueSpecification | undefined,
+  ): GeneratorFn<void> {
     try {
       this.typeaheadSearchState.inProgress();
       this.typeaheadSearchResults = undefined;
@@ -475,13 +486,14 @@ export class PostFilterConditionState implements Hashable {
         this.rightConditionValue,
         PostFilterValueSpecConditionValueState,
       );
-      if (performTypeahead(rightConditionValue.value)) {
+      const value = searchValue ?? rightConditionValue.value;
+      if (performTypeahead(value)) {
         const result =
           (yield this.postFilterState.tdsState.queryBuilderState.graphManagerState.graphManager.runQuery(
             buildProjectionColumnTypeaheadQuery(
               this.postFilterState.tdsState.queryBuilderState,
               columnState,
-              rightConditionValue.value,
+              value,
             ),
             guaranteeNonNullable(
               this.postFilterState.tdsState.queryBuilderState

package/src/stores/filter/QueryBuilderFilterStateBuilder.ts

@@ -399,3 +399,42 @@ export const processFilterExpression = (
    */
   filterState.simplifyTree();
 };
+
+export const processFilterLambda = (
+  lambdaFunc: LambdaFunction,
+  queryBuilderState: QueryBuilderState,
+): void => {
+  const filterState = queryBuilderState.filterState;
+
+  assertTrue(
+    lambdaFunc.expressionSequence.length === 1,
+    `Can't process filter() lambda: only support filter() lambda body with 1 expression`,
+  );
+  const rootExpression = guaranteeType(
+    lambdaFunc.expressionSequence[0],
+    SimpleFunctionExpression,
+    `Can't process filter() lambda: only support filter() lambda body with 1 expression`,
+  );
+
+  assertTrue(
+    lambdaFunc.functionType.parameters.length === 1,
+    `Can't process filter() lambda: only support filter() lambda with 1 parameter`,
+  );
+  filterState.setLambdaParameterName(
+    guaranteeType(
+      lambdaFunc.functionType.parameters[0],
+      VariableExpression,
+      `Can't process filter() lambda: only support filter() lambda with 1 parameter`,
+    ).name,
+  );
+
+  processFilterTree(rootExpression, filterState, undefined);
+
+  /**
+   * NOTE: Since group operations like and/or do not take more than 2 parameters, if there are
+   * more than 2 clauses in each group operations, then these clauses are converted into an
+   * unbalanced tree. However, this would look quite bad for UX, as such, we simplify the tree.
+   * After building the filter state.
+   */
+  filterState.simplifyTree();
+};

package/src/stores/filter/QueryBuilderFilterValueSpecificationBuilder.ts

@@ -39,7 +39,7 @@ import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaM
 import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../QueryBuilderConfig.js';
 import { buildPropertyExpressionChain } from '../QueryBuilderValueSpecificationBuilderHelper.js';
 
-const buildFilterConditionExpression = (
+export const buildFilterConditionExpression = (
   filterState: QueryBuilderFilterState,
   node: QueryBuilderFilterTreeNodeData,
 ): ValueSpecification | undefined => {