@truedat/lm 8.4.6 → 8.4.8

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@truedat/lm",
-  "version": "8.4.6",
+  "version": "8.4.8",
   "description": "Truedat Link Manager",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
   "module": "src/index.js",
   "files": [
     "src",
@@ -51,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.4.6",
+    "@truedat/test": "8.4.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -71,11 +74,9 @@
     "react-csv": "^2.2.2",
     "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
-    "react-graph-vis": "1.0.7",
     "react-hook-form": "^7.56.4",
     "react-intl": "^7.1.11",
     "react-moment": "^1.1.3",
-    "react-rangeslider": "^2.2.0",
     "react-redux": "^9.2.0",
     "react-router": "^7.6.0",
     "redux": "^5.0.1",
@@ -85,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "958ab0a57f628c19a7aee905a8f4ae624a3cdf59"
+  "gitHead": "7829e377f78c3cfc66e449f5dc31a8b03c0f5f00"
 }

package/src/components/RelationGraph.js

@@ -1,53 +1,97 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
 import { Graph } from "@truedat/core/components";
+import { EMPTY_EDGE_TYPE } from "../services/edgeColorPalette";
 
-export const RelationGraph = ({ navigate, currentId, relationsGraph }) => {
+export const RelationGraph = ({ navigate, currentId, relationsGraph, colorMap }) => {
   const { formatMessage } = useIntl();
 
-  const nodes = _.flow(
-    _.get("nodes"),
-    _.map(({ id, name: label, resource_id }) => ({
-      id,
-      data: { label },
-      resource_id,
-      style:
-        currentId === id
-          ? {
-              background: "#ed5c17",
-              color: "white",
-              fontWeight: "bold",
-            }
-          : { cursor: "pointer" },
-    }))
-  )(relationsGraph);
-
-  const edges = _.flow(
-    _.get("edges"),
-    _.map(({ id: id, source_id: source, target_id: target, tags }) => ({
-      id,
-      source,
-      target,
-      label: _.flow(
-        _.map((tag) =>
-          formatMessage({
-            id: `source.${_.prop("value.type")(tag)}`,
-            defaultMessage: _.prop("value.type")(tag),
-          })
-        ),
-        _.join("\n")
-      )(tags),
-    }))
-  )(relationsGraph);
+  const nodes = useMemo(
+    () =>
+      _.flow(
+        _.get("nodes"),
+        _.map(({ id, name: label, resource_id }) => ({
+          id,
+          type: "concept",
+          data: { label, isActive: currentId === id },
+          resource_id,
+        }))
+      )(relationsGraph),
+    [relationsGraph, currentId]
+  );
+
+  const edges = useMemo(
+    () =>
+      _.flow(
+        _.get("edges"),
+        _.map(({ id: id, source_id: source, target_id: target, tags }) => {
+          const primaryType = _.path([0, "value", "type"])(tags) || EMPTY_EDGE_TYPE;
+          const label = _.isEmpty(tags)
+            ? formatMessage({
+                id: `source.${EMPTY_EDGE_TYPE}`,
+                defaultMessage: "Empty",
+              })
+            : _.flow(
+                _.map((tag) =>
+                  formatMessage({
+                    id: `source.${_.prop("value.type")(tag)}`,
+                    defaultMessage: _.prop("value.type")(tag),
+                  })
+                ),
+                _.join("\n")
+              )(tags);
+          const color = primaryType && colorMap ? colorMap.get(primaryType) : undefined;
+
+          return {
+            id,
+            source,
+            target,
+            type: "colored",
+            data: { label, primaryType },
+            ...(color && {
+              style: { stroke: color, strokeWidth: 1.5 },
+              markerEnd: {
+                type: "arrowclosed",
+                width: 12,
+                height: 12,
+                color,
+              },
+            }),
+          };
+        })
+      )(relationsGraph),
+    [relationsGraph, formatMessage, colorMap]
+  );
+
+  const safeEdges = useMemo(() => {
+    const safeNodeIds = new Set(_.map("id", nodes));
+    return _.filter(
+      ({ source, target }) => safeNodeIds.has(source) && safeNodeIds.has(target),
+      edges
+    );
+  }, [nodes, edges]);
+
+  const graphData = useMemo(
+    () => ({
+      nodes,
+      edges: safeEdges,
+    }),
+    [nodes, safeEdges]
+  );
 
   const onClick = (_, { resource_id }) => {
     if (navigate) navigate({ resource_id });
   };
 
   return !_.isEmpty(relationsGraph) ? (
-    <Graph nodes={nodes} edges={edges} onNodeClick={onClick} />
+    <Graph
+      nodes={graphData.nodes}
+      edges={graphData.edges}
+      onNodeClick={onClick}
+      rootNodeId={currentId}
+    />
   ) : null;
 };
 
@@ -55,6 +99,7 @@ RelationGraph.propTypes = {
   navigate: PropTypes.func,
   currentId: PropTypes.string,
   relationsGraph: PropTypes.object,
+  colorMap: PropTypes.instanceOf(Map),
 };
 
 export default RelationGraph;

package/src/components/RelationGraphDepth.js

@@ -1,25 +1,71 @@
+import { useState, useRef, useEffect, useCallback } from "react";
 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 { FormattedMessage } from "react-intl";
+import "../styles/relationGraph.less";
 
 export const RelationGraphDepth = ({ onChange, depth, maxDepth }) => {
-  return _.isUndefined(maxDepth) ? null : (
-    <Segment className={`graph-depth ${maxDepth == 0 ? "disabled" : ""}`}>
-      <FormattedMessage id="relationGraph.depth" />
-      <div>{depth}</div>
-      <Slider
-        value={depth}
-        orientation="vertical"
-        reverse
-        onChange={onChange}
-        min={0}
-        max={maxDepth}
-        tooltip={false}
-      />
-    </Segment>
+  const [localDepth, setLocalDepth] = useState(depth);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef(null);
+  const latestDepthRef = useRef(depth);
+
+  useEffect(() => {
+    setLocalDepth(depth);
+    latestDepthRef.current = depth;
+  }, [depth]);
+
+  const updateDepthFromY = useCallback(
+    (clientY) => {
+      if (!sliderRef.current || !maxDepth) return;
+      const rect = sliderRef.current.getBoundingClientRect();
+      const relativeY = Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
+      const newDepth = Math.round(relativeY * maxDepth);
+      setLocalDepth(newDepth);
+      latestDepthRef.current = newDepth;
+    },
+    [maxDepth]
+  );
+
+  useEffect(() => {
+    const handleMouseMove = (e) => { if (isDragging) updateDepthFromY(e.clientY); };
+    const handleTouchMove = (e) => { if (isDragging) updateDepthFromY(e.touches[0].clientY); };
+    const handleEnd = () => {
+      setIsDragging(false);
+      if (onChange) onChange(latestDepthRef.current);
+    };
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleEnd);
+      window.addEventListener("touchmove", handleTouchMove);
+      window.addEventListener("touchend", handleEnd);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleEnd);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, updateDepthFromY, onChange]);
+
+  if (_.isUndefined(maxDepth)) return null;
+
+  const percentage = maxDepth > 0 ? (localDepth / maxDepth) * 100 : 0;
+  const label = `${localDepth}`;
+
+  return (
+    <div className={`graph-depth-v${maxDepth === 0 ? " disabled" : ""}`}>
+      <span className="graph-depth-v-label">{label}</span>
+      <div
+        ref={sliderRef}
+        onMouseDown={(e) => { setIsDragging(true); updateDepthFromY(e.clientY); }}
+        onTouchStart={(e) => { setIsDragging(true); updateDepthFromY(e.touches[0].clientY); }}
+        className="graph-depth-v-track"
+        style={{ "--td-depth-pct": `${percentage}%` }}
+      >
+        <div className="graph-depth-v-fill" />
+        <div className={`graph-depth-v-thumb${isDragging ? " dragging" : ""}`} />
+      </div>
+    </div>
   );
 };
 

