@truedat/lm 4.41.5 → 4.42.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.42.0] 2022-04-05
+
+### Added
+
+- [TD-4513] Limit related concepts graph depth
+
 ## [4.40.5] 2022-03-15
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "4.41.5",
+  "version": "4.42.3",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -33,12 +33,13 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.41.5",
+    "@truedat/test": "4.42.0",
     "babel-jest": "^27.0.6",
     "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",
+    "canvas": "^2.9.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
@@ -83,7 +84,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.41.5",
+    "@truedat/core": "4.42.3",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
     "react-graph-vis": "1.0.5",
@@ -100,5 +101,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "a4436b1f8d9fcf01424b44e6a7fc26ad1159a45c"
+  "gitHead": "5adf3b4e2996ade1df6c42dcacec8cf74807db3e"
 }

package/src/components/RelationGraph.js

@@ -1,15 +1,27 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
 import Graph from "react-graph-vis";
+import "../styles/relationGraph.less";
+import { dfsMaxDepth, dfs, getEdges } from "../services/relationGraphTraversal";
+import RelationGraphDepth from "./RelationGraphDepth";
 
-export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
+export const RelationGraph = ({
+  navigate,
+  currentId,
+  relationsGraph,
+  initialDepth,
+}) => {
   const { formatMessage } = useIntl();
   const [network, setNetwork] = useState({});
+  const [depth, setDepth] = useState(initialDepth || Infinity);
+  const [maxDepth, setMaxDepth] = useState();
+  const [limitedRelationsGraph, setLimitedRelationsGraph] = useState();
+  const [start, setStart] = useState();
 
-  const nodes = _.flow(
+  const getVisNodes = _.flow(
     _.get("nodes"),
     _.map(({ id, name: label }) => ({
       id,
@@ -19,7 +31,7 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
         currentId === id
           ? {
               background: "#ed5c17",
-              border: "black"
+              border: "black",
             }
           : null,
 
@@ -28,28 +40,57 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
           ? {
               color: "white",
               bold: true,
-              face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif"
+              face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
             }
-          : null
+          : null,
     }))
-  )(relationsGraph);
+  );
 
-  const edges = _.flow(
+  const getVisEdges = _.flow(
     _.get("edges"),
     _.map(({ source_id: from, target_id: to, tags }) => ({
       from,
       to,
       label: _.flow(
-        _.map(tag =>
+        _.map((tag) =>
           formatMessage({
             id: `source.${_.prop("value.type")(tag)}`,
-            defaultMessage: _.prop("value.type")(tag)
+            defaultMessage: _.prop("value.type")(tag),
           })
         ),
         _.join("\n")
-      )(tags)
+      )(tags),
     }))
-  )(relationsGraph);
+  );
+
+  useEffect(() => {
+    if (!_.isEmpty(relationsGraph)) {
+      const start = _.flow(
+        _.getOr([], "nodes"),
+        _.find({ id: currentId })
+      )(relationsGraph);
+
+      const useEffectMaxDepth = dfsMaxDepth(relationsGraph, start, {}, 0);
+
+      setStart(start);
+      setMaxDepth(useEffectMaxDepth);
+      if (depth === Infinity) {
+        setDepth(useEffectMaxDepth);
+      }
+    }
+  }, [relationsGraph]);
+
+  useEffect(() => {
+    if (!_.isEmpty(relationsGraph) && !_.isEmpty(start) && depth !== Infinity) {
+      const nodes = dfs(relationsGraph, start, {}, depth);
+      depth < maxDepth
+        ? setLimitedRelationsGraph({
+            nodes,
+            edges: getEdges(relationsGraph, nodes),
+          })
+        : setLimitedRelationsGraph(relationsGraph);
+    }
+  }, [depth, start]);
 
   const options = {
     autoResize: true,
@@ -60,43 +101,43 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
         direction: "UD",
         sortMethod: "directed",
         levelSeparation: 170,
-        edgeMinimization: false
-      }
+        edgeMinimization: false,
+      },
     },
     edges: {
       color: "#000000",
       smooth: true,
       font: {
-        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif"
-      }
+        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
+      },
     },
     nodes: {
       shape: "box",
       margin: 10,
       color: {
         background: "white",
-        border: "grey"
+        border: "grey",
       },
       widthConstraint: {
         maximum: 200,
-        minimum: 100
+        minimum: 100,
       },
       font: {
-        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif"
-      }
+        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
+      },
     },
     physics: {
       hierarchicalRepulsion: {
-        nodeDistance: 250
-      }
+        nodeDistance: 250,
+      },
     },
     interaction: {
-      hover: true
-    }
+      hover: true,
+    },
   };
 
   const events = {
-    select: event => {
+    select: (event) => {
       const { nodes, edges } = event;
       if (!_.isEmpty(nodes)) {
         const nodeId = _.head(nodes);
@@ -110,7 +151,7 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
           );
       }
     },
-    hoverNode: event => {
+    hoverNode: (event) => {
       const { node } = event;
       if (node !== currentId) {
         const style = _.path("canvas.frame.style")(network);
@@ -122,18 +163,30 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
       const style = _.path("canvas.frame.style")(network);
       style.setProperty("cursor", "default");
       setNetwork(network);
-    }
+    },
   };
   return (
     <>
-      {!_.isEmpty(relationsGraph) && (
-        <Graph
-          graph={{ nodes, edges }}
-          options={options}
-          events={events}
-          style={{ height: "640px" }}
-          getNetwork={setNetwork}
-        />
+      {!_.isEmpty(limitedRelationsGraph?.nodes) && (
+        <>
+          <RelationGraphDepth
+            onClick={(_e) => setDepth(maxDepth)}
+            onChange={(event) => setDepth(parseInt(event.target.value))}
+            depth={depth}
+            maxDepth={maxDepth}
+          />
+
+          <Graph
+            graph={{
+              nodes: getVisNodes(limitedRelationsGraph),
+              edges: getVisEdges(limitedRelationsGraph),
+            }}
+            options={options}
+            events={events}
+            style={{ height: "640px" }}
+            getNetwork={setNetwork}
+          />
+        </>
       )}
     </>
   );
@@ -142,9 +195,16 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
 RelationGraph.propTypes = {
   navigate: PropTypes.func,
   currentId: PropTypes.string,
-  relationsGraph: PropTypes.object
+  relationsGraph: PropTypes.object,
+  initialDepth: PropTypes.number,
 };
 
-export const mapStateToProps = ({ relationsGraph }) => ({ relationsGraph });
+export const mapStateToProps = ({
+  relationsGraph,
+  conceptGraphInitialDepth,
+}) => ({
+  initialDepth: conceptGraphInitialDepth,
+  relationsGraph,
+});
 
 export default connect(mapStateToProps)(RelationGraph);

package/src/components/RelationGraphDepth.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Button } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+
+export const RelationGraphDepth = ({ onClick, onChange, depth, maxDepth }) => {
+  return (
+    <div className="graph">
+      <label htmlFor="depth">
+        <FormattedMessage id="relationGraph.depth" /> [1-{maxDepth}]
+      </label>
+      <input
+        id="depth"
+        aria-label="depth"
+        type="number"
+        min="1"
+        max={maxDepth}
+        value={depth === Infinity ? 0 : depth}
+        onChange={onChange}
+      ></input>
+      <Button disabled={depth === maxDepth} onClick={onClick}>
+        <FormattedMessage id="relationGraph.all" />
+      </Button>
+    </div>
+  );
+};
+
+RelationGraphDepth.propTypes = {
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  depth: PropTypes.number,
+  maxDepth: PropTypes.number,
+};
+
+export default RelationGraphDepth;

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

@@ -1,93 +1,264 @@
+import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
+import { mount } from "enzyme";
 import { intl } from "@truedat/test/intl-stub";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
 import { RelationGraph } from "../RelationGraph";
 
 jest.spyOn(React, "useContext").mockImplementation(() => intl);
 
+const renderOpts = {
+  messages: {
+    en: {
+      "relationGraph.all": "All",
+      "relationGraph.depth": "Depth",
+    },
+  },
+};
+
 describe("<RelationGraph />", () => {
+  beforeEach(() => {
+    // Avoid `attachTo: document.body` Warning
+    const div = document.createElement("div");
+    div.setAttribute("id", "container");
+    document.body.appendChild(div);
+  });
+
+  afterEach(() => {
+    const div = document.getElementById("container");
+    if (div) {
+      document.body.removeChild(div);
+    }
+  });
+
   const nodes = [
     {
       id: "business_concept:92",
-      label: "My Awesome Concept"
+      name: "My Awesome Concept",
     },
     {
       id: "business_concept:5",
-      label: "New Concept 4"
+      name: "New Concept 4",
     },
     {
       id: "business_concept:18",
-      label: "Float Concept"
-    }
+      name: "Float Concept",
+    },
   ];
 
   const edges = [
     {
-      from: "business_concept:92",
+      id: 1,
+      source_id: "business_concept:92",
+      target_id: "business_concept:5",
       tags: [
         {
           id: 3,
           value: {
             target_type: "business_concept",
-            type: "bc_padre"
-          }
-        }
+            type: "bc_padre",
+          },
+        },
       ],
-      to: "business_concept:5"
     },
     {
-      from: "business_concept:5",
+      id: 2,
+      source_id: "business_concept:5",
+      target_id: "business_concept:18",
       tags: [
         {
           id: 3,
           value: {
             target_type: "business_concept",
-            type: "bc_padre"
-          }
-        }
+            type: "bc_padre",
+          },
+        },
       ],
-      to: "business_concept:18"
     },
     {
-      from: "business_concept:18",
+      id: 3,
+      source_id: "business_concept:18",
+      target_id: "business_concept:5",
       tags: [
         {
           id: 3,
           value: {
             target_type: "business_concept",
-            type: "bc_padre"
-          }
-        }
+            type: "bc_padre",
+          },
+        },
       ],
