@finos/legend-application-studio 15.1.0 → 16.0.0

package/src/components/editor/edit-panel/uml-editor/StereotypeSelector.tsx

@@ -38,7 +38,10 @@ import {
   annotatedElement_swapStereotypes,
   stereotypeReference_setValue,
 } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
-import type { PackageableElementOption } from '@finos/legend-application';
+import {
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-application';
 import { useDrop, useDrag } from 'react-dnd';
 
 interface StereotypeOption {
@@ -81,9 +84,9 @@ export const StereotypeSelector = observer(
     const editorStore = useEditorStore();
 
     // Profile
-    const profileOptions = editorStore.profileOptions.filter(
-      (p) => p.value.p_stereotypes.length,
-    );
+    const profileOptions = editorStore.graphManagerState.usableProfiles
+      .map(buildElementOption)
+      .filter((p) => p.value.p_stereotypes.length);
     const filterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,

package/src/components/editor/edit-panel/uml-editor/TaggedValueEditor.tsx

@@ -42,7 +42,10 @@ import {
   taggedValue_setTag,
   annotatedElement_swapTaggedValues,
 } from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
-import type { PackageableElementOption } from '@finos/legend-application';
+import {
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-application';
 import { useDrop, useDrag } from 'react-dnd';
 
 interface TagOption {
@@ -88,9 +91,9 @@ export const TaggedValueEditor = observer(
       HTMLTextAreaElement | HTMLInputElement
     > = (event) => taggedValue_setValue(taggedValue, event.target.value);
     // Profile
-    const profileOptions = editorStore.profileOptions.filter(
-      (p) => p.value.p_tags.length,
-    );
+    const profileOptions = editorStore.graphManagerState.usableProfiles
+      .map(buildElementOption)
+      .filter((p) => p.value.p_tags.length);
     const profileFilterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -41,6 +41,7 @@ import {
 import type { FileGenerationTypeOption } from '../../../stores/editor-state/GraphGenerationState.js';
 import { flowResult } from 'mobx';
 import {
+  buildElementOption,
   getPackageableElementOptionFormatter,
   useApplicationStore,
   type PackageableElementOption,
@@ -164,7 +165,8 @@ const NewRuntimeDriverEditor = observer(() => {
   );
   // mapping
   const mapping = newRuntimeDriver.mapping;
-  const mappingOptions = editorStore.mappingOptions;
+  const mappingOptions =
+    editorStore.graphManagerState.usableMappings.map(buildElementOption);
   const selectedMappingOption = { label: mapping?.path ?? '', value: mapping };
   const onMappingSelectionChange = (
     val: PackageableElementOption<Mapping>,
@@ -216,7 +218,10 @@ const NewPureModelConnectionDriverEditor = observer(
     }): void => newConnectionDriver.setStore(val.value);
     // class
     const _class = newConnectionValueDriver.class;
-    const classOptions = editorStore.classOptions.slice().sort(compareLabelFn);
+    const classOptions = editorStore.graphManagerState.usableClasses
+      .map(buildElementOption)
+      .slice()
+      .sort(compareLabelFn);
     const selectedClassOption = _class
       ? { label: _class.path, value: _class }
       : null;
@@ -321,7 +326,8 @@ const NewServiceDriverEditor = observer(() => {
     editorStore.newElementState.getNewElementDriver(NewServiceDriver);
   // mapping
   const currentMappingOption = newServiceDriver.mappingOption;
-  const mappingOptions = editorStore.mappingOptions;
+  const mappingOptions =
+    editorStore.graphManagerState.usableMappings.map(buildElementOption);
   const onMappingChange = (
     val: PackageableElementOption<Mapping> | null,
   ): void => {

package/src/components/editor/side-bar/Explorer.tsx

@@ -75,10 +75,12 @@ import {
   isSystemElement,
   isDependencyElement,
   isElementReadOnly,
+  Class,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelUtil.js';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
+import { queryClass } from '../edit-panel/uml-editor/ClassQueryBuilder.js';
 
 const ElementRenamer = observer(() => {
   const editorStore = useEditorStore();
@@ -198,6 +200,23 @@ const ExplorerContextMenu = observer(
         ? node.packageableElement
         : undefined
       : editorStore.graphManagerState.graph.root;
+    const elementTypes = ([PACKAGEABLE_ELEMENT_TYPE.PACKAGE] as string[])
+      .concat(editorStore.getSupportedElementTypes())
+      .filter(
+        // NOTE: we can only create package in root
+        (type) =>
+          _package !== editorStore.graphManagerState.graph.root ||
+          type === PACKAGEABLE_ELEMENT_TYPE.PACKAGE,
+      );
+
+    // actions
+    const buildQuery = editorStore.applicationStore.guardUnhandledError(
+      async () => {
+        if (node?.packageableElement instanceof Class) {
+          await queryClass(node.packageableElement, editorStore);
+        }
+      },
+    );
     const removeElement = (): void => {
       if (node) {
         flowResult(editorStore.deleteElement(node.packageableElement)).catch(
@@ -237,21 +256,11 @@ const ExplorerContextMenu = observer(
           .catch(applicationStore.alertUnhandledError);
       }
     };
-
     const createNewElement =
       (type: string): (() => void) =>
       (): void =>
         editorStore.newElementState.openModal(type, _package);
 
-    const elementTypes = ([PACKAGEABLE_ELEMENT_TYPE.PACKAGE] as string[])
-      .concat(editorStore.getSupportedElementTypes())
-      .filter(
-        // NOTE: we can only create package in root
-        (type) =>
-          _package !== editorStore.graphManagerState.graph.root ||
-          type === PACKAGEABLE_ELEMENT_TYPE.PACKAGE,
-      );
-
     if (_package && !isReadOnly) {
       return (
         <MenuContent data-testid={LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU}>
@@ -281,6 +290,7 @@ const ExplorerContextMenu = observer(
 
     return (
       <MenuContent data-testid={LEGEND_STUDIO_TEST_ID.EXPLORER_CONTEXT_MENU}>
+        <MenuContentItem onClick={buildQuery}>Query...</MenuContentItem>
         {extraExplorerContextMenuItems}
         {!isReadOnly && node && (
           <>

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -38,6 +38,7 @@ import {
 import {
   AssertFail,
   EqualToJsonAssertFail,
+  PackageableElement,
   TestError,
 } from '@finos/legend-graph';
 import { type GeneratorFn, isNonNullable } from '@finos/legend-shared';
@@ -58,6 +59,7 @@ import {
 } from '../../../../stores/sidebar-state/testable/GlobalTestRunnerState.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { TextDiffView } from '../../../shared/DiffView.js';
+import { getElementTypeIcon } from '../../../shared/ElementIconUtils.js';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 
@@ -249,6 +251,7 @@ const TestableTreeNodeContainer: React.FC<
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect } = props;
   const { treeData, testableState, globalTestRunnerState } = props.innerProps;
+  const editorStore = useEditorStore();
   const results = testableState.results;
   const expandIcon =
     node instanceof AssertionTestTreeNodeData ? (
@@ -259,7 +262,16 @@ const TestableTreeNodeContainer: React.FC<
       <ChevronRightIcon />
     );
   const nodeIcon =
-    node instanceof TestableTreeNodeData ? node.testableMetadata.icon : null;
+    node instanceof TestableTreeNodeData
+      ? node.testableMetadata.testable instanceof PackageableElement
+        ? getElementTypeIcon(
+            editorStore,
+            editorStore.graphState.getPackageableElementType(
+              node.testableMetadata.testable,
+            ),
+          )
+        : null
+      : null;
   const resultIcon = getTestableResultIcon(
     getNodeTestableResult(
       node,

package/src/components/project-viewer/ProjectViewer.tsx

@@ -16,8 +16,6 @@
 
 import { useEffect, Fragment } from 'react';
 import { observer } from 'mobx-react-lite';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useResizeDetector } from 'react-resize-detector';
 import { EditPanel } from '../editor/edit-panel/EditPanel.js';
 import { GrammarTextEditor } from '../editor/edit-panel/GrammarTextEditor.js';
@@ -68,6 +66,7 @@ import { Explorer } from '../editor/side-bar/Explorer.js';
 import { ProjectOverview } from '../editor/side-bar/ProjectOverview.js';
 import { WorkflowManager } from '../editor/side-bar/WorkflowManager.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
+import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 const ProjectViewerStatusBar = observer(() => {
   const params = useParams<ViewerPathParams>();
@@ -313,45 +312,44 @@ export const ProjectViewer = withEditorStore(
       }, [applicationStore, viewerStore, params]);
 
       return (
-        <DndProvider backend={HTML5Backend}>
-          <div className="app__page">
-            <div className="editor viewer">
-              <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-                <div className="editor__body">
-                  <ProjectViewerActivityBar />
-                  <div ref={ref} className="editor__content-container">
-                    <div className="editor__content">
-                      <ResizablePanelGroup orientation="vertical">
-                        <ResizablePanel
-                          {...getControlledResizablePanelProps(
-                            editorStore.sideBarDisplayState.size === 0,
-                            {
-                              onStopResize: resizeSideBar,
-                              size: editorStore.sideBarDisplayState.size,
-                            },
-                          )}
-                          direction={1}
-                        >
-                          <ProjectViewerSideBar />
-                        </ResizablePanel>
-                        <ResizablePanelSplitter />
-                        <ResizablePanel minSize={300}>
-                          {editorStore.isInFormMode && <EditPanel />}
-                          {editorStore.isInGrammarTextMode && (
-                            <GrammarTextEditor />
-                          )}
-                        </ResizablePanel>
-                      </ResizablePanelGroup>
-                    </div>
+        <div className="app__page">
+          <div className="editor viewer">
+            <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
+              <div className="editor__body">
+                <ProjectViewerActivityBar />
+                <div ref={ref} className="editor__content-container">
+                  <div className="editor__content">
+                    <ResizablePanelGroup orientation="vertical">
+                      <ResizablePanel
+                        {...getControlledResizablePanelProps(
+                          editorStore.sideBarDisplayState.size === 0,
+                          {
+                            onStopResize: resizeSideBar,
+                            size: editorStore.sideBarDisplayState.size,
+                          },
+                        )}
+                        direction={1}
+                      >
+                        <ProjectViewerSideBar />
+                      </ResizablePanel>
+                      <ResizablePanelSplitter />
+                      <ResizablePanel minSize={300}>
+                        {editorStore.isInFormMode && <EditPanel />}
+                        {editorStore.isInGrammarTextMode && (
+                          <GrammarTextEditor />
+                        )}
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
                   </div>
                 </div>
-                <ProjectViewerStatusBar />
-                {extraEditorExtensionComponents}
-                {allowOpeningElement && <ProjectSearchCommand />}
-              </GlobalHotKeys>
-            </div>
+              </div>
+              {allowOpeningElement && <ProjectSearchCommand />}
+              <ProjectViewerStatusBar />
+              <EmbeddedQueryBuilder />
+              {extraEditorExtensionComponents}
+            </GlobalHotKeys>
           </div>
-        </DndProvider>
+        </div>
       );
     }),
   ),

package/src/index.ts

@@ -21,9 +21,9 @@ export * from './application/LegendStudio.js';
 export * from './application/LegendStudioApplicationConfig.js';
 export * from './application/LegendStudioPluginManager.js';
 export * from './stores/LegendStudioAppEvent.js';
+export { queryClass } from './components/editor/edit-panel/uml-editor/ClassQueryBuilder.js';
 
 // stores
-export { FormModeCompilationOutcome } from './stores/EditorGraphState.js';
 export * from './stores/LegendStudioApplicationPlugin.js';
 export * from './stores/EditorStore.js';
 export * from './stores/EditorConfig.js';
@@ -68,9 +68,13 @@ export {
 export * from './components/LegendStudioTestID.js';
 export * from './stores/EditorStoreTestUtils.js';
 
+export { PostProcessorEditorState } from './stores/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 export { MappingExecutionState } from './stores/editor-state/element-editor-state/mapping/MappingExecutionState.js';
 export { MappingTestState } from './stores/editor-state/element-editor-state/mapping/MappingTestState.js';
-export { ConnectionValueState } from './stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
+export {
+  ConnectionValueState,
+  RelationalDatabaseConnectionValueState,
+} from './stores/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 export * from './stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
 export { MappingElementState } from './stores/editor-state/element-editor-state/mapping/MappingElementState.js';
 export { UnsupportedInstanceSetImplementationState } from './stores/editor-state/element-editor-state/mapping/UnsupportedInstanceSetImplementationState.js';
@@ -89,7 +93,7 @@ export { WorkspaceSetupStore } from './stores/workspace-setup/WorkspaceSetupStor
  */
 
 export {
-  ConnectionEditor_StringEditor,
+  ConnectionEditor_TextEditor,
   ConnectionEditor_BooleanEditor,
   ConnectionEditor_ArrayEditor,
 } from './components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.js';

package/src/stores/DSLMapping_LegendStudioApplicationPlugin_Extension.ts

@@ -23,8 +23,6 @@ import type {
   SetImplementation,
   InstanceSetImplementation,
 } from '@finos/legend-graph';
-import type { MappingTestState } from './editor-state/element-editor-state/mapping/MappingTestState.js';
-import type { MappingExecutionState } from './editor-state/element-editor-state/mapping/MappingExecutionState.js';
 import type { NewConnectionValueDriver } from './editor/NewElementState.js';
 import type {
   MappingElement,
@@ -95,21 +93,6 @@ export type NewConnectionDriverCreator = (
   store: Store,
 ) => NewConnectionValueDriver<Connection> | undefined;
 
-export type MappingExecutionQueryEditorActionConfiguration = {
-  key: string;
-  renderer: (
-    executionState: MappingExecutionState,
-  ) => React.ReactNode | undefined;
-};
-
-export type MappingTestQueryEditorActionConfiguration = {
-  key: string;
-  renderer: (
-    testState: MappingTestState,
-    isReadOnly: boolean,
-  ) => React.ReactNode | undefined;
-};
-
 /**
  * @returns a boolean indicating whether the update has ocurred or not
  */
@@ -192,16 +175,6 @@ export interface DSLMapping_LegendStudioApplicationPlugin_Extension
    */
   getExtraNewConnectionDriverCreators?(): NewConnectionDriverCreator[];
 
-  /**
-   * Get the list of actions for mapping execution query editor.
-   */
-  getExtraMappingExecutionQueryEditorActionConfigurations?(): MappingExecutionQueryEditorActionConfiguration[];
-
-  /**
-   * Get the list of actions for mapping test query editor.
-   */
-  getExtraMappingTestQueryEditorActionConfigurations?(): MappingTestQueryEditorActionConfiguration[];
-
   /**
    * Get the list of instance set implementation source updaters.
    */

package/src/stores/DSLService_LegendStudioApplicationPlugin_Extension.ts

@@ -16,15 +16,6 @@
 
 import type { DSL_LegendStudioApplicationPlugin_Extension } from './LegendStudioApplicationPlugin.js';
 import type { Connection, Runtime } from '@finos/legend-graph';
-import type { ServicePureExecutionState } from './editor-state/element-editor-state/service/ServiceExecutionState.js';
-
-export type ServiceQueryEditorActionConfiguration = {
-  key: string;
-  renderer: (
-    executionState: ServicePureExecutionState,
-    isReadOnly: boolean,
-  ) => React.ReactNode | undefined;
-};
 
 export type ServiceTestRuntimeConnectionBuilder = (
   sourceConnection: Connection,
@@ -34,11 +25,6 @@ export type ServiceTestRuntimeConnectionBuilder = (
 
 export interface DSLService_LegendStudioApplicationPlugin_Extension
   extends DSL_LegendStudioApplicationPlugin_Extension {
-  /**
-   * Get the list of actions for service execution query editor.
-   */
-  getExtraServiceQueryEditorActionConfigurations?(): ServiceQueryEditorActionConfiguration[];
-
   /**
    * Get the list of service test runtime connection builder for a provided connection and test data.
    */

package/src/stores/EditorGraphState.ts

@@ -1208,7 +1208,7 @@ export class EditorGraphState {
         (plugin) =>
           (
             plugin as DSL_LegendStudioApplicationPlugin_Extension
-          ).getExtraElementTypeGetters?.() ?? [],
+          ).getExtraElementClassifiers?.() ?? [],
       );
     for (const labelGetter of extraElementTypeLabelGetters) {
       const label = labelGetter(element);

package/src/stores/EditorStore.ts

@@ -95,7 +95,6 @@ import {
 } from '@finos/legend-server-sdlc';
 import {
   type PackageableElement,
-  type Type,
   type Store,
   type GraphManagerState,
   GRAPH_MANAGER_EVENT,
@@ -114,7 +113,6 @@ import {
   PackageableConnection,
   FileGenerationSpecification,
   GenerationSpecification,
-  PRIMITIVE_TYPE,
   Package,
   DataElement,
   isElementReadOnly,
@@ -144,6 +142,7 @@ import {
 import { PACKAGEABLE_ELEMENT_TYPE } from './shared/ModelUtil.js';
 import { GlobalTestRunnerState } from './sidebar-state/testable/GlobalTestRunnerState.js';
 import type { LegendStudioApplicationStore } from './LegendStudioBaseStore.js';
+import { EmbeddedQueryBuilderState } from './EmbeddedQueryBuilderState.js';
 
 export abstract class EditorExtensionState {
   /**
@@ -196,6 +195,7 @@ export class EditorStore {
   localChangesState: LocalChangesState;
   conflictResolutionState: WorkspaceUpdateConflictResolutionState;
   devToolState: DevToolState;
+  embeddedQueryBuilderState: EmbeddedQueryBuilderState;
 
   private _isDisposed = false;
   initState = ActionState.create();
@@ -291,6 +291,7 @@ export class EditorStore {
     this.graphManagerState = graphManagerState;
     this.changeDetectionState = new ChangeDetectionState(this, this.graphState);
     this.devToolState = new DevToolState(this);
+    this.embeddedQueryBuilderState = new EmbeddedQueryBuilderState(this);
     // side bar panels
     this.explorerTreeState = new ExplorerTreeState(this);
     this.projectOverviewState = new ProjectOverviewState(this, this.sdlcState);
@@ -1344,89 +1345,12 @@ export class EditorStore {
     }
   }
 
-  get enumerationOptions(): PackageableElementOption<Enumeration>[] {
-    return this.graphManagerState.graph.ownEnumerations
-      .concat(this.graphManagerState.graph.dependencyManager.enumerations)
-      .map(buildElementOption);
-  }
-
-  get classOptions(): PackageableElementOption<Class>[] {
-    return this.graphManagerState.graph.ownClasses
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownClasses,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.classes)
-      .map(buildElementOption);
-  }
-
-  get associationOptions(): PackageableElementOption<Association>[] {
-    return this.graphManagerState.graph.ownAssociations
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownAssociations,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.associations)
-      .map(buildElementOption);
-  }
-
-  get profileOptions(): PackageableElementOption<Profile>[] {
-    return this.graphManagerState.graph.ownProfiles
-      .concat(
-        this.graphManagerState.collectExposedSystemElements(
-          this.graphManagerState.graph.systemModel.ownProfiles,
-        ),
-      )
-      .concat(this.graphManagerState.graph.dependencyManager.profiles)
-      .map(buildElementOption);
-  }
-
-  get classPropertyGenericTypeOptions(): PackageableElementOption<Type>[] {
-    return this.graphManagerState.graph.primitiveTypes
-      .filter((p) => p.path !== PRIMITIVE_TYPE.LATESTDATE)
-      .map(buildElementOption)
-      .concat(
-        this.graphManagerState.graph.ownTypes
-          .concat(
-            this.graphManagerState.collectExposedSystemElements(
-              this.graphManagerState.graph.systemModel.ownTypes,
-            ),
-          )
-          .concat(this.graphManagerState.graph.dependencyManager.types)
-          .map(buildElementOption),
-      );
-  }
-
-  get mappingOptions(): PackageableElementOption<Mapping>[] {
-    return this.graphManagerState.graph.ownMappings
-      .concat(this.graphManagerState.graph.dependencyManager.mappings)
-      .map(buildElementOption);
-  }
-
-  get runtimeOptions(): PackageableElementOption<PackageableRuntime>[] {
-    return this.graphManagerState.graph.ownRuntimes
-      .concat(this.graphManagerState.graph.dependencyManager.runtimes)
-      .map(buildElementOption);
-  }
-
-  get serviceOptions(): PackageableElementOption<Service>[] {
-    return this.graphManagerState.graph.ownServices
-      .concat(this.graphManagerState.graph.dependencyManager.services)
-      .map(buildElementOption);
-  }
-
   get storeOptions(): PackageableElementOption<Store>[] {
-    return this.graphManagerState.graph.ownStores
-      .concat(this.graphManagerState.graph.dependencyManager.stores)
-      .map(buildElementOption);
+    return this.graphManagerState.usableStores.map(buildElementOption);
   }
 
   get dataOptions(): PackageableElementOption<DataElement>[] {
-    return this.graphManagerState.graph.ownDataElements
-      .concat(this.graphManagerState.graph.dependencyManager.dataElements)
-      .map(buildElementOption);
+    return this.graphManagerState.usableDataElements.map(buildElementOption);
   }
 
   getSupportedElementTypes(): string[] {

package/src/stores/EmbeddedQueryBuilderState.ts

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { QueryBuilderState } from '@finos/legend-query-builder';
+import type { GeneratorFn } from '@finos/legend-shared';
+import { flow, flowResult, makeObservable, observable } from 'mobx';
+import { FormModeCompilationOutcome } from './EditorGraphState.js';
+import type { EditorStore } from './EditorStore.js';
+
+type EmbeddedQueryBuilderActionConfiguration = {
+  key: string;
+  renderer: (queryBuilderState: QueryBuilderState) => React.ReactNode;
+};
+
+type EmbeddedQueryBuilderConfiguration = {
+  setupQueryBuilderState: () => QueryBuilderState;
+  disableCompile?: boolean | undefined;
+  actionConfigs: EmbeddedQueryBuilderActionConfiguration[];
+};
+
+export class EmbeddedQueryBuilderState {
+  editorStore: EditorStore;
+  queryBuilderState?: QueryBuilderState | undefined;
+  actionConfigs: EmbeddedQueryBuilderActionConfiguration[] = [];
+
+  constructor(editorStore: EditorStore) {
+    makeObservable(this, {
+      queryBuilderState: observable,
+      actionConfigs: observable,
+      setEmbeddedQueryBuilderConfiguration: flow,
+    });
+
+    this.editorStore = editorStore;
+  }
+
+  /**
+   * When opening query builder, we ensure the graph compiles successfully
+   */
+  *setEmbeddedQueryBuilderConfiguration(
+    config: EmbeddedQueryBuilderConfiguration | undefined,
+  ): GeneratorFn<void> {
+    if (config) {
+      if (!this.editorStore.isInFormMode) {
+        return;
+      }
+      if (!config.disableCompile) {
+        this.editorStore.setBlockingAlert({
+          message: 'Compiling graph before building query...',
+          showLoading: true,
+        });
+        const compilationOutcome = (yield flowResult(
+          this.editorStore.graphState.globalCompileInFormMode({
+            // we don't want to notify about compilation success since this is just a simple check
+            // in order to be able to open query builder
+            disableNotificationOnSuccess: true,
+          }),
+        )) as FormModeCompilationOutcome;
+        switch (compilationOutcome) {
+          case FormModeCompilationOutcome.SKIPPED: {
+            this.editorStore.setBlockingAlert(undefined);
+            this.editorStore.applicationStore.notifyWarning(
+              `Can't open query builder: Can't compile at this time, please try again later`,
+            );
+            return;
+          }
+          case FormModeCompilationOutcome.SUCCEEDED: {
+            this.editorStore.setBlockingAlert(undefined);
+            break;
+          }
+          default: {
+            this.editorStore.applicationStore.notifyWarning(
+              `Can't open query builder: Compilation failed! Please fix the compilation issue and try again`,
+            );
+            this.editorStore.setBlockingAlert(undefined);
+            return;
+          }
+        }
+      }
+      if (!this.editorStore.graphState.hasCompilationError) {
+        this.queryBuilderState = config.setupQueryBuilderState();
+        this.actionConfigs = config.actionConfigs;
+      }
+      this.editorStore.setBlockGlobalHotkeys(true);
+      this.editorStore.setHotkeys([]);
+    } else {
+      this.queryBuilderState = undefined;
+      this.actionConfigs = [];
+      this.editorStore.setBlockGlobalHotkeys(false);
+      this.editorStore.resetHotkeys();
+    }
+  }
+}

package/src/stores/LegendStudioApplicationNavigationContext.ts

@@ -24,6 +24,7 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
 
   MODEL_LOADER = 'studio.editor.model-loader',
   TEXT_MODE_EDITOR = 'studio.editor.text-mode-editor',
+  EMBEDDED_QUERY_BUILDER = 'studio.editor.embedded-query-builder',
 
   CLASS_EDITOR = 'studio.editor.class-editor',
   CLASS_EDITOR_PROPERTIES = 'studio.editor.class-editor.properties',