@finos/legend-application-studio 27.1.1 → 27.1.2

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -16,16 +16,9 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  type TreeNodeContainerProps,
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
-  TreeView,
-  PURE_DatabaseSchemaIcon,
-  PURE_DatabaseTableIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  KeyIcon,
   CustomSelectorInput,
   type SelectComponent,
   createFilter,
@@ -37,9 +30,6 @@ import {
   PanelLoadingIndicator,
   BlankPanelContent,
   TrashIcon,
-  CircleIcon,
-  CheckCircleIcon,
-  EmptyCircleIcon,
   PURE_DatabaseIcon,
   SyncIcon,
 } from '@finos/legend-art';
@@ -65,18 +55,9 @@ import {
   PackageableConnection,
   RelationalDatabaseConnection,
   guaranteeRelationalDatabaseConnection,
-  stringifyDataType,
 } from '@finos/legend-graph';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
-import {
-  DatabaseSchemaExplorerTreeColumnNodeData,
-  DatabaseSchemaExplorerTreeSchemaNodeData,
-  DatabaseSchemaExplorerTreeTableNodeData,
-  type DatabaseSchemaExplorerTreeData,
-  type DatabaseSchemaExplorerTreeNodeData,
-  type SQLPlaygroundPanelState,
-} from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
-import { renderColumnTypeIcon } from '../editor-group/connection-editor/DatabaseEditorHelper.js';
+import { type SQLPlaygroundPanelState } from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
 import { useDrag, useDrop } from 'react-dnd';
@@ -94,191 +75,35 @@ import {
   parseCSVString,
   uniqBy,
 } from '@finos/legend-shared';
-
-const getDatabaseSchemaNodeIcon = (
-  node: DatabaseSchemaExplorerTreeNodeData,
-): React.ReactNode => {
-  if (node instanceof DatabaseSchemaExplorerTreeSchemaNodeData) {
-    return (
-      <div className="sql-playground__database-schema-explorer-tree__icon--schema">
-        <PURE_DatabaseSchemaIcon />
-      </div>
-    );
-  } else if (node instanceof DatabaseSchemaExplorerTreeTableNodeData) {
-    return (
-      <div className="sql-playground__database-schema-explorer-tree__icon--table">
-        <PURE_DatabaseTableIcon />
-      </div>
-    );
-  } else if (node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
-    return renderColumnTypeIcon(node.column.type);
-  }
-  return null;
-};
+import {
+  DatabaseSchemaExplorer,
+  DatabaseSchemaExplorerTreeNodeContainer,
+  type DatabaseSchemaExplorerTreeNodeContainerProps,
+} from '../editor-group/connection-editor/DatabaseSchemaExplorer.js';
+import { DatabaseSchemaExplorerTreeTableNodeData } from '../../../stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.js';
 
 const DATABASE_NODE_DND_TYPE = 'DATABASE_NODE_DND_TYPE';
 type DatabaseNodeDragType = { text: string };
 
