@truedat/qx 7.13.8 → 7.14.0

package/src/components/dataViews/summary/GroupBy.js

@@ -0,0 +1,82 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import { List, Header, Icon, Label, Segment } from "semantic-ui-react";
+import {
+  getAggregateFields,
+  getGroupByFields,
+} from "../queryableSummaryHelpers";
+import { getColorById } from "../queryableFunctions";
+import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
+
+export default function GroupBy({ queryable }) {
+  const { formatMessage } = useIntl();
+  const groupByFields = getGroupByFields(queryable);
+  const aggregateFields = getAggregateFields(queryable);
+  const color = getColorById(queryable.id);
+  const hasGroupByFields = _.size(groupByFields) > 0;
+  const hasAggregateFields = _.size(aggregateFields) > 0;
+
+  return (
+    <List.Item>
+      <List.Header style={{ marginBottom: 4 }}>
+        <Icon name="calculator" />
+        {formatMessage({ id: "dataViews.form.queryable.group_by" })}
+      </List.Header>
+      <List.Content>
+        {queryable.alias && (
+          <div style={{ marginBottom: 4 }}>
+            <b style={{ marginRight: 4 }}>as</b>
+            <Label color={color}>{queryable.alias}</Label>
+          </div>
+        )}
+        {hasGroupByFields && (
+          <Segment>
+            <List.Description>
+              <div style={{ marginBottom: 8 }}>
+                <Header as="h5">
+                  <Icon name="group" size="small" />
+                  {formatMessage({
+                    id: "queryables.group_by.form.group_fields",
+                  })}
+                </Header>
+              </div>
+              <div>
+                {groupByFields.map((field, idx) => (
+                  <ExpressionViewer
+                    key={idx}
+                    expression={field.expression}
+                    alias={field.alias}
+                  />
+                ))}
+              </div>
+            </List.Description>
+          </Segment>
+        )}
+
+        {hasAggregateFields && (
+          <Segment>
+            <List.Description>
+              <div style={{ marginBottom: 8 }}>
+                <Header as="h5">
+                  <Icon name="chart bar" size="small" />
+                  {formatMessage({
+                    id: "queryables.group_by.form.aggregate_fields",
+                  })}
+                </Header>
+              </div>
+              <div>
+                {aggregateFields.map((field, idx) => (
+                  <ExpressionViewer
+                    key={idx}
+                    expression={field.expression}
+                    alias={field.alias}
+                  />
+                ))}
+              </div>
+            </List.Description>
+          </Segment>
+        )}
+      </List.Content>
+    </List.Item>
+  );
+}

package/src/components/dataViews/summary/Join.js

