@finos/legend-query-builder 4.4.0 → 4.5.1

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

@@ -52,7 +52,7 @@ export const SQLExecutionNodeViewerHelper: React.FC<{
   resultType: ResultType;
   executionPlanState: ExecutionPlanState;
 }> = observer((props) => {
-  const { query, resultColumns, resultType, executionPlanState } = props;
+  const { query, resultColumns, executionPlanState } = props;
   const applicationStore = executionPlanState.applicationStore;
   const copyExpression = (value: string): void => {
     applicationStore.clipboardService
@@ -66,7 +66,6 @@ export const SQLExecutionNodeViewerHelper: React.FC<{
       )
       .catch(applicationStore.alertUnhandledError);
   };
-
   return (
     <>
       <div className="query-builder__sql__container">
@@ -89,46 +88,60 @@ export const SQLExecutionNodeViewerHelper: React.FC<{
             </PanelListItem>
           </div>
           <div className="query-builder__sql__container__code-editor">
+            {/* Replace special characters to fix SQL-formatter bug*/}
             <CodeEditor
-              inputValue={tryToFormatSql(query)}
+              inputValue={tryToFormatSql(
+                query
+                  .replaceAll('$', 'changeDollar')
+                  .replaceAll('?', 'changeQuestion')
+                  .replaceAll('{', 'changeOpenCurlyBracket')
+                  .replaceAll('}', 'changeCloseCurlyBracket')
+                  .replaceAll("'", 'changeSingleQuote'),
+              )
+                .replaceAll('changeDollar', '$')
+                .replaceAll('changeQuestion', '?')
+                .replaceAll('changeOpenCurlyBracket', '{')
+                .replaceAll('changeCloseCurlyBracket', '}')
+                .replaceAll('changeSingleQuote', "'")}
               language={CODE_EDITOR_LANGUAGE.SQL}
             />
           </div>
           <PanelDivider />
         </div>
       </div>
-      <div className="query-builder__sql__container">
-        <div>
-          <PanelListItem className="query-builder__sql__container__item__label">
-            Result Columns
-          </PanelListItem>
-          <PanelDivider />
-          <table className="table query-builder__sql__container__table">
-            <thead>
-              <tr>
-                <th className="table__cell--left">Label</th>
-                <th className="table__cell--left">Data Type</th>
-              </tr>
-            </thead>
-            <tbody>
-              {resultColumns.map((column) => (
-                <tr key={column.label}>
-                  <td className="table__cell--left">
-                    {column.label.replaceAll(`"`, '')}
-                  </td>
-
-                  {column.dataType && (
+      {resultColumns.length > 0 && (
+        <div className="query-builder__sql__container">
+          <div>
+            <PanelListItem className="query-builder__sql__container__item__label">
+              Result Columns
+            </PanelListItem>
+            <PanelDivider />
+            <table className="table query-builder__sql__container__table">
+              <thead>
+                <tr>
+                  <th className="table__cell--left">Label</th>
+                  <th className="table__cell--left">Data Type</th>
+                </tr>
+              </thead>
+              <tbody>
+                {resultColumns.map((column) => (
+                  <tr key={column.label}>
                     <td className="table__cell--left">
-                      {stringifyDataType(column.dataType)}
+                      {column.label.replaceAll(`"`, '')}
                     </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
+
+                    {column.dataType && (
+                      <td className="table__cell--left">
+                        {stringifyDataType(column.dataType)}
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
-      <ResultTypeViewer resultType={resultType} />
+      )}
     </>
   );
 });
@@ -138,12 +151,22 @@ export const SQLExecutionNodeViewer: React.FC<{
   resultColumns: SQLResultColumn[];
   resultType: ResultType;
   executionPlanState: ExecutionPlanState;
-  viewJson: boolean;
+  viewJson?: boolean | undefined;
 }> = observer((props) => {
   const { query, resultColumns, resultType, executionPlanState, viewJson } =
     props;
   const applicationStore = executionPlanState.applicationStore;
 
+  if (viewJson === false) {
+    return (
+      <SQLExecutionNodeViewerHelper
+        query={query}
+        resultColumns={resultColumns}
+        resultType={resultType}
+        executionPlanState={executionPlanState}
+      />
+    );
+  }
   return (
     <PanelContent
       darkMode={
@@ -156,17 +179,16 @@ export const SQLExecutionNodeViewer: React.FC<{
         resultType={resultType}
         executionPlanState={executionPlanState}
       />
-      {viewJson && (
-        <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>
-      )}
+      <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>
   );

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

@@ -15,7 +15,10 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { generateExecutionNodeLabel } from './ExecutionPlanViewer.js';
+import {
+  ExecutionNodeViewer,
+  generateExecutionNodeLabel,
+} from './ExecutionPlanViewer.js';
 import {
   type ExecutionPlanState,
   EXECUTION_PLAN_VIEW_MODE,
@@ -28,33 +31,55 @@ import {
   PanelDivider,
   Button,
   PanelContent,
+  ChevronDownIcon,
+  ChevronRightIcon,
 } from '@finos/legend-art';
 import type { ExecutionNode, SequenceExecutionNode } from '@finos/legend-graph';
 import { ResultTypeViewer } from './ResultTypeViewer.js';
+import { useState } from 'react';
 
-export const SequenceExecutionNodeViewer: React.FC<{
+export const SequenceExecutionNodeViewerHelper: React.FC<{
   node: SequenceExecutionNode;
   executionPlanState: ExecutionPlanState;
+  viewJson?: boolean | undefined;
 }> = observer((props) => {
-  const { node, executionPlanState } = props;
+  const { node, executionPlanState, viewJson } = props;
   const resultType = node.resultType;
-  const applicationStore = executionPlanState.applicationStore;
+  const [executionNode, setExecutionNode] = useState<ExecutionNode | undefined>(
+    undefined,
+  );
+  const nodeExpandIcon = viewJson ? (
+    <div />
+  ) : executionNode ? (
+    <ChevronDownIcon />
+  ) : (
+    <ChevronRightIcon />
+  );
   const openExecutionNode = (child: ExecutionNode): void => {
     const newNode = executionPlanState.treeData?.nodes.get(child._UUID);
-    if (newNode instanceof ExecutionPlanViewTreeNodeData) {
-      executionPlanState.transformMetadataToProtocolJson(newNode.executionPlan);
-    } else if (newNode instanceof ExecutionNodeTreeNodeData) {
-      executionPlanState.transformMetadataToProtocolJson(newNode.executionNode);
+    if (viewJson === false) {
+      if (executionNode) {
+        setExecutionNode(undefined);
+      } else {
+        setExecutionNode(child);
+      }
+    } else {
+      if (newNode instanceof ExecutionPlanViewTreeNodeData) {
+        executionPlanState.transformMetadataToProtocolJson(
+          newNode.executionPlan,
+        );
+      } else if (newNode instanceof ExecutionNodeTreeNodeData) {
+        executionPlanState.transformMetadataToProtocolJson(
+          newNode.executionNode,
+        );
+      }
+      if (newNode) {
+        executionPlanState.setSelectedNode(newNode);
+      }
     }
-    executionPlanState.setSelectedNode(newNode);
   };
-
   return (
-    <PanelContent
-      darkMode={
-        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-      }
-    >
+    <>
       <div className="query-builder__sequence__container">
         <div>
           <PanelListItem className="query-builder__sequence__container__item__label">
@@ -72,6 +97,7 @@ export const SequenceExecutionNodeViewer: React.FC<{
                 tabIndex={-1}
                 title={`Go to ${generateExecutionNodeLabel(child)}`}
               >
+                {!viewJson && nodeExpandIcon}
                 {`${index + 1}: ${generateExecutionNodeLabel(child)}`}
               </button>
             </div>
@@ -80,6 +106,44 @@ export const SequenceExecutionNodeViewer: React.FC<{
       </div>
       <PanelDivider />
       <ResultTypeViewer resultType={resultType} />
+      {viewJson === false && executionNode && (
+        <ExecutionNodeViewer
+          executionNode={executionNode}
+          executionPlanState={executionPlanState}
+          viewJson={false}
+        />
+      )}
+    </>
+  );
+});
+
+export const SequenceExecutionNodeViewer: React.FC<{
+  node: SequenceExecutionNode;
+  executionPlanState: ExecutionPlanState;
+  viewJson?: boolean | undefined;
+}> = observer((props) => {
+  const { node, executionPlanState, viewJson } = props;
+  const applicationStore = executionPlanState.applicationStore;
+  if (viewJson === false) {
+    return (
+      <SequenceExecutionNodeViewerHelper
+        node={node}
+        executionPlanState={executionPlanState}
+        viewJson={viewJson}
+      />
+    );
+  }
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <SequenceExecutionNodeViewerHelper
+        node={node}
+        executionPlanState={executionPlanState}
+        viewJson={viewJson}
+      />
       <div className="query-builder__execution__container">
         <Button
           className="btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn"

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

@@ -0,0 +1,264 @@
+/**
+ * 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 {
+  PartialClassResultType,
+  PropertyGraphFetchTree,
+  RootGraphFetchTree,
+  type StoreMappingGlobalGraphFetchExecutionNode,
+} from '@finos/legend-graph';
+import {
+  PanelListItem,
+  PanelDivider,
+  Button,
+  PanelContent,
+  TreeView,
+} from '@finos/legend-art';
+import { guaranteeType, isNonNullable } from '@finos/legend-shared';
+import {
+  buildGraphFetchTreeData,
+  buildPropertyGraphFetchTreeData,
+  type QueryBuilderGraphFetchTreeData,
+  type QueryBuilderGraphFetchTreeNodeData,
+} from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeUtil.js';
+import { QueryBuilderGraphFetchTreeNodeContainer } from '../fetch-structure/QueryBuilderGraphFetchTreePanel.js';
+import { PartialClassResultTypeViewer } from './PartialClassResultViewer.js';
+
+export const StoreMappingGlobalGraphFetchExecutionNodeViewer: React.FC<{
+  storeMappingNode: StoreMappingGlobalGraphFetchExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { storeMappingNode, executionPlanState } = props;
+
+  let treeData: QueryBuilderGraphFetchTreeData | undefined = undefined;
+  try {
+    if (storeMappingNode.graphFetchTree instanceof RootGraphFetchTree) {
+      treeData = buildGraphFetchTreeData(
+        guaranteeType(storeMappingNode.graphFetchTree, RootGraphFetchTree),
+        true,
+      );
+    } else if (
+      storeMappingNode.graphFetchTree instanceof PropertyGraphFetchTree
+    ) {
+      treeData = buildPropertyGraphFetchTreeData(
+        storeMappingNode.graphFetchTree,
+      );
+    }
+  } catch {
+    //do nothing
+  }
+
+  const getChildNodes = (
+    node: QueryBuilderGraphFetchTreeNodeData,
+  ): QueryBuilderGraphFetchTreeNodeData[] =>
+    node.childrenIds
+      .map((id) => {
+        if (treeData) {
+          return treeData.nodes.get(id);
+        }
+        return null;
+      })
+      .filter(isNonNullable);
+
+  const isReadOnly = true;
+  const applicationStore = executionPlanState.applicationStore;
+
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <div className="query-builder__store-mapping-global-graph-fetch__container">
+        <PanelListItem className="query-builder__store-mapping-global-graph-fetch__container__label">
+          Store Mapping Global Graph Fetch Execution Node Details
+        </PanelListItem>
+        <PanelDivider />
+        <table className="table query-builder__store-mapping-global-graph-fetch__container__table">
+          <thead>
+            <tr>
+              <th className="table__cell--left">Property</th>
+              <th className="table__cell--left">Details</th>
+            </tr>
+          </thead>
+          <tbody>
+            {storeMappingNode.parentIndex !== undefined && (
+              <tr>
+                <td className="table__cell--left"> ParentIndex</td>
+                <td className="table__cell--left">
+                  {storeMappingNode.parentIndex}
+                </td>
+              </tr>
+            )}
+            {storeMappingNode.enableConstraints !== undefined && (
+              <tr>
+                <td className="table__cell--left">EnableConstraints</td>
+                <td className="table__cell--left">
+                  {storeMappingNode.enableConstraints.toString()}
+                </td>
+              </tr>
+            )}
+            {storeMappingNode.checked !== undefined && (
+              <tr>
+                <td className="table__cell--left">Checked</td>
+                <td className="table__cell--left">
+                  {storeMappingNode.checked.toString()}
+                </td>
+              </tr>
+            )}
+            {storeMappingNode.authDependent !== undefined && (
+              <tr>
+                <td className="table__cell--left">AuthDependent</td>
+                <td className="table__cell--left">
+                  {storeMappingNode.authDependent.toString()}
+                </td>
+              </tr>
+            )}
+            {storeMappingNode.store && (
+              <tr>
+                <td className="table__cell--left">Store</td>
+                <td className="table__cell--left">{storeMappingNode.store}</td>
+              </tr>
+            )}
+            <tr>
+              <td className="table__cell--left">LocalTreeIndices</td>
+              <td className="table__cell--left">{`[${storeMappingNode.localTreeIndices.toString()}]`}</td>
+            </tr>
+            <tr>
+              <td className="table__cell--left">DependencyIndices</td>
+              <td className="table__cell--left">{`[${storeMappingNode.dependencyIndices.toString()}]`}</td>
+            </tr>
+          </tbody>
+        </table>
+        <PanelDivider />
+        {treeData && (
+          <>
+            <PanelListItem className="query-builder__store-mapping-global-graph-fetch__container__label2">
+              Graph Fetch Tree
+            </PanelListItem>
+            <div className="query-builder__store-mapping-global-graph-fetch__container__config-group__content">
+              <div className="query-builder__store-mapping-global-graph-fetch__container__config-group__item">
+                <TreeView
+                  components={{
+                    TreeNodeContainer: QueryBuilderGraphFetchTreeNodeContainer,
+                  }}
+                  className="query-builder-graph-fetch-tree__container__tree"
+                  treeData={treeData}
+                  getChildNodes={getChildNodes}
+                  innerProps={{
+                    isReadOnly,
+                  }}
+                />
+              </div>
+            </div>
+            <PanelDivider />
+          </>
+        )}
+        {storeMappingNode.xStorePropertyFetchDetails && (
+          <>
+            <PanelListItem className="query-builder__store-mapping-global-graph-fetch__container__xstore">
+              xStorePropertyFetchDetails
+            </PanelListItem>
+            <PanelDivider />
+            <table className="table query-builder__store-mapping-global-graph-fetch__container__table">
+              <thead>
+                <tr>
+                  <th className="table__cell--left">Property</th>
+                  <th className="table__cell--left">Details</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td className="table__cell--left"> propertyPath </td>
+                  <td className="table__cell--left">
+                    {storeMappingNode.xStorePropertyFetchDetails.propertyPath}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> sourceMappingId </td>
+                  <td className="table__cell--left">
+                    {
+                      storeMappingNode.xStorePropertyFetchDetails
+                        .sourceMappingId
+                    }
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> sourceSetId </td>
+                  <td className="table__cell--left">
+                    {storeMappingNode.xStorePropertyFetchDetails.sourceSetId}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> subTree </td>
+                  <td className="table__cell--left">
+                    {storeMappingNode.xStorePropertyFetchDetails.subTree}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> supportsCaching </td>
+                  <td className="table__cell--left">
+                    {storeMappingNode.xStorePropertyFetchDetails.supportsCaching.toString()}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> targetMappingId </td>
+                  <td className="table__cell--left">
+                    {
+                      storeMappingNode.xStorePropertyFetchDetails
+                        .targetMappingId
+                    }
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left"> targetSetId</td>
+                  <td className="table__cell--left">
+                    {storeMappingNode.xStorePropertyFetchDetails.targetSetId}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="table__cell--left">targetPropertiesOrdered</td>
+                  <td className="table__cell--left">{`[${storeMappingNode.xStorePropertyFetchDetails.targetPropertiesOrdered.toString()}]`}</td>
+                </tr>
+              </tbody>
+            </table>
+          </>
+        )}
+        {storeMappingNode.resultType instanceof PartialClassResultType && (
+          <PartialClassResultTypeViewer
+            resultType={storeMappingNode.resultType}
+          />
+        )}
+        <PanelDivider />
+        <div className="query-builder__store-mapping-global-graph-fetch__container__btn">
+          <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 />
+      </div>
+    </PanelContent>
+  );
+});

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

@@ -0,0 +1,97 @@
+/**
+ * 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 { PanelDivider, PanelListItem } from '@finos/legend-art';
+import {
+  LoadFromResultSetAsValueTuplesTempTableStrategy,
+  LoadFromSubQueryTempTableStrategy,
+  LoadFromTempFileTempTableStrategy,
+  type TempTableStrategy,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import {
+  ExecutionNodeViewer,
+  generateExecutionNodeLabel,
+} from './ExecutionPlanViewer.js';
+import { type ExecutionPlanState } from '../../stores/execution-plan/ExecutionPlanState.js';
+
+export enum TEMP_TABLE_STRATEGY_TYPES {
+  RESULT_SET = 'resultSet',
+  TEMP_FILE = 'tempFile',
+  SUB_QUERY = 'subQuery',
+}
+
+export const TempTableStrategyViewer: React.FC<{
+  tempTableStrategy: TempTableStrategy;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { tempTableStrategy, executionPlanState } = props;
+  let _type = '';
+  if (
+    tempTableStrategy instanceof LoadFromResultSetAsValueTuplesTempTableStrategy
+  ) {
+    _type = TEMP_TABLE_STRATEGY_TYPES.RESULT_SET;
+  } else if (tempTableStrategy instanceof LoadFromTempFileTempTableStrategy) {
+    _type = TEMP_TABLE_STRATEGY_TYPES.TEMP_FILE;
+  }
+  if (tempTableStrategy instanceof LoadFromSubQueryTempTableStrategy) {
+    _type = TEMP_TABLE_STRATEGY_TYPES.SUB_QUERY;
+  }
+  return (
+    <div className="query-builder__temp-table-strategy__container">
+      {_type && (
+        <PanelListItem className="query-builder__temp-table-strategy__container__item">
+          Type: {_type}
+        </PanelListItem>
+      )}
+      <PanelListItem className="query-builder__temp-table-strategy__container__header">
+        {`Create Temp Table (${generateExecutionNodeLabel(
+          tempTableStrategy.createTempTableNode,
+        )})`}
+      </PanelListItem>
+      <ExecutionNodeViewer
+        executionNode={tempTableStrategy.createTempTableNode}
+        executionPlanState={executionPlanState}
+        viewJson={false}
+      />
+      <PanelDivider />
+
+      <PanelListItem className="query-builder__temp-table-strategy__container__header">
+        {`Load Temp Table (${generateExecutionNodeLabel(
+          tempTableStrategy.loadTempTableNode,
+        )})`}
+      </PanelListItem>
+      <ExecutionNodeViewer
+        executionNode={tempTableStrategy.loadTempTableNode}
+        executionPlanState={executionPlanState}
+        viewJson={false}
+      />
+      <PanelDivider />
+
+      <PanelListItem className="query-builder__temp-table-strategy__container__header">
+        {`Drop Temp Table (${generateExecutionNodeLabel(
+          tempTableStrategy.dropTempTableNode,
+        )})`}
+      </PanelListItem>
+      <ExecutionNodeViewer
+        executionNode={tempTableStrategy.dropTempTableNode}
+        executionPlanState={executionPlanState}
+        viewJson={false}
+      />
+      <PanelDivider />
+    </div>
+  );
+});