package/src/services/__tests__/edgeColorPalette.spec.js

@@ -0,0 +1,67 @@
+import {
+  buildColorMap,
+  EDGE_COLOR_PALETTE,
+  EMPTY_EDGE_COLOR,
+  EMPTY_EDGE_TYPE,
+} from "../edgeColorPalette";
+
+describe("buildColorMap", () => {
+  it("returns the empty edge color for empty edges", () => {
+    expect(buildColorMap([])).toEqual(
+      new Map([[EMPTY_EDGE_TYPE, EMPTY_EDGE_COLOR]])
+    );
+  });
+
+  it("assigns the first palette color to the first distinct type", () => {
+    const edges = [{ tags: [{ value: { type: "Contains" } }] }];
+    const map = buildColorMap(edges);
+    expect(map.get("Contains")).toBe(EDGE_COLOR_PALETTE[0]);
+  });
+
+  it("assigns different colors to different types", () => {
+    const edges = [
+      { tags: [{ value: { type: "Contains" } }, { value: { type: "Uses" } }] },
+    ];
+    const map = buildColorMap(edges);
+    expect(map.get("Contains")).not.toBe(map.get("Uses"));
+  });
+
+  it("assigns the same color to the same type across multiple edges", () => {
+    const edges = [
+      { tags: [{ value: { type: "Contains" } }] },
+      { tags: [{ value: { type: "Contains" } }] },
+    ];
+    const map = buildColorMap(edges);
+    expect(map.size).toBe(2);
+    expect(map.get(EMPTY_EDGE_TYPE)).toBe(EMPTY_EDGE_COLOR);
+    expect(map.get("Contains")).toBe(EDGE_COLOR_PALETTE[0]);
+  });
+
+  it("wraps palette when there are more types than palette entries", () => {
+    const edges = EDGE_COLOR_PALETTE.map((_, i) => ({
+      tags: [{ value: { type: `type${i}` } }],
+    }));
+    // Add one more type beyond palette length
+    edges.push({ tags: [{ value: { type: "overflow" } }] });
+    const map = buildColorMap(edges);
+    expect(map.get("overflow")).toBe(EDGE_COLOR_PALETTE[0]);
+  });
+
+  it("skips tags with missing value.type", () => {
+    const edges = [
+      { tags: [{ value: {} }, { value: { type: "Contains" } }] },
+    ];
+    const map = buildColorMap(edges);
+    expect(map.size).toBe(2);
+    expect(map.get(EMPTY_EDGE_TYPE)).toBe(EMPTY_EDGE_COLOR);
+    expect(map.get("Contains")).toBe(EDGE_COLOR_PALETTE[0]);
+  });
+
+  it("handles edges with no tags array", () => {
+    const edges = [{ tags: undefined }, { tags: [] }];
+    expect(() => buildColorMap(edges)).not.toThrow();
+    expect(buildColorMap(edges)).toEqual(
+      new Map([[EMPTY_EDGE_TYPE, EMPTY_EDGE_COLOR]])
+    );
+  });
+});

