@truedat/profile 4.45.0

package/README.md

@@ -0,0 +1,13 @@
+# Truedat Web Profile
+
+Data structure profile component
+
+## How To...
+
+### Install depencencies
+
+`yarn`
+
+### Run the tests
+
+`yarn test`

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@truedat/profile",
+  "version": "4.45.0",
+  "description": "Truedat Web Custom",
+  "sideEffects": false,
+  "jsnext:main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "author": "Bluetab Solutions",
+  "license": "GPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf yarn-error.log",
+    "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test": "TZ=UTC jest --coverage",
+    "test:watch": "TZ=UTC jest --watch",
+    "eslint": "eslint src/**",
+    "eslint:fix": "eslint --fix src/**"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@truedat/test": "4.45.0",
+    "babel-jest": "^28.1.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-react-intl": "^5.1.18",
+    "babel-plugin-transform-semantic-ui-react-imports": "^1.4.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "redux-saga-test-plan": "^4.0.4",
+    "rimraf": "^3.0.2",
+    "semantic-ui-react": "^2.0.3"
+  },
+  "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
+    "moduleDirectories": [
+      "<rootDir>/src",
+      "../../node_modules"
+    ],
+    "setupFilesAfterEnv": [
+      "@truedat/test/setup"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|png)$": "identity-obj-proxy",
+      "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
+      "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
+    },
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "<rootDir>/node_modules/"
+    ],
+    "transform": {
+      "\\.js$": [
+        "babel-jest",
+        {
+          "rootMode": "upward"
+        }
+      ]
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@truedat).*"
+    ]
+  },
+  "dependencies": {
+    "@apollo/client": "^3.6.4",
+    "@truedat/auth": "4.45.0",
+    "@truedat/core": "4.45.0",
+    "@truedat/df": "4.45.0",
+    "lodash": "^4.17.21",
+    "path-to-regexp": "^1.7.0",
+    "prop-types": "^15.8.1",
+    "react-hook-form": "^7.30.0",
+    "react-intl": "^5.20.10",
+    "react-moment": "^1.1.2",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "^5.2.0",
+    "react-vis": "^1.11.7",
+    "redux": "^4.1.1",
+    "redux-saga": "^1.1.3",
+    "redux-saga-routines": "^3.2.3",
+    "reselect": "^4.0.0",
+    "svg-pan-zoom": "^3.6.1"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.6 < 17",
+    "react-dom": ">= 16.8.6 < 17",
+    "semantic-ui-react": ">= 0.88.2 < 2.1"
+  },
+  "gitHead": "b8a49c6bae0bbde203dfb4763a5657fc398e3b7a"
+}

package/src/components/ProfilingElements.js

@@ -0,0 +1,89 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Button, Icon, Grid } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import ProfilingGraph from "./ProfilingGraph";
+import ProfilingPatterns from "./ProfilingPatterns";
+
+export const ProfilingElements = ({ profile }) => {
+  const { most_frequent, patterns } = profile || {};
+  const [elementActive, setElementActive] = useState("graph");
+  const titleElement =
+    elementActive === "graph"
+      ? "structure.field.graph.title"
+      : "structure.field.patterns.title";
+  return (
+    <>
+      {!_.isEmpty(most_frequent) && !_.isEmpty(patterns) && (
+        <>
+          <Grid>
+            <Grid.Column width={8}>
+              <p>
+                <FormattedMessage id={titleElement} />:
+              </p>
+            </Grid.Column>
+            <Grid.Column width={8} textAlign="right">
+              <Button.Group floated="right">
+                <Button
+                  active={elementActive === "graph"}
+                  icon
+                  onClick={() => setElementActive("graph")}
+                >
+                  <Icon name="chart line" />
+                </Button>
+                <Button
+                  active={elementActive === "patterns"}
+                  icon
+                  onClick={() => setElementActive("patterns")}
+                >
+                  <Icon name="list ul" />
+                </Button>
+              </Button.Group>
+            </Grid.Column>
+          </Grid>
+
+          {elementActive === "graph" && <ProfilingGraph />}
+          {elementActive === "patterns" && <ProfilingPatterns />}
+        </>
+      )}
+
+      {!_.isEmpty(most_frequent) && _.isEmpty(patterns) && (
+        <>
+          <Grid>
+            <Grid.Column width={16}>
+              <p>
+                <FormattedMessage id="structure.field.graph.title" />:
+              </p>
+            </Grid.Column>
+          </Grid>
+
+          <ProfilingGraph />
+        </>
+      )}
+
+      {_.isEmpty(most_frequent) && !_.isEmpty(patterns) && (
+        <>
+          <Grid>
+            <Grid.Column width={16}>
+              <p>
+                <FormattedMessage id="structure.field.patterns.title" />
+              </p>
+            </Grid.Column>
+          </Grid>
+
+          <ProfilingPatterns />
+        </>
+      )}
+    </>
+  );
+};
+
+ProfilingElements.propTypes = {
+  profile: PropTypes.object,
+};
+
+const mapStateToProps = ({ structureProfile: profile }) => ({ profile });
+
+export default connect(mapStateToProps)(ProfilingElements);

