@backstage/plugin-catalog-graph 0.5.3-next.2 → 0.5.4-next.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @backstage/plugin-catalog-graph
 
+## 0.5.4-next.0
+
+### Patch Changes
+
+- a67c144: Fixed zoom out description (replace `&` with &)
+- d02db50: Remove unnecessary use of `compatWrapper` and `convertLegacyRouteRef`(s) for the new frontend system.
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.13.2-next.0
+  - @backstage/core-plugin-api@1.12.1-next.0
+  - @backstage/plugin-catalog-react@1.21.4-next.0
+  - @backstage/core-components@0.18.4-next.0
+  - @backstage/catalog-client@1.12.1
+  - @backstage/catalog-model@1.7.6
+  - @backstage/types@1.2.2
+
+## 0.5.3
+
+### Patch Changes
+
+- a2d7ae7: Ensure the catalog graph entity card respects the height prop so the visualization scales down properly on wide screens.
+- 1c7e1ce: - Revert `viewbox` back to old values.
+  - Added `fullScreen` prop to `EntityCatalogGraphCard`
+- b2bef92: Convert all enums to erasable-syntax compliant patterns
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.13.0
+  - @backstage/core-compat-api@0.5.4
+  - @backstage/plugin-catalog-react@1.21.3
+  - @backstage/core-components@0.18.3
+  - @backstage/core-plugin-api@1.12.0
+  - @backstage/catalog-model@1.7.6
+  - @backstage/catalog-client@1.12.1
+
 ## 0.5.3-next.2
 
 ### Patch Changes

package/dist/alpha.d.ts

@@ -2,6 +2,7 @@ import * as _backstage_catalog_model from '@backstage/catalog-model';
 import * as react from 'react';
 import * as _backstage_plugin_catalog_react_alpha from '@backstage/plugin-catalog-react/alpha';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 
 /** @alpha */
 declare const catalogGraphTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"catalog-graph", {
@@ -12,7 +13,7 @@ declare const catalogGraphTranslationRef: _backstage_frontend_plugin_api.Transla
     readonly "catalogGraphPage.supportButtonDescription": "Start tracking your component in by adding it to the software catalog.";
     readonly "catalogGraphPage.simplifiedSwitchLabel": "Simplified";
     readonly "catalogGraphPage.mergeRelationsSwitchLabel": "Merge relations";
-    readonly "catalogGraphPage.zoomOutDescription": "Use pinch &amp; zoom to move around the diagram. Click to change active node, shift click to navigate to entity.";
+    readonly "catalogGraphPage.zoomOutDescription": "Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.";
     readonly "catalogGraphPage.curveFilter.title": "Curve";
     readonly "catalogGraphPage.curveFilter.curveStepBefore": "Step Before";
     readonly "catalogGraphPage.curveFilter.curveMonotoneX": "Monotone X";
@@ -29,15 +30,15 @@ declare const catalogGraphTranslationRef: _backstage_frontend_plugin_api.Transla
 }>;
 
 declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin<{
-    catalogGraph: _backstage_frontend_plugin_api.RouteRef<undefined>;
+    catalogGraph: _backstage_core_plugin_api.RouteRef<undefined>;
 }, {
-    catalogEntity: _backstage_frontend_plugin_api.ExternalRouteRef<{
+    catalogEntity: _backstage_core_plugin_api.ExternalRouteRef<{
         name: string;
         kind: string;
         namespace: string;
-    }>;
+    }, true>;
 }, {
-    "api:catalog-graph": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "api:catalog-graph": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         kind: "api";
         name: undefined;
         config: {};
@@ -46,7 +47,7 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
         inputs: {};
         params: <TApi, TImpl extends TApi, TDeps extends { [name in string]: unknown; }>(params: _backstage_frontend_plugin_api.ApiFactory<TApi, TImpl, TDeps>) => _backstage_frontend_plugin_api.ExtensionBlueprintParams<_backstage_frontend_plugin_api.AnyApiFactory>;
     }>;
-    "entity-card:catalog-graph/relations": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "entity-card:catalog-graph/relations": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {
             kinds: string[] | undefined;
             relations: string[] | undefined;
@@ -100,7 +101,7 @@ declare const _default: _backstage_frontend_plugin_api.OverridableFrontendPlugin
             type?: _backstage_plugin_catalog_react_alpha.EntityCardType;
         };
     }>;
