@finos/legend-query-builder 0.6.30 → 0.6.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "0.6.30",
+  "version": "0.6.32",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -45,33 +45,33 @@
     "@ag-grid-community/core": "29.1.0",
     "@ag-grid-community/react": "29.1.0",
     "@ag-grid-community/styles": "29.1.0",
-    "@finos/legend-application": "11.0.2",
-    "@finos/legend-art": "5.0.30",
-    "@finos/legend-graph": "23.0.2",
-    "@finos/legend-server-depot": "4.4.3",
-    "@finos/legend-shared": "6.2.23",
-    "@finos/legend-storage": "3.0.38",
+    "@finos/legend-application": "12.0.0",
+    "@finos/legend-art": "5.0.32",
+    "@finos/legend-graph": "23.1.0",
+    "@finos/legend-server-depot": "4.4.5",
+    "@finos/legend-shared": "8.0.0",
+    "@finos/legend-storage": "3.0.40",
     "@testing-library/react": "14.0.0",
     "@types/papaparse": "5.3.7",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "mobx": "6.8.0",
-    "mobx-react-lite": "3.4.0",
-    "monaco-editor": "0.36.0",
-    "papaparse": "5.3.2",
+    "mobx-react-lite": "3.4.3",
+    "monaco-editor": "0.36.1",
+    "papaparse": "5.4.0",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
     "serializr": "3.0.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.43",
-    "@jest/globals": "29.4.3",
+    "@finos/legend-dev-utils": "2.0.45",
+    "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.35.0",
-    "jest": "29.4.3",
+    "jest": "29.5.0",
     "npm-run-all": "4.1.5",
-    "rimraf": "4.1.2",
+    "rimraf": "4.4.0",
     "sass": "1.58.3",
     "typescript": "4.9.5"
   },

package/src/components/QueryBuilder.tsx

