@truedat/dd 4.44.4 → 4.45.1

package/src/components/__tests__/__snapshots__/StructureProperties.spec.js.snap

@@ -1,96 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureProperties /> matches the latest snapshot (custom structureProperties) 1`] = `
-<Fragment>
+<div>
   <p
-    className="item-description"
+    class="item-description"
   />
-  <Grid
-    className="structure-properties"
-    columns={5}
-    divided={true}
+  <div
+    class="ui divided five column grid structure-properties"
   >
-    <GridRow
-      key="0"
+    <div
+      class="row"
     >
-      <GridColumn
-        key="0"
-        width={3}
+      <div
+        class="three wide column"
       >
-        <Item>
-          <ItemContent>
-            <ItemHeader
-              as="h5"
+        <div
+          class="item"
+        >
+          <div
+            class="content"
+          >
+            <h5
+              class="header"
+            >
+              metadata.foo
+            </h5>
+            <div
+              class="description"
             >
-              <MemoizedFormattedMessage
-                id="structure.metadata.foo"
-              />
-            </ItemHeader>
-            <ItemDescription>
               bar
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-      </GridColumn>
-    </GridRow>
-  </Grid>
-</Fragment>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<StructureProperties /> matches the latest snapshot 1`] = `
-<Fragment>
+<div>
   <p
-    className="item-description"
+    class="item-description"
   >
     dd
   </p>
-  <Grid
-    className="structure-properties"
-    columns={5}
-    divided={true}
+  <div
+    class="ui divided five column grid structure-properties"
   >
-    <GridRow
-      key="0"
+    <div
+      class="row"
     >
-      <GridColumn
-        key="0"
-        width={3}
+      <div
+        class="three wide column"
       >
-        <Item>
-          <ItemContent>
-            <ItemHeader
-              as="h5"
+        <div
+          class="item"
+        >
+          <div
+            class="content"
+          >
+            <h5
+              class="header"
+            >
+              Domain
+            </h5>
+            <div
+              class="description"
             >
-              <MemoizedFormattedMessage
-                id="structure.domain"
-              />
-            </ItemHeader>
-            <ItemDescription>
-              <Connect(EditDomainPopup) />
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-      </GridColumn>
-      <GridColumn
-        key="1"
-        width={3}
+              
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="three wide column"
       >
-        <Item>
-          <ItemContent>
-            <ItemHeader
-              as="h5"
+        <div
+          class="item"
+        >
+          <div
+            class="content"
+          >
+            <h5
+              class="header"
+            >
+              Group
+            </h5>
+            <div
+              class="description"
             >
-              <MemoizedFormattedMessage
-                id="structure.group"
-              />
-            </ItemHeader>
-            <ItemDescription>
               gp
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-      </GridColumn>
-    </GridRow>
-  </Grid>
-</Fragment>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/StructureTabPane.spec.js.snap

@@ -55,7 +55,7 @@ exports[`<StructureTabPane /> matches the latest snapshot: notes 1`] = `
 
 exports[`<StructureTabPane /> matches the latest snapshot: profile 1`] = `
 <ErrorBoundary>
-  <Connect(StructureProfiling) />
+  <lazy />
 </ErrorBoundary>
 `;
 

package/src/components/__tests__/__snapshots__/StructureVersionListItem.spec.js.snap

@@ -1,68 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureVersionListItem /> matches the latest snapshot 1`] = `
-<ListItem
-  as={
-    Object {
-      "$$typeof": Symbol(react.forward_ref),
-      "displayName": "Link",
-      "propTypes": Object {
-        "innerRef": [Function],
-        "onClick": [Function],
-        "replace": [Function],
-        "target": [Function],
-        "to": [Function],
-      },
-      "render": [Function],
-    }
-  }
-  to="/structures/123/versions/42"
->
-  <ListIcon
-    name="history"
-    size="large"
-    verticalAlign="middle"
-  />
-  <ListContent>
-    <ListHeader>
-      <MemoizedFormattedMessage
-        id="structure.version.version"
-        values={
-          Object {
-            "version": 42,
-          }
-        }
-      />
-    </ListHeader>
-    <ListDescription>
-      <MemoizedFormattedMessage
-        id="structure.version.inserted_at"
-        values={
-          Object {
-            "when": <t
-              ago={false}
-              calendar={false}
-              date="2018-01-01T01:01:01.123456Z"
-              decimal={false}
-              element={null}
-              filter={[Function]}
-              format="YYYY-MM-DD HH:mm"
-              fromNow={false}
-              interval={60000}
-              local={false}
-              locale="es"
-              onChange={[Function]}
-              titleFormat=""
-              toNow={false}
-              unit={null}
-              unix={false}
-              utc={false}
-              withTitle={false}
-            />,
-          }
-        }
-      />
-    </ListDescription>
-  </ListContent>
-</ListItem>
+<div>
+  <a
+    class="item"
+    href="/structures/123/versions/42"
+    role="listitem"
+  >
+    <i
+      aria-hidden="true"
+      class="history large icon middle aligned"
+    />
+    <div
+      class="content"
+    >
+      <div
+        class="header"
+      >
+        Version 42
+      </div>
+      <div
+        class="description"
+      >
+        Imported 
+        <time
+          datetime="1514768461123"
+        >
+          2018-01-01 01:01
+        </time>
+      </div>
+    </div>
+  </a>
+</div>
 `;

package/src/components/index.js

@@ -8,8 +8,6 @@ import LineageDownloadButton from "./LineageDownloadButton";
 import LineageGroup from "./LineageGroup";
 import LineageLink from "./LineageLink";
 import LineageRoutes from "./LineageRoutes";
-import ProfilingGraph from "./ProfilingGraph";
-import ProfilingPatterns from "./ProfilingPatterns";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureEvents from "./StructureEvents";
 import StructureFieldRow from "./StructureFieldRow";
@@ -23,7 +21,6 @@ import StructureLoader from "./StructureLoader";
 import StructureNav from "./StructureNav";
 import StructureNotes from "./StructureNotes";
 import StructureNotesEdit from "./StructureNotesEdit";
-import StructureProfiling from "./StructureProfiling";
 import StructureProperties from "./StructureProperties";
 import StructureRow from "./StructureRow";
 import StructureSelectedFilters from "./StructureSelectedFilters";
@@ -64,8 +61,6 @@ export {
   LineageGroup,
   LineageLink,
   LineageRoutes,
-  ProfilingGraph,
-  ProfilingPatterns,
   StructureCrumbs,
   StructureEvents,
   StructureFieldRow,
@@ -79,7 +74,6 @@ export {
   StructureNav,
   StructureNotes,
   StructureNotesEdit,
-  StructureProfiling,
   StructureProperties,
   StructureMetadata,
   StructureRow,

package/src/selectors/getTabVisibility.js

@@ -42,10 +42,7 @@ const impactTabVisible = _.anyPass([_.path("structure.degree.out")]);
 const parentsTabVisible = _.conformsTo({ parentRelations: notEmpty });
 const childrenTabVisible = _.conformsTo({ childrenRelations: notEmpty });
 const eventsTabVisible = _.flow(_.prop("structureVersion"), _.isEmpty);
-const grantsTabVisible = _.flow(
-  _.path("structure.grants"),
-  _.negate(_.isEmpty)
-);
+const grantsTabVisible = _.flow(_.path("structure.grants"), notEmpty);
 
 export const getTabVisibility = (state) => ({
   fields: fieldsTabVisible(state),

package/src/components/ProfilingElements.js

@@ -1,89 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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 "../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);