@finos/legend-extension-dsl-data-quality 2.0.11 → 2.0.12

package/src/components/DataQualityRelationTrialRuns.tsx

@@ -26,11 +26,13 @@ import { prettyDuration } from '@finos/legend-shared';
 import React, { useRef, useState } from 'react';
 import { DATA_QUALITY_VALIDATION_TEST_ID } from './constants/DataQualityConstants.js';
 import {
+  type SelectOption,
   BlankPanelContent,
   CaretDownIcon,
   ControlledDropdownMenu,
   CubesLoadingIndicator,
   CubesLoadingIndicatorIcon,
+  CustomSelectorInput,
   DebugIcon,
   ExclamationTriangleIcon,
   MenuContent,
@@ -56,7 +58,9 @@ export const DataQualityRelationTrialRuns = observer(
     const executionResult = resultState.executionResult;
 
     const runQuery = (): void => {
-      resultState.handleRunValidation();
+      if (!resultState.isRunningValidation) {
+        resultState.handleRunValidation();
+      }
     };
 
     const cancelQuery = applicationStore.guardUnhandledError(() =>
@@ -128,6 +132,25 @@ export const DataQualityRelationTrialRuns = observer(
     const isLoading =
       resultState.isRunningValidation || resultState.isGeneratingPlan;
 
+    const selectedValidation = dataQualityRelationValidationConfigurationState
+      .resultState.validationToRun
+      ? {
+          label:
+            dataQualityRelationValidationConfigurationState.resultState
+              .validationToRun.name,
+          value:
+            dataQualityRelationValidationConfigurationState.resultState
+              .validationToRun,
+        }
+      : undefined;
+
+    const onValidationChange = (val: SelectOption | null): void => {
+      dataQualityRelationValidationConfigurationState.resetResultState();
+      dataQualityRelationValidationConfigurationState.resultState.setValidationToRun(
+        val?.value,
+      );
+    };
+
     return (
       <div
         data-testid={
@@ -138,11 +161,6 @@ export const DataQualityRelationTrialRuns = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">results</div>
-            {resultState.validationToRun && (
-              <div className="panel__header__title__label">
-                {resultState.validationToRun.name}
-              </div>
-            )}
             {resultState.isRunningValidation && (
               <div className="panel__header__title__label__status">
                 Running Validation...
@@ -168,6 +186,24 @@ export const DataQualityRelationTrialRuns = observer(
             )}
           </div>
           <div className="panel__header__actions data-quality-validation__result__header__actions">
+            <div className="data-quality-validation__result__validation">
+              <div className="data-quality-validation__result__validation__label">
+                Selected Validation
+              </div>
+              <CustomSelectorInput
+                className="data-quality-validation__result__validation__dropdown"
+                options={
+                  dataQualityRelationValidationConfigurationState.validationOptions
+                }
+                onChange={onValidationChange}
+                value={selectedValidation}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                placeholder={'Select validation to run'}
+              />
+            </div>
             <div className="data-quality-validation__result__limit">
               <div className="data-quality-validation__result__limit__label">
                 preview row limit
@@ -259,7 +295,12 @@ export const DataQualityRelationTrialRuns = observer(
           )}
           {executionResult && !isLoading && (
             <div className="data-quality-validation__result__values">
-              <DataQualityResultValues executionResult={executionResult} />
+              <DataQualityResultValues
+                executionResult={executionResult}
+                relationValidationConfigurationState={
+                  dataQualityRelationValidationConfigurationState
+                }
+              />
             </div>
           )}
         </PanelContent>

package/src/components/DataQualityRelationValidationConfigurationEditor.tsx

@@ -27,39 +27,45 @@ import {
 } from './states/DataQualityRelationValidationConfigurationState.js';
 import React, { useCallback, useEffect } from 'react';
 import {
+  BlankPanelContent,
+  CaretDownIcon,
   clsx,
+  ControlledDropdownMenu,
   DragPreviewLayer,
+  MenuContent,
+  MenuContentItem,
   Panel,
   PanelContent,
   PanelLoadingIndicator,
+  PauseCircleIcon,
+  PlayIcon,
   PlusIcon,
 } from '@finos/legend-art';
-import { prettyCONSTName } from '@finos/legend-shared';
-import { LambdaEditor } from '@finos/legend-query-builder';
+import { prettyCONSTName, returnUndefOnError } from '@finos/legend-shared';
+import {
+  ExecutionPlanViewer,
+  LambdaEditor,
+  LambdaParameterValuesEditor,
+} from '@finos/legend-query-builder';
 import {
   type RawVariableExpression,
   PrimitiveType,
-  stub_RawLambda,
   stub_RawVariableExpression,
   Type,
+  RawExecutionResult,
+  extractExecutionResultValues,
+  TDSExecutionResult,
 } from '@finos/legend-graph';
 import {
+  DEFAULT_TAB_SIZE,
   useApplicationNavigationContext,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
   dataQualityRelationValidation_addParameter,
-  dataQualityRelationValidation_addValidation,
   dataQualityRelationValidation_deleteParameter,
-  dataQualityRelationValidation_deleteValidation,
 } from '../graph-manager/DSL_DataQuality_GraphModifierHelper.js';
 import { flowResult } from 'mobx';
-import {
-  type RelationValidationDragSource,
-  DataQualityRelationValidationEditor,
-  RELATION_VALIDATION_DND_TYPE,
-} from './DataQualityRelationValidationEditor.js';
-import { DataQualityRelationValidation } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
 import { DataQualityRelationTrialRuns } from './DataQualityRelationTrialRuns.js';
 import {
   type FunctionParameterDragSource,
@@ -67,40 +73,25 @@ import {
   FUNCTION_PARAMETER_DND_TYPE,
 } from './DataQualityValidationParametersEditor.js';
 import { useDrop } from 'react-dnd';
+import { DataQualityRelationValidationsEditor } from './DataQualityRelationValidationsEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+import { DataQualityRelationGridResult } from './DataQualityRelationGridResult.js';
 
 const RelationDefinitionEditor = observer(
   (props: {
-    dataQualityRelationValidationState: DataQualityRelationValidationConfigurationState;
+    dataQualityRelationValidationConfigurationState: DataQualityRelationValidationConfigurationState;
   }) => {
-    const { dataQualityRelationValidationState } = props;
+    const { dataQualityRelationValidationConfigurationState } = props;
     const { relationFunctionDefinitionEditorState, resultState } =
-      dataQualityRelationValidationState;
+      dataQualityRelationValidationConfigurationState;
     const validationElement =
-      dataQualityRelationValidationState.validationElement;
+      dataQualityRelationValidationConfigurationState.validationElement;
+    const lambdaExecutionResult =
+      dataQualityRelationValidationConfigurationState.executionResult;
 
-    const isReadOnly = dataQualityRelationValidationState.isReadOnly;
-
-    const addRelationValidation = (): void => {
-      const relationValidation = new DataQualityRelationValidation(
-        '',
-        stub_RawLambda(),
-      );
-      dataQualityRelationValidation_addValidation(
-        validationElement,
-        relationValidation,
-      );
-      dataQualityRelationValidationState.addValidationState(relationValidation);
-    };
-
-    const deleteRelationValidation =
-      (validation: DataQualityRelationValidation): (() => void) =>
-      (): void => {
-        dataQualityRelationValidation_deleteValidation(
-          validationElement,
-          validation,
-        );
-        dataQualityRelationValidationState.deleteValidationState(validation);
-      };
+    const isReadOnly =
+      dataQualityRelationValidationConfigurationState.isReadOnly;
 
     const addParameter = (): void => {
       dataQualityRelationValidation_addParameter(
@@ -147,12 +138,55 @@ const RelationDefinitionEditor = observer(
       [handleDropParameter],
     );
 
+    const renderFuncResult = (): React.ReactNode => {
+      if (lambdaExecutionResult instanceof TDSExecutionResult) {
+        return (
+          <DataQualityRelationGridResult
+            executionResult={lambdaExecutionResult}
+            relationValidationConfigurationState={
+              dataQualityRelationValidationConfigurationState
+            }
+          />
+        );
+      }
+      if (lambdaExecutionResult instanceof RawExecutionResult) {
+        const val =
+          lambdaExecutionResult.value === null
+            ? 'null'
+            : lambdaExecutionResult.value.toString();
+        return (
+          <CodeEditor
+            language={CODE_EDITOR_LANGUAGE.TEXT}
+            inputValue={val}
+            isReadOnly={true}
+          />
+        );
+      } else if (lambdaExecutionResult !== undefined) {
+        const json =
+          returnUndefOnError(() =>
+            JSON.stringify(
+              extractExecutionResultValues(lambdaExecutionResult),
+              null,
+              DEFAULT_TAB_SIZE,
+            ),
+          ) ?? JSON.stringify(lambdaExecutionResult);
+        return (
+          <CodeEditor
+            language={CODE_EDITOR_LANGUAGE.JSON}
+            inputValue={json}
+            isReadOnly={true}
+          />
+        );
+      }
+      return <BlankPanelContent>Lambda Did Not Run</BlankPanelContent>;
+    };
+
     return (
       <>
         <PanelLoadingIndicator
           isLoading={
             resultState.isGeneratingPlan ||
-            dataQualityRelationValidationState.isRunningFunc
+            dataQualityRelationValidationConfigurationState.isRunningValidation
           }
         />
         <div className="relation-validation-config-editor__definition">
@@ -231,43 +265,16 @@ const RelationDefinitionEditor = observer(
               />
             </div>
           </div>
-          <div className="relation-validation-config-editor__definition__item">
+          <div className="relation-validation-config-editor__item">
             <div className="relation-validation-config-editor__definition__item__header">
               <div className="relation-validation-config-editor__definition__item__header__title">
-                VALIDATIONS
+                RESULT
               </div>
-              <button
-                className="relation-validation-config-editor__definition__item__header__add-btn btn--dark"
-                disabled={isReadOnly}
-                onClick={addRelationValidation}
-                tabIndex={-1}
-                title="Add Relation Validation"
-              >
-                <PlusIcon />
-              </button>
             </div>
-            <div className="relation-config-validations">
-              <DragPreviewLayer
-                labelGetter={(item: RelationValidationDragSource): string =>
-                  item.validation.name === ''
-                    ? '(unknown)'
-                    : item.validation.name
-                }
-                types={[RELATION_VALIDATION_DND_TYPE]}
-              />
-              {validationElement.validations.map((relationValidation) => (
-                <DataQualityRelationValidationEditor
-                  key={relationValidation._UUID}
-                  validation={relationValidation}
-                  relationValidationConfigurationState={
-                    dataQualityRelationValidationState
-                  }
-                  deleteValidation={deleteRelationValidation(
-                    relationValidation,
-                  )}
-                  isReadOnly={isReadOnly}
-                />
-              ))}
+            <div className="relation-validation-config-editor__definition__item__content">
+              <div className="relation-validation-config-editor__definition__result-viewer">
+                {renderFuncResult()}
+              </div>
             </div>
           </div>
         </div>
@@ -293,6 +300,34 @@ export const DataQualityRelationValidationConfigurationEditor = observer(() => {
     (): void =>
       dataQualityRelationValidationConfigurationState.setSelectedTab(tab);
 
+  const executionIsRunning =
+    dataQualityRelationValidationConfigurationState.isRunningValidation ||
+    dataQualityRelationValidationConfigurationState.isGeneratingPlan;
+
+  const cancelValidation = applicationStore.guardUnhandledError(() =>
+    flowResult(
+      dataQualityRelationValidationConfigurationState.cancelValidationRun(),
+    ),
+  );
+
+  const runValidation = applicationStore.guardUnhandledError(() =>
+    flowResult(
+      dataQualityRelationValidationConfigurationState.handleRunValidation(),
+    ),
+  );
+
+  const generatePlan = applicationStore.guardUnhandledError(() =>
+    flowResult(
+      dataQualityRelationValidationConfigurationState.generatePlan(false),
+    ),
+  );
+
+  const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
+    flowResult(
+      dataQualityRelationValidationConfigurationState.generatePlan(true),
+    ),
+  );
+
   useEffect(() => {
     flowResult(
       dataQualityRelationValidationConfigurationState.relationFunctionDefinitionEditorState.convertLambdaObjectToGrammarString(
@@ -339,12 +374,82 @@ export const DataQualityRelationValidationConfigurationEditor = observer(() => {
               ),
             )}
           </div>
+          <div className="panel__header__actions">
+            {selectedTab ===
+              DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB.DEFINITION && (
+              <>
+                <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                  {dataQualityRelationValidationConfigurationState.isRunningValidation ? (
+                    <button
+                      className="btn__dropdown-combo__canceler"
+                      onClick={cancelValidation}
+                      tabIndex={-1}
+                    >
+                      <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                        <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                        <div className="btn__dropdown-combo__canceler__label__title">
+                          Stop
+                        </div>
+                      </div>
+                    </button>
+                  ) : (
+                    <>
+                      <button
+                        className="btn__dropdown-combo__label"
+                        onClick={runValidation}
+                        title="Run Function"
+                        disabled={executionIsRunning}
+                        tabIndex={-1}
+                      >
+                        <PlayIcon className="btn__dropdown-combo__label__icon" />
+                        <div className="btn__dropdown-combo__label__title">
+                          Run
+                        </div>
+                      </button>
+                      <ControlledDropdownMenu
+                        className="btn__dropdown-combo__dropdown-btn"
+                        disabled={executionIsRunning}
+                        content={
+                          <MenuContent>
+                            <MenuContentItem
+                              className="btn__dropdown-combo__option"
+                              onClick={generatePlan}
+                            >
+                              Generate Plan
+                            </MenuContentItem>
+                            <MenuContentItem
+                              className="btn__dropdown-combo__option"
+                              onClick={debugPlanGeneration}
+                            >
+                              Debug
+                            </MenuContentItem>
+                          </MenuContent>
+                        }
+                        menuProps={{
+                          anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          },
+                          transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                          },
+                        }}
+                      >
+                        <CaretDownIcon />
+                      </ControlledDropdownMenu>
+                    </>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
         </div>
         <PanelContent>
           {selectedTab ===
             DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB.DEFINITION && (
             <RelationDefinitionEditor
-              dataQualityRelationValidationState={
+              dataQualityRelationValidationConfigurationState={
                 dataQualityRelationValidationConfigurationState
               }
             />
@@ -357,8 +462,37 @@ export const DataQualityRelationValidationConfigurationEditor = observer(() => {
               }
             />
           )}
+          {selectedTab ===
+            DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB.VALIDATIONS && (
+            <DataQualityRelationValidationsEditor
+              dataQualityRelationValidationConfigurationState={
+                dataQualityRelationValidationConfigurationState
+              }
+            />
+          )}
         </PanelContent>
       </Panel>
+      <ExecutionPlanViewer
+        executionPlanState={
+          dataQualityRelationValidationConfigurationState.executionPlanState
+        }
+      />
+      {dataQualityRelationValidationConfigurationState.parametersState
+        .parameterValuesEditorState.showModal && (
+        <LambdaParameterValuesEditor
+          graph={
+            dataQualityRelationValidationConfigurationState.editorStore
+              .graphManagerState.graph
+          }
+          observerContext={
+            dataQualityRelationValidationConfigurationState.editorStore
+              .changeDetectionState.observerContext
+          }
+          lambdaParametersState={
+            dataQualityRelationValidationConfigurationState.parametersState
+          }
+        />
+      )}
     </div>
   );
 });

package/src/components/DataQualityRelationValidationEditor.tsx

@@ -28,7 +28,6 @@ import {
   useDragPreviewLayer,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '@finos/legend-application-studio';
 import { PrimitiveType } from '@finos/legend-graph';
 import {
   ApplicationNavigationContextData,
@@ -47,6 +46,7 @@ import {
 } from '../graph-manager/DSL_DataQuality_GraphModifierHelper.js';
 import { DataQualityValidationDetailPanel } from './DataQualityValidationDetailPanel.js';
 import { useDrag, useDrop } from 'react-dnd';
+import { DSL_DATA_QUALITY_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../__lib__/studio/DSL_DataQuality_LegendStudioApplicationNavigationContext.js';
 
 export type RelationValidationDragSource = {
   validation: DataQualityRelationValidation;
@@ -72,7 +72,9 @@ export const DataQualityRelationValidationEditor = observer(
     const applicationStore = useApplicationStore();
     const hasParserError =
       relationValidationConfigurationState.validationStates.some(
-        (state) => state.parserError,
+        (state) =>
+          Boolean(state.parserError) ||
+          Boolean(state.rowMapFunctionLambdaEditorState?.parserError),
       );
     const validationState =
       relationValidationConfigurationState.getValidationState(validation);
@@ -137,12 +139,15 @@ export const DataQualityRelationValidationEditor = observer(
     useDragPreviewLayer(dragPreviewConnector);
 
     // Actions
-    const onLambdaEditorFocus = (): void =>
+    const onLambdaEditorFocus = (isAssertion: boolean): void =>
       applicationStore.navigationContextService.push(
         ApplicationNavigationContextData.createTransient(
-          LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.CLASS_CONTRAINT_LAMBDA_EDITOR,
+          isAssertion
+            ? DSL_DATA_QUALITY_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.VALIDATION_ASSERTION_EDITOR
+            : DSL_DATA_QUALITY_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.VALIDATION_ROW_MAP_EDITOR,
         ),
       );
+
     const remove = applicationStore.guardUnhandledError(async () => {
       await flowResult(
         validationState.convertLambdaObjectToGrammarString({ pretty: false }),
@@ -154,10 +159,15 @@ export const DataQualityRelationValidationEditor = observer(
       relationValidationConfigurationState.setSelectedTab(
         DATA_QUALITY_RELATION_VALIDATION_EDITOR_TAB.TRIAL_RUN,
       );
-      relationValidationConfigurationState.resultState.setValidationToRun(
-        validation,
-      );
-      relationValidationConfigurationState.resultState.handleRunValidation();
+      if (
+        !relationValidationConfigurationState.resultState.isRunningValidation
+      ) {
+        relationValidationConfigurationState.resetResultState();
+        relationValidationConfigurationState.resultState.setValidationToRun(
+          validation,
+        );
+        relationValidationConfigurationState.resultState.handleRunValidation();
+      }
     };
 
     const onValidationTypeChange = (val: SelectOption): void => {
@@ -182,7 +192,11 @@ export const DataQualityRelationValidationEditor = observer(
       >
         <div
           className={clsx('relation-validation', {
-            backdrop__element: validationState.parserError,
+            backdrop__element:
+              Boolean(validationState.parserError) ||
+              Boolean(
+                validationState.rowMapFunctionLambdaEditorState?.parserError,
+              ),
           })}
         >
           <div className="relation-validation__content">
@@ -225,6 +239,7 @@ export const DataQualityRelationValidationEditor = observer(
               onClick={runQuery}
               tabIndex={-1}
               title="Run Validation"
+              disabled={hasParserError}
             >
               <RocketIcon />
             </button>
@@ -238,36 +253,47 @@ export const DataQualityRelationValidationEditor = observer(
             </button>
           </div>
           {validationState.rowMapFunctionLambdaEditorState && (
-            <div className="uml-element-editor__row-map">
-              <div className="uml-element-editor__row-map__label">
+            <div className="data-quality-uml-element-editor__lambda">
+              <div className="data-quality-uml-element-editor__lambda__label">
                 Row Map Function
               </div>
+              <div className="data-quality-uml-element-editor__lambda__value">
+                <InlineLambdaEditor
+                  disabled={
+                    relationValidationConfigurationState.isConvertingValidationLambdaObjects ||
+                    isReadOnly
+                  }
+                  lambdaEditorState={
+                    validationState.rowMapFunctionLambdaEditorState
+                  }
+                  forceBackdrop={hasParserError}
+                  expectedType={PrimitiveType.BOOLEAN}
+                  onEditorFocus={() => onLambdaEditorFocus(false)}
+                  disablePopUp={true}
+                  className="relation-validation__lambda"
+                />
+              </div>
+            </div>
+          )}
+          <div className="data-quality-uml-element-editor__lambda">
+            <div className="data-quality-uml-element-editor__lambda__label">
+              Assertion
+            </div>
+            <div className="data-quality-uml-element-editor__lambda__value">
               <InlineLambdaEditor
                 disabled={
                   relationValidationConfigurationState.isConvertingValidationLambdaObjects ||
                   isReadOnly
                 }
-                lambdaEditorState={
-                  validationState.rowMapFunctionLambdaEditorState
-                }
+                lambdaEditorState={validationState}
                 forceBackdrop={hasParserError}
                 expectedType={PrimitiveType.BOOLEAN}
-                onEditorFocus={onLambdaEditorFocus}
+                onEditorFocus={() => onLambdaEditorFocus(true)}
                 disablePopUp={true}
+                className="relation-validation__lambda"
               />
             </div>
-          )}
-          <InlineLambdaEditor
-            disabled={
-              relationValidationConfigurationState.isConvertingValidationLambdaObjects ||
-              isReadOnly
-            }
-            lambdaEditorState={validationState}
-            forceBackdrop={hasParserError}
-            expectedType={PrimitiveType.BOOLEAN}
-            onEditorFocus={onLambdaEditorFocus}
-            disablePopUp={true}
-          />
+          </div>
         </div>
         {validationState.isValidationDialogOpen && (
           <DataQualityValidationDetailPanel