-      to: "business_concept:5"
-    }
+    },
   ];
 
   const relationsGraph = {
     nodes,
-    edges
+    edges,
   };
 
   const defaultProps = {
-    currentId: "1",
+    currentId: "business_concept:92",
     navigate: jest.fn(),
-    relationsGraph: {}
+    relationsGraph: {},
   };
 
-  it("matches the latest snapshot", () => {
+  it("renders Graph on non-empty relationsGraph", () => {
     const props = { ...defaultProps, relationsGraph };
-    const wrapper = shallow(<RelationGraph {...props} />);
-    expect(wrapper).toMatchSnapshot();
+
+    const wrapper = mount(<RelationGraph {...props} />, {
+      attachTo: document.getElementById("container"),
+    });
+
+    const graphComponent = wrapper.find("Graph");
+    expect(graphComponent.length).toBe(1);
+    const limitedGraph = graphComponent.prop("graph");
+
+    expect(
+      _.isUndefined(
+        _.find({ id: nodes[0].id, label: nodes[0].name }, limitedGraph.nodes)
+      ) &&
+        _.isUndefined(
+          _.find({ id: nodes[1].id, label: nodes[1].name }, limitedGraph.nodes)
+        ) &&
+        _.isUndefined(
+          _.find({ id: nodes[2].id, label: nodes[2].name }, limitedGraph.nodes)
+        )
+    ).toBeFalsy();
+
+    expect(
+      _.isUndefined(
+        _.find(
+          {
+            from: edges[0].source_id,
+            to: edges[0].target_id,
+            label: `source.${edges[0].tags[0].value.type}`,
+          },
+          limitedGraph.edges
+        )
+      ) &&
+        _.isUndefined(
+          _.find(
+            {
+              from: edges[1].source_id,
+              to: edges[1].target_id,
+              label: `source.${edges[1].tags[1].value.type}`,
+            },
+            limitedGraph.edges
+          )
+        ) &&
+        _.isUndefined(
+          _.find(
+            {
+              from: edges[2].source_id,
+              to: edges[2].target_id,
+              label: `source.${edges[2].tags[2].value.type}`,
+            },
+            limitedGraph.edges
+          )
+        )
+    ).toBeFalsy();
   });
 
-  it("doest not render Graph  when relationsGraph is empty", () => {
-    const wrapper = shallow(<RelationGraph {...defaultProps} />);
+  it("does not render Graph on empty relationsGraph", () => {
+    const wrapper = mount(<RelationGraph {...defaultProps} />, {
+      attachTo: document.getElementById("container"),
+    });
     expect(wrapper.find("Graph").length).toBe(0);
   });
 
-  it("render Graph when relationsGraph is not empty", () => {
+  it("sets initial depth", () => {
+    const initialDepth = 1;
+    const props = { ...defaultProps, relationsGraph, initialDepth };
+    const wrapper = mount(<RelationGraph {...props} />, {
+      attachTo: document.getElementById("container"),
+    });
+    const input = wrapper.find("input");
+    expect(input.prop("value")).toBe(initialDepth);
+  });
+
+  it("no initial depth defaults to max graph depth", () => {
     const props = { ...defaultProps, relationsGraph };
-    const wrapper = shallow(<RelationGraph {...props} />);
-    expect(wrapper.find("Graph").length).toBe(1);
+    const wrapper = mount(<RelationGraph {...props} />, {
+      attachTo: document.getElementById("container"),
+    });
+    const input = wrapper.find("input");
+    expect(input.prop("value")).toBe(3);
+  });
+
+  it("button sets max depth", async () => {
+    const initialDepth = 1;
+    const props = { ...defaultProps, relationsGraph, initialDepth };
+    const { getByRole, getByLabelText } = render(
+      <RelationGraph {...props} />,
+      renderOpts
+    );
+
+    userEvent.click(await getByRole("button"));
+    await waitFor(() => {
+      expect(parseInt(getByLabelText("depth").value)).toBe(3);
+    });
+  });
+
+  it("limits graph", async () => {
+    const props = { ...defaultProps, relationsGraph };
+    const wrapper = await mount(<RelationGraph {...props} />, {
+      attachTo: document.getElementById("container"),
+    });
+    const input = wrapper.find("input");
+    input.simulate("change", { target: { value: 2 } });
+    const limitedGraph = wrapper.find("Graph").prop("graph");
+
+    expect(
+      _.isUndefined(
+        _.find({ id: nodes[0].id, label: nodes[0].name }, limitedGraph.nodes)
+      ) &&
+        _.isUndefined(
+          _.find({ id: nodes[1].id, label: nodes[1].name }, limitedGraph.nodes)
+        )
+    ).toBeFalsy();
+
+    expect(
+      _.isUndefined(
+        _.find({ id: nodes[2].id, label: nodes[2].name }, limitedGraph.nodes)
+      )
+    ).toBeTruthy();
+
+    expect(
+      _.isUndefined(
+        _.find(
+          {
+            from: edges[0].source_id,
+            to: edges[0].target_id,
+            label: `source.${edges[0].tags[0].value.type}`,
+          },
+          limitedGraph.edges
+        )
+      )
+    ).toBeFalsy();
+
+    expect(
+      _.isUndefined(
+        _.find(
+          {
+            from: edges[1].source_id,
+            to: edges[1].target_id,
+            label: `source.${edges[1].tags[0].value.type}`,
+          },
+          limitedGraph.edges
+        )
+      ) &&
+        _.isUndefined(
+          _.find(
+            {
+              from: edges[2].source_id,
+              to: edges[2].target_id,
+              label: `source.${edges[2].tags[0].value.type}`,
+            },
+            limitedGraph.edges
+          )
+        )
+    ).toBeTruthy();
   });
 });

package/src/messages/en.js

@@ -8,6 +8,8 @@ export default {
   "relation.actions.delete.confirmation.content":
     "The relation will be deleted. Are you sure?",
   "ingest.relatedTo.dataStructure": "Related to data structure",
+  "relationGraph.all": "All",
+  "relationGraph.depth": "Depth",
   "relationTags.header": "Relation Types",
   "relationTags.subheader": "In this section you can manage Relation Types",
   "relationTag.actions.delete.confirmation.header": "Delete Relation Type",

package/src/messages/es.js

@@ -4,12 +4,13 @@ export default {
   "links.actions.create": "Añadir vinculación",
   "relations.actions.create": "Añadir relación",
   "relations.empty": "No se han encontrado relaciones",
-
   "relations.relationType": "Tipos de relaciones",
   "relation.actions.delete.confirmation.header": "Borrar Relación",
   "relation.actions.delete.confirmation.content":
     "La relación será eliminada. ¿Estás seguro?",
   "ingest.relatedTo.dataStructure": "Relacionado con estructura",
+  "relationGraph.all": "Todos",
+  "relationGraph.depth": "Profundidad",
   "relationTags.header": "Tipos de Relaciones",
   "relationTags.subheader": "Aquí podrás gestionar los tipos de relaciones",
   "relationTag.actions.delete.confirmation.header": "Borrar Tipo de Relación",

package/src/services/relationGraphTraversal.js

@@ -0,0 +1,60 @@
+import _ from "lodash/fp";
+
+const getNeighbours = (relationsGraph, start) => {
+  return _.concat(
+    // Up
+    _.flow(
+      _.filter((edge) => edge.target_id === start.id),
+      _.flatMap((edge) => _.find({ id: edge.source_id }, relationsGraph.nodes))
+    )(relationsGraph.edges),
+    // Down
+    _.flow(
+      _.filter((edge) => edge.source_id === start.id),
+      _.flatMap((edge) => _.find({ id: edge.target_id }, relationsGraph.nodes))
+    )(relationsGraph.edges)
+  );
+};
+
+export const getEdges = (relationsGraph, nodes) => {
+  const nodeIds = Object.keys(nodes);
+  return _.filter(
+    (edge) =>
+      nodeIds.includes(edge.source_id) && nodeIds.includes(edge.target_id),
+    relationsGraph.edges
+  );
+};
+
+export const dfs = (relationsGraph, start, visited, maxDepth) => {
+  if (Object.keys(visited).includes(start.id) || maxDepth === 0) return {};
+
+  return _.reduce(
+    (acc, neighbour) => ({
+      ...acc,
+      ...dfs(
+        relationsGraph,
+        neighbour,
+        { ...visited, [start.id]: start },
+        maxDepth - 1
+      ),
+    }),
+    { [start.id]: start }
+  )(getNeighbours(relationsGraph, start));
+};
+
+export const dfsMaxDepth = (relationsGraph, start, visited, currDepth) => {
+  if (Object.keys(visited).includes(start.id)) return currDepth;
+
+  return _.reduce(
+    (currMax, neighbour) =>
+      Math.max(
+        currMax,
+        dfsMaxDepth(
+          relationsGraph,
+          neighbour,
+          { ...visited, [start.id]: start },
+          currDepth + 1
+        )
+      ),
+    0
+  )(getNeighbours(relationsGraph, start));
+};

package/src/styles/relationGraph.less

@@ -0,0 +1,34 @@
+
+.graph{
+
+  div&{
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    padding-right: 1rem;
+
+    input[type=number] {
+      vertical-align: top;
+      line-height: 34px;
+      width: 105px;
+      font-size: 20px;
+      text-align: center;
+    }
+
+    label {
+      position: absolute;
+      top: -20px;
+    }
+    .ui.button {
+      vertical-align: top;
+      width: 80px;
+      border-radius: 0 4px 4px 0;
+      border: 1px solid grey;
+      border-left: 0;
+      font-size: 14px;
+    }
+
+  }
+
+  
+}

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

@@ -1,107 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RelationGraph /> matches the latest snapshot 1`] = `
-<Fragment>
-  <Graph
-    events={
-      Object {
-        "blurNode": [Function],
-        "hoverNode": [Function],
-        "select": [Function],
-      }
-    }
-    getNetwork={[Function]}
-    graph={
-      Object {
-        "edges": Array [
-          Object {
-            "from": undefined,
-            "label": "source.bc_padre",
-            "to": undefined,
-          },
-          Object {
-            "from": undefined,
-            "label": "source.bc_padre",
-            "to": undefined,
-          },
-          Object {
-            "from": undefined,
-            "label": "source.bc_padre",
-            "to": undefined,
-          },
-        ],
-        "nodes": Array [
-          Object {
-            "color": null,
-            "font": null,
-            "id": "business_concept:92",
-            "label": undefined,
-          },
-          Object {
-            "color": null,
-            "font": null,
-            "id": "business_concept:5",
-            "label": undefined,
-          },
-          Object {
-            "color": null,
-            "font": null,
-            "id": "business_concept:18",
-            "label": undefined,
-          },
-        ],
-      }
-    }
-    options={
-      Object {
-        "autoResize": true,
-        "edges": Object {
-          "color": "#000000",
-          "font": Object {
-            "face": "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
-          },
-          "smooth": true,
-        },
-        "height": "99%",
-        "interaction": Object {
-          "hover": true,
-        },
-        "layout": Object {
-          "hierarchical": Object {
-            "direction": "UD",
-            "edgeMinimization": false,
-            "levelSeparation": 170,
-            "sortMethod": "directed",
-          },
-        },
-        "nodes": Object {
-          "color": Object {
-            "background": "white",
-            "border": "grey",
-          },
-          "font": Object {
-            "face": "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
-          },
-          "margin": 10,
-          "shape": "box",
-          "widthConstraint": Object {
-            "maximum": 200,
-            "minimum": 100,
-          },
-        },
-        "physics": Object {
-          "hierarchicalRepulsion": Object {
-            "nodeDistance": 250,
-          },
-        },
-        "width": "99%",
-      }
-    }
-    style={
-      Object {
-        "height": "640px",
-      }
-    }
-  />
-</Fragment>
-`;