@finos/legend-query-builder 4.14.36 → 4.14.38

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -278,12 +278,10 @@ const AllVersionsInRangelMilestoningParametersEditor = observer(
   },
 );
 
-export const MilestoningParametersEditor = observer(
+export const MilestoningParametersEditorContent = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
-    const applicationStore = queryBuilderState.applicationStore;
     const milestoningState = queryBuilderState.milestoningState;
-    const close = (): void => milestoningState.setShowMilestoningEditor(false);
     const isCompatibleMilestoningParameter = (
       variable: VariableExpression,
     ): boolean =>
@@ -292,6 +290,62 @@ export const MilestoningParametersEditor = observer(
       variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATE ||
       variable.genericType?.value.rawType.name === PRIMITIVE_TYPE.DATETIME;
 
+    return (
+      <>
+        {milestoningState.isCurrentClassMilestoned && (
+          <PanelFormBooleanField
+            isReadOnly={false}
+            value={milestoningState.isAllVersionsEnabled}
+            name="all Versions"
+            prompt="Query All Milestoned Versions of the Root Class"
+            update={(value: boolean | undefined): void =>
+              milestoningState.setAllVersions(value)
+            }
+          />
+        )}
+        {milestoningState.isAllVersionsEnabled &&
+          milestoningState.isCurrentClassSupportsVersionsInRange && (
+            <>
+              <PanelFormBooleanField
+                isReadOnly={false}
+                value={milestoningState.isAllVersionsInRangeEnabled}
+                name=" All Versions In Range"
+                prompt="Optionally apply a date range to get All Versions for"
+                update={(value: boolean | undefined): void =>
+                  milestoningState.setAllVersionsInRange(value)
+                }
+              />
+
+              {milestoningState.isAllVersionsInRangeEnabled && (
+                <AllVersionsInRangelMilestoningParametersEditor
+                  queryBuilderState={queryBuilderState}
+                />
+              )}
+            </>
+          )}
+        <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
+        <PanelFormSection>
+          <div className="panel__content__form__section__header__label">
+            List of compatible milestoning parameters
+          </div>
+        </PanelFormSection>
+        <div className="panel__content__form__section__list__items">
+          <VariableSelector
+            queryBuilderState={queryBuilderState}
+            filterBy={isCompatibleMilestoningParameter}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+export const MilestoningParametersEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = queryBuilderState.applicationStore;
+    const milestoningState = queryBuilderState.milestoningState;
+    const close = (): void => milestoningState.setShowMilestoningEditor(false);
     return (
       <Dialog
         open={milestoningState.showMilestoningEditor}
@@ -310,49 +364,9 @@ export const MilestoningParametersEditor = observer(
         >
           <ModalHeader title="Milestoning Parameters" />
           <ModalBody className="query-builder__variables__modal__body">
-            {milestoningState.isCurrentClassMilestoned && (
-              <PanelFormBooleanField
-                isReadOnly={false}
-                value={milestoningState.isAllVersionsEnabled}
-                name="all Versions"
-                prompt="Query All Milestoned Versions of the Root Class"
-                update={(value: boolean | undefined): void =>
-                  milestoningState.setAllVersions(value)
-                }
-              />
-            )}
-            {milestoningState.isAllVersionsEnabled &&
-              milestoningState.isCurrentClassSupportsVersionsInRange && (
-                <>
-                  <PanelFormBooleanField
-                    isReadOnly={false}
-                    value={milestoningState.isAllVersionsInRangeEnabled}
-                    name=" All Versions In Range"
-                    prompt="Optionally apply a date range to get All Versions for"
-                    update={(value: boolean | undefined): void =>
-                      milestoningState.setAllVersionsInRange(value)
-                    }
-                  />
-
-                  {milestoningState.isAllVersionsInRangeEnabled && (
-                    <AllVersionsInRangelMilestoningParametersEditor
-                      queryBuilderState={queryBuilderState}
-                    />
-                  )}
-                </>
-              )}
-            <TemporalMilestoningEditor queryBuilderState={queryBuilderState} />
-            <PanelFormSection>
-              <div className="panel__content__form__section__header__label">
-                List of compatible milestoning parameters
-              </div>
-            </PanelFormSection>
-            <div className="panel__content__form__section__list__items">
-              <VariableSelector
-                queryBuilderState={queryBuilderState}
-                filterBy={isCompatibleMilestoningParameter}
-              />
-            </div>
+            <MilestoningParametersEditorContent
+              queryBuilderState={queryBuilderState}
+            />
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton text="Close" onClick={close} type="secondary" />

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

@@ -48,7 +48,7 @@ import { useApplicationStore } from '@finos/legend-application';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../graph/QueryBuilderMetaModelConst.js';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
@@ -65,6 +65,7 @@ import {
   type QueryBuilderVariableDragSource,
 } from '../shared/BasicValueSpecificationEditor.js';
 import { useDrop } from 'react-dnd';
+import { MilestoningParametersEditorContent } from '../explorer/QueryBuilderMilestoningEditor.js';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -270,6 +271,31 @@ export const QueryResultModifierModal = observer(
       deepClone(watermarkState.value),
     );
 
+    //milestoning config
+    const milestoningState = tdsState.queryBuilderState.milestoningState;
+    const businessDate = useRef(milestoningState.businessDate);
+    const processingDate = useRef(milestoningState.processingDate);
+    const isAllVersionsEnabled = useRef(milestoningState.isAllVersionsEnabled);
+    const isAllVersionsInRangeEnabled = useRef(
+      milestoningState.isAllVersionsInRangeEnabled,
+    );
+    const startDate = useRef(milestoningState.startDate);
+    const endDate = useRef(milestoningState.endDate);
+
+    const resetMilestoningToInitial = (): void => {
+      if (isAllVersionsInRangeEnabled.current) {
+        milestoningState.setAllVersionsInRange(
+          isAllVersionsInRangeEnabled.current,
+        );
+        milestoningState.setStartDate(startDate.current);
+        milestoningState.setEndDate(endDate.current);
+      } else {
+        milestoningState.setAllVersions(isAllVersionsEnabled.current);
+      }
+      milestoningState.setBusinessDate(businessDate.current);
+      milestoningState.setProcessingDate(processingDate.current);
+    };
+
     // Sync temp state with tdsState when modal is opened/closed
     useEffect(() => {
       setSortColumns(cloneSortColumnStateArray(stateSortColumns));
@@ -287,7 +313,10 @@ export const QueryResultModifierModal = observer(
     ]);
 
     // Handle user actions
-    const closeModal = (): void => resultSetModifierState.setShowModal(false);
+    const closeModal = (): void => {
+      resetMilestoningToInitial();
+      resultSetModifierState.setShowModal(false);
+    };
     const applyChanges = (): void => {
       resultSetModifierState.setSortColumns(sortColumns);
       resultSetModifierState.setDistinct(distinct);
@@ -299,6 +328,13 @@ export const QueryResultModifierModal = observer(
       }
       resultSetModifierState.setShowModal(false);
       watermarkState.setValue(watermarkValue);
+      businessDate.current = milestoningState.businessDate;
+      processingDate.current = milestoningState.processingDate;
+      isAllVersionsEnabled.current = milestoningState.isAllVersionsEnabled;
+      isAllVersionsInRangeEnabled.current =
+        milestoningState.isAllVersionsInRangeEnabled;
+      startDate.current = milestoningState.startDate;
+      endDate.current = milestoningState.endDate;
     };
 
     const handleLimitResultsChange: React.ChangeEventHandler<
@@ -408,9 +444,23 @@ export const QueryResultModifierModal = observer(
           }
           className="editor-modal query-builder__projection__modal"
         >
-          <ModalHeader title="Result Set Modifier" />
+          <ModalHeader title="Query Options" />
           <ModalBody className="query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
+              {tdsState.queryBuilderState.milestoningState
+                .isMilestonedQuery && (
+                <>
+                  <div className="query-builder__projection__options__section-name">
+                    Milestoning
+                  </div>
+                  <MilestoningParametersEditorContent
+                    queryBuilderState={tdsState.queryBuilderState}
+                  />
+                  <div className="query-builder__projection__options__section-name">
+                    Other
+                  </div>
+                </>
+              )}
               <ColumnsSortEditor
                 projectionColumns={tdsState.projectionColumns}
                 sortColumns={sortColumns}

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

@@ -1148,27 +1148,118 @@ export const QueryBuilderTDSPanel = observer(
           >
             <div className="query-builder__projection__result-modifier-prompt__header">
               <button
-                className="query-builder__projection__result-modifier-prompt__header__label"
+                className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                 onClick={openResultSetModifierEditor}
-                title="Configure result set modifiers..."
+                title="Configure Query Options..."
               >
                 <CogIcon className="query-builder__projection__result-modifier-prompt__header__label__icon" />
                 <div className="query-builder__projection__result-modifier-prompt__header__label__title">
-                  Query Options
+                  {tdsState.isQueryOptionsSet
+                    ? 'Query Options'
+                    : 'Set Query Options'}
                 </div>
               </button>
+              <div className="query-builder__projection__result-modifier-prompt__divider">
+                {tdsState.isQueryOptionsSet && ' - '}
+              </div>
+              {tdsState.queryBuilderState.milestoningState.businessDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Business Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .businessDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState.processingDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Processing Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .processingDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsEnabled &&
+                !tdsState.queryBuilderState.milestoningState
+                  .isAllVersionsInRangeEnabled && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        Yes
+                      </div>
+                    </button>
+                  </div>
+                )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsInRangeEnabled &&
+                tdsState.queryBuilderState.milestoningState.startDate &&
+                tdsState.queryBuilderState.milestoningState.endDate && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        (
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.startDate,
+                          tdsState.queryBuilderState,
+                        )}{' '}
+                        -{' '}
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.endDate,
+                          tdsState.queryBuilderState,
+                        )}
+                        )
+                      </div>
+                    </button>
+                  </div>
+                )}
             </div>
             {tdsState.resultSetModifierState.limit && (
               <div className="query-builder__projection__result-modifier-prompt__group">
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Max Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {tdsState.resultSetModifierState.limit}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {tdsState.resultSetModifierState.limit}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.distinct && (
@@ -1176,12 +1267,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Eliminate Duplicate Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  Yes
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    Yes
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.sortColumns.length > 0 && (
@@ -1191,13 +1284,15 @@ export const QueryBuilderTDSPanel = observer(
                 </div>
                 {tdsState.resultSetModifierState.sortColumns.map(
                   (columnState) => (
-                    <div
-                      className="query-builder__projection__result-modifier-prompt__group__content"
+                    <button
                       key={columnState.columnState.uuid}
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                       onClick={openResultSetModifierEditor}
                     >
-                      {`${columnState.columnState.columnName} ${columnState.sortType}`}
-                    </div>
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        {`${columnState.columnState.columnName} ${columnState.sortType}`}
+                      </div>
+                    </button>
                   ),
                 )}
               </div>
@@ -1207,12 +1302,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Slice
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.queryBuilderState.watermarkState.value && (

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -16,7 +16,6 @@
 
 import {
   BlankPanelContent,
-  PanelLoadingIndicator,
   PlayIcon,
   DropdownMenu,
   MenuContent,
@@ -37,6 +36,14 @@ import {
   PanelDivider,
   SquareIcon,
   CheckSquareIcon,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
+  ChartIcon,
+  CsvIcon,
+  DebugIcon,
+  ReportIcon,
+  CubesLoadingIndicatorIcon,
+  CubesLoadingIndicator,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -306,6 +313,31 @@ export const QueryBuilderResultPanel = observer(
         !queryBuilderState.isLocalModeEnabled,
       );
     };
+
+    const extraExportMenuContentItems = applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as QueryBuilder_LegendApplicationPlugin_Extension
+          ).getExtraQueryBuilderExportMenuActionConfigurations?.() ?? [],
+      )
+      .map((item) => (
+        <MenuContentItem
+          key={item.key}
+          title={item.title ?? ''}
+          onClick={() => {
+            item.onClick(queryBuilderState);
+          }}
+        >
+          {item.icon && <MenuContentItemIcon>{item.icon}</MenuContentItemIcon>}
+          <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
+        </MenuContentItem>
+      ));
+
+    const isLoading =
+      resultState.isRunningQuery || resultState.isGeneratingPlan;
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_PANEL}
@@ -355,7 +387,7 @@ export const QueryBuilderResultPanel = observer(
 
         <div className="panel__header">
           <div className="panel__header__title">
-            <div className="panel__header__title__label">result</div>
+            <div className="panel__header__title__label">results</div>
             {executedSql && (
               <Button
                 onClick={() => setShowSqlModal(true)}
@@ -429,7 +461,7 @@ export const QueryBuilderResultPanel = observer(
             {allowSettingPreviewLimit && (
               <div className="query-builder__result__limit">
                 <div className="query-builder__result__limit__label">
-                  preview limit
+                  preview row limit
                 </div>
                 <input
                   ref={inputRef}
@@ -448,22 +480,20 @@ export const QueryBuilderResultPanel = observer(
             <div className="query-builder__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
               {resultState.isRunningQuery ? (
                 <button
-                  className="btn__dropdown-combo__canceler"
+                  className="btn__dropdown-combo__canceler query-builder__result__execute-btn__btn"
                   onClick={cancelQuery}
                   tabIndex={-1}
                   disabled={!isQueryValid}
                 >
-                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
-                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
-                    <div className="btn__dropdown-combo__canceler__label__title">
-                      Stop
-                    </div>
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label query-builder__result__execute-btn__btn">
+                    <PauseCircleIcon />
+                    Stop
                   </div>
                 </button>
               ) : (
                 <>
                   <button
-                    className="btn__dropdown-combo__label"
+                    className="btn__dropdown-combo__label query-builder__result__execute-btn__btn query-builder__result__execute-btn__btn--green"
                     onClick={runQuery}
                     tabIndex={-1}
                     title={
@@ -475,13 +505,11 @@ export const QueryBuilderResultPanel = observer(
                     }
                     disabled={isRunQueryDisabled}
                   >
-                    <PlayIcon className="btn__dropdown-combo__label__icon" />
-                    <div className="btn__dropdown-combo__label__title">
-                      Run Query
-                    </div>
+                    <PlayIcon />
+                    Run Query
                   </button>
                   <DropdownMenu
-                    className="btn__dropdown-combo__dropdown-btn"
+                    className="btn__dropdown-combo__dropdown-btn query-builder__result__execute-btn__btn query-builder__result__execute-btn__btn--green"
                     disabled={isRunQueryDisabled}
                     content={
                       <MenuContent>
@@ -490,14 +518,22 @@ export const QueryBuilderResultPanel = observer(
                           onClick={generatePlan}
                           disabled={isRunQueryDisabled}
                         >
-                          Generate Plan
+                          <MenuContentItemIcon>
+                            <ReportIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Generate Plan
+                          </MenuContentItemLabel>
                         </MenuContentItem>
                         <MenuContentItem
                           className="btn__dropdown-combo__option"
                           onClick={debugPlanGeneration}
                           disabled={isRunQueryDisabled}
                         >
-                          Debug
+                          <MenuContentItemIcon>
+                            <DebugIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>Debug</MenuContentItemLabel>
                         </MenuContentItem>
                       </MenuContent>
                     }
@@ -522,14 +558,15 @@ export const QueryBuilderResultPanel = observer(
                   ).map((format) => (
                     <MenuContentItem
                       key={format}
-                      className="query-builder__result__export__dropdown__menu__item"
                       onClick={(): void => confirmExport(format)}
                     >
-                      {format}
+                      <MenuContentItemIcon>
+                        <CsvIcon />
+                      </MenuContentItemIcon>
+                      <MenuContentItemLabel>{format}</MenuContentItemLabel>
                     </MenuContentItem>
                   ))}
                   <MenuContentItem
-                    className="query-builder__result__export__dropdown__menu__item"
                     onClick={(): void =>
                       resultState.setIsQueryUsageViewerOpened(true)
                     }
@@ -538,8 +575,12 @@ export const QueryBuilderResultPanel = observer(
                       !isExtraQueryUsageOptionsConfigured
                     }
                   >
-                    Query Code Snippets...
+                    <MenuContentItemIcon>
+                      <ChartIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Others...</MenuContentItemLabel>
                   </MenuContentItem>
+                  {extraExportMenuContentItems}
                 </MenuContent>
               }
               menuProps={{
@@ -558,20 +599,34 @@ export const QueryBuilderResultPanel = observer(
             {resultState.isQueryUsageViewerOpened && (
               <QueryUsageViewer resultState={resultState} />
             )}
+            {applicationStore.pluginManager
+              .getApplicationPlugins()
+              .flatMap(
+                (plugin) =>
+                  (
+                    plugin as QueryBuilder_LegendApplicationPlugin_Extension
+                  ).getExtraQueryBuilderExportMenuActionConfigurations?.() ??
+                  [],
+              )
+              .map((item) => (
+                <div key={item.key}>
+                  {item.renderExtraComponent
+                    ? item.renderExtraComponent(queryBuilderState)
+                    : undefined}
+                </div>
+              ))}
           </div>
         </div>
-        <PanelContent>
-          <PanelLoadingIndicator
-            isLoading={
-              resultState.isRunningQuery || resultState.isGeneratingPlan
-            }
-          />
-          {!executionResult && (
+        <PanelContent className="query-builder__result__content">
+          <CubesLoadingIndicator isLoading={isLoading}>
+            <CubesLoadingIndicatorIcon />
+          </CubesLoadingIndicator>
+          {!executionResult && !isLoading && (
             <BlankPanelContent>
               Build or load a valid query first
             </BlankPanelContent>
           )}
-          {executionResult && (
+          {executionResult && !isLoading && (
             <div className="query-builder__result__values">
               <QueryBuilderResultValues
                 executionResult={executionResult}

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -17,6 +17,7 @@
 import {
   CustomSelectorInput,
   PanelHeader,
+  compareLabelFn,
   createFilter,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
@@ -71,7 +72,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
         : []
     )
       .map(buildElementOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedMappingOption = queryBuilderState.executionContextState
       .mapping
       ? buildElementOption(queryBuilderState.executionContextState.mapping)
@@ -107,7 +108,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
           new RuntimePointer(PackageableElementExplicitReference.create(rt)),
       )
       .map(buildRuntimeValueOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedRuntimeOption = queryBuilderState.executionContextState
       .runtimeValue
       ? buildRuntimeValueOption(