@finos/legend-query-builder 3.2.7 → 3.2.9

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

@@ -15,13 +15,19 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import type { ExecutionPlanState } from '../../stores/execution-plan/ExecutionPlanState.js';
+import {
+  type ExecutionPlanState,
+  EXECUTION_PLAN_VIEW_MODE,
+} from '../../stores/execution-plan/ExecutionPlanState.js';
 import { format as formatSQL } from 'sql-formatter';
-import type { SQLResultColumn } from '@finos/legend-graph';
+import { type SQLResultColumn, stringifyDataType } from '@finos/legend-graph';
 import {
-  CODE_EDITOR_LANGUAGE,
-  CodeEditor,
-} from '@finos/legend-lego/code-editor';
+  PanelListItem,
+  CopyIcon,
+  PanelDivider,
+  Button,
+  PanelContent,
+} from '@finos/legend-art';
 
 /**
  * TODO: Create a new `AbstractPlugin` for this, called `ExecutionPlanViewerPlugin`
@@ -35,14 +41,95 @@ export const SQLExecutionNodeViewer: React.FC<{
   resultColumns: SQLResultColumn[];
   executionPlanState: ExecutionPlanState;
 }> = observer((props) => {
-  const { query } = props;
+  const { query, resultColumns, executionPlanState } = props;
 
+  const applicationStore = executionPlanState.applicationStore;
+  const copyExpression = (value: string): void => {
+    applicationStore.clipboardService
+      .copyTextToClipboard(value)
+      .then(() =>
+        applicationStore.notificationService.notifySuccess(
+          'SQL Query copied',
+          undefined,
+          2500,
+        ),
+      )
+      .catch(applicationStore.alertUnhandledError);
+  };
   return (
-    <CodeEditor
-      inputValue={formatSQL(query)}
-      isReadOnly={true}
-      language={CODE_EDITOR_LANGUAGE.SQL}
-      hideMinimap={true}
-    />
+    <PanelContent
+      darkMode={
+        !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+      }
+    >
+      <div className="query-builder__sql__container">
+        <PanelDivider />
+        <div key={query}>
+          <div className="query-builder__sql__container__item__label">
+            <PanelListItem>
+              SQL
+              <div>
+                <button
+                  onClick={() => {
+                    copyExpression(query);
+                  }}
+                  title="Copy SQL Expression"
+                  className="query-builder__sql__container__icon"
+                >
+                  <CopyIcon />
+                </button>
+              </div>
+            </PanelListItem>
+          </div>
+          <PanelListItem className="query-builder__sql__container__item">
+            <pre>{formatSQL(query)} </pre>
+          </PanelListItem>
+          <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 && (
+                    <td className="table__cell--left">
+                      {stringifyDataType(column.dataType)}
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <PanelDivider />
+
+      <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/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -433,26 +433,42 @@ const QueryBuilderProjectionColumnEditor = observer(
       if (option?.value !== aggregateColumnState?.calendarFunction) {
         const lambdaParameterName =
           aggregateColumnState?.calendarFunction?.lambdaParameterName;
+        const dateColumn = aggregateColumnState?.calendarFunction?.dateColumn;
+        const endDate = aggregateColumnState?.calendarFunction?.endDate;
+        const calendarType =
+          aggregateColumnState?.calendarFunction?.calendarType;
         aggregateColumnState?.setCalendarFunction(option?.value ?? undefined);
-        if (lambdaParameterName && aggregateColumnState.calendarFunction) {
-          aggregateColumnState.calendarFunction.setLambdaParameterName(
-            lambdaParameterName,
-          );
-        }
-        if (aggregateColumnState?.calendarFunction) {
-          if (calendarFunctionDateColumnOptions[0]) {
-            aggregateColumnState.calendarFunction.setDateColumn(
-              guaranteeNonNullable(calendarFunctionDateColumnOptions[0]).value,
-            );
+        const calendarFunction = aggregateColumnState?.calendarFunction;
+        if (calendarFunction) {
+          if (lambdaParameterName) {
+            calendarFunction.setLambdaParameterName(lambdaParameterName);
+          }
+          if (dateColumn) {
+            calendarFunction.setDateColumn(dateColumn);
           } else {
-            applicationStore.notificationService.notifyWarning(
-              'Please provide the date column field for the calendar function',
+            if (calendarFunctionDateColumnOptions[0]) {
+              calendarFunction.setDateColumn(
+                guaranteeNonNullable(calendarFunctionDateColumnOptions[0])
+                  .value,
+              );
+            } else {
+              applicationStore.notificationService.notifyWarning(
+                'Please provide a date attribute for the calendar function',
+              );
+            }
+          }
+          if (endDate) {
+            calendarFunction.setEndDate(endDate);
+          } else {
+            calendarFunction.setEndDate(defaultEndDate);
+          }
+          if (calendarType) {
+            calendarFunction.setCalendarType(calendarType);
+          } else {
+            calendarFunction.setCalendarType(
+              guaranteeNonNullable(calendarTypeOptions[0]).value,
             );
           }
-          aggregateColumnState.calendarFunction.setCalendarType(
-            guaranteeNonNullable(calendarTypeOptions[0]).value,
-          );
-          aggregateColumnState.calendarFunction.setEndDate(defaultEndDate);
         }
       }
     };

package/src/stores/QueryBuilderResultState.ts

@@ -86,6 +86,7 @@ export class QueryBuilderResultState {
       setQueryRunPromise: action,
       exportData: flow,
       runQuery: flow,
+      cancelQuery: flow,
       generatePlan: flow,
     });
 
@@ -163,7 +164,9 @@ export class QueryBuilderResultState {
       const contentType = exportData.contentType;
       const serializationFormat = exportData.serializationFormat;
       this.exportDataState.inProgress();
-      const query = this.buildExecutionRawLambda();
+      const query = this.buildExecutionRawLambda({
+        isExportingResult: true,
+      });
       const result =
         (yield this.queryBuilderState.graphManagerState.graphManager.runQuery(
           query,
@@ -205,6 +208,7 @@ export class QueryBuilderResultState {
   }
 
   *runQuery(): GeneratorFn<void> {
+    let promise;
     try {
       this.setIsRunningQuery(true);
       const currentHashCode = this.queryBuilderState.hashCode;
@@ -231,16 +235,15 @@ export class QueryBuilderResultState {
         this.queryBuilderState.graphManagerState.graph,
       );
 
-      const promise =
-        this.queryBuilderState.graphManagerState.graphManager.runQuery(
-          query,
-          mapping,
-          runtime,
-          this.queryBuilderState.graphManagerState.graph,
-          {
-            parameterValues,
-          },
-        );
+      promise = this.queryBuilderState.graphManagerState.graphManager.runQuery(
+        query,
+        mapping,
+        runtime,
+        this.queryBuilderState.graphManagerState.graph,
+        {
+          parameterValues,
+        },
+      );
 
       this.setQueryRunPromise(promise);
       const result = (yield promise) as ExecutionResult;
@@ -260,17 +263,39 @@ export class QueryBuilderResultState {
         );
       }
     } catch (error) {
-      assertErrorThrown(error);
+      // When user cancels the query by calling the cancelQuery api, it will throw an exeuction failure error.
+      // For now, we don't want to notify users about this failure. Therefore we check to ensure the promise is still the same one.
+      // When cancelled the query, we set the queryRunPromise as undefined.
+      if (this.queryRunPromise === promise) {
+        assertErrorThrown(error);
+        this.queryBuilderState.applicationStore.logService.error(
+          LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
+          error,
+        );
+        this.queryBuilderState.applicationStore.notificationService.notifyError(
+          error,
+        );
+      }
+    } finally {
+      this.setIsRunningQuery(false);
+      this.pressedRunQuery.complete();
+    }
+  }
+
+  *cancelQuery(): GeneratorFn<void> {
+    this.pressedRunQuery.complete();
+    this.setIsRunningQuery(false);
+    this.setQueryRunPromise(undefined);
+    try {
+      yield this.queryBuilderState.graphManagerState.graphManager.cancelUserExecutions(
+        true,
+      );
+    } catch (error) {
+      // Don't notify users about success or failure
       this.queryBuilderState.applicationStore.logService.error(
         LogEvent.create(GRAPH_MANAGER_EVENT.EXECUTION_FAILURE),
         error,
       );
-      this.queryBuilderState.applicationStore.notificationService.notifyError(
-        error,
-      );
-    } finally {
-      this.setIsRunningQuery(false);
-      this.pressedRunQuery.complete();
     }
   }
 

package/src/stores/QueryBuilderValueSpecificationBuilderHelper.ts

@@ -194,4 +194,9 @@ export type LambdaFunctionBuilderOption = {
    */
   useAllVersionsForMilestoning?: boolean | undefined;
   keepSourceInformation?: boolean | undefined;