@@ -0,0 +1,60 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import { List, Icon, Label } from "semantic-ui-react";
+import { getJoinInfo } from "../queryableSummaryHelpers";
+import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+import JoinTypeIcon from "../queryableProperties/JoinTypeIcon";
+import { getColorById } from "../queryableFunctions";
+import "@truedat/qx/styles/Expression.less";
+
+export default function Join({ queryable }) {
+  const { formatMessage } = useIntl();
+  const joinResource = getJoinInfo(queryable);
+  const color = getColorById(queryable.id);
+
+  return (
+    <List.Item>
+      <List.Header style={{ marginBottom: 4 }}>
+        <Icon name="linkify" />
+        {formatMessage({ id: "dataViews.form.queryable.join" })}
+      </List.Header>
+      {joinResource && (
+        <List.Content>
+          <List.Description className="description-flex-wrap text-break-word">
+            <div style={{ display: "flex", rowGap: 5, flexWrap: "wrap" }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <JoinTypeIcon type={joinResource.joinType} />
+                <Label horizontal>
+                  {formatMessage({
+                    id: `queryables.resource.selector.${joinResource.type}`,
+                  })}
+                </Label>
+              </div>
+              <Label color={color} className="text-break-word">
+                {joinResource.name}
+              </Label>
+            </div>
+            {joinResource.alias && (
+              <>
+                <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+                <Label color={color} className="text-break-word">
+                  {joinResource.alias}
+                </Label>
+              </>
+            )}
+            {joinResource.clauses && _.size(joinResource.clauses) > 0 && (
+              <div style={{ marginTop: 4, width: "100%" }}>
+                <ClauseViewer clause={joinResource.clauses} />
+              </div>
+            )}
+          </List.Description>
+        </List.Content>
+      )}
+    </List.Item>
+  );
+}

package/src/components/dataViews/summary/Select.js

@@ -0,0 +1,31 @@
+import { useIntl } from "react-intl";
+import { List, Icon } from "semantic-ui-react";
+import { getSelectFields } from "../queryableSummaryHelpers";
+import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
+
+export default function Select({ queryable }) {
+  const { formatMessage } = useIntl();
+  const selectFields = getSelectFields(queryable);
+
+  return (
+    <List.Item>
+      <List.Header style={{ marginBottom: 8 }}>
+        <Icon name="columns" />
+        {formatMessage({ id: "dataViews.form.queryable.select" })}
+      </List.Header>
+      <List.Content>
+        <List.List>
+          {selectFields.map((field, idx) => (
+            <List.Item key={idx}>
+              <ExpressionViewer
+                key={idx}
+                expression={field.expression}
+                alias={field.alias}
+              />
+            </List.Item>
+          ))}
+        </List.List>
+      </List.Content>
+    </List.Item>
+  );
+}

package/src/components/dataViews/summary/Where.js

@@ -0,0 +1,37 @@
+import _ from "lodash/fp";
+import { useIntl } from "react-intl";
+import { List, Icon, Label } from "semantic-ui-react";
+import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+import { getColorById } from "../queryableFunctions";
+
+export default function Where({
+  queryable: whereResource,
+  clauseType = "where",
+}) {
+  const { formatMessage } = useIntl();
+  const color = getColorById(whereResource.id);
+
+  return (
+    <List.Item>
+      <List.Header style={{ marginBottom: 4 }}>
+        <Icon name="filter" />
+        {formatMessage({ id: `dataViews.form.queryable.${clauseType}` })}
+      </List.Header>
+      <List.Content>
+        <List.Description>
+          {whereResource.alias && (
+            <div>
+              <b style={{ marginRight: 4 }}>as</b>
+              <Label color={color}>{whereResource.alias}</Label>
+            </div>
+          )}
+          {whereResource.properties?.clauses ? (
+            <ClauseViewer clause={whereResource.properties.clauses} />
+          ) : (
+            <>{formatMessage({ id: "dataViews.summary.where.empty" })}</>
+          )}
+        </List.Description>
+      </List.Content>
+    </List.Item>
+  );
+}

package/src/components/qualityControls/ControlPropertiesView.js

@@ -2,7 +2,11 @@ import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List, Label } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+import DataViewSummary from "../dataViews/DataViewSummary";
+import { useDataViewFetch } from "@truedat/qx/hooks/useDataViews";
+import { getColorById } from "../dataViews/queryableFunctions";
 
 export default function ControlPropertiesView({ qualityControl }) {
   const { control_properties, control_mode } = qualityControl;
@@ -38,71 +42,119 @@ export default function ControlPropertiesView({ qualityControl }) {
   );
 }
 
