@finos/legend-query-builder 4.1.2 → 4.1.4

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

@@ -0,0 +1,37 @@
+/**
+ * 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 ResultType,
+  TDSResultType,
+  DataTypeResultType,
+} from '@finos/legend-graph';
+import { DataTypeResultTypeViewer } from './DataTypeResultTypeViewer.js';
+import { TDSResultTypeViewer } from './TDSResultTypeViewer.js';
+
+export const ResultTypeViewer: React.FC<{
+  resultType: ResultType;
+}> = observer((props) => {
+  const { resultType } = props;
+  if (resultType instanceof DataTypeResultType) {
+    return <DataTypeResultTypeViewer resultType={resultType} />;
+  } else if (resultType instanceof TDSResultType) {
+    return <TDSResultTypeViewer resultType={resultType} />;
+  } else {
+    return <></>;
+  }
+});

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

@@ -19,7 +19,11 @@ import {
   type ExecutionPlanState,
   EXECUTION_PLAN_VIEW_MODE,
 } from '../../stores/execution-plan/ExecutionPlanState.js';
-import { type SQLResultColumn, stringifyDataType } from '@finos/legend-graph';
+import {
+  type SQLResultColumn,
+  stringifyDataType,
+  type ResultType,
+} from '@finos/legend-graph';
 import {
   PanelListItem,
   CopyIcon,
@@ -28,6 +32,7 @@ import {
   PanelContent,
 } from '@finos/legend-art';
 import { tryToFormatSql } from '../QueryBuilderResultPanel.js';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
 import {
   CodeEditor,
   CODE_EDITOR_LANGUAGE,
@@ -40,13 +45,14 @@ import {
  * @modularize
  * See https://github.com/finos/legend-studio/issues/65
  */
