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

package/src/components/DSL_DataQuality_LegendStudioApplicationPlugin.tsx

@@ -38,8 +38,11 @@ import {
   DataQualityServiceValidationConfiguration,
   DataQualityRelationValidationConfiguration,
   DataQualityValidationConfiguration,
+  DataQualityRelationComparisonConfiguration,
+  DataQualityRelationQueryLambda,
+  MD5HashStrategy,
 } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
-import { EyeIcon } from '@finos/legend-art';
+import { CompareIcon, EyeIcon } from '@finos/legend-art';
 import { DataQualityClassValidationEditor } from './DataQualityClassValidationEditor.js';
 import { DataQuality_ElementDriver } from './DSL_DataQuality_ElementDriver.js';
 import { DataQualityServiceValidationEditor } from './DataQualityServiceValidationEditor.js';
@@ -49,9 +52,16 @@ import { DataQualityServiceValidationState } from './states/DataQualityServiceVa
 import { DataQualityRelationValidationConfigurationState } from './states/DataQualityRelationValidationConfigurationState.js';
 import { DataQualityRelationValidationConfigurationEditor } from './DataQualityRelationValidationConfigurationEditor.js';
 import { DSL_DATA_QUALITY_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../__lib__/studio/DSL_DataQuality_LegendStudioApplicationNavigationContext.js';
+import { DataQualityRelationComparisonConfigurationState } from './states/DataQualityRelationComparisonConfigurationState.js';
+import { DataQualityRelationComparisonEditor } from './DataQualityRelationComparisonEditor.js';
 
-const DATA_QUALITY_ELEMENT_TYPE = 'DATAQUALITYVALIDATION';
-const DATA_QUALITY_ELEMENT_TYPE_LABEL = 'Data Quality Validation';
+const DATA_QUALITY_VALIDATION_ELEMENT_TYPE = 'DATAQUALITYVALIDATION';
+const DATA_QUALITY_VALIDATION_ELEMENT_TYPE_LABEL = 'Data Quality Validation';
+
+const DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE =
+  'DATAQUALITYRELATIONCOMPARISON';
+const DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE_LABEL =
+  'Data Quality Relation Comparison';
 
 export class DSL_DataQuality_LegendStudioApplicationPlugin
   extends LegendStudioApplicationPlugin
@@ -62,13 +72,17 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   }
 
   getExtraSupportedElementTypes(): string[] {
-    return [DATA_QUALITY_ELEMENT_TYPE];
+    return [
+      DATA_QUALITY_VALIDATION_ELEMENT_TYPE,
+      DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE,
+    ];
   }
 
   getExtraSupportedElementTypesWithCategory(): Map<string, string[]> {
     const elementTypeswithCategory = new Map<string, string[]>();
     elementTypeswithCategory.set(PACKAGEABLE_ELEMENT_GROUP_BY_CATEGORY.OTHER, [
-      DATA_QUALITY_ELEMENT_TYPE,
+      DATA_QUALITY_VALIDATION_ELEMENT_TYPE,
+      DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE,
     ]);
     return elementTypeswithCategory;
   }
@@ -77,7 +91,10 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
     return [
       (element: PackageableElement): string | undefined => {
         if (element instanceof DataQualityValidationConfiguration) {
-          return DATA_QUALITY_ELEMENT_TYPE;
+          return DATA_QUALITY_VALIDATION_ELEMENT_TYPE;
+        }
+        if (element instanceof DataQualityRelationComparisonConfiguration) {
+          return DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE;
         }
         return undefined;
       },
@@ -87,12 +104,18 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   getExtraElementIconGetters(): ElementIconGetter[] {
     return [
       (type: string): React.ReactNode | undefined => {
-        if (type === DATA_QUALITY_ELEMENT_TYPE) {
+        if (type === DATA_QUALITY_VALIDATION_ELEMENT_TYPE) {
           return (
             <div className="icon icon--dataQuality">
               <EyeIcon />
             </div>
           );
+        } else if (type === DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE) {
+          return (
+            <div className="icon icon--dataQuality">
+              <CompareIcon />
+            </div>
+          );
         }
         return undefined;
       },
@@ -102,8 +125,11 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   getExtraElementTypeLabelGetters(): ElementTypeLabelGetter[] {
     return [
       (type: string): string | undefined => {
-        if (type === DATA_QUALITY_ELEMENT_TYPE) {
-          return DATA_QUALITY_ELEMENT_TYPE_LABEL;
+        if (type === DATA_QUALITY_VALIDATION_ELEMENT_TYPE) {
+          return DATA_QUALITY_VALIDATION_ELEMENT_TYPE_LABEL;
+        }
+        if (type === DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE) {
+          return DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE_LABEL;
         }
         return undefined;
       },
@@ -117,11 +143,21 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
         name: string,
         state: NewElementState,
       ): PackageableElement | undefined => {
-        if (type === DATA_QUALITY_ELEMENT_TYPE) {
+        if (type === DATA_QUALITY_VALIDATION_ELEMENT_TYPE) {
           return state
             .getNewElementDriver(DataQuality_ElementDriver)
             .createElement(name);
         }
+        if (type === DATA_QUALITY_RELATION_COMPARISON_ELEMENT_TYPE) {
+          const comparison = new DataQualityRelationComparisonConfiguration(
+            name,
+          );
+          comparison.source = new DataQualityRelationQueryLambda();
+          comparison.target = new DataQualityRelationQueryLambda();
+          // default currently
+          comparison.strategy = new MD5HashStrategy();
+          return comparison;
+        }
         return undefined;
       },
     ];
@@ -150,6 +186,16 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
             />
           );
         }
+        if (
+          elementEditorState instanceof
+          DataQualityRelationComparisonConfigurationState
+        ) {
+          return (
+            <DataQualityRelationComparisonEditor
+              key={elementEditorState.uuid}
+            />
+          );
+        }
         return undefined;
       },
     ];
@@ -173,6 +219,12 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
             element,
           );
         }
