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

package/lib/components/Catalog/variables.js

@@ -384,5 +384,47 @@ exports.catalog = (0, styled_components_1.css) `
 
   --catalog-avatar-bg-color: #ededf2;
   // @tokens End
+
+  /**
+    * @tokens Catalog entity relations node
+    */
+  --catalog-entity-relations-node-padding-vertical: 10px;
+  --catalog-entity-relations-node-padding-horizontal: 14px;
+  --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
+  --catalog-entity-relations-node-gap: 8px;
+  --catalog-entity-relations-node-border-radius: 10px;
+
+  --catalog-entity-relations-node-bg-color: var(--layer-color);
+  --catalog-entity-relations-node-text-color: var(--catalog-card-text-color);
+
+  --catalog-entity-relations-node-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-node-border-width: var(--border-width);
+  --catalog-entity-relations-node-border-style: var(--border-style);
+
+  --catalog-entity-relations-node-font-weight: var(--font-weight-regular);
+  --catalog-entity-relations-node-font-weight-root: 600;
+
+  --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
+  --catalog-entity-relations-node-root-text-color: #ffffff;
+  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  // @tokens End
+
+  /**
+    * @tokens Catalog entity relations edge
+    */
+  --catalog-entity-relations-edge-label-bg-color: var(--layer-color);
+  --catalog-entity-relations-edge-label-text-color: var(--catalog-card-text-color);
+  --catalog-entity-relations-edge-label-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-edge-label-border-width: var(--border-width);
+  --catalog-entity-relations-edge-label-border-style: var(--border-style);
+  --catalog-entity-relations-edge-label-border-radius: 10px;
+
+  --catalog-entity-relations-edge-label-padding-vertical: 2px;
+  --catalog-entity-relations-edge-label-padding-horizontal: 8px;
+  --catalog-entity-relations-edge-label-padding: var(--catalog-entity-relations-edge-label-padding-vertical) var(--catalog-entity-relations-edge-label-padding-horizontal);
+
+  --catalog-entity-relations-edge-label-font-size: 12px;
+  --catalog-entity-relations-edge-label-line-height: 1.2;
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/CatalogClassic/CatalogClassicVirtualizedGroups.js

@@ -103,6 +103,7 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
             return ESTIMATED_CARD_HEIGHT;
         },
         overscan: 5,
+        enabled: shouldVirtualize,
     });
     (0, react_1.useEffect)(() => {
         if (!size.width || !shouldVirtualize) {
@@ -111,19 +112,23 @@ function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }) {
         virtualizer.measure();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filters, filterTerm, size.width, shouldVirtualize]);
+    const renderRow = (rowData) => {
+        if (rowData.type === 'header') {
+            return (react_1.default.createElement(SSRHeaderRow, { key: rowData.key },
+                react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+        }
+        return (react_1.default.createElement(SSRGridRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CatalogClassicCard_1.CatalogClassicCard, { key: item.link, item: item })))));
+    };
     if (!isClient) {
         return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogClassic/CatalogClassicVirtualizedGroups" },
-            flatRows.slice(0, 15).map((rowData) => {
-                if (rowData.type === 'header') {
-                    return (react_1.default.createElement(SSRHeaderRow, { key: rowData.key },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
-                }
-                return (react_1.default.createElement(SSRGridRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CatalogClassicCard_1.CatalogClassicCard, { key: item.link, item: item })))));
-            }),
+            flatRows.slice(0, 15).map((rowData) => renderRow(rowData)),
             react_1.default.createElement(LoadingWrapper, null,
                 react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-classic-description-text-color)", size: "20px" }))));
     }
+    if (!shouldVirtualize) {
+        return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogClassic/CatalogClassicVirtualizedGroups" }, flatRows.map((rowData) => renderRow(rowData))));
+    }
     return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogClassic/CatalogClassicVirtualizedGroups" },
         react_1.default.createElement("div", { style: {
                 position: 'relative',

package/lib/core/constants/catalog.d.ts

@@ -2,3 +2,13 @@ import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
 export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
 export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;
+export declare enum GraphHandleType {
+    Target = "target",
+    Source = "source"
+}
+export declare enum GraphCustomNodeType {
+    CatalogEntity = "catalogEntity"
+}
+export declare enum GraphCustomEdgeType {
+    CatalogEdge = "catalogEdge"
+}

package/lib/core/constants/catalog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
 exports.ENTITY_RELATION_TYPES = [
     'partOf',
@@ -56,4 +56,17 @@ exports.reverseRelationMap = {
     triggers: 'triggeredBy',
     triggeredBy: 'triggers',
 };
+var GraphHandleType;
+(function (GraphHandleType) {
+    GraphHandleType["Target"] = "target";
+    GraphHandleType["Source"] = "source";
+})(GraphHandleType || (exports.GraphHandleType = GraphHandleType = {}));
+var GraphCustomNodeType;
+(function (GraphCustomNodeType) {
+    GraphCustomNodeType["CatalogEntity"] = "catalogEntity";
+})(GraphCustomNodeType || (exports.GraphCustomNodeType = GraphCustomNodeType = {}));
+var GraphCustomEdgeType;
+(function (GraphCustomEdgeType) {
+    GraphCustomEdgeType["CatalogEdge"] = "catalogEdge";
+})(GraphCustomEdgeType || (exports.GraphCustomEdgeType = GraphCustomEdgeType = {}));
 //# sourceMappingURL=catalog.js.map

package/lib/core/hooks/catalog/useGraph.d.ts

@@ -0,0 +1,15 @@
+import { type Node, type Edge, type Connection, OnNodesChange, OnEdgesChange } from '@xyflow/react';
+import { type CatalogEntityNodeData } from '../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+export type UseGraphProps = {
+    entity: BffCatalogEntity;
+    relations: BffCatalogRelatedEntity[];
+};
+export type UseGraphReturn = {
+    nodes: Node<CatalogEntityNodeData>[];
+    edges: Edge[];
+    onNodesChange: OnNodesChange<Node<CatalogEntityNodeData>>;
+    onEdgesChange: OnEdgesChange<Edge>;
+    onConnect: (params: Connection) => void;
+};
+export declare function useGraph({ entity, relations }: UseGraphProps): UseGraphReturn;

package/lib/core/hooks/catalog/useGraph.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraph = useGraph;
+const react_1 = require("react");
+const react_2 = require("@xyflow/react");
+const catalog_1 = require("../../constants/catalog");
+// TODO: This isn't final implementation, leaved comments for future reference.
+function useGraph({ entity, relations }) {
+    const rootNodeId = entity.id;
+    // Compute final label for a relation considering its role
+    const getRelationLabel = (0, react_1.useCallback)((relation) => {
+        const relationType = relation.relationType;
+        if (!relationType) {
+            return 'related';
+        }
+        return relation.relationRole === 'source' ? catalog_1.reverseRelationMap[relationType] : relationType;
+    }, []);
+    const processedRelations = (0, react_1.useMemo)(() => {
+        // Exclude self-relations and deduplicate by id
+        const seenIds = new Set();
+        const filtered = (relations !== null && relations !== void 0 ? relations : []).filter((r) => r.id !== rootNodeId && r.key !== entity.key);
+        const unique = [];
+        for (const r of filtered) {
+            if (seenIds.has(r.id))
+                continue;
+            seenIds.add(r.id);
+            unique.push({
+                id: r.id,
+                title: r.title,
+                entityType: r.type, // Group by entity type, not relation type
+                relationLabel: getRelationLabel(r),
+                key: r.key,
+            });
+        }
+        return unique;
+    }, [relations, getRelationLabel, rootNodeId, entity.key]);
+    // Entity data type for layout
+    const computedNodes = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!processedRelations.length) {
+            return [
+                {
+                    id: rootNodeId,
+                    type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                    position: { x: 0, y: 0 },
+                    data: {
+                        label: entity.title,
+                        entityType: entity.type,
+                        isRoot: true,
+                        entityKey: entity.key,
+                    },
+                    sourcePosition: react_2.Position.Bottom,
+                    targetPosition: react_2.Position.Top,
+                },
+            ];
+        }
+        // Group entities by their entity type
+        const entityTypeGroups = new Map();
+        for (const rel of processedRelations) {
+            const entityData = {
+                id: rel.id,
+                title: rel.title,
+                entityType: rel.entityType,
+                relationLabel: rel.relationLabel,
+                key: rel.key,
+            };
+            const current = entityTypeGroups.get(rel.entityType);
+            if (current) {
+                current.push(entityData);
+            }
+            else {
+                entityTypeGroups.set(rel.entityType, [entityData]);
+            }
+        }
+        // Sort entity types for consistent ordering
+        const entityTypes = Array.from(entityTypeGroups.keys()).sort();
+        // Layout constants
+        const rootY = 0;
+        const verticalGap = 80; // Gap between entities of same type (vertical)
+        const horizontalGap = 250; // Gap between different entity types (horizontal)
+        const topMargin = 240; // Distance from root to first row of entities
+        // Special handling for single entity type group - root on left, entities on right
+        const isSingleGroup = entityTypes.length === 1;
+        let rootX = 0;
+        let startX = 0;
+        if (isSingleGroup) {
+            // Position root on the left, entities on the right
+            rootX = -horizontalGap / 2;
+            startX = horizontalGap / 2;
+        }
+        else {
+            // Calculate starting X position to center all groups (original behavior)
+            const totalWidth = (entityTypes.length - 1) * horizontalGap;
+            startX = -totalWidth / 2;
+        }
+        const nodes = [
+            // Root entity
+            {
+                id: rootNodeId,
+                type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                position: { x: rootX, y: rootY },
+                data: { label: entity.title, entityType: entity.type, isRoot: true, entityKey: entity.key },
+                sourcePosition: react_2.Position.Bottom,
+                targetPosition: react_2.Position.Top,
+            },
+        ];
+        // Position entities by type groups
+        for (let typeIndex = 0; typeIndex < entityTypes.length; typeIndex++) {
+            const entityType = entityTypes[typeIndex];
+            const entitiesOfType = (_a = entityTypeGroups.get(entityType)) !== null && _a !== void 0 ? _a : [];
+            // Calculate X position for this entity type group
+            const groupX = startX + typeIndex * horizontalGap;
+            // Calculate starting Y position to center entities vertically within the group
+            const groupHeight = (entitiesOfType.length - 1) * verticalGap;
+            const groupStartY = rootY + topMargin - groupHeight / 2;
+            // Position each entity within the group
+            for (let entityIndex = 0; entityIndex < entitiesOfType.length; entityIndex++) {
+                const entityData = entitiesOfType[entityIndex];
+                const entityY = groupStartY + entityIndex * verticalGap;
+                nodes.push({
+                    id: entityData.id,
+                    type: catalog_1.GraphCustomNodeType.CatalogEntity,
+                    position: { x: groupX, y: entityY },
+                    data: {
+                        label: entityData.title,
+                        entityType: entityData.entityType,
+                        isRoot: false,
+                        entityKey: entityData.key,
+                    },
+                    sourcePosition: react_2.Position.Bottom,
+                    targetPosition: react_2.Position.Top,
+                });
+            }
+        }
+        return nodes;
+    }, [rootNodeId, entity.title, entity.type, entity.key, processedRelations]);
+    const computedEdges = (0, react_1.useMemo)(() => {
+        return processedRelations.map((relation) => ({
+            id: `e-${rootNodeId}-${relation.id}`,
+            source: rootNodeId,
+            target: relation.id,
+            sourceHandle: catalog_1.GraphHandleType.Source, // Use the bottom handle of the center node
+            targetHandle: catalog_1.GraphHandleType.Target, // Use the target handle (top) of related nodes
+            type: catalog_1.GraphCustomEdgeType.CatalogEdge,
+            label: relation.relationLabel,
+        }));
+    }, [rootNodeId, processedRelations]);
+    const [nodes, setNodes, onNodesChange] = (0, react_2.useNodesState)(computedNodes);
+    const [edges, setEdges, onEdgesChange] = (0, react_2.useEdgesState)(computedEdges);
+    (0, react_1.useEffect)(() => {
+        setNodes(computedNodes);
+    }, [computedNodes, setNodes]);
+    (0, react_1.useEffect)(() => {
+        setEdges(computedEdges);
+    }, [computedEdges, setEdges]);
+    const onConnect = (0, react_1.useCallback)((params) => setEdges((edgesSnapshot) => (0, react_2.addEdge)(params, edgesSnapshot)), [setEdges]);
+    return {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        onConnect,
+    };
+}
+//# sourceMappingURL=useGraph.js.map

package/lib/core/hooks/index.d.ts

@@ -37,6 +37,7 @@ export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
 export * from './catalog/useCatalogEntities';
+export * from './catalog/useGraph';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';

package/lib/core/hooks/index.js

@@ -53,6 +53,7 @@ __exportStar(require("./use-element-size"), exports);
 __exportStar(require("./use-time-ago"), exports);
 __exportStar(require("./use-input-key-commands"), exports);
 __exportStar(require("./catalog/useCatalogEntities"), exports);
+__exportStar(require("./catalog/useGraph"), exports);
 __exportStar(require("./use-active-page-version"), exports);
 __exportStar(require("./use-page-versions"), exports);
 __exportStar(require("./use-user-teams"), exports);

package/lib/core/openapi/index.d.ts

@@ -16,3 +16,4 @@ export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
+export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.ENTITY_RELATION_TYPES = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 // This file is intended to provide selective imports from @redocly/theme/core
 // to reduce bundle size by exporting only functionality used in the @redocly/openapi-docs package.
 //
@@ -45,4 +45,6 @@ Object.defineProperty(exports, "isNotNull", { enumerable: true, get: function ()
 Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return type_guards_1.isObject; } });
 var ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: function () { return ThemeDataContext_1.ThemeDataContext; } });
+var catalog_1 = require("../constants/catalog");
+Object.defineProperty(exports, "ENTITY_RELATION_TYPES", { enumerable: true, get: function () { return catalog_1.ENTITY_RELATION_TYPES; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/index.d.ts

@@ -1,2 +1,3 @@
 export * from './global';
 export * from './dark';
+export { xyflow } from './xyflow';

package/lib/core/styles/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.xyflow = void 0;
 __exportStar(require("./global"), exports);
 __exportStar(require("./dark"), exports);
+var xyflow_1 = require("./xyflow");
+Object.defineProperty(exports, "xyflow", { enumerable: true, get: function () { return xyflow_1.xyflow; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/xyflow.d.ts

@@ -0,0 +1 @@
+export declare const xyflow: import("styled-components").FlattenSimpleInterpolation;