@truedat/lm 7.5.10 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "7.5.10",
+  "version": "7.5.11",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.5.10",
+    "@truedat/test": "7.5.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -83,5 +83,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
+  "gitHead": "cbb92d5206752fe2add4195432b0401da17a0f23"
 }

package/src/components/RelationGraph.js

@@ -2,42 +2,34 @@ import _ from "lodash/fp";
 import { useState } from "react";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
-import Graph from "react-graph-vis";
+import { Graph } from "@truedat/core/components";
 
 export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
   const { formatMessage } = useIntl();
-  const [network, setNetwork] = useState({});
 
   const nodes = _.flow(
     _.get("nodes"),
-    _.map(({ id, name: label }) => ({
+    _.map(({ id, name: label, resource_id }) => ({
       id,
-      label,
-
-      color:
+      data: { label },
+      resource_id,
+      style:
         currentId === id
           ? {
               background: "#ed5c17",
-              border: "black",
-            }
-          : null,
-
-      font:
-        currentId === id
-          ? {
               color: "white",
-              bold: true,
-              face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
+              fontWeight: "bold",
             }
-          : null,
+          : { cursor: "pointer" },
     }))
   )(relationsGraph);
 
   const edges = _.flow(
     _.get("edges"),
-    _.map(({ source_id: from, target_id: to, tags }) => ({
-      from,
-      to,
+    _.map(({ id: id, source_id: source, target_id: target, tags }) => ({
+      id,
+      source,
+      target,
       label: _.flow(
         _.map((tag) =>
           formatMessage({
@@ -50,92 +42,13 @@ export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
     }))
   )(relationsGraph);
 
-  const options = {
-    autoResize: true,
-    height: "99%",
-    width: "99%",
-    layout: {
-      hierarchical: {
-        direction: "UD",
-        sortMethod: "directed",
-        levelSeparation: 170,
-        edgeMinimization: false,
-      },
-    },
-    edges: {
-      color: "#000000",
-      smooth: true,
-      font: {
-        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
-      },
-    },
-    nodes: {
-      shape: "box",
-      margin: 10,
-      color: {
-        background: "white",
-        border: "grey",
-      },
-      widthConstraint: {
-        maximum: 200,
-        minimum: 100,
-      },
-      font: {
-        face: "Lato, Helvetica Neue, Arial, Helvetica, sans-serif",
-      },
-    },
-    physics: {
-      hierarchicalRepulsion: {
-        nodeDistance: 250,
-      },
-    },
-    interaction: {
-      hover: true,
-    },
+  const onClick = (_, { resource_id }) => {
+    if (navigate) navigate({ resource_id });
   };
 
-  const events = {
-    select: (event) => {
-      const { nodes, edges } = event;
-      if (!_.isEmpty(nodes)) {
-        const nodeId = _.head(nodes);
-        if (navigate)
-          navigate(
-            _.flow(
-              _.getOr([], "nodes"),
-              _.find({ id: nodeId })
-            )(relationsGraph),
-            _.isEmpty(edges)
-          );
-      }
-    },
-    hoverNode: (event) => {
-      const { node } = event;
-      if (node !== currentId) {
-        const style = _.path("canvas.frame.style")(network);
-        style.setProperty("cursor", "pointer");
-        setNetwork(network);
-      }
-    },
-    blurNode: () => {
-      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}
-        />
-      )}
-    </>
-  );
+  return !_.isEmpty(relationsGraph) ? (
+    <Graph nodes={nodes} edges={edges} onNodeClick={onClick} />
+  ) : null;
 };
 
 RelationGraph.propTypes = {

package/src/components/RelationGraphDepth.js

@@ -1,14 +1,10 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { Segment } from "semantic-ui-react";
-// import Slider from "react-rangeslider";
-// import "react-rangeslider/lib/index.css";
+import Slider from "react-rangeslider";
+import "react-rangeslider/lib/index.css";
 import { FormattedMessage } from "react-intl";
 
-const Slider = () => {
-  return <div>Slider</div>;
-};
-
 export const RelationGraphDepth = ({ onChange, depth, maxDepth }) => {
   return _.isUndefined(maxDepth) ? null : (
     <Segment className={`graph-depth ${maxDepth == 0 ? "disabled" : ""}`}>

package/src/components/RelationTagCards.js

@@ -13,7 +13,6 @@ export const RelationTagCards = ({
   relationTagsLoading,
 }) => {
   const { formatMessage } = useIntl();
-
   if (relationTagsLoading) return <div />;
 
   return (
@@ -75,7 +74,7 @@ export const RelationTagCards = ({
                         values={{ type: <i>{tag.value.type}</i> }}
                       />
                     }
-                    onConfirm={() => deleteRelationTag({ id: tag.id })}
+                    onConfirm={() => deleteRelationTag({ id: `${tag.id}` })}
                   />
                 </div>
               </Card.Content>

package/src/sagas/deleteRelation.js

@@ -10,7 +10,7 @@ export function* deleteRelationSaga({ payload }) {
   try {
     const { id } = payload;
     const meta = { id };
-    const url = toApiPath(payload);
+    const url = toApiPath({ id: `${id}` });
     yield put({ meta, ...deleteRelation.request() });
     yield call(apiJsonDelete, url, JSON_OPTS);
     yield put({ meta, ...deleteRelation.success(payload) });

package/src/sagas/updateRelationTag.js

@@ -11,7 +11,7 @@ export function* updateRelationTagSaga({ payload }) {
       payload.value
     );
 
-    const url = compile(API_TAG)(payload);
+    const url = compile(API_TAG)({ id: `${payload.id}` });
 
     const requestData = {
       tag: { value: relationTagValue },