package/src/services/edgeColorPalette.js

@@ -0,0 +1,27 @@
+export const EDGE_COLOR_PALETTE = [
+  "#4a90d9",
+  "#27ae60",
+  "#8e44ad",
+  "#c0392b",
+  "#16a085",
+  "#2c3e50",
+];
+
+export const EMPTY_EDGE_COLOR = "#5f6672";
+export const EMPTY_EDGE_TYPE = "_empty";
+
+export const buildColorMap = (edges = []) => {
+  const map = new Map([[EMPTY_EDGE_TYPE, EMPTY_EDGE_COLOR]]);
+  let paletteIndex = 0;
+
+  edges.forEach(({ tags = [] }) => {
+    (tags || []).forEach(({ value }) => {
+      const type = value?.type;
+      if (type && !map.has(type)) {
+        map.set(type, EDGE_COLOR_PALETTE[paletteIndex % EDGE_COLOR_PALETTE.length]);
+        paletteIndex += 1;
+      }
+    });
+  });
+  return map;
+};

package/src/styles/relationGraph.less

@@ -1,31 +1,177 @@
 .graph-depth {
-  position: absolute !important;
-  z-index: 1;
-  margin-right: 0px;
-  right: 14px;
-
-  div {
-    text-align: center;
-    font-weight: bold;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 2;
+  width: 170px;
+  margin: 0;
+  min-width: 170px;
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+
+  .graph-depth-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    margin-bottom: 4px;
+    line-height: 1;
+
+    .graph-depth-title {
+      font-weight: 600;
+    }
+
+    .graph-depth-value {
+      min-width: 12px;
+      font-weight: bold;
+      color: var(--td-graph-accent);
+    }
   }
 
   &.disabled {
     pointer-events: none;
-    opacity: 0.7;
+    opacity: 0.6;
+
+    .graph-depth-step,
+    .graph-depth-range {
+      accent-color: var(--td-graph-depth-disabled);
+    }
+
+    .graph-depth-step {
+      background-color: var(--td-graph-depth-disabled);
+      border-color: var(--td-graph-depth-disabled);
+    }
+  }
+
+  .graph-depth-slider {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .graph-depth-step {
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      border-radius: 50%;
+      border: 1px solid var(--td-graph-accent);
+      background: #fff;
+      color: var(--td-graph-accent);
+      font-size: 11px;
+      line-height: 14px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .graph-depth-step:disabled {
+      border-color: var(--td-graph-depth-disabled);
+      color: var(--td-graph-depth-disabled);
+      cursor: default;
+    }
 
-    .rangeslider-vertical .rangeslider__fill {
-      background-color: gray;
+    .graph-depth-range {
+      flex: 1;
+      height: 18px;
+      margin: 0;
+      accent-color: var(--td-graph-accent);
+      cursor: pointer;
     }
   }
 
-  .rangeslider-vertical {
-    .rangeslider__fill {
-      background-color: #ed5c17;
-      border: 1px solid gray;
+  .graph-depth-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 11px;
+    font-weight: 600;
+    margin-top: 2px;
+    color: #666;
+
+    span {
+      min-width: 12px;
+      text-align: center;
+      user-select: none;
     }
-  
-    .rangeslider__handle {
-      border-radius: 4px;
+  }
+}
+
+.relation-graph-wrapper {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.graph-depth-v-container {
+  position: absolute;
+  top: 12px;
+  right: 20px;
+  z-index: 2;
+}
+
+.graph-depth-v {
+  width: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px 2px;
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(4px);
+  border-radius: 12px;
+  user-select: none;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .graph-depth-v-label {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--td-graph-accent);
+    line-height: 1;
+    margin-top: -4px;
+    margin-bottom: 8px;
+  }
+
+  .graph-depth-v-track {
+    position: relative;
+    width: 4px;
+    height: 88px;
+    background: var(--td-graph-depth-inactive);
+    border-radius: 2px;
+    cursor: pointer;
+
+    .graph-depth-v-fill {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: var(--td-depth-pct, 0%);
+      background: var(--td-graph-accent);
+      border-radius: 2px;
+      transition: height 0.2s ease-out;
+    }
+
+    .graph-depth-v-thumb {
+      position: absolute;
+      left: 50%;
+      bottom: calc(var(--td-depth-pct, 0%) - 7px);
+      transform: translateX(-50%);
+      width: 14px;
+      height: 14px;
+      background: #ffffff;
+      border: 2px solid var(--td-graph-accent);
+      border-radius: 50%;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+      cursor: grab;
+      transition: bottom 0.1s ease-out, transform 0.1s ease-out;
+
+      &.dragging {
+        transform: translateX(-50%) scale(1.2);
+        cursor: grabbing;
+      }
     }
   }
-}
+}