@@ -258,7 +258,9 @@ export const QueryBuilder = observer(
     );
     const openQueryTutorial = (): void => {
       if (queryDocEntry?.url) {
-        applicationStore.navigator.visitAddress(queryDocEntry.url);
+        applicationStore.navigationService.navigator.visitAddress(
+          queryDocEntry.url,
+        );
       }
     };
     const toggleShowFunctionPanel = (): void => {

package/src/components/QueryBuilderComponentTestUtils.tsx

@@ -15,7 +15,7 @@
  */
 
 import { type RenderResult, render, waitFor } from '@testing-library/react';
-import { createSpy, Log } from '@finos/legend-shared';
+import { createSpy, LogService } from '@finos/legend-shared';
 import {
   type RawMappingModelCoverageAnalysisResult,
   type RawLambda,
@@ -55,7 +55,10 @@ export const TEST__setUpQueryBuilder = async (
 }> => {
   const pluginManager = TEST__LegendApplicationPluginManager.create();
   pluginManager.usePresets([new QueryBuilder_GraphManagerPreset()]).install();
-  const graphManagerState = new GraphManagerState(pluginManager, new Log());
+  const graphManagerState = new GraphManagerState(
+    pluginManager,
+    new LogService(),
+  );
   await graphManagerState.initializeSystem();
   await graphManagerState.graphManager.buildGraph(
     graphManagerState.graph,

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -144,9 +144,13 @@ const QueryBuilderConstantExpressionEditor = observer(
                 options={typeOptions}
                 onChange={changeType}
                 value={selectedType}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/QueryBuilderDiffPanel.tsx

@@ -64,7 +64,7 @@ const TextDiffView = observer(
         const element = editorRef.current;
         const _editor = monacoEditorAPI.createDiffEditor(element, {
           ...getBaseTextEditorOptions(),
-          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+          theme: applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
             : EDITOR_THEME.LEGEND,
           readOnly: true,

package/src/components/QueryBuilderNavigationBlocker.tsx

@@ -29,10 +29,10 @@ export const QueryBuilderNavigationBlocker = observer(
     const applicationStore = useApplicationStore();
 
     useEffect(() => {
-      applicationStore.navigator.blockNavigation(
+      applicationStore.navigationService.navigator.blockNavigation(
         [(): boolean => queryBuilderState.changeDetectionState.hasChanged],
         (onProceed: () => void): void => {
-          applicationStore.setActionAlertInfo({
+          applicationStore.alertService.setActionAlertInfo({
             // TODO?: should we make this message generic like the `BeforeUnloadEvent` message?
             message:
               'Unsaved changes to your query will be lost if you continue. Do you still want to proceed?',
@@ -52,12 +52,12 @@ export const QueryBuilderNavigationBlocker = observer(
           });
         },
         () =>
-          applicationStore.notifyWarning(
+          applicationStore.notificationService.notifyWarning(
             `Navigation from the query builder is blocked`,
           ),
       );
       return (): void => {
-        applicationStore.navigator.unblockNavigation();
+        applicationStore.navigationService.navigator.unblockNavigation();
       };
     }, [applicationStore, queryBuilderState]);
 

package/src/components/QueryBuilderParametersPanel.tsx

@@ -174,9 +174,13 @@ const VariableExpressionEditor = observer(
                 options={typeOptions}
                 onChange={changeType}
                 value={selectedType}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -199,7 +203,9 @@ const VariableExpressionEditor = observer(
                     selectedMultiplicity.value,
                   )
                 }
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
               />
             </div>
           </ModalBody>

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -169,7 +169,7 @@ const DerivedPropertyParameterValueEditor = observer(
         isDefaultDatePropagationSupported(nextExpression, queryBuilderState) &&
         nextExpression.func.value.genericType.value.rawType instanceof Class
       ) {
-        queryBuilderState.applicationStore.setActionAlertInfo({
+        queryBuilderState.applicationStore.alertService.setActionAlertInfo({
           message:
             'You have just changed a milestoning date in the property expression chain, this date will be propagated down the rest of the chain. Do you want to proceed? Otherwise, you can choose to propagate the default milestoning dates instead.',
           type: ActionAlertType.CAUTION,

package/src/components/QueryBuilderResultPanel.tsx

@@ -188,7 +188,7 @@ const QueryBuilderGridResultContextMenu = observer(
         );
       } catch (error) {
         assertErrorThrown(error);
-        applicationStore.notifyWarning(error.message);
+        applicationStore.notificationService.notifyWarning(error.message);
         return;
       }
       postFilterState.addNodeFromNode(
@@ -278,11 +278,11 @@ const QueryBuilderGridResultContextMenu = observer(
     };
 
     const handleCopyCellValue = applicationStore.guardUnhandledError(() =>
-      applicationStore.copyTextToClipboard(event?.value),
+      applicationStore.clipboardService.copyTextToClipboard(event?.value),
     );
 
     const handleCopyRowValue = applicationStore.guardUnhandledError(() =>
-      applicationStore.copyTextToClipboard(
+      applicationStore.clipboardService.copyTextToClipboard(
         Object.values(event?.data).toString(),
       ),
     );
@@ -456,7 +456,7 @@ export const QueryBuilderResultPanel = observer(
     };
 
     const confirmExport = (format: EXECUTION_SERIALIZATION_FORMAT): void => {
-      applicationStore.setActionAlertInfo({
+      applicationStore.alertService.setActionAlertInfo({
         message: USER_ATTESTATION_MESSAGE,
         type: ActionAlertType.CAUTION,
         actions: [

package/src/components/QueryBuilderSideBar.tsx

@@ -179,10 +179,14 @@ export const QueryBuilderClassSelector = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+              darkMode={
+                !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+              }
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                darkMode:
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightThemeEnabled,
                 graph: queryBuilderState.graphManagerState.graph,
               })}
             />
@@ -337,10 +341,14 @@ const BasicQueryBuilderSetup = observer(
                 options={mappingOptions}
                 onChange={changeMapping}
                 value={selectedMappingOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -367,10 +375,14 @@ const BasicQueryBuilderSetup = observer(
                 options={runtimeOptions}
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/QueryBuilderTextEditor.tsx

@@ -48,7 +48,7 @@ export const QueryBuilderTextEditor = observer(
     const discardChanges = (): void => {
       queryBuilderState.textEditorState.setMode(undefined);
       // force close the backdrop just in case changes are discarded when there are grammar issues
-      applicationStore.setShowBackdrop(false);
+      applicationStore.layoutService.setShowBackdrop(false);
     };
     const mode = queryTextEditorState.mode;
     useEffect(() => {

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -488,7 +488,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
           !(
             node instanceof QueryBuilderExplorerTreePropertyNodeData ||
             node instanceof QueryBuilderExplorerTreeRootNodeData
-          ) || applicationStore.showBackdrop
+          ) || applicationStore.layoutService.showBackdrop
         }
         menuProps={{ elevation: 7 }}
         onOpen={onContextMenuOpen}
@@ -852,7 +852,7 @@ export const QueryBuilderExplorerPanel = observer(
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_EXPLORER}
         className={clsx('panel query-builder__explorer', {
-          backdrop__element: applicationStore.showBackdrop,
+          backdrop__element: applicationStore.layoutService.showBackdrop,
         })}
       >
         <div className="panel__header">

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

@@ -308,7 +308,7 @@ const QueryBuilderPostFilterConditionEditor = observer(
         ) {
           node.condition.setValue(item.variable);
         } else {
-          applicationStore.notifyWarning(
+          applicationStore.notificationService.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType?.name}.`,
           );
         }
@@ -508,7 +508,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
             );
           } catch (error) {
             assertErrorThrown(error);
-            applicationStore.notifyWarning(error.message);
+            applicationStore.notificationService.notifyWarning(error.message);
             return;
           }
           if (node instanceof QueryBuilderPostFilterTreeGroupNodeData) {
@@ -842,7 +842,7 @@ const QueryBuilderPostFilterPanelContent = observer(
           );
         } catch (error) {
           assertErrorThrown(error);
-          applicationStore.notifyError(error.message);
+          applicationStore.notificationService.notifyError(error.message);
           return;
         }
         // NOTE: unfocus the current node when DnD a new node to the tree

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

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

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

@@ -160,7 +160,9 @@ const TDSColumnSelectorEditor = observer(
           disabled={options.length < 1}
           onChange={onChange}
           value={value}
-          darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+          }
         />
         <button
           className="query-builder__olap__tds__column__remove-btn btn--dark btn--caution"
@@ -269,7 +271,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
             'query-builder__olap__modal',
             {
               'query-editor--light':
-                applicationStore.TEMPORARY__isLightThemeEnabled,
+                applicationStore.layoutService.TEMPORARY__isLightThemeEnabled,
             },
           ])}
         >
@@ -315,7 +317,8 @@ const QueryBuilderWindowColumnModalEditor = observer(
                             label: windowOpColumn.columnName,
                           }}
                           darkMode={
-                            !applicationStore.TEMPORARY__isLightThemeEnabled
+                            !applicationStore.layoutService
+                              .TEMPORARY__isLightThemeEnabled
                           }
                         />
                       </div>
@@ -430,7 +433,8 @@ const QueryBuilderWindowColumnModalEditor = observer(
                           label: sortByState.columnState.columnName,
                         }}
                         darkMode={
-                          !applicationStore.TEMPORARY__isLightThemeEnabled
+                          !applicationStore.layoutService
+                            .TEMPORARY__isLightThemeEnabled
                         }
                       />
                     </div>
@@ -639,7 +643,10 @@ const TDSColumnReferenceEditor = observer(
                   disabled={options.length < 1}
                   onChange={onChange}
                   value={value}
-                  darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -1131,7 +1138,7 @@ export const QueryBuilderTDSWindowPanel = observer(
           tdsWindowState.addWindowColumn(newWindowState);
         } catch (error) {
           assertErrorThrown(error);
-          applicationStore.notifyError(error.message);
+          applicationStore.notificationService.notifyError(error.message);
           return;
         }
       },

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -162,7 +162,7 @@ const QueryBuilderFilterConditionEditor = observer(
         if (isTypeCompatibleForAssignment(parameterType, conditionValueType)) {
           node.condition.setValue(item.variable);
         } else {
-          applicationStore.notifyWarning(
+          applicationStore.notificationService.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType.name}.`,
           );
         }
@@ -423,7 +423,7 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             );
           } catch (error) {
             assertErrorThrown(error);
-            applicationStore.notifyWarning(error.message);
+            applicationStore.notificationService.notifyWarning(error.message);
             return;
           }
           if (node instanceof QueryBuilderFilterTreeGroupNodeData) {
@@ -759,7 +759,7 @@ export const QueryBuilderFilterPanel = observer(
           );
         } catch (error) {
           assertErrorThrown(error);
-          applicationStore.notifyWarning(error.message);
+          applicationStore.notificationService.notifyWarning(error.message);
           return;
         }
         // NOTE: unfocus the current node when DnD a new node to the tree

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -278,7 +278,9 @@ const StringPrimitiveInstanceValueEditor = observer(
             value={selectedValue}
             inputValue={value}
             onInputChange={handleInputChange}
-            darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+            darkMode={
+              !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+            }
             isLoading={isLoading}
             allowCreateWhileLoading={true}
             noOptionsMessage={noOptionsMessage}

package/src/components/shared/CustomDatePicker.tsx

@@ -48,7 +48,10 @@ import {
   UnsupportedOperationError,
 } from '@finos/legend-shared';
 import { useEffect, useRef, useState } from 'react';
-import { buildPrimitiveInstanceValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
+import {
+  buildPrimitiveInstanceValue,
+  createSupportedFunctionExpression,
+} from '../../stores/shared/ValueSpecificationEditorHelper.js';
 import {
   functionExpression_addParameterValue,
   instanceValue_setValue,
@@ -329,26 +332,16 @@ const buildPureDateFunctionExpression = (
   } else {
     switch (datePickerOption.value) {
       case CUSTOM_DATE_PICKER_OPTION.TODAY: {
-        const todaySFE = new SimpleFunctionExpression(
+        return createSupportedFunctionExpression(
           SUPPORTED_FUNCTIONS.TODAY,
+          PrimitiveType.STRICTDATE,
         );
-        valueSpecification_setGenericType(
-          todaySFE,
-          GenericTypeExplicitReference.create(
-            new GenericType(PrimitiveType.STRICTDATE),
-          ),
-        );
-        return todaySFE;
       }
       case CUSTOM_DATE_PICKER_OPTION.NOW: {
-        const nowSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.NOW);
-        valueSpecification_setGenericType(
-          nowSFE,
-          GenericTypeExplicitReference.create(
-            new GenericType(PrimitiveType.DATETIME),
-          ),
+        return createSupportedFunctionExpression(
+          SUPPORTED_FUNCTIONS.NOW,
+          PrimitiveType.DATETIME,
         );
-        return nowSFE;
       }
       case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_YEAR: {
         const firstDayOfYearSFE = new SimpleFunctionExpression(

package/src/components/shared/LambdaEditor.tsx

@@ -185,7 +185,7 @@ const LambdaEditorInline = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
-          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+          theme: applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
             : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
@@ -464,7 +464,7 @@ const LambdaEditorPopUp = observer(
         const _editor = monacoEditorAPI.create(element, {
           ...getBaseTextEditorOptions(),
           language: EDITOR_LANGUAGE.PURE,
-          theme: applicationStore.TEMPORARY__isLightThemeEnabled
+          theme: applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
             ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
             : EDITOR_THEME.LEGEND,
         });
@@ -595,7 +595,7 @@ const LambdaEditorPopUp = observer(
             },
             {
               'lambda-editor--light':
-                applicationStore.TEMPORARY__isLightThemeEnabled,
+                applicationStore.layoutService.TEMPORARY__isLightThemeEnabled,
             },
           )}
         >

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -153,10 +153,14 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 options={mappingOptions}
                 onChange={changeMapping}
                 value={selectedMappingOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -178,10 +182,14 @@ const ClassQueryBuilderSetupPanelContent = observer(
                 options={runtimeOptions}
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -147,10 +147,14 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 options={mappingOptions}
                 onChange={changeMapping}
                 value={selectedMappingOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
@@ -170,10 +174,14 @@ const MappingQueryBuilderSetupPanelContent = observer(
                 options={runtimeOptions}
                 onChange={changeRuntime}
                 value={selectedRuntimeOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
                 filterOption={runtimeFilterOption}
                 formatOptionLabel={getRuntimeOptionFormatter({
-                  darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
+                  darkMode:
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightThemeEnabled,
                   pureModel: queryBuilderState.graphManagerState.graph,
                 })}
               />

package/src/components/workflows/ServiceQueryBuilder.tsx

@@ -121,7 +121,9 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                 }
                 onChange={onServiceOptionChange}
                 value={selectedServiceOption}
-                darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                darkMode={
+                  !applicationStore.layoutService.TEMPORARY__isLightThemeEnabled
+                }
               />
             </div>
             {/* We will display mapping and runtime selector for single-execution and execution context for multi-execution */}
@@ -145,7 +147,10 @@ const ServiceQueryBuilderSetupPanelContent = observer(
                     }
                     onChange={onExecutionContextOptionChange}
                     value={selectedExecutionContextOption}
-                    darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightThemeEnabled
+                    }
                   />
                 </div>
               </>

package/src/graphManager/protocol/pure/v1/V1_QueryBuilder_PureGraphManagerExtension.ts

@@ -87,7 +87,7 @@ export class V1_QueryBuilder_PureGraphManagerExtension extends QueryBuilder_Pure
         graph,
         graph,
         this.graphManager.graphBuilderExtensions,
-        this.graphManager.log,
+        this.graphManager.logService,
       ).build();
       // build include index for compatible runtime analysis
       v1Mappings.forEach((element) => {
@@ -185,7 +185,7 @@ export class V1_QueryBuilder_PureGraphManagerExtension extends QueryBuilder_Pure
       graph,
       graph,
       this.graphManager.graphBuilderExtensions,
-      this.graphManager.log,
+      this.graphManager.logService,
     ).build();
 
     graphBuilderInput

package/src/stores/QueryBuilderChangeDetectionState.ts

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

package/src/stores/QueryBuilderConstantsState.ts

@@ -77,7 +77,9 @@ export class QueryBuilderConstantExpressionState implements Hashable {
         this.setValueSpec(valSpec);
       } catch (error) {
         assertErrorThrown(error);
-        this.queryBuilderState.applicationStore.notifyError(error.message);
+        this.queryBuilderState.applicationStore.notificationService.notifyError(
+          error.message,
+        );
       }
     }
   }