-const DatabaseSchemaExplorerTreeNodeContainer: React.FC<
-  TreeNodeContainerProps<
-    DatabaseSchemaExplorerTreeNodeData,
-    {
-      toggleCheckedNode: (node: DatabaseSchemaExplorerTreeNodeData) => void;
-      isPartiallySelected: (
-        node: DatabaseSchemaExplorerTreeNodeData,
-      ) => boolean;
-    }
-  >
-> = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-  const { toggleCheckedNode, isPartiallySelected } = innerProps;
-  const isExpandable =
-    Boolean(!node.childrenIds || node.childrenIds.length) &&
-    !(node instanceof DatabaseSchemaExplorerTreeColumnNodeData);
-  const nodeExpandIcon = isExpandable ? (
-    node.isOpen ? (
-      <ChevronDownIcon />
-    ) : (
-      <ChevronRightIcon />
-    )
-  ) : (
-    <div />
-  );
-  const [, nodeDragRef] = useDrag<DatabaseNodeDragType>(
-    () => ({
-      type: DATABASE_NODE_DND_TYPE,
-      item: {
-        text:
-          node instanceof DatabaseSchemaExplorerTreeTableNodeData
-            ? `${node.owner.name}.${node.label}`
-            : node.label,
-      },
-    }),
-    [node],
-  );
-  const nodeTypeIcon = getDatabaseSchemaNodeIcon(node);
-  const toggleExpandNode = (): void => onNodeSelect?.(node);
-  const isPrimaryKeyColumn =
-    node instanceof DatabaseSchemaExplorerTreeColumnNodeData &&
-    node.owner.primaryKey.includes(node.column);
-
-  const renderCheckedIcon = (
-    _node: DatabaseSchemaExplorerTreeNodeData,
-  ): React.ReactNode => {
-    if (_node instanceof DatabaseSchemaExplorerTreeColumnNodeData) {
-      return null;
-    } else if (isPartiallySelected(_node)) {
-      return <CircleIcon />;
-    } else if (_node.isChecked) {
-      return <CheckCircleIcon />;
-    }
-    return <EmptyCircleIcon />;
-  };
-
-  return (
-    <div
-      className="tree-view__node__container"
-      style={{
-        paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,
-        display: 'flex',
-      }}
-      ref={nodeDragRef}
-      onClick={toggleExpandNode}
-    >
-      <div className="tree-view__node__icon sql-playground__database-schema-explorer-tree__node__icon__group">
-        <div className="sql-playground__database-schema-explorer-tree__expand-icon">
-          {nodeExpandIcon}
-        </div>
-        <div
-          className="sql-playground__database-schema-explorer-tree__toggle-icon"
-          onClick={(event) => {
-            event.stopPropagation();
-            toggleCheckedNode(node);
-          }}
-        >
-          {renderCheckedIcon(node)}
-        </div>
-        <div className="sql-playground__database-schema-explorer-tree__type-icon">
-          {nodeTypeIcon}
-        </div>
-      </div>
-      <div className="tree-view__node__label sql-playground__database-schema-explorer-tree__node__label">
-        {node.label}
-        {node instanceof DatabaseSchemaExplorerTreeColumnNodeData && (
-          <div className="sql-playground__database-schema-explorer-tree__node__type">
-            <div className="sql-playground__database-schema-explorer-tree__node__type__label">
-              {stringifyDataType(node.column.type)}
-            </div>
-          </div>
-        )}
-        {isPrimaryKeyColumn && (
-          <div
-            className="sql-playground__database-schema-explorer-tree__node__pk"
-            title="Primary Key"
-          >
-            <KeyIcon />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const DatabaseSchemaExplorer = observer(
-  (props: {
-    treeData: DatabaseSchemaExplorerTreeData;
-    playgroundState: SQLPlaygroundPanelState;
-  }) => {
-    const { treeData, playgroundState } = props;
-    const applicationStore = useApplicationStore();
-
-    const onNodeSelect = (node: DatabaseSchemaExplorerTreeNodeData): void => {
-      flowResult(playgroundState.onNodeSelect(node, treeData)).catch(
-        applicationStore.alertUnhandledError,
-      );
-    };
-
-    const getChildNodes = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): DatabaseSchemaExplorerTreeNodeData[] =>
-      playgroundState
-        .getChildNodes(node, treeData)
-        ?.sort((a, b) => a.label.localeCompare(b.label)) ?? [];
-
-    const isPartiallySelected = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): boolean => {
-      if (
-        node instanceof DatabaseSchemaExplorerTreeSchemaNodeData &&
-        !node.isChecked
-      ) {
-        return Boolean(
-          playgroundState
-            .getChildNodes(node, treeData)
-            ?.find((childNode) => childNode.isChecked === true),
-        );
-      }
-      return false;
-    };
-
-    const toggleCheckedNode = (
-      node: DatabaseSchemaExplorerTreeNodeData,
-    ): void => playgroundState.toggleCheckedNode(node, treeData);
+const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
+  (props: DatabaseSchemaExplorerTreeNodeContainerProps) => {
+    const { node } = props;
+
+    const [, nodeDragRef] = useDrag<DatabaseNodeDragType>(
+      () => ({
+        type: DATABASE_NODE_DND_TYPE,
+        item: {
+          text:
+            node instanceof DatabaseSchemaExplorerTreeTableNodeData
+              ? `${node.owner.name}.${node.label}`
+              : node.label,
+        },
+      }),
+      [node],
+    );
 
     return (
-      <TreeView
-        className="sql-playground__database-schema-explorer-tree"
-        components={{
-          TreeNodeContainer: DatabaseSchemaExplorerTreeNodeContainer,
-        }}
-        innerProps={{
-          toggleCheckedNode,
-          isPartiallySelected,
-        }}
-        treeData={treeData}
-        onNodeSelect={onNodeSelect}
-        getChildNodes={getChildNodes}
-      />
+      <DatabaseSchemaExplorerTreeNodeContainer {...props} ref={nodeDragRef} />
     );
   },
 );
@@ -369,9 +194,11 @@ const getDatabaseSchemaEntities = async (
   model: monacoEditorAPI.ITextModel,
   playgroundState: SQLPlaygroundPanelState,
 ): Promise<monacoLanguagesAPI.CompletionItem[]> => {
-  if (playgroundState.treeData) {
+  if (playgroundState.schemaExplorerState?.treeData) {
     return uniqBy(
-      Array.from(playgroundState.treeData.nodes.values()).map(
+      Array.from(
+        playgroundState.schemaExplorerState.treeData.nodes.values(),
+      ).map(
         (value) =>
           ({
             label: value.label,
@@ -700,15 +527,21 @@ export const SQLPlaygroundPanel = observer(() => {
     [handleConnectionDrop],
   );
 
-  const updateDatabase = applicationStore.guardUnhandledError(() =>
-    flowResult(playgroundState.updateDatabase()),
-  );
+  const updateDatabase = (): void => {
+    if (playgroundState.schemaExplorerState) {
+      flowResult(playgroundState.schemaExplorerState.updateDatabase()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    }
+  };
 
   useEffect(() => {
-    flowResult(playgroundState.fetchDatabaseMetadata()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  }, [playgroundState, applicationStore, playgroundState.connection]);
+    if (playgroundState.schemaExplorerState) {
+      flowResult(
+        playgroundState.schemaExplorerState.fetchDatabaseMetadata(),
+      ).catch(applicationStore.alertUnhandledError);
+    }
+  }, [playgroundState, applicationStore, playgroundState.schemaExplorerState]);
 
   useConditionedApplicationNavigationContext(
     LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SQL_PLAYGROUND,
@@ -770,10 +603,13 @@ export const SQLPlaygroundPanel = observer(() => {
                   </div>
                 </div>
                 <div className="sql-playground__config__schema-explorer">
-                  {playgroundState.treeData && (
+                  {playgroundState.schemaExplorerState?.treeData && (
                     <DatabaseSchemaExplorer
-                      treeData={playgroundState.treeData}
-                      playgroundState={playgroundState}
+                      treeData={playgroundState.schemaExplorerState.treeData}
+                      schemaExplorerState={playgroundState.schemaExplorerState}
+                      treeNodeContainerComponent={
+                        SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer
+                      }
                     />
                   )}
                 </div>

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

@@ -133,7 +133,7 @@ import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
-import { DatabaseBuilder } from '../editor-group/connection-editor/DatabaseBuilder.js';
+import { DatabaseBuilderWizard } from '../editor-group/connection-editor/DatabaseBuilderWizard.js';
 import { FunctionEditorState } from '../../../stores/editor/editor-state/element-editor-state/FunctionEditorState.js';
 
 const ElementRenamer = observer(() => {
@@ -516,7 +516,7 @@ const ExplorerContextMenu = observer(
     const buildDatabase = editorStore.applicationStore.guardUnhandledError(
       async () => {
         if (isRelationalDatabaseConnection(node?.packageableElement)) {
-          editorStore.explorerTreeState.buildDbBuilderState(
+          editorStore.explorerTreeState.buildDatabase(
             guaranteeRelationalDatabaseConnection(node?.packageableElement),
             editorStore.isInViewerMode,
           );
@@ -1128,7 +1128,7 @@ const ExplorerTrees = observer(() => {
               <ElementRenamer />
               <SampleDataGenerator />
               {editorStore.explorerTreeState.databaseBuilderState && (
-                <DatabaseBuilder
+                <DatabaseBuilderWizard
                   databaseBuilderState={
                     editorStore.explorerTreeState.databaseBuilderState
                   }

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

@@ -275,6 +275,11 @@ const WorkflowExplorerContextMenu = observer(
         workflowState.cancelJob(node.workflowJob, treeData);
       }
     };
+    const runManualJob = (): void => {
+      if (node instanceof WorkflowJobTreeNodeData) {
+        workflowState.runManualJob(node.workflowJob, treeData);
+      }
+    };
     const viewLogs = (): void => {
       if (node instanceof WorkflowJobTreeNodeData) {
         workflowManagerState.logState.viewJobLogs(node.workflowJob);
@@ -304,6 +309,11 @@ const WorkflowExplorerContextMenu = observer(
             {node.workflowJob.status === WorkflowJobStatus.IN_PROGRESS && (
               <MenuContentItem onClick={cancelJob}>Cancel Job</MenuContentItem>
             )}
+            {node.workflowJob.status === WorkflowJobStatus.WAITING_MANUAL && (
+              <MenuContentItem onClick={runManualJob}>
+                Run Manual Job
+              </MenuContentItem>
+            )}
           </>
         )}
         {node instanceof WorkflowTreeNodeData && (

package/src/stores/editor/ExplorerTreeState.ts

@@ -51,7 +51,7 @@ import {
   type RelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import { APPLICATION_EVENT } from '@finos/legend-application';
-import { DatabaseBuilderState } from './editor-state/element-editor-state/connection/DatabaseBuilderState.js';
+import { DatabaseBuilderWizardState } from './editor-state/element-editor-state/connection/DatabaseBuilderWizardState.js';
 
 export enum ExplorerTreeRootPackageLabel {
   FILE_GENERATION = 'generated-files',
@@ -75,7 +75,7 @@ export class ExplorerTreeState {
 
   elementToRename?: PackageableElement | undefined;
   classToGenerateSampleData?: Class | undefined;
-  databaseBuilderState: DatabaseBuilderState | undefined;
+  databaseBuilderState: DatabaseBuilderWizardState | undefined;
 
   constructor(editorStore: EditorStore) {
     makeObservable(this, {
@@ -103,7 +103,7 @@ export class ExplorerTreeState {
       buildTreeInTextMode: action,
       openExplorerTreeNodes: action,
       reprocess: action,
-      buildDbBuilderState: action,
+      buildDatabase: action,
       setDatabaseBuilderState: action,
       onTreeNodeSelect: action,
       openNode: action,
@@ -176,14 +176,11 @@ export class ExplorerTreeState {
     this.classToGenerateSampleData = val;
   }
 
-  setDatabaseBuilderState(val: DatabaseBuilderState | undefined): void {
+  setDatabaseBuilderState(val: DatabaseBuilderWizardState | undefined): void {
     this.databaseBuilderState = val;
   }
-  buildDbBuilderState(
-    val: RelationalDatabaseConnection,
-    isReadOnly: boolean,
-  ): void {
-    const dbBuilderState = new DatabaseBuilderState(
+  buildDatabase(val: RelationalDatabaseConnection, isReadOnly: boolean): void {
+    const dbBuilderState = new DatabaseBuilderWizardState(
       this.editorStore,
       val,
       isReadOnly,

package/src/stores/editor/editor-state/element-editor-state/FunctionEditorState.ts

@@ -31,7 +31,6 @@ import {
   guaranteeType,
   assertType,
   StopWatch,
-  stringifyLosslessJSON,
   filterByType,
 } from '@finos/legend-shared';
 import { ElementEditorState } from './ElementEditorState.js';
@@ -65,7 +64,6 @@ import {
   getExecutionQueryFromRawLambda,
 } from '@finos/legend-query-builder';
 import { FunctionActivatorBuilderState } from './FunctionActivatorBuilderState.js';
-import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 
 export enum FUNCTION_EDITOR_TAB {
   DEFINITION = 'DEFINITION',
@@ -200,11 +198,11 @@ export class FunctionParametersState extends LambdaParametersState {
     this.functionEditorState = functionEditorState;
   }
 
-  openModal(query: RawLambda): void {
-    this.parameterStates = this.build(query);
+  openModal(lambda: RawLambda): void {
+    this.parameterStates = this.build(lambda);
     this.parameterValuesEditorState.open(
       (): Promise<void> =>
-        flowResult(this.functionEditorState.runQuery()).catch(
+        flowResult(this.functionEditorState.runFunc()).catch(
           this.functionEditorState.editorStore.applicationStore
             .alertUnhandledError,
         ),
@@ -212,9 +210,9 @@ export class FunctionParametersState extends LambdaParametersState {
     );
   }
 
-  build(query: RawLambda): LambdaParameterState[] {
+  build(lambda: RawLambda): LambdaParameterState[] {
     const parameters = buildLambdaVariableExpressions(
-      query,
+      lambda,
       this.functionEditorState.editorStore.graphManagerState,
     )
       .map((parameter) =>
@@ -244,32 +242,32 @@ export class FunctionEditorState extends ElementEditorState {
 
   selectedTab: FUNCTION_EDITOR_TAB;
 
-  isRunningQuery = false;
+  isRunningFunc = false;
   isGeneratingPlan = false;
-  executionResultText?: string | undefined; // NOTE: stored as lossless JSON string
+  executionResult?: ExecutionResult | undefined; // NOTE: stored as lossless JSON string
   executionPlanState: ExecutionPlanState;
   parametersState: FunctionParametersState;
-  queryRunPromise: Promise<ExecutionResult> | undefined = undefined;
+  funcRunPromise: Promise<ExecutionResult> | undefined = undefined;
 
   constructor(editorStore: EditorStore, element: PackageableElement) {
     super(editorStore, element);
 
     makeObservable(this, {
       selectedTab: observable,
-      isRunningQuery: observable,
+      isRunningFunc: observable,
       isGeneratingPlan: observable,
-      executionResultText: observable,
+      executionResult: observable,
       executionPlanState: observable,
       label: override,
       functionElement: computed,
       setSelectedTab: action,
       reprocess: action,
-      setExecutionResultText: action,
-      setIsRunningQuery: action,
-      runQuery: flow,
+      setExecutionResult: action,
+      setIsRunningFunc: action,
+      runFunc: flow,
       generatePlan: flow,
-      handleRunQuery: flow,
-      cancelQuery: flow,
+      handleRunFunc: flow,
+      cancelFuncRun: flow,
     });
 
     assertType(
@@ -346,21 +344,19 @@ export class FunctionEditorState extends ElementEditorState {
     return functionEditorState;
   }
 
-  setIsRunningQuery(val: boolean): void {
-    this.isRunningQuery = val;
+  setIsRunningFunc(val: boolean): void {
+    this.isRunningFunc = val;
   }
 
-  setExecutionResultText = (executionResult: string | undefined): void => {
-    this.executionResultText = executionResult;
+  setExecutionResult = (executionResult: ExecutionResult | undefined): void => {
+    this.executionResult = executionResult;
   };
 
-  setQueryRunPromise = (
-    promise: Promise<ExecutionResult> | undefined,
-  ): void => {
-    this.queryRunPromise = promise;
+  setFuncRunPromise = (promise: Promise<ExecutionResult> | undefined): void => {
+    this.funcRunPromise = promise;
   };
 
-  get query(): RawLambda {
+  get bodyExpressionSequence(): RawLambda {
     return new RawLambda(
       this.functionElement.parameters.map((parameter) =>
         this.editorStore.graphManagerState.graphManager.serializeRawValueSpecification(
@@ -376,7 +372,7 @@ export class FunctionEditorState extends ElementEditorState {
       return;
     }
     try {
-      const query = this.query;
+      const expressionSequence = this.bodyExpressionSequence;
       this.isGeneratingPlan = true;
       let rawPlan: RawExecutionPlan;
 
@@ -391,7 +387,7 @@ export class FunctionEditorState extends ElementEditorState {
         );
         const debugResult =
           (yield this.editorStore.graphManagerState.graphManager.debugExecutionPlanGeneration(
-            query,
+            expressionSequence,
             undefined,
             undefined,
             this.editorStore.graphManagerState.graph,
@@ -405,7 +401,7 @@ export class FunctionEditorState extends ElementEditorState {
         );
         rawPlan =
           (yield this.editorStore.graphManagerState.graphManager.generateExecutionPlan(
-            query,
+            expressionSequence,
             undefined,
             undefined,
             this.editorStore.graphManagerState.graph,
@@ -456,21 +452,21 @@ export class FunctionEditorState extends ElementEditorState {
     }
   }
 
-  *handleRunQuery(): GeneratorFn<void> {
-    if (this.isRunningQuery) {
+  *handleRunFunc(): GeneratorFn<void> {
+    if (this.isRunningFunc) {
       return;
     }
-    const query = this.query;
-    const parameters = (query.parameters ?? []) as object[];
+    const expressionSequence = this.bodyExpressionSequence;
+    const parameters = (expressionSequence.parameters ?? []) as object[];
     if (parameters.length) {
-      this.parametersState.openModal(query);
+      this.parametersState.openModal(expressionSequence);
     } else {
-      this.runQuery();
+      this.runFunc();
     }
   }
 
-  *runQuery(): GeneratorFn<void> {
-    if (this.isRunningQuery) {
+  *runFunc(): GeneratorFn<void> {
+    if (this.isRunningFunc) {
       return;
     }
 
@@ -480,14 +476,14 @@ export class FunctionEditorState extends ElementEditorState {
 
     let promise;
     try {
-      this.isRunningQuery = true;
+      this.isRunningFunc = true;
       const stopWatch = new StopWatch();
       const report = reportGraphAnalytics(
         this.editorStore.graphManagerState.graph,
       );
       promise = this.editorStore.graphManagerState.graphManager.runQuery(
         getExecutionQueryFromRawLambda(
-          this.query,
+          this.bodyExpressionSequence,
           this.parametersState.parameterStates,
           this.editorStore.graphManagerState,
         ),
@@ -495,7 +491,7 @@ export class FunctionEditorState extends ElementEditorState {
         undefined,
         this.editorStore.graphManagerState.graph,
         {
-          useLosslessParse: true,
+          useLosslessParse: false,
           parameterValues: buildExecutionParameterValues(
             this.parametersState.parameterStates,
             this.editorStore.graphManagerState,
@@ -503,12 +499,10 @@ export class FunctionEditorState extends ElementEditorState {
         },
         report,
       );
-      this.setQueryRunPromise(promise);
+      this.setFuncRunPromise(promise);
       const result = (yield promise) as ExecutionResult;
-      if (this.queryRunPromise === promise) {
-        this.setExecutionResultText(
-          stringifyLosslessJSON(result, undefined, DEFAULT_TAB_SIZE),
-        );
+      if (this.funcRunPromise === promise) {
+        this.setExecutionResult(result);
         this.parametersState.setParameters([]);
         // report
         report.timings =
@@ -525,7 +519,7 @@ export class FunctionEditorState extends ElementEditorState {
       // When user cancels the query by calling the cancelQuery api, it will throw an execution failure error.
       // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
       // When cancelled the query, we set the queryRunPromise as undefined.
-      if (this.queryRunPromise === promise) {
+      if (this.funcRunPromise === promise) {
         assertErrorThrown(error);
         this.editorStore.applicationStore.logService.error(
           LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
@@ -536,13 +530,13 @@ export class FunctionEditorState extends ElementEditorState {
         );
       }
     } finally {
-      this.isRunningQuery = false;
+      this.isRunningFunc = false;
     }
   }
 
-  *cancelQuery(): GeneratorFn<void> {
-    this.setIsRunningQuery(false);
-    this.setQueryRunPromise(undefined);
+  *cancelFuncRun(): GeneratorFn<void> {
+    this.setIsRunningFunc(false);
+    this.setFuncRunPromise(undefined);
     try {
       yield this.editorStore.graphManagerState.graphManager.cancelUserExecutions(
         true,