@finos/legend-query-builder 4.1.2 → 4.1.4

package/src/components/QueryBuilderResultPanel.tsx

@@ -68,7 +68,7 @@ import {
   prettyDuration,
   filterByType,
 } from '@finos/legend-shared';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
 import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderProjectionColumnState,
@@ -132,6 +132,7 @@ const QueryBuilderGridResultContextMenu = observer(
     }
   >(function QueryBuilderResultContextMenu(props, ref) {
     const { data, tdsState } = props;
+
     const applicationStore = useApplicationStore();
     const postFilterEqualOperator = new QueryBuilderPostFilterOperator_Equal();
     const postFilterInOperator = new QueryBuilderPostFilterOperator_In();
@@ -404,14 +405,31 @@ const QueryBuilderGridResultContextMenu = observer(
       ),
     );
 
+    const findRowFromRowIndex = (
+      rowIndex: number,
+    ): (string | number | boolean | null)[] => {
+      if (
+        !tdsState.queryBuilderState.resultState.executionResult ||
+        !(
+          tdsState.queryBuilderState.resultState.executionResult instanceof
+          TDSExecutionResult
+        )
+      ) {
+        return [''];
+      }
+      return (
+        tdsState.queryBuilderState.resultState.executionResult.result.rows[
+          rowIndex
+        ]?.values ?? ['']
+      );
+    };
+
     const handleCopyRowValue = applicationStore.guardUnhandledError(() =>
       applicationStore.clipboardService.copyTextToClipboard(
-        tdsState.queryBuilderState.resultState
-          .findRowFromRowIndex(
-            tdsState.queryBuilderState.resultState.selectedCells[0]?.coordinates
-              .rowIndex ?? 0,
-          )
-          .toString(),
+        findRowFromRowIndex(
+          tdsState.queryBuilderState.resultState.selectedCells[0]?.coordinates
+            .rowIndex ?? 0,
+        ).toString(),
       ),
     );
 
@@ -480,6 +498,45 @@ const QueryResultCellRenderer = observer(
         result.coordinates.rowIndex === currentCellCoordinates.rowIndex,
     );
 
+    const findColumnFromCoordinates = (
+      colIndex: number,
+    ): string | number | boolean | null | undefined => {
+      if (
+        !resultState.executionResult ||
+        !(resultState.executionResult instanceof TDSExecutionResult)
+      ) {
+        return undefined;
+      }
+      return resultState.executionResult.result.columns[colIndex];
+    };
+
+    const findResultValueFromCoordinates = (
+      resultCoordinate: [number, number],
+    ): string | number | boolean | null | undefined => {
+      const rowIndex = resultCoordinate[0];
+      const colIndex = resultCoordinate[1];
+
+      if (
+        !resultState.executionResult ||
+        !(resultState.executionResult instanceof TDSExecutionResult)
+      ) {
+        return undefined;
+      }
+
+      return resultState.executionResult.result.rows[rowIndex]?.values[
+        colIndex
+      ];
+    };
+
+    const isCoordinatesSelected = (
+      resultCoordinate: QueryBuilderTDSResultCellCoordinate,
+    ): boolean =>
+      resultState.selectedCells.some(
+        (cell) =>
+          cell.coordinates.rowIndex === resultCoordinate.rowIndex &&
+          cell.coordinates.colIndex === resultCoordinate.colIndex,
+      );
+
     const mouseDown: React.MouseEventHandler = (event) => {
       event.preventDefault();
 
@@ -488,7 +545,7 @@ const QueryResultCellRenderer = observer(
           columnName,
           params.rowIndex,
         );
-        const actualValue = resultState.findResultValueFromCoordinates([
+        const actualValue = findResultValueFromCoordinates([
           coordinates.rowIndex,
           coordinates.colIndex,
         ]);
@@ -507,20 +564,13 @@ const QueryResultCellRenderer = observer(
           columnName,
           params.rowIndex,
         );
-        const actualValue = resultState.findResultValueFromCoordinates([
+        const actualValue = findResultValueFromCoordinates([
           coordinates.rowIndex,
           coordinates.colIndex,
         ]);
 
         const rowNode = params.api.getRowNode(params.rowIndex.toString());
 
-        if (rowNode) {
-          params.api.refreshCells({
-            force: true,
-            columns: [columnName],
-            rowNodes: [rowNode],
-          });
-        }
         resultState.setSelectedCells([
           {
             value: actualValue,
@@ -528,6 +578,48 @@ const QueryResultCellRenderer = observer(
             coordinates: coordinates,
           },
         ]);
+
+        if (rowNode) {
+          params.api.refreshCells({
+            force: true,
+            columns: [columnName],
+            rowNodes: [rowNode],
+          });
+        }
+
+        resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
+      }
+
+      if (event.button === 2) {
+        const coordinates = findCoordinatesFromResultValue(
+          columnName,
+          params.rowIndex,
+        );
+        const isInSelected = isCoordinatesSelected(coordinates);
+        if (!isInSelected) {
+          const actualValue = findResultValueFromCoordinates([
+            coordinates.rowIndex,
+            coordinates.colIndex,
+          ]);
+
+          resultState.setSelectedCells([
+            {
+              value: actualValue,
+              columnName: columnName,
+              coordinates: coordinates,
+            },
+          ]);
+          const rowNode = params.api.getRowNode(params.rowIndex.toString());
+
+          if (rowNode) {
+            params.api.refreshCells({
+              force: true,
+              columns: [columnName],
+              rowNodes: [rowNode],
+            });
+          }
+          resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
+        }
       }
     };
     const mouseUp: React.MouseEventHandler = (event) => {
@@ -559,14 +651,11 @@ const QueryResultCellRenderer = observer(
 
         for (let x = minRow; x <= maxRow; x++) {
           for (let y = minCol; y <= maxCol; y++) {
-            const actualValue = resultState.findResultValueFromCoordinates([
-              x,
-              y,
-            ]);
+            const actualValue = findResultValueFromCoordinates([x, y]);
 
             const valueAndColumnId = {
               value: actualValue,
-              columnName: resultState.findColumnFromCoordinates(y),
+              columnName: findColumnFromCoordinates(y),
               coordinates: {
                 rowIndex: x,
                 colIndex: y,
@@ -828,13 +917,6 @@ export const QueryBuilderResultPanel = observer(
       flowResult(resultState.generatePlan(true)),
     );
 
-    const changeLimit: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      const val = event.target.value;
-      queryBuilderState.resultState.setPreviewLimit(
-        val === '' ? 0 : parseInt(val, 10),
-      );
-    };
-
     const allowSettingPreviewLimit = queryBuilderState.isQuerySupported;
 
     const copyExpression = (value: string): void => {
@@ -877,6 +959,37 @@ export const QueryBuilderResultPanel = observer(
     const resultDescription = executionResult
       ? getResultSetDescription(executionResult)
       : undefined;
+
+    const [previewLimitValue, setPreviewLimitValue] = useState(
+      resultState.previewLimit,
+    );
+
+    const changePreviewLimit: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      setPreviewLimitValue(parseInt(event.target.value, 10));
+    };
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const getPreviewLimit = (): void => {
+      if (isNaN(previewLimitValue) || previewLimitValue === 0) {
+        setPreviewLimitValue(1);
+        queryBuilderState.resultState.setPreviewLimit(1);
+      } else {
+        queryBuilderState.resultState.setPreviewLimit(previewLimitValue);
+      }
+    };
+
+    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+      if (event.code === 'Enter') {
+        getPreviewLimit();
+        inputRef.current?.focus();
+      } else if (event.code === 'Escape') {
+        inputRef.current?.select();
+      }
+    };
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_PANEL}
@@ -956,11 +1069,14 @@ export const QueryBuilderResultPanel = observer(
                   preview limit
                 </div>
                 <input
+                  ref={inputRef}
                   className="input--dark query-builder__result__limit__input"
                   spellCheck={false}
                   type="number"
-                  value={resultState.previewLimit}
-                  onChange={changeLimit}
+                  value={previewLimitValue}
+                  onChange={changePreviewLimit}
+                  onBlur={getPreviewLimit}
+                  onKeyDown={onKeyDown}
                   disabled={!isQueryValid}
                 />
               </div>

package/src/components/QueryBuilderTextEditor.tsx

@@ -54,7 +54,9 @@ export const QueryBuilderTextEditor = observer(
     const mode = queryTextEditorState.mode;
     useEffect(() => {
       flowResult(
-        queryTextEditorState.convertLambdaObjectToGrammarString(true),
+        queryTextEditorState.convertLambdaObjectToGrammarString({
+          pretty: true,
+        }),
       ).catch(applicationStore.alertUnhandledError);
     }, [applicationStore, queryTextEditorState]);
 

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

@@ -0,0 +1,77 @@
+/**
+ * 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 } from '../../stores/execution-plan/ExecutionPlanState.js';
+import { PanelListItem, PanelDivider, PanelContent } from '@finos/legend-art';
+import {
+  ConstantExecutionNode,
+  type AllocationExecutionNode,
+} from '@finos/legend-graph';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
+import { ConstantExecutionNodeViewer } from './ConstantExecutionNodeViewer.js';
+
+export const AllocationExecutionNodeViewer: React.FC<{
+  node: AllocationExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { node, executionPlanState } = props;
+  const varName = node.varName;
+  const resultType = node.resultType;
+  const realizeInMemory = node.realizeInMemory.toString();
+  const applicationStore = executionPlanState.applicationStore;
+
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <div className="query-builder__allocation__container">
+        <div>
+          <PanelListItem className="query-builder__allocation__container__item__label">
+            Allocation Node Details
+          </PanelListItem>
+          <PanelDivider />
+          <div className="query-builder__allocation__container__item">
+            <div className="query-builder__allocation__container__info">
+              varName
+            </div>
+            <div className="query-builder__allocation__container__info__var-name">
+              {`: ${varName}`}
+            </div>
+            <br />
+            <div className="query-builder__allocation__container__info">
+              realizeInMemory {`: ${realizeInMemory}`}
+            </div>
+          </div>
+        </div>
+      </div>
+      <PanelDivider />
+      <ResultTypeViewer resultType={resultType} />
+      <PanelDivider />
+      {node.executionNodes.length > 0 &&
+        node.executionNodes[0] !== undefined &&
+        node.executionNodes[0] instanceof ConstantExecutionNode && (
+          <ConstantExecutionNodeViewer
+            cnode={node.executionNodes[0]}
+            executionPlanState={executionPlanState}
+          />
+        )}
+      <PanelDivider />
+    </PanelContent>
+  );
+});

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

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+  PanelListItem,
+  PanelDivider,
+  Button,
+  PanelContent,
+} from '@finos/legend-art';
+import type { ConstantExecutionNode } from '@finos/legend-graph';
+import { ResultTypeViewer } from './ResultTypeViewer.js';
+import { isPlainObject } from '@finos/legend-shared';
+
+export const ConstantExecutionNodeViewer: React.FC<{
+  cnode: ConstantExecutionNode;
+  executionPlanState: ExecutionPlanState;
+}> = observer((props) => {
+  const { cnode, executionPlanState } = props;
+  const resultType = cnode.resultType;
+  let value = '';
+  const applicationStore = executionPlanState.applicationStore;
+  try {
+    value = (isPlainObject(cnode.values) ? cnode.values.value : '') as string;
+  } catch {
+    // do nothing
+  }
+
+  return (
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      {value !== '' && (
+        <div className="query-builder__constant__container">
+          <div>
+            <PanelListItem className="query-builder__constant__container__item__label">
+              Constant Execution Node Details
+            </PanelListItem>
+            <PanelDivider />
+            <pre>
+              <div className="query-builder__constant__container__item">
+                <div>value : {value}</div>
+              </div>
+            </pre>
+          </div>
+        </div>
+      )}
+      <PanelDivider />
+      <ResultTypeViewer resultType={resultType} />
+      <div className="query-builder__constant__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/DataTypeResultTypeViewer.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 DataTypeResultType,
+} from '@finos/legend-graph';
+
+export const DataTypeResultTypeViewer: React.FC<{
+  resultType: DataTypeResultType;
+}> = observer((props) => {
+  const { resultType } = props;
+  let type = '';
+  if (resultType.type instanceof PackageableElementImplicitReference) {
+    type = resultType.type.input ?? '';
+  }
+
+  if (type === '') {
+    return <></>;
+  }
+
+  return (
+    <div className="query-builder__result__container">
+      <PanelListItem className="query-builder__result__container__item__data-type">
+        <>
+          <div className="query-builder__result__container__item__data-type__type">
+            Result type:
+          </div>
+          <div className="query-builder__result__container__item__data-type__value">
+            {type}
+          </div>
+        </>
+      </PanelListItem>
+      <PanelDivider />
+    </div>
+  );
+});