@finos/legend-extension-dsl-data-quality 2.1.33 → 2.1.35

package/src/components/DataQualityRelationGridResult.tsx

@@ -68,7 +68,7 @@ export const getRowDataFromExecutionResult = (
   return rowData;
 };
 
-const DataQualityResultCellRenderer = observer(
+export const DataQualityResultCellRenderer = observer(
   (params: IRelationValidationRendererParamsWithGridType) => {
     const cellValue = params.value as DataQualityRelationResultCellDataType;
 

package/src/components/DataQualityRelationLambdaGUIDataTypeHandlers.tsx

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 
-import { CustomSelectorInput, BaseMenuItem, Checkbox } from '@finos/legend-art';
-import { type ReactNode, type MouseEvent } from 'react';
 import { DataQualityCustomSelector } from './DataQualityCustomSelector.js';
 import type { ColumnOption } from './states/LambdaEditorWithGUIState.js';
-import type { ColSpecArray, ColSpecArrayInstance } from '@finos/legend-graph';
 
 type Option = { value: string; label: string };
 
@@ -37,15 +34,6 @@ interface FunctionSelectProps {
   options?: Option[];
 }
 
-interface RenderColumnsProps {
-  columns: ColSpecArrayInstance;
-  onChange: (value: string[]) => void;
-  options: ColumnOption[];
-  placeholder?: string;
-  darkMode: boolean;
-  disabled: boolean;
-}
-
 export const RenderColumn = (props: RenderColumnProps) => {
   const { column, onChange, options, ...rest } = props;
 
@@ -56,81 +44,11 @@ export const RenderColumn = (props: RenderColumnProps) => {
       placeholder="Select column"
       renderLabel={({ label }) => label}
       options={options}
-      onChange={onChange}
-    />
-  );
-};
-
-export const RenderColumns = (props: RenderColumnsProps) => {
-  const {
-    columns = [],
-    onChange,
-    options = [],
-    placeholder,
-    darkMode,
-    disabled,
-    ...rest
-  } = props;
-
-  const CustomOption = ({
-    children,
-    ...optionProps
-  }: {
-    children: ReactNode;
-    data: Option;
-    isSelected: boolean;
-    isFocused: boolean;
-    selectOption: (option: Option) => void;
-  }) => {
-    const { data, isSelected, selectOption } = optionProps;
-
-    const handleClick = (event: unknown) => {
-      (event as MouseEvent).preventDefault();
-      selectOption(data);
-    };
-
-    return (
-      <BaseMenuItem
-        onClick={handleClick}
-        className="data-quality-validation-gui-editor__column-list-item"
-        dense={true}
-      >
-        <Checkbox size="small" checked={isSelected} onClick={handleClick} />
-        <div>{children}</div>
-      </BaseMenuItem>
-    );
-  };
-
-  return (
-    <CustomSelectorInput
-      {...rest}
-      value={options.filter(({ value: v }) =>
-        (columns.values as ColSpecArray[])[0]?.colSpecs.find(
-          (col) => col.name === v,
-        ),
-      )}
-      placeholder={placeholder ?? 'Select columns'}
-      isMulti={true}
-      options={options}
-      hideSelectedOptions={false}
-      closeMenuOnSelect={false}
-      components={{
-        Option: CustomOption,
-        MultiValueContainer: ({ children }) => {
-          return (
-            <div className="data-quality-validation-gui-editor__column-list-item">
-              {children}
-            </div>
-          );
-        },
-        MultiValueLabel: ({ children }) => children,
-        MultiValueRemove: () => null,
+      onChange={(val) => {
+        if (val !== undefined) {
+          onChange(val);
+        }
       }}
-      onChange={(values: Option[]) =>
-        onChange(values.map((change) => change.value))
-      }
-      darkMode={darkMode}
-      disabled={disabled}
     />
   );
 };
@@ -144,7 +62,11 @@ export const FunctionSelectionHandler = (props: FunctionSelectProps) => {
       value={options.find((opt) => opt.value === value)}
       options={options}
       renderLabel={({ label }) => label}
-      onChange={(change) => onChange(change.value)}
+      onChange={(change) => {
+        if (change !== undefined) {
+          onChange(change.value);
+        }
+      }}
       placeholder="Select operation"
     />
   );

package/src/components/DataQualityRelationLambdaGUIValidationEditor.tsx

@@ -15,8 +15,9 @@
  */
 
 import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
 import type { DataQualityRelationValidationState } from './states/DataQualityRelationValidationState.js';
-import { RenderColumns } from './DataQualityRelationLambdaGUIDataTypeHandlers.js';
+import { DataQualityMultiCustomSelector } from './DataQualityCustomSelector.js';
 import {
   ColSpec,
   ColSpecArray,
@@ -48,6 +49,15 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
     }
 
     const { assertion, otherFunction } = dataQualityValidationLambdaFormState;
+    const selectedColumns = useMemo(
+      () =>
+        columnOptions.filter(({ value }) =>
+          assertion.parameters.columns.values[0]?.colSpecs.some(
+            (col) => col.name === value,
+          ),
+        ),
+      [assertion.parameters.columns.values, columnOptions],
+    );
 
     return (
       <div
@@ -82,11 +92,12 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
           <div className="data-quality-uml-element-editor__lambda__label data-quality-validation-gui-editor__function--assert-helper--description">
             Columns to persist
           </div>
-          <RenderColumns
-            columns={assertion.parameters.columns}
-            onChange={(values: string[]) => {
+          <DataQualityMultiCustomSelector
+            value={selectedColumns}
+            options={columnOptions}
+            onChange={(values) => {
               const colSpecArray = new ColSpecArray();
-              colSpecArray.colSpecs = values.map((value) => {
+              colSpecArray.colSpecs = values.map(({ value }) => {
                 const colSpecValue = new ColSpec();
                 colSpecValue.name = value;
                 return colSpecValue;
@@ -100,7 +111,6 @@ export const DataQualityRelationLambdaGUIValidationEditor = observer(
               assertion.parameters.columns = colSpecArrayInstance;
               validationState.debouncedHandleValidationFormChange();
             }}
-            options={columnOptions}
             placeholder="Select Columns"
             disabled={disabled}
             darkMode={darkMode}

package/src/components/DataQualityResultPanel.tsx

@@ -88,7 +88,7 @@ export const DataQualityResultPanel = observer(
         return;
       }
       const genericType = new GenericType(
-        guaranteeNonNullable(queryBuilderState.class),
+        guaranteeNonNullable(queryBuilderState.sourceClass),
       );
       const genericTypeReference =
         GenericTypeExplicitReference.create(genericType);

package/src/components/DataQualitySideBar.tsx

@@ -77,11 +77,11 @@ export const DataQualityClassSelector = observer(
       value: _class,
       label: generateClassLabel(_class, dataQualityState),
     }));
-    const selectedClassOption = dataQualityQueryBuilderState.class
+    const selectedClassOption = dataQualityQueryBuilderState.sourceClass
       ? {
-          value: dataQualityQueryBuilderState.class,
+          value: dataQualityQueryBuilderState.sourceClass,
           label: generateClassLabel(
-            dataQualityQueryBuilderState.class,
+            dataQualityQueryBuilderState.sourceClass,
             dataQualityState,
           ),
         }
@@ -90,10 +90,10 @@ export const DataQualityClassSelector = observer(
       label: React.ReactNode;
       value: Class;
     }): void => {
-      if (val.value === dataQualityQueryBuilderState.class) {
+      if (val.value === dataQualityQueryBuilderState.sourceElement) {
         return;
       }
-      dataQualityState.changeClass(val.value);
+      dataQualityState.changeSourceElement(val.value);
       dataQualityState.updateElementOnClassChange();
       onClassChange?.(val.value);
     };

package/src/components/states/DataQualityClassValidationState.ts

@@ -157,12 +157,12 @@ export class DataQualityClassValidationState extends DataQualityState {
     this.initializeFilterState(this.constraintsConfigurationElement.filter);
 
     if (this.constraintsConfigurationElement.dataQualityRootGraphFetchTree) {
-      this.dataQualityQueryBuilderState.setClass(
+      this.dataQualityQueryBuilderState.setSourceElement(
         this.constraintsConfigurationElement.dataQualityRootGraphFetchTree.class
           .value,
       );
     } else {
-      this.dataQualityQueryBuilderState.setClass(classOptions[0]);
+      this.dataQualityQueryBuilderState.setSourceElement(classOptions[0]);
       this.dataQualityGraphFetchTreeState = new DataQualityGraphFetchTreeState(
         this,
       );
@@ -182,7 +182,7 @@ export class DataQualityClassValidationState extends DataQualityState {
       undefined,
     );
     this.dataQualityQueryBuilderState.explorerState.setTreeData(undefined);
-    this.dataQualityQueryBuilderState.setClass(undefined);
+    this.dataQualityQueryBuilderState.setSourceElement(undefined);
     this.dataQualityGraphFetchTreeState = new DataQualityGraphFetchTreeState(
       this,
     );
@@ -258,12 +258,12 @@ export class DataQualityClassValidationState extends DataQualityState {
     // if there is no chosen class or the chosen one is not compatible
     // with the mapping then pick a compatible class if possible
     if (
-      !this.dataQualityQueryBuilderState.class ||
-      !compatibleClasses.includes(this.dataQualityQueryBuilderState.class)
+      !this.dataQualityQueryBuilderState.sourceClass ||
+      !compatibleClasses.includes(this.dataQualityQueryBuilderState.sourceClass)
     ) {
       const possibleNewClass = compatibleClasses[0];
       if (possibleNewClass) {
-        this.changeClass(possibleNewClass);
+        this.changeSourceElement(possibleNewClass);
       }
     }
   }

package/src/components/states/DataQualityGraphFetchTreeState.ts

@@ -48,7 +48,7 @@ export class DataQualityGraphFetchTreeState implements Hashable {
 
     this.dataQualityState = dataQualityState;
     this.updateTreeData(
-      this.dataQualityState.dataQualityQueryBuilderState.class,
+      this.dataQualityState.dataQualityQueryBuilderState.sourceClass,
     );
   }
   setGraphFetchTree(val: DataQualityGraphFetchTreeData | undefined): void {