-const ControlPropertiesRatio = ({ controlProperties }) => (
-  <List>
-    <List.Item>
-      <List.Header>
-        <FormattedMessage id="quality_control.ratio.resource" />
-      </List.Header>
-      <List.Content>
-        {controlProperties.resource ? (
-          <List.Description>
-            <Label horizontal>
-              <FormattedMessage
-                id={`queryables.resource.selector.${controlProperties.resource?.type}`}
-              />
-            </Label>
-            <Label color="blue">
-              {_.prop("resource.embedded.name")(controlProperties)}
-            </Label>
-          </List.Description>
-        ) : (
-          <FormattedMessage id="quality_control.ratio.resource.empty" />
-        )}
-      </List.Content>
-    </List.Item>
-    <List.Item>
-      <List.Header>
-        <FormattedMessage id="quality_control.ratio.validation" />
-      </List.Header>
-      <List.Content>
-        {controlProperties.validation ? (
-          <List.Description>
-            <ClauseViewer clause={controlProperties.validation} />
-          </List.Description>
-        ) : (
-          <FormattedMessage id="quality_control.ratio.validation.empty" />
-        )}
-      </List.Content>
-    </List.Item>
-  </List>
-);
+const ControlPropertiesRatio = ({ controlProperties }) => {
+  const isDataViewResource = controlProperties.resource?.type === "data_view";
+  const dataViewId = isDataViewResource ? controlProperties.resource?.id : null;
+  const { dataView, loading: dataViewLoading } = useDataViewFetch(dataViewId);
 
-const ControlPropertiesCount = ({ controlProperties }) => (
-  <List>
-    <List.Item>
-      <List.Header>
-        <FormattedMessage id="quality_control.count.errors_resource" />
-      </List.Header>
-      <List.Content>
-        {controlProperties.errors_resource ? (
-          <List.Description>
-            <Label horizontal>
-              <FormattedMessage
-                id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
+  return (
+    <List>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.ratio.resource" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.resource ? (
+            <List.Description>
+              <Label horizontal>
+                <FormattedMessage
+                  id={`queryables.resource.selector.${controlProperties.resource?.type}`}
+                />
+              </Label>
+              <Label color={getColorById(controlProperties.resource?.id)}>
+                {_.prop("resource.embedded.name")(controlProperties)}
+              </Label>
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.ratio.resource.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+      {isDataViewResource && (
+        <List.Item>
+          <List.Header style={{ marginBottom: 8 }}>
+            <FormattedMessage id="quality_control.data_view_summary" />
+          </List.Header>
+          <List.Content>
+            {dataViewLoading ? (
+              <Loading />
+            ) : dataView ? (
+              <DataViewSummary dataView={dataView} />
+            ) : null}
+          </List.Content>
+        </List.Item>
+      )}
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.ratio.validation" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.validation ? (
+            <List.Description>
+              <ClauseViewer
+                clause={controlProperties.validation}
+                parentResource={controlProperties.resource}
               />
-            </Label>
-            <Label color="blue">
-              {_.prop("errors_resource.embedded.name")(controlProperties)}
-            </Label>
-          </List.Description>
-        ) : (
-          <FormattedMessage id="quality_control.count.errors_resource.empty" />
-        )}
-      </List.Content>
-    </List.Item>
-  </List>
-);
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.ratio.validation.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+    </List>
+  );
+};
+
+const ControlPropertiesCount = ({ controlProperties }) => {
+  const isDataViewResource =
+    controlProperties.errors_resource?.type === "data_view";
+  const dataViewId = isDataViewResource
+    ? controlProperties.errors_resource?.id
+    : null;
+  const { dataView, loading: dataViewLoading } = useDataViewFetch(dataViewId);
+
+  return (
+    <List>
+      <List.Item>
+        <List.Header>
+          <FormattedMessage id="quality_control.count.errors_resource" />
+        </List.Header>
+        <List.Content>
+          {controlProperties.errors_resource ? (
+            <List.Description>
+              <Label horizontal>
+                <FormattedMessage
+                  id={`queryables.resource.selector.${controlProperties.errors_resource?.type}`}
+                />
+              </Label>
+              <Label
+                color={getColorById(controlProperties.errors_resource?.id)}
+              >
+                {_.prop("errors_resource.embedded.name")(controlProperties)}
+              </Label>
+            </List.Description>
+          ) : (
+            <FormattedMessage id="quality_control.count.errors_resource.empty" />
+          )}
+        </List.Content>
+      </List.Item>
+      {isDataViewResource && (
+        <List.Item>
+          <List.Header style={{ marginBottom: 8 }}>
+            <FormattedMessage id="quality_control.data_view_summary" />
+          </List.Header>
+          <List.Content>
+            {dataViewLoading ? (
+              <Loading />
+            ) : dataView ? (
+              <DataViewSummary dataView={dataView} />
+            ) : null}
+          </List.Content>
+        </List.Item>
+      )}
+    </List>
+  );
+};
 
 ControlPropertiesView.propTypes = {
   qualityControl: PropTypes.object,

package/src/components/qualityControls/EditQualityControl.js

@@ -7,6 +7,7 @@ import {
   useQualityControl,
 } from "../../hooks/useQualityControls";
 import QualityControlEditor from "./QualityControlEditor";
+import QualityControlCrumbs from "./QualityControlCrumbs";
 
 export default function EditQualityControl() {
   const { id, version } = useParams();
@@ -33,8 +34,9 @@ export default function EditQualityControl() {
     });
   };
   return (
-    <Segment floated="left" loading={loading}>
-      <Container text>
+    <>
+      <QualityControlCrumbs qualityControl={qualityControl} action="Edit" />
+      <Container as={Segment} loading={loading} text>
         <Header as="h2">
           <Icon circular name="archive" />
           <Header.Content>
@@ -54,6 +56,6 @@ export default function EditQualityControl() {
           />
         ) : null}
       </Container>
