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

package/style/_data-quality-relation-comparison-editor.scss

@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) 2026-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.
+ */
+
+@use 'mixins' as *;
+
+.data-quality-relation-comparison-editor {
+  height: 100%;
+  width: 100%;
+  background: var(--color-dark-grey-50);
+
+  .panel {
+    height: 100%;
+    width: 100%;
+
+    &__header__title__label {
+      background: var(--color-dark-grey-250);
+    }
+
+    &__content {
+      background: var(--color-dark-grey-50);
+    }
+
+    &__header {
+      padding-left: 0.5rem;
+      color: var(--color-light-grey-300);
+      font-weight: bold;
+      background: var(--color-dark-grey-50);
+      border-bottom: 0.1rem solid var(--color-dark-grey-200);
+    }
+  }
+
+  &__panel__content__form {
+    padding-left: 1rem;
+    padding-top: 1rem;
+    max-width: 160rem;
+    width: 100%;
+  }
+
+  &__actions-bar {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 1rem;
+    background: var(--color-dark-grey-50);
+    margin-top: 2rem;
+    height: 4rem;
+    padding-top: 0.5rem;
+
+    &__limit {
+      @include flexVCenter;
+
+      flex-shrink: 0;
+      height: 2.8rem;
+    }
+
+    &__limit__label {
+      @include flexVCenter;
+
+      height: 100%;
+      padding: 0 1rem;
+      background: var(--color-dark-grey-280);
+      border-radius: 0.2rem 0 0 0.2rem;
+      color: var(--color-light-grey-300);
+      font-size: 1.2rem;
+      text-transform: lowercase;
+      white-space: nowrap;
+    }
+
+    &__limit__input {
+      width: 7rem;
+      height: 2.8rem;
+      padding: 0 0.8rem;
+      color: var(--color-light-grey-150);
+      background: var(--color-dark-grey-100);
+      border: 0.1rem solid var(--color-dark-grey-300);
+      border-radius: 0.2rem;
+    }
+
+    &__cancel-btn {
+      padding-right: 2.8rem;
+    }
+
+    &__cancel-label {
+      height: 2.8rem;
+    }
+
+    &__run-group {
+      display: flex;
+      gap: 0.02rem;
+      padding-right: 2.8rem;
+    }
+
+    &__run-btn {
+      height: 2.8rem;
+      width: 14rem;
+      white-space: nowrap;
+    }
+
+    &__dropdown-btn {
+      height: 2.8rem;
+    }
+  }
+
+  &__column-fetch-error {
+    @include flexVCenter;
+
+    gap: 0.8rem;
+    padding: 0.8rem 1rem;
+    margin: 0 1rem 1rem;
+    border-radius: 0.2rem;
+    background: var(--color-dark-grey-200);
+    border: 0.1rem solid var(--color-red-200);
+
+    &__icon {
+      flex-shrink: 0;
+      color: var(--color-red-200);
+      font-size: 1.6rem;
+    }
+
+    &__message {
+      flex: 1;
+      color: var(--color-red-100);
+      font-size: 1.2rem;
+    }
+
+    &__retry-btn {
+      @include flexVCenter;
+
+      flex-shrink: 0;
+      gap: 0.4rem;
+      height: 2.4rem;
+      min-width: 7rem;
+      padding: 0 0.8rem;
+      border: none;
+      border-radius: 0.2rem;
+      cursor: pointer;
+      font-size: 1.2rem;
+      white-space: nowrap;
+      color: var(--color-light-grey-200);
+      background: var(--color-dark-grey-300);
+
+      &:hover:not(:disabled) {
+        background: var(--color-dark-grey-350);
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      svg {
+        font-size: 1.3rem;
+      }
+    }
+  }
+
+  &__column-overlap-warning {
+    @include flexVCenter;
+
+    gap: 0.8rem;
+    padding: 0.8rem 1rem;
+    margin: 0 1rem 1rem;
+    border-radius: 0.2rem;
+    background: var(--color-dark-grey-200);
+    border: 0.1rem solid var(--color-yellow-200);
+
+    &__icon {
+      flex-shrink: 0;
+      color: var(--color-yellow-200);
+      font-size: 1.6rem;
+    }
+
+    &__message {
+      flex: 1;
+      color: var(--color-yellow-100);
+      font-size: 1.2rem;
+    }
+  }
+
+  &__queries {
+    height: 25rem;
+    min-height: 15rem;
+  }
+
+  &__query-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    &__header {
+      @include flexVCenter;
+
+      height: 2.8rem;
+      padding-left: 2rem;
+      font-weight: 500;
+      color: var(--color-light-grey-300);
+    }
+
+    &__content {
+      flex: 1;
+      min-height: 0;
+      margin-left: 2rem;
+      margin-right: 2rem;
+      padding-top: 0.5rem;
+      overflow: hidden;
+      border-bottom: 0.1rem solid var(--color-dark-grey-200);
+    }
+
+    &__title {
+      height: 2.8rem;
+
+      @include flexVCenter;
+
+      background: var(--color-dark-grey-200);
+      color: var(--color-light-grey-100);
+      padding: 0 1rem;
+      border-radius: 0.2rem;
+      margin: 0;
+      font-weight: 500;
+    }
+  }
+
+  &__lambda-editor {
+    height: 28rem !important;
+  }
+
+  &__result {
+    padding-top: 1rem;
+    padding-left: 2rem;
+    padding-right: 1rem;
+
+    &__header {
+      padding-right: 1rem;
+
+      @include flexVCenter;
+      @include flexHSpaceBetween;
+    }
+
+    &__header-group {
+      display: flex;
+      flex-direction: row;
+      color: var(--color-light-grey-300);
+
+      @include flexVCenter;
+    }
+
+    &__title {
+      height: 2.8rem;
+
+      @include flexVCenter;
+
+      background: var(--color-dark-grey-200);
+      color: var(--color-light-grey-100);
+      padding: 0 1rem;
+      border-radius: 0.2rem;
+      margin: 0;
+      font-weight: 500;
+    }
+
+    &__status {
+      @include flexVCenter;
+
+      margin-left: 1rem;
+      color: var(--color-yellow-200);
+      font-size: 1.2rem;
+    }
+
+    &__analytics {
+      @include flexVCenter;
+
+      margin-left: 1rem;
+      color: var(--color-light-grey-400);
+      font-size: 1.2rem;
+    }
+
+    &__content {
+      width: 100%;
+      padding-top: 0.5rem;
+    }
+
+    &__viewer {
+      height: 35rem !important;
+      border: 0.1rem solid var(--color-dark-grey-280);
+    }
+  }
+
+  &__parameters-modal {
+    width: 96rem;
+    max-width: calc(100vw - 4rem);
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      gap: 1.6rem;
+      max-height: 70vh;
+    }
+
+    &__description {
+      color: var(--color-light-grey-300);
+      font-size: 1.2rem;
+      line-height: 1.8rem;
+    }
+
+    &__sections {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 1.6rem;
+      align-items: start;
+    }
+
+    &__section {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2rem;
+      padding: 1.2rem;
+      border: 0.1rem solid var(--color-dark-grey-200);
+      border-radius: 0.2rem;
+      background: var(--color-dark-grey-50);
+    }
+
+    &__section__title {
+      color: var(--color-light-grey-100);
+      font-size: 1.2rem;
+      font-weight: 700;
+      letter-spacing: 0.04rem;
+      text-transform: uppercase;
+    }
+
+    &__section__body {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2rem;
+    }
+
+    .value-spec-editor__reset-btn,
+    .value-spec-editor__variable__reset-btn {
+      display: none;
+    }
+
+    @media (width <= 1000px) {
+      width: calc(100vw - 4rem);
+
+      &__sections {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
+  }
+}

package/style/data-quality-custom-selector.scss

@@ -19,6 +19,7 @@
 .data-quality-custom-selector {
   @include flexVCenter;
 
+  width: 100%;
   height: 2.8rem;
   border: 0.1rem solid var(--color-dark-grey-280);
   border-radius: 0.2rem;
@@ -50,6 +51,28 @@
     user-select: none;
   }
 
+  &__clear {
+    @include flexCenter;
+
+    flex-shrink: 0;
+    width: 2rem;
+    min-width: 2rem;
+    height: 100%;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-light-grey-400);
+
+    &:hover {
+      color: var(--color-light-grey-100);
+    }
+
+    svg {
+      font-size: 1.1rem;
+    }
+  }
+
   &__dropdown__trigger {
     @include flexCenter;
 

package/style/index.scss

@@ -20,6 +20,7 @@
 @forward 'data-quality-relation-validation-suggestion-panel';
 @forward 'data-quality-validation-gui-editor';
 @forward 'data-quality-custom-selector';
+@forward 'data-quality-relation-comparison-editor';
 
 .data-quality-constraints {
   display: flex;
@@ -177,3 +178,76 @@
     }
   }
 }
