@finos/legend-query-builder 4.1.2 → 4.1.3

package/src/components/execution-plan/ExecutionPlanViewer.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useEffect } from 'react';
 import {
   type TreeNodeContainerProps,
-  type TreeData,
   Dialog,
   ResizablePanelGroup,
   ResizablePanelSplitter,
@@ -41,16 +40,13 @@ import {
   PanelHeader,
   Panel,
 } from '@finos/legend-art';
-import {
-  addUniqueEntry,
-  filterByType,
-  isNonNullable,
-} from '@finos/legend-shared';
+import { isNonNullable } from '@finos/legend-shared';
 import {
   ExecutionNodeTreeNodeData,
   ExecutionPlanViewTreeNodeData,
   EXECUTION_PLAN_VIEW_MODE,
   type ExecutionPlanState,
+  generateExecutionNodeTreeNodeData,
 } from '../../stores/execution-plan/ExecutionPlanState.js';
 import { observer } from 'mobx-react-lite';
 import {
@@ -58,225 +54,182 @@ import {
   ExecutionNode,
   SQLExecutionNode,
   RelationalTDSInstantiationExecutionNode,
+  FunctionParametersValidationNode,
+  AllocationExecutionNode,
+  ConstantExecutionNode,
+  SequenceExecutionNode,
   type RawExecutionPlan,
 } from '@finos/legend-graph';
 import { SQLExecutionNodeViewer } from './SQLExecutionNodeViewer.js';
+import { FunctionParametersValidationNodeViewer } from './FunctionParametersValidationNodeViewer.js';
+import { AllocationExecutionNodeViewer } from './AllocationExecutionNodeViewer.js';
+import { ConstantExecutionNodeViewer } from './ConstantExecutionNodeViewer.js';
+import { SequenceExecutionNodeViewer } from './SequenceExecutionNodeViewer.js';
+import { RelationalTDSInstantiationExecutionNodeViewer } from './RelationalTDSInstantiationExecutionNodeViewer.js';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
 
+const EXECUTION_PLAN = 'Execution Plan';
 /**
  * @modularize
  * See https://github.com/finos/legend-studio/issues/65
  */
-const generateExecutionNodeLabel = (type: ExecutionNode): string => {
+export const generateExecutionNodeLabel = (type: ExecutionNode): string => {
   if (type instanceof SQLExecutionNode) {
     return `SQL Execution Node`;
   } else if (type instanceof RelationalTDSInstantiationExecutionNode) {
     return `Relational TDS Instantiation Execution Node`;
+  } else if (type instanceof FunctionParametersValidationNode) {
+    return `Function Parameters Validation Node`;
+  } else if (type instanceof AllocationExecutionNode) {
+    return `Allocation Execution Node (${type.varName})`;
+  } else if (type instanceof ConstantExecutionNode) {
+    return `Constant Execution Node`;
+  } else if (type instanceof SequenceExecutionNode) {
+    return `Sequence Execution Node`;
   } else {
     return 'Other';
   }
 };
 
-const generateExecutionNodeTreeNodeData = (
-  executionNode: ExecutionNode,
-  label: string,
-  parentNode:
-    | ExecutionNodeTreeNodeData
-    | ExecutionPlanViewTreeNodeData
-    | undefined,
-): ExecutionNodeTreeNodeData => {
-  const executionNodeTreeNode = new ExecutionNodeTreeNodeData(
-    executionNode._UUID,
-    label,
-    executionNode,
-  );
-
-  const childrenIds: string[] = [];
-
-  executionNode.executionNodes
-    .slice()
-    .filter(filterByType(ExecutionNode))
-    .forEach((childExecutionNode) => {
-      addUniqueEntry(childrenIds, childExecutionNode._UUID);
-    });
-
-  executionNodeTreeNode.childrenIds = childrenIds;
-
-  return executionNodeTreeNode;
-};
-
-const generateExecutionPlanTreeNodeData = (
-  executionPlan: ExecutionPlan,
-): ExecutionPlanViewTreeNodeData => {
-  const executionPlanNode = new ExecutionPlanViewTreeNodeData(
-    `Execution Plan`,
-    `Execution Plan`,
-    executionPlan,
-  );
-
-  const childrenIds: string[] = [];
-
-  const rootNodeId = executionPlan.rootExecutionNode._UUID;
-  addUniqueEntry(childrenIds, rootNodeId);
-  executionPlanNode.childrenIds = childrenIds;
-  return executionPlanNode;
-};
-
-const getExecutionPlanTreeData = (
-  executionPlan: ExecutionPlan,
-): TreeData<ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData> => {
-  const rootIds: string[] = [];
-  const nodes = new Map<
-    string,
-    ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData
-  >();
-  const executionPlanTreeNode =
-    generateExecutionPlanTreeNodeData(executionPlan);
-  addUniqueEntry(rootIds, executionPlanTreeNode.id);
-  nodes.set(executionPlanTreeNode.id, executionPlanTreeNode);
-  return { rootIds, nodes };
-};
-
-const ExecutionNodeElementTreeNodeContainer: React.FC<
-  TreeNodeContainerProps<
-    ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
-    {
-      onNodeExpand: (
-        node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
-      ) => void;
-    }
-  >
-> = (props) => {
-  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-  const { onNodeExpand } = innerProps;
-  const isExpandable = Boolean(node.childrenIds?.length);
-  const selectNode = (): void => onNodeSelect?.(node);
-  const expandNode = (): void => onNodeExpand(node);
-  const nodeExpandIcon = isExpandable ? (
-    node.isOpen ? (
-      <ChevronDownIcon />
+const ExecutionNodeElementTreeNodeContainer = observer(
+  (
+    props: TreeNodeContainerProps<
+      ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+      {
+        onNodeExpand: (
+          node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+        ) => void;
+      }
+    >,
+  ) => {
+    const { node, level, stepPaddingInRem, onNodeSelect } = props;
+    const isExpandable = Boolean(node.childrenIds?.length);
+    const selectNode = (): void => onNodeSelect?.(node);
+    const nodeExpandIcon = isExpandable ? (
+      node.isOpen ? (
+        <ChevronDownIcon />
+      ) : (
+        <ChevronRightIcon />
+      )
     ) : (
-      <ChevronRightIcon />
-    )
-  ) : (
-    <div />
-  );
-
-  return (
-    <div
-      className={clsx(
-        'tree-view__node__container execution-plan-viewer__explorer-tree__node__container',
-        {
-          'menu__trigger--on-menu-open': !node.isSelected,
-        },
-        {
-          'execution-plan-viewer__explorer-tree__node__container--selected':
-            node.isSelected,
-        },
-      )}
-      style={{
-        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
-      }}
-      onClick={selectNode}
-    >
-      <div className="tree-view__node__icon">
-        <div className="tree-view__node__expand-icon" onClick={expandNode}>
-          {nodeExpandIcon}
+      <div />
+    );
+    return (
+      <div
+        className={clsx(
+          'tree-view__node__container execution-plan-viewer__explorer-tree__node__container',
+          {
+            'menu__trigger--on-menu-open': !node.isSelected,
+          },
+          {
+            'execution-plan-viewer__explorer-tree__node__container--selected':
+              node.isSelected,
+          },
+        )}
+        style={{
+          paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
+        }}
+        onClick={selectNode}
+      >
+        <div className="tree-view__node__icon">
+          <div className="tree-view__node__expand-icon">{nodeExpandIcon}</div>
         </div>
+        <button
+          className="tree-view__node__label execution-plan-viewer__explorer-tree__node__label"
+          tabIndex={-1}
+          title={node.id}
+        >
+          {node.label}
+        </button>
       </div>
-      <button
-        className="tree-view__node__label execution-plan-viewer__explorer-tree__node__label"
-        tabIndex={-1}
-        title={node.id}
-      >
-        {node.label}
-      </button>
-    </div>
-  );
-};
-
-export const ExecutionPlanTree: React.FC<{
-  executionPlanState: ExecutionPlanState;
-  executionPlan: ExecutionPlan;
-}> = (props) => {
-  const { executionPlanState, executionPlan } = props;
-  // NOTE: We only need to compute this once so we use lazy initial state syntax
-  // See https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
-  const [treeData, setTreeData] = useState<
-    TreeData<ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData>
-  >(() => getExecutionPlanTreeData(executionPlan));
-  const onNodeSelect = (
-    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
-  ): void => {
-    if (node instanceof ExecutionPlanViewTreeNodeData) {
-      executionPlanState.transformMetadataToProtocolJson(node.executionPlan);
-    } else if (node instanceof ExecutionNodeTreeNodeData) {
-      executionPlanState.transformMetadataToProtocolJson(node.executionNode);
-    }
-    executionPlanState.setSelectedNode(node);
-  };
+    );
+  },
+);
 
-  const onNodeExpand = (
-    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
-  ): void => {
-    if (node.childrenIds?.length) {
-      node.isOpen = !node.isOpen;
-      if (node instanceof ExecutionPlanViewTreeNodeData) {
-        const rootNode = node.executionPlan.rootExecutionNode;
-        const rootNodeTreeNode = generateExecutionNodeTreeNodeData(
-          rootNode,
-          generateExecutionNodeLabel(rootNode),
-          node,
-        );
-        treeData.nodes.set(rootNodeTreeNode.id, rootNodeTreeNode);
-      } else if (node instanceof ExecutionNodeTreeNodeData) {
-        if (node.executionNode.executionNodes.length > 0) {
-          node.executionNode.executionNodes.forEach((exen) => {
-            const executionNodeTreeNode = generateExecutionNodeTreeNodeData(
-              exen,
-              generateExecutionNodeLabel(exen),
-              node,
-            );
+export const ExecutionPlanTree = observer(
+  (props: {
+    executionPlanState: ExecutionPlanState;
+    executionPlan: ExecutionPlan;
+  }) => {
+    const { executionPlanState } = props;
 
-            treeData.nodes.set(executionNodeTreeNode.id, executionNodeTreeNode);
-          });
+    const onNodeExpand = (
+      node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+    ): void => {
+      if (node.childrenIds?.length) {
+        node.setIsOpen(!node.isOpen);
+        if (node instanceof ExecutionPlanViewTreeNodeData) {
+          const rootNode = node.executionPlan.rootExecutionNode;
+          const rootNodeTreeNode = generateExecutionNodeTreeNodeData(
+            rootNode,
+            generateExecutionNodeLabel(rootNode),
+            node,
+          );
+          executionPlanState.setTreeNode(rootNodeTreeNode.id, rootNodeTreeNode);
+        } else if (node instanceof ExecutionNodeTreeNodeData) {
+          if (node.executionNode.executionNodes.length > 0) {
+            node.executionNode.executionNodes.forEach((exen) => {
+              const executionNodeTreeNode = generateExecutionNodeTreeNodeData(
+                exen,
+                generateExecutionNodeLabel(exen),
+                node,
+              );
+              executionPlanState.setTreeNode(
+                executionNodeTreeNode.id,
+                executionNodeTreeNode,
+              );
+            });
+          }
         }
       }
-    }
 
-    setTreeData({ ...treeData });
-  };
+      executionPlanState.refreshTreeData();
+    };
 
-  const getChildNodes = (
-    node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
-  ): (ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData)[] => {
-    if (!node.childrenIds || node.childrenIds.length === 0) {
-      return [];
-    }
-    const childrenNodes = node.childrenIds
-      .map((id) => treeData.nodes.get(id))
-      .filter(isNonNullable);
+    const onNodeSelect = (
+      node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+    ): void => {
+      if (node instanceof ExecutionPlanViewTreeNodeData) {
+        executionPlanState.transformMetadataToProtocolJson(node.executionPlan);
+      } else if (node instanceof ExecutionNodeTreeNodeData) {
+        executionPlanState.transformMetadataToProtocolJson(node.executionNode);
+      }
+      if (!(node.isOpen === true && node.isSelected === false)) {
+        onNodeExpand(node);
+      }
+      executionPlanState.setSelectedNode(node);
+    };
 
-    return childrenNodes;
-  };
-  return (
-    <TreeView
-      components={{
-        TreeNodeContainer: ExecutionNodeElementTreeNodeContainer,
-      }}
-      treeData={treeData}
-      getChildNodes={getChildNodes}
-      onNodeSelect={onNodeSelect}
-      innerProps={{
-        onNodeExpand,
-      }}
-    />
-  );
-};
+    const getChildNodes = (
+      node: ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData,
+    ): (ExecutionPlanViewTreeNodeData | ExecutionNodeTreeNodeData)[] => {
+      if (!node.childrenIds || node.childrenIds.length === 0) {
+        return [];
+      }
+      const childrenNodes = node.childrenIds
+        .map((id) => executionPlanState.nonNullableTreeData.nodes.get(id))
+        .filter(isNonNullable);
+      return childrenNodes;
+    };
+    return (
+      <TreeView
+        components={{
+          TreeNodeContainer: ExecutionNodeElementTreeNodeContainer,
+        }}
+        treeData={executionPlanState.nonNullableTreeData}
+        getChildNodes={getChildNodes}
+        onNodeSelect={onNodeSelect}
+        innerProps={{
+          onNodeExpand,
+        }}
+      />
+    );
+  },
+);
 
 const ExecutionNodeViewer = observer(
   (props: {
@@ -289,6 +242,50 @@ const ExecutionNodeViewer = observer(
         <SQLExecutionNodeViewer
           query={executionNode.sqlQuery}
           resultColumns={executionNode.resultColumns}
+          resultType={executionNode.resultType}
+          executionPlanState={executionPlanState}
+          viewJson={true}
+        />
+      );
+    }
+    if (executionNode instanceof RelationalTDSInstantiationExecutionNode) {
+      return (
+        <RelationalTDSInstantiationExecutionNodeViewer
+          node={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (executionNode instanceof FunctionParametersValidationNode) {
+      return (
+        <FunctionParametersValidationNodeViewer
+          functionParameters={executionNode.functionParameters}
+          parameterValidationContext={executionNode.parameterValidationContext}
+          executionPlanState={executionPlanState}
+          resultType={executionNode.resultType}
+        />
+      );
+    }
+    if (executionNode instanceof AllocationExecutionNode) {
+      return (
+        <AllocationExecutionNodeViewer
+          node={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (executionNode instanceof ConstantExecutionNode) {
+      return (
+        <ConstantExecutionNodeViewer
+          cnode={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (executionNode instanceof SequenceExecutionNode) {
+      return (
+        <SequenceExecutionNodeViewer
+          node={executionNode}
           executionPlanState={executionPlanState}
         />
       );
@@ -328,6 +325,19 @@ const ExecutionPlanViewPanel = observer(
         currentElement = executionPlanState.selectedNode.executionNode;
       }
     }
+
+    useEffect(() => {
+      if (executionPlanState.selectedNode === undefined) {
+        const firstNode =
+          executionPlanState.treeData?.nodes.get(EXECUTION_PLAN);
+        if (firstNode instanceof ExecutionPlanViewTreeNodeData) {
+          executionPlanState.transformMetadataToProtocolJson(
+            firstNode.executionPlan,
+          );
+          executionPlanState.setSelectedNode(firstNode);
+        }
+      }
+    }, [executionPlanState]);
     const nativeViewModes = Object.values(EXECUTION_PLAN_VIEW_MODE);
 
     return (
@@ -485,7 +495,7 @@ export const ExecutionPlanViewer = observer(
     const { executionPlanState } = props;
     const closePlanViewer = (): void => {
       executionPlanState.setRawPlan(undefined);
-      executionPlanState.setPlan(undefined);
+      executionPlanState.initialize(undefined);
       executionPlanState.setExecutionPlanDisplayData('');
       executionPlanState.setSelectedNode(undefined);
       executionPlanState.setDebugText(undefined);

package/src/components/execution-plan/FunctionParametersValidationNodeViewer.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import React from 'react';
+import {
+  type ExecutionPlanState,
+  EXECUTION_PLAN_VIEW_MODE,
+} from '../../stores/execution-plan/ExecutionPlanState.js';
+import {
+  type VariableExpression,
+  type ParameterValidationContext,
+  Multiplicity,
+  type ResultType,
+} from '@finos/legend-graph';
+
+import {
+  PanelListItem,
+  PanelDivider,
+  Button,
+  PanelContent,
+} from '@finos/legend-art';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
+
+export const FunctionParametersValidationNodeViewer: React.FC<{
+  functionParameters: VariableExpression[];
+  parameterValidationContext: ParameterValidationContext[];
+  resultType: ResultType;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { functionParameters, resultType, executionPlanState } = props;
+  const applicationStore = executionPlanState.applicationStore;
+
+  const showMultiplicity = (multiplicity: Multiplicity): string => {
+    if (multiplicity === Multiplicity.ZERO) {
+      return '[0]';
+    }
+    if (multiplicity === Multiplicity.ONE) {
+      return '[1]';
+    }
+    if (multiplicity === Multiplicity.ZERO_ONE) {
+      return '[0..1]';
+    }
+    if (
+      multiplicity === Multiplicity.ZERO_MANY ||
+      multiplicity === Multiplicity.ONE_MANY
+    ) {
+      return '[*]';
+    }
+    if (multiplicity.upperBound === undefined) {
+      return `[${multiplicity.lowerBound.toString()}.. *]`;
+    }
+    return `[${multiplicity.lowerBound.toString()}..${multiplicity.upperBound.toString()}]`;
+  };
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <div className="query-builder__function-parameters-validation__container">
+        <div>
+          <PanelListItem className="query-builder__function-parameters-validation__container__item__label">
+            Variables Details
+          </PanelListItem>
+          <PanelDivider />
+          <table className="table query-builder__function-parameters-validation__container__table">
+            <thead>
+              <tr>
+                <th className="table__cell--left">Name</th>
+                <th className="table__cell--left">Type</th>
+              </tr>
+            </thead>
+            <tbody>
+              {functionParameters.map((parameter) => (
+                <React.Fragment key={parameter.name}>
+                  <tr>
+                    <td className="table__cell--left">{parameter.name}</td>
+                    <td className="table__cell--left">
+                      {`${
+                        parameter.genericType?.value.rawType.name
+                      } ${showMultiplicity(parameter.multiplicity)}`}
+                    </td>
+                  </tr>
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <PanelDivider />
+      <ResultTypeViewer resultType={resultType} />
+      <div className="query-builder__function-parameters-validation__container">
+        <Button
+          className="btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn"
+          onClick={(): void =>
+            executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON)
+          }
+          text="View JSON"
+        />
+      </div>
+      <PanelDivider />
+    </PanelContent>
+  );
+});

package/src/components/execution-plan/RelationalTDSInstantiationExecutionNodeViewer.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  type ExecutionPlanState,
+  EXECUTION_PLAN_VIEW_MODE,
+} from '../../stores/execution-plan/ExecutionPlanState.js';
+import {
+  SQLExecutionNode,
+  type RelationalTDSInstantiationExecutionNode,
+} from '@finos/legend-graph';
+import { PanelDivider, Button, PanelContent } from '@finos/legend-art';
+import { SQLExecutionNodeViewerHelper } from './SQLExecutionNodeViewer.js';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
+
+export const RelationalTDSInstantiationExecutionNodeViewer: React.FC<{
+  node: RelationalTDSInstantiationExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { node, executionPlanState } = props;
+  const resultType = node.resultType;
+  const applicationStore = executionPlanState.applicationStore;
+
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      {node.executionNodes.length > 0 &&
+        node.executionNodes[0] !== undefined &&
+        node.executionNodes[0] instanceof SQLExecutionNode && (
+          <SQLExecutionNodeViewerHelper
+            query={node.executionNodes[0].sqlQuery}
+            resultColumns={node.executionNodes[0].resultColumns}
+            resultType={node.executionNodes[0].resultType}
+            executionPlanState={executionPlanState}
+          />
+        )}
+      <PanelDivider />
+      <ResultTypeViewer resultType={resultType} />
+      <div className="query-builder__sql__container">
+        <Button
+          className="btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn"
+          onClick={(): void =>
+            executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON)
+          }
+          text="View JSON"
+        />
+      </div>
+      <PanelDivider />
+    </PanelContent>
+  );
+});