@truedat/dq 4.52.4 → 4.52.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.52.5] 2022-09-30
+
+- [TD-2430] Add join type selection when defining an implementation dataset
+
 ## [4.52.3] 2022-09-22
 
 ### Removed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "4.52.4",
+  "version": "4.52.6",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.52.0",
+    "@truedat/test": "4.52.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -93,8 +93,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/core": "4.52.4",
-    "@truedat/df": "4.52.4",
+    "@truedat/core": "4.52.6",
+    "@truedat/df": "4.52.6",
     "graphql": "^15.5.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "c8fb8bfae18f39f7925c46e45b7818d02a5bc070"
+  "gitHead": "14204211010d6329f9f22071c95e7d9d6ce6b0f7"
 }

package/src/components/ImplementationSummary.js

@@ -1,13 +1,14 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Table, Segment, List } from "semantic-ui-react";
+import { Header, Icon, List, Table, Segment } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import ConditionSummary, { empty, path } from "./ConditionSummary";
 import FieldSummary from "./FieldSummary";
 import InformationSummary from "./InformationSummary";
+import { JoinTypeIcon } from "./JoinTypeIcon";
 import "../styles/ImplementationSummary.less";
 
 const defaults = [
@@ -63,6 +64,14 @@ const UnionSummary = ({ alias, row }) => {
   return empty(row) || !(row?.clauses && _.size(row?.clauses) > 0) ? null : (
     <List id="union-list">
       <List.Item>
+        {_.has("join_type")(row) ? (
+          <>
+            <List.Header>
+              <FormattedMessage id="structureSelector.union.type" />
+            </List.Header>
+            <JoinTypeIcon type={row.join_type} />
+          </>
+        ) : null}
         <List.Header>
           <FormattedMessage id="structureSelector.union.criteria" />
         </List.Header>

package/src/components/JoinTypeIcon.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const JoinTypeIcon = ({ type }) => {
+  switch (type) {
+    case "inner":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right"></div>
+        </div>
+      );
+    case "left":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left fill">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right"></div>
+        </div>
+      );
+    case "right":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right fill"></div>
+        </div>
+      );
+    case "full_outer":
+      return (
+        <div className="join_type">
+          <div className="circle circle-left fill">
+            <div className="circle circle-center fill"></div>
+          </div>
+          <div className="circle circle-right fill"></div>
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+JoinTypeIcon.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default JoinTypeIcon;

package/src/components/ruleImplementationForm/DatasetForm.js

@@ -44,7 +44,12 @@ export const DatasetForm = ({
   };
 
   const onChangeField = (index, value) => {
-    const structureAttrs = _.pick(["structure", "clauses", "alias"])(value);
+    const structureAttrs = _.pick([
+      "structure",
+      "clauses",
+      "alias",
+      "join_type",
+    ])(value);
     setStructure({
       index,
       value: {
@@ -118,7 +123,8 @@ export const DatasetForm = ({
   return (
     <>
       {structures.map((structure, index) =>
-        _.path("join_type")(structure) === "reference_dataset" ? (
+        _.path("structureType")(structure) === "reference_dataset" ||
+        _.path("structure.type")(structure) === "reference_dataset" ? (
           <ReferenceDatasetSelectorInputField
             key={index}
             onChange={(value) =>
@@ -168,7 +174,12 @@ export const DatasetForm = ({
           {_.isEmpty(availableReferenceDatasets) ? null : (
             <Button
               onClick={(e) => {
-                setStructure({ value: { join_type: "reference_dataset" } });
+                setStructure({
+                  value: {
+                    join_type: "inner",
+                    structureType: "reference_dataset",
+                  },
+                });
               }}
             >
               {formatMessage({

package/src/messages/en.js

@@ -608,6 +608,7 @@ export default {
   "structureFields.dropdown.label": "Select Field",
   "structureFields.dropdown.placeholder": "Fields",
   "structureSelector.union.criteria": "Union criteria",
+  "structureSelector.union.type": "Union type",
   "summary.link.and": "and",
   "tabs.dq.implementation.links.concepts": "Link to concepts",
   "tabs.dq.implementation.structures": "Structures",

package/src/messages/es.js

@@ -630,6 +630,7 @@ export default {
   "structureFields.dropdown.label": "Seleccionar Campo",
   "structureFields.dropdown.placeholder": "Campos",
   "structureSelector.union.criteria": "Criterio de unión",
+  "structureSelector.union.type": "Tipo de unión",
   "summary.link.and": "y",
   "tabs.dq.implementation.links.concepts": "Conceptos relacionados",
   "tabs.dq.implementation.structures": "Estructuras",

package/src/styles/JoinTypeIcon.less

@@ -0,0 +1,35 @@
+.join_type{
+  display:inline-flex;
+  left: 25%;
+}
+.join_type .circle{
+  display:flex;
+  box-sizing: border-box;
+  width:20px;
+  height:20px;
+  border-radius:50%;
+  border: 2px solid black;
+  z-index: 1;
+}
+.join_type .circle.fill{
+  background:orange;
+}
+.join_type .circle.fill.white {
+  background:white;
+}
+.join_type .circle-left{
+  display:block;
+  overflow:hidden;
+  position:relative;
+}
+.join_type .circle-center{
+  top: -2px;
+  right: calc(-75% + 2px);
+  position:absolute;
+}
+.join_type .circle-right{
+  overflow:hidden;
+  position:relative;
+  right: 25%;
+  z-index: 0;
+}