@truedat/bg 8.4.7 → 8.4.8

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@truedat/bg",
-  "version": "8.4.7",
+  "version": "8.4.8",
   "description": "Truedat Web Business Glossary",
-  "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.7",
+    "@truedat/test": "8.4.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -84,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "71fcf487f24eb0b3e5a6962547e0e946c59033ce"
+  "gitHead": "7829e377f78c3cfc66e449f5dc31a8b03c0f5f00"
 }

package/src/concepts/relations/components/ConceptRelations.js

@@ -1,10 +1,15 @@
 import _ from "lodash/fp";
-import { useEffect, useState, useRef } from "react";
+import debounce from "lodash/debounce";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
   Button,
-  Dropdown,
   Segment,
   Grid,
   Icon,
@@ -23,12 +28,15 @@ import {
   graphDistinctTags,
   EMPTY,
 } from "@truedat/lm/services/relationGraphTraversal";
+import { buildColorMap } from "@truedat/lm/services/edgeColorPalette";
 import { RelationGraphDepth } from "@truedat/lm/components";
 import { config } from "@truedat/core/truedatConfig";
 import { getConceptToConceptRelations } from "../selectors/getConceptRelations";
 
 import ConceptRelationActions from "./ConceptRelationActions";
 import ConceptRelationRow from "./ConceptRelationRow";