-    "page:catalog-graph": _backstage_frontend_plugin_api.ExtensionDefinition<{
+    "page:catalog-graph": _backstage_frontend_plugin_api.OverridableExtensionDefinition<{
         config: {
             selectedKinds: string[] | undefined;
             selectedRelations: string[] | undefined;

package/dist/alpha.esm.js

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { PageBlueprint, ApiBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
-import { compatWrapper, convertLegacyRouteRef } from '@backstage/core-compat-api';
 import { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';
 import { catalogGraphRouteRef, catalogEntityRouteRef } from './routes.esm.js';
 import { Direction, DefaultCatalogGraphApi, catalogGraphApiRef } from '@backstage/plugin-catalog-graph';
@@ -27,9 +26,7 @@ const CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({
   },
   factory(originalFactory, { config }) {
     return originalFactory({
-      loader: async () => import('./components/CatalogGraphCard/index.esm.js').then(
-        (m) => compatWrapper(/* @__PURE__ */ jsx(m.CatalogGraphCard, { ...config }))
-      )
+      loader: async () => import('./components/CatalogGraphCard/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.CatalogGraphCard, { ...config }))
     });
   }
 });
@@ -54,10 +51,8 @@ const CatalogGraphPage = PageBlueprint.makeWithOverrides({
   factory(originalFactory, { config }) {
     return originalFactory({
       path: "/catalog-graph",
-      routeRef: convertLegacyRouteRef(catalogGraphRouteRef),
-      loader: () => import('./components/CatalogGraphPage/index.esm.js').then(
-        (m) => compatWrapper(/* @__PURE__ */ jsx(m.CatalogGraphPage, { ...config }))
-      )
+      routeRef: catalogGraphRouteRef,
+      loader: () => import('./components/CatalogGraphPage/index.esm.js').then((m) => /* @__PURE__ */ jsx(m.CatalogGraphPage, { ...config }))
     });
   }
 });
@@ -72,10 +67,10 @@ var alpha = createFrontendPlugin({
   pluginId: "catalog-graph",
   info: { packageJson: () => import('./package.json.esm.js') },
   routes: {
-    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef)
+    catalogGraph: catalogGraphRouteRef
   },
   externalRoutes: {
-    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef)
+    catalogEntity: catalogEntityRouteRef
   },
   extensions: [CatalogGraphPage, CatalogGraphEntityCard, CatalogGraphApi]
 });

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ApiBlueprint,\n  createFrontendPlugin,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport {\n  catalogGraphApiRef,\n  DefaultCatalogGraphApi,\n  Direction,\n} from '@backstage/plugin-catalog-graph';\n\nconst CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({\n  name: 'relations',\n  config: {\n    schema: {\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n      // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      title: z => z.string().optional(),\n      height: z => z.number().optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      loader: async () =>\n        import('./components/CatalogGraphCard').then(m =>\n          compatWrapper(<m.CatalogGraphCard {...config} />),\n        ),\n    });\n  },\n});\n\nconst CatalogGraphPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      selectedKinds: z => z.array(z.string()).optional(),\n      selectedRelations: z => z.array(z.string()).optional(),\n      rootEntityRefs: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      showFilters: z => z.boolean().optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      path: '/catalog-graph',\n      routeRef: convertLegacyRouteRef(catalogGraphRouteRef),\n      loader: () =>\n        import('./components/CatalogGraphPage').then(m =>\n          compatWrapper(<m.CatalogGraphPage {...config} />),\n        ),\n    });\n  },\n});\n\nconst CatalogGraphApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: catalogGraphApiRef,\n      deps: {},\n      factory: () => new DefaultCatalogGraphApi(),\n    }),\n});\n\nexport default createFrontendPlugin({\n  pluginId: 'catalog-graph',\n  info: { packageJson: () => import('../package.json') },\n  routes: {\n    catalogGraph: convertLegacyRouteRef(catalogGraphRouteRef),\n  },\n  externalRoutes: {\n    catalogEntity: convertLegacyRouteRef(catalogEntityRouteRef),\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard, CatalogGraphApi],\n});\n\nexport { catalogGraphTranslationRef } from './translation';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  ApiBlueprint,\n  createFrontendPlugin,\n  PageBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport { EntityCardBlueprint } from '@backstage/plugin-catalog-react/alpha';\nimport { catalogGraphRouteRef, catalogEntityRouteRef } from './routes';\nimport {\n  catalogGraphApiRef,\n  DefaultCatalogGraphApi,\n  Direction,\n} from '@backstage/plugin-catalog-graph';\n\nconst CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({\n  name: 'relations',\n  config: {\n    schema: {\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      // Skipping a \"variant\" config for now, defaulting to \"gridItem\" in the component\n      // For more details, see this comment: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252\n      title: z => z.string().optional(),\n      height: z => z.number().optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      loader: async () =>\n        import('./components/CatalogGraphCard').then(m => (\n          <m.CatalogGraphCard {...config} />\n        )),\n    });\n  },\n});\n\nconst CatalogGraphPage = PageBlueprint.makeWithOverrides({\n  config: {\n    schema: {\n      selectedKinds: z => z.array(z.string()).optional(),\n      selectedRelations: z => z.array(z.string()).optional(),\n      rootEntityRefs: z => z.array(z.string()).optional(),\n      maxDepth: z => z.number().optional(),\n      unidirectional: z => z.boolean().optional(),\n      mergeRelations: z => z.boolean().optional(),\n      direction: z => z.nativeEnum(Direction).optional(),\n      showFilters: z => z.boolean().optional(),\n      curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(),\n      kinds: z => z.array(z.string()).optional(),\n      relations: z => z.array(z.string()).optional(),\n      relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(),\n      zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(),\n    },\n  },\n  factory(originalFactory, { config }) {\n    return originalFactory({\n      path: '/catalog-graph',\n      routeRef: catalogGraphRouteRef,\n      loader: () =>\n        import('./components/CatalogGraphPage').then(m => (\n          <m.CatalogGraphPage {...config} />\n        )),\n    });\n  },\n});\n\nconst CatalogGraphApi = ApiBlueprint.make({\n  params: defineParams =>\n    defineParams({\n      api: catalogGraphApiRef,\n      deps: {},\n      factory: () => new DefaultCatalogGraphApi(),\n    }),\n});\n\nexport default createFrontendPlugin({\n  pluginId: 'catalog-graph',\n  info: { packageJson: () => import('../package.json') },\n  routes: {\n    catalogGraph: catalogGraphRouteRef,\n  },\n  externalRoutes: {\n    catalogEntity: catalogEntityRouteRef,\n  },\n  extensions: [CatalogGraphPage, CatalogGraphEntityCard, CatalogGraphApi],\n});\n\nexport { catalogGraphTranslationRef } from './translation';\n"],"names":[],"mappings":"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"}

package/dist/components/EntityRelationsGraph/EntityRelationsGraph.esm.js

@@ -62,7 +62,8 @@ const EntityRelationsGraph = (props) => {
     renderLabel,
     renderEdge,
     curve,
-    showArrowHeads
+    showArrowHeads,
+    allowFullscreen
   } = props;
   const theme = useTheme();
   const classes = useStyles();
@@ -106,7 +107,8 @@ const EntityRelationsGraph = (props) => {
         labelOffset: theme.spacing(1),
         zoom,
         curve,
-        showArrowHeads
+        showArrowHeads,
+        allowFullscreen
       }
     )
   ] });

package/dist/components/EntityRelationsGraph/EntityRelationsGraph.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityRelationsGraph.esm.js","sources":["../../../src/components/EntityRelationsGraph/EntityRelationsGraph.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  CompoundEntityRef,\n  Entity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { MouseEvent, useEffect, useMemo } from 'react';\nimport { DefaultRenderLabel } from './DefaultRenderLabel';\nimport { DefaultRenderNode } from './DefaultRenderNode';\nimport { RelationPairs } from '../../lib/types';\nimport { Direction, EntityEdge, EntityNode } from '../../lib/types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\n/** @public */\nexport type EntityRelationsGraphClassKey = 'progress' | 'container' | 'graph';\n\nconst useStyles = makeStyles(\n  theme => ({\n    progress: {\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      marginLeft: '-20px',\n      marginTop: '-20px',\n    },\n    container: {\n      position: 'relative',\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    graph: {\n      width: '100%',\n      flex: 1,\n      // Right now there is no good way to style edges between nodes, we have to\n      // fall back to these hacks:\n      '& path[marker-end]': {\n        transition: 'filter 0.1s ease-in-out',\n      },\n      '& path[marker-end]:hover': {\n        filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n      },\n      '& g[data-testid=label]': {\n        transition: 'transform 0s',\n      },\n    },\n  }),\n  { name: 'PluginCatalogGraphEntityRelationsGraph' },\n);\n\n/**\n * @public\n */\nexport type EntityRelationsGraphProps = {\n  rootEntityNames: CompoundEntityRef | CompoundEntityRef[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  entityFilter?: (entity: Entity) => boolean;\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;\n  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;\n  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n};\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {\n  const {\n    rootEntityNames,\n    maxDepth = 2,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    entityFilter,\n    direction = Direction.LEFT_RIGHT,\n    onNodeClick,\n    relationPairs,\n    className,\n    zoom = 'enabled',\n    renderNode,\n    renderLabel,\n    renderEdge,\n    curve,\n    showArrowHeads,\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    entityFilter,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={renderNode || DefaultRenderNode}\n          renderLabel={renderLabel || DefaultRenderLabel}\n          renderEdge={renderEdge}\n          direction={direction}\n          className={classes.graph}\n          fit=\"contain\"\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n          curve={curve}\n          showArrowHeads={showArrowHeads}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityRelationsGraph.esm.js","sources":["../../../src/components/EntityRelationsGraph/EntityRelationsGraph.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  CompoundEntityRef,\n  Entity,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport {\n  DependencyGraph,\n  DependencyGraphTypes,\n} from '@backstage/core-components';\nimport { errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { MouseEvent, useEffect, useMemo } from 'react';\nimport { DefaultRenderLabel } from './DefaultRenderLabel';\nimport { DefaultRenderNode } from './DefaultRenderNode';\nimport { RelationPairs } from '../../lib/types';\nimport { Direction, EntityEdge, EntityNode } from '../../lib/types';\nimport { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';\n\n/** @public */\nexport type EntityRelationsGraphClassKey = 'progress' | 'container' | 'graph';\n\nconst useStyles = makeStyles(\n  theme => ({\n    progress: {\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      marginLeft: '-20px',\n      marginTop: '-20px',\n    },\n    container: {\n      position: 'relative',\n      width: '100%',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    graph: {\n      width: '100%',\n      flex: 1,\n      // Right now there is no good way to style edges between nodes, we have to\n      // fall back to these hacks:\n      '& path[marker-end]': {\n        transition: 'filter 0.1s ease-in-out',\n      },\n      '& path[marker-end]:hover': {\n        filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,\n      },\n      '& g[data-testid=label]': {\n        transition: 'transform 0s',\n      },\n    },\n  }),\n  { name: 'PluginCatalogGraphEntityRelationsGraph' },\n);\n\n/**\n * @public\n */\nexport type EntityRelationsGraphProps = {\n  rootEntityNames: CompoundEntityRef | CompoundEntityRef[];\n  maxDepth?: number;\n  unidirectional?: boolean;\n  mergeRelations?: boolean;\n  kinds?: string[];\n  relations?: string[];\n  entityFilter?: (entity: Entity) => boolean;\n  direction?: Direction;\n  onNodeClick?: (value: EntityNode, event: MouseEvent<unknown>) => void;\n  relationPairs?: RelationPairs;\n  className?: string;\n  zoom?: 'enabled' | 'disabled' | 'enable-on-click';\n  renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;\n  renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;\n  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;\n  curve?: 'curveStepBefore' | 'curveMonotoneX';\n  showArrowHeads?: boolean;\n  allowFullscreen?: boolean;\n};\n\n/**\n * Core building block for custom entity relations diagrams.\n *\n * @public\n */\nexport const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {\n  const {\n    rootEntityNames,\n    maxDepth = 2,\n    unidirectional = true,\n    mergeRelations = true,\n    kinds,\n    relations,\n    entityFilter,\n    direction = Direction.LEFT_RIGHT,\n    onNodeClick,\n    relationPairs,\n    className,\n    zoom = 'enabled',\n    renderNode,\n    renderLabel,\n    renderEdge,\n    curve,\n    showArrowHeads,\n    allowFullscreen,\n  } = props;\n\n  const theme = useTheme();\n  const classes = useStyles();\n  const rootEntityRefs = useMemo(\n    () =>\n      (Array.isArray(rootEntityNames)\n        ? rootEntityNames\n        : [rootEntityNames]\n      ).map(e => stringifyEntityRef(e)),\n    [rootEntityNames],\n  );\n  const errorApi = useApi(errorApiRef);\n  const { loading, error, nodes, edges } = useEntityRelationNodesAndEdges({\n    rootEntityRefs,\n    maxDepth,\n    unidirectional,\n    mergeRelations,\n    kinds,\n    relations,\n    entityFilter,\n    onNodeClick,\n    relationPairs,\n  });\n\n  useEffect(() => {\n    if (error) {\n      errorApi.post(error);\n    }\n  }, [errorApi, error]);\n\n  return (\n    <div className={classNames(classes.container, className)}>\n      {loading && <CircularProgress className={classes.progress} />}\n      {nodes && edges && (\n        <DependencyGraph\n          nodes={nodes}\n          edges={edges}\n          renderNode={renderNode || DefaultRenderNode}\n          renderLabel={renderLabel || DefaultRenderLabel}\n          renderEdge={renderEdge}\n          direction={direction}\n          className={classes.graph}\n          fit=\"contain\"\n          paddingX={theme.spacing(4)}\n          paddingY={theme.spacing(4)}\n          labelPosition={DependencyGraphTypes.LabelPosition.RIGHT}\n          labelOffset={theme.spacing(1)}\n          zoom={zoom}\n          curve={curve}\n          showArrowHeads={showArrowHeads}\n          allowFullscreen={allowFullscreen}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuCA,MAAM,SAAA,GAAY,UAAA;AAAA,EAChB,CAAA,KAAA,MAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,QAAA,EAAU,UAAA;AAAA,MACV,IAAA,EAAM,KAAA;AAAA,MACN,GAAA,EAAK,KAAA;AAAA,MACL,UAAA,EAAY,OAAA;AAAA,MACZ,SAAA,EAAW;AAAA,KACb;AAAA,IACA,SAAA,EAAW;AAAA,MACT,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,MAAA;AAAA,MACP,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,MAAA;AAAA,MACP,IAAA,EAAM,CAAA;AAAA;AAAA;AAAA,MAGN,oBAAA,EAAsB;AAAA,QACpB,UAAA,EAAY;AAAA,OACd;AAAA,MACA,0BAAA,EAA4B;AAAA,QAC1B,MAAA,EAAQ,CAAA,wBAAA,EAA2B,KAAA,CAAM,OAAA,CAAQ,QAAQ,IAAI,CAAA,EAAA;AAAA,OAC/D;AAAA,MACA,wBAAA,EAA0B;AAAA,QACxB,UAAA,EAAY;AAAA;AACd;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,wCAAA;AACV,CAAA;AA+BO,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAqC;AACxE,EAAA,MAAM;AAAA,IACJ,eAAA;AAAA,IACA,QAAA,GAAW,CAAA;AAAA,IACX,cAAA,GAAiB,IAAA;AAAA,IACjB,cAAA,GAAiB,IAAA;AAAA,IACjB,KAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAY,SAAA,CAAU,UAAA;AAAA,IACtB,WAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,SAAA;AAAA,IACP,UAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAA,CACG,KAAA,CAAM,OAAA,CAAQ,eAAe,CAAA,GAC1B,eAAA,GACA,CAAC,eAAe,CAAA,EAClB,GAAA,CAAI,CAAA,CAAA,KAAK,kBAAA,CAAmB,CAAC,CAAC,CAAA;AAAA,IAClC,CAAC,eAAe;AAAA,GAClB;AACA,EAAA,MAAM,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,KAAA,EAAO,KAAA,KAAU,8BAAA,CAA+B;AAAA,IACtE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,QAAA,CAAS,KAAK,KAAK,CAAA;AAAA,IACrB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,KAAK,CAAC,CAAA;AAEpB,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,OAAA,CAAQ,SAAA,EAAW,SAAS,CAAA,EACpD,QAAA,EAAA;AAAA,IAAA,OAAA,oBAAW,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAW,OAAA,CAAQ,QAAA,EAAU,CAAA;AAAA,IAC1D,SAAS,KAAA,oBACR,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA;AAAA,QACA,YAAY,UAAA,IAAc,iBAAA;AAAA,QAC1B,aAAa,WAAA,IAAe,kBAAA;AAAA,QAC5B,UAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAW,OAAA,CAAQ,KAAA;AAAA,QACnB,GAAA,EAAI,SAAA;AAAA,QACJ,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QACzB,QAAA,EAAU,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QACzB,aAAA,EAAe,qBAAqB,aAAA,CAAc,KAAA;AAAA,QAClD,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC5B,IAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -165,6 +165,7 @@ type EntityRelationsGraphProps = {
     renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
     curve?: 'curveStepBefore' | 'curveMonotoneX';
     showArrowHeads?: boolean;
+    allowFullscreen?: boolean;
 };
 /**
  * Core building block for custom entity relations diagrams.

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-catalog-graph";
-var version = "0.5.3-next.2";
+var version = "0.5.4-next.0";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "catalog-graph",
@@ -50,7 +50,6 @@ var scripts = {
 var dependencies = {
 	"@backstage/catalog-client": "workspace:^",
 	"@backstage/catalog-model": "workspace:^",
-	"@backstage/core-compat-api": "workspace:^",
 	"@backstage/core-components": "workspace:^",
 	"@backstage/core-plugin-api": "workspace:^",
 	"@backstage/frontend-plugin-api": "workspace:^",

package/dist/package.json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"package.json.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/translation.esm.js

@@ -13,7 +13,7 @@ const catalogGraphTranslationRef = createTranslationRef({
       supportButtonDescription: "Start tracking your component in by adding it to the software catalog.",
       simplifiedSwitchLabel: "Simplified",
       mergeRelationsSwitchLabel: "Merge relations",
-      zoomOutDescription: "Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.",
+      zoomOutDescription: "Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.",
       curveFilter: {
         title: "Curve",
         curveMonotoneX: "Monotone X",

package/dist/translation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { createTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @alpha */\nexport const catalogGraphTranslationRef = createTranslationRef({\n  id: 'catalog-graph',\n  messages: {\n    catalogGraphCard: {\n      title: 'Relations',\n      deepLinkTitle: 'View graph',\n    },\n    catalogGraphPage: {\n      title: 'Catalog Graph',\n      filterToggleButtonTitle: 'Filters',\n      supportButtonDescription:\n        'Start tracking your component in by adding it to the software catalog.',\n      simplifiedSwitchLabel: 'Simplified',\n      mergeRelationsSwitchLabel: 'Merge relations',\n      zoomOutDescription:\n        'Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.',\n      curveFilter: {\n        title: 'Curve',\n        curveMonotoneX: 'Monotone X',\n        curveStepBefore: 'Step Before',\n      },\n      directionFilter: {\n        title: 'Direction',\n        leftToRight: 'Left to right',\n        rightToLeft: 'Right to left',\n        topToBottom: 'Top to bottom',\n        bottomToTop: 'Bottom to top',\n      },\n      maxDepthFilter: {\n        title: 'Max depth',\n        inputPlaceholder: '∞ Infinite',\n        clearButtonAriaLabel: 'clear max depth',\n      },\n      selectedKindsFilter: {\n        title: 'Kinds',\n      },\n      selectedRelationsFilter: {\n        title: 'Relations',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,6BAA6B,oBAAA,CAAqB;AAAA,EAC7D,EAAA,EAAI,eAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,gBAAA,EAAkB;AAAA,MAChB,KAAA,EAAO,WAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,KAAA,EAAO,eAAA;AAAA,MACP,uBAAA,EAAyB,SAAA;AAAA,MACzB,wBAAA,EACE,wEAAA;AAAA,MACF,qBAAA,EAAuB,YAAA;AAAA,MACvB,yBAAA,EAA2B,iBAAA;AAAA,MAC3B,kBAAA,EACE,kHAAA;AAAA,MACF,WAAA,EAAa;AAAA,QACX,KAAA,EAAO,OAAA;AAAA,QACP,cAAA,EAAgB,YAAA;AAAA,QAChB,eAAA,EAAiB;AAAA,OACnB;AAAA,MACA,eAAA,EAAiB;AAAA,QACf,KAAA,EAAO,WAAA;AAAA,QACP,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa;AAAA,OACf;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,KAAA,EAAO,WAAA;AAAA,QACP,gBAAA,EAAkB,iBAAA;AAAA,QAClB,oBAAA,EAAsB;AAAA,OACxB;AAAA,MACA,mBAAA,EAAqB;AAAA,QACnB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,uBAAA,EAAyB;AAAA,QACvB,KAAA,EAAO;AAAA;AACT;AACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { createTranslationRef } from '@backstage/frontend-plugin-api';\n\n/** @alpha */\nexport const catalogGraphTranslationRef = createTranslationRef({\n  id: 'catalog-graph',\n  messages: {\n    catalogGraphCard: {\n      title: 'Relations',\n      deepLinkTitle: 'View graph',\n    },\n    catalogGraphPage: {\n      title: 'Catalog Graph',\n      filterToggleButtonTitle: 'Filters',\n      supportButtonDescription:\n        'Start tracking your component in by adding it to the software catalog.',\n      simplifiedSwitchLabel: 'Simplified',\n      mergeRelationsSwitchLabel: 'Merge relations',\n      zoomOutDescription:\n        'Use pinch & zoom to move around the diagram. Click to change active node, shift click to navigate to entity.',\n      curveFilter: {\n        title: 'Curve',\n        curveMonotoneX: 'Monotone X',\n        curveStepBefore: 'Step Before',\n      },\n      directionFilter: {\n        title: 'Direction',\n        leftToRight: 'Left to right',\n        rightToLeft: 'Right to left',\n        topToBottom: 'Top to bottom',\n        bottomToTop: 'Bottom to top',\n      },\n      maxDepthFilter: {\n        title: 'Max depth',\n        inputPlaceholder: '∞ Infinite',\n        clearButtonAriaLabel: 'clear max depth',\n      },\n      selectedKindsFilter: {\n        title: 'Kinds',\n      },\n      selectedRelationsFilter: {\n        title: 'Relations',\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,6BAA6B,oBAAA,CAAqB;AAAA,EAC7D,EAAA,EAAI,eAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,gBAAA,EAAkB;AAAA,MAChB,KAAA,EAAO,WAAA;AAAA,MACP,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,KAAA,EAAO,eAAA;AAAA,MACP,uBAAA,EAAyB,SAAA;AAAA,MACzB,wBAAA,EACE,wEAAA;AAAA,MACF,qBAAA,EAAuB,YAAA;AAAA,MACvB,yBAAA,EAA2B,iBAAA;AAAA,MAC3B,kBAAA,EACE,8GAAA;AAAA,MACF,WAAA,EAAa;AAAA,QACX,KAAA,EAAO,OAAA;AAAA,QACP,cAAA,EAAgB,YAAA;AAAA,QAChB,eAAA,EAAiB;AAAA,OACnB;AAAA,MACA,eAAA,EAAiB;AAAA,QACf,KAAA,EAAO,WAAA;AAAA,QACP,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa,eAAA;AAAA,QACb,WAAA,EAAa;AAAA,OACf;AAAA,MACA,cAAA,EAAgB;AAAA,QACd,KAAA,EAAO,WAAA;AAAA,QACP,gBAAA,EAAkB,iBAAA;AAAA,QAClB,oBAAA,EAAsB;AAAA,OACxB;AAAA,MACA,mBAAA,EAAqB;AAAA,QACnB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,uBAAA,EAAyB;AAAA,QACvB,KAAA,EAAO;AAAA;AACT;AACF;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-graph",
-  "version": "0.5.3-next.2",
+  "version": "0.5.4-next.0",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "catalog-graph",
@@ -61,13 +61,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/catalog-client": "1.12.1-next.0",
-    "@backstage/catalog-model": "1.7.6-next.0",
-    "@backstage/core-compat-api": "0.5.4-next.0",
-    "@backstage/core-components": "0.18.3-next.2",
-    "@backstage/core-plugin-api": "1.11.2-next.1",
-    "@backstage/frontend-plugin-api": "0.12.2-next.2",
-    "@backstage/plugin-catalog-react": "1.21.3-next.2",
+    "@backstage/catalog-client": "1.12.1",
+    "@backstage/catalog-model": "1.7.6",
+    "@backstage/core-components": "0.18.4-next.0",
+    "@backstage/core-plugin-api": "1.12.1-next.0",
+    "@backstage/frontend-plugin-api": "0.13.2-next.0",
+    "@backstage/plugin-catalog-react": "1.21.4-next.0",
     "@backstage/types": "1.2.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -79,11 +78,11 @@
     "react-use": "^17.2.4"
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.5-next.1",
-    "@backstage/core-app-api": "1.19.2-next.1",
-    "@backstage/dev-utils": "1.1.17-next.1",
-    "@backstage/plugin-catalog": "1.32.0-next.1",
-    "@backstage/test-utils": "1.7.13-next.0",
+    "@backstage/cli": "0.34.6-next.0",
+    "@backstage/core-app-api": "1.19.3-next.0",
+    "@backstage/dev-utils": "1.1.18-next.0",
+    "@backstage/plugin-catalog": "1.32.1-next.0",
+    "@backstage/test-utils": "1.7.14-next.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",