package/src/components/ProfilingGraph.js

@@ -0,0 +1,89 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Label } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { XYPlot, XAxis, YAxis, HorizontalBarSeries, Hint } from "react-vis";
+
+const getDistribution = _.flow(
+  _.pathOr("[]", "most_frequent"),
+  _.map(({ k, v }) => ({ x: v, y: k })),
+  _.orderBy("x", "desc"),
+  _.take(30),
+  _.reverse
+);
+
+const getMinMax = _.flow(
+  _.map("x"),
+  (d) => [_.min(d) - 1, _.max(d)],
+  _.defaultTo([-Infinity, Infinity])
+);
+
+const formatNumber = (num) =>
+  num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
+
+export const ProfilingGraph = ({ count, distribution }) => {
+  const [hintValue, setHintValue] = useState(null);
+  const data = _.map((d) => ({ color: d.y == hintValue?.y ? 0 : 1, ...d }))(
+    distribution
+  );
+  return (
+    <XYPlot
+      yType="ordinal"
+      xType="linear"
+      width={800}
+      height={400}
+      margin={{ left: 180 }}
+      xDomain={getMinMax(data)}
+      colorRange={["#ed5c17", "#002057"]}
+    >
+      <YAxis
+        tickFormat={_.truncate({ length: 30 })}
+        style={{ fontSize: "12px", width: "100px" }}
+      />
+      <XAxis style={{ fontSize: "12px" }} />
+      <HorizontalBarSeries
+        onValueMouseOver={setHintValue}
+        onValueMouseOut={() => setHintValue(null)}
+        data={data}
+      />
+      {hintValue ? (
+        <Hint
+          style={{ width: "500px", bottom: "190px" }}
+          align={{ horizontal: "right", vertical: "top" }}
+          value={hintValue}
+        >
+          <Label pointing="left" className="graph">
+            <div>
+              <div>
+                <FormattedMessage id="structure.field.graph.value" />
+                {hintValue.y}
+              </div>
+              <div>
+                <FormattedMessage id="structure.field.graph.count" />
+                {formatNumber(hintValue.x)}
+              </div>
+              <div>
+                <FormattedMessage id="structure.field.graph.percentage" />
+                {Math.floor((hintValue.x / count) * 100) + "%"}
+              </div>
+            </div>
+          </Label>
+        </Hint>
+      ) : null}
+    </XYPlot>
+  );
+};
+
+ProfilingGraph.propTypes = {
+  count: PropTypes.number,
+  distribution: PropTypes.arrayOf(PropTypes.object),
+};
+
+const mapStateToProps = ({ structureProfile }) => ({
+  count: structureProfile?.total_count,
+  distribution: getDistribution(structureProfile),
+});
+
+export default connect(mapStateToProps)(ProfilingGraph);

package/src/components/ProfilingPatterns.js

