@redocly/theme 0.57.0-next.0 → 0.57.0-next.2

package/lib/icons/GenericIcon/GenericIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface GenericIconProps {
+export type GenericIconProps = {
     icon: string | React.ReactNode;
     srcSet?: string;
     rawContent?: string;
@@ -7,5 +7,5 @@ export interface GenericIconProps {
     color?: string;
     alt?: string;
     className?: string;
-}
+};
 export declare function GenericIcon({ icon, srcSet, rawContent, size, color, alt, className, }: GenericIconProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;

package/lib/icons/GenericIcon/GenericIcon.js

@@ -33,19 +33,24 @@ const CDNIcon_1 = require("../../icons/CDNIcon/CDNIcon");
 const utils_1 = require("../../core/utils");
 const InlineSvg_1 = require("../../markdoc/components/InlineSvg/InlineSvg");
 const Image_1 = require("../../components/Image/Image");
+const INVALID_ICON_NAME = 'image-slash';
 function GenericIcon({ icon, srcSet, rawContent, size, color, alt, className, }) {
     if (srcSet) {
-        return React.createElement(Image_1.Image, { srcSet: srcSet, alt: alt, className: className });
+        return React.createElement(IconSrcSetImg, { srcSet: srcSet, alt: alt, className: className });
     }
     const resolvedIcon = icon && typeof icon === 'string' ? (0, utils_1.resolveIcon)(icon) : null;
-    const iconComponent = rawContent ? (React.createElement(IconSvg, { fileRawContent: rawContent, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'link' ? (React.createElement(IconImg, { src: resolvedIcon.value, alt: alt, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'font-awesome' ? (React.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style, size: size, color: color, className: className })) : (icon);
+    const iconComponent = rawContent ? (React.createElement(IconSvg, { fileRawContent: rawContent, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'link' ? (React.createElement(IconImg, { src: resolvedIcon.value, alt: alt, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'font-awesome' ? (React.createElement(CDNIcon_1.CDNIcon, { name: resolvedIcon.name, type: resolvedIcon.style, size: size, color: color, className: className })) : (resolvedIcon === null || resolvedIcon === void 0 ? void 0 : resolvedIcon.type) === 'invalid' ? (React.createElement(CDNIcon_1.CDNIcon, { name: INVALID_ICON_NAME, size: size, color: color, className: className })) : (icon);
     return iconComponent;
 }
 const IconImg = styled_components_1.default.img `
   width: var(--icon-width, 16px);
   height: var(--icon-height, 16px);
   display: inline-block;
-  object-fit: cover;
+  vertical-align: middle;
+`;
+const IconSrcSetImg = (0, styled_components_1.default)(Image_1.Image) `
+  width: var(--icon-width, 16px);
+  height: var(--icon-height, 16px);
 `;
 const IconSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
   width: var(--icon-width, 16px);

package/lib/icons/__tests__/IconTestUtils.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom';
 export declare function testIconComponent(IconComponent: React.ComponentType<any>, componentName: string): {
     rendersCorrectlyWithDefaultProps: () => void;
     appliesCustomSizeAndColor: () => void;

package/lib/icons/__tests__/IconTestUtils.js

@@ -6,42 +6,43 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.testIconComponent = testIconComponent;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
-require("@testing-library/jest-dom");
+const vitest_1 = require("vitest");
 function testIconComponent(IconComponent, componentName) {
     const dataName = `icons/${componentName}/${componentName}`;
     return {
         rendersCorrectlyWithDefaultProps: () => {
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
             const svgElement = container.querySelector('svg');
-            expect(svgElement).toBeInTheDocument();
+            (0, vitest_1.expect)(svgElement).toBeTruthy();
             // Check if styles are applied either via style attribute or CSS class
             const element = container.firstChild;
             const hasStyleAttr = element.style.height === '16px' && element.style.width === '16px';
             const elementClass = element.getAttribute('class') || '';
             const hasClassName = elementClass.includes('sc-'); // styled-components class
-            expect(hasStyleAttr || hasClassName).toBeTruthy();
+            (0, vitest_1.expect)(hasStyleAttr || hasClassName).toBeTruthy();
         },
         appliesCustomSizeAndColor: () => {
             var _a;
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, { size: "24px", color: "--color-primary" }));
             const svgElement = container.querySelector('svg');
-            expect(svgElement).toBeInTheDocument();
+            (0, vitest_1.expect)(svgElement).toBeTruthy();
             const element = container.firstChild;
             const pathElement = container.querySelector('path');
             // Check if size styles are applied either via style attribute or CSS class
             const hasSizeStyle = element.style.height === '24px' && element.style.width === '24px';
             const elementClass = element.getAttribute('class') || '';
             const hasClassName = elementClass.includes('sc-'); // styled-components class
-            expect(hasSizeStyle || hasClassName).toBeTruthy();
+            (0, vitest_1.expect)(hasSizeStyle || hasClassName).toBeTruthy();
             // Check if color is applied either via style attribute or CSS class
             const hasColorStyle = ((_a = pathElement.getAttribute('style')) === null || _a === void 0 ? void 0 : _a.includes('fill: var(--color-primary)')) ||
                 pathElement.getAttribute('fill') === 'var(--color-primary)' ||
                 elementClass.includes('sc-'); // check styled-components class on the root element
-            expect(hasColorStyle).toBeTruthy();
+            (0, vitest_1.expect)(hasColorStyle).toBeTruthy();
         },
         hasCorrectDataComponentName: () => {
             const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
-            expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
+            (0, vitest_1.expect)(container.firstChild).toHaveProperty('getAttribute');
+            (0, vitest_1.expect)(container.firstChild.getAttribute('data-component-name')).toBe(dataName);
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.57.0-next.0",
+  "version": "0.57.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -38,13 +38,10 @@
   "devDependencies": {
     "@markdoc/markdoc": "0.5.2",
     "@shikijs/types": "1.24.2",
-    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/file-saver": "2.0.7",
     "@types/highlight-words-core": "1.2.3",
-    "@types/jest": "29.5.11",
-    "@types/jest-when": "3.5.5",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "22.15.3",
@@ -53,11 +50,9 @@
     "@types/react-dom": "^19.1.4",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
+    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
-    "jest-styled-components": "7.2.0",
-    "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
     "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.2",
@@ -66,18 +61,20 @@
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
-    "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
     "tsc-alias": "1.8.10",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.6.2",
+    "vitest": "3.2.4",
+    "vitest-when": "0.6.2",
     "webpack": "5.94.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
+    "@xyflow/react": "^12.8.2",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",
     "highlight-words-core": "1.2.2",
@@ -98,10 +95,10 @@
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
-    "test": "jest",
-    "test:update": "jest -u",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "test:coverage:html": "jest --coverage --coverageReporters html"
+    "test": "vitest run",
+    "test:update": "vitest run --update",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:html": "vitest run --coverage --reporter=html"
   }
 }

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -166,6 +166,7 @@ const ArrowCircle = styled.div`
 
 const CardContent = styled.div`
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+  height: 100%;
 `;
 
 const CardFooter = styled.div`

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { Route, Routes, useLocation, matchPath } from 'react-router-dom';
 
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
 
@@ -19,6 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
+import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
   entity: BffCatalogEntity;
@@ -27,6 +29,17 @@ export type CatalogEntityProps = {
   initialRelations: BffCatalogRelatedEntityList;
 };
 
+const renderEntityContent = (entity: BffCatalogEntity): React.ReactElement => {
+  switch (entity.type) {
+    case 'data-schema':
+      return <CatalogEntitySchema entity={entity} />;
+    case 'api-operation':
+      return <CatalogEntityMethodAndPath entity={entity} />;
+    default:
+      return <CatalogEntityMetadata entity={entity} />;
+  }
+};
+
 export function CatalogEntity({
   entity,
   entitiesCatalogConfig,
@@ -37,7 +50,6 @@ export function CatalogEntity({
   const { translate } = useTranslate();
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-
   const {
     layout,
     collapsedSidebar,
@@ -47,16 +59,19 @@ export function CatalogEntity({
     setSearchQuery,
   } = useCatalog();
 
-  const renderEntityContent = (): React.ReactElement => {
-    switch (entity.type) {
-      case 'data-schema':
-        return <CatalogEntitySchema entity={entity} />;
-      case 'api-operation':
-        return <CatalogEntityMethodAndPath entity={entity} />;
-      default:
-        return <CatalogEntityMetadata entity={entity} />;
-    }
-  };
+  const { pathname } = useLocation();
+  const linkBase = `${linkToMainCatalog}/entities/${entity.key}`;
+  const menuItemDefs = [
+    { label: 'Overview', path: linkBase, end: true },
+    { label: 'Relations Graph', path: `${linkBase}/relations-graph`, end: true },
+  ];
+  const sidebarMenuItems = menuItemDefs.map(({ label, path, end }) => ({
+    label,
+    link: path,
+    active: Boolean(matchPath({ path: `/${path}`, end }, pathname)),
+    items: [],
+    hasActiveSubItem: false,
+  }));
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
@@ -80,19 +95,7 @@ export function CatalogEntity({
             )}
           </BackLink>
         }
-        menu={
-          <Menu
-            items={[
-              {
-                label: 'Overview',
-                link: `${linkToMainCatalog}/entities/${entity.key}`,
-                active: true,
-                items: [],
-                hasActiveSubItem: false,
-              },
-            ]}
-          />
-        }
+        menu={<Menu items={sidebarMenuItems} />}
         footer={
           <SidebarActions
             layout={layout}
@@ -111,24 +114,39 @@ export function CatalogEntity({
           ]}
         />
         <CatalogEntityPageWrapper>
-          <CatalogPageDescription
-            title={entity.title}
-            description={entity.summary ?? ''}
-            tag={entity.key}
-          />
-          <CatalogEntityProperties entity={entity} />
-          <CatalogTwoColumnsSection>
-            {renderEntityContent()}
-            <CatalogEntityLinks entity={entity} />
-          </CatalogTwoColumnsSection>
-          <CatalogEntityRelations
-            entity={entity}
-            entitiesCatalogConfig={entitiesCatalogConfig}
-            catalogConfig={catalogConfig}
-            initialRelations={initialRelations}
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-          />
+          <Routes>
+            <Route path={`${catalogConfig.slug}/entities/${entity.key}`}>
+              <Route
+                index
+                element={
+                  <>
+                    <CatalogPageDescription
+                      title={entity.title}
+                      description={entity.summary ?? ''}
+                      tag={entity.key}
+                    />
+                    <CatalogEntityProperties entity={entity} />
+                    <CatalogTwoColumnsSection>
+                      {renderEntityContent(entity)}
+                      <CatalogEntityLinks entity={entity} />
+                    </CatalogTwoColumnsSection>
+                    <CatalogEntityRelations
+                      entity={entity}
+                      entitiesCatalogConfig={entitiesCatalogConfig}
+                      catalogConfig={catalogConfig}
+                      initialRelations={initialRelations}
+                      searchQuery={searchQuery}
+                      setSearchQuery={setSearchQuery}
+                    />
+                  </>
+                }
+              />
+              <Route
+                path="relations-graph"
+                element={<CatalogEntityRelationsGraph entity={entity} />}
+              />
+            </Route>
+          </Routes>
         </CatalogEntityPageWrapper>
       </CatalogPageContent>
     </CatalogPageWrapper>

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react';
+import styled from 'styled-components';
+
+export type CatalogEntityRelationsEdgeProps = EdgeProps & { className?: string };
+
+export function CatalogEntityRelationsEdge(
+  props: CatalogEntityRelationsEdgeProps,
+): React.ReactElement {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    style,
+    label,
+    markerEnd,
+    className,
+  } = props;
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 12,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} style={style} markerEnd={markerEnd} />
+      {label ? (
+        <EdgeLabelRenderer>
+          <EdgeLabel
+            className={className ? `nopan ${className}` : 'nopan'}
+            style={{ transform: `translate(-50%, 0%) translate(${labelX}px, ${labelY - 10}px)` }}
+            data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge"
+          >
+            {label}
+          </EdgeLabel>
+        </EdgeLabelRenderer>
+      ) : null}
+    </>
+  );
+}
+
+const EdgeLabel = styled.div`
+  position: absolute;
+  background: var(--catalog-entity-relations-edge-label-bg-color);
+  color: var(--catalog-entity-relations-edge-label-text-color);
+  border: var(--catalog-entity-relations-edge-label-border-width)
+    var(--catalog-entity-relations-edge-label-border-style)
+    var(--catalog-entity-relations-edge-label-border-color);
+  border-radius: var(--catalog-entity-relations-edge-label-border-radius);
+  padding: var(--catalog-entity-relations-edge-label-padding);
+  font-size: var(--catalog-entity-relations-edge-label-font-size);
+  line-height: var(--catalog-entity-relations-edge-label-line-height);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.tsx

@@ -0,0 +1,7 @@
+import type { CatalogEntityRelationsGraphProps } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
+
+import { dynamic } from '@redocly/theme/core/utils';
+
+export const CatalogEntityRelationsGraph = dynamic<CatalogEntityRelationsGraphProps>(() =>
+  import('./CatalogEntityRelationsGraph').then((mod) => mod.CatalogEntityRelationsGraph),
+);

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.tsx

@@ -0,0 +1,91 @@
+import React, { JSX, useMemo } from 'react';
+import { Background, ColorMode, Controls, ReactFlow } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
+import { useGraph } from '@redocly/theme/core/hooks/catalog/useGraph';
+import { CatalogEntityRelationsNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import { CatalogEntityRelationsEdge } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge';
+import { xyflow } from '@redocly/theme/core/styles';
+import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
+import { GraphCustomEdgeType, GraphCustomNodeType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsGraphProps = {
+  entity: BffCatalogEntity;
+};
+
+const commonReactFlowConfig = {
+  fitView: true,
+  proOptions: {
+    hideAttribution: true,
+  },
+  style: {
+    border:
+      'var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color)',
+    borderRadius: 'var(--catalog-card-border-radius, 8px)',
+  },
+};
+
+export function CatalogEntityRelationsGraph({
+  entity,
+}: CatalogEntityRelationsGraphProps): JSX.Element {
+  const { useFetchCatalogEntitiesRelations } = useThemeHooks();
+  const { activeColorMode } = useColorSwitcher();
+  const { items: allRelations } = useFetchCatalogEntitiesRelations({
+    entityKey: entity.key,
+  });
+
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useGraph({
+    entity,
+    relations: allRelations ?? [],
+  });
+
+  const nodeTypes = useMemo(
+    () => ({ [GraphCustomNodeType.CatalogEntity]: CatalogEntityRelationsNode }),
+    [],
+  );
+  const edgeTypes = useMemo(
+    () => ({ [GraphCustomEdgeType.CatalogEdge]: CatalogEntityRelationsEdge }),
+    [],
+  );
+
+  const reactFlowConfig = allRelations.length
+    ? {
+        key: entity.id,
+        nodes,
+        edges,
+        nodeTypes,
+        edgeTypes,
+        onNodesChange,
+        onEdgesChange,
+        onConnect,
+        colorMode: activeColorMode as ColorMode,
+        ...commonReactFlowConfig,
+      }
+    : {
+        ...commonReactFlowConfig,
+      };
+
+  return (
+    <>
+      <CatalogPageDescription
+        title={entity.title}
+        description={entity.summary ?? ''}
+        tag={entity.key}
+      />
+      <GraphWrapper>
+        <ReactFlow {...reactFlowConfig}>
+          <Background bgColor="var(--catalog-card-bg-color)" />
+          <Controls />
+        </ReactFlow>
+      </GraphWrapper>
+    </>
+  );
+}
+
+const GraphWrapper = styled.div`
+  height: 700px;
+  width: 100%;
+  ${xyflow}
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsLinkedNodeProps = {
+  label: string;
+  entityType: string;
+  className?: string;
+  to: string;
+};
+
+export function CatalogEntityRelationsLinkedNode({
+  label,
+  entityType,
+  className,
+  to,
+}: CatalogEntityRelationsLinkedNodeProps): React.ReactElement {
+  return (
+    <RelationsLinkedNodeWrapper
+      className={className}
+      to={to}
+      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode"
+    >
+      <Handle type={GraphHandleType.Target} position={Position.Top} id={GraphHandleType.Target} />
+      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
+      <div>{label}</div>
+    </RelationsLinkedNodeWrapper>
+  );
+}
+
+const RelationsLinkedNodeWrapper = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight);
+  background: var(--catalog-entity-relations-node-bg-color);
+  color: var(--catalog-entity-relations-node-text-color);
+  border: var(--catalog-entity-relations-node-border-width)
+    var(--catalog-entity-relations-node-border-style)
+    var(--catalog-entity-relations-node-border-color);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { CatalogEntityRelationsRootNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode';
+import { CatalogEntityRelationsLinkedNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode';
+
+export type CatalogEntityNodeData = {
+  label: string;
+  entityType: string;
+  entityKey: string;
+  isRoot?: boolean;
+};
+
+export type CatalogEntityRelationsNodeProps = { data: CatalogEntityNodeData; className?: string };
+
+export enum HandleType {
+  Target = 'target',
+  Source = 'source',
+}
+
+export function CatalogEntityRelationsNode({
+  data,
+  className,
+}: CatalogEntityRelationsNodeProps): React.ReactElement {
+  const { label, entityType, isRoot, entityKey } = data;
+  const mergedClassName = `nopan${className ? ` ${className}` : ''}`;
+
+  if (isRoot) {
+    return (
+      <CatalogEntityRelationsRootNode
+        className={mergedClassName}
+        label={label}
+        entityType={entityType}
+      />
+    );
+  }
+
+  return (
+    <CatalogEntityRelationsLinkedNode
+      className={mergedClassName}
+      label={label}
+      entityType={entityType}
+      to={`/catalogs/all/entities/${entityKey}`}
+    />
+  );
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsRootNodeProps = {
+  label: string;
+  entityType: string;
+  className?: string;
+};
+
+export function CatalogEntityRelationsRootNode({
+  label,
+  entityType,
+  className,
+}: CatalogEntityRelationsRootNodeProps): React.ReactElement {
+  return (
+    <RelationsRootNodeWrapper
+      className={className}
+      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode"
+    >
+      <CatalogEntityIcon
+        entityType={entityType}
+        forceColor="var(--catalog-entity-relations-node-root-icon-color)"
+      />
+      <div>{label}</div>
+      <Handle
+        type={GraphHandleType.Source}
+        position={Position.Bottom}
+        id={GraphHandleType.Source}
+      />
+    </RelationsRootNodeWrapper>
+  );
+}
+
+const RelationsRootNodeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight-root);
+  background: var(--catalog-entity-relations-node-root-bg-color);
+  color: var(--catalog-entity-relations-node-root-text-color);
+  border: none;
+`;