+  /**
+   * Set this to `true` when we export query results since we do want to ignore an overriding
+   * limit for the query results if it exists so the exported results contain all the data
+   */
+  isExportingResult?: boolean | undefined;
 };

package/src/stores/QueryLoaderState.ts

@@ -205,6 +205,7 @@ export class QueryLoaderState {
       let searchSpecification = new QuerySearchSpecification();
       searchSpecification.searchTerm = searchText;
       searchSpecification.limit = QUERY_LOADER_TYPEAHEAD_SEARCH_LIMIT + 1;
+      searchSpecification.exactMatchName = true;
       searchSpecification.showCurrentUserQueriesOnly =
         this.showCurrentUserQueriesOnly;
       if (this.queryBuilderState) {
@@ -246,7 +247,7 @@ export class QueryLoaderState {
         name,
       )) as Query;
       this.onQueryRenamed?.(query);
-      this.applicationStore.notificationService.notify(
+      this.applicationStore.notificationService.notifySuccess(
         'Renamed query successfully',
       );
       this.renameQueryState.pass();

package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.ts

@@ -36,7 +36,6 @@ import {
   guaranteeType,
   isNonNullable,
   returnUndefOnError,
-  type PlainObject,
 } from '@finos/legend-shared';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../../../graph/QueryBuilderMetaModelConst.js';
 import type { QueryBuilderState } from '../../../QueryBuilderState.js';
@@ -218,9 +217,7 @@ export const processTDSProjectionDerivationExpression = (
       queryBuilderState.fetchStructureState.implementation;
     const rawLambdaProtocol = returnUndefOnError(() =>
       guaranteeType(
-        V1_deserializeRawValueSpecification(
-          value.content as PlainObject<V1_RawLambda>,
-        ),
+        V1_deserializeRawValueSpecification(value.content),
         V1_RawLambda,
       ),
     );

package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.ts

@@ -164,6 +164,7 @@ export const appendProjection = (
      */
     isBuildingExecutionQuery?: boolean | undefined;
     keepSourceInformation?: boolean | undefined;
+    isExportingResult?: boolean | undefined;
   },
 ): void => {
   const queryBuilderState = tdsState.queryBuilderState;
@@ -394,8 +395,9 @@ export const appendProjection = (
 
   // build result set modifiers
   appendResultSetModifier(tdsState.resultSetModifierState, lambdaFunction, {
-    overridingLimit: options?.isBuildingExecutionQuery
-      ? queryBuilderState.resultState.previewLimit
-      : undefined,
+    overridingLimit:
+      options?.isBuildingExecutionQuery && !options.isExportingResult
+        ? queryBuilderState.resultState.previewLimit
+        : undefined,
   });
 };