@finos/legend-extension-dsl-data-quality 1.0.0

package/src/components/DSL_NewDataQualityClassValidationElement.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 { useEditorStore } from '@finos/legend-application-studio';
+import { BaseRadioGroup, CustomSelectorInput } from '@finos/legend-art';
+import type { Mapping } from '@finos/legend-graph';
+import {
+  type PackageableElementOption,
+  buildElementOption,
+} from '@finos/legend-lego/graph-editor';
+import {
+  type RuntimeOption,
+  DataQuality_ClassElementDriver,
+  ELEMENT_CREATION_BASIS,
+} from './DSL_DataQuality_ClassElementDriver.js';
+import type { DataSpace } from '@finos/legend-extension-dsl-data-space/graph';
+
+export const NewDataQualityClassValidationElementEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
+
+  const dataQualityDataSpaceDriver =
+    editorStore.newElementState.getNewElementDriver(
+      DataQuality_ClassElementDriver,
+    );
+  const dqElementCreationBasis =
+    dataQualityDataSpaceDriver.dqElementCreationBasis;
+  const dataSpacesOptions = dataQualityDataSpaceDriver.dataSpaceOptions;
+  const mappingOptions = dataQualityDataSpaceDriver.mappingOptions;
+  const runtimeOptions =
+    dataQualityDataSpaceDriver.compatibleMappingRuntimes.map(
+      buildElementOption,
+    );
+
+  const onDataSpaceChange = (
+    val: PackageableElementOption<DataSpace> | null,
+  ): void => {
+    if (val) {
+      dataQualityDataSpaceDriver.setDataSpaceSelected(val);
+    }
+  };
+
+  const onMappingChange = (
+    val: PackageableElementOption<Mapping> | null,
+  ): void => {
+    if (val) {
+      dataQualityDataSpaceDriver.setMappingSelected(val);
+    } else {
+      dataQualityDataSpaceDriver.setMappingSelected(undefined);
+    }
+    dataQualityDataSpaceDriver.setRuntimeSelected(
+      dataQualityDataSpaceDriver.runtimeOptions.length > 0
+        ? dataQualityDataSpaceDriver.runtimeOptions[0]
+        : undefined,
+    );
+  };
+
+  const onRuntimeChange = (val: RuntimeOption | null): void => {
+    if (val) {
+      dataQualityDataSpaceDriver.setRuntimeSelected(val);
+    }
+  };
+
+  const handleDQElementCreationBasisChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    const validationElementCreationBasis = (event.target as HTMLInputElement)
+      .value as ELEMENT_CREATION_BASIS;
+    dataQualityDataSpaceDriver.setDqElementCreationBasis(
+      validationElementCreationBasis,
+    );
+  };
+
+  return (
+    <div>
+      <div className="element-creation-basis">
+        <BaseRadioGroup
+          value={dqElementCreationBasis}
+          onChange={handleDQElementCreationBasisChange}
+          row={false}
+          options={[
+            ELEMENT_CREATION_BASIS.DATASPACE_BASED,
+            ELEMENT_CREATION_BASIS.MAPPING_RUNTIME_BASED,
+          ]}
+          size={2}
+        />
+      </div>
+      {dqElementCreationBasis === ELEMENT_CREATION_BASIS.DATASPACE_BASED ? (
+        <div>
+          <div className="panel__content__form__section__header__label">
+            DataSpace
+          </div>
+          <div className="data-quality-explorer__new-element-modal__driver">
+            <CustomSelectorInput
+              className="data-quality-explorer__new-element-modal__driver__dropdown"
+              options={dataSpacesOptions}
+              onChange={onDataSpaceChange}
+              value={dataQualityDataSpaceDriver.dataSpaceSelected}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+            />
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div className="panel__content__form__section__header__label">
+            Mapping
+          </div>
+          <div className="data-quality-explorer__new-element-modal__driver">
+            <CustomSelectorInput
+              className="data-quality-explorer__new-element-modal__driver__dropdown"
+              options={mappingOptions}
+              onChange={onMappingChange}
+              value={dataQualityDataSpaceDriver.mappingSelected}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+            />
+          </div>
+          <div className="panel__content__form__section__header__label">
+            Runtime
+          </div>
+          <div className="data-quality-explorer__new-element-modal__driver">
+            <CustomSelectorInput
+              className="data-quality-explorer__new-element-modal__driver__dropdown"
+              options={runtimeOptions}
+              onChange={onRuntimeChange}
+              value={dataQualityDataSpaceDriver.runtimeSelected}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/DSL_NewDataQualityServiceValidationElement.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 { useEditorStore } from '@finos/legend-application-studio';
+import { CustomSelectorInput } from '@finos/legend-art';
+import { DataQuality_ServiceElementDriver } from './DSL_DataQuality_ServiceElementDriver.js';
+import {
+  type PackageableElementOption,
+  buildElementOption,
+} from '@finos/legend-lego/graph-editor';
+import type { Service } from '@finos/legend-graph';
+
+export const NewDataQualityServiceValidationElementEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
+  const dataQualityServiceElementDriver =
+    editorStore.newElementState.getNewElementDriver(
+      DataQuality_ServiceElementDriver,
+    );
+
+  const serviceOptions =
+    editorStore.graphManagerState.usableServices.map(buildElementOption);
+
+  const selectedServiceOption = dataQualityServiceElementDriver.serviceSelected
+    ? {
+        label: dataQualityServiceElementDriver.serviceSelected.value.name,
+        value: dataQualityServiceElementDriver.serviceSelected,
+      }
+    : undefined;
+
+  const onServiceOptionChange = (
+    val: PackageableElementOption<Service> | undefined,
+  ): void => {
+    if (val) {
+      dataQualityServiceElementDriver.setServiceSelected(val);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <div className="panel__content__form__section__header__label">
+          Service
+        </div>
+        <div className="data-quality-explorer__new-element-modal__driver">
+          <CustomSelectorInput
+            className="data-quality-explorer__new-element-modal__driver__dropdown"
+            options={serviceOptions}
+            onChange={onServiceOptionChange}
+            value={selectedServiceOption}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+});

package/src/components/DataQualityClassValidationEditor.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { useEditorStore } from '@finos/legend-application-studio';
+import { DataQualityClassValidationState } from './states/DataQualityClassValidationState.js';
+import { DataQualityClassValidationSideBar } from './DataQualitySideBar.js';
+import { DataQualityValidationEditor } from './DataQualityValidationEditor.js';
+import { DataQualityExplorerPanel } from './DataQualityExplorerPanel.js';
+import { ResizablePanel, ResizablePanelGroup } from '@finos/legend-art';
+
+export const DataQualityClassValidationEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const dataQualityClassValidationState =
+    editorStore.tabManagerState.getCurrentEditorState(
+      DataQualityClassValidationState,
+    );
+  return (
+    <DataQualityValidationEditor
+      dataQualityState={dataQualityClassValidationState}
+      SideBarBasisComponent={
+        <DataQualityClassValidationSideBar
+          dataQualityClassValidationState={dataQualityClassValidationState}
+        >
+          <ResizablePanelGroup orientation="horizontal">
+            <ResizablePanel minSize={40} direction={1}>
+              <DataQualityExplorerPanel
+                dataQualityState={dataQualityClassValidationState}
+              />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </DataQualityClassValidationSideBar>
+      }
+    />
+  );
+});

package/src/components/DataQualityConstraintsSelection.tsx

@@ -0,0 +1,376 @@
+/**
+ * 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 { DataQualityState } from './states/DataQualityState.js';
+import { useDrop } from 'react-dnd';
+import { useCallback } from 'react';
+import { getClassPropertyIcon } from '@finos/legend-lego/graph-editor';
+import {
+  type DataQualityGraphFetchTreeData,
+  DataQualityGraphFetchTreeNodeData,
+  isConstraintsClassesTreeEmpty,
+  removeNodeRecursively,
+} from './utils/DataQualityGraphFetchTreeUtil.js';
+import type { ConstraintState } from './states/ConstraintState.js';
+import {
+  type TreeNodeContainerProps,
+  BlankPanelPlaceholder,
+  CheckSquareIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  clsx,
+  PanelDropZone,
+  PURE_UnknownElementTypeIcon,
+  SquareIcon,
+  TimesIcon,
+  TreeView,
+} from '@finos/legend-art';
+import { dataQualityClassValidation_setDataQualityGraphFetchTree } from '../graph-manager/DSL_DataQuality_GraphModifierHelper.js';
+import type { DataQualityClassValidationsConfiguration } from '../graph/metamodel/pure/packageableElements/data-quality/DataQualityValidationConfiguration.js';
+import {
+  type Type,
+  Class,
+  Enumeration,
+  PropertyGraphFetchTree,
+  RootGraphFetchTree,
+} from '@finos/legend-graph';
+import { DATA_QUALITY_VALIDATION_TEST_ID } from './constants/DataQualityConstants.js';
+import { flowResult } from 'mobx';
+import { DataQualityStructuralValidationsPanel } from './DataQualityStructuralValidationsPanel.js';
+import {
+  type QueryBuilderExplorerTreeDragSource,
+  QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
+} from '@finos/legend-query-builder';
+
+export const getQueryBuilderExplorerTreeNodeSortRank = (
+  node: DataQualityGraphFetchTreeNodeData,
+): number => {
+  if (node.type instanceof Class) {
+    return 1;
+  } else if (node.type instanceof Enumeration) {
+    return 2;
+  } else {
+    return 3;
+  }
+};
+
+export const DataQualityConstraintsTreeNodeContainer = observer(
+  (
+    props: TreeNodeContainerProps<
+      DataQualityGraphFetchTreeNodeData,
+      {
+        dataQualityState: DataQualityState;
+        isReadOnly: boolean;
+        removeNode?: (node: DataQualityGraphFetchTreeNodeData) => void;
+      }
+    >,
+  ) => {
+    const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+    const { dataQualityState, isReadOnly, removeNode } = innerProps;
+    const { dataQualityGraphFetchTreeState } = dataQualityState;
+    let property, type: Type | undefined;
+    if (node.tree instanceof PropertyGraphFetchTree) {
+      property = node.tree.property.value;
+      type = property.genericType.value.rawType;
+    } else if (node.tree instanceof RootGraphFetchTree) {
+      type = node.tree.class.value;
+    }
+
+    const isExpandable = Boolean(node.childrenIds.length);
+    const nodeExpandIcon = isExpandable ? (
+      node.isOpen ? (
+        <ChevronDownIcon />
+      ) : (
+        <ChevronRightIcon />
+      )
+    ) : (
+      <div />
+    );
+    const nodeTypeIcon = type ? (
+      getClassPropertyIcon(type)
+    ) : (
+      <PURE_UnknownElementTypeIcon />
+    );
+    const toggleExpandNode = (): void => onNodeSelect?.(node);
+    const deleteNode = (): void => removeNode?.(node);
+    const toggleChecked = (constraint: ConstraintState): void => {
+      dataQualityGraphFetchTreeState.updateNode(
+        node,
+        constraint.constraint,
+        !constraint.isSelected,
+      );
+      constraint.setIsSelected(!constraint.isSelected);
+    };
+
+    return (
+      <div className="constraints-selection-node">
+        <div
+          className="tree-view__node__container data-quality-validation-graph-fetch-tree__node__container"
+          style={{
+            paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2)}rem`,
+            display: 'flex',
+          }}
+        >
+          <div className="data-quality-validation-graph-fetch-tree__node__content">
+            <div className="tree-view__node__icon data-quality-validation-graph-fetch-tree__node__icon">
+              <div
+                className="data-quality-validation-graph-fetch-tree__expand-icon"
+                onClick={toggleExpandNode}
+              >
+                {nodeExpandIcon}
+              </div>
+              <div
+                className="data-quality-validation-graph-fetch-tree__type-icon"
+                onClick={toggleExpandNode}
+              >
+                {nodeTypeIcon}
+              </div>
+            </div>
+            <div
+              className="tree-view__node__label data-quality-validation-graph-fetch-tree__node__label"
+              onClick={toggleExpandNode}
+            >
+              {node.label}
+              {
+                <div className="data-quality-validation-graph-fetch-tree__node__type">
+                  <div className="data-quality-validation-graph-fetch-tree__node__type__label">
+                    {type ? type.name : ''}
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+          {!node.isReadOnly ? (
+            <div className="data-quality-validation-graph-fetch-tree__node__actions">
+              <button
+                className="data-quality-validation-graph-fetch-tree__node__action"
+                title="Remove"
+                tabIndex={-1}
+                onClick={deleteNode}
+                disabled={isReadOnly}
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          ) : (
+            <div />
+          )}
+        </div>
+        {node.constraints.length ? (
+          <div
+            style={{
+              paddingLeft: `${(level + 2) * (stepPaddingInRem ?? 2)}rem`,
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            {node.constraints.map((constraint) => (
+              <div
+                className="data-quality-validation-graph-fetch-tree__node__label data-quality-validation-graph-fetch-tree__node__constraint"
+                key={constraint.lambdaId}
+                onClick={() => {
+                  toggleChecked(constraint);
+                }}
+              >
+                <button
+                  className={clsx(
+                    'panel__content__form__section__toggler__btn',
+                    'data-quality-validation-graph-fetch-tree__constraint__checkbox',
+                    {
+                      'panel__content__form__section__toggler__btn--toggled':
+                        constraint.isSelected,
+                    },
+                  )}
+                >
+                  {constraint.isSelected ? <CheckSquareIcon /> : <SquareIcon />}
+                </button>
+                <div className="data-quality-validation-graph-fetch-tree__constraint__name">
+                  {constraint.constraint.name}
+                </div>
+                <div className="data-quality-validation-graph-fetch-tree__constraint__value">
+                  {constraint.lambdaString}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <></>
+        )}
+      </div>
+    );
+  },
+);
+
+export const ConstraintsSelectionExplorer = observer(
+  (props: {
+    constraintsClasses: DataQualityGraphFetchTreeData;
+    dataQualityState: DataQualityState;
+    updateTreeData: (data: DataQualityGraphFetchTreeData) => void;
+  }) => {
+    const { constraintsClasses, dataQualityState, updateTreeData } = props;
+    const { applicationStore } = dataQualityState;
+    const getChildNodes = (
+      node: DataQualityGraphFetchTreeNodeData,
+    ): DataQualityGraphFetchTreeNodeData[] =>
+      node.childrenIds
+        .map((id) => constraintsClasses.nodes.get(id))
+        .filter(
+          (_node): _node is DataQualityGraphFetchTreeNodeData =>
+            _node instanceof DataQualityGraphFetchTreeNodeData,
+        )
+        .sort((a, b) => a.label.localeCompare(b.label))
+        .sort(
+          (a, b) =>
+            getQueryBuilderExplorerTreeNodeSortRank(b) -
+            getQueryBuilderExplorerTreeNodeSortRank(a),
+        );
+    const removeNode = (node: DataQualityGraphFetchTreeNodeData): void => {
+      removeNodeRecursively(constraintsClasses, node);
+      updateTreeData({ ...constraintsClasses });
+      dataQualityClassValidation_setDataQualityGraphFetchTree(
+        dataQualityState.constraintsConfigurationElement as DataQualityClassValidationsConfiguration,
+        constraintsClasses.tree,
+      );
+    };
+
+    const showStructuralValidations = () => {
+      dataQualityState.setShowStructuralValidations(true);
+      flowResult(dataQualityState.fetchStructuralValidations()).catch(
+        applicationStore.alertUnhandledError,
+      );
+    };
+
+    const disableSyncToDQ = Boolean(
+      !dataQualityState.dataQualityGraphFetchTreeState.treeData,
+    );
+
+    return (
+      <div className="data-quality-validation-graph-fetch-constraints-selection__config-group__content">
+        <div className="data-quality-validation-graph-fetch-constraints-selection__structural-attributes">
+          <button
+            className="btn--dark structure-validations-btn"
+            onClick={showStructuralValidations}
+            disabled={Boolean(disableSyncToDQ)}
+            tabIndex={-1}
+            title="Show Structural Attributes to be validated during run"
+          >
+            Show Structural Attributes
+          </button>
+        </div>
+        <div className="data-quality-validation-graph-fetch-constraints-selection__config-group__item">
+          <TreeView
+            components={{
+              TreeNodeContainer: DataQualityConstraintsTreeNodeContainer,
+            }}
+            className="data-quality-validation-graph-fetch-tree__container__tree"
+            treeData={constraintsClasses}
+            getChildNodes={getChildNodes}
+            innerProps={{
+              dataQualityState,
+              isReadOnly: false,
+              removeNode,
+            }}
+          />
+        </div>
+        <DataQualityStructuralValidationsPanel
+          dataQualityState={dataQualityState}
+        />
+      </div>
+    );
+  },
+);
+
+export const DataQualityConstraintsSelection = observer(
+  (props: { dataQualityState: DataQualityState }) => {
+    const { dataQualityState } = props;
+    const constraintsConfiguration =
+      dataQualityState.constraintsConfigurationElement;
+    const dataQualityGraphFetchTreeState =
+      dataQualityState.dataQualityGraphFetchTreeState;
+    const treeData = dataQualityGraphFetchTreeState.treeData;
+
+    const updateTreeData = (data: DataQualityGraphFetchTreeData): void => {
+      dataQualityGraphFetchTreeState.setGraphFetchTree(data);
+    };
+
+    const handleDrop = useCallback(
+      (item: QueryBuilderExplorerTreeDragSource): void => {
+        dataQualityGraphFetchTreeState.addProperty(item.node, {
+          refreshTreeData: true,
+        });
+        if (dataQualityGraphFetchTreeState.treeData) {
+          dataQualityClassValidation_setDataQualityGraphFetchTree(
+            constraintsConfiguration as DataQualityClassValidationsConfiguration,
+            dataQualityGraphFetchTreeState.treeData.tree,
+          );
+        }
+      },
+      [dataQualityGraphFetchTreeState, constraintsConfiguration],
+    );
+
+    const [{ isDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderExplorerTreeDragSource,
+      void,
+      { isDragOver: boolean }
+    >(
+      () => ({
+        accept: [
+          QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY,
+          QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
+        ],
+        drop: (item, monitor): void => {
+          if (!monitor.didDrop()) {
+            handleDrop(item);
+          } // prevent drop event propagation to accomondate for nested DnD
+        },
+        collect: (monitor) => ({
+          isDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleDrop],
+    );
+
+    return (
+      <div
+        data-testid={
+          DATA_QUALITY_VALIDATION_TEST_ID.DATA_QUALITY_VALIDATION_TREE
+        }
+        className="constraints-selection-tab"
+      >
+        <PanelDropZone
+          isDragOver={isDragOver}
+          dropTargetConnector={dropTargetConnector}
+          contentClassName="data-quality-validation-graph-fetch-panel"
+        >
+          {(!treeData || isConstraintsClassesTreeEmpty(treeData)) && (
+            <BlankPanelPlaceholder
+              text="Add a scope for constraints"
+              tooltipText="Drag and drop properties here"
+            />
+          )}
+          {treeData && !isConstraintsClassesTreeEmpty(treeData) && (
+            <ConstraintsSelectionExplorer
+              constraintsClasses={treeData}
+              dataQualityState={dataQualityState}
+              updateTreeData={updateTreeData}
+            />
+          )}
+        </PanelDropZone>
+      </div>
+    );
+  },
+);