@finos/legend-query-builder 4.4.0 → 4.5.1

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import {
   type TreeNodeContainerProps,
   Dialog,
@@ -49,6 +49,7 @@ import {
   EXECUTION_PLAN_VIEW_MODE,
   type ExecutionPlanState,
   generateExecutionNodeTreeNodeData,
+  PLAN_TABS,
 } from '../../stores/execution-plan/ExecutionPlanState.js';
 import { observer } from 'mobx-react-lite';
 import {
@@ -61,9 +62,19 @@ import {
   ConstantExecutionNode,
   SequenceExecutionNode,
   type RawExecutionPlan,
+  StoreMappingGlobalGraphFetchExecutionNode,
+  PureExpressionPlatformExecutionNode,
+  RelationalClassQueryTempTableGraphFetchExecutionNode,
+  RelationalRootQueryTempTableGraphFetchExecutionNode,
+  RelationalCrossRootQueryTempTableGraphFetchExecutionNode,
+  RelationalGraphFetchExecutionNode,
   JavaPlatformImplementation,
+  RootGraphFetchTree,
+  PropertyGraphFetchTree,
+  LocalGraphFetchExecutionNode,
 } from '@finos/legend-graph';
 import { SQLExecutionNodeViewer } from './SQLExecutionNodeViewer.js';
+import { StoreMappingGlobalGraphFetchExecutionNodeViewer } from './StoreMappingGlobalGraphFetchExecutionNodeViewer.js';
 import { FunctionParametersValidationNodeViewer } from './FunctionParametersValidationNodeViewer.js';
 import { AllocationExecutionNodeViewer } from './AllocationExecutionNodeViewer.js';
 import { ConstantExecutionNodeViewer } from './ConstantExecutionNodeViewer.js';
@@ -74,8 +85,27 @@ import {
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
+import { RelationalRootQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.js';
+import { RelationalClassQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.js';
+import { RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer } from './RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.js';
 
 const EXECUTION_PLAN = 'Execution Plan';
+
+const generateExecutionNodePrefixLabel = (node: ExecutionNode): string => {
+  if (
+    node instanceof StoreMappingGlobalGraphFetchExecutionNode ||
+    node instanceof LocalGraphFetchExecutionNode
+  ) {
+    if (node.graphFetchTree instanceof RootGraphFetchTree) {
+      return node.graphFetchTree.class.value.name;
+    }
+    if (node.graphFetchTree instanceof PropertyGraphFetchTree) {
+      return node.graphFetchTree.property.value.name;
+    }
+  }
+  return '';
+};
+
 /**
  * @modularize
  * See https://github.com/finos/legend-studio/issues/65
@@ -93,16 +123,27 @@ export const generateExecutionNodeLabel = (type: ExecutionNode): string => {
     return `Constant Execution Node`;
   } else if (type instanceof SequenceExecutionNode) {
     return `Sequence Execution Node`;
+  } else if (type instanceof StoreMappingGlobalGraphFetchExecutionNode) {
+    return `Store Mapping Global Graph Fetch Execution Node`;
+  } else if (
+    type instanceof RelationalRootQueryTempTableGraphFetchExecutionNode
+  ) {
+    return `Relational Root Query TempTable Graph Fetch Execution Node`;
+  } else if (
+    type instanceof RelationalCrossRootQueryTempTableGraphFetchExecutionNode
+  ) {
+    return `Relational Cross Root Query TempTable Graph Fetch Execution Node`;
+  } else if (
+    type instanceof RelationalClassQueryTempTableGraphFetchExecutionNode
+  ) {
+    return `Relational Class Query TempTable Graph Fetch Execution Node`;
+  } else if (type instanceof PureExpressionPlatformExecutionNode) {
+    return `Pure Expression Platform Execution Node`;
   } else {
     return 'Other';
   }
 };
 
-enum PLAN_TABS {
-  GENERAL = 'GENERAL',
-  GLOBAL_IMPLEMENTATION_SUPPORT = 'GLOBAL_IMPLEMENTATION_SUPPORT',
-}
-
 export const ExecutionPlanViewerPanelContent: React.FC<{
   executionPlanState: ExecutionPlanState;
 }> = observer((props) => {
@@ -112,10 +153,6 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
     executionPlanState.plan?.globalImplementationSupport;
   const templateFunctions =
     executionPlanState.plan?.processingTemplateFunctions ?? [];
-  const [selectedTab, setSelectedTab] = useState<PLAN_TABS>(PLAN_TABS.GENERAL);
-  const [selectedJavaClass, setSelectedJavaClass] = useState<
-    string | undefined
-  >(undefined);
 
   if (
     globalImplementationSupport &&
@@ -129,11 +166,11 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
     if (
       globalImplementationSupport.classes.length > 0 &&
       globalImplementationSupport.classes[0] &&
-      selectedJavaClass === undefined
+      executionPlanState.globalImplementationSupportState.selectedJavaClass ===
+        undefined
     ) {
-      setSelectedJavaClass(
-        globalImplementationSupport.classes[0]?.package +
-          globalImplementationSupport.classes[0]?.name,
+      executionPlanState.globalImplementationSupportState.setSelectedJavaClass(
+        `${globalImplementationSupport.classes[0]?.package}.${globalImplementationSupport.classes[0]?.name}`,
       );
     }
   }
@@ -146,12 +183,18 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
             {Object.values(PLAN_TABS).map((tab) => (
               <div
                 key={tab}
-                onClick={() => setSelectedTab(tab)}
+                onClick={() =>
+                  executionPlanState.globalImplementationSupportState.setSelectedTab(
+                    tab,
+                  )
+                }
                 className={clsx(
                   'query-builder__execution-plan-form--editor__tab',
                   {
                     'query-builder__execution-plan-form--editor__tab--active':
-                      tab === selectedTab,
+                      tab ===
+                      executionPlanState.globalImplementationSupportState
+                        .selectedTab,
                   },
                 )}
               >
@@ -160,11 +203,12 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
             ))}
           </div>
         </div>
-        {selectedTab === PLAN_TABS.GLOBAL_IMPLEMENTATION_SUPPORT &&
+        {executionPlanState.globalImplementationSupportState.selectedTab ===
+          PLAN_TABS.GLOBAL_IMPLEMENTATION_SUPPORT &&
           globalImplementationSupport &&
           globalImplementationSupport instanceof JavaPlatformImplementation && (
             <ResizablePanelGroup orientation="vertical">
-              <ResizablePanel minSize={30} size={250}>
+              <ResizablePanel minSize={30} size={400}>
                 <PanelContent
                   darkMode={
                     !applicationStore.layoutService
@@ -180,7 +224,10 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
                             'query-builder__java__container__item',
                             {
                               'query-builder__java__container__item--active':
-                                `${cl.package}${cl.name}` === selectedJavaClass,
+                                `${cl.package}.${cl.name}` ===
+                                executionPlanState
+                                  .globalImplementationSupportState
+                                  .selectedJavaClass,
                             },
                           )}
                           key={cl.package + cl.name}
@@ -188,7 +235,9 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
                           <button
                             className="query-builder__java__container__item__btn"
                             onClick={() =>
-                              setSelectedJavaClass(cl.package + cl.name)
+                              executionPlanState.globalImplementationSupportState.setSelectedJavaClass(
+                                `${cl.package}.${cl.name}`,
+                              )
                             }
                             tabIndex={-1}
                             title={`Go to ${cl.package}.${cl.name}`}
@@ -206,11 +255,15 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
                 <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
               </ResizablePanelSplitter>
               <ResizablePanel>
-                {selectedJavaClass && (
+                {executionPlanState.globalImplementationSupportState
+                  .selectedJavaClass && (
                   <CodeEditor
                     inputValue={globalImplementationSupport.classes.reduce(
                       (value, cl) => {
-                        if (selectedJavaClass === `${cl.package}${cl.name}`) {
+                        if (
+                          executionPlanState.globalImplementationSupportState
+                            .selectedJavaClass === `${cl.package}.${cl.name}`
+                        ) {
                           return cl.source;
                         }
                         return value;
@@ -225,37 +278,41 @@ export const ExecutionPlanViewerPanelContent: React.FC<{
               </ResizablePanel>
             </ResizablePanelGroup>
           )}
-        {selectedTab === PLAN_TABS.GENERAL && (
-          <>
-            <div className="query-builder__template--function--editor__header">
-              {`AuthDependent: ${executionPlanState.plan?.authDependent.toString()}`}
-            </div>
-            <div className="query-builder__template--function--editor__title">
-              Template Functions
-            </div>
-            <div className="query-builder__template--function--editor__code">
-              <CodeEditor
-                inputValue={templateFunctions.reduce(
-                  (total, func) => (total += `${func}\n`),
-                  '',
-                )}
-                isReadOnly={true}
-                language={CODE_EDITOR_LANGUAGE.XML}
-                hideMinimap={true}
-                hideActionBar={true}
-              />
-            </div>
-            <div className="query-builder__template--function--editor__json">
-              <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>
-          </>
-        )}
+        {executionPlanState.globalImplementationSupportState.selectedTab ===
+          PLAN_TABS.GENERAL &&
+          templateFunctions.length > 0 && (
+            <>
+              <div className="query-builder__template--function--editor__header">
+                {`AuthDependent: ${executionPlanState.plan?.authDependent.toString()}`}
+              </div>
+              <div className="query-builder__template--function--editor__title">
+                Template Functions
+              </div>
+              <div className="query-builder__template--function--editor__code">
+                <CodeEditor
+                  inputValue={templateFunctions.reduce(
+                    (total, func) => (total += `${func}\n`),
+                    '',
+                  )}
+                  isReadOnly={true}
+                  language={CODE_EDITOR_LANGUAGE.XML}
+                  hideMinimap={true}
+                  hideActionBar={true}
+                />
+              </div>
+              <div className="query-builder__template--function--editor__json">
+                <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>
+            </>
+          )}
       </div>
     </div>
   );
@@ -284,6 +341,23 @@ const ExecutionNodeElementTreeNodeContainer = observer(
     ) : (
       <div />
     );
+    let details = '';
+    let prefixLabel = '';
+    const STORE_MAPPING_LABEL = `Store Mapping Global Graph Fetch Execution Node`;
+    if (node instanceof ExecutionNodeTreeNodeData) {
+      if (node.parentNodeId === STORE_MAPPING_LABEL) {
+        if (
+          node.executionNode instanceof
+          StoreMappingGlobalGraphFetchExecutionNode
+        ) {
+          details = 'Cross';
+        } else if (node.executionNode instanceof LocalGraphFetchExecutionNode) {
+          details = 'Local';
+        }
+      }
+      prefixLabel = generateExecutionNodePrefixLabel(node.executionNode);
+    }
+
     return (
       <div
         className={clsx(
@@ -304,6 +378,20 @@ const ExecutionNodeElementTreeNodeContainer = observer(
         <div className="tree-view__node__icon">
           <div className="tree-view__node__expand-icon">{nodeExpandIcon}</div>
         </div>
+        {details !== '' && (
+          <div className="execution-plan-viewer__node__sub-type">
+            <div className="execution-plan-viewer__node__sub-type__label">
+              {details}
+            </div>
+          </div>
+        )}
+        {prefixLabel !== '' && (
+          <div className="execution-plan-viewer__node__type">
+            <div className="execution-plan-viewer__node__type__label">
+              {prefixLabel}
+            </div>
+          </div>
+        )}
         <button
           className="tree-view__node__label execution-plan-viewer__explorer-tree__node__label"
           tabIndex={-1}
@@ -350,6 +438,45 @@ export const ExecutionPlanTree = observer(
               );
             });
           }
+          if (
+            node.executionNode instanceof
+            StoreMappingGlobalGraphFetchExecutionNode
+          ) {
+            const localNode = node.executionNode.localGraphFetchExecutionNode;
+            const localNodeTreeData = generateExecutionNodeTreeNodeData(
+              localNode,
+              generateExecutionNodeLabel(localNode),
+              node,
+            );
+            executionPlanState.setTreeNode(
+              localNodeTreeData.id,
+              localNodeTreeData,
+            );
+            node.executionNode.children.forEach((childExecutionNode) => {
+              const executionNodeTreeNode = generateExecutionNodeTreeNodeData(
+                childExecutionNode,
+                generateExecutionNodeLabel(childExecutionNode),
+                node,
+              );
+              executionPlanState.setTreeNode(
+                executionNodeTreeNode.id,
+                executionNodeTreeNode,
+              );
+            });
+          }
+          if (node.executionNode instanceof RelationalGraphFetchExecutionNode) {
+            node.executionNode.children.forEach((childExecutionNode) => {
+              const executionNodeTreeNode = generateExecutionNodeTreeNodeData(
+                childExecutionNode,
+                generateExecutionNodeLabel(childExecutionNode),
+                node,
+              );
+              executionPlanState.setTreeNode(
+                executionNodeTreeNode.id,
+                executionNodeTreeNode,
+              );
+            });
+          }
         }
       }
 
@@ -397,12 +524,13 @@ export const ExecutionPlanTree = observer(
   },
 );
 
-const ExecutionNodeViewer = observer(
+export const ExecutionNodeViewer = observer(
   (props: {
     executionNode: ExecutionNode;
     executionPlanState: ExecutionPlanState;
+    viewJson?: boolean | undefined;
   }) => {
-    const { executionNode, executionPlanState } = props;
+    const { executionNode, executionPlanState, viewJson } = props;
     if (executionNode instanceof SQLExecutionNode) {
       return (
         <SQLExecutionNodeViewer
@@ -410,7 +538,7 @@ const ExecutionNodeViewer = observer(
           resultColumns={executionNode.resultColumns}
           resultType={executionNode.resultType}
           executionPlanState={executionPlanState}
-          viewJson={true}
+          viewJson={viewJson}
         />
       );
     }
@@ -453,6 +581,48 @@ const ExecutionNodeViewer = observer(
         <SequenceExecutionNodeViewer
           node={executionNode}
           executionPlanState={executionPlanState}
+          viewJson={viewJson}
+        />
+      );
+    }
+    if (executionNode instanceof StoreMappingGlobalGraphFetchExecutionNode) {
+      return (
+        <StoreMappingGlobalGraphFetchExecutionNodeViewer
+          storeMappingNode={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (
+      executionNode instanceof
+      RelationalCrossRootQueryTempTableGraphFetchExecutionNode
+    ) {
+      return (
+        <RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer
+          node={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (
+      executionNode instanceof
+      RelationalRootQueryTempTableGraphFetchExecutionNode
+    ) {
+      return (
+        <RelationalRootQueryTempTableGraphFetchExecutionNodeViewer
+          node={executionNode}
+          executionPlanState={executionPlanState}
+        />
+      );
+    }
+    if (
+      executionNode instanceof
+      RelationalClassQueryTempTableGraphFetchExecutionNode
+    ) {
+      return (
+        <RelationalClassQueryTempTableGraphFetchExecutionNodeViewer
+          node={executionNode}
+          executionPlanState={executionPlanState}
         />
       );
     }
@@ -505,7 +675,6 @@ const ExecutionPlanViewPanel = observer(
       }
     }, [executionPlanState]);
     const nativeViewModes = Object.values(EXECUTION_PLAN_VIEW_MODE);
-
     return (
       <div className="execution-plan-viewer__panel">
         {executionPlanState.selectedNode !== undefined && (
@@ -568,6 +737,7 @@ const ExecutionPlanViewPanel = observer(
                     <ExecutionNodeViewer
                       executionNode={currentElement}
                       executionPlanState={executionPlanState}
+                      viewJson={true}
                     />
                   )}
                   {currentElement instanceof ExecutionPlan && (
@@ -651,6 +821,12 @@ export const ExecutionPlanViewer = observer(
       executionPlanState.setExecutionPlanDisplayData('');
       executionPlanState.setSelectedNode(undefined);
       executionPlanState.setDebugText(undefined);
+      executionPlanState.globalImplementationSupportState.setSelectedTab(
+        PLAN_TABS.GENERAL,
+      );
+      executionPlanState.globalImplementationSupportState.setSelectedJavaClass(
+        undefined,
+      );
     };
     const rawPlan = executionPlanState.rawPlan;
     const isDarkMode =

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

@@ -64,6 +64,7 @@ export const FunctionParametersValidationNodeViewer: React.FC<{
     }
     return `[${multiplicity.lowerBound.toString()}..${multiplicity.upperBound.toString()}]`;
   };
+
   return (
     <PanelContent
       darkMode={

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

@@ -0,0 +1,76 @@
+/**
+ * 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 { PanelListItem } from '@finos/legend-art';
+import {
+  type ExecutionNode,
+  ExecutionPlan,
+  JavaPlatformImplementation,
+} from '@finos/legend-graph';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import {
+  type ExecutionPlanState,
+  PLAN_TABS,
+} from '../../stores/execution-plan/ExecutionPlanState.js';
+
+export const ImplementationViewer: React.FC<{
+  node: ExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { node, executionPlanState } = props;
+
+  const openJavaClass = (): void => {
+    executionPlanState.setSelectedNode(
+      executionPlanState.treeData?.nodes.get(`Execution Plan`),
+    );
+    executionPlanState.transformMetadataToProtocolJson(
+      guaranteeType(
+        executionPlanState.plan,
+        ExecutionPlan,
+        'Execution plan is undefined',
+      ),
+    );
+    executionPlanState.globalImplementationSupportState.setSelectedTab(
+      PLAN_TABS.GLOBAL_IMPLEMENTATION_SUPPORT,
+    );
+    if (node.implementation instanceof JavaPlatformImplementation) {
+      executionPlanState.globalImplementationSupportState.setSelectedJavaClass(
+        node.implementation.executionClassFullName,
+      );
+    }
+  };
+
+  return (
+    <>
+      <PanelListItem className="query-builder__implementation__container__header">
+        Implementation
+      </PanelListItem>
+      {node.implementation instanceof JavaPlatformImplementation &&
+        node.implementation.executionClassFullName && (
+          <div className="query-builder__implementation__container__item">
+            <button
+              onClick={openJavaClass}
+              title={`Go to Java class: ${node.implementation.executionClassFullName}`}
+              className="query-builder__implementation__container__item__java-btn"
+            >
+              {node.implementation.executionClassFullName}
+            </button>
+          </div>
+        )}
+    </>
+  );
+});

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

@@ -0,0 +1,55 @@
+/**
+ * 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 { PanelListItem, PanelDivider } from '@finos/legend-art';
+import { type PartialClassResultType } from '@finos/legend-graph';
+
+export const PartialClassResultTypeViewer: React.FC<{
+  resultType: PartialClassResultType;
+}> = observer((props) => {
+  const { resultType } = props;
+
+  return (
+    <div className="query-builder__result__container">
+      <PanelListItem className="query-builder__result__container__item__partial-class">
+        Result type: PartialClass[{resultType.type.valueForSerialization ?? ''}]
+      </PanelListItem>
+      <PanelDivider />
+      {
+        <table className="table query-builder__result__container__table--partial-class">
+          <thead>
+            <tr>
+              <th className="table__cell--left">Property</th>
+              <th className="table__cell--left">Parameters</th>
+            </tr>
+          </thead>
+          <tbody>
+            {resultType.propertiesWithParameters.map((column) => (
+              <tr key={column.property}>
+                <td className="table__cell--left">{column.property}</td>
+                <td className="table__cell--left">
+                  {column.parameters.toString()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      }
+      <PanelDivider />
+    </div>
+  );
+});