@@ -0,0 +1,57 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Table } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+export const ProfilingPatterns = ({ patterns, totalCount }) => {
+  const { formatNumber, formatMessage } = useIntl();
+  const dataPatterns = _.flow(
+    _.orderBy("v", "desc"),
+    _.map(({ k, v }) => ({
+      frecuency: k,
+      count: formatNumber(v),
+      percentage: parseFloat(((v / totalCount) * 100).toFixed(2)),
+    }))
+  )(patterns);
+
+  return !_.isEmpty(dataPatterns) ? (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>
+            {formatMessage({ id: "structure.field.patterns.frecuency" })}
+          </Table.HeaderCell>
+          <Table.HeaderCell>
+            {formatMessage({ id: "structure.field.patterns.count" })}
+          </Table.HeaderCell>
+          <Table.HeaderCell>
+            {formatMessage({ id: "structure.field.patterns.percentage" })}
+          </Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {dataPatterns.map((pattern, i) => (
+          <Table.Row key={i}>
+            <Table.Cell>{pattern.frecuency}</Table.Cell>
+            <Table.Cell>{pattern.count}</Table.Cell>
+            <Table.Cell>{`${pattern.percentage} %`}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  ) : null;
+};
+
+ProfilingPatterns.propTypes = {
+  patterns: PropTypes.array,
+  totalCount: PropTypes.number,
+};
+
+const mapStateToProps = ({ structureProfile }) => ({
+  patterns: structureProfile?.patterns,
+  totalCount: structureProfile?.total_count,
+});
+
+export default connect(mapStateToProps)(ProfilingPatterns);

package/src/components/StructureProfiling.js

@@ -0,0 +1,124 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Table } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { getSortedFields } from "@truedat/dd/selectors";
+import ProfilingElements from "./ProfilingElements";
+
+const calculatePercent = (value_count, total_count) =>
+  ((parseFloat(value_count) / parseFloat(total_count)) * 100).toFixed(2) + "%";
+
+const calculateUniquePercent = ({ unique_count, total_count }) =>
+  calculatePercent(unique_count, total_count);
+const calculateNullPercent = ({ null_count, total_count }) =>
+  calculatePercent(null_count, total_count);
+
+const calculateMode = (distribution) =>
+  _.isEmpty(distribution)
+    ? "-"
+    : _.flow(_.orderBy("v", "desc"), _.head, _.prop("k"))(distribution);
+
+export const FieldProfileRow = ({ profile, data_structure_id, name }) => {
+  const { unique_count, null_count, total_count, min, max, most_frequent } =
+    profile;
+  const uniquePercent =
+    !_.isNil(unique_count) && !_.isNil(total_count) && total_count > 0
+      ? calculateUniquePercent(profile)
+      : "-";
+  const nullPercent =
+    !_.isNil(null_count) && !_.isNil(total_count)
+      ? calculateNullPercent(profile)
+      : "-";
+
+  const maxLength = 50;
+  const truncFn = _.truncate({ length: maxLength });
+  const minValue = _.isNil(min) ? "-" : truncFn(min);
+  const maxValue = _.isNil(max) ? "-" : truncFn(max);
+  const minTitle = !_.isNil(min) && min.length > maxLength ? min : "";
+  const maxTitle = !_.isNil(max) && max.length > maxLength ? max : "";
+  const modeValue = _.isNil(most_frequent) ? "-" : calculateMode(most_frequent);
+
+  return (
+    <Table.Row>
+      <Table.Cell>
+        <Link
+          to={
+            _.isNil(most_frequent)
+              ? linkTo.STRUCTURE({ id: data_structure_id })
+              : linkTo.STRUCTURE_PROFILE({ id: data_structure_id })
+          }
+        >
+          {name}
+        </Link>
+      </Table.Cell>
+      <Table.Cell className="text-right" content={uniquePercent} />
+      <Table.Cell className="text-right" content={nullPercent} />
+      <Table.Cell>
+        <span title={minTitle}> {minValue} </span>
+      </Table.Cell>
+      <Table.Cell>
+        <span title={maxTitle}> {maxValue} </span>
+      </Table.Cell>
+      <Table.Cell content={modeValue} />
+    </Table.Row>
+  );
+};
+
+FieldProfileRow.propTypes = {
+  data_structure_id: PropTypes.number,
+  name: PropTypes.string,
+  profile: PropTypes.object,
+};
+
+export const StructureProfiling = ({ fields }) => {
+  const { formatMessage } = useIntl();
+  return _.isEmpty(fields) ? (
+    <ProfilingElements />
+  ) : (
+    <Table>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell
+            content={formatMessage({ id: "profiling.field.name" })}
+          />
+          <Table.HeaderCell
+            className="text-right"
+            content={formatMessage({ id: "profiling.field.unique" })}
+          />
+          <Table.HeaderCell
+            className="text-right"
+            content={formatMessage({ id: "profiling.field.null" })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({ id: "profiling.field.min" })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({ id: "profiling.field.max" })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({ id: "profiling.field.mode" })}
+          />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {fields.map((field, i) => (
+          <FieldProfileRow key={i} {...field} />
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+StructureProfiling.propTypes = {
+  fields: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  fields: _.filter(_.has("profile"))(getSortedFields(state)),
+});
+
+export default connect(mapStateToProps)(StructureProfiling);

package/src/components/__tests__/StructureProfiling.spec.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import StructureProfiling from "../StructureProfiling";
+
+const profile = {
+  unique_count: 5,
+  null_count: 2,
+  total_count: 10,
+  min: "33",
+  max: "40",
+  most_frequent: [
+    { k: "foo", v: 10 },
+    { k: "bar", v: 42 },
+  ],
+};
+
+describe("<StructureProfiling />", () => {
+  it("matches the latest snapshot (fields)", () => {
+    const structureFields = [
+      { data_structure_id: 123, name: "field1", profile },
+      { data_structure_id: 122, name: "field2", profile },
+    ];
+    const state = { structureFields };
+    const { container } = render(<StructureProfiling />, { state });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot (profile)", () => {
+    const state = { structureProfile: profile };
+    const { container } = render(<StructureProfiling />, { state });
+    expect(container).toMatchSnapshot();
+  });
+});