@truedat/core 8.8.4 → 8.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.8.4",
+  "version": "8.8.6",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.8.4",
+    "@truedat/test": "8.8.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -95,5 +95,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "eebd748d118e628959e9d935e9ba9baaebe0a8e1"
+  "gitHead": "608a876aa3b04799eb2e1bb5b5f071a81e2b509e"
 }

package/src/components/Graph.js

@@ -20,7 +20,7 @@ import {
 import ELK from "elkjs/lib/elk.bundled.js";
 import ConceptNode from "./graph/ConceptNode";
 import ColoredEdge from "./graph/ColoredEdge";
-import { getTargetSlotOffset } from "./graph/edgeLayout";
+
 import "@xyflow/react/dist/style.css";
 
 const nodeTypes = { concept: ConceptNode };
@@ -29,20 +29,13 @@ const edgeTypes = { colored: ColoredEdge };
 const elk = new ELK();
 const DEFAULT_NODE_WIDTH = 130;
 const DEFAULT_NODE_HEIGHT = 44;
-const TRANSLATE_EXTENT_PADDING = 400;
-const DEFAULT_GRAPH_HEIGHT = "640px";
+const DEFAULT_GRAPH_HEIGHT = "70vh";
 const EXPANDED_GRAPH_HEIGHT = "82vh";
-const DEFAULT_MIN_ZOOM = 0.1;
-const DEFAULT_MAX_ZOOM = 2;
-const FIT_VIEW_PADDING = 0.08;
-const DEFAULT_TRANSLATE_EXTENT = [
-  [-800, -600],
-  [800, 600],
-];
+const DEFAULT_MIN_ZOOM = 0.01;
+const DEFAULT_MAX_ZOOM = 0.8;
+const FIT_VIEW_PADDING = 0.2;
 const CONTROL_TOOLTIP_DELAY = 120;
 const DEFAULT_EDGE_STROKE = "var(--td-graph-edge-stroke, #b0b8c8)";
-const MIN_NODE_VERTICAL_GAP = 12;
-
 const getIncomingEdgeGroupKey = (edge, stroke) =>
   `${edge.target}::${stroke || DEFAULT_EDGE_STROKE}`;
 
@@ -158,124 +151,6 @@ const orderNodesByRelationGroup = (nodes = [], edges = [], rootNodeId) => {
   });
 };
 