+
+.data-quality-multi-custom-selector {
+  @include flexVCenter;
+
+  min-height: 2.8rem;
+  border: 0.1rem solid var(--color-dark-grey-280);
+  border-radius: 0.2rem;
+  background: var(--color-dark-grey-100);
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    gap: 0.3rem;
+    padding: 0.3rem 0.5rem;
+    min-height: 2.6rem;
+    align-items: center;
+  }
+
+  &__placeholder {
+    color: var(--color-dark-grey-400);
+    font-size: 1.2rem;
+    user-select: none;
+  }
+
+  &__tag {
+    @include flexVCenter;
+
+    height: 2rem;
+    padding: 0 0.3rem 0 0.6rem;
+    background: var(--color-dark-grey-280);
+    border-radius: 0.2rem;
+    font-size: 1.1rem;
+    color: var(--color-light-grey-300);
+    gap: 0.3rem;
+
+    &__label {
+      white-space: nowrap;
+    }
+
+    &__remove {
+      @include flexCenter;
+
+      width: 1.6rem;
+      height: 1.6rem;
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      color: var(--color-light-grey-400);
+      border-radius: 0.2rem;
+
+      &:hover {
+        background: var(--color-dark-grey-400);
+        color: var(--color-light-grey-100);
+      }
+
+      svg {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  &__dropdown-trigger {
+    @include flexCenter;
+
+    width: 2.4rem;
+    min-width: 2.4rem;
+    height: 100%;
+    align-self: stretch;
+    cursor: pointer;
+  }
+}

package/tsconfig.json

@@ -89,6 +89,7 @@
     "./src/components/states/DataQualityClassValidationState.ts",
     "./src/components/states/DataQualityGraphFetchTreeState.ts",
     "./src/components/states/DataQualityQueryBuilderState.ts",
+    "./src/components/states/DataQualityRelationComparisonConfigurationState.ts",
     "./src/components/states/DataQualityRelationResultState.ts",
     "./src/components/states/DataQualityRelationValidationConfigurationState.ts",
     "./src/components/states/DataQualityRelationValidationState.ts",
@@ -144,6 +145,7 @@
     "./src/components/DataQualityExplorerPanel.tsx",
     "./src/components/DataQualityFilterPanel.tsx",
     "./src/components/DataQualityMappingAndRuntimeBuilder.tsx",
+    "./src/components/DataQualityRelationComparisonEditor.tsx",
     "./src/components/DataQualityRelationGridResult.tsx",
     "./src/components/DataQualityRelationLambdaGUIDataTypeHandlers.tsx",
     "./src/components/DataQualityRelationLambdaGUIValidationEditor.tsx",