+import SliderWithFilter from "./SliderWithFilter";
+
 
 export const ConceptRelationsHeaders = () => (
   <Table.Header>
@@ -84,7 +92,7 @@ export const ConceptRelations = ({
     hasAppliedConfig.current = true;
   }, [conceptRelations, location]);
 
-  const navigateToConcept = ({ resource_id }, emptyEdges) => {
+  const navigateToConcept = ({ resource_id }) => {
     navigate(
       linkTo.CONCEPT_LINKS_CONCEPTS({
         business_concept_id: resource_id,
@@ -93,20 +101,31 @@ export const ConceptRelations = ({
     );
   };
 
-  const onTraversalTagsChange = (event, { value }) => {
-    setAllowedTags(value);
-  };
-
-  const [depth, setDepth] = useState(initialDepth);
-  const [maxDepth, setMaxDepth] = useState(0);
+  const [selectedDepth, setSelectedDepth] = useState(initialDepth);
   const [currentId, setCurrentId] = useState();
   const [tagOptions, setTagsOptions] = useState([]);
-  const [limitedRelationGraph, setLimitedRelationGraph] =
-    useState(relationsGraph);
   const [traversalTags, setAllowedTags] = useState([]);
+  const [localTraversalTags, setLocalTraversalTags] = useState([]);
+  const traversalTagsDebounceMs = Number.isFinite(
+    Number(config?.RelatedConceptsTagsDebounceMs)
+  )
+    ? Number(config?.RelatedConceptsTagsDebounceMs)
+    : 500;
+  const debouncedSetAllowedTags = useMemo(
+    () => debounce((value) => setAllowedTags(value), traversalTagsDebounceMs),
+    [traversalTagsDebounceMs]
+  );
+
+  useEffect(
+    () => () => {
+      debouncedSetAllowedTags.cancel();
+    },
+    [debouncedSetAllowedTags]
+  );
 
-  const nonDefaultOptions = (ids, depth, maxDepth) => {
-    return !_.isEmpty(ids) || depth !== maxDepth;
+  const onTraversalTagsChange = (_event, { value }) => {
+    setLocalTraversalTags(value);
+    debouncedSetAllowedTags(value);
   };
 
   useEffect(() => {
@@ -115,37 +134,46 @@ export const ConceptRelations = ({
   }, [concept]);
 
   useEffect(() => {
-    if (!_.isEmpty(relationsGraph) && currentId) {
-      const newMaxDepth = findMaxDepth(
-        relationsGraph,
-        currentId,
-        traversalTags
-      );
+    setSelectedDepth(initialDepth);
+  }, [currentId, initialDepth]);
 
-      setMaxDepth(newMaxDepth);
-      setDepth(
-        _.isEmpty(traversalTags)
-          ? Math.min(initialDepth, newMaxDepth)
-          : newMaxDepth
-      );
-    }
-  }, [relationsGraph, currentId, traversalTags, initialDepth]);
+  const maxDepth = useMemo(() => {
+    if (_.isEmpty(relationsGraph) || !currentId) return 0;
 
-  useEffect(() => {
-    /* just a little optimization to avoid generating a graph if no limitations
-     * (tags, depth) are set
-     */
-    if (nonDefaultOptions(traversalTags, depth, maxDepth)) {
-      const limitedGraph = pruneGraph(
-        relationsGraph,
-        currentId,
-        depth,
-        traversalTags
-      );
+    return findMaxDepth(relationsGraph, currentId, traversalTags);
+  }, [relationsGraph, currentId, traversalTags]);
+
+  const depth = useMemo(() => {
+    if (_.isEmpty(relationsGraph) || !currentId) return 0;
 
-      setLimitedRelationGraph(limitedGraph);
-    } else setLimitedRelationGraph(relationsGraph);
-  }, [relationsGraph, currentId, depth, traversalTags, maxDepth]);
+    return Number.isFinite(selectedDepth)
+      ? Math.min(selectedDepth, maxDepth)
+      : maxDepth;
+  }, [relationsGraph, currentId, selectedDepth, maxDepth]);
+
+  const limitedRelationGraph = useMemo(() => {
+    if (_.isEmpty(relationsGraph) || !currentId) return { nodes: [], edges: [] };
+
+    const result = pruneGraph(
+      relationsGraph,
+      currentId,
+      depth,
+      traversalTags
+    );
+
+    if (!result) return { nodes: [], edges: [] };
+
+    return {
+      ...result,
+      nodes: _.values(_.getOr({}, "nodes")(result)),
+      edges: _.getOr([], "edges")(result),
+    };
+  }, [relationsGraph, currentId, depth, traversalTags]);
+
+  const colorMap = useMemo(
+    () => buildColorMap(relationsGraph?.edges),
+    [relationsGraph]
+  );
 
   useEffect(() => {
     const tagsToOptions = (tags) =>
@@ -156,6 +184,7 @@ export const ConceptRelations = ({
             defaultMessage: value.type,
           }),
           value: id,
+          type: value.type,
         }),
         [
           {
@@ -170,33 +199,18 @@ export const ConceptRelations = ({
     _.flow(graphDistinctTags, tagsToOptions, setTagsOptions)(relationsGraph);
   }, [relationsGraph, formatMessage]);
 
+  const showGraph = graphRender && !_.isEmpty(currentId);
+  const stableGraphKey = useMemo(
+    () =>
+      `graph-${currentId}-${depth}-${_.sortBy(_.identity, traversalTags).join(",")}`,
+    [currentId, depth, traversalTags]
+  );
+
   return (
-    <Segment attached="bottom">
-      <div className="traversal-tags-container">
-        <div>
-          <b>
-            <label>
-              {formatMessage({
-                id: "relations.tags.label",
-              })}
-            </label>
-          </b>
-        </div>
-        <div>
-          <Dropdown
-            className="traversal-tags"
-            placeholder={formatMessage({
-              id: `relations.tags.placeholder`,
-            })}
-            multiple
-            search
-            selection
-            options={tagOptions}
-            onChange={onTraversalTagsChange}
-            clearable
-          />
-        </div>
-      </div>
+    <Segment
+      attached="bottom"
+      className={`concept-relations-segment${showGraph ? " relation-graph-segment" : ""}`}
+    >
       <div className="implementation-actions">
         {_.negate(_.isEmpty)(conceptRelations) ? (
           <Button.Group>
@@ -226,21 +240,28 @@ export const ConceptRelations = ({
       </div>
       {conceptRelations ? (
         <>
-          {graphRender && !_.isEmpty(currentId) ? (
-            <>
-              <RelationGraphDepth
-                onClick={(_e) => setDepth(maxDepth)}
-                onChange={(newDepth) => setDepth(parseInt(newDepth))}
-                depth={depth}
-                maxDepth={maxDepth}
-              />
+          {showGraph ? (
+            <div className="relation-graph-wrapper">
+              <SliderWithFilter
+                tagOptions={tagOptions}
+                traversalTags={localTraversalTags}
+                onTraversalTagsChange={onTraversalTagsChange}
+                colorMap={colorMap}
+              >
+                <RelationGraphDepth
+                  onChange={(newDepth) => setSelectedDepth(parseInt(newDepth, 10))}
+                  depth={depth}
+                  maxDepth={maxDepth}
+                />
+              </SliderWithFilter>
               <RelationGraph
-                key={`graph-${depth}-${_.size(limitedRelationGraph?.nodes)}`}
+                key={stableGraphKey}
                 navigate={navigateToConcept}
                 currentId={currentId}
                 relationsGraph={limitedRelationGraph}
+                colorMap={colorMap}
               />
-            </>
+            </div>
           ) : (
             <Table selectable>
               <Table.Body>

package/src/concepts/relations/components/SliderWithFilter.js

@@ -0,0 +1,198 @@
+import { useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+
+const FunnelIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#ff5c00"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+  </svg>
+);
+
+const XIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#999"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const SquareIcon = ({ color = "#333" }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+  </svg>
+);
+
+const SquareCheckIcon = ({ color = "#f87201" }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="#ffffff"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" fill={color} stroke={color} />
+    <polyline points="9 12 11 14 15 10" />
+  </svg>
+);
+
+const Badge = ({ count }) => (
+  <span className="slider-with-filter__badge">
+    <span className="slider-with-filter__badge-text">{count}</span>
+  </span>
+);
+
+const TagChip = ({ text, selected, onClick, color }) => (
+  <span
+    className="slider-with-filter__chip"
+    role="option"
+    aria-selected={selected}
+    onClick={onClick}
+    title={text}
+  >
+    {selected ? <SquareCheckIcon color={color} /> : <SquareIcon color={color} />}
+    <span
+      className="slider-with-filter__chip-text"
+      style={color ? { "--td-chip-color": color } : undefined}
+    >
+      {text}
+    </span>
+  </span>
+);
+
+const SliderWithFilter = ({
+  tagOptions = [],
+  traversalTags = [],
+  onTraversalTagsChange,
+  colorMap,
+  children,
+}) => {
+  const { formatMessage } = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hasApplied = traversalTags.length > 0;
+
+  const handleToggleOpen = useCallback(() => setIsOpen((o) => !o), []);
+
+  const handleClearFilters = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onTraversalTagsChange?.(null, { value: [] });
+    },
+    [onTraversalTagsChange]
+  );
+
+  const handleToggleTag = useCallback(
+    (tagValue) => {
+      const next = traversalTags.includes(tagValue)
+        ? traversalTags.filter((t) => t !== tagValue)
+        : [...traversalTags, tagValue];
+      onTraversalTagsChange?.(null, { value: next });
+    },
+    [traversalTags, onTraversalTagsChange]
+  );
+
+  return (
+    <div className="slider-with-filter__panel">
+      <div className="slider-with-filter__header-area">
+        <div
+          className="slider-with-filter__tab"
+          onClick={handleToggleOpen}
+          title={formatMessage({ id: "relations.tags.filter" })}
+        >
+          <span className="slider-with-filter__filtro-label">
+            {formatMessage({ id: "relations.tags.filter.label" })}
+          </span>
+          <span className="slider-with-filter__tab-actions">
+            <FunnelIcon />
+            {hasApplied ? <Badge count={traversalTags.length} /> : null}
+          </span>
+        </div>
+
+        {isOpen && tagOptions.length > 0 && (
+          <div className="slider-with-filter__chips-bar">
+            <div className="slider-with-filter__chips-list">
+              {tagOptions.map((opt) => (
+                <TagChip
+                  key={opt.value}
+                  text={opt.text}
+                  selected={traversalTags.includes(opt.value)}
+                  color={opt.type && colorMap ? colorMap.get(opt.type) : undefined}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleToggleTag(opt.value);
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+      </div>
+
+      <div className="slider-with-filter__slider-area">
+        {children}
+        <div className="slider-with-filter__prof-pill">
+          <span className="slider-with-filter__prof-label">
+            {formatMessage({ id: "relations.depth.label" })}
+          </span>
+        </div>
+      </div>
+
+      {hasApplied && (
+        <span
+          className="slider-with-filter__clear"
+          onClick={handleClearFilters}
+        >
+          <XIcon />
+          <span className="slider-with-filter__clear-label">
+            {formatMessage({ id: "relations.tags.clear" })}
+          </span>
+        </span>
+      )}
+    </div>
+  );
+};
+
+SliderWithFilter.propTypes = {
+  tagOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      value: PropTypes.any,
+    })
+  ),
+  traversalTags: PropTypes.array,
+  onTraversalTagsChange: PropTypes.func,
+  colorMap: PropTypes.instanceOf(Map),
+  children: PropTypes.node,
+};
+
+export default SliderWithFilter;

package/src/concepts/relations/components/__tests__/ConceptRelations.spec.js

@@ -1,9 +1,11 @@
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import { ConceptRelations } from "../ConceptRelations";
 import { setConfig } from "@truedat/core/truedatConfig";
 
 const mockUseLocation = jest.fn(() => ({ pathname: "/bar" }));
 const mockUseNavigate = jest.fn(() => jest.fn());
+let lastRelationGraphProps;
 
 jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
@@ -12,9 +14,30 @@ jest.mock("react-router", () => ({
 }));
 
 jest.mock("@truedat/lm/components", () => ({
-  RelationGraph: () => <div data-testid="relation-graph">RelationGraph</div>,
-  RelationGraphDepth: () => (
-    <div data-testid="relation-graph-depth">RelationGraphDepth</div>
+  RelationGraph: (props) => {
+    lastRelationGraphProps = props;
+    const nodeIds = (props.relationsGraph?.nodes || [])
+      .map(({ id }) => id)
+      .join(",");
+    const edgeIds = (props.relationsGraph?.edges || [])
+      .map(({ id }) => id)
+      .join(",");
+
+    return (
+      <div data-testid="relation-graph">
+        <span data-testid="relation-graph-node-ids">{nodeIds}</span>
+        <span data-testid="relation-graph-edge-ids">{edgeIds}</span>
+      </div>
+    );
+  },
+  RelationGraphDepth: ({ onChange, depth, maxDepth }) => (
+    <button
+      type="button"
+      data-testid="relation-graph-depth"
+      onClick={() => onChange(1)}
+    >
+      {`${depth}/${maxDepth}`}
+    </button>
   ),
 }));
 
@@ -22,6 +45,7 @@ describe("<ConceptRelations />", () => {
   beforeEach(() => {
     setConfig({});
     mockUseLocation.mockReturnValue({ pathname: "/bar" });
+    lastRelationGraphProps = undefined;
   });
 
   afterEach(() => {
@@ -52,6 +76,28 @@ describe("<ConceptRelations />", () => {
     visible: true,
   };
 
+  const graphWithDepthAndTags = {
+    nodes: [
+      { id: "business_concept:1", name: "Root" },
+      { id: "business_concept:2", name: "Second" },
+      { id: "business_concept:3", name: "Third" },
+    ],
+    edges: [
+      {
+        id: "root_to_second",
+        source_id: "business_concept:1",
+        target_id: "business_concept:2",
+        tags: [{ id: "foo", value: { type: "foo" } }],
+      },
+      {
+        id: "second_to_third",
+        source_id: "business_concept:2",
+        target_id: "business_concept:3",
+        tags: [{ id: "bar", value: { type: "bar" } }],
+      },
+    ],
+  };
+
   it("matches the latest snapshot", async () => {
     const props = {
       ...baseProps,
@@ -66,6 +112,42 @@ describe("<ConceptRelations />", () => {
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("matches snapshot with list view and relations", async () => {
+    setConfig({ RelatedConceptsActiveRenderMode: "list" });
+
+    const props = {
+      ...baseProps,
+      conceptRelations: [
+        {
+          id: 1,
+          source_id: 1,
+          target_id: 2,
+          tags: [{ id: 3, value: { type: "related_to" } }],
+          context: {
+            source: { id: 1, name: "Source Concept" },
+            target: { id: 2, name: "Target Concept" },
+          },
+        },
+        {
+          id: 2,
+          source_id: 1,
+          target_id: 3,
+          tags: [],
+          context: {
+            source: { id: 1, name: "Source Concept" },
+            target: { id: 3, name: "Another Target" },
+          },
+        },
+      ],
+    };
+
+    const rendered = render(<ConceptRelations {...props} />, {
+      state: baseState,
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
   it("activates graph button when RelatedConceptsActiveRenderMode is graph", async () => {
     setConfig({ RelatedConceptsActiveRenderMode: "graph" });
 
@@ -75,12 +157,18 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).toHaveClass("active");
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).not.toHaveClass("active");
+    expect(
+      rendered.container.querySelector(".ui.bottom.attached.segment"),
+    ).toHaveClass("concept-relations-segment");
     expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".ui.bottom.attached.segment"),
+    ).toHaveClass("relation-graph-segment");
   });
 
   it("activates list button when RelatedConceptsActiveRenderMode is list", async () => {
@@ -92,12 +180,21 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).toHaveClass("active");
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).not.toHaveClass("active");
     expect(rendered.queryByTestId("relation-graph")).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".ui.bottom.attached.segment"),
+    ).toHaveClass("concept-relations-segment");
+    expect(
+      rendered.container.querySelector(".ui.bottom.attached.segment"),
+    ).not.toHaveClass("relation-graph-segment");
+    expect(
+      rendered.container.querySelector(".slider-with-filter__panel"),
+    ).not.toBeInTheDocument();
   });
 
   it("shows graph view by default when RelatedConceptsActiveRenderMode is not set", async () => {
@@ -109,10 +206,10 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).toHaveClass("active");
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).not.toHaveClass("active");
     expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
   });
@@ -130,10 +227,10 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).toHaveClass("active");
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).not.toHaveClass("active");
     expect(rendered.queryByTestId("relation-graph")).not.toBeInTheDocument();
   });
@@ -151,10 +248,10 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).toHaveClass("active");
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).not.toHaveClass("active");
     expect(rendered.getByTestId("relation-graph")).toBeInTheDocument();
   });
@@ -173,14 +270,61 @@ describe("<ConceptRelations />", () => {
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="maps"]')
+      rendered.container.querySelector('button[data-tooltip*="maps"]'),
     ).not.toBeInTheDocument();
 
     rendered.rerender(<ConceptRelations {...baseProps} />);
     await waitForLoad(rendered);
 
     expect(
-      rendered.container.querySelector('button[data-tooltip*="list"]')
+      rendered.container.querySelector('button[data-tooltip*="list"]'),
     ).toHaveClass("active");
   });
+
+  it("keeps the selected depth when clearing relation filters", async () => {
+    setConfig({ RelatedConceptsTagsDebounceMs: 0 });
+
+    const rendered = render(
+      <ConceptRelations
+        {...baseProps}
+        relationsGraph={graphWithDepthAndTags}
+      />,
+      {
+        state: baseState,
+      },
+    );
+
+    await waitForLoad(rendered);
+
+    fireEvent.click(rendered.getByTestId("relation-graph-depth"));
+
+    await waitFor(() => {
+      expect(lastRelationGraphProps.relationsGraph.nodes).toHaveLength(2);
+      expect(lastRelationGraphProps.relationsGraph.edges).toHaveLength(1);
+    });
+
+    fireEvent.click(rendered.getByText("relations.tags.filter.label"));
+    fireEvent.click(rendered.getByText("foo"));
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    await waitFor(() => {
+      expect(lastRelationGraphProps.relationsGraph.nodes).toHaveLength(2);
+      expect(lastRelationGraphProps.relationsGraph.edges).toHaveLength(1);
+    });
+
+    fireEvent.click(rendered.getByText("relations.tags.clear"));
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    await waitFor(() => {
+      expect(lastRelationGraphProps.relationsGraph.nodes).toHaveLength(2);
+      expect(lastRelationGraphProps.relationsGraph.edges).toHaveLength(1);
+      expect(
+        lastRelationGraphProps.relationsGraph.nodes.map(({ id }) => id),
+      ).toEqual(["business_concept:1", "business_concept:2"]);
+    });
+  });
 });

package/src/concepts/relations/components/__tests__/SliderWithFilter.spec.js

@@ -0,0 +1,134 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import SliderWithFilter from "../SliderWithFilter";
+
+const tagOptions = [
+  { text: "Type A", value: "tag-a", type: "type_a" },
+  { text: "Type B", value: "tag-b", type: "type_b" },
+];
+
+const defaultProps = {
+  tagOptions,
+  traversalTags: [],
+  onTraversalTagsChange: jest.fn(),
+};
+
+describe("<SliderWithFilter />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders correctly", () => {
+    const { container } = render(<SliderWithFilter {...defaultProps} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders the filter button", () => {
+    render(<SliderWithFilter {...defaultProps} />);
+
+    expect(screen.getByText("relations.tags.filter.label")).toBeInTheDocument();
+  });
+
+  it("does not show badge when no filters are applied", () => {
+    render(<SliderWithFilter {...defaultProps} />);
+
+    expect(screen.queryByText("0")).not.toBeInTheDocument();
+  });
+
+  it("shows badge with count when filters are applied", () => {
+    render(
+      <SliderWithFilter {...defaultProps} traversalTags={["tag-a", "tag-b"]} />
+    );
+
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  it("does not show chips when closed", () => {
+    render(<SliderWithFilter {...defaultProps} />);
+
+    expect(screen.queryByText("Type A")).not.toBeInTheDocument();
+    expect(screen.queryByText("Type B")).not.toBeInTheDocument();
+  });
+
+  it("shows chips when filter button is clicked", () => {
+    render(<SliderWithFilter {...defaultProps} />);
+
+    fireEvent.click(screen.getByText("relations.tags.filter.label"));
+
+    expect(screen.getByText("Type A")).toBeInTheDocument();
+    expect(screen.getByText("Type B")).toBeInTheDocument();
+  });
+
+  it("calls onTraversalTagsChange with selected tag when chip is clicked", () => {
+    const onTraversalTagsChange = jest.fn();
+    render(
+      <SliderWithFilter
+        {...defaultProps}
+        onTraversalTagsChange={onTraversalTagsChange}
+      />
+    );
+
+    fireEvent.click(screen.getByText("relations.tags.filter.label"));
+    fireEvent.click(screen.getByText("Type A"));
+
+    expect(onTraversalTagsChange).toHaveBeenCalledWith(null, {
+      value: ["tag-a"],
+    });
+  });
+
+  it("calls onTraversalTagsChange removing tag when selected chip is clicked", () => {
+    const onTraversalTagsChange = jest.fn();
+    render(
+      <SliderWithFilter
+        {...defaultProps}
+        traversalTags={["tag-a"]}
+        onTraversalTagsChange={onTraversalTagsChange}
+      />
+    );
+
+    fireEvent.click(screen.getByText("relations.tags.filter.label"));
+    fireEvent.click(screen.getByText("Type A"));
+
+    expect(onTraversalTagsChange).toHaveBeenCalledWith(null, { value: [] });
+  });
+
+  it("shows clear button when filters are applied", () => {
+    render(
+      <SliderWithFilter {...defaultProps} traversalTags={["tag-a"]} />
+    );
+
+    expect(screen.getByText("relations.tags.clear")).toBeInTheDocument();
+  });
+
+  it("does not show clear button when no filters are applied", () => {
+    render(<SliderWithFilter {...defaultProps} />);
+
+    expect(screen.queryByText("relations.tags.clear")).not.toBeInTheDocument();
+  });
+
+  it("calls onTraversalTagsChange with empty array when clear button is clicked", () => {
+    const onTraversalTagsChange = jest.fn();
+    render(
+      <SliderWithFilter
+        {...defaultProps}
+        traversalTags={["tag-a"]}
+        onTraversalTagsChange={onTraversalTagsChange}
+      />
+    );
+
+    fireEvent.click(screen.getByText("relations.tags.clear"));
+
+    expect(onTraversalTagsChange).toHaveBeenCalledWith(null, { value: [] });
+  });
+
+  it("renders children in the slider area", () => {
+    render(
+      <SliderWithFilter {...defaultProps}>
+        <div data-testid="depth-slider">slider</div>
+      </SliderWithFilter>
+    );
+
+    expect(screen.getByTestId("depth-slider")).toBeInTheDocument();
+  });
+});

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptRelations.spec.js.snap

@@ -1,71 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ConceptRelations /> matches the latest snapshot 1`] = `
+exports[`<ConceptRelations /> matches snapshot with list view and relations 1`] = `
 <div>
   <div
-    class="ui bottom attached segment"
+    class="ui bottom attached segment concept-relations-segment"
   >
     <div
-      class="traversal-tags-container"
+      class="implementation-actions"
     >
-      <div>
-        <b>
-          <label>
-            relations.tags.label
-          </label>
-        </b>
-      </div>
-      <div>
-        <div
-          aria-expanded="false"
-          class="ui multiple search selection dropdown traversal-tags"
-          role="combobox"
+      <div
+        class="ui buttons"
+      >
+        <button
+          class="ui icon button"
+          data-tooltip="relations.actions.maps.tooltip"
         >
-          <input
-            aria-autocomplete="list"
-            autocomplete="off"
-            class="search"
-            tabindex="0"
-            type="text"
-            value=""
-          />
-          <span
-            class="sizer"
+          <i
+            aria-hidden="true"
+            class="sitemap icon"
           />
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            class="divider default text"
-            role="alert"
-          >
-            relations.tags.placeholder
-          </div>
+        </button>
+        <button
+          class="ui active icon button"
+          data-tooltip="relations.actions.list.tooltip"
+        >
           <i
             aria-hidden="true"
-            class="dropdown icon"
+            class="list ul icon"
           />
-          <div
-            aria-multiselectable="true"
-            class="menu transition"
-            role="listbox"
+        </button>
+      </div>
+    </div>
+    <table
+      class="ui selectable table"
+    >
+      <tbody
+        class=""
+      >
+        <tr
+          class=""
+        >
+          <td
+            class=""
+          >
+            Source Concept
+          </td>
+          <td
+            class="center aligned"
           >
             <div
-              aria-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+              class="ui label"
             >
-              <span
-                class="text"
-              >
-                _empty
-              </span>
+              related_to
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
+          </td>
+          <td
+            class="center aligned"
+          >
+            Target Concept
+          </td>
+          <td
+            class="center aligned"
+          />
+        </tr>
+        <tr
+          class=""
+        >
+          <td
+            class=""
+          >
+            Source Concept
+          </td>
+          <td
+            class="center aligned"
+          >
+            <div
+              class="ui label"
+            >
+              -
+            </div>
+          </td>
+          <td
+            class="center aligned"
+          >
+            Another Target
+          </td>
+          <td
+            class="center aligned"
+          />
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`<ConceptRelations /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment concept-relations-segment"
+  >
     <div
       class="implementation-actions"
     />

package/src/concepts/relations/components/__tests__/__snapshots__/SliderWithFilter.spec.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SliderWithFilter /> renders correctly 1`] = `
+<div>
+  <div
+    class="slider-with-filter__panel"
+  >
+    <div
+      class="slider-with-filter__header-area"
+    >
+      <div
+        class="slider-with-filter__tab"
+        title="relations.tags.filter"
+      >
+        <span
+          class="slider-with-filter__filtro-label"
+        >
+          relations.tags.filter.label
+        </span>
+        <span
+          class="slider-with-filter__tab-actions"
+        >
+          <svg
+            fill="none"
+            height="14"
+            stroke="#ff5c00"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2.5"
+            viewBox="0 0 24 24"
+            width="14"
+          >
+            <polygon
+              points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      class="slider-with-filter__slider-area"
+    >
+      <div
+        class="slider-with-filter__prof-pill"
+      >
+        <span
+          class="slider-with-filter__prof-label"
+        >
+          relations.depth.label
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/concepts/relations/styles/sliderWithFilter.less

@@ -0,0 +1,202 @@
+@slider-width: 104px;
+@tab-offset: 8px;
+@tab-width: 88px;
+@tab-top: 13px;
+@tab-height: 24px;
+@orange-primary: #ed5c17;
+@orange-bg: #FFF7F2;
+@orange-border: #FFE4D1;
+@font-stack: 'Funnel Sans', Inter, sans-serif;
+
+.relation-graph-wrapper {
+  .slider-with-filter__panel {
+    position: absolute;
+    top: 44px;
+    right: 8px;
+    z-index: 2;
+  }
+}
+
+.slider-with-filter {
+  &__panel {
+    width: @slider-width;
+    min-height: 220px;
+    background: #ffffff9a;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border-radius: 12px;
+    border: 1px solid #F3F4F6;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 16px 40px rgba(0, 0, 0, 0.07);
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+    position: relative;
+  }
+
+  &__header-area {
+    position: relative;
+    width: 100%;
+    height: 44px;
+    overflow: visible;
+    flex-shrink: 0;
+  }
+
+  &__tab {
+    position: absolute;
+    top: @tab-top;
+    right: @tab-offset;
+    width: @tab-width;
+    height: @tab-height;
+    background: @orange-bg;
+    border: 1px solid @orange-border;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 0 8px;
+    cursor: pointer;
+    box-sizing: border-box;
+    white-space: nowrap;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+  }
+
+  &__tab-actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 2px;
+    min-width: 20px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  &__chips-bar {
+    position: absolute;
+    top: (@tab-top + (@tab-height / 2));
+    right: (@tab-width + @tab-offset + 6px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 8px;
+    background: #ffffffe0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border: 1px solid @orange-border;
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    transform-origin: right center;
+    transform: translateY(-50%);
+  }
+
+  &__chips-list {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__filtro-label {
+    font-family: @font-stack;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.3px;
+    color: @orange-primary;
+    flex-shrink: 0;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 14px;
+    margin-left: -4px;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  &__badge-text {
+    font-family: @font-stack;
+    font-size: 12px;
+    font-weight: bold;
+    color: #111111;
+    line-height: 1;
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 0 4px;
+  }
+
+  &__clear {
+    position: absolute;
+    left: 50%;
+    bottom: -36px;
+    transform: translateX(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+    opacity: 0.72;
+    padding: 4px 8px;
+    background: #fff;
+    border: 1px solid @orange-border;
+    border-radius: 9999px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+    white-space: nowrap;
+    z-index: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &__clear-label {
+    font-family: @font-stack;
+    font-size: 10px;
+    font-weight: 600;
+    color: #999;
+    white-space: nowrap;
+  }
+
+  &__chip-text {
+    font-family: @font-stack;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--td-chip-color, #666);
+  }
+
+  &__prof-pill {
+    width: 100%;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-top: auto;
+    margin-bottom: 5px;
+  }
+
+  &__prof-label {
+    font-family: @font-stack;
+    font-size: 10px;
+    font-weight: 700;
+    color: @orange-primary;
+    line-height: 1;
+  }
+
+  &__slider-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 14px 4px 8px;
+  }
+}