+        if (element instanceof DataQualityRelationComparisonConfiguration) {
+          return new DataQualityRelationComparisonConfigurationState(
+            editorStore,
+            element,
+          );
+        }
         return undefined;
       },
     ];
@@ -181,7 +233,7 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
   getExtraNewElementDriverEditorRenderers(): NewElementDriverEditorRenderer[] {
     return [
       (type: string): React.ReactNode | undefined => {
-        if (type === DATA_QUALITY_ELEMENT_TYPE) {
+        if (type === DATA_QUALITY_VALIDATION_ELEMENT_TYPE) {
           return <NewDataQualityValidationElementEditor />;
         }
         return undefined;
@@ -195,7 +247,7 @@ export class DSL_DataQuality_LegendStudioApplicationPlugin
         editorStore: EditorStore,
         type: string,
       ): NewElementDriver<PackageableElement> | undefined => {
-        if (type === DATA_QUALITY_ELEMENT_TYPE) {
+        if (type === DATA_QUALITY_VALIDATION_ELEMENT_TYPE) {
           return new DataQuality_ElementDriver(editorStore);
         }
         return undefined;

package/src/components/DataQualityCustomSelector.tsx

@@ -15,24 +15,29 @@
  */
 
 import {
+  BaseMenuItem,
   CaretDownIcon,
+  Checkbox,
   ControlledDropdownMenu,
+  CustomSelectorInput,
   MenuContent,
   MenuContentItem,
+  TimesIcon,
 } from '@finos/legend-art';
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 export type Option<T = string> = { value: T; label: string };
 
 export interface DataQualityCustomSelectorProps<T> {
   value?: T | undefined;
   options: T[];
-  onChange: (value: T) => void;
+  onChange: (value: T | undefined) => void;
   disabled?: boolean;
   placeholder?: string;
   className?: string;
   title?: string;
   renderLabel?: (option: T) => ReactNode;
+  clearable?: boolean;
 }
 
 export const DataQualityCustomSelector = <
@@ -48,9 +53,14 @@ export const DataQualityCustomSelector = <
     placeholder = 'Choose option...',
     className,
     title = 'Choose option...',
+    renderLabel,
+    clearable = false,
   } = props;
 
   const selectedOption = options.find((opt) => opt.value === value?.value);
+  const selectedLabel = selectedOption
+    ? (renderLabel?.(selectedOption) ?? selectedOption.label)
+    : placeholder;
 
   return (
     <ControlledDropdownMenu
@@ -65,7 +75,7 @@ export const DataQualityCustomSelector = <
               className="data-quality-custom-selector__dropdown__option"
               onClick={() => onChange(opt)}
             >
-              {opt.label}
+              {renderLabel?.(opt) ?? opt.label}
             </MenuContentItem>
           ))}
         </MenuContent>
@@ -76,12 +86,107 @@ export const DataQualityCustomSelector = <
         elevation: 7,
       }}
     >
-      <div className="data-quality-custom-selector__label">
-        {selectedOption?.label ?? placeholder}
-      </div>
+      <div className="data-quality-custom-selector__label">{selectedLabel}</div>
+      {clearable && selectedOption && (
+        <button
+          className="data-quality-custom-selector__clear"
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation();
+            onChange(undefined);
+          }}
+        >
+          <TimesIcon />
+        </button>
+      )}
       <div className="data-quality-custom-selector__dropdown__trigger">
         <CaretDownIcon />
       </div>
     </ControlledDropdownMenu>
   );
 };
+
+export interface DataQualityMultiCustomSelectorProps<T> {
+  value?: T[] | undefined;
+  options: T[];
+  onChange: (value: T[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  darkMode: boolean;
+  renderLabel?: (option: T) => ReactNode;
+}
+
+export const DataQualityMultiCustomSelector = <
+  T extends { value: string; label: string },
+>(
+  props: DataQualityMultiCustomSelectorProps<T>,
+): React.ReactElement => {
+  const {
+    value = [],
+    onChange,
+    options = [],
+    placeholder = 'Select options',
+    darkMode,
+    disabled,
+    renderLabel,
+  } = props;
+
+  const CustomOption = ({
+    children,
+    ...optionProps
+  }: {
+    children: ReactNode;
+    data: T;
+    isSelected: boolean;
+    isFocused: boolean;
+    selectOption: (option: T) => void;
+  }) => {
+    const { data, isSelected, selectOption } = optionProps;
+
+    const handleClick = (event: MouseEvent) => {
+      event.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<T, true>
+      value={value}
+      placeholder={placeholder}
+      isMulti={true}
+      options={options}
+      hideSelectedOptions={false}
+      closeMenuOnSelect={false}
+      formatOptionLabel={(option: T) => renderLabel?.(option) ?? option.label}
+      components={{
+        Option: CustomOption,
+        MultiValueContainer: ({ children }: { children: ReactNode }) => {
+          return (
+            <div className="data-quality-validation-gui-editor__column-list-item">
+              {children}
+            </div>
+          );
+        },
+        MultiValueLabel: ({ data }: { data: T }) =>
+          renderLabel?.(data) ?? data.label,
+        MultiValueRemove: () => null,
+      }}
+      onChange={(newValue: readonly T[] | null) =>
+        onChange(newValue ? [...newValue] : [])
+      }
+      darkMode={darkMode}
+      disabled={disabled}
+    />
+  );
+};