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

package/src/components/DataQualitySideBar.tsx

@@ -0,0 +1,216 @@
+/**
+ * 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 {
+  clsx,
+  createFilter,
+  CustomSelectorInput,
+  PURE_ClassIcon,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useApplicationStore } from '@finos/legend-application';
+import type { DataQualityState } from './states/DataQualityState.js';
+import { DataQualityDataSpaceBuilderSetupPanelContent } from './DataQualityDataSpaceBuilder.js';
+import { DataQualityMappingAndRuntimeBuilder } from './DataQualityMappingAndRuntimeBuilder.js';
+import { ELEMENT_CREATION_BASIS } from './DSL_DataQuality_ClassElementDriver.js';
+import { type Class, isElementDeprecated } from '@finos/legend-graph';
+import {
+  getPackageableElementOptionFormatter,
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
+import type { DataQualityClassValidationState } from './states/DataQualityClassValidationState.js';
+import type { DataQualityServiceValidationState } from './states/DataQualityServiceValidationState.js';
+import { DATA_QUALITY_VALIDATION_TEST_ID } from './constants/DataQualityConstants.js';
+
+const generateClassLabel = (
+  val: Class,
+  dataQualityState: DataQualityState,
+): string | React.ReactNode => {
+  const isDeprecatedClass = isElementDeprecated(
+    val,
+    dataQualityState.graphManagerState.graph,
+  );
+
+  return (
+    <div
+      className={clsx('data-quality-validation__setup__class-option-label', {
+        'data-quality-validation__setup__class-option-label--deprecated':
+          isDeprecatedClass,
+      })}
+    >
+      <div className="data-quality-validation__setup__class-option-label__name">
+        {val.name}
+      </div>
+    </div>
+  );
+};
+
+export const DataQualityClassSelector = observer(
+  (props: {
+    dataQualityState: DataQualityState;
+    classes: Class[];
+    onClassChange?: ((val: Class) => void) | undefined;
+    noMatchMessage?: string | undefined;
+  }) => {
+    const { dataQualityState, classes, onClassChange, noMatchMessage } = props;
+    const { dataQualityQueryBuilderState } = dataQualityState;
+    const applicationStore = useApplicationStore();
+
+    const elementFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Class>): string =>
+        option.value.path,
+    });
+
+    const classOptions = classes.map((_class) => ({
+      value: _class,
+      label: generateClassLabel(_class, dataQualityState),
+    }));
+    const selectedClassOption = dataQualityQueryBuilderState.class
+      ? {
+          value: dataQualityQueryBuilderState.class,
+          label: generateClassLabel(
+            dataQualityQueryBuilderState.class,
+            dataQualityState,
+          ),
+        }
+      : null;
+    const changeClass = (val: PackageableElementOption<Class>): void => {
+      if (val.value === dataQualityQueryBuilderState.class) {
+        return;
+      }
+      dataQualityState.changeClass(val.value);
+      dataQualityState.updateElementOnClassChange();
+      onClassChange?.(val.value);
+    };
+
+    return (
+      <div className="data-quality-validation__setup__config-group data-quality-validation__setup__config-group--class">
+        <div className="data-quality-validation__setup__config-group__content">
+          <div className="data-quality-validation__setup__config-group__item">
+            <div
+              className="btn--sm data-quality-validation__setup__config-group__item__label"
+              title="class"
+            >
+              <PURE_ClassIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown data-quality-validation__setup__config-group__item__selector data-quality-validation__setup__config-group__item__selector__milestoned"
+              placeholder={
+                classOptions.length
+                  ? 'Choose a class...'
+                  : noMatchMessage ?? 'No class found'
+              }
+              disabled={
+                classOptions.length < 1 ||
+                (classOptions.length === 1 && Boolean(selectedClassOption))
+              }
+              noMatchMessage={noMatchMessage}
+              options={classOptions}
+              onChange={changeClass}
+              value={selectedClassOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              filterOption={elementFilterOption}
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode:
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled,
+              })}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+export const DataQualityServiceValidationSideBar = observer(
+  (props: {
+    dataQualityState: DataQualityServiceValidationState;
+    children: React.ReactNode;
+  }) => {
+    const { dataQualityState, children } = props;
+
+    return (
+      <div
+        className={clsx(
+          'data-quality-validation__side-bar',
+          dataQualityState.sideBarClassName,
+        )}
+      >
+        <div
+          data-testid={
+            DATA_QUALITY_VALIDATION_TEST_ID.DATA_QUALITY_VALIDATION_SETUP
+          }
+          className="panel data-quality-validation__setup"
+        >
+          <div className="panel__content data-quality-validation__setup__content">
+            service selection to be show
+          </div>
+        </div>
+        <div className="data-quality-validation__side-bar__content">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const DataQualityClassValidationSideBar = observer(
+  (props: {
+    dataQualityClassValidationState: DataQualityClassValidationState;
+    children: React.ReactNode;
+  }) => {
+    const { dataQualityClassValidationState, children } = props;
+    const validationElementCreationBasis =
+      dataQualityClassValidationState.validationElementCreationBasis;
+
+    return (
+      <div
+        className={clsx(
+          'data-quality-validation__side-bar',
+          dataQualityClassValidationState.sideBarClassName,
+        )}
+      >
+        <div
+          data-testid={
+            DATA_QUALITY_VALIDATION_TEST_ID.DATA_QUALITY_VALIDATION_SETUP
+          }
+          className="panel data-quality-validation__setup"
+        >
+          <div className="panel__content data-quality-validation__setup__content">
+            {validationElementCreationBasis ===
+            ELEMENT_CREATION_BASIS.DATASPACE_BASED ? (
+              <DataQualityDataSpaceBuilderSetupPanelContent
+                dataQualityState={dataQualityClassValidationState}
+              />
+            ) : (
+              <DataQualityMappingAndRuntimeBuilder
+                dataQualityState={dataQualityClassValidationState}
+              />
+            )}
+          </div>
+        </div>
+        <div className="data-quality-validation__side-bar__content">
+          {children}
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/DataQualityStructuralValidationsPanel.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 {
+  Dialog,
+  ModalBody,
+  ModalFooter,
+  Modal,
+  ModalFooterButton,
+  ModalHeader,
+  TreeView,
+} from '@finos/legend-art';
+import type { DataQualityState } from './states/DataQualityState.js';
+import {
+  DataQualityConstraintsTreeNodeContainer,
+  getQueryBuilderExplorerTreeNodeSortRank,
+} from './DataQualityConstraintsSelection.js';
+import { DataQualityGraphFetchTreeNodeData } from './utils/DataQualityGraphFetchTreeUtil.js';
+
+export const DataQualityStructuralValidationsPanel = observer(
+  (props: { dataQualityState: DataQualityState }) => {
+    const { dataQualityState } = props;
+    const { structuralValidationsGraphFetchTreeState } = dataQualityState;
+    const structureValidationsTree =
+      structuralValidationsGraphFetchTreeState.treeData;
+    if (!structureValidationsTree) {
+      return null;
+    }
+    const closePlanViewer = (): void => {
+      dataQualityState.setShowStructuralValidations(false);
+    };
+    const isDarkMode =
+      !dataQualityState.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+
+    const getChildNodes = (
+      node: DataQualityGraphFetchTreeNodeData,
+    ): DataQualityGraphFetchTreeNodeData[] =>
+      node.childrenIds
+        .map((id) => structureValidationsTree.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),
+        );
+
+    return (
+      <Dialog
+        open={dataQualityState.showStructuralValidations}
+        onClose={closePlanViewer}
+        classes={{
+          root: 'data-quality-editor-modal__root-container',
+          container: 'data-quality-editor-modal__container',
+          paper: 'data-quality-editor-modal__content',
+        }}
+      >
+        <Modal className="data-quality-editor-modal" darkMode={isDarkMode}>
+          <ModalHeader title="Structural Attributes" />
+          <ModalBody>
+            <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={structureValidationsTree}
+                getChildNodes={getChildNodes}
+                innerProps={{
+                  dataQualityState,
+                  isReadOnly: true,
+                }}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              onClick={closePlanViewer}
+              text="Close"
+              type="secondary"
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/DataQualityTabs.tsx

@@ -0,0 +1,104 @@
+/**
+ * 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 {
+  type DataQualityState,
+  DATA_QUALITY_TAB,
+} from './states/DataQualityState.js';
+import { observer } from 'mobx-react-lite';
+import { clsx } from '@finos/legend-art';
+import { prettyCONSTName } from '@finos/legend-shared';
+import { DataQualityConstraintsSelection } from './DataQualityConstraintsSelection.js';
+import { DataQualityResultPanel } from './DataQualityResultPanel.js';
+import { DataQualityFilterPanel } from './DataQualityFilterPanel.js';
+import { type DSL_DataQuality_LegendStudioPlugin_Extension } from './DSL_DataQuality_LegendStudioPlugin_Extension.js';
+
+export const DataQualityTabs = observer(
+  (props: { dataQualityState: DataQualityState }) => {
+    const { dataQualityState } = props;
+    const { selectedTab } = dataQualityState;
+    const changeTab =
+      (tab: string): (() => void) =>
+      (): void =>
+        dataQualityState.setSelectedTab(tab);
+
+    const tabsToRender = dataQualityState.tabsToShow;
+    const renderTabs = (): React.ReactNode => {
+      switch (selectedTab) {
+        case DATA_QUALITY_TAB.CONSTRAINTS_SELECTION:
+          return (
+            <DataQualityConstraintsSelection
+              dataQualityState={dataQualityState}
+            />
+          );
+        case DATA_QUALITY_TAB.FILTER:
+          return (
+            <DataQualityFilterPanel
+              filterState={
+                dataQualityState.dataQualityQueryBuilderState.filterState
+              }
+              dataQualityState={dataQualityState}
+            />
+          );
+        case DATA_QUALITY_TAB.TRIAL_RUNS:
+          return <DataQualityResultPanel dataQualityState={dataQualityState} />;
+        default: {
+          if (selectedTab) {
+            const extraTabRenderers = dataQualityState.editorStore.pluginManager
+              .getApplicationPlugins()
+              .flatMap(
+                (plugin) =>
+                  (
+                    plugin as DSL_DataQuality_LegendStudioPlugin_Extension
+                  ).getComponentRenderers?.() ?? [],
+              );
+            for (const extraTabRenderer of extraTabRenderers) {
+              const componentToRender = extraTabRenderer(
+                selectedTab,
+                dataQualityState,
+              );
+              if (componentToRender) {
+                return componentToRender;
+              }
+            }
+          }
+          return undefined;
+        }
+      }
+    };
+
+    return (
+      <div className="panel">
+        <div className="panel__header">
+          <div className="uml-element-editor__tabs">
+            {tabsToRender.map((tab) => (
+              <div
+                key={tab}
+                onClick={changeTab(tab)}
+                className={clsx('data-quality__tab', {
+                  'data-quality__tab--active': tab === selectedTab,
+                })}
+              >
+                {prettyCONSTName(tab)}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="panel__content">{renderTabs()}</div>
+      </div>
+    );
+  },
+);

package/src/components/DataQualityValidationEditor.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 {
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+} from '@finos/legend-art';
+import { DataQualityTabs } from './DataQualityTabs.js';
+import type { DataQualityState } from './states/DataQualityState.js';
+
+export const DataQualityValidationEditor = observer(
+  (props: {
+    dataQualityState: DataQualityState;
+    SideBarBasisComponent: React.ReactNode;
+  }) => {
+    const { SideBarBasisComponent, dataQualityState } = props;
+    return (
+      <div className="data-quality-validation">
+        <div className="data-quality-validation__body">
+          <div className="data-quality-validation__content">
+            <div className="data-quality-validation__main">
+              <ResizablePanelGroup orientation="vertical">
+                <ResizablePanel size={300} minSize={120}>
+                  {SideBarBasisComponent}
+                </ResizablePanel>
+                <ResizablePanelSplitter />
+                <ResizablePanel minSize={120}>
+                  <DataQualityTabs dataQualityState={dataQualityState} />
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/constants/DataQualityConstants.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+export enum DATA_QUALITY_VALIDATION_TEST_ID {
+  DATA_QUALITY_VALIDATION_EXPLORER = 'data-quality-validation__explorer',
+  DATA_QUALITY_VALIDATION_TOOLTIP_ICON = 'data-quality-validation__tooltip__icon',
+  DATA_QUALITY_VALIDATION_SETUP = 'data-quality-validation__setup',
+  DATA_QUALITY_VALIDATION_TREE = 'data-quality-validation-tree',
+  DATA_QUALITY_VALIDATION_RESULT_PANEL = 'data-quality-result-panel',
+  DATA_QUALITY_VALIDATION_RESULT_ANALYTICS = 'data-quality-result-analytics',
+}

package/src/components/index.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+export * from './DSL_DataQuality_LegendStudioApplicationPlugin.js';
+export * from '../components/states/DataQualityState.js';
+export * from '../components/DSL_DataQuality_LegendStudioPlugin_Extension.js';

package/src/components/states/ConstraintState.ts

@@ -0,0 +1,70 @@
+/**
+ * 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 {
+  type Constraint,
+  buildSourceInformationSourceId,
+  LAMBDA_PIPE,
+} from '@finos/legend-graph';
+import { action, makeObservable, observable } from 'mobx';
+import { uuid } from '@finos/legend-shared';
+
+export const CONSTRAINT_SOURCE_ID_LABEL = 'constraint';
+
+export class ConstraintState {
+  readonly uuid = uuid();
+  constraint: Constraint;
+  lambdaString: string;
+  isSelected = false;
+  lambdaPrefix: string = LAMBDA_PIPE;
+
+  constructor(constraint: Constraint) {
+    makeObservable(this, {
+      constraint: observable,
+      isSelected: observable,
+      lambdaString: observable,
+      setLambdaString: action,
+      setIsSelected: action,
+    });
+
+    this.constraint = constraint;
+    this.lambdaString = '';
+  }
+
+  setLambdaString(val: string): void {
+    this.lambdaString = val;
+  }
+
+  setIsSelected(val: boolean) {
+    this.isSelected = val;
+  }
+
+  extractLambdaString(fullLambdaString: string): string {
+    return fullLambdaString.substring(
+      fullLambdaString.indexOf(this.lambdaPrefix) + this.lambdaPrefix.length,
+      fullLambdaString.length,
+    );
+  }
+
+  get lambdaId(): string {
+    return buildSourceInformationSourceId([
+      this.constraint._OWNER.path,
+      CONSTRAINT_SOURCE_ID_LABEL,
+      this.constraint.name,
+      this.uuid, // in case of duplications
+    ]);
+  }
+}