@finos/legend-query-builder 0.6.33 → 1.0.1

package/src/components/QueryBuilderResultPanel.tsx

@@ -87,7 +87,7 @@ import {
   instanceValue_setValues,
 } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { PARAMETER_SUBMIT_ACTION } from '../stores/shared/LambdaParameterState.js';
-import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
 
 const QueryBuilderGridResultContextMenu = observer(
   forwardRef<

package/src/components/QueryBuilderSideBar.tsx

@@ -26,7 +26,7 @@ import {
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
-import { QUERY_BUILDER_TEST_ID } from './QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
 import {
   type Class,
   type Mapping,
@@ -180,13 +180,14 @@ export const QueryBuilderClassSelector = observer(
               onChange={changeClass}
               value={selectedClassOption}
               darkMode={
-                !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
               }
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
                 darkMode:
                   !applicationStore.layoutService
-                    .TEMPORARY__isLightThemeEnabled,
+                    .TEMPORARY__isLightColorThemeEnabled,
                 graph: queryBuilderState.graphManagerState.graph,
               })}
             />
@@ -342,13 +343,14 @@ const BasicQueryBuilderSetup = observer(
                 onChange={changeMapping}
                 value={selectedMappingOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -376,13 +378,14 @@ const BasicQueryBuilderSetup = observer(
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -16,11 +16,14 @@
 
 import {
   collectKeyedCommandConfigEntriesFromConfig,
+  collectSettingConfigurationEntriesFromConfig,
   LegendApplicationPlugin,
+  type SettingConfigurationEntry,
   type KeyedCommandConfigEntry,
   type LegendApplicationPluginManager,
 } from '@finos/legend-application';
 import packageJson from '../../package.json';
+import { QUERY_BUILDER_SETTING_CONFIG } from '../application/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 
@@ -47,6 +50,12 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
     );
   }
 
+  override getExtraSettingConfigurationEntries(): SettingConfigurationEntry[] {
+    return collectSettingConfigurationEntriesFromConfig(
+      QUERY_BUILDER_SETTING_CONFIG,
+    );
+  }
+
   getCheckEntitlementsEditorRender(): CheckEntitlementEditorRender | undefined {
     return undefined;
   }

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -91,7 +91,7 @@ import {
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { getClassPropertyIcon } from '../shared/ElementIconUtils.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { filterByType, guaranteeNonNullable } from '@finos/legend-shared';
 import { QueryBuilderPropertySearchPanel } from './QueryBuilderPropertySearchPanel.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';

package/src/components/explorer/QueryBuilderPropertySearchPanel.tsx

@@ -57,7 +57,7 @@ import {
   renderPropertyTypeIcon,
 } from './QueryBuilderExplorerPanel.js';
 import { QueryBuilderPropertyInfoTooltip } from '../shared/QueryBuilderPropertyInfoTooltip.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { TextSearchAdvancedConfigMenu } from '@finos/legend-application';
 
 const prettyPropertyNameFromNodeId = (name: string): string => {

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

@@ -30,7 +30,7 @@ import {
   InfoCircleIcon,
   PanelDropZone,
 } from '@finos/legend-art';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { isNonNullable } from '@finos/legend-shared';
 import {
   type QueryBuilderGraphFetchTreeData,

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

@@ -79,7 +79,7 @@ import {
   QueryBuilderDerivationProjectionColumnState,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';

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

@@ -85,7 +85,7 @@ const ColumnSortEditor = observer(
           onChange={onChange}
           value={value}
           darkMode={
-            !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
         />
         <div className="query-builder__projection__options__sort__sortby">

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

@@ -53,7 +53,7 @@ import {
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QueryBuilderPropertyExpressionBadge } from '../QueryBuilderPropertyExpressionEditor.js';
 import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { flowResult } from 'mobx';
 import { useApplicationStore } from '@finos/legend-application';
 import {

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

@@ -62,7 +62,7 @@ import { QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE } from '../../stores/fetch-str
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { COLUMN_SORT_TYPE } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 
 // helpers
 const createWindowColumnState = (
@@ -161,7 +161,7 @@ const TDSColumnSelectorEditor = observer(
           onChange={onChange}
           value={value}
           darkMode={
-            !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
         />
         <button
@@ -271,7 +271,8 @@ const QueryBuilderWindowColumnModalEditor = observer(
             'query-builder__olap__modal',
             {
               'query-editor--light':
-                applicationStore.layoutService.TEMPORARY__isLightThemeEnabled,
+                applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             },
           ])}
         >
@@ -318,7 +319,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                           }}
                           darkMode={
                             !applicationStore.layoutService
-                              .TEMPORARY__isLightThemeEnabled
+                              .TEMPORARY__isLightColorThemeEnabled
                           }
                         />
                       </div>
@@ -434,7 +435,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                         }}
                         darkMode={
                           !applicationStore.layoutService
-                            .TEMPORARY__isLightThemeEnabled
+                            .TEMPORARY__isLightColorThemeEnabled
                         }
                       />
                     </div>
@@ -645,7 +646,7 @@ const TDSColumnReferenceEditor = observer(
                   value={value}
                   darkMode={
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled
+                      .TEMPORARY__isLightColorThemeEnabled
                   }
                 />
               </div>

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -68,7 +68,7 @@ import {
   debounce,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { useApplicationStore } from '@finos/legend-application';
 import type { ValueSpecification } from '@finos/legend-graph';
 import {

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -17,7 +17,7 @@
 import { useApplicationStore } from '@finos/legend-application';
 import {
   type TooltipPlacement,
-  type InputActionMeta,
+  type InputActionData,
   Tooltip,
   DollarIcon,
   clsx,
@@ -241,7 +241,7 @@ const StringPrimitiveInstanceValueEditor = observer(
     };
     const handleInputChange = (
       inputValue: string,
-      actionChange: InputActionMeta,
+      actionChange: InputActionData,
     ): void => {
       if (actionChange.action === 'input-change') {
         updateValueSpec(inputValue);
@@ -279,7 +279,8 @@ const StringPrimitiveInstanceValueEditor = observer(
             inputValue={value}
             onInputChange={handleInputChange}
             darkMode={
-              !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
             }
             isLoading={isLoading}
             allowCreateWhileLoading={true}

package/src/components/shared/LambdaEditor.tsx

@@ -51,7 +51,7 @@ import {
   TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
-import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
+import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 
 const LambdaErrorFeedback: React.FC<{
   error?: EngineError | undefined;
@@ -97,7 +97,6 @@ const LambdaEditorInline = observer(
     disableExpansion?: boolean | undefined;
     forceExpansion?: boolean | undefined;
     disablePopUp?: boolean | undefined;
-    backdropSetter?: ((val: boolean) => void) | undefined;
     openInPopUp: () => void;
     onEditorFocus?: (() => void) | undefined;
   }) => {
@@ -110,7 +109,6 @@ const LambdaEditorInline = observer(
       onExpectedTypeLabelSelect,
       matchedExpectedType,
       forceBackdrop,
-      backdropSetter,
       disableExpansion,
       forceExpansion,
       disablePopUp,
@@ -185,7 +183,8 @@ const LambdaEditorInline = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
-          theme: applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+          theme: applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
             : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
@@ -220,17 +219,15 @@ const LambdaEditorInline = observer(
 
     // set backdrop to force user to fix parser error when it happens
     useEffect(() => {
-      if (backdropSetter) {
-        if (parserError) {
-          backdropSetter(true);
-        } else if (!forceBackdrop) {
-          // make sure the backdrop is no longer `needed` for blocking by another parser error before hiding it
-          // NOTE: this has a serious drawback, see the documentation for `forceBackdrop` prop of `LambdaEditor`
-          // for better context
-          backdropSetter(false);
-        }
+      if (parserError) {
+        applicationStore.layoutService.setShowBackdrop(true);
+      } else if (!forceBackdrop) {
+        // make sure the backdrop is no longer `needed` for blocking by another parser error before hiding it
+        // NOTE: this has a serious drawback, see the documentation for `forceBackdrop` prop of `LambdaEditor`
+        // for better context
+        applicationStore.layoutService.setShowBackdrop(false);
       }
-    }, [parserError, forceBackdrop, backdropSetter]);
+    }, [applicationStore, parserError, forceBackdrop]);
 
     if (editor) {
       /**
@@ -464,7 +461,8 @@ const LambdaEditorPopUp = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
-          theme: applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+          theme: applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
             : EDITOR_THEME.LEGEND,
         });
@@ -595,7 +593,8 @@ const LambdaEditorPopUp = observer(
             },
             {
               'lambda-editor--light':
-                applicationStore.layoutService.TEMPORARY__isLightThemeEnabled,
+                applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             },
           )}
         >
@@ -671,11 +670,6 @@ export const LambdaEditor = observer(
      * input will still be captured.
      */
     forceBackdrop: boolean;
-    /**
-     * (de)activator for backdrop that is usually used to block any background interactions
-     * while there is a parser error in the editor
-     */
-    backdropSetter?: ((val: boolean) => void) | undefined;
     /**
      * To whether or not disable expasipn toggler
      */
@@ -706,7 +700,6 @@ export const LambdaEditor = observer(
       lambdaEditorState,
       disabled,
       forceBackdrop,
-      backdropSetter,
       expectedType,
       onExpectedTypeLabelSelect,
       matchedExpectedType,
@@ -780,7 +773,6 @@ export const LambdaEditor = observer(
         matchedExpectedType={matchedExpectedType}
         onExpectedTypeLabelSelect={onExpectedTypeLabelSelect}
         forceBackdrop={forceBackdrop}
-        backdropSetter={backdropSetter}
         disableExpansion={disableExpansion}
         forceExpansion={
           disableExpansion !== undefined

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -154,13 +154,14 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 onChange={changeMapping}
                 value={selectedMappingOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -183,13 +184,14 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -148,13 +148,14 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 onChange={changeMapping}
                 value={selectedMappingOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -175,13 +176,14 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
                   darkMode:
                     !applicationStore.layoutService
-                      .TEMPORARY__isLightThemeEnabled,
+                      .TEMPORARY__isLightColorThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/workflows/ServiceQueryBuilder.tsx

@@ -122,7 +122,8 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                 onChange={onServiceOptionChange}
                 value={selectedServiceOption}
                 darkMode={
-                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
                 }
               />
             </div>
@@ -149,7 +150,7 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                     value={selectedExecutionContextOption}
                     darkMode={
                       !applicationStore.layoutService
-                        .TEMPORARY__isLightThemeEnabled
+                        .TEMPORARY__isLightColorThemeEnabled
                     }
                   />
                 </div>

package/src/index.ts

@@ -14,19 +14,21 @@
  * limitations under the License.
  */
 
+// application
+export * from './application/QueryBuilderTelemetryHelper.js';
+export * from './application/QueryBuilderEvent.js';
+
 export * from './stores/QueryBuilderBootstraper.js';
 export { QueryBuilder_GraphManagerPreset } from './graphManager/QueryBuilder_GraphManagerPreset.js';
 
-export { QUERY_BUILDER_TEST_ID } from './components/QueryBuilder_TestID.js';
+export { QUERY_BUILDER_TEST_ID } from './application/QueryBuilderTesting.js';
 export {
   type CheckEntitlementEditorRender,
   QueryBuilder_LegendApplicationPlugin,
 } from './components/QueryBuilder_LegendApplicationPlugin.js';
 export { QueryBuilderNavigationBlocker } from './components/QueryBuilderNavigationBlocker.js';
-export {
-  QueryBuilder,
-  QUERY_BUILDER_BACKDROP_CONTAINER_ID,
-} from './components/QueryBuilder.js';
+export { QueryBuilder } from './components/QueryBuilder.js';
+export { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './components/QueryBuilderComponentElement.js';
 export { QueryBuilderState } from './stores/QueryBuilderState.js';
 
 export { QueryBuilderPropertySearchState } from './stores/explorer/QueryBuilderPropertySearchState.js';
@@ -49,8 +51,6 @@ export * from './stores/ServiceInfo.js';
 export * from './components/ServiceQuerySetupUtils.js';
 export * from './components/QuerySetupUtils.js';
 export * from './components/QueryBuilderTextEditor.js';
-export * from './stores/QueryBuilderTelemetry.js';
-export * from './stores/QueryBuilderEvent.js';
 
 export { TEST__setUpQueryBuilder } from './components/QueryBuilderComponentTestUtils.js';
 

package/src/stores/QueryBuilderChangeDetectionState.ts

@@ -145,7 +145,7 @@ export class QueryBuilderChangeDetectionState {
     if (this.hasChanged) {
       this.querybuilderState.applicationStore.alertService.setActionAlertInfo({
         message:
-          'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
+          'Unsaved changes will be lost if you continue. Do you still want to proceed?',
         type: ActionAlertType.CAUTION,
         actions: [
           {

package/src/stores/QueryBuilderResultState.ts

@@ -45,8 +45,8 @@ import {
   getExecutionQueryFromRawLambda,
 } from './shared/LambdaParameterState.js';
 import type { LambdaFunctionBuilderOption } from './QueryBuilderValueSpecificationBuilderHelper.js';
-import { QueryBuilderTelemetry } from './QueryBuilderTelemetry.js';
-import { QUERY_BUILDER_EVENT } from './QueryBuilderEvent.js';
+import { QueryBuilderTelemetryHelper } from '../application/QueryBuilderTelemetryHelper.js';
+import { QUERY_BUILDER_EVENT } from '../application/QueryBuilderEvent.js';
 
 const DEFAULT_LIMIT = 1000;
 
@@ -226,13 +226,8 @@ export class QueryBuilderResultState {
         this.queryBuilderState.graphManagerState,
       );
 
-      QueryBuilderTelemetry.logEvent_QueryRunLaunched(
+      QueryBuilderTelemetryHelper.logEvent_QueryRunLaunched(
         this.queryBuilderState.applicationStore.telemetryService,
-        this.queryBuilderState.applicationContext
-          ? {
-              applicationContext: this.queryBuilderState.applicationContext,
-            }
-          : {},
       );
 
       const stopWatch = new StopWatch();
@@ -263,7 +258,7 @@ export class QueryBuilderResultState {
             stopWatch,
             report.timings,
           );
-        QueryBuilderTelemetry.logEvent_QueryRunSucceeded(
+        QueryBuilderTelemetryHelper.logEvent_QueryRunSucceeded(
           this.queryBuilderState.applicationStore.telemetryService,
           report,
         );
@@ -303,13 +298,8 @@ export class QueryBuilderResultState {
       );
 
       if (debug) {
-        QueryBuilderTelemetry.logEvent_ExecutionPlanDebugLaunched(
+        QueryBuilderTelemetryHelper.logEvent_ExecutionPlanDebugLaunched(
           this.queryBuilderState.applicationStore.telemetryService,
-          this.queryBuilderState.applicationContext
-            ? {
-                applicationContext: this.queryBuilderState.applicationContext,
-              }
-            : {},
         );
         const debugResult =
           (yield this.queryBuilderState.graphManagerState.graphManager.debugExecutionPlanGeneration(
@@ -322,13 +312,8 @@ export class QueryBuilderResultState {
         rawPlan = debugResult.plan;
         this.executionPlanState.setDebugText(debugResult.debug);
       } else {
-        QueryBuilderTelemetry.logEvent_ExecutionPlanGenerationLaunched(
+        QueryBuilderTelemetryHelper.logEvent_ExecutionPlanGenerationLaunched(
           this.queryBuilderState.applicationStore.telemetryService,
-          this.queryBuilderState.applicationContext
-            ? {
-                applicationContext: this.queryBuilderState.applicationContext,
-              }
-            : {},
         );
         rawPlan =
           (yield this.queryBuilderState.graphManagerState.graphManager.generateExecutionPlan(
@@ -361,12 +346,12 @@ export class QueryBuilderResultState {
           report.timings,
         );
       if (debug) {
-        QueryBuilderTelemetry.logEvent_ExecutionPlanDebugSucceeded(
+        QueryBuilderTelemetryHelper.logEvent_ExecutionPlanDebugSucceeded(
           this.queryBuilderState.applicationStore.telemetryService,
           report,
         );
       } else {
-        QueryBuilderTelemetry.logEvent_ExecutionPlanGenerationSucceeded(
+        QueryBuilderTelemetryHelper.logEvent_ExecutionPlanGenerationSucceeded(
           this.queryBuilderState.applicationStore.telemetryService,
           report,
         );

package/src/stores/QueryBuilderState.ts

@@ -80,10 +80,13 @@ import { QueryBuilderConstantsState } from './QueryBuilderConstantsState.js';
 import { QueryBuilderCheckEntitlementsState } from './entitlements/QueryBuilderCheckEntitlementsState.js';
 
 export abstract class QueryBuilderState implements CommandRegistrar {
-  applicationStore: GenericLegendApplicationStore;
-  graphManagerState: GraphManagerState;
+  readonly applicationStore: GenericLegendApplicationStore;
+  readonly graphManagerState: GraphManagerState;
+
+  readonly changeDetectionState: QueryBuilderChangeDetectionState;
+  readonly queryCompileState = ActionState.create();
+  readonly observableContext: ObserverContext;
 
-  changeDetectionState: QueryBuilderChangeDetectionState;
   explorerState: QueryBuilderExplorerState;
   functionsExplorerState: QueryFunctionsExplorerState;
   parametersState: QueryBuilderParametersState;
@@ -98,10 +101,8 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   resultState: QueryBuilderResultState;
   textEditorState: QueryBuilderTextEditorState;
   unsupportedQueryState: QueryBuilderUnsupportedQueryState;
-  observableContext: ObserverContext;
-  titleOfQuery: string | undefined;
 
-  queryCompileState = ActionState.create();
+  titleOfQuery: string | undefined;
   showFunctionsExplorerPanel = false;
   showParametersPanel = false;
   isEditingWatermark = false;
@@ -111,8 +112,6 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   mapping?: Mapping | undefined;
   runtimeValue?: Runtime | undefined;
 
-  applicationContext?: string | undefined;
-
   // NOTE: this makes it so that we need to import components in stores code,
   // we probably want to refactor to an extension mechanism
   TEMPORARY__setupPanelContentRenderer?: (() => React.ReactNode) | undefined;

package/src/stores/explorer/QueryBuilderPropertySearchState.ts

@@ -51,7 +51,7 @@ import {
   QueryBuilderExplorerTreeSubTypeNodeData,
 } from './QueryBuilderExplorerState.js';
 import type { QueryBuilderState } from '../QueryBuilderState.js';
-import { Fuse } from '@finos/legend-art';
+import { FuzzySearchEngine } from '@finos/legend-art';
 import { TextSearchAdvancedConfigState } from '@finos/legend-application';
 
 export class QueryBuilderPropertySearchState {
@@ -71,7 +71,7 @@ export class QueryBuilderPropertySearchState {
   indexedExplorerTreeNodes: QueryBuilderExplorerTreeNodeData[] = [];
 
   // search
-  searchEngine: Fuse<QueryBuilderExplorerTreeNodeData>;
+  searchEngine: FuzzySearchEngine<QueryBuilderExplorerTreeNodeData>;
   searchConfigurationState: TextSearchAdvancedConfigState;
   searchState = ActionState.create();
   searchText = '';
@@ -115,7 +115,7 @@ export class QueryBuilderPropertySearchState {
     this.searchConfigurationState = new TextSearchAdvancedConfigState(
       (): void => this.search(),
     );
-    this.searchEngine = new Fuse(this.indexedExplorerTreeNodes);
+    this.searchEngine = new FuzzySearchEngine(this.indexedExplorerTreeNodes);
   }
 
   setIsSearchPanelOpen(val: boolean): void {
@@ -294,7 +294,7 @@ export class QueryBuilderPropertySearchState {
     }
 
     // indexing
-    this.searchEngine = new Fuse(this.indexedExplorerTreeNodes, {
+    this.searchEngine = new FuzzySearchEngine(this.indexedExplorerTreeNodes, {
       includeScore: true,
       shouldSort: true,
       // Ignore location when computing the search score