@truedat/bg 4.42.3 → 4.42.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.42.3",
+  "version": "4.42.4",
   "description": "Truedat Web Business Glossary",
   "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.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -83,8 +83,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.42.3",
-    "@truedat/df": "4.42.3",
+    "@truedat/core": "4.42.4",
+    "@truedat/df": "4.42.4",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -104,5 +104,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "5adf3b4e2996ade1df6c42dcacec8cf74807db3e"
+  "gitHead": "3130f82b417611c76542fc29a6885b4bf85cdd30"
 }

package/src/concepts/relations/components/ConceptRelations.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Segment, Grid, Icon, Table } from "semantic-ui-react";
@@ -8,6 +8,11 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import { RelationGraph } from "@truedat/lm/components";
 import { linkTo } from "@truedat/core/routes";
+import {
+  selectMaxDepth,
+  selectLimitedGraph,
+} from "@truedat/lm/selectors/relationGraphTraversal";
+import { RelationGraphDepth } from "@truedat/lm/components";
 import { getConceptToConceptRelations } from "../selectors/getConceptRelations";
 
 import ConceptRelationActions from "./ConceptRelationActions";
@@ -30,7 +35,40 @@ export const ConceptRelationsHeaders = () => (
   </Table.Header>
 );
 
-export const ConceptRelations = ({ conceptRelations, concept }) => {
+export const ConceptRelations = ({
+  conceptRelations,
+  concept,
+  relationsGraph,
+  initialDepth,
+}) => {
+  const [depth, setDepth] = useState(initialDepth || Infinity);
+  const [maxDepth, setMaxDepth] = useState();
+  const [currentId, setCurrentId] = useState();
+  const [limitedRelationGraph, setLimitedRelationGraph] =
+    useState(relationsGraph);
+
+  useEffect(() => {
+    !_.isEmpty(concept) &&
+      setCurrentId(`business_concept:${concept.business_concept_id}`);
+  }, [concept]);
+
+  useEffect(() => {
+    if (!_.isEmpty(relationsGraph) && currentId) {
+      const useEffectMaxDepth = selectMaxDepth({ relationsGraph }, currentId);
+
+      setMaxDepth(useEffectMaxDepth);
+      if (depth === Infinity) {
+        setDepth(useEffectMaxDepth);
+      }
+    }
+  }, [relationsGraph, currentId]);
+
+  useEffect(() => {
+    setLimitedRelationGraph(
+      selectLimitedGraph({ relationsGraph }, currentId, depth)
+    );
+  }, [relationsGraph, currentId, depth]);
+
   const { formatMessage } = useIntl();
   const history = useHistory();
   const location = useLocation();
@@ -41,10 +79,10 @@ export const ConceptRelations = ({ conceptRelations, concept }) => {
     history.push(
       linkTo.CONCEPT_LINKS_CONCEPTS({
         business_concept_id: resource_id,
-        id: "current"
+        id: "current",
       }),
       {
-        show_graph: !emptyEdges
+        show_graph: !emptyEdges,
       }
     );
   };
@@ -61,7 +99,7 @@ export const ConceptRelations = ({ conceptRelations, concept }) => {
                     active={graphRender}
                     icon
                     data-tooltip={formatMessage({
-                      id: "relations.actions.maps.tooltip"
+                      id: "relations.actions.maps.tooltip",
                     })}
                     onClick={() => setGraphRender(true)}
                   >
@@ -71,7 +109,7 @@ export const ConceptRelations = ({ conceptRelations, concept }) => {
                     active={!graphRender}
                     icon
                     data-tooltip={formatMessage({
-                      id: "relations.actions.list.tooltip"
+                      id: "relations.actions.list.tooltip",
                     })}
                     onClick={() => setGraphRender(false)}
                   >
@@ -86,17 +124,26 @@ export const ConceptRelations = ({ conceptRelations, concept }) => {
         {conceptRelations && (
           <Grid.Row>
             <Grid.Column>
-              {graphRender ? (
-                <RelationGraph
-                  navigate={navigate}
-                  currentId={`business_concept:${concept.business_concept_id}`}
-                />
+              {graphRender && !_.isEmpty(currentId) ? (
+                <>
+                  <RelationGraphDepth
+                    onClick={(_e) => setDepth(maxDepth)}
+                    onChange={(newDepth) => setDepth(parseInt(newDepth))}
+                    depth={depth}
+                    maxDepth={maxDepth}
+                  />
+                  <RelationGraph
+                    navigate={navigate}
+                    currentId={currentId}
+                    relationsGraph={limitedRelationGraph}
+                  />
+                </>
               ) : (
                 <Table selectable>
                   <Table.Body>
-                    {conceptRelations.map(relation => (
+                    {conceptRelations.map((relation, index) => (
                       <ConceptRelationRow
-                        key={relation.id}
+                        key={`${relation.id}.${index}`}
                         relationContext={relation.context}
                         {...relation}
                       />
@@ -119,23 +166,27 @@ export const ConceptRelations = ({ conceptRelations, concept }) => {
 
 ConceptRelations.propTypes = {
   conceptRelations: PropTypes.array,
-  concept: PropTypes.object
+  concept: PropTypes.object,
+  relationsGraph: PropTypes.object,
+  initialDepth: PropTypes.number,
 };
 
-const sortByDirectionAndTag = concept => {
+const sortByDirectionAndTag = (concept) => {
   const concept_id = _.propOr("", "business_concept_id")(concept);
   return _.sortBy([
     _.negate(_.propEq("source_id", concept_id)),
-    _.pathOr("", "tags[0].value.type")
+    _.pathOr("", "tags[0].value.type"),
   ]);
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   conceptRelations: sortByDirectionAndTag(state.concept)(
     getConceptToConceptRelations(state)
   ),
   concept: state.concept,
-  relationsLoading: state.relationsLoading
+  relationsLoading: state.relationsLoading,
+  relationsGraph: state.relationsGraph,
+  initialDepth: state.conceptGraphInitialDepth,
 });
 
 export default connect(mapStateToProps)(ConceptRelations);

package/src/concepts/relations/components/ConceptRelationsSummary.js

@@ -27,16 +27,16 @@ const Tag = ({ tag }) => {
     <List.Item className="concept-summary">
       <Bold>{tag.i18n}</Bold>
       <List.List>
-        {tag.relations.map(relation =>
+        {tag.relations.map((relation, index) =>
           relation.relationSide === "source" ? (
             <Relation
-              key={`${relation.relationSide}.${relation.id}`}
+              key={`${relation.relationSide}.${relation.id}.${index}`}
               id={getLinkId(relation, relation.relationSide)}
               name={relation.context.target.name}
             />
           ) : (
             <Relation
-              key={`${relation.relationSide}.${relation.id}`}
+              key={`${relation.relationSide}.${relation.id}.${index}`}
               id={getLinkId(relation, relation.relationSide)}
               name={relation.context.source.name}
             />
@@ -57,12 +57,12 @@ const Relation = ({ id, name }) => (
 );
 
 Tag.propTypes = {
-  tag: PropTypes.object
+  tag: PropTypes.object,
 };
 
 Relation.propTypes = {
   id: PropTypes.string,
-  name: PropTypes.string
+  name: PropTypes.string,
 };
 
 export const ConceptRelationsSummary = ({ conceptRelations }) =>
@@ -72,7 +72,7 @@ export const ConceptRelationsSummary = ({ conceptRelations }) =>
         <FormattedMessage id="concepts.relations" />
       </Header>
       <List>
-        {conceptRelations.map(tag => {
+        {conceptRelations.map((tag) => {
           return <Tag key={`${tag.relationSide}.${tag.id}`} tag={tag} />;
         })}
       </List>
@@ -80,11 +80,11 @@ export const ConceptRelationsSummary = ({ conceptRelations }) =>
   );
 
 ConceptRelationsSummary.propTypes = {
-  conceptRelations: PropTypes.array
+  conceptRelations: PropTypes.array,
 };
 
 const mapStateToProps = (state, { intl: { formatMessage } }) => ({
-  conceptRelations: getConceptRelations(formatMessage)(state)
+  conceptRelations: getConceptRelations(formatMessage)(state),
 });
 
 export default compose(