@truedat/dd 4.42.2 → 4.42.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.42.5] 2022-04-22
+
+### Added
+
+- [TD-2026] Add metadata to `linage graph`
+
 ## [4.41.2] 2022-03-30
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.42.2",
+  "version": "4.42.5",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.42.0",
+    "@truedat/test": "4.42.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.42.2",
-    "@truedat/core": "4.42.2",
-    "@truedat/df": "4.42.2",
+    "@truedat/auth": "4.42.5",
+    "@truedat/core": "4.42.5",
+    "@truedat/df": "4.42.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "1ca6b75d5b0c80c8e2e931340d5efe4eeefb27de"
+  "gitHead": "77641b0e3a7555a6f6c4c0649ff7b6164292b4b0"
 }

package/src/components/LineageGraph.js

@@ -1,10 +1,19 @@
 import _ from "lodash/fp";
-import React, { useRef, useEffect, useReducer } from "react";
+import React, { useRef, useEffect, useReducer, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Dimmer, Loader } from "semantic-ui-react";
+import {
+  Dimmer,
+  Loader,
+  Segment,
+  Header,
+  Button,
+  Grid,
+  Divider,
+} from "semantic-ui-react";
 import svgPanZoom from "svg-pan-zoom";
 import { FormattedMessage, useIntl } from "react-intl";