-    </Segment>
+    </>
   );
 }

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -8,6 +8,7 @@ import {
   useQualityControl,
 } from "../../hooks/useQualityControls";
 import QualityControlEditor from "./QualityControlEditor";
+import QualityControlCrumbs from "./QualityControlCrumbs";
 
 export default function NewDraftQualityControl() {
   const { id, version } = useParams();
@@ -48,8 +49,12 @@ export default function NewDraftQualityControl() {
   };
 
   return (
-    <Segment floated="left" loading={loading}>
-      <Container text>
+    <>
+      <QualityControlCrumbs
+        qualityControl={qualityControl}
+        action="New Draft"
+      />
+      <Container as={Segment} text loading={loading}>
         <Header as="h2">
           <Icon circular name="archive" />
           <Header.Content>
@@ -70,6 +75,6 @@ export default function NewDraftQualityControl() {
           />
         ) : null}
       </Container>
-    </Segment>
+    </>
   );
 }

package/src/components/qualityControls/NewQualityControl.js

@@ -5,6 +5,7 @@ import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { useQualityControlCreate } from "../../hooks/useQualityControls";
 import QualityControlEditor from "./QualityControlEditor";
+import QualityControlCrumbs from "./QualityControlCrumbs";
 
 export const defaultQualityControl = {
   name: "",
@@ -42,8 +43,9 @@ export default function NewQualityControl() {
   };
 
   return (
-    <Segment floated="left" loading={isMutating}>
-      <Container text>
+    <>
+      <QualityControlCrumbs action="New" />
+      <Container as={Segment} text loading={isMutating}>
         <Header as="h2">
           <Icon circular name="archive" />
           <Header.Content>
@@ -62,6 +64,6 @@ export default function NewQualityControl() {
           isSubmitting={isMutating}
         />
       </Container>
-    </Segment>
+    </>
   );
 }

package/src/components/qualityControls/QualityControlCrumbs.js

@@ -1,21 +1,62 @@
+import { Fragment } from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
 import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
-import { QUALITY_CONTROLS } from "@truedat/core/routes";
+import {
+  QUALITY_CONTROLS,
+  QUALITY_CONTROLS_DRAFTS,
+  QUALITY_CONTROLS_DEPRECATED,
+  linkTo,
+} from "@truedat/core/routes";
+
+const QualityControlSection = ({ qualityControl, active }) => {
+  const to = linkTo.QUALITY_CONTROL({
+    id: qualityControl.id,
+    version: qualityControl.version,
+  });
+  const props = active ? { active } : { as: Link, to };
+  return (
+    <Breadcrumb.Section {...props}>{qualityControl.name}</Breadcrumb.Section>
+  );
+};
+
+QualityControlSection.propTypes = {
+  qualityControl: PropTypes.object.isRequired,
+  active: PropTypes.bool,
+};
+
+export default function QualityControlCrumbs({ qualityControl, action }) {
+  const listRoute =
+    qualityControl?.status === "draft"
+      ? QUALITY_CONTROLS_DRAFTS
+      : qualityControl?.status === "deprecated"
+        ? QUALITY_CONTROLS_DEPRECATED
+        : QUALITY_CONTROLS;
+
+  const sections = [
+    qualityControl && (
+      <QualityControlSection qualityControl={qualityControl} active={!action} />
+    ),
+    action && <Breadcrumb.Section active>{action}</Breadcrumb.Section>,
+  ].filter(Boolean);
 
-export default function QualityControlCrumbs({ qualityControl }) {
   return (
     <Breadcrumb>
-      <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS} active={false}>
+      <Breadcrumb.Section as={Link} to={listRoute}>
         <FormattedMessage id="quality_controls.header" />
       </Breadcrumb.Section>
-      <Breadcrumb.Divider icon="right angle" />
-      <Breadcrumb.Section active>{qualityControl.name}</Breadcrumb.Section>
+      {sections.map((section, index) => (
+        <Fragment key={index}>
+          <Breadcrumb.Divider icon="right angle" />
+          {section}
+        </Fragment>
+      ))}
     </Breadcrumb>
   );
 }
 
 QualityControlCrumbs.propTypes = {
   qualityControl: PropTypes.object,
+  action: PropTypes.string,
 };

package/src/components/qualityControls/QualityControlRoutes.js

@@ -1,4 +1,6 @@
 import { Route, Routes, useParams } from "react-router";
+import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+// This is only for information purposes, we are not using these routes in the code
 import {
   QUALITY_CONTROLS_DEPRECATED,
   QUALITY_CONTROLS_DRAFTS,
@@ -10,7 +12,7 @@ import {
   QUALITY_CONTROL_HISTORY,
   QUALITY_CONTROL_SCORES,
 } from "@truedat/core/routes";
-import { SearchContextProvider } from "@truedat/core/search/SearchContext";
+
 import {
   useQualityControlsSearch,
   useQualityControlsFilters,

package/src/components/qualityControls/QualityControls.js

@@ -11,8 +11,6 @@ import {
   Icon,
   Segment,
   Grid,
-  Dimmer,
-  Loader,
 } from "semantic-ui-react";
 import { linkTo, QUALITY_CONTROL_NEW } from "@truedat/core/routes";
 import useAuthorizedAction from "@truedat/core/hooks/useAuthorizedAction";
@@ -138,7 +136,7 @@ export const QualityControls = () => {
   };
 
   return (
-    <Segment>
+    <Segment loading={loading}>
       <Header as="h2">
         <Icon circular name="archive" />
         <Header.Content>
@@ -195,21 +193,14 @@ export const QualityControls = () => {
         executeQualityControlOn={executeQualityControlOn}
         qualityControlsToExecute={_.size(selectedQualityControls)}
       />
-      <Dimmer.Dimmable dimmed={loading}>
-        {loading ? (
-          <Dimmer active inverted>
-            <Loader />
-          </Dimmer>
-        ) : null}
-        <QualityControlsTable
-          addAll={addAll}
-          checkedAll={allChecked()}
-          checkRow={checkRow}
-          executeQualityControlOn={executeQualityControlOn}
-          isRowChecked={isRowChecked}
-        />
-        <QualityControlsPagination />
-      </Dimmer.Dimmable>
+      <QualityControlsTable
+        addAll={addAll}
+        checkedAll={allChecked()}
+        checkRow={checkRow}
+        executeQualityControlOn={executeQualityControlOn}
+        isRowChecked={isRowChecked}
+      />
+      <QualityControlsPagination />
     </Segment>
   );
 };

package/src/components/qualityControls/QualityControlsLabelResults.js

@@ -10,7 +10,7 @@ export const QualityControlsLabelResults = ({
   const { loading, count } = useSearchContext();
 
   return (
-    <>
+    <div style={{ marginBottom: 8 }}>
       <Label className="quality-controls-label-results">
         {loading ? (
           <FormattedMessage id="quality_controls.searching" />
@@ -34,7 +34,7 @@ export const QualityControlsLabelResults = ({
           />
         </Label>
       ) : null}
-    </>
+    </div>
   );
 };