-export const SQLExecutionNodeViewer: React.FC<{
+
+export const SQLExecutionNodeViewerHelper: React.FC<{
   query: string;
   resultColumns: SQLResultColumn[];
+  resultType: ResultType;
   executionPlanState: ExecutionPlanState;
 }> = observer((props) => {
-  const { query, resultColumns, executionPlanState } = props;
-
+  const { query, resultColumns, resultType, executionPlanState } = props;
   const applicationStore = executionPlanState.applicationStore;
   const copyExpression = (value: string): void => {
     applicationStore.clipboardService
@@ -60,12 +66,9 @@ export const SQLExecutionNodeViewer: React.FC<{
       )
       .catch(applicationStore.alertUnhandledError);
   };
+
   return (
-    <PanelContent
-      darkMode={
-        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
-      }
-    >
+    <>
       <div className="query-builder__sql__container">
         <PanelDivider />
         <div key={query}>
@@ -125,17 +128,45 @@ export const SQLExecutionNodeViewer: React.FC<{
           </table>
         </div>
       </div>
-      <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>
+export const SQLExecutionNodeViewer: React.FC<{
+  query: string;
+  resultColumns: SQLResultColumn[];
+  resultType: ResultType;
+  executionPlanState: ExecutionPlanState;
+  viewJson: boolean;
+}> = observer((props) => {
+  const { query, resultColumns, resultType, executionPlanState, viewJson } =
+    props;
+  const applicationStore = executionPlanState.applicationStore;
+
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <SQLExecutionNodeViewerHelper
+        query={query}
+        resultColumns={resultColumns}
+        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>
+      )}
       <PanelDivider />
     </PanelContent>
   );

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

@@ -0,0 +1,95 @@
+/**
+ * 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 { generateExecutionNodeLabel } from './ExecutionPlanViewer.js';
+import {
+  type ExecutionPlanState,
+  EXECUTION_PLAN_VIEW_MODE,
+  ExecutionPlanViewTreeNodeData,
+  ExecutionNodeTreeNodeData,
+} from '../../stores/execution-plan/ExecutionPlanState.js';
+
+import {
+  PanelListItem,
+  PanelDivider,
+  Button,
+  PanelContent,
+} from '@finos/legend-art';
+import type { ExecutionNode, SequenceExecutionNode } from '@finos/legend-graph';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
+
+export const SequenceExecutionNodeViewer: React.FC<{
+  node: SequenceExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { node, executionPlanState } = props;
+  const resultType = node.resultType;
+  const applicationStore = executionPlanState.applicationStore;
+  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);
+    }
+    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">
+            Execution Nodes
+          </PanelListItem>
+          <PanelDivider />
+          {node.executionNodes.map((child, index) => (
+            <div
+              className="query-builder__sequence__container__item"
+              key={child._UUID}
+            >
+              <button
+                className="query-builder__sequence__container__item__btn"
+                onClick={() => openExecutionNode(child)}
+                tabIndex={-1}
+                title={`Go to ${generateExecutionNodeLabel(child)}`}
+              >
+                {`${index + 1}: ${generateExecutionNodeLabel(child)}`}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+      <PanelDivider />
+      <ResultTypeViewer resultType={resultType} />
+      <div className="query-builder__execution__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/TDSResultTypeViewer.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 {
+  PackageableElementImplicitReference,
+  type TDSResultType,
+} from '@finos/legend-graph';
+
+export const TDSResultTypeViewer: React.FC<{
+  resultType: TDSResultType;
+}> = observer((props) => {
+  const { resultType } = props;
+
+  return (
+    <div className="query-builder__result__container">
+      <PanelListItem className="query-builder__result__container__item__tds">
+        Result type: TDS
+      </PanelListItem>
+      <PanelDivider />
+      {
+        <table className="table query-builder__result__container__table">
+          <thead>
+            <tr>
+              <th className="table__cell--left">Label</th>
+              <th className="table__cell--left">Result DataType</th>
+            </tr>
+          </thead>
+          <tbody>
+            {resultType.tdsColumns.map((column) => (
+              <tr key={column.name}>
+                <td className="table__cell--left">{column.name}</td>
+                <td className="table__cell--left">
+                  {column.type instanceof PackageableElementImplicitReference &&
+                    (column.type.input ?? '')}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      }
+      <PanelDivider />
+    </div>
+  );
+});

package/src/components/explorer/QueryBuilderMilestoningEditor.tsx

@@ -65,10 +65,10 @@ const MilestoningParameterEditor = observer(
       },
       [queryBuilderState, stereotype],
     );
-    const [{ isMilestoningParameterValueDragOver }, dropConnector] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       QueryBuilderVariableDragSource,
       void,
-      { isMilestoningParameterValueDragOver: boolean }
+      { isDragOver: boolean }
     >(
       () => ({
         accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
@@ -77,10 +77,8 @@ const MilestoningParameterEditor = observer(
             handleDrop(item);
           }
         },
-        collect: (
-          monitor,
-        ): { isMilestoningParameterValueDragOver: boolean } => ({
-          isMilestoningParameterValueDragOver: monitor.isOver({
+        collect: (monitor): { isDragOver: boolean } => ({
+          isDragOver: monitor.isOver({
             shallow: true,
           }),
         }),
@@ -121,9 +119,8 @@ const MilestoningParameterEditor = observer(
     return (
       <div ref={dropConnector} className="query-builder__variable-editor">
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isMilestoningParameterValueDragOver}
+          isDragOver={isDragOver}
           label="Change Milestoning Parameter Value"
-          className="query-builder__dnd__placeholder"
         >
           <BasicValueSpecificationEditor
             valueSpecification={milestoningParameter}

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -153,9 +153,9 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeGroupNodeData;
     isDragOver: boolean;
-    showDroppableSuggestion: boolean;
+    isDroppable: boolean;
   }) => {
-    const { node, isDragOver, showDroppableSuggestion } = props;
+    const { node, isDragOver, isDroppable: isDroppable } = props;
     const switchOperation: React.MouseEventHandler<HTMLDivElement> = (
       event,
     ): void => {
@@ -166,19 +166,16 @@ const QueryBuilderPostFilterGroupConditionEditor = observer(
           : QUERY_BUILDER_GROUP_OPERATION.AND,
       );
     };
+
+    const operationName =
+      node.groupOperation === QUERY_BUILDER_GROUP_OPERATION.AND ? 'AND' : 'OR';
+
     return (
       <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
-        {showDroppableSuggestion && (
-          <div
-            className={clsx('dnd__entry--droppable__indicator ', {
-              'dnd__entry--droppable__indicator--dragover': isDragOver,
-            })}
-          ></div>
-        )}
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
-          label="Add to Logical Group"
-          className="query-builder__dnd__placeholder"
+          isDragOver={isDragOver}
+          isDroppable={isDroppable}
+          label={`Add to Logical Group '${operationName}'`}
         >
           <div
             className={clsx('query-builder-post-filter-tree__group-node', {
@@ -243,9 +240,8 @@ export const QueryBuilderColumnBadge = observer(
     return (
       <div ref={dropConnector} className="query-builder-column-badge">
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
+          isDragOver={isDragOver}
           label="Change Property"
-          className="query-builder__dnd__placeholder"
         >
           <div className="query-builder-column-badge__content">
             {type && (
@@ -367,8 +363,8 @@ const QueryBuilderPostFilterConditionEditor = observer(
       cleanUpReloadValues,
     };
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
           monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
@@ -376,20 +372,10 @@ const QueryBuilderPostFilterConditionEditor = observer(
 
     return (
       <div className="query-builder-post-filter-tree__node__label__content dnd__entry__container">
-        {showDroppableSuggestion && (
-          <div
-            className={clsx(
-              'dnd__entry--droppable__indicator query-builder-post-filter-tree__droppable--full',
-              {
-                'dnd__entry--droppable__indicator--dragover': isDragOver,
-              },
-            )}
-          ></div>
-        )}
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
+          isDragOver={isDragOver}
+          isDroppable={isDroppable}
           label="Add New Logical Group"
-          className="query-builder__dnd__placeholder"
         >
           <div className="query-builder-post-filter-tree__condition-node">
             <div className="query-builder-post-filter-tree__condition-node__property">
@@ -433,9 +419,8 @@ const QueryBuilderPostFilterConditionEditor = observer(
                 className="query-builder-post-filter-tree__condition-node__value"
               >
                 <PanelEntryDropZonePlaceholder
-                  showPlaceholder={isFilterValueDragOver}
+                  isDragOver={isFilterValueDragOver}
                   label="Change Filter Value"
-                  className="query-builder__dnd__placeholder"
                 >
                   <BasicValueSpecificationEditor
                     valueSpecification={node.condition.value}
@@ -467,22 +452,17 @@ const QueryBuilderPostFilterBlankConditionEditor = observer(
   (props: {
     node: QueryBuilderPostFilterTreeBlankConditionNodeData;
     isDragOver: boolean;
-    showDroppableSuggestion: boolean;
+    isDroppable: boolean;
   }) => {
-    const { isDragOver, showDroppableSuggestion } = props;
+    const { isDragOver, isDroppable } = props;
     return (
       <div className="query-builder-post-filter-tree__node__label__content">
         <PanelEntryDropZonePlaceholder
-          showPlaceholder={isDragOver}
+          isDragOver={isDragOver}
+          isDroppable={isDroppable}
           label="Create Condition"
-          className="query-builder__dnd__placeholder"
         >
-          <div
-            className={clsx('query-builder-post-filter-tree__blank-node', {
-              'query-builder-post-filter-tree__blank-node--droppable':
-                showDroppableSuggestion,
-            })}
-          >
+          <div className="query-builder-post-filter-tree__blank-node">
             blank
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -646,8 +626,8 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
     const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
           monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
@@ -698,16 +678,12 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
             <div
               className={clsx(
                 'tree-view__node__label query-builder-post-filter-tree__node__label',
-                {
-                  'query-builder-post-filter-tree__node__label--expandable':
-                    isExpandable,
-                },
               )}
             >
               {node instanceof QueryBuilderPostFilterTreeGroupNodeData && (
                 <QueryBuilderPostFilterGroupConditionEditor
                   node={node}
-                  showDroppableSuggestion={showDroppableSuggestion}
+                  isDroppable={isDroppable}
                   isDragOver={isDragOver}
                 />
               )}
@@ -722,7 +698,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
                 <QueryBuilderPostFilterBlankConditionEditor
                   node={node}
                   isDragOver={isDragOver}
-                  showDroppableSuggestion={showDroppableSuggestion}
+                  isDroppable={isDroppable}
                 />
               )}
             </div>
@@ -962,8 +938,8 @@ const QueryBuilderPostFilterPanelContent = observer(
     const addPostFilterRef = useRef<HTMLInputElement>(null);
     dropTargetConnector(addPostFilterRef);
 
-    const { showDroppableSuggestion } = useDragLayer((monitor) => ({
-      showDroppableSuggestion:
+    const { isDroppable } = useDragLayer((monitor) => ({
+      isDroppable:
         monitor.isDragging() &&
         (monitor.getItemType() === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
           monitor.getItemType() === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE),
@@ -1055,10 +1031,7 @@ const QueryBuilderPostFilterPanelContent = observer(
         <PanelContent>
           <PanelDropZone
             isDragOver={isDragOver && postFilterState.isEmpty}
-            showDroppableSuggestion={
-              showDroppableSuggestion && postFilterState.isEmpty
-            }
-            className="query-builder__panel--droppable"
+            isDroppable={isDroppable && postFilterState.isEmpty}
             dropTargetConnector={dropTargetConnector}
           >
             {postFilterState.isEmpty && (
@@ -1078,17 +1051,19 @@ const QueryBuilderPostFilterPanelContent = observer(
                 <QueryBuilderPostFilterTree tdsState={tdsState} />
               </>
             )}
-            {showDroppableSuggestion && !postFilterState.isEmpty && (
+            {isDroppable && !postFilterState.isEmpty && (
               <div
                 ref={addPostFilterRef}
-                className={clsx(
-                  'query-builder-post-filter-tree__blank-node--droppable--tall',
-                  {
-                    'dnd__entry--droppable__indicator--dragover': isDragOver,
-                  },
-                )}
+                className="query-builder-post-filter-tree__free-drop-zone__container"
               >
-                Add post-filter to main group
+                <PanelEntryDropZonePlaceholder
+                  isDragOver={isDragOver}
+                  isDroppable={isDroppable}
+                  className="query-builder-post-filter-tree__free-drop-zone"
+                  label="Add post-filter to main group"
+                >
+                  <></>{' '}
+                </PanelEntryDropZonePlaceholder>
               </div>
             )}
           </PanelDropZone>