@finos/legend-application-query 6.0.0 → 7.0.1

package/src/components/QueryEditor.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  type SelectComponent,
   Dialog,
   ArrowLeftIcon,
   ExternalLinkSquareIcon,
@@ -25,12 +26,14 @@ import {
   clsx,
   EmptyLightBulbIcon,
   LightBulbIcon,
+  SearchIcon,
+  TimesIcon,
+  CheckSquareIcon,
+  SquareIcon,
 } from '@finos/legend-art';
-import { getQueryParameters } from '@finos/legend-shared';
+import { debounce, getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef } from 'react';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import {
   type MappingQueryCreatorPathParams,
@@ -41,6 +44,7 @@ import {
   LEGEND_QUERY_QUERY_PARAM_TOKEN,
   LEGEND_QUERY_PATH_PARAM_TOKEN,
   generateStudioProjectViewUrl,
+  generateExistingQueryEditorRoute,
 } from '../stores/LegendQueryRouter.js';
 import {
   type QueryEditorStore,
@@ -49,8 +53,10 @@ import {
   QueryExportState,
   ServiceQueryCreatorStore,
 } from '../stores/QueryEditorStore.js';
-import { QueryBuilder } from './query-builder/QueryBuilder.js';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  type ApplicationStore,
+  useApplicationStore,
+} from '@finos/legend-application';
 import {
   MappingQueryCreatorStoreProvider,
   ExistingQueryEditorStoreProvider,
@@ -58,12 +64,17 @@ import {
   useQueryEditorStore,
 } from './QueryEditorStoreProvider.js';
 import {
-  extractElementNameFromPath,
   type RawLambda,
+  extractElementNameFromPath,
 } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { useLegendQueryApplicationStore } from './LegendQueryBaseStoreProvider.js';
-import type { QueryBuilderState } from '../stores/query-builder/QueryBuilderState.js';
+import type { LegendQueryApplicationConfig } from '../application/LegendQueryApplicationConfig.js';
+import type { LegendQueryApplicationPlugin } from '../stores/LegendQueryApplicationPlugin.js';
+import {
+  QueryBuilder,
+  type QueryBuilderState,
+} from '@finos/legend-query-builder';
 
 const QueryExportDialogContent = observer(
   (props: { exportState: QueryExportState }) => {
@@ -190,11 +201,221 @@ const renderQueryEditorHeaderLabel = (
   return null;
 };
 
+const QueryLoader = observer(
+  (props: {
+    editorStore: QueryEditorStore;
+    applicationStore: ApplicationStore<
+      LegendQueryApplicationConfig,
+      LegendQueryApplicationPlugin
+    >;
+  }) => {
+    const { editorStore, applicationStore } = props;
+    const queryFinderRef = useRef<SelectComponent>(null);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const [selectedQueryID, setSelectedQueryID] = useState('');
+    const [isMineOnly, setIsMineOnly] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const closeQueryImporter = (): void => {
+      editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
+    };
+    const handleEnterQueryImporter = (): void =>
+      queryFinderRef.current?.focus();
+    const toggleIsMineOnly = (): void => {
+      setIsMineOnly(!isMineOnly);
+    };
+    const loadSelectedQuery = (): void => {
+      if (selectedQueryID) {
+        editorStore.queryLoaderState.setIsQueryLoaderOpen(false);
+        applicationStore.navigator.jumpTo(
+          generateExistingQueryEditorRoute(selectedQueryID),
+        );
+      }
+    };
+    // search text
+    const debouncedLoadQueries = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(editorStore.queryLoaderState.loadQueries(input)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }, 500),
+      [applicationStore, editorStore.queryLoaderState],
+    );
+    const onSearchTextChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      if (event.target.value !== searchText) {
+        setSearchText(event.target.value);
+        debouncedLoadQueries.cancel();
+        debouncedLoadQueries(event.target.value);
+      }
+    };
+    const clearQuerySearching = (): void => {
+      setSearchText('');
+      debouncedLoadQueries.cancel();
+      debouncedLoadQueries('');
+    };
+
+    useEffect(() => {
+      flowResult(editorStore.queryLoaderState.loadQueries('')).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }, [applicationStore, editorStore.queryLoaderState]);
+
+    return (
+      <Dialog
+        open={editorStore.queryLoaderState.isQueryLoaderOpen}
+        onClose={closeQueryImporter}
+        TransitionProps={{
+          onEnter: handleEnterQueryImporter,
+        }}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <div className="modal modal--dark search-modal">
+          <div className="modal__title">Load Query</div>
+          <div className="query-editor__query-loader__filter-section">
+            <div className="query-editor__query-loader__filter-section__section__toggler">
+              <button
+                className={clsx(
+                  'query-editor__query-loader__filter-section__section__toggler__btn',
+                  {
+                    'query-editor__query-loader__filter-section__section__toggler__btn--toggled':
+                      isMineOnly,
+                  },
+                )}
+                onClick={toggleIsMineOnly}
+                tabIndex={-1}
+              >
+                {isMineOnly ? <CheckSquareIcon /> : <SquareIcon />}
+              </button>
+              <div
+                className="query-editor__query-loader__filter-section__section__toggler__prompt"
+                onClick={toggleIsMineOnly}
+              >
+                Mine Only
+              </div>
+            </div>
+          </div>
+          <div className="query-editor__query-loader__search-section">
+            <div className="query-editor__query-loader__search-section__input__container">
+              <input
+                ref={searchInputRef}
+                className={clsx(
+                  'query-editor__query-loader__search-section__input input--dark',
+                  {
+                    'query-editor__query-loader__search-section__input--searching':
+                      searchText,
+                  },
+                )}
+                onChange={onSearchTextChange}
+                value={searchText}
+                placeholder="Search a query by name"
+              />
+              {!searchText ? (
+                <div className="query-editor__query-loader__search-section__input__search__icon">
+                  <SearchIcon />
+                </div>
+              ) : (
+                <>
+                  <button
+                    className="query-editor__query-loader__search-section__input__clear-btn"
+                    tabIndex={-1}
+                    onClick={clearQuerySearching}
+                    title="Clear"
+                  >
+                    <TimesIcon />
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+          <div className="query-editor__query-loader__body">
+            {editorStore.queryLoaderState.loadQueriesState.hasCompleted && (
+              <>
+                {editorStore.queryLoaderState.queries.length > 0 && (
+                  <>
+                    <table className="table">
+                      <thead>
+                        <tr>
+                          <th className="table__cell--left">Name</th>
+                          <th className="table__cell--left">Author</th>
+                          <th className="table__cell--left">Version</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(isMineOnly
+                          ? editorStore.queryLoaderState.queries.filter(
+                              (q) => q.isCurrentUserQuery,
+                            )
+                          : editorStore.queryLoaderState.queries
+                        ).map((query) => (
+                          <tr
+                            key={query.id}
+                            className={clsx(
+                              'query-editor__query-loader__body__table__row',
+                              {
+                                'query-editor__query-loader__body__table__row--selected':
+                                  selectedQueryID === query.id,
+                              },
+                            )}
+                            onClick={(event) => setSelectedQueryID(query.id)}
+                          >
+                            <td className="table__cell--left">{query.name}</td>
+                            <td className="table__cell--left">
+                              {query.owner ?? 'anonymous'}
+                            </td>
+                            <td className="table__cell--left">
+                              {query.versionId}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </>
+                )}
+                {editorStore.queryLoaderState.queries.length === 0 && (
+                  <BlankPanelContent>No query available</BlankPanelContent>
+                )}
+              </>
+            )}
+            {!editorStore.queryLoaderState.loadQueriesState.hasCompleted && (
+              <>
+                <PanelLoadingIndicator
+                  isLoading={
+                    !editorStore.queryLoaderState.loadQueriesState.hasCompleted
+                  }
+                />
+                <BlankPanelContent>Loading queries...</BlankPanelContent>
+              </>
+            )}
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              onClick={loadSelectedQuery}
+              disabled={selectedQueryID === ''}
+            >
+              Load Query
+            </button>
+            <button className="btn btn--dark" onClick={closeQueryImporter}>
+              Close
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    );
+  },
+);
+
 const QueryEditorHeaderContent = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const editorStore = useQueryEditorStore();
     const applicationStore = useLegendQueryApplicationStore();
+    const openQueryLoader = (): void => {
+      editorStore.queryLoaderState.setIsQueryLoaderOpen(true);
+    };
     const viewQueryProject = (): void => {
       const { groupId, artifactId, versionId } = editorStore.getProjectInfo();
       applicationStore.navigator.openNewWindow(
@@ -232,6 +453,15 @@ const QueryEditorHeaderContent = observer(
           {renderQueryEditorHeaderLabel(editorStore)}
         </div>
         <div className="query-editor__header__actions">
+          <button
+            className="query-editor__header__action btn--dark"
+            tabIndex={-1}
+            onClick={openQueryLoader}
+          >
+            <div className="query-editor__header__action__label">
+              Load Query
+            </div>
+          </button>
           <button
             className="query-editor__header__action query-editor__header__action--simple btn--dark"
             tabIndex={-1}
@@ -254,6 +484,12 @@ const QueryEditorHeaderContent = observer(
               )}
             </button>
           )}
+          {editorStore.queryLoaderState.isQueryLoaderOpen && (
+            <QueryLoader
+              editorStore={editorStore}
+              applicationStore={applicationStore}
+            />
+          )}
           <button
             className="query-editor__header__action btn--dark"
             tabIndex={-1}
@@ -292,47 +528,45 @@ export const QueryEditor = observer(() => {
   }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      <div
-        className={clsx([
-          'query-editor ',
-          {
-            'query-editor--light':
-              applicationStore.TEMPORARY__isLightThemeEnabled,
-          },
-        ])}
-      >
-        <div className="query-editor__header">
-          <button
-            className="query-editor__header__back-btn btn--dark"
-            onClick={backToMainMenu}
-            title="Back to Main Menu"
-          >
-            <ArrowLeftIcon />
-          </button>
-          {!isLoadingEditor && editorStore.queryBuilderState && (
-            <QueryEditorHeaderContent
-              queryBuilderState={editorStore.queryBuilderState}
-            />
-          )}
-        </div>
-        <div className="query-editor__content">
-          <PanelLoadingIndicator isLoading={isLoadingEditor} />
-          {!isLoadingEditor && editorStore.queryBuilderState && (
-            <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
-          )}
-          {(isLoadingEditor || !editorStore.queryBuilderState) && (
-            <BlankPanelContent>
-              {editorStore.initState.message ??
-                editorStore.graphManagerState.systemBuildState.message ??
-                editorStore.graphManagerState.dependenciesBuildState.message ??
-                editorStore.graphManagerState.generationsBuildState.message ??
-                editorStore.graphManagerState.graphBuildState.message}
-            </BlankPanelContent>
-          )}
-        </div>
+    <div
+      className={clsx([
+        'query-editor ',
+        {
+          'query-editor--light':
+            applicationStore.TEMPORARY__isLightThemeEnabled,
+        },
+      ])}
+    >
+      <div className="query-editor__header">
+        <button
+          className="query-editor__header__back-btn btn--dark"
+          onClick={backToMainMenu}
+          title="Back to Main Menu"
+        >
+          <ArrowLeftIcon />
+        </button>
+        {!isLoadingEditor && editorStore.queryBuilderState && (
+          <QueryEditorHeaderContent
+            queryBuilderState={editorStore.queryBuilderState}
+          />
+        )}
+      </div>
+      <div className="query-editor__content">
+        <PanelLoadingIndicator isLoading={isLoadingEditor} />
+        {!isLoadingEditor && editorStore.queryBuilderState && (
+          <QueryBuilder queryBuilderState={editorStore.queryBuilderState} />
+        )}
+        {(isLoadingEditor || !editorStore.queryBuilderState) && (
+          <BlankPanelContent>
+            {editorStore.initState.message ??
+              editorStore.graphManagerState.systemBuildState.message ??
+              editorStore.graphManagerState.dependenciesBuildState.message ??
+              editorStore.graphManagerState.generationsBuildState.message ??
+              editorStore.graphManagerState.graphBuildState.message}
+          </BlankPanelContent>
+        )}
       </div>
-    </DndProvider>
+    </div>
   );
 });
 

package/src/components/QueryEditorComponentTestUtils.tsx

@@ -20,8 +20,6 @@ import { Router } from 'react-router';
 import { createMemoryHistory } from 'history';
 import {
   type TEMPORARY__JestMock,
-  MOBX__disableSpyOrMock,
-  MOBX__enableSpyOrMock,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
 import {
@@ -47,12 +45,14 @@ import { TEST__getTestLegendQueryApplicationConfig } from '../stores/QueryEditor
 import { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import { ExistingQueryEditor } from './QueryEditor.js';
 import { generateExistingQueryEditorRoute } from '../stores/LegendQueryRouter.js';
-import { QUERY_BUILDER_TEST_ID } from './query-builder/QueryBuilder_TestID.js';
 import type { Entity } from '@finos/legend-storage';
 import { ExistingQueryEditorStore } from '../stores/QueryEditorStore.js';
 import { LegendQueryBaseStoreProvider } from './LegendQueryBaseStoreProvider.js';
 import type { LegendQueryApplicationStore } from '../stores/LegendQueryBaseStore.js';
-import type { QueryBuilderState } from '../stores/query-builder/QueryBuilderState.js';
+import {
+  type QueryBuilderState,
+  QUERY_BUILDER_TEST_ID,
+} from '@finos/legend-query-builder';
 
 export const TEST__LegendQueryBaseStoreProvider: React.FC<{
   children: React.ReactNode;
@@ -146,31 +146,33 @@ export const TEST__setUpQueryEditor = async (
   );
   query.content = 'some content';
 
-  MOBX__enableSpyOrMock();
   jest
     .spyOn(MOCK__editorStore.depotServerClient, 'getProject')
-    .mockResolvedValue(projectData);
+    .mockReturnValue(Promise.resolve(projectData));
   jest
     .spyOn(graphManagerState.graphManager, 'getLightQuery')
-    .mockResolvedValue(lightQuery);
+    .mockReturnValue(Promise.resolve(lightQuery));
   jest
     .spyOn(graphManagerState.graphManager, 'pureCodeToLambda')
-    .mockResolvedValue(new RawLambda(lambda.parameters, lambda.body));
+    .mockReturnValue(
+      Promise.resolve(new RawLambda(lambda.parameters, lambda.body)),
+    );
   jest
     .spyOn(graphManagerState.graphManager, 'getQuery')
-    .mockResolvedValue(query);
+    .mockReturnValue(Promise.resolve(query));
   if (rawMappingModelCoverageAnalysisResult) {
     jest
       .spyOn(graphManagerState.graphManager, 'analyzeMappingModelCoverage')
-      .mockResolvedValue(
-        graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
-          rawMappingModelCoverageAnalysisResult,
+      .mockReturnValue(
+        Promise.resolve(
+          graphManagerState.graphManager.buildMappingModelCoverageAnalysisResult(
+            rawMappingModelCoverageAnalysisResult,
+          ),
         ),
       );
   }
   MOCK__editorStore.buildGraph = jest.fn<TEMPORARY__JestMock>();
   graphManagerState.graphManager.initialize = jest.fn<TEMPORARY__JestMock>();
-  MOBX__disableSpyOrMock();
 
   const history = createMemoryHistory({
     initialEntries: [generateExistingQueryEditorRoute(lightQuery.id)],

package/src/index.ts

@@ -18,8 +18,6 @@ export * from './application/LegendQuery.js';
 export * from './components/LegendQueryBaseStoreProvider.js';
 export * from './stores/LegendQueryBaseStore.js';
 
-export { QueryBuilder_PureProtocolProcessorPlugin } from './graphManager/protocol/pure/QueryBuilder_PureProtocolProcessorPlugin.js';
-
 export {
   QueryEditorStoreContext,
   useQueryEditorStore,
@@ -43,16 +41,3 @@ export {
 } from './stores/LegendQueryBaseStore.js';
 export { LEGEND_QUERY_APP_EVENT } from './LegendQueryAppEvent.js';
 export { LegendQueryEventService } from './stores/LegendQueryEventService.js';
-
-// query builder core
-export { QUERY_BUILDER_TEST_ID } from './components/query-builder/QueryBuilder_TestID.js';
-export { QueryBuilder } from './components/query-builder/QueryBuilder.js';
-export { QueryBuilderState } from './stores/query-builder/QueryBuilderState.js';
-
-export {
-  QueryBuilderClassSelector,
-  buildRuntimeValueOption,
-  getRuntimeOptionFormatter,
-} from './components/query-builder/QueryBuilderSideBar.js';
-export { ClassQueryBuilderState } from './stores/query-builder/workflows/ClassQueryBuilderState.js';
-export { ServiceQueryBuilderState } from './stores/query-builder/workflows/ServiceQueryBuilderState.js';

package/src/stores/LegendQueryApplicationPlugin.ts

@@ -16,9 +16,9 @@
 
 import { LegendApplicationPlugin } from '@finos/legend-application';
 import type { Query } from '@finos/legend-graph';
+import type { QueryBuilderState } from '@finos/legend-query-builder';
 import type React from 'react';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
-import type { QueryBuilderState } from './query-builder/QueryBuilderState.js';
 import type { QueryEditorStore } from './QueryEditorStore.js';
 import type { QuerySetupState, QuerySetupStore } from './QuerySetupStore.js';
 

package/src/stores/QueryEditorStore.ts

@@ -32,14 +32,12 @@ import {
   guaranteeNonNullable,
   ActionState,
   StopWatch,
-  getNullableFirstElement,
   guaranteeType,
 } from '@finos/legend-shared';
 import {
   type LightQuery,
   type RawLambda,
   GraphManagerState,
-  getAllClassMappings,
   toLightQuery,
   Query,
   PureExecution,
@@ -49,11 +47,10 @@ import {
   type GraphBuilderReport,
   GraphManagerTelemetry,
   extractElementNameFromPath,
-  isSystemElement,
+  QuerySearchSpecification,
   Mapping,
   type Runtime,
 } from '@finos/legend-graph';
-import type { QueryBuilderState } from './query-builder/QueryBuilderState.js';
 import {
   generateExistingQueryEditorRoute,
   generateMappingQueryCreatorRoute,
@@ -70,12 +67,16 @@ import { TAB_SIZE, APPLICATION_EVENT } from '@finos/legend-application';
 import type { LegendQueryPluginManager } from '../application/LegendQueryPluginManager.js';
 import { LegendQueryEventService } from './LegendQueryEventService.js';
 import type { LegendQueryApplicationStore } from './LegendQueryBaseStore.js';
-import { ClassQueryBuilderState } from './query-builder/workflows/ClassQueryBuilderState.js';
-import { MappingQueryBuilderState } from './query-builder/workflows/MappingQueryBuilderState.js';
 import {
+  type QueryBuilderState,
   type ServiceExecutionContext,
+  ClassQueryBuilderState,
+  MappingQueryBuilderState,
   ServiceQueryBuilderState,
-} from './query-builder/workflows/ServiceQueryBuilderState.js';
+} from '@finos/legend-query-builder';
+
+const QUERY_BUILDER_SEARCH_TEXT_MIN_LENGTH = 3;
+const QUERY_BUILDER_QUERY_LOAD_MAX_AMOUNT = 10;
 
 export interface QueryExportConfiguration {
   defaultName?: string | undefined;
@@ -202,6 +203,55 @@ export class QueryExportState {
   }
 }
 
+export class QueryLoaderState {
+  editorStore: QueryEditorStore;
+  isQueryLoaderOpen = false;
+  loadQueriesState = ActionState.create();
+  queries: LightQuery[] = [];
+
+  constructor(editorStore: QueryEditorStore) {
+    makeObservable(this, {
+      isQueryLoaderOpen: observable,
+      queries: observable,
+      loadQueriesState: observable,
+      setIsQueryLoaderOpen: action,
+      setQueries: action,
+      loadQueries: flow,
+    });
+    this.editorStore = editorStore;
+  }
+
+  setIsQueryLoaderOpen(val: boolean): void {
+    this.isQueryLoaderOpen = val;
+  }
+
+  setQueries(val: LightQuery[]): void {
+    this.queries = val;
+  }
+
+  *loadQueries(searchText: string): GeneratorFn<void> {
+    const isValidSearchString =
+      searchText.length >= QUERY_BUILDER_SEARCH_TEXT_MIN_LENGTH;
+    this.loadQueriesState.inProgress();
+    try {
+      const searchSpecification = new QuerySearchSpecification();
+      searchSpecification.searchTerm = isValidSearchString
+        ? searchText
+        : undefined;
+      searchSpecification.limit = QUERY_BUILDER_QUERY_LOAD_MAX_AMOUNT;
+      this.queries =
+        (yield this.editorStore.graphManagerState.graphManager.searchQueries(
+          searchSpecification,
+        )) as LightQuery[];
+      this.loadQueriesState.pass();
+    } catch (error) {
+      this.loadQueriesState.fail();
+      assertErrorThrown(error);
+      this.editorStore.applicationStore.notifyError(error);
+    }
+  }
+}
+
 export abstract class QueryEditorStore {
   applicationStore: LegendQueryApplicationStore;
   depotServerClient: DepotServerClient;
@@ -211,6 +261,7 @@ export abstract class QueryEditorStore {
   initState = ActionState.create();
   queryBuilderState?: QueryBuilderState | undefined;
   exportState?: QueryExportState | undefined;
+  queryLoaderState: QueryLoaderState;
 
   constructor(
     applicationStore: LegendQueryApplicationStore,
@@ -219,6 +270,7 @@ export abstract class QueryEditorStore {
   ) {
     makeObservable(this, {
       exportState: observable,
+      queryLoaderState: observable,
       setExportState: action,
       initialize: flow,
       buildGraph: flow,
@@ -231,6 +283,7 @@ export abstract class QueryEditorStore {
       this.pluginManager,
       this.applicationStore.log,
     );
+    this.queryLoaderState = new QueryLoaderState(this);
   }
 
   setExportState(val: QueryExportState | undefined): void {
@@ -469,31 +522,6 @@ export class MappingQueryCreatorStore extends QueryEditorStore {
       ),
     );
 
-    // try to find a class to set
-    // first, find classes which is mapped by the mapping
-    // then, find any classes except for class coming from system
-    // if none found, default to a dummy blank query
-    const defaultClass =
-      getNullableFirstElement(
-        queryBuilderState.mapping
-          ? getAllClassMappings(queryBuilderState.mapping).map(
-              (classMapping) => classMapping.class.value,
-            )
-          : [],
-      ) ??
-      getNullableFirstElement(
-        queryBuilderState.graphManagerState.graph.classes.filter(
-          (el) => !isSystemElement(el),
-        ),
-      );
-    if (defaultClass) {
-      queryBuilderState.changeClass(defaultClass);
-    } else {
-      queryBuilderState.initialize(
-        this.graphManagerState.graphManager.createDefaultBasicRawLambda(),
-      );
-    }
-
     return queryBuilderState;
   }
 
@@ -570,7 +598,7 @@ export class ServiceQueryCreatorStore extends QueryEditorStore {
     );
 
     // leverage initialization of query builder state to ensure we handle unsupported queries
-    queryBuilderState.initialize(service.execution.func);
+    queryBuilderState.initializeWithQuery(service.execution.func);
 
     return queryBuilderState;
   }
@@ -664,7 +692,7 @@ export class ExistingQueryEditorStore extends QueryEditorStore {
     );
 
     // leverage initialization of query builder state to ensure we handle unsupported queries
-    queryBuilderState.initialize(
+    queryBuilderState.initializeWithQuery(
       await this.graphManagerState.graphManager.pureCodeToLambda(query.content),
     );