@truedat/core 7.5.10 → 7.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "7.5.10",
+  "version": "7.5.12",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "module": "src/index.js",
@@ -46,43 +46,45 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.5.10",
+    "@truedat/test": "7.5.12",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.5",
-    "axios": "^1.8.4",
-    "graphql": "^16.10.0",
-    "immutable": "^4.1.0",
+    "@apollo/client": "^3.13.8",
+    "@xyflow/react": "^12.6.4",
+    "axios": "^1.9.0",
+    "elkjs": "^0.10.0",
+    "graphql": "^16.11.0",
+    "immutable": "^4.3.7",
     "is-hotkey": "^0.2.0",
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "path-to-regexp": "^8.2.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.2",
-    "react": "^19.0.0",
+    "query-string": "^7.1.3",
+    "react": "^19.1.0",
     "react-csv": "^2.2.2",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-hook-form": "^7.54.2",
-    "react-intl": "^7.1.10",
+    "react-hook-form": "^7.56.4",
+    "react-intl": "^7.1.11",
     "react-moment": "^1.1.3",
     "react-redux": "^9.2.0",
-    "react-router": "^7.4.0",
+    "react-router": "^7.6.0",
     "redux": "^5.0.1",
     "redux-saga": "^1.3.0",
     "redux-saga-routines": "^3.2.3",
     "reselect": "^5.1.1",
     "semantic-ui-calendar-react": "^0.15.3",
     "semantic-ui-react": "^3.0.0-beta.2",
-    "slate": "^0.47.3",
-    "slate-react": "^0.22.3",
+    "slate": "^0.47.9",
+    "slate-react": "^0.22.10",
     "swr": "^2.3.3"
   },
-  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
+  "gitHead": "1476061ceb9ed15e0bacec71e20d695a0cd57986"
 }

package/src/components/Graph.js

@@ -0,0 +1,101 @@
+import _ from "lodash/fp";
+import { useCallback, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  Position,
+  MarkerType,
+} from "@xyflow/react";
+import ELK from "elkjs/lib/elk.bundled.js";
+import "@xyflow/react/dist/style.css";
+
+const elk = new ELK();
+
+const LayoutFlow = ({ initialNodes, initialEdges, onNodeClick }) => {
+  const { getNodes, setNodes, getEdges, fitView } = useReactFlow();
+  const parsedNodes = initialNodes.map((node) => ({
+    ...node,
+    position: { x: 0, y: 0 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  }));
+  const parsedEdges = initialEdges.map((edge) => ({
+    ...edge,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 15,
+      height: 15,
+    },
+    style: {
+      strokeWidth: 2,
+    },
+  }));
+  const [nodes, , onNodesChange] = useNodesState(parsedNodes);
+  const [edges, , onEdgesChange] = useEdgesState(parsedEdges);
+
+  const getLayoutedElements = useCallback(() => {
+    const layoutOptions = {
+      "elk.algorithm": "layered",
+      "elk.direction": "RIGHT",
+      "elk.algorithm": "layered",
+      "elk.layered.spacing.nodeNodeBetweenLayers": 100,
+      "elk.spacing.nodeNode": 80,
+    };
+    const graph = {
+      id: "root",
+      layoutOptions: layoutOptions,
+      children: getNodes().map((node) => ({
+        ...node,
+        width: node.measured.width,
+        height: node.measured.height,
+      })),
+      edges: getEdges(),
+    };
+
+    elk.layout(graph).then(({ children }) => {
+      children.forEach((node) => {
+        node.position = { x: node.x, y: node.y };
+      });
+
+      setNodes(children);
+      fitView();
+    });
+  }, []);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onInit={getLayoutedElements}
+      fitView
+      onNodeClick={onNodeClick}
+      nodesConnectable={false}
+    ></ReactFlow>
+  );
+};
+
+export const Graph = ({ nodes, edges, onNodeClick }) => (
+  <div style={{ height: "640px" }}>
+    <ReactFlowProvider>
+      <LayoutFlow
+        initialNodes={nodes}
+        initialEdges={edges}
+        onNodeClick={onNodeClick}
+      />
+    </ReactFlowProvider>
+  </div>
+);
+
+Graph.propTypes = {
+  nodes: PropTypes.array,
+  edges: PropTypes.array,
+  onNodeClick: PropTypes.function,
+};
+
+export default Graph;

package/src/components/index.js

@@ -3,7 +3,6 @@ import AdminMenu from "./AdminMenu";
 import Alert from "./Alert";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
-import HierarchyNodeFinder from "./HierarchyNodeFinder";
 import CardGroupsAccordion from "./CardGroupsAccordion";
 import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
@@ -24,7 +23,9 @@ import FieldLabel from "./FieldLabel";
 import FiltersLoader from "./FiltersLoader";
 import GlossaryMenu from "./GlossaryMenu";
 import GrantMenu from "./GrantMenu";
+import Graph from "./Graph";
 import GroupActions from "./GroupActions";
+import HierarchyNodeFinder from "./HierarchyNodeFinder";
 import HierarchySelector from "./HierarchySelector";
 import HistoryBackButton from "./HistoryBackButton";
 import IngestMenu from "./IngestMenu";
@@ -61,7 +62,6 @@ export {
   Alert,
   Authorized,
   AvailableFilters,
-  HierarchyNodeFinder,
   CardGroupsAccordion,
   CatalogMenu,
   Comments,
@@ -82,7 +82,9 @@ export {
   FiltersLoader,
   GlossaryMenu,
   GrantMenu,
+  Graph,
   GroupActions,
+  HierarchyNodeFinder,
   HierarchySelector,
   HistoryBackButton,
   IngestMenu,