+
 import {
   clearNode,
   selectNode,
@@ -64,6 +73,9 @@ export const LineageGraph = ({
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedNode, hover, svg } = state;
 
+  const [metadata, setMetadata] = useState(null);
+  const [selectedLink, selectLink] = useState(null);
+
   useEffect(() => {
     // Anything in here is fired on component mount.
     return () => cancelPoll();
@@ -84,78 +96,108 @@ export const LineageGraph = ({
   const { formatMessage } = useIntl();
 
   return (
-    <>
-      <Dimmer.Dimmable dimmed={loading} className="dl">
-        <Dimmer active={loading} inverted>
-          <Loader size="large">
-            <FormattedMessage
-              id="lineage.graph.loading"
-              defaultMessage={"Analyzing..."}
-            />
-            {loadingInfo?.data?.graph_hash && loadingInfo?.data?.status && (
-              <p>
-                {formatMessage({
-                  id:
-                    _.toLower(loadingInfo?.data?.status) === "already_started"
-                      ? "lineage.graph.loading.background.existing"
-                      : _.toLower(loadingInfo?.data?.status) ===
-                          "just_started" &&
-                        "lineage.graph.loading.background.launched",
-                })}
-              </p>
-            )}
-            {loadingInfo?.data?.graph_hash && (
-              <p>
-                Graph hash:{" "}
-                <span className="graph-hash">
-                  {loadingInfo?.data?.graph_hash}
-                </span>
-              </p>
-            )}
-            <p>
-              {loadingInfo?.data?.retry &&
-                formatMessage(
-                  { id: "lineage.graph.loading.polling" },
-                  { retry: loadingInfo?.data?.retry }
-                )}
-            </p>
-          </Loader>
-        </Dimmer>
-        <svg
-          width="100%"
-          height={height}
-          ref={ref}
-          onClick={() => dispatch(selectNode.trigger(null))}
+    <Grid>
+      <Grid.Row columns={2}>
+        <Grid.Column
+          width={_.isNull(metadata) ? 16 : 12}
+          style={_.isNull(metadata) ? {} : { "padding-right": 0 }}
         >
-          <LineageDefs />
-          <g className="svg-pan-zoom_viewport">
-            {_.map.convert({ cap: false })((g, i) => (
-              <LineageGroup
-                key={i}
-                active={hover === g.id}
-                onHover={onHover(g.id)}
-                onClick={onSelect(g)}
-                selected={selectedNode === g}
-                {...g}
-              />
-            ))(groups)}
-            {_.map.convert({ cap: false })((g, i) => (
-              <LineageResource
-                key={i}
-                active={hover === g.id}
-                onHover={onHover(g.id)}
-                onClick={onSelect(g)}
-                selected={selectedNode === g}
-                {...g}
-              />
-            ))(resources)}
-            {_.map.convert({ cap: false })((p, i) => (
-              <LineageLink key={i} active path={p.path} />
-            ))(paths)}
-          </g>
-        </svg>
-      </Dimmer.Dimmable>
-    </>
+          <Dimmer.Dimmable dimmed={loading} className="dl">
+            <Dimmer active={loading} inverted>
+              <Loader size="large">
+                <FormattedMessage
+                  id="lineage.graph.loading"
+                  defaultMessage={"Analyzing..."}
+                />
+                {loadingInfo?.data?.graph_hash && loadingInfo?.data?.status && (
+                  <p>
+                    {formatMessage({
+                      id:
+                        _.toLower(loadingInfo?.data?.status) ===
+                        "already_started"
+                          ? "lineage.graph.loading.background.existing"
+                          : _.toLower(loadingInfo?.data?.status) ===
+                              "just_started" &&
+                            "lineage.graph.loading.background.launched",
+                    })}
+                  </p>
+                )}
+                {loadingInfo?.data?.graph_hash && (
+                  <p>
+                    Graph hash:{" "}
+                    <span className="graph-hash">
+                      {loadingInfo?.data?.graph_hash}
+                    </span>
+                  </p>
+                )}
+                <p>
+                  {loadingInfo?.data?.retry &&
+                    formatMessage(
+                      { id: "lineage.graph.loading.polling" },
+                      { retry: loadingInfo?.data?.retry }
+                    )}
+                </p>
+              </Loader>
+            </Dimmer>
+            <svg
+              width="100%"
+              height={height}
+              ref={ref}
+              onClick={() => dispatch(selectNode.trigger(null))}
+              style={{ border: "1px solid #d4d4d5", borderRadius: "5px" }}
+            >
+              <LineageDefs />
+              <g className="svg-pan-zoom_viewport">
+                {_.map.convert({ cap: false })((g, i) => (
+                  <LineageGroup
+                    key={i}
+                    active={hover === g.id}
+                    onHover={onHover(g.id)}
+                    onClick={onSelect(g)}
+                    selected={selectedNode === g}
+                    {...g}
+                  />
+                ))(groups)}
+                {_.map.convert({ cap: false })((g, i) => (
+                  <LineageResource
+                    key={i}
+                    active={hover === g.id}
+                    onHover={onHover(g.id)}
+                    onClick={onSelect(g)}
+                    selected={selectedNode === g}
+                    {...g}
+                  />
+                ))(resources)}
+                {_.map.convert({ cap: false })((p, i) => (
+                  <LineageLink
+                    key={i}
+                    active
+                    selected={selectedLink === i}
+                    path={p.path}
+                    metadata={p.metadata}
+                    onClick={(metadata) => {
+                      setMetadata(metadata);
+                      selectLink(i);
+                    }}
+                  />
+                ))(paths)}
+              </g>
+            </svg>
+          </Dimmer.Dimmable>
+        </Grid.Column>
+        {_.isNull(metadata) ? null : (
+          <Grid.Column width={4} style={{ maxHeight: 300 }}>
+            <LinageMetadata
+              metadata={metadata}
+              onClose={() => {
+                setMetadata(null);
+                selectLink(null);
+              }}
+            />
+          </Grid.Column>
+        )}
+      </Grid.Row>
+    </Grid>
   );
 };
 
@@ -186,3 +228,35 @@ const mapStateToProps = (
 export default connect(mapStateToProps, { clearNode, cancelPoll })(
   LineageGraph
 );
+
+export const LinageMetadata = ({ metadata, onClose }) => {
+  const { formatMessage } = useIntl();
+  const content = _.flow(
+    _.toPairs,
+    _.map(([key, value]) => (
+      <div key={key}>
+        <b>{key}:</b>
+        <p>{value}</p>
+        <Divider fitted />
+      </div>
+    ))
+  )(metadata);
+
+  return (
+    <Segment secondary>
+      <Header>
+        {" "}
+        {formatMessage({ id: "lineage.graph.metadata.header" })}{" "}
+      </Header>
+      <div style={{ maxHeight: "400px", overflowY: "auto" }}>{content}</div>
+      <Button
+        onClick={onClose}
+        content={formatMessage({ id: "lineage.graph.metadata.close.button" })}
+      />
+    </Segment>
+  );
+};
+LinageMetadata.propTypes = {
+  metadata: PropTypes.object,
+  onClose: PropTypes.func,
+};

package/src/components/LineageLink.js

@@ -1,13 +1,31 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 
-export const LineageLink = ({ active = false, path }) => (
-  <path className={active ? "active link" : "link"} d={path} />
-);
+export const LineageLink = ({
+  active = false,
+  path,
+  metadata,
+  onClick,
+  selected,
+}) => {
+  return _.isUndefined(metadata) ? (
+    <path className={active ? "active link" : "link"} d={path} />
+  ) : (
+    <path
+      className={
+        active ? (selected ? "active link metadata" : "link metadata") : "link"
+      }
+      d={path}
+      onClick={() => onClick(metadata)}
+    />
+  );
+};
 
 LineageLink.propTypes = {
   active: PropTypes.bool,
-  path: PropTypes.string.isRequired
+  path: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
 };
 
 export default LineageLink;

package/src/messages/en.js

@@ -129,6 +129,8 @@ export default {
   "lineage.graph.status.just_started": "Just started",
   "lineage.graph.status.started": "Started",
   "lineage.graph.status.timed_out": "Timed out",
+  "lineage.graph.metadata.header": "Information",
+  "lineage.graph.metadata.close.button": "Close",
   "lineage.group.placeholder": "Select Top Level Structure",
   "lineage.resources.placeholder": "Select Child Structures",
   "lineage.subgroup.placeholder": "Select Child Structure",

package/src/messages/es.js

@@ -132,6 +132,8 @@ export default {
   "lineage.graph.status.just_started": "Acaba de iniciarse",
   "lineage.graph.status.started": "Iniciado",
   "lineage.graph.status.timed_out": "Tiempo de espera máximo sobrepasado",
+  "lineage.graph.metadata.header": "Información",
+  "lineage.graph.metadata.close.button": "Cerrar",
   "lineage.group.placeholder": "Seleccionar Estructura Padre",
   "lineage.resources.placeholder": "Seleccionar Estructuras Hijos",
   "lineage.subgroup.placeholder": "Seleccionar Estructura Hijo",