-const getNodeHeight = (node) =>
-  node.height ?? node.measured?.height ?? DEFAULT_NODE_HEIGHT;
-
-const getNodeCenterY = (node) =>
-  (node.y ?? node.position?.y ?? 0) + getNodeHeight(node) / 2;
-
-const alignNodesToConnectionPoints = (nodes = [], edges = [], rootNodeId) => {
-  if (!rootNodeId) return nodes;
-
-  const levels = buildSignedNodeLevels(nodes, edges, rootNodeId);
-
-  if (!levels.size) return nodes;
-
-  const nodeById = new Map(nodes.map((node) => [node.id, node]));
-  const desiredCentersById = new Map();
-
-  nodes.forEach((node) => {
-    const rank = levels.get(node.id) || 0;
-
-    if (rank === 0) return;
-
-    const preferredEdges = edges.filter((edge) => {
-      if (rank < 0 && edge.source === node.id) {
-        const neighbourRank = levels.get(edge.target);
-        return (
-          neighbourRank !== undefined &&
-          Math.abs(neighbourRank) < Math.abs(rank)
-        );
-      }
-
-      if (rank > 0 && edge.target === node.id) {
-        const neighbourRank = levels.get(edge.source);
-        return (
-          neighbourRank !== undefined &&
-          Math.abs(neighbourRank) < Math.abs(rank)
-        );
-      }
-
-      return false;
-    });
-
-    if (preferredEdges.length !== 1) return;
-
-    const edge = preferredEdges[0];
-    const slotOffset = getTargetSlotOffset(
-      edge.data?.targetSlotIndex,
-      edge.data?.targetSlotCount,
-    );
-
-    if (rank < 0) {
-      const targetNode = nodeById.get(edge.target);
-
-      if (!targetNode) return;
-
-      desiredCentersById.set(node.id, getNodeCenterY(targetNode) + slotOffset);
-      return;
-    }
-
-    const sourceNode = nodeById.get(edge.source);
-
-    if (!sourceNode) return;
-
-    desiredCentersById.set(node.id, getNodeCenterY(sourceNode) - slotOffset);
-  });
-
-  const nodesByRank = new Map();
-
-  nodes.forEach((node) => {
-    const rank = levels.get(node.id) || 0;
-    const bucket = nodesByRank.get(rank) || [];
-
-    bucket.push(node);
-    nodesByRank.set(rank, bucket);
-  });
-
-  const alignedNodes = new Map();
-
-  nodesByRank.forEach((rankNodes) => {
-    const orderedNodes = [...rankNodes].sort((nodeA, nodeB) => {
-      const desiredA =
-        desiredCentersById.get(nodeA.id) ?? getNodeCenterY(nodeA);
-      const desiredB =
-        desiredCentersById.get(nodeB.id) ?? getNodeCenterY(nodeB);
-
-      if (desiredA !== desiredB) return desiredA - desiredB;
-
-      return (
-        (nodeA.y ?? nodeA.position?.y ?? 0) -
-        (nodeB.y ?? nodeB.position?.y ?? 0)
-      );
-    });
-
-    // eslint-disable-next-line fp/no-let
-    let previousBottom = Number.NEGATIVE_INFINITY;
-
-    orderedNodes.forEach((node) => {
-      const height = getNodeHeight(node);
-      const desiredCenter =
-        desiredCentersById.get(node.id) ?? getNodeCenterY(node);
-      const desiredTop = desiredCenter - height / 2;
-      const nextTop = Math.max(
-        desiredTop,
-        previousBottom + MIN_NODE_VERTICAL_GAP,
-      );
-
-      // eslint-disable-next-line fp/no-mutation
-      previousBottom = nextTop + height;
-      alignedNodes.set(node.id, {
-        ...node,
-        y: nextTop,
-        position: { ...(node.position || {}), x: node.x, y: nextTop },
-      });
-    });
-  });
-
-  return nodes.map((node) => alignedNodes.get(node.id) || node);
-};
-
 export const getMinZoomForDiagram = (
   nodes = [],
   viewportWidth,
@@ -317,44 +192,6 @@ GraphControlTooltip.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-const getTranslateExtent = (nodes = []) => {
-  if (!nodes.length) return DEFAULT_TRANSLATE_EXTENT;
-
-  const bounds = nodes.reduce(
-    (acc, node) => {
-      const width = node.measured?.width ?? node.width ?? DEFAULT_NODE_WIDTH;
-      const height =
-        node.measured?.height ?? node.height ?? DEFAULT_NODE_HEIGHT;
-      const x = node.position?.x ?? node.x ?? 0;
-      const y = node.position?.y ?? node.y ?? 0;
-
-      return {
-        minX: Math.min(acc.minX, x),
-        minY: Math.min(acc.minY, y),
-        maxX: Math.max(acc.maxX, x + width),
-        maxY: Math.max(acc.maxY, y + height),
-      };
-    },
-    {
-      minX: Number.POSITIVE_INFINITY,
-      minY: Number.POSITIVE_INFINITY,
-      maxX: Number.NEGATIVE_INFINITY,
-      maxY: Number.NEGATIVE_INFINITY,
-    },
-  );
-
-  return [
-    [
-      bounds.minX - TRANSLATE_EXTENT_PADDING,
-      bounds.minY - TRANSLATE_EXTENT_PADDING,
-    ],
-    [
-      bounds.maxX + TRANSLATE_EXTENT_PADDING,
-      bounds.maxY + TRANSLATE_EXTENT_PADDING,
-    ],
-  ];
-};
-
 const LayoutFlow = ({
   initialNodes,
   initialEdges,
@@ -445,7 +282,6 @@ const LayoutFlow = ({
   }, [initialEdges]);
   const [nodes, setNodes, onNodesChange] = useNodesState(parsedNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(parsedEdges);
-  const translateExtent = useMemo(() => getTranslateExtent(nodes), [nodes]);
   const layoutInput = useMemo(() => {
     const safeNodes = orderNodesByRelationGroup(
       parsedNodes.filter((node) => node && node.id),
@@ -509,8 +345,11 @@ const LayoutFlow = ({
         "elk.direction": "RIGHT",
         "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
         "elk.layered.crossingMinimization.forceNodeModelOrder": true,
-        "elk.layered.spacing.nodeNodeBetweenLayers": 60,
-        "elk.spacing.nodeNode": 40,
+        "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+        "elk.layered.spacing.nodeNodeBetweenLayers": 50,
+        "elk.spacing.nodeNode": 32,
+        "elk.spacing.edgeNodeBetweenLayers": 8,
+        "elk.spacing.edgeEdgeBetweenLayers": 8,
       };
       const graph = {
         id: "root",
@@ -532,14 +371,8 @@ const LayoutFlow = ({
             node.position = { x: node.x, y: node.y };
           });
 
-          const alignedChildren = alignNodesToConnectionPoints(
-            children,
-            edgesToLayout,
-            rootNodeId,
-          );
-
-          setNodes(alignedChildren);
-          scheduleFitView(alignedChildren, edgesToLayout);
+          setNodes(children);
+          scheduleFitView(children, edgesToLayout);
         })
         .catch(() => {
           if (currentLayoutRunId !== layoutRunId.current) return;
@@ -590,11 +423,10 @@ const LayoutFlow = ({
       onInit={onInit}
       onNodeClick={onNodeClick}
       nodesConnectable={false}
-      translateExtent={translateExtent}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       attributionPosition="bottom-left"
-      minZoom={minZoom}
+      minZoom={DEFAULT_MIN_ZOOM}
     >
       <Background
         variant={BackgroundVariant.Dots}

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

@@ -71,9 +71,9 @@ describe("<Graph />", () => {
       { x: 0, y: 0, width: 100, height: 50 },
       600,
       300,
-      0.1,
-      2,
-      0.08,
+      0.01,
+      0.8,
+      0.2,
     );
   });
 

package/src/components/graph/ConceptNode.less

@@ -28,7 +28,10 @@
 
   &:hover {
     border-color: var(--td-graph-node-hover-border, #2f3443);
-    box-shadow: var(--td-graph-node-hover-shadow, 0 6px 18px rgba(21, 26, 36, 0.14));
+    box-shadow: var(
+      --td-graph-node-hover-shadow,
+      0 6px 18px rgba(21, 26, 36, 0.14)
+    );
   }
 
   &--active {
@@ -36,7 +39,10 @@
     color: var(--td-graph-node-active-text, #ffffff);
     font-weight: 600;
     border-color: var(--td-graph-node-active-bg, #ed5c17);
-    box-shadow: var(--td-graph-node-active-shadow, 0 4px 14px rgba(237, 92, 23, 0.35));
+    box-shadow: var(
+      --td-graph-node-active-shadow,
+      0 4px 14px rgba(237, 92, 23, 0.35)
+    );
     cursor: default;
 
     .react-flow__handle {

package/src/styles/CardGroupsAccordion.less

@@ -1,3 +1,3 @@
 .CardGroupTitle {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }

package/src/styles/Markdown.less

@@ -45,7 +45,7 @@
     border-radius: 0 0 0.28571429rem 0.28571429rem;
     padding: 8px 10px;
 
-    >div {
+    > div {
       flex: 1;
       min-height: 0;
       display: flex;
@@ -74,9 +74,7 @@
     }
 
     .ui[class*="top attached"].menu {
-      margin-top: 0
+      margin-top: 0;
     }
   }
-
-
-}
+}

package/src/styles/TreeSelector.less

@@ -10,7 +10,9 @@
     border-radius: 4px;
     padding: 0.5em 2.1em 0.5em 1em;
     min-height: 2.71428571em;
-    transition: border-color 0.1s ease, box-shadow 0.1s ease;
+    transition:
+      border-color 0.1s ease,
+      box-shadow 0.1s ease;
 
     .dropdown.icon {
       position: absolute;

package/src/styles/filters.less

@@ -17,4 +17,4 @@ div.selectedFilters > a.resetFilters {
 }
 .ui.form .fields.date.filter .ui.input input[name="range"] {
   width: 16em;
-}
+}

package/src/styles/graph.less

@@ -1,5 +1,5 @@
 .td-graph-container {
-  height: var(--td-graph-container-height, 640px);
+  height: var(--td-graph-container-height, 760px);
 
   .react-flow {
     background: var(--td-